feat: provide scrollbar and table styles as CSS classes (#3285)

Closes #3271
sbb-design-systems · Dec 11, 2024 · 156aa35 · 156aa35
1 parent c2f0f36
commit 156aa35
Show file tree

Hide file tree

Showing 13 changed files with 81 additions and 55 deletions.
diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md
@@ -211,6 +211,8 @@ However, if you like to more specifically pick what you need, consider the follo
 | `animation.css`                 | Provides CSS classes to disable animation (e.g. for testing).                       |
 | `layout.css`                    | Provides layout related CSS classes (e.g. page spacing, grid).                      |
 | `lists.css`                     | Provides CSS classes to style lists.                                                |
+| `scrollbar.css`                 | Provides CSS classes to style a scrollbar.                                          |
+| `table.css`                     | Provides CSS classes to style a table.                                              |
 | `typography.css`                | Provides typography related CSS classes.                                            |
 
 ### Full Font

diff --git a/src/elements/core/styles/scrollbar.scss b/src/elements/core/styles/scrollbar.scss
@@ -0,0 +1,44 @@
+@use './mixins/scrollbar';
+
+.sbb-scrollbar,
+.sbb-scrollbar-negative,
+.sbb-scrollbar-thick,
+.sbb-scrollbar-thick-negative,
+.sbb-scrollbar-track-visible,
+.sbb-scrollbar-negative-track-visible,
+.sbb-scrollbar-thick-track-visible,
+.sbb-scrollbar-thick-negative-track-visible {
+  @include scrollbar.scrollbar-rules;
+}
+
+.sbb-scrollbar {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: false, $track-visible: false);
+}
+
+.sbb-scrollbar-negative {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: true, $track-visible: false);
+}
+
+.sbb-scrollbar-thick {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: false, $track-visible: false);
+}
+
+.sbb-scrollbar-thick-negative {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: true, $track-visible: false);
+}
+
+.sbb-scrollbar-track-visible {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: false, $track-visible: true);
+}
+
+.sbb-scrollbar-negative-track-visible {
+  @include scrollbar.scrollbar-variables($size: thin, $negative: true, $track-visible: true);
+}
+
+.sbb-scrollbar-thick-track-visible {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: false, $track-visible: true);
+}
+
+.sbb-scrollbar-thick-negative-track-visible {
+  @include scrollbar.scrollbar-variables($size: thick, $negative: true, $track-visible: true);
+}
diff --git a/src/elements/core/styles/standard-theme.scss b/src/elements/core/styles/standard-theme.scss
@@ -7,4 +7,5 @@
 @use './animation';
 @use './layout';
 @use './lists';
+@use './scrollbar';
 @use './table';
diff --git a/src/elements/vite.config.ts b/src/elements/vite.config.ts
@@ -63,10 +63,12 @@ export default defineConfig((config) =>
                   'animation.css',
                   'core.css',
                   'font-characters-extension.css',
-                  'standard-theme.css',
                   'layout.css',
                   'lists.css',
                   'normalize.css',
+                  'scrollbar.css',
+                  'standard-theme.css',
+                  'table.css',
                   'typography.css',
                 ]),
               },

diff --git a/src/storybook/styles/layout/readme.md b/src/storybook/styles/layout/readme.md
@@ -3,7 +3,7 @@
 The page spacing ensures inline margins and controls the max-width of the page.
 The `expanded`-variant has a smaller inline spacing and no max-width.
 
-| css class                   | sass mixin              |
+| CSS class                   | SASS mixin              |
 | --------------------------- | ----------------------- |
 | `sbb-page-spacing`          | `page-spacing`          |
 | `sbb-page-spacing-expanded` | `page-spacing-expanded` |
