From f72b0734a646f7ab590bdaafb32e8f767c7bb177 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kate=C5=99ina=20=C5=98eho=C5=99kov=C3=A1?= Date: Fri, 28 Feb 2025 15:29:21 +0100 Subject: [PATCH] Fix(web): Prevent Skeleton SCSS from failing if tokens are not found #DS-1692 --- packages/web/DEPRECATIONS.md | 4 + .../src/scss/components/Skeleton/README.md | 6 + .../scss/components/Skeleton/_Skeleton.scss | 116 +++++++++--------- .../src/scss/components/Skeleton/_theme.scss | 6 +- packages/web/src/scss/tools/_tokens.scss | 2 +- 5 files changed, 77 insertions(+), 57 deletions(-) diff --git a/packages/web/DEPRECATIONS.md b/packages/web/DEPRECATIONS.md index 6415ec93fb..8c5a24b3f6 100644 --- a/packages/web/DEPRECATIONS.md +++ b/packages/web/DEPRECATIONS.md @@ -27,6 +27,10 @@ The direction values `row` and `column` were removed, please use `horizontal` an The `Header` component was removed, please use `UNSTABLE_Header` component instead. +### Skeleton + +The check for the existence of the `skeleton-gradient` token will be removed. Ensure that the skeleton-gradient token is properly set up in your project, as if you import all components, the project will not run without it. + 👉 [What are deprecations?][readme-deprecations] [readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md#deprecations diff --git a/packages/web/src/scss/components/Skeleton/README.md b/packages/web/src/scss/components/Skeleton/README.md index efe9d910f4..3b534b6aba 100644 --- a/packages/web/src/scss/components/Skeleton/README.md +++ b/packages/web/src/scss/components/Skeleton/README.md @@ -68,3 +68,9 @@ Use CSS custom properties to define the width, height, and radius of the shape. style="--spirit-skeleton-shape-width: 100px; --spirit-skeleton-shape-height: 100px" > ``` + +⚠️ Make sure that you have properly set up the `skeleton-gradient` token in your project. Without it, Skeleton will not be available. + +### ⚠️ DEPRECATION NOTICE + +The check for the existence of the `skeleton-gradient` token is deprecated and will be removed in the next major release. Ensure that the `skeleton-gradient` token is properly set up in your project, as if you import all components, the project will not run without it. diff --git a/packages/web/src/scss/components/Skeleton/_Skeleton.scss b/packages/web/src/scss/components/Skeleton/_Skeleton.scss index 3f9909f589..d04664fd08 100644 --- a/packages/web/src/scss/components/Skeleton/_Skeleton.scss +++ b/packages/web/src/scss/components/Skeleton/_Skeleton.scss @@ -1,78 +1,84 @@ +@use 'sass:map'; +@use 'sass:meta'; @use '@tokens' as tokens; @use '../../tools/breakpoint'; @use '../../tools/responsive-properties'; @use 'theme'; @use 'tools'; -.Skeleton { - width: 100%; -} +// @deprecated We are deprecating `gradient-skeleton` token check. +// In the next major version, we can be sure the required token will be present so no check will be needed. +@if map.has-key(meta.module-variables(tokens), 'gradient-skeleton') { + .Skeleton { + width: 100%; + } -.Skeleton--text { - @include tools.generate-item-sizes( - $class-name: 'Skeleton', - $sizes: tools.generate-text-sizes(theme.$sizes-body, 'mobile') - ); -} + .Skeleton--text { + @include tools.generate-item-sizes( + $class-name: 'Skeleton', + $sizes: tools.generate-text-sizes(theme.$sizes-body, 'mobile') + ); + } -.Skeleton--heading { - @each $breakpoint-name, $breakpoint-value in theme.$breakpoints { - @include breakpoint.up($breakpoint-value) { - @include tools.generate-item-sizes( - $class-name: 'Skeleton', - $sizes: tools.generate-text-sizes(theme.$sizes-heading, $breakpoint-name) - ); + .Skeleton--heading { + @each $breakpoint-name, $breakpoint-value in theme.$breakpoints { + @include breakpoint.up($breakpoint-value) { + @include tools.generate-item-sizes( + $class-name: 'Skeleton', + $sizes: tools.generate-text-sizes(theme.$sizes-heading, $breakpoint-name) + ); + } } } -} -.Skeleton--shape { - display: inline-flex; - flex-shrink: 0; - width: var(--#{tokens.$css-variable-prefix}skeleton-shape-width); - height: var(--#{tokens.$css-variable-prefix}skeleton-shape-height); - border: theme.$shape-border-width solid theme.$shape-border-color; + .Skeleton--shape { + display: inline-flex; + flex-shrink: 0; + width: var(--#{tokens.$css-variable-prefix}skeleton-shape-width); + height: var(--#{tokens.$css-variable-prefix}skeleton-shape-height); + border: theme.$shape-border-width solid theme.$shape-border-color; - @include responsive-properties.create-cascade( - $property: 'border-radius', - $input-custom-property-base-name: '#{tokens.$css-variable-prefix}skeleton-shape-radius', - $breakpoints: theme.$breakpoints, - $fallback-value: theme.$shape-default-border-radius - ); -} + @include responsive-properties.create-cascade( + $property: 'border-radius', + $input-custom-property-base-name: '#{tokens.$css-variable-prefix}skeleton-shape-radius', + $breakpoints: theme.$breakpoints, + $fallback-value: theme.$shape-default-border-radius + ); + } -.Skeleton__item, -.Skeleton--shape { - background: theme.$item-gradient; - background-size: 600% 600%; + .Skeleton__item, + .Skeleton--shape { + background: theme.$item-gradient; + background-size: 600% 600%; - @media (prefers-reduced-motion: no-preference) { - animation: skeleton-loading 2.5s infinite; + @media (prefers-reduced-motion: no-preference) { + animation: skeleton-loading 2.5s infinite; + } } -} -.Skeleton--text > .Skeleton__item, -.Skeleton--heading > .Skeleton__item { - display: block; - width: 100%; - height: var(--#{tokens.$css-variable-prefix}skeleton-height, #{theme.$typography-default-height}); - border-radius: theme.$typography-border-radius; + .Skeleton--text > .Skeleton__item, + .Skeleton--heading > .Skeleton__item { + display: block; + width: 100%; + height: var(--#{tokens.$css-variable-prefix}skeleton-height, #{theme.$typography-default-height}); + border-radius: theme.$typography-border-radius; - &:not(:last-child) { - margin-bottom: theme.$margin-bottom; - } + &:not(:last-child) { + margin-bottom: theme.$margin-bottom; + } - &:last-child:not(:only-child) { - width: 80%; + &:last-child:not(:only-child) { + width: 80%; + } } -} -@keyframes skeleton-loading { - 0% { - background-position: 100% 50%; - } + @keyframes skeleton-loading { + 0% { + background-position: 100% 50%; + } - 100% { - background-position: 0 50%; + 100% { + background-position: 0 50%; + } } } diff --git a/packages/web/src/scss/components/Skeleton/_theme.scss b/packages/web/src/scss/components/Skeleton/_theme.scss index 7010140293..8568ae008e 100644 --- a/packages/web/src/scss/components/Skeleton/_theme.scss +++ b/packages/web/src/scss/components/Skeleton/_theme.scss @@ -1,8 +1,12 @@ @use '@tokens' as tokens; +@use '../../tools/tokens' as tokens-tools; @use 'tools'; $margin-bottom: tokens.$space-400; -$item-gradient: tokens.$gradient-skeleton; + +// @deprecated We are deprecating the usage of the 'get-variable-if-exists' function. +// In the next major version, we can be sure the required token will be present so no check will be needed. +$item-gradient: tokens-tools.get-variable-if-exists('gradient-skeleton'); $breakpoints: tokens.$breakpoints; $typography-border-radius: tokens.$radius-300; diff --git a/packages/web/src/scss/tools/_tokens.scss b/packages/web/src/scss/tools/_tokens.scss index c7addf2430..4fc7ef5e59 100644 --- a/packages/web/src/scss/tools/_tokens.scss +++ b/packages/web/src/scss/tools/_tokens.scss @@ -12,7 +12,7 @@ } } -@function get-variable-if-exists($variable-name, $fallback-value) { +@function get-variable-if-exists($variable-name, $fallback-value: '') { @if map.has-key(meta.module-variables(tokens), $variable-name) { @return map.get(meta.module-variables(tokens), $variable-name); } @else {