Clay: ClayPanel makes a little visual jump when being closed

[sandrodw3]

• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Is there an example you can provide via codesandbox.com?

Easiest, we only have to go to https://clayui.com/docs/components/panel.html#clay-sidebar, and in the first example, change displayType from secondary to unstyled

What are the steps to reproduce?

1) Render a ClayPanel with displayType unstyled
2) Open and close the panel
3) We can see how the panel makes a "little visual jump" when being closed

What is the expected result?

The panel is closed smoothly and it doesn't make any jump

Environment

| Tech | Version |
| ----- | ------- |
| Clay | v3.28.0 |

[pat270]

This has to do with margin-bottom: 1rem on the panel. If you wrap the panels with <div class="panel-group panel-group-flush"> it will solve the visual jump. This was done because of panel-secondary. Margin on panel-body doesn't work because there is a border around the panel.

Since panel-unstyled is different (no border) we can add margin hacks on panel-body and panel-footer to create spacing between panels that aren't accordions if we don't want/can't wrap them in panel-group panel-group-flush.

[matuzalemsteles]

Hey @pat270 Would the first option have a different visual effect or not? we can't do this today because we have two components for these two purposes, for example, to do this:

<ClayPanel.Group flush>
  <ClayPanel />
</ClayPanel.Group>

It would be nice not to need to wrap, because we would have to recommend using Group with flush for when the Panel is unstyled.

[pat270]

@matuzalemsteles I think we can make it work the same both ways. Lexicon added additional rules https://liferay.design/lexicon/core-components/section/.

[matuzalemsteles]

@pat270 great, so I think we can go with that and update. If I'm not mistaken, unstyled should also adopt the new colors right? I don't remember if anyone has ever opened an issue for that.

[pat270]

It's better to let the text color propagate. Sheets also use this and the color is darker. https://liferay.design/lexicon/core-components/forms/forms-sheet/

[matuzalemsteles]

Hmm makes sense.

[github-actions[bot]]

This issue has been merged and will be released in DXP at https://issues.liferay.com/browse/LPS-130566