Animate settings sidebar #320
Conversation
| @@ -22,7 +22,12 @@ export interface SettingsSidebarProps { | |||
| overrides: Partial<NormalizeIssueConfig & { fields: string[] }> | |||
| ) => void; | |||
| } | |||
|
|
|||
| const SETTINGS_WIDTH: Record<string, string> = { | |||
| SOURCES: "w-96", | |||
There was a problem hiding this comment.
Explicit widths have to be provided for the width transition to work.
It does not work with w-full or a custom value w-[600px]
There was a problem hiding this comment.
Let's revisit this with Justin
There was a problem hiding this comment.
Why is this necessary? Can't we calculate the width at the time of the animation and temporarily hard-code it?
We shouldn't have to remember to update these values if the HTML/CSS structure changes in one of the panels.
There was a problem hiding this comment.
I agree that is not ideal, but if we want to dynamically calculate its width (especially that each setting panel have a different width). The setting panel needs to be rendered first in order to calculate its width, we can not calculate it in advance.
If we do that, this means that first render will be without any transition animation and then subsequent renders will have access to its width and can apply the width transition.
Or did you mean something else?
Once I have some downtime on Annuity Association, I can and try and see if there are other better alternatives.
There was a problem hiding this comment.
Another non-ideal solution is to render an absolutely positioned hidden version of the selected setting panel that we can use to calculate the width in advance
| <div | ||
| className={`overflow-hidden h-full transition-[width] duration-500 ease-in-out ${settingsWidth}`} | ||
| onTransitionEnd={() => { | ||
| setSettingVisible(!!showSettings); |
There was a problem hiding this comment.
In order to handle the setting content not looking weird as the transition is happening. A new flag is used to determine when the transition ends before displaying the content
There was a problem hiding this comment.
We need to make this work so it doesn't have hard-coded panel widths. At the time of animation, we should be able to read the DOM and temporarily set a fixed width if that is helpful. (though using tailwind classes is probably not going to work ... we'd need to set the style.width.
| @@ -22,7 +22,12 @@ export interface SettingsSidebarProps { | |||
| overrides: Partial<NormalizeIssueConfig & { fields: string[] }> | |||
| ) => void; | |||
| } | |||
|
|
|||
| const SETTINGS_WIDTH: Record<string, string> = { | |||
| SOURCES: "w-96", | |||
There was a problem hiding this comment.
Why is this necessary? Can't we calculate the width at the time of the animation and temporarily hard-code it?
We shouldn't have to remember to update these values if the HTML/CSS structure changes in one of the panels.
Add a width transition to the SettingsSidebar items
Screen.Recording.2025-02-06.at.11.43.50.PM.mov