diff --git a/src/elements/core/styles/mixins/table.scss b/src/elements/core/styles/mixins/table.scss index fe4c6decda..c418985ac1 100644 --- a/src/elements/core/styles/mixins/table.scss +++ b/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); diff --git a/src/elements/core/styles/table.scss b/src/elements/core/styles/table.scss index 4b7f93df53..d783451a67 100644 --- a/src/elements/core/styles/table.scss +++ b/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; diff --git a/src/storybook/styles/table/readme.md b/src/storybook/styles/table/readme.md index 8993e0b5c9..772e49f0fe 100644 --- a/src/storybook/styles/table/readme.md +++ b/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 @@ -48,6 +48,12 @@ The available sizes are `m` (default) and `s`. Use the respective `sbb-table-*si
...
+ + + + + ... +
``` ### 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 | diff --git a/src/storybook/styles/table/table.stories.ts b/src/storybook/styles/table/table.stories.ts index 38bddaff1b..ccf4bce4e5 100644 --- a/src/storybook/styles/table/table.stories.ts +++ b/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` { }; 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', }),