From 95958f1ebc099b26b4c73b5455b6bb5af1307aed Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Thu, 16 May 2024 12:12:05 +0200 Subject: [PATCH 1/9] feat: add tag size s --- src/components/tag/tag-group/readme.md | 20 +++++++++++++++++++ .../tag/tag-group/tag-group.stories.ts | 15 ++++++++++++++ src/components/tag/tag-group/tag-group.ts | 7 +++++++ src/components/tag/tag/readme.md | 11 ++++++++++ src/components/tag/tag/tag.scss | 5 +++++ src/components/tag/tag/tag.stories.ts | 15 ++++++++++++++ src/components/tag/tag/tag.ts | 3 +++ 7 files changed, 76 insertions(+) diff --git a/src/components/tag/tag-group/readme.md b/src/components/tag/tag-group/readme.md index f984864100..7ff28db20f 100644 --- a/src/components/tag/tag-group/readme.md +++ b/src/components/tag/tag-group/readme.md @@ -13,6 +13,25 @@ See [its documentation](/docs/components-sbb-tag-sbb-tag--docs) for more details ``` +## Style + +The component has a `size` property which can be used to change the size of all the inner `sbb-tag`. +Two values are available, `s` and `m`, which is the default. + +```html + + All + Phones + Computer + + + + All + Phones + Computer + +``` + ## Interactions ### Exclusive selection vs. multiple selection @@ -88,6 +107,7 @@ that communicates the collective meaning of all `sbb-tag`s. | ------------------------ | -------------------------- | ------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `listAccessibilityLabel` | `list-accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner list. | | `multiple` | `multiple` | public | `boolean` | `false` | If set multiple to false, the selection is exclusive and the value is a string (or null). If set multiple to true, the selection can have multiple values and therefore value is an array. Changing multiple during run time is not supported. | +| `size` | `size` | public | `'s' \| 'm'` | `'m'` | Tag group size. | | `tags` | - | public | `SbbTagElement[]` | | The child instances of sbb-tag as an array. | | `value` | `value` | public | `string \| string[] \| null` | `null` | Value of the sbb-tag-group. If set multiple to false, the value is a string (or null). If set multiple to true, the value is an array. | diff --git a/src/components/tag/tag-group/tag-group.stories.ts b/src/components/tag/tag-group/tag-group.stories.ts index dd835faa35..cec0309afa 100644 --- a/src/components/tag/tag-group/tag-group.stories.ts +++ b/src/components/tag/tag-group/tag-group.stories.ts @@ -61,12 +61,20 @@ const numberOfTagsInGroup: InputType = { }, }; +const size: InputType = { + control: { + type: 'inline-radio', + }, + options: ['s', 'm'], +}; + const defaultArgTypes: ArgTypes = { multiple, value, 'list-accessibility-label': listAccessibilityLabel, 'aria-label': ariaLabel, numberOfTagsInGroup, + size, }; const defaultArgs: Args = { @@ -75,6 +83,7 @@ const defaultArgs: Args = { 'list-accessibility-label': 'Select your desired filter', 'aria-label': undefined, numberOfTagsInGroup: 8, + size: size.options![1], }; const tagTemplate = (label: string, checked = false): TemplateResult => html` @@ -132,6 +141,12 @@ export const tagGroup: StoryObj = { args: { ...defaultArgs }, }; +export const tagGroupSizeS: StoryObj = { + render: TagGroupTemplate, + argTypes: defaultArgTypes, + args: { ...defaultArgs, size: size.options![0] }, +}; + export const ellipsisLabel: StoryObj = { render: TagGroupTemplateEllipsis, argTypes: defaultArgTypes, diff --git a/src/components/tag/tag-group/tag-group.ts b/src/components/tag/tag-group/tag-group.ts index 33e35ac12c..7447690fac 100644 --- a/src/components/tag/tag-group/tag-group.ts +++ b/src/components/tag/tag-group/tag-group.ts @@ -40,6 +40,9 @@ export class SbbTagGroupElement extends SbbNamedSlotListMixin>): void { super.willUpdate(changedProperties); + if (changedProperties.has('size')) { + this.tags.forEach((tag) => (tag.size = this.size)); + } + if ( (changedProperties.has('listChildren') || changedProperties.has('multiple')) && !this.multiple diff --git a/src/components/tag/tag/readme.md b/src/components/tag/tag/readme.md index 61fd6dd540..a6e8699601 100644 --- a/src/components/tag/tag/readme.md +++ b/src/components/tag/tag/readme.md @@ -32,6 +32,16 @@ The component can be displayed in `checked` or `disabled` state using the self-n All ``` +## Style + +The component has two sizes, named `m` (default) and `s`. + +```html +All + +All +``` + ## Events Consumers can listen to the native `change` and `input` events on the `sbb-tag`. @@ -55,6 +65,7 @@ The state is reflected via `aria-pressed` attribute. | `form` | `form` | public | `string \| undefined` | | The
element to associate the button with. | | `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | The name of the button element. | +| `size` | `size` | public | `'s' \| 'm'` | `'m'` | Tag size. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | diff --git a/src/components/tag/tag/tag.scss b/src/components/tag/tag/tag.scss index 5979198216..dfb1de91f1 100644 --- a/src/components/tag/tag/tag.scss +++ b/src/components/tag/tag/tag.scss @@ -92,6 +92,11 @@ } } +:host([size='s']) { + --sbb-tag-height: #{sbb.px-to-rem-build(28)}; + --sbb-tag-padding-inline: var(--sbb-spacing-fixed-3x); +} + .sbb-tag { @include sbb.text-xs--bold; diff --git a/src/components/tag/tag/tag.stories.ts b/src/components/tag/tag/tag.stories.ts index 088f3ad21f..b816f6ee7f 100644 --- a/src/components/tag/tag/tag.stories.ts +++ b/src/components/tag/tag/tag.stories.ts @@ -51,6 +51,13 @@ const ariaLabel: InputType = { }, }; +const size: InputType = { + control: { + type: 'inline-radio', + }, + options: ['s', 'm'], +}; + const defaultArgTypes: ArgTypes = { checked, disabled, @@ -59,6 +66,7 @@ const defaultArgTypes: ArgTypes = { 'icon-name': icon, amount, 'aria-label': ariaLabel, + size, }; const defaultArgs: Args = { @@ -69,6 +77,7 @@ const defaultArgs: Args = { 'icon-name': undefined, amount: undefined, 'aria-label': undefined, + size: size.options![1], }; const defaultArgsIconAndAmount: Args = { @@ -112,6 +121,12 @@ export const checkedAndDisabledTag: StoryObj = { args: { ...defaultArgs, checked: true, disabled: true }, }; +export const basicTagSizeS: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, size: size.options![0] }, +}; + export const withAmount: StoryObj = { render: Template, argTypes: defaultArgTypes, diff --git a/src/components/tag/tag/tag.ts b/src/components/tag/tag/tag.ts index 009885bb7b..b2d13aa5a1 100644 --- a/src/components/tag/tag/tag.ts +++ b/src/components/tag/tag/tag.ts @@ -37,6 +37,9 @@ export class SbbTagElement extends SbbIconNameMixin( /** Whether the tag is checked. */ @property({ reflect: true, type: Boolean }) public checked = false; + /** Tag size. */ + @property({ reflect: true }) public size: 's' | 'm' = 'm'; + /** Input event emitter */ private _input: EventEmitter = new EventEmitter(this, SbbTagElement.events.input, { bubbles: true, From 373b76abbaad14a1a3ae7f850d9cc01cbaf7120f Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Thu, 16 May 2024 12:18:34 +0200 Subject: [PATCH 2/9] feat: improve group size handling --- src/components/tag/tag-group/readme.md | 2 +- src/components/tag/tag-group/tag-group.ts | 6 +++--- src/components/tag/tag/readme.md | 23 ++++++++++++----------- src/components/tag/tag/tag.ts | 19 ++++++++++++++++++- 4 files changed, 34 insertions(+), 16 deletions(-) diff --git a/src/components/tag/tag-group/readme.md b/src/components/tag/tag-group/readme.md index 7ff28db20f..645feae3b6 100644 --- a/src/components/tag/tag-group/readme.md +++ b/src/components/tag/tag-group/readme.md @@ -107,7 +107,7 @@ that communicates the collective meaning of all `sbb-tag`s. | ------------------------ | -------------------------- | ------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `listAccessibilityLabel` | `list-accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner list. | | `multiple` | `multiple` | public | `boolean` | `false` | If set multiple to false, the selection is exclusive and the value is a string (or null). If set multiple to true, the selection can have multiple values and therefore value is an array. Changing multiple during run time is not supported. | -| `size` | `size` | public | `'s' \| 'm'` | `'m'` | Tag group size. | +| `size` | `size` | public | `SbbTagSize` | `'m'` | Tag group size. | | `tags` | - | public | `SbbTagElement[]` | | The child instances of sbb-tag as an array. | | `value` | `value` | public | `string \| string[] \| null` | `null` | Value of the sbb-tag-group. If set multiple to false, the value is a string (or null). If set multiple to true, the value is an array. | diff --git a/src/components/tag/tag-group/tag-group.ts b/src/components/tag/tag-group/tag-group.ts index 7447690fac..145737c7d1 100644 --- a/src/components/tag/tag-group/tag-group.ts +++ b/src/components/tag/tag-group/tag-group.ts @@ -10,7 +10,7 @@ import { customElement, property } from 'lit/decorators.js'; import { setOrRemoveAttribute } from '../../core/dom.js'; import { SbbNamedSlotListMixin, type WithListChildren } from '../../core/mixins.js'; -import type { SbbTagElement } from '../tag.js'; +import type { SbbTagElement, SbbTagSize } from '../tag.js'; import style from './tag-group.scss?lit&inline'; @@ -41,7 +41,7 @@ export class SbbTagGroupElement extends SbbNamedSlotListMixin (tag.size = this.size)); + this.tags.forEach((t) => t.requestUpdate?.('size')); } if ( diff --git a/src/components/tag/tag/readme.md b/src/components/tag/tag/readme.md index a6e8699601..c881842e01 100644 --- a/src/components/tag/tag/readme.md +++ b/src/components/tag/tag/readme.md @@ -57,17 +57,18 @@ The state is reflected via `aria-pressed` attribute. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `amount` | `amount` | public | `string \| undefined` | | Amount displayed inside the tag. | -| `checked` | `checked` | public | `boolean` | `false` | Whether the tag is checked. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `name` | `name` | public | `string` | | The name of the button element. | -| `size` | `size` | public | `'s' \| 'm'` | `'m'` | Tag size. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `value` | `value` | public | `string` | | The value of the button element. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ----------- | ------- | ---------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `amount` | `amount` | public | `string \| undefined` | | Amount displayed inside the tag. | +| `checked` | `checked` | public | `boolean` | `false` | Whether the tag is checked. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `group` | - | public | `SbbTagGroupElement \| null` | `null` | Reference to the connected checkbox group. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `name` | `name` | public | `string` | | The name of the button element. | +| `size` | `size` | public | `SbbTagSize` | `'m'` | Tag size. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `value` | `value` | public | `string` | | The value of the button element. | ## Events diff --git a/src/components/tag/tag/tag.ts b/src/components/tag/tag/tag.ts index b2d13aa5a1..29e0635745 100644 --- a/src/components/tag/tag/tag.ts +++ b/src/components/tag/tag/tag.ts @@ -7,9 +7,12 @@ import { SbbConnectedAbortController, SbbSlotStateController } from '../../core/ import { EventEmitter } from '../../core/eventing.js'; import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js'; import { SbbIconNameMixin } from '../../icon.js'; +import type { SbbTagGroupElement } from '../tag-group.js'; import style from './tag.scss?lit&inline'; +export type SbbTagSize = 's' | 'm'; + /** * It displays a selectable element which can be used as a filter. * @@ -38,7 +41,20 @@ export class SbbTagElement extends SbbIconNameMixin( @property({ reflect: true, type: Boolean }) public checked = false; /** Tag size. */ - @property({ reflect: true }) public size: 's' | 'm' = 'm'; + @property({ reflect: true }) + public set size(value: SbbTagSize) { + this._size = value; + } + public get size(): SbbTagSize { + return this.group?.size ?? this._size; + } + private _size: SbbTagSize = 'm'; + + /** Reference to the connected checkbox group. */ + public get group(): SbbTagGroupElement | null { + return this._group; + } + private _group: SbbTagGroupElement | null = null; /** Input event emitter */ private _input: EventEmitter = new EventEmitter(this, SbbTagElement.events.input, { @@ -65,6 +81,7 @@ export class SbbTagElement extends SbbIconNameMixin( public override connectedCallback(): void { super.connectedCallback(); + this._group = this.closest('sbb-tag-group') as SbbTagGroupElement; this.addEventListener('click', () => this._handleClick(), { signal: this._abort.signal }); } From e6f6154dfb02698542dba79d470f69909a4ff577 Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Thu, 16 May 2024 12:32:28 +0200 Subject: [PATCH 3/9] fix: tests --- .../__snapshots__/tag-group.spec.snap.js | 16 +++++++++++----- src/components/tag/tag/tag.spec.ts | 8 ++++---- 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/components/tag/tag-group/__snapshots__/tag-group.spec.snap.js b/src/components/tag/tag-group/__snapshots__/tag-group.spec.snap.js index dd504aaae8..cbbfbb714f 100644 --- a/src/components/tag/tag-group/__snapshots__/tag-group.spec.snap.js +++ b/src/components/tag/tag-group/__snapshots__/tag-group.spec.snap.js @@ -1,8 +1,11 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["sbb-tag-group renders - Dom"] = -` +snapshots["sbb-tag-group renders - Dom"] = +`
  • @@ -76,7 +82,7 @@ snapshots["sbb-tag-group renders - ShadowDom"] = `; /* end snapshot sbb-tag-group renders - ShadowDom */ -snapshots["sbb-tag-group A11y tree Chrome"] = +snapshots["sbb-tag-group A11y tree Chrome"] = `

    { "role": "WebArea", @@ -103,7 +109,7 @@ snapshots["sbb-tag-group A11y tree Chrome"] = `; /* end snapshot sbb-tag-group A11y tree Chrome */ -snapshots["sbb-tag-group A11y tree Firefox"] = +snapshots["sbb-tag-group A11y tree Firefox"] = `

    { "role": "document", diff --git a/src/components/tag/tag/tag.spec.ts b/src/components/tag/tag/tag.spec.ts index 1f9b37226a..f68093eeb0 100644 --- a/src/components/tag/tag/tag.spec.ts +++ b/src/components/tag/tag/tag.spec.ts @@ -14,7 +14,7 @@ describe(`sbb-tag`, () => { expect(root).dom.to.be.equal( ` - + All `, @@ -27,7 +27,7 @@ describe(`sbb-tag`, () => { expect(root).dom.to.be.equal( ` - + Info `, @@ -44,7 +44,7 @@ describe(`sbb-tag`, () => { expect(root).dom.to.be.equal( ` - + Info `, @@ -70,7 +70,7 @@ describe(`sbb-tag`, () => { expect(root).dom.to.be.equal( ` - +

    • @@ -82,7 +82,7 @@ snapshots["sbb-tag-group renders - ShadowDom"] = `; /* end snapshot sbb-tag-group renders - ShadowDom */ -snapshots["sbb-tag-group A11y tree Chrome"] = +snapshots["sbb-tag-group A11y tree Chrome"] = `

      { "role": "WebArea", @@ -109,7 +109,7 @@ snapshots["sbb-tag-group A11y tree Chrome"] = `; /* end snapshot sbb-tag-group A11y tree Chrome */ -snapshots["sbb-tag-group A11y tree Firefox"] = +snapshots["sbb-tag-group A11y tree Firefox"] = `

      { "role": "document", diff --git a/src/components/tag/tag/__snapshots__/tag.spec.snap.js b/src/components/tag/tag/__snapshots__/tag.spec.snap.js index 3749f3abf3..e043fdb030 100644 --- a/src/components/tag/tag/__snapshots__/tag.spec.snap.js +++ b/src/components/tag/tag/__snapshots__/tag.spec.snap.js @@ -1,7 +1,25 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["sbb-tag renders unchecked"] = +snapshots["sbb-tag renders unchecked - Dom"] = +` + All + +`; +/* end snapshot sbb-tag renders unchecked - Dom */ + +snapshots["sbb-tag renders unchecked - ShadowDom"] = ` @@ -17,9 +35,27 @@ snapshots["sbb-tag renders unchecked"] = `; -/* end snapshot sbb-tag renders unchecked */ +/* end snapshot sbb-tag renders unchecked - ShadowDom */ -snapshots["sbb-tag renders checked"] = +snapshots["sbb-tag renders checked - Dom"] = +` + Info + +`; +/* end snapshot sbb-tag renders checked - Dom */ + +snapshots["sbb-tag renders checked - ShadowDom"] = ` @@ -35,9 +71,29 @@ snapshots["sbb-tag renders checked"] = `; -/* end snapshot sbb-tag renders checked */ +/* end snapshot sbb-tag renders checked - ShadowDom */ -snapshots["sbb-tag renders disabled with icon and amount"] = +snapshots["sbb-tag renders disabled with icon and amount - Dom"] = +` + Info + +`; +/* end snapshot sbb-tag renders disabled with icon and amount - Dom */ + +snapshots["sbb-tag renders disabled with icon and amount - ShadowDom"] = ` @@ -61,9 +117,37 @@ snapshots["sbb-tag renders disabled with icon and amount"] = `; -/* end snapshot sbb-tag renders disabled with icon and amount */ +/* end snapshot sbb-tag renders disabled with icon and amount - ShadowDom */ + +snapshots["sbb-tag renders slotted icon and amount - Dom"] = +` + + Info + + 123 + + +`; +/* end snapshot sbb-tag renders slotted icon and amount - Dom */ -snapshots["sbb-tag renders slotted icon and amount"] = +snapshots["sbb-tag renders slotted icon and amount - ShadowDom"] = ` @@ -79,7 +163,7 @@ snapshots["sbb-tag renders slotted icon and amount"] = `; -/* end snapshot sbb-tag renders slotted icon and amount */ +/* end snapshot sbb-tag renders slotted icon and amount - ShadowDom */ snapshots["sbb-tag A11y tree Chrome"] = `

      diff --git a/src/components/tag/tag/tag.spec.ts b/src/components/tag/tag/tag.spec.ts index f68093eeb0..cc06534595 100644 --- a/src/components/tag/tag/tag.spec.ts +++ b/src/components/tag/tag/tag.spec.ts @@ -7,52 +7,49 @@ import './tag.js'; import '../../icon.js'; describe(`sbb-tag`, () => { - it('renders unchecked', async () => { + it('renders unchecked - Dom', async () => { const root = await fixture( html`All`, ); + await expect(root).dom.to.be.equalSnapshot(); + }); - expect(root).dom.to.be.equal( - ` - - All - - `, + it('renders unchecked - ShadowDom', async () => { + const root = await fixture( + html`All`, ); await expect(root).shadowDom.to.be.equalSnapshot(); }); - it('renders checked', async () => { + it('renders checked - Dom', async () => { const root = await fixture(html`Info`); + await expect(root).dom.to.be.equalSnapshot(); + }); - expect(root).dom.to.be.equal( - ` - - Info - - `, - ); + it('renders checked - ShadowDom', async () => { + const root = await fixture(html`Info`); await expect(root).shadowDom.to.be.equalSnapshot(); }); - it('renders disabled with icon and amount', async () => { + it('renders disabled with icon and amount - Dom', async () => { const root = await fixture(html` Info `); + await expect(root).dom.to.be.equalSnapshot(); + }); - expect(root).dom.to.be.equal( - ` - - Info - - `, - ); + it('renders disabled with icon and amount - ShadowDom', async () => { + const root = await fixture(html` + + Info + + `); await expect(root).shadowDom.to.be.equalSnapshot(); }); - it('renders slotted icon and amount', async () => { + it('renders slotted icon and amount - Dom', async () => { const root = await fixture(html` { 123 `); + await expect(root).dom.to.be.equalSnapshot(); + }); - expect(root).dom.to.be.equal( - ` - - - Info - 123 - - `, - ); + it('renders slotted icon and amount - ShadowDom', async () => { + const root = await fixture(html` + + + Info + 123 + + `); await expect(root).shadowDom.to.be.equalSnapshot(); }); From 3a84fd42a9fef7c73b0d3e2fcc00196775bcb50f Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Thu, 30 May 2024 09:25:06 +0200 Subject: [PATCH 6/9] fix: update design tokens for height --- src/elements/tag/tag/tag.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/elements/tag/tag/tag.scss b/src/elements/tag/tag/tag.scss index dfb1de91f1..baa78635c4 100644 --- a/src/elements/tag/tag/tag.scss +++ b/src/elements/tag/tag/tag.scss @@ -11,7 +11,7 @@ --sbb-tag-border-width: var(--sbb-border-width-1x); --sbb-tag-text-color: var(--sbb-color-charcoal); --sbb-tag-amount-color: var(--sbb-color-metal); - --sbb-tag-height: #{sbb.px-to-rem-build(36)}; + --sbb-tag-height: var(--sbb-size-element-xs); --sbb-tag-inset: 0; --sbb-tag-content-shift: translateY(0); --sbb-tag-animation-duration: var(--sbb-disable-animation-time, var(--sbb-animation-duration-2x)); @@ -19,10 +19,6 @@ --sbb-tag-padding-inline: var(--sbb-spacing-fixed-5x); --sbb-tag-gap: var(--sbb-spacing-fixed-2x); - @include sbb.mq($from: medium) { - --sbb-tag-height: #{sbb.px-to-rem-build(40)}; - } - @include sbb.if-forced-colors { --sbb-tag-background-color: Canvas !important; --sbb-tag-text-color: ButtonText; @@ -93,7 +89,7 @@ } :host([size='s']) { - --sbb-tag-height: #{sbb.px-to-rem-build(28)}; + --sbb-tag-height: var(--sbb-size-element-xxxs); --sbb-tag-padding-inline: var(--sbb-spacing-fixed-3x); } From a2a9ed7b179b350f35e5dd2a8a2007bbfe6d58cf Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Thu, 30 May 2024 09:34:28 +0200 Subject: [PATCH 7/9] fix: review --- src/elements/tag/tag/tag.spec.ts | 132 +++++++++++++++---------------- 1 file changed, 66 insertions(+), 66 deletions(-) diff --git a/src/elements/tag/tag/tag.spec.ts b/src/elements/tag/tag/tag.spec.ts index cc06534595..97744ce941 100644 --- a/src/elements/tag/tag/tag.spec.ts +++ b/src/elements/tag/tag/tag.spec.ts @@ -3,86 +3,86 @@ import { html } from 'lit/static-html.js'; import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js'; +import type { SbbTagElement } from './tag.js'; import './tag.js'; import '../../icon.js'; describe(`sbb-tag`, () => { - it('renders unchecked - Dom', async () => { - const root = await fixture( - html`All`, - ); - await expect(root).dom.to.be.equalSnapshot(); - }); + let root: SbbTagElement; - it('renders unchecked - ShadowDom', async () => { - const root = await fixture( - html`All`, - ); - await expect(root).shadowDom.to.be.equalSnapshot(); - }); + describe('renders unchecked', async () => { + beforeEach(async () => { + root = await fixture( + html`All`, + ); + }); - it('renders checked - Dom', async () => { - const root = await fixture(html`Info`); - await expect(root).dom.to.be.equalSnapshot(); - }); + it('Dom', async () => { + await expect(root).dom.to.be.equalSnapshot(); + }); - it('renders checked - ShadowDom', async () => { - const root = await fixture(html`Info`); - await expect(root).shadowDom.to.be.equalSnapshot(); + it('ShadowDom', async () => { + await expect(root).shadowDom.to.be.equalSnapshot(); + }); }); - it('renders disabled with icon and amount - Dom', async () => { - const root = await fixture(html` - - Info - - `); - await expect(root).dom.to.be.equalSnapshot(); - }); + describe('renders checked', async () => { + beforeEach(async () => { + root = await fixture(html`Info`); + }); + + it('Dom', async () => { + await expect(root).dom.to.be.equalSnapshot(); + }); - it('renders disabled with icon and amount - ShadowDom', async () => { - const root = await fixture(html` - - Info - - `); - await expect(root).shadowDom.to.be.equalSnapshot(); + it('ShadowDom', async () => { + await expect(root).shadowDom.to.be.equalSnapshot(); + }); }); - it('renders slotted icon and amount - Dom', async () => { - const root = await fixture(html` - - - Info - 123 - - `); - await expect(root).dom.to.be.equalSnapshot(); + describe('renders disabled with icon and amount', async () => { + beforeEach(async () => { + root = await fixture(html` + + Info + + `); + }); + + it('Dom', async () => { + await expect(root).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(root).shadowDom.to.be.equalSnapshot(); + }); }); - it('renders slotted icon and amount - ShadowDom', async () => { - const root = await fixture(html` - - - Info - 123 - - `); - await expect(root).shadowDom.to.be.equalSnapshot(); + describe('renders slotted icon and amount', async () => { + beforeEach(async () => { + root = await fixture(html` + + + Info + 123 + + `); + }); + + it('Dom', async () => { + await expect(root).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(root).shadowDom.to.be.equalSnapshot(); + }); }); testA11yTreeSnapshot(html`Label`); From 5d56d472c9cae905d1e2cbab24bf6565e7003b19 Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Thu, 30 May 2024 10:06:15 +0200 Subject: [PATCH 8/9] fix: tests --- .../tag/tag/__snapshots__/tag.spec.snap.js | 32 +++++++++---------- src/elements/tag/tag/tag.ts | 5 +-- 2 files changed, 17 insertions(+), 20 deletions(-) diff --git a/src/elements/tag/tag/__snapshots__/tag.spec.snap.js b/src/elements/tag/tag/__snapshots__/tag.spec.snap.js index e043fdb030..6ced1f5ab6 100644 --- a/src/elements/tag/tag/__snapshots__/tag.spec.snap.js +++ b/src/elements/tag/tag/__snapshots__/tag.spec.snap.js @@ -1,7 +1,7 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["sbb-tag renders unchecked - Dom"] = +snapshots["sbb-tag renders unchecked Dom"] = ` `; -/* end snapshot sbb-tag renders unchecked - Dom */ +/* end snapshot sbb-tag renders unchecked Dom */ -snapshots["sbb-tag renders unchecked - ShadowDom"] = +snapshots["sbb-tag renders unchecked ShadowDom"] = ` @@ -35,9 +35,9 @@ snapshots["sbb-tag renders unchecked - ShadowDom"] = `; -/* end snapshot sbb-tag renders unchecked - ShadowDom */ +/* end snapshot sbb-tag renders unchecked ShadowDom */ -snapshots["sbb-tag renders checked - Dom"] = +snapshots["sbb-tag renders checked Dom"] = ` `; -/* end snapshot sbb-tag renders checked - Dom */ +/* end snapshot sbb-tag renders checked Dom */ -snapshots["sbb-tag renders checked - ShadowDom"] = +snapshots["sbb-tag renders checked ShadowDom"] = ` @@ -71,9 +71,9 @@ snapshots["sbb-tag renders checked - ShadowDom"] = `; -/* end snapshot sbb-tag renders checked - ShadowDom */ +/* end snapshot sbb-tag renders checked ShadowDom */ -snapshots["sbb-tag renders disabled with icon and amount - Dom"] = +snapshots["sbb-tag renders disabled with icon and amount Dom"] = ` `; -/* end snapshot sbb-tag renders disabled with icon and amount - Dom */ +/* end snapshot sbb-tag renders disabled with icon and amount Dom */ -snapshots["sbb-tag renders disabled with icon and amount - ShadowDom"] = +snapshots["sbb-tag renders disabled with icon and amount ShadowDom"] = ` @@ -117,9 +117,9 @@ snapshots["sbb-tag renders disabled with icon and amount - ShadowDom"] = `; -/* end snapshot sbb-tag renders disabled with icon and amount - ShadowDom */ +/* end snapshot sbb-tag renders disabled with icon and amount ShadowDom */ -snapshots["sbb-tag renders slotted icon and amount - Dom"] = +snapshots["sbb-tag renders slotted icon and amount Dom"] = ` `; -/* end snapshot sbb-tag renders slotted icon and amount - Dom */ +/* end snapshot sbb-tag renders slotted icon and amount Dom */ -snapshots["sbb-tag renders slotted icon and amount - ShadowDom"] = +snapshots["sbb-tag renders slotted icon and amount ShadowDom"] = ` @@ -163,7 +163,7 @@ snapshots["sbb-tag renders slotted icon and amount - ShadowDom"] = `; -/* end snapshot sbb-tag renders slotted icon and amount - ShadowDom */ +/* end snapshot sbb-tag renders slotted icon and amount ShadowDom */ snapshots["sbb-tag A11y tree Chrome"] = `

      diff --git a/src/elements/tag/tag/tag.ts b/src/elements/tag/tag/tag.ts index a2f9d11d8b..d5915ae84d 100644 --- a/src/elements/tag/tag/tag.ts +++ b/src/elements/tag/tag/tag.ts @@ -46,14 +46,11 @@ export class SbbTagElement extends SbbIconNameMixin( this._size = value; } public get size(): SbbTagSize { - return this.group?.size ?? this._size; + return this._group?.size ?? this._size; } private _size: SbbTagSize = 'm'; /** Reference to the connected checkbox group. */ - protected get group(): SbbTagGroupElement | null { - return this._group; - } private _group: SbbTagGroupElement | null = null; /** Input event emitter */ From e4fc1a45e6f0dcbb71bdff6221c20bf0a1f3398c Mon Sep 17 00:00:00 2001 From: Marco D'Auria Date: Mon, 3 Jun 2024 10:39:04 +0200 Subject: [PATCH 9/9] fix: review --- src/elements/tag/tag/tag.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/elements/tag/tag/tag.ts b/src/elements/tag/tag/tag.ts index d5915ae84d..108efa77c2 100644 --- a/src/elements/tag/tag/tag.ts +++ b/src/elements/tag/tag/tag.ts @@ -50,7 +50,7 @@ export class SbbTagElement extends SbbIconNameMixin( } private _size: SbbTagSize = 'm'; - /** Reference to the connected checkbox group. */ + /** Reference to the connected tag group. */ private _group: SbbTagGroupElement | null = null; /** Input event emitter */