feat(sbb-mini-button-group): initial implementation

src/elements/alert/alert-group/alert-group.spec.ts

@@ -52,7 +52,11 @@ describe(`sbb-alert-group`, () => {
     // Then one alert should be removed from sbb-alert-group, tabindex should be set to 0,
     // focus should be on sbb-alert-group and accessibility title should still be rendered.
     // Moreover, didDismissAlert event should have been fired.
-    await waitForCondition(() => didDismissAlertSpy.events.length === 1);
+    await waitForCondition(
+      () =>
+        didDismissAlertSpy.events.length === 1 &&
+        element.querySelectorAll('sbb-alert').length === 1,
+    );
     expect(didDismissAlertSpy.count).to.be.equal(1);
     expect(element.querySelectorAll('sbb-alert').length).to.be.equal(1);
     expect(element.tabIndex).to.be.equal(0);
@@ -73,7 +77,11 @@ describe(`sbb-alert-group`, () => {
 
     // Then the alert should be removed from sbb-alert-group, tabindex should be set to 0,
     // focus should be on sbb-alert-group, accessibility title should be removed and empty event should be fired.
-    await waitForCondition(() => didDismissAlertSpy.events.length === 2);
+    await waitForCondition(
+      () =>
+        didDismissAlertSpy.events.length === 2 &&
+        element.querySelectorAll('sbb-alert').length === 0,
+    );
     expect(didDismissAlertSpy.count).to.be.equal(2);
     expect(element.querySelectorAll('sbb-alert').length).to.be.equal(0);
     expect(element.tabIndex).to.be.equal(0);

src/elements/button.ts

@@ -3,6 +3,7 @@ export * from './button/secondary-button.js';
 export * from './button/tertiary-button.js';
 export * from './button/transparent-button.js';
 export * from './button/mini-button.js';
+export * from './button/mini-button-group.js';
 export * from './button/button-link.js';
 export * from './button/secondary-button-link.js';
 export * from './button/tertiary-button-link.js';

src/elements/button/mini-button-group.ts

@@ -0,0 +1 @@
+export * from './mini-button-group/mini-button-group.js';

src/elements/button/mini-button-group/__snapshots__/mini-button-group.snapshot.spec.snap.js

@@ -0,0 +1,209 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    },
+    {
+      "role": "button",
+      "name": ""
+    },
+    {
+      "role": "button",
+      "name": ""
+    },
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot A11y tree Chrome */
+
+snapshots["A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    },
+    {
+      "role": "button",
+      "name": ""
+    },
+    {
+      "role": "button",
+      "name": ""
+    },
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot A11y tree Firefox */
+
+snapshots["sbb-mini-button-group renders DOM"] = 
+`<sbb-mini-button-group
+  accessibility-label="Group label"
+  size="m"
+>
+  <sbb-mini-button
+    data-action=""
+    data-button=""
+    dir="ltr"
+    icon-name="pen-small"
+    role="button"
+    slot="li-0"
+    tabindex="0"
+  >
+  </sbb-mini-button>
+  <sbb-divider
+    aria-orientation="vertical"
+    orientation="vertical"
+    role="separator"
+    slot="li-1"
+  >
+  </sbb-divider>
+  <sbb-mini-button
+    data-action=""
+    data-button=""
+    dir="ltr"
+    icon-name="pen-small"
+    role="button"
+    slot="li-2"
+    tabindex="0"
+  >
+  </sbb-mini-button>
+</sbb-mini-button-group>
+`;
+/* end snapshot sbb-mini-button-group renders DOM */
+
+snapshots["sbb-mini-button-group renders Shadow DOM"] = 
+`<ul
+  aria-label="Group label"
+  class="sbb-mini-button-group"
+>
+  <li>
+    <slot name="li-0">
+    </slot>
+  </li>
+  <li>
+    <slot name="li-1">
+    </slot>
+  </li>
+  <li>
+    <slot name="li-2">
+    </slot>
+  </li>
+</ul>
+<span hidden="">
+  <slot>
+  </slot>
+</span>
+`;
+/* end snapshot sbb-mini-button-group renders Shadow DOM */
+
+snapshots["sbb-mini-button-group renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    },
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-mini-button-group renders A11y tree Chrome */
+
+snapshots["sbb-mini-button-group renders negative DOM"] = 
+`<sbb-mini-button-group
+  negative=""
+  size="m"
+>
+  <sbb-mini-button
+    data-action=""
+    data-button=""
+    dir="ltr"
+    icon-name="pen-small"
+    negative=""
+    role="button"
+    slot="li-0"
+    tabindex="0"
+  >
+  </sbb-mini-button>
+  <sbb-mini-button
+    data-action=""
+    data-button=""
+    dir="ltr"
+    icon-name="pen-small"
+    negative=""
+    role="button"
+    slot="li-1"
+    tabindex="0"
+  >
+  </sbb-mini-button>
+</sbb-mini-button-group>
+`;
+/* end snapshot sbb-mini-button-group renders negative DOM */
+
+snapshots["sbb-mini-button-group renders negative Shadow DOM"] = 
+`<ul class="sbb-mini-button-group">
+  <li>
+    <slot name="li-0">
+    </slot>
+  </li>
+  <li>
+    <slot name="li-1">
+    </slot>
+  </li>
+</ul>
+<span hidden="">
+  <slot>
+  </slot>
+</span>
+`;
+/* end snapshot sbb-mini-button-group renders negative Shadow DOM */
+
+snapshots["sbb-mini-button-group renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    },
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-mini-button-group renders A11y tree Firefox */
+

src/elements/button/mini-button-group/index.ts

@@ -0,0 +1 @@
+export * from './mini-button-group.js';

src/elements/button/mini-button-group/mini-button-group.scss

@@ -0,0 +1,58 @@
+@use '../../core/styles/index' as sbb;
+
+// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
+@include sbb.box-sizing;
+
+:host {
+  display: block;
+
+  --sbb-mini-button-group-background: var(--sbb-color-white);
+  --sbb-mini-button-group-border-color: var(--sbb-color-cloud);
+  --sbb-mini-button-group-border: var(--sbb-border-width-2x) solid
+    var(--sbb-mini-button-group-border-color);
+  --sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-mini-button-group-min-height: var(--sbb-size-element-s);
+  --sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x);
+}
+
+:host([negative]) {
+  --sbb-mini-button-group-background: var(--sbb-color-midnight);
+  --sbb-mini-button-group-border-color: var(--sbb-color-anthracite);
+}
+
+:host([size='s']) {
+  --sbb-mini-button-group-min-height: var(--sbb-size-element-xs);
+  --sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-2x);
+}
+
+:host([size='l']) {
+  --sbb-mini-button-group-min-height: var(--sbb-size-element-m);
+}
+
+:host([size='xl']) {
+  --sbb-mini-button-group-min-height: var(--sbb-size-element-l);
+  --sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-4x);
+}
+
+::slotted(sbb-divider) {
+  --sbb-divider-border-width: var(--sbb-border-width-2x);
+
+  padding-block: var(--sbb-spacing-fixed-1x);
+  padding-inline: var(--sbb-spacing-fixed-1x);
+  height: var(--sbb-size-icon-ui-small);
+}
+
+.sbb-mini-button-group {
+  @include sbb.list-reset;
+
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--sbb-mini-button-group-gap);
+  width: fit-content;
+  min-height: var(--sbb-mini-button-group-min-height);
+  line-height: 0;
+  border: var(--sbb-mini-button-group-border);
+  border-radius: var(--sbb-border-radius-infinity);
+  padding-inline: var(--sbb-mini-button-group-padding-inline);
+}

src/elements/button/mini-button-group/mini-button-group.snapshot.spec.ts

@@ -0,0 +1,56 @@
+import { expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+
+import type { SbbMiniButtonGroupElement } from './mini-button-group.js';
+import './mini-button-group.js';
+import '../mini-button.js';
+import '../../divider/divider.js';
+
+describe(`sbb-mini-button-group`, () => {
+  describe('renders', () => {
+    let element: SbbMiniButtonGroupElement;
+
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-mini-button-group accessibility-label="Group label">
+          <sbb-mini-button icon-name="pen-small"></sbb-mini-button>
+          <sbb-divider orientation="vertical"></sbb-divider>
+          <sbb-mini-button icon-name="pen-small"></sbb-mini-button>
+        </sbb-mini-button-group>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot();
+  });
+
+  describe('renders negative', () => {
+    let element: SbbMiniButtonGroupElement;
+
+    beforeEach(async () => {
+      element = await fixture(
+        html`<sbb-mini-button-group negative>
+          <sbb-mini-button icon-name="pen-small"></sbb-mini-button>
+          <sbb-mini-button icon-name="pen-small"></sbb-mini-button>
+        </sbb-mini-button-group>`,
+      );
+    });
+
+    it('DOM', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+  });
+});

src/elements/button/mini-button-group/mini-button-group.spec.ts

@@ -0,0 +1,34 @@
+import { assert, expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing/wait-for-render.js';
+
+import { SbbMiniButtonGroupElement } from './mini-button-group.js';
+import '../mini-button.js';
+import '../../divider/divider.js';
+
+describe('sbb-mini-button-group', () => {
+  let element: SbbMiniButtonGroupElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html`<sbb-mini-button-group>
+        <sbb-mini-button icon-name="pen-small"></sbb-mini-button>
+        <sbb-divider orientation="vertical"></sbb-divider>
+        <sbb-mini-button icon-name="pen-small"></sbb-mini-button>
+      </sbb-mini-button-group>`,
+    );
+  });
+
+  it('renders', async () => {
+    assert.instanceOf(element, SbbMiniButtonGroupElement);
+  });
+
+  it('proxy negative to children', async () => {
+    element.negative = true;
+    await waitForLitRender(element);
+
+    Array.from(element.children).forEach((el) => expect(el).to.have.attribute('negative'));
+  });
+});