Story with accordion + panel toolbar + stacked panel

[wadjih-bencheikh18]

closes : https://github.com/zakodium-oss/react-science/issues/616

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	15ed5ce
Status:	✅  Deploy successful!
Preview URL:	https://665b8f70.react-science.pages.dev
Branch Preview URL:	https://616-story-with-accordion---p.react-science.pages.dev

View logs

[codecov-commenter]

Codecov Report

Attention: 161 lines in your changes are missing coverage. Please review.

Comparison is base (b4f919d) 23.14% compared to head (15ed5ce) 22.96%.

Files	Patch %	Lines
stories/components/panel-header.stories.tsx	0.00%	132 Missing and 1 partial :warning:
src/components/toolbar/PanelPreferencesToolbar.tsx	40.00%	21 Missing :warning:
...s/components/panel-preferences-toolbar.stories.tsx	0.00%	7 Missing :warning:

:exclamation: Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## main #633 +/- ## ========================================== - Coverage 23.14% 22.96% -0.19% ========================================== Files 221 221 Lines 12885 13039 +154 Branches 235 235 ========================================== + Hits 2982 2994 +12 - Misses 9814 9956 +142 Partials 89 89 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[wadjih-bencheikh18]

I couldn't understand why there's this type error

interface PanelInfo {
  content: string;
}

The error : PanelInfo is not constraint of object

[wadjih-bencheikh18]

The error : PanelInfo is not constraint of object

Fixed, @stropitek PR ready

[stropitek]

The result looks ok, but have you tried to enable the animation?

[wadjih-bencheikh18]

The result looks ok, but have you tried to enable the animation?

In the previous implentation the headers wasn't included in the panels so there was no animation because I was just opening one stuckPanel and close it so the stack has only one element max.

But now the initial panelheader is also a stackpanel and closing header is a part of the other panels, so now we have the animation because we toggle between stackpanels

[stropitek]

The animation is strange and looks different than what's in the blueprint documentation site. The second panel is supposed to overlay over the first one, but without the first panel moving.

Also there are scroll bars appearing.

[wadjih-bencheikh18]

@stropitek Fixed could you please check?

[stropitek]

Can you put some kind of title here?

The first animation is coming from the right, the the subsequent ones from the left. Can you make it such that it always comes from the right?

https://github.com/zakodium-oss/react-science/assets/4118690/82633c6a-42d6-4c9b-9e49-941fcdf4a582

[wadjih-bencheikh18]

The first animation is coming from the right, the the subsequent ones from the left. Can you make it such that it always comes from the right?

For the animation, I tried to copy the exact example in blueprint js https://blueprintjs.com/docs/#core/components/panel-stack2 and I got the same problem. It may be because the storybook container or a bug. So I will try it first outside storybook

[wadjih-bencheikh18]

i confirmed that the storybook container caused that, I tried it in the app. and works perfectly

[stropitek]

I will merge this after you fixed the conflicts.

I already prepared https://github.com/zakodium-oss/react-science/issues/643 which is a continuation of this.

[wadjih-bencheikh18]

@stropitek I used the uncontrolled PanelStack2