feat(sbb-selection-expansion-panel): introduce size s

src/elements/core/mixins/panel-common.scss

@@ -34,6 +34,11 @@
   outline: none !important;
 }
 
+:host([size='s']) {
+  --sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs)
+    var(--sbb-spacing-responsive-xxxs);
+}
+
 :host([color='milk']) {
   --sbb-selection-panel-background: var(
     --sbb-selection-expansion-panel-inner-background,
@@ -100,6 +105,15 @@
   overflow: hidden;
 }
 
+slot[name='suffix'],
+slot[name='subtext'] {
+  @include sbb.text-m--regular;
+
+  :host([size='s']) & {
+    @include sbb.text-s--regular;
+  }
+}
+
 slot[name='suffix'] {
   color: var(--sbb-selection-panel-suffix-color);
 }

src/elements/selection-expansion-panel/__snapshots__/selection-expansion-panel.snapshot.spec.snap.js

@@ -3,6 +3,7 @@ export const snapshots = {};
 
 snapshots["sbb-selection-expansion-panel renders DOM"] = 
 `<sbb-selection-expansion-panel
+  data-size="m"
   data-slot-names="content unnamed"
   data-state="closed"
 >

src/elements/selection-expansion-panel/readme.md

@@ -62,6 +62,26 @@ It's also possible to display the `sbb-selection-expansion-panel` without border
 <sbb-selection-expansion-panel borderless> ... </sbb-selection-expansion-panel>
 ```
 
+The component has no `size` property but, when slotted in a `sbb-radio-button-group` or in a `sbb-checkbox-group`,
+it adapts to the parent `size` (`m` or `s`); if there's no wrapping group component,
+it adapts its `size` to the slotted `sbb-radio-button-panel` or in a `sbb-checkbox-panel`.
+
+```html
+<!-- Adapts to the size of the `sbb-checkbox-group`-->
+<sbb-checkbox-group size="s">
+  <sbb-selection-expansion-panel>
+    <sbb-checkbox-panel> ... </sbb-checkbox-panel>
+    <div slot="content">Inner Content</div>
+  </sbb-selection-expansion-panel>
+</sbb-checkbox-group>
+
+<!-- Adapts to the size of the `sbb-checkbox-panel`-->
+<sbb-selection-expansion-panel>
+  <sbb-checkbox-panel size="s"> ... </sbb-checkbox-panel>
+  <div slot="content">Inner Content</div>
+</sbb-selection-expansion-panel>
+```
+
 <!-- Auto Generated Below -->
 
 ## Properties

src/elements/selection-expansion-panel/selection-expansion-panel.scss

@@ -34,6 +34,10 @@ $open-anim-opacity-to: 1;
   display: contents;
 }
 
+:host([data-size='s']) {
+  --sbb-selection-expansion-panel-content-padding-inline: var(--sbb-spacing-responsive-xxxs);
+}
+
 :host([color='milk']) {
   --sbb-selection-expansion-panel-background: var(--sbb-color-milk);
 }

src/elements/selection-expansion-panel/selection-expansion-panel.spec.ts

@@ -693,4 +693,96 @@ describe(`sbb-selection-expansion-panel`, () => {
       expect(checkboxes[5]).not.to.have.attribute('disabled');
     });
   });
+
+  describe('size s', () => {
+    it('checkbox group', async () => {
+      const root = await fixture(html`
+        <sbb-checkbox-group size="s">
+          <sbb-selection-expansion-panel id="one">
+            <sbb-checkbox-panel> Value 1 </sbb-checkbox-panel>
+            <div slot="content">Inner content</div>
+          </sbb-selection-expansion-panel>
+          <sbb-selection-expansion-panel id="two">
+            <sbb-checkbox-panel> Value 2 </sbb-checkbox-panel>
+            <div slot="content">Inner content</div>
+          </sbb-selection-expansion-panel>
+        </sbb-checkbox-group>
+      `);
+      await waitForLitRender(root);
+      expect(
+        root.querySelector('sbb-selection-expansion-panel#one')!.getAttribute('data-size'),
+      ).to.be.equal('s');
+      expect(
+        root.querySelector('sbb-selection-expansion-panel#two')!.getAttribute('data-size'),
+      ).to.be.equal('s');
+      root.setAttribute('size', 'm');
+      await waitForLitRender(root);
+      expect(
+        root.querySelector('sbb-selection-expansion-panel#one')!.getAttribute('data-size'),
+      ).to.be.equal('m');
+      expect(
+        root.querySelector('sbb-selection-expansion-panel#two')!.getAttribute('data-size'),
+      ).to.be.equal('m');
+    });
+
+    it('checkbox panel', async () => {
+      const root = await fixture(html`
+        <sbb-selection-expansion-panel>
+          <sbb-checkbox-panel size="s"> Value </sbb-checkbox-panel>
+          <div slot="content">Inner content</div>
+        </sbb-selection-expansion-panel>
+      `);
+      await waitForLitRender(root);
+      expect(root.getAttribute('data-size')).to.be.equal('s');
+      const panel = root.querySelector('sbb-checkbox-panel')!;
+      panel.setAttribute('size', 'm');
+      await waitForLitRender(root);
+      expect(root.getAttribute('data-size')).to.be.equal('m');
+    });
+
+    it('radio group', async () => {
+      const root = await fixture(html`
+        <sbb-radio-button-group size="s">
+          <sbb-selection-expansion-panel id="one">
+            <sbb-radio-button-panel> Value 1 </sbb-radio-button-panel>
+            <div slot="content">Inner content</div>
+          </sbb-selection-expansion-panel>
+          <sbb-selection-expansion-panel id="two">
+            <sbb-radio-button-panel> Value 2 </sbb-radio-button-panel>
+            <div slot="content">Inner content</div>
+          </sbb-selection-expansion-panel>
+        </sbb-radio-button-group>
+      `);
+      await waitForLitRender(root);
+      expect(
+        root.querySelector('sbb-selection-expansion-panel#one')!.getAttribute('data-size'),
+      ).to.be.equal('s');
+      expect(
+        root.querySelector('sbb-selection-expansion-panel#two')!.getAttribute('data-size'),
+      ).to.be.equal('s');
+      root.setAttribute('size', 'm');
+      await waitForLitRender(root);
+      expect(
+        root.querySelector('sbb-selection-expansion-panel#one')!.getAttribute('data-size'),
+      ).to.be.equal('m');
+      expect(
+        root.querySelector('sbb-selection-expansion-panel#two')!.getAttribute('data-size'),
+      ).to.be.equal('m');
+    });
+
+    it('radio panel', async () => {
+      const root = await fixture(html`
+        <sbb-selection-expansion-panel>
+          <sbb-radio-button-panel size="s"> Value </sbb-radio-button-panel>
+          <div slot="content">Inner content</div>
+        </sbb-selection-expansion-panel>
+      `);
+      await waitForLitRender(root);
+      expect(root.getAttribute('data-size')).to.be.equal('s');
+      const panel = root.querySelector('sbb-radio-button-panel')!;
+      panel.setAttribute('size', 'm');
+      await waitForLitRender(root);
+      expect(root.getAttribute('data-size')).to.be.equal('m');
+    });
+  });
 });