@@ -22,12 +22,12 @@ Alternatively the [sbb-container](/docs/elements-sbb-container-sbb-container--do
 
 ## Grid
 
-The grid is available as css class or sass mixin.
+The grid is available as CSS class or SASS mixin.
 It provides the grid from the design specifications on which you can place your elements.
 The `expanded`-variant has a smaller inline spacing and no max-width.
-[See css grid docs for full documentation of all the possibilities of placing elements on a grid.](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
+[See CSS grid docs for full documentation of all the possibilities of placing elements on a grid.](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
 
-| css class           | sass mixin      |
+| CSS class           | SASS mixin      |
 | ------------------- | --------------- |
 | `sbb-grid`          | `grid`          |
 | `sbb-grid-expanded` | `grid-expanded` |

diff --git a/src/storybook/styles/list/readme.md b/src/storybook/styles/list/readme.md
@@ -1,6 +1,6 @@
 ## sbb-list
 
-| css class  | sass mixin |
+| CSS class  | SASS mixin |
 | ---------- | ---------- |
 | `sbb-list` | `list`     |
 
@@ -10,7 +10,7 @@ The list styling doesn't define any color itself but inherits it.
 
 ### Sass usage
 
-The sass mixin can be included at top level or in a rule.
+The SASS mixin can be included at top level or in a rule.
 If used at top level it will apply rules to the native `<ul>` and `<ol>` elements.
 If used inside a rule it will extend the rule with `<ul>` and `<ol>`
 selectors (e.g. `.sbb-list { @include sbb.list; }` > `.sbb-list:where(ol, ul) {...}`).
@@ -25,7 +25,7 @@ selectors (e.g. `.sbb-list { @include sbb.list; }` > `.sbb-list:where(ol, ul) {.
 
 ## sbb-step-list
 
-| css class       | sass mixin  |
+| CSS class       | SASS mixin  |
 | --------------- | ----------- |
 | `sbb-step-list` | `step-list` |
 
@@ -41,7 +41,7 @@ by using the predefined classes (e.g. `sbb-text-s`).
 
 ## sbb-icon-list
 
-| css class       | sass mixin  |
+| CSS class       | SASS mixin  |
 | --------------- | ----------- |
 | `sbb-icon-list` | `icon-list` |
 
@@ -95,7 +95,7 @@ than the text, the CSS variable `--sbb-icon-list-marker-icon-color` can be used.
 
 ## sbb-description-list
 
-| css class  | sass mixin         |
+| CSS class  | SASS mixin         |
 | ---------- | ------------------ |
 | `sbb-list` | `description-list` |
 
@@ -104,7 +104,7 @@ The description list doesn't define any color itself but inherits it.
 
 ### Sass usage
 
-The sass mixin can be included at top level or in a rule.
+The SASS mixin can be included at top level or in a rule.
 If used at top level it will apply rules to the native `<dl>` element.
 If used inside a rule it will extend the rule with `<dl>`.
 selectors (e.g. `.sbb-list { @include sbb.description-list; }` > `.sbb-list:where(dl) {...}`).

diff --git a/src/storybook/styles/scrollbar/readme.md b/src/storybook/styles/scrollbar/readme.md
@@ -1,14 +1,21 @@
 ## Scrollbar
 
-The scrollbar mixin offers a combination of size, color and whether the track is visible or not.
+The scrollbar SASS mixin and CSS classes offer a combination of size, color and whether the track is visible or not.
 
 In Firefox the styles are looking differently as there are no possibilities to style the scrollbar exactly as designed.
 
-| sass mixin                                    |
-| --------------------------------------------- |
-| `scrollbar($size, $negative, $track-visible)` |
+| CSS class                                    | SASS mixin                                                         |
+| -------------------------------------------- | ------------------------------------------------------------------ |
+| `sbb-scrollbar`                              | `scrollbar($size: thin, $negative: false, $track-visible: false)`  |
+| `sbb-scrollbar-negative`                     | `scrollbar($size: thin, $negative: true, $track-visible: false)`   |
+| `sbb-scrollbar-thick`                        | `scrollbar($size: thick, $negative: false, $track-visible: false)` |
+| `sbb-scrollbar-thick-negative`               | `scrollbar($size: thick, $negative: true, $track-visible: false)`  |
+| `sbb-scrollbar-track-visible`                | `scrollbar($size: thin, $negative: false, $track-visible: true)`   |
+| `sbb-scrollbar-negative-track-visible`       | `scrollbar($size: thin, $negative: true, $track-visible: true)`    |
+| `sbb-scrollbar-thick-track-visible`          | `scrollbar($size: thick, $negative: false, $track-visible: true)`  |
+| `sbb-scrollbar-thick-negative-track-visible` | `scrollbar($size: thick, $negative: true, $track-visible: true)`   |
 
-** Possible values **
+** Possible values of SASS mixin **
 
 - `$size` thin or thick
 - `$negative` true or false

diff --git a/src/storybook/styles/scrollbar/scrollbar-internal.scss b/src/storybook/styles/scrollbar/scrollbar-internal.scss
@@ -1,37 +1,5 @@
 @use '../../../elements/core/styles' as sbb;
 
-.scrollbar {
-  @include sbb.scrollbar;
-}
-
-.scrollbar-negative {
-  @include sbb.scrollbar($negative: true);
-}
-
-.scrollbar-thick {
-  @include sbb.scrollbar($size: thick);
-}
-
-.scrollbar-thick-negative {
-  @include sbb.scrollbar($size: thick, $negative: true);
-}
-
-.scrollbar-track-visible {
-  @include sbb.scrollbar($track-visible: true);
-}
-
-.scrollbar-negative-track-visible {
-  @include sbb.scrollbar($negative: true, $track-visible: true);
-}
-
-.scrollbar-thick-track-visible {
-  @include sbb.scrollbar($size: thick, $track-visible: true);
-}
-
-.scrollbar-thick-negative-track-visible {
-  @include sbb.scrollbar($size: thick, $negative: true, $track-visible: true);
-}
-
 .negative {
   background-color: var(--sbb-color-charcoal);
   color: var(--sbb-color-white);

diff --git a/src/storybook/styles/scrollbar/scrollbar.stories.ts b/src/storybook/styles/scrollbar/scrollbar.stories.ts
@@ -14,7 +14,7 @@ const text: string = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, s
   no sea takimata sanctus est Lorem ipsum dolor sit amet.`;
 
 const Template = (args: Args): TemplateResult => {
-  let scrollbarClass = 'scrollbar';
+  let scrollbarClass = 'sbb-scrollbar';
   if (args.size === 'thick') {
     scrollbarClass += '-thick';
   }

diff --git a/src/storybook/styles/scrollbar/scrollbar.visual.spec.ts b/src/storybook/styles/scrollbar/scrollbar.visual.spec.ts
@@ -21,7 +21,7 @@ describe(`scrollbar`, () => {
   describeViewports({ viewports: ['small'] }, () => {
     describeEach(cases, ({ thickness, negative, trackVisible }) => {
       beforeEach(async function () {
-        let scrollbarClass = 'scrollbar';
+        let scrollbarClass = 'sbb-scrollbar';
         if (thickness === 'thick') {
           scrollbarClass += '-thick';
         }

diff --git a/src/storybook/styles/table/readme.md b/src/storybook/styles/table/readme.md
@@ -82,7 +82,7 @@ This scheme changes the text color of the cells to `sbb-color-iron`.
 In advanced scenarios, predefined classes might not suffice.
 Therefore, we provide mixins you can build on top of:
 
-| Mixin                | Css class                | Description                               |
+| SASS Mixin           | CSS class                | Description                               |
 | -------------------- | ------------------------ | ----------------------------------------- |
 | `table`              | `sbb-table`              | The table style (equivalent to `table-m`) |
 | `table--m`           | `sbb-table-m`            | Medium size table style                   |

diff --git a/src/storybook/styles/typography/readme.md b/src/storybook/styles/typography/readme.md
@@ -6,7 +6,7 @@ It also includes line-height, letter-spacing and font-family.
 The native browser margins (1em) between paragraph elements `<p>` correctly corresponds
 to the defined paragraph spacing. Due to this there are no additional rules for paragraph spacing.
 
-| css class      | css class bold                | sass mixin          | sass mixin bold  |
+| CSS class      | CSS class bold                | SASS mixin          | SASS mixin bold  |
 | -------------- | ----------------------------- | ------------------- | ---------------- |
 | `sbb-text-xxs` | `sbb-text-xxs sbb-text--bold` | `text-xxs--regular` | `text-xxs--bold` |
 | `sbb-text-xs`  | `sbb-text-xs sbb-text--bold`  | `text-xs--regular`  | `text-xs--bold`  |
@@ -23,22 +23,22 @@ to the defined paragraph spacing. Due to this there are no additional rules for
 
 ## Legend
 
-| css class    | sass mixin |
+| CSS class    | SASS mixin |
 | ------------ | ---------- |
 | `sbb-legend` | `legend`   |
 
 ## Sub
 
 The `<sub>`-tag is also overridden globally as long as you include our global styles.
 
-| sass mixin |
+| SASS mixin |
 | ---------- |
 | `sub`      |
 
 ## Sup
 
 The `<sup>`-tag is also overridden globally as long as you include our global styles.
 
-| sass mixin |
+| SASS mixin |
 | ---------- |
 | `sup`      |
diff --git a/tools/vite/typography.ts b/tools/vite/typography.ts
@@ -24,7 +24,9 @@ export function typography(): PluginOption {
         { inputName: 'core/styles/layout.scss', outputName: 'layout.css' },
         { inputName: 'core/styles/lists.scss', outputName: 'lists.css' },
         { inputName: 'core/styles/normalize.scss', outputName: 'normalize.css' },
+        { inputName: 'core/styles/scrollbar.scss', outputName: 'scrollbar.css' },
         { inputName: 'core/styles/standard-theme.scss', outputName: 'standard-theme.css' },
+        { inputName: 'core/styles/table.scss', outputName: 'table.css' },
         { inputName: 'core/styles/typography.scss', outputName: 'typography.css' },
       ].forEach((entry) => {
         const compiled = sass.compile(join(viteConfig.root, entry.inputName), {