feat(table): introduce table size xs (#3077)

---------

Co-authored-by: Tommmaso Menga <tommaso.menga-94@hotmail.it>

src/elements/core/styles/mixins/table.scss

@@ -137,6 +137,17 @@
   }
 }
 
+@mixin table--xs {
+  --sbb-table-header-padding-block: 0;
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-1x);
+  --sbb-table-cell-padding-block: 0;
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
+
+  tbody > tr > td {
+    @include typo.text-xs--regular;
+  }
+}
+
 @mixin table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-iron);
 

src/elements/core/styles/table.scss

@@ -2,7 +2,8 @@
 
 .sbb-table,
 .sbb-table-m,
-.sbb-table-s {
+.sbb-table-s,
+.sbb-table-xs {
   @include table.table;
 }
 
@@ -14,6 +15,10 @@
   @include table.table--s;
 }
 
+.sbb-table-xs {
+  @include table.table--xs;
+}
+
 sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--negative {
   @include table.table--negative;

src/storybook/styles/table/readme.md

@@ -36,7 +36,7 @@ By default, tables are styled with alternating row stripes to enhance readabilit
 
 ### Size
 
-The available sizes are `m` (default) and `s`. Use the respective `sbb-table-*size*` classes to specify it:
+The available sizes are `m` (default), `s` and `xs`. Use the respective `sbb-table-*size*` classes to specify it:
 
 ```html
 <table class="sbb-table-s">
@@ -48,6 +48,12 @@ The available sizes are `m` (default) and `s`. Use the respective `sbb-table-*si
 <table class="sbb-table-m">
   ...
 </table>
+
+<!-- Or -->
+
+<table class="sbb-table-xs">
+  ...
+</table>
 ```
 
 ### Negative variant
@@ -81,6 +87,7 @@ Therefore, we provide mixins you can build on top of:
 | `table`              | `sbb-table`              | The table style (equivalent to `table-m`) |
 | `table--m`           | `sbb-table-m`            | Medium size table style                   |
 | `table--s`           | `sbb-table-s`            | Small size table style                    |
+| `table--xs`          | `sbb-table-xs`           | Smallest size table style                 |
 | `table--negative`    | `sbb-table--negative`    | Negative variant style                    |
 | `table--striped`     | `sbb-table--striped`     | Striped table style                       |
 | `table--unstriped`   | `sbb-table--unstriped`   | Non-striped table style                   |

src/storybook/styles/table/table.stories.ts

@@ -10,7 +10,7 @@ const size: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['s', 'm'],
+  options: ['xs', 's', 'm'],
 };
 
 const negative: InputType = {
@@ -91,6 +91,7 @@ const Template = (args: Args): TemplateResult => html`
   <table
     class=${classMap({
       'sbb-table--negative': args.negative,
+      'sbb-table-xs': args.size === 'xs',
       'sbb-table-s': args.size === 's',
       'sbb-table-m': args.size === 'm',
       'sbb-table--unstriped': !args.striped,
@@ -113,6 +114,12 @@ export const SizeS: StoryObj = {
   args: { ...defaultArgs, size: 's' },
 };
 
+export const SizeXS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: 'xs' },
+};
+
 export const Negative: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,

src/storybook/styles/table/table.visual.spec.ts

@@ -18,7 +18,7 @@ describe(`table`, () => {
   };
 
   const sizeCases = {
-    size: ['m', 's'],
+    size: ['m', 's', 'xs'],
   };
 
   const tableTemplate = (classInfo: ClassInfo): TemplateResult => html`
@@ -78,6 +78,7 @@ describe(`table`, () => {
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(
             tableTemplate({
+              'sbb-table-xs': size === 'xs',
               'sbb-table-s': size === 's',
               'sbb-table-m': size === 'm',
             }),