feat(sbb-tag, sbb-tag-group): add size s variant (#2664)

sbb-design-systems · Jun 3, 2024 · 6291bdc · 6291bdc
1 parent 2b26b90
commit 6291bdc
Show file tree

Hide file tree

Showing 10 changed files with 248 additions and 74 deletions.
diff --git a/src/elements/tag/tag-group/__snapshots__/tag-group.spec.snap.js b/src/elements/tag/tag-group/__snapshots__/tag-group.spec.snap.js
@@ -2,14 +2,18 @@
 export const snapshots = {};
 
 snapshots["sbb-tag-group renders - Dom"] = 
-`<sbb-tag-group role="group">
+`<sbb-tag-group
+  role="group"
+  size="m"
+>
   <sbb-tag
     aria-pressed="false"
     data-action=""
     data-button=""
     data-slot-names="unnamed"
     dir="ltr"
     role="button"
+    size="m"
     slot="li-0"
     tabindex="0"
     value="tag-1"
@@ -23,6 +27,7 @@ snapshots["sbb-tag-group renders - Dom"] =
     data-slot-names="unnamed"
     dir="ltr"
     role="button"
+    size="m"
     slot="li-1"
     tabindex="0"
     value="tag-2"
@@ -38,6 +43,7 @@ snapshots["sbb-tag-group renders - Dom"] =
     data-slot-names="unnamed"
     dir="ltr"
     role="button"
+    size="m"
     slot="li-3"
     tabindex="0"
     value="tag-3"

diff --git a/src/elements/tag/tag-group/readme.md b/src/elements/tag/tag-group/readme.md
@@ -13,6 +13,25 @@ See [its documentation](/docs/elements-sbb-tag-sbb-tag--docs) for more details.
 </sbb-tag-group>
 ```
 
+## 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
+<sbb-tag-group size="m">
+  <sbb-tag value="all">All</sbb-tag>
+  <sbb-tag value="phones">Phones</sbb-tag>
+  <sbb-tag value="computer">Computer</sbb-tag>
+</sbb-tag-group>
+
+<sbb-tag-group size="s">
+  <sbb-tag value="all">All</sbb-tag>
+  <sbb-tag value="phones">Phones</sbb-tag>
+  <sbb-tag value="computer">Computer</sbb-tag>
+</sbb-tag-group>
+```
+
 ## 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  | `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/elements/tag/tag-group/tag-group.stories.ts b/src/elements/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/elements/tag/tag-group/tag-group.ts b/src/elements/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';
 
@@ -40,6 +40,9 @@ export class SbbTagGroupElement extends SbbNamedSlotListMixin<SbbTagElement, typ
    */
   @property({ type: Boolean }) public multiple = false;
 
+  /** Tag group size. */
+  @property({ reflect: true }) public size: SbbTagSize = 'm';
+
   /**
    * Value of the sbb-tag-group.
    * If set multiple to false, the value is a string (or null).
@@ -89,6 +92,10 @@ export class SbbTagGroupElement extends SbbNamedSlotListMixin<SbbTagElement, typ
   protected override willUpdate(changedProperties: PropertyValues<WithListChildren<this>>): void {
     super.willUpdate(changedProperties);
 
+    if (changedProperties.has('size')) {
+      this.tags.forEach((t) => t.requestUpdate?.('size'));
+    }
+
     if (
       (changedProperties.has('listChildren') || changedProperties.has('multiple')) &&
       !this.multiple

diff --git a/src/elements/tag/tag/__snapshots__/tag.spec.snap.js b/src/elements/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"] = 
+`<sbb-tag
+  aria-label="Check to remove filters"
+  aria-pressed="false"
+  data-action=""
+  data-button=""
+  data-slot-names="unnamed"
+  dir="ltr"
+  role="button"
+  size="m"
+  tabindex="0"
+  value="all"
+>
+  All
+</sbb-tag>
+`;
+/* end snapshot sbb-tag renders unchecked Dom */
+
+snapshots["sbb-tag renders unchecked ShadowDom"] = 
 `<span class="sbb-action-base sbb-tag">
   <span class="sbb-tag--shift sbb-tag__icon">
     <slot name="icon">
@@ -17,9 +35,27 @@ snapshots["sbb-tag renders unchecked"] =
   </span>
 </span>
 `;
-/* end snapshot sbb-tag renders unchecked */
+/* end snapshot sbb-tag renders unchecked ShadowDom */
 
-snapshots["sbb-tag renders checked"] = 
+snapshots["sbb-tag renders checked Dom"] = 
+`<sbb-tag
+  aria-pressed="true"
+  checked=""
+  data-action=""
+  data-button=""
+  data-slot-names="unnamed"
+  dir="ltr"
+  role="button"
+  size="m"
+  tabindex="0"
+  value="info"
+>
+  Info
+</sbb-tag>
+`;
+/* end snapshot sbb-tag renders checked Dom */
+
+snapshots["sbb-tag renders checked ShadowDom"] = 
 `<span class="sbb-action-base sbb-tag">
   <span class="sbb-tag--shift sbb-tag__icon">
     <slot name="icon">
@@ -35,9 +71,29 @@ snapshots["sbb-tag renders checked"] =
   </span>
 </span>
 `;
-/* 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"] = 
+`<sbb-tag
+  amount="123"
+  aria-disabled="true"
+  aria-pressed="false"
+  data-action=""
+  data-button=""
+  data-slot-names="unnamed"
+  dir="ltr"
+  disabled=""
+  icon-name="circle-information-small"
+  role="button"
+  size="m"
+  value="information"
+>
+  Info
+</sbb-tag>
+`;
+/* end snapshot sbb-tag renders disabled with icon and amount Dom */
+
+snapshots["sbb-tag renders disabled with icon and amount ShadowDom"] = 
 `<span class="sbb-action-base sbb-tag">
   <span class="sbb-tag--shift sbb-tag__icon">
     <slot name="icon">
@@ -61,9 +117,37 @@ snapshots["sbb-tag renders disabled with icon and amount"] =
   </span>
 </span>
 `;
-/* 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"] = 
+`<sbb-tag
+  aria-pressed="false"
+  data-action=""
+  data-button=""
+  data-slot-names="amount icon unnamed"
+  dir="ltr"
+  role="button"
+  size="m"
+  tabindex="0"
+  value="foo"
+>
+  <sbb-icon
+    aria-hidden="true"
+    data-namespace="default"
+    name="cross-small"
+    role="img"
+    slot="icon"
+  >
+  </sbb-icon>
+  Info
+  <span slot="amount">
+    123
+  </span>
+</sbb-tag>
+`;
+/* 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"] = 
 `<span class="sbb-action-base sbb-tag">
   <span class="sbb-tag--shift sbb-tag__icon">
     <slot name="icon">
@@ -79,7 +163,7 @@ snapshots["sbb-tag renders slotted icon and amount"] =
   </span>
 </span>
 `;
-/* 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"] = 
 `<p>

diff --git a/src/elements/tag/tag/readme.md b/src/elements/tag/tag/readme.md
@@ -32,6 +32,16 @@ The component can be displayed in `checked` or `disabled` state using the self-n
 <sbb-tag disabled value="All" icon-name="circle-information-small">All</sbb-tag>
 ```
 
+## Style
+
+The component has two sizes, named `m` (default) and `s`. The `size` property can also be set on the `sbb-tag-group` where it will be applied to all tags inside the group.
+
+```html
+<sbb-tag value="All" size="m">All</sbb-tag>
+
+<sbb-tag value="All" size="s">All</sbb-tag>
+```
+
 ## 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 <form> 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  | `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.                                                                                                 |
 

diff --git a/src/elements/tag/tag/tag.scss b/src/elements/tag/tag/tag.scss
@@ -11,18 +11,14 @@
   --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));
   --sbb-tag-animation-easing: var(--sbb-animation-easing);
   --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;
@@ -92,6 +88,11 @@
   }
 }
 
+:host([size='s']) {
+  --sbb-tag-height: var(--sbb-size-element-xxxs);
+  --sbb-tag-padding-inline: var(--sbb-spacing-fixed-3x);
+}
+
 .sbb-tag {
   @include sbb.text-xs--bold;