[Side panel] WC visual parity bug

[enzocol]

#8454 — These are the visual bugs we discovered in the visual parity work stream.

Tasks

• Review the documented examples in the Figma file .
• Sizes: The XL size is missing from the options
• Scrolling title animation: visual overlap stuck in between states. When the panel has minimal scroll, it prevents the completion of animation.
• Scrolling title animation: The close button and AI icon are lost (scrolled out of view) when the content is scrolled.
• Header: The size of the header, when scrolled (condensed), does not resize to hug the title text as it has a fix size. This seems to be part of the title or subtitle, as it retain the spacing when actions are enabled.
• Action toolbar: Missing spacing between primary and ghost actions. Add 8px gap after primary button.
• AI background: The AI background layer is not blending with the panel layer and the header. The blue aura fades into white instead of matching the panel layer. This issue can be seen in the following themes: White, G90, G100.
• Panel border: The panel right border border-inline-end is using incorrect token. Edit to be border-subdle-01.
• Panel border: The panel right border, should only be visible on left panel placement. Currently is visible also on the default view.
• Action items: Across the large and xtra large size, the Ghost button—when paired with other options such as "three buttons with ghost"—does not resize properly to fill the available area. This should take the full width available and have the text 16px from the left.
• Action items: Tertiary button is not an option, use ghost instead.
• Action items: The primary button should always sit on top when multiple actions are in place.
• Action items: When more than 1 action items are chosen, there should be a separator between buttons.
• Accessibility: Focus trap skip the header area and goes directly within the content.
• Accessibility: When focusing+enter to open the AI label, the keyboard navigation gets stuck and focused on the AI icon (after closing the popover). This restrict navigation and there is no way to move to the next item.
• Storybook: Missing feature flag option
• Storybook: Disparity of options across action items and sizes.

[amal-k-joy]

ref Composable sidepanel #8694