refactor(selection-panel): improved open/close flow and animation

scripts/chromatic-stories-generator.ts

@@ -63,7 +63,7 @@ async function generateChromaticStory(
     return 'no params found';
   }
 
-  const { disableSnapshot, ...chromaticParameters } = parameters?.chromatic ?? {};
+  const { disableSnapshot, fixedHeight, ...chromaticParameters } = parameters?.chromatic ?? {};
   if (!parameters) {
     return 'no params found';
   } else if (disableSnapshot !== undefined) {
@@ -74,14 +74,35 @@ async function generateChromaticStory(
   const relativeImport = basename(storyFile).replace(/\.ts$/, '');
   const chromaticImport = relative(dirname(targetStoryFile), chromaticFile).replace(/\.ts$/, '');
 
+  /**
+   * The `fixedHeight` param forces the height of the snapshot on chromatic.
+   * It might be useful in cases where some content is cut off at the end of a snapshot
+   * The max fixedHeight we can use is 17'000 (17k * 1440 =~ 25kk)
+   * Now, the max snapshot size is 25'000'000px.
+   *
+   * Example:
+   * ```
+   *  ...
+   *  parameters: {
+   *    chromatic: { fixedHeight: '17000px', ... },
+   *    ...
+   *  }
+   * ```
+   */
+  const fixedHeightStyle = fixedHeight ? `style="min-height: ${fixedHeight}"` : '';
+
   const chromaticConfig = Object.entries(chromaticParameters)
     .map(([key, value]) => `${key}: ${JSON.stringify(value)}, `)
     .join('');
   const storyFileContent = `import type { Meta, StoryObj } from '@storybook/web-components';
 import config, * as stories from './${relativeImport}';
 import { combineStories } from '${chromaticImport}';
+import { html } from 'lit';
 
 const meta: Meta = {
+  decorators: [
+    (story) => html\` <div ${fixedHeightStyle}>\${story()}</div> \`,
+  ],
   parameters: {
     backgrounds: {
       disable: true,

src/components/checkbox/checkbox/checkbox.ts

@@ -111,7 +111,13 @@ export class SbbCheckboxElement extends UpdateScheduler(LitElement) {
   }
   private _size: SbbCheckboxSize = 'm';
 
-  /** Whether the input is the main input of a selection panel. */
+  /**
+   * Whether the input is the main input of a selection panel.
+   * @internal
+   */
+  public get isSelectionPanelInput(): boolean {
+    return this._isSelectionPanelInput;
+  }
   @state() private _isSelectionPanelInput = false;
 
   /** The label describing whether the selection panel is expanded (for screen readers only). */

src/components/notification/notification.stories.ts

@@ -237,9 +237,7 @@ const meta: Meta = {
   decorators: [
     (story, context) =>
       html`<div
-        style="padding: 2rem;display: flex;gap: var(--sbb-spacing-fixed-4x);flex-direction: column;${isChromatic()
-          ? 'min-height: 1000px;'
-          : ''}"
+        style="padding: 2rem;display: flex;gap: var(--sbb-spacing-fixed-4x);flex-direction: column;"
       >
         ${trigger(context.args)}
         <div class="notification-container" style="display: flex; flex-direction: column;">
@@ -250,6 +248,7 @@ const meta: Meta = {
     withActions as Decorator,
   ],
   parameters: {
+    chromatic: { fixedHeight: '7500px' },
     actions: {
       handles: [
         SbbNotificationElement.events.didOpen,

src/components/radio-button/radio-button/radio-button.ts

@@ -115,7 +115,11 @@ export class SbbRadioButtonElement extends UpdateScheduler(LitElement) {
 
   /**
    * Whether the input is the main input of a selection panel.
+   * @internal
    */
+  public get isSelectionPanelInput(): boolean {
+    return this._isSelectionPanelInput;
+  }
   @state() private _isSelectionPanelInput = false;
 
   /**

src/components/selection-panel/readme.md

@@ -86,12 +86,12 @@ It's also possible to display the `sbb-selection-panel` without border by settin
 
 ## Events
 
-| Name        | Type                                        | Description                                                       | Inherited From |
-| ----------- | ------------------------------------------- | ----------------------------------------------------------------- | -------------- |
-| `willOpen`  | `CustomEvent<void>`                         | Emits whenever the content section starts the opening transition. |                |
-| `didOpen`   | `CustomEvent<void>`                         | Emits whenever the content section is opened.                     |                |
-| `willClose` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the content section begins the closing transition. |                |
-| `didClose`  | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the content section is closed.                     |                |
+| Name        | Type                | Description                                                       | Inherited From |
+| ----------- | ------------------- | ----------------------------------------------------------------- | -------------- |
+| `willOpen`  | `CustomEvent<void>` | Emits whenever the content section starts the opening transition. |                |
+| `didOpen`   | `CustomEvent<void>` | Emits whenever the content section is opened.                     |                |
+| `willClose` | `CustomEvent<void>` | Emits whenever the content section begins the closing transition. |                |
+| `didClose`  | `CustomEvent<void>` | Emits whenever the content section is closed.                     |                |
 
 ## Slots