Sidebar: "duration" prop does not appear to do anything

[caguthrie]

Bug Report

Steps

1. Visit https://react.semantic-ui.com/modules/sidebar/#types-sidebar
2. Add the prop duration={5000} in the <Sidebar/> component of the first example on the page
3. Open the sidebar in that example

Expected Result

The Sidebar animation is slower

Actual Result

Nothing is changed

Version

0.83.0

It doesn't look like this prop works with any <Sidebar/> configuration unless I'm not understanding how duration is supposed to work.

[welcome]

👋 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.

[layershifter]

I will check this issue tomorrow, it seems that it does not work in SUI core, too 😭

[Fabianopb]

The duration of the animation is handled by SUI's css in a transition and the current implementation of duration prop in SUIR seems to actually create a delay rather than touching the animation speed: https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Sidebar/Sidebar.js#L123

As SUIR doesn't include SUI's styles, handling the duration of the animation here would probably mean to override SUI's rule (through inline style maybe?). Does this make sense? Is that a reasonable approach?

[layershifter]

@Fabianopb I think that the best way will be just drop duration prop at all in SUIR. Feel free to open PR 👍

[Fabianopb]

Alright, it could make sense to drop that for now. Just as a sidenote I'm using the Sidebar in one of my projects and I managed to change the duration of the animation with a few simple css overrides.

I can start working on this issue soon @layershifter!