[Loader, Dimmer] Loader don't work properly with Fomantic-UI

Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration

https://react.semantic-ui.com

MIT License

13.23k stars 4.05k forks source link

[Loader, Dimmer] Loader don't work properly with Fomantic-UI #3910

Open AKorezin opened 4 years ago

AKorezin commented 4 years ago

Bug Report

I have found that Fomantic-UI don't work properly with this pr because of additional div inside of dimmer. Then I've created an issue in Fomantic-UI. @lubber-de recommended me to write bug report here.

Yes, please address this at the SUI React Repo, because also the SUI Docs for loader tell you to create the loader as direct child of the dimmer itself.

Steps

Use fomantic-ui-css
Write code
```
<Dimmer acrive>
<Loader />
</Dimmer>
```

Expected Result

<div class="ui active transition visible dimmer">
  <div class="ui loader">
  </div>
</div>

Actual Result

Version

fomantic-ui-css: 2.8.4, semantic-ui-react: 0.88.2

Testcase

https://codesandbox.io/s/semantic-ui-react-ynjh4

welcome[bot] commented 4 years ago

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

callain commented 4 years ago

I am actually upgrading my projects from Semantic UI React (0.82.x) + Semantic UI CSS (x.y.z) to Semantic UI React (1.2.1) + Fomantic UI CSS (2.8.6) and facing the same issue.

As I think it would block my tasks from getting validated by our QAs, can I help on this ?

Edit: Or should we specifically does this everywhere ?

<Dimmer active={isDimmerActive} inverted>
    <Loader active={isDimmerActive} />
</Dimmer>

layershifter commented 4 years ago

There is no way currently to override markup in Dimmer component, looks that having active on both Dimmer & Loader is enough now to workaround it 👍

callain commented 4 years ago

It is enough indeed, it's easy to replace this usage everywhere so I am gonna do it

AKorezin commented 4 years ago

@callain check the style of Loader in code sample https://codesandbox.io/s/semantic-ui-react-ynjh4 you'll see the difference.

callain commented 4 years ago

@AKorezin I see! The last one circle use a lighter grey and therefore is more visible.

I didn't expect a difference, luckily I use only inverted Dimmers and it doesn't seem to be different