-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(sbb-mini-button-group): initial implementation
- Loading branch information
Showing
12 changed files
with
607 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './mini-button-group/mini-button-group.js'; |
198 changes: 198 additions & 0 deletions
198
src/elements/mini-button-group/__snapshots__/mini-button-group.snapshot.spec.snap.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,198 @@ | ||
| /* @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-mini-button | ||
| data-action="" | ||
| data-button="" | ||
| dir="ltr" | ||
| icon-name="pen-small" | ||
| role="button" | ||
| slot="li-1" | ||
| 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> | ||
| </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 */ | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './mini-button-group.js'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| @use '../core/styles' 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); | ||
| } |
56 changes: 56 additions & 0 deletions
56
src/elements/mini-button-group/mini-button-group.snapshot.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 '../button/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(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 '../button/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')); | ||
| }); | ||
| }); |
31 changes: 31 additions & 0 deletions
31
src/elements/mini-button-group/mini-button-group.ssr.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { assert } from '@open-wc/testing'; | ||
| import { html } from 'lit/static-html.js'; | ||
|
|
||
| import { ssrHydratedFixture } from '../core/testing/private.js'; | ||
|
|
||
| import { SbbMiniButtonGroupElement } from './mini-button-group.js'; | ||
| import '../button/mini-button.js'; | ||
| import '../divider/divider.js'; | ||
|
|
||
| describe(`sbb-mini-button-group ssr`, () => { | ||
| it('renders', () => { | ||
| let root: SbbMiniButtonGroupElement; | ||
|
|
||
| beforeEach(async () => { | ||
| root = await ssrHydratedFixture( | ||
| 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>`, | ||
| { | ||
| modules: ['./mini-button-group.js', '../divider/divider.js', '../button/mini-button.js'], | ||
| }, | ||
| ); | ||
| }); | ||
|
|
||
| it('renders', () => { | ||
| assert.instanceOf(root, SbbMiniButtonGroupElement); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.