From dbb4432af70c0f9ec92e8daa9ce4ec14e22703e2 Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Fri, 10 Jan 2025 09:33:18 +0100 Subject: [PATCH 01/10] Feat(web): Extend Flex direction by reverse value - Deprecate row and column values - Change Flex direction values to horizontal and vertical instead of row and column - Extend Flex direction by horizontalReverse value - All demos updated to use new values and created new with reverse order --- apps/demo/partials/cover.hbs | 2 +- .../templates/partials/cover.html.twig | 2 +- docs/DICTIONARIES.md | 9 +-- index.html | 2 +- packages/web/DEPRECATIONS.md | 9 +++ .../web/src/scss/components/Card/index.html | 2 +- .../web/src/scss/components/Flex/README.md | 39 ++++++++---- .../web/src/scss/components/Flex/_Flex.scss | 15 ++++- .../web/src/scss/components/Flex/index.html | 62 ++++++++++++------- .../web/src/scss/components/Footer/README.md | 11 ++-- .../web/src/scss/components/Footer/index.html | 8 +-- 11 files changed, 110 insertions(+), 51 deletions(-) diff --git a/apps/demo/partials/cover.hbs b/apps/demo/partials/cover.hbs index 83bf99da92..383ea7e2df 100644 --- a/apps/demo/partials/cover.hbs +++ b/apps/demo/partials/cover.hbs @@ -2,7 +2,7 @@

{{title}} diff --git a/apps/web-twig-demo/templates/partials/cover.html.twig b/apps/web-twig-demo/templates/partials/cover.html.twig index d5032e7939..260dab7f5f 100644 --- a/apps/web-twig-demo/templates/partials/cover.html.twig +++ b/apps/web-twig-demo/templates/partials/cover.html.twig @@ -2,7 +2,7 @@

{{ title }} diff --git a/docs/DICTIONARIES.md b/docs/DICTIONARIES.md index 5c910f6b8d..0b3a822abe 100644 --- a/docs/DICTIONARIES.md +++ b/docs/DICTIONARIES.md @@ -47,10 +47,11 @@ This project uses `dictionaries` to unify props between different components. ### Direction -| Dictionary | Values | Code name | -| ------------- | ------------------------ | ------------- | -| Direction | `horizontal`, `vertical` | Direction | -| DirectionAxis | `x`, `y` | DirectionAxis | +| Dictionary | Values | Code name | +| ----------------- | --------------------------------------------- | ----------------- | +| Direction | `horizontal`, `vertical` | Direction | +| DirectionExtended | `horizontal`, `vertical`, `horizontalReverse` | DirectionExtended | +| DirectionAxis | `x`, `y` | DirectionAxis | ### Emphasis diff --git a/index.html b/index.html index 1830e84f74..9346f5d4a5 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@

Development Preview

-
+
` → `` +### Flex + +The direction values `row` and `column` were removed, please use `horizontal` and `vertical` instead. + +### Migration Guide + +- `
` → `
` +- `
` → `
` + 👉 [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/Card/index.html b/packages/web/src/scss/components/Card/index.html index 26fa2d5b9c..e8b197302c 100644 --- a/packages/web/src/scss/components/Card/index.html +++ b/packages/web/src/scss/components/Card/index.html @@ -1275,7 +1275,7 @@

Item 1
@@ -231,7 +251,7 @@

Responsive Spacing

Item 1
@@ -254,7 +274,7 @@

Responsive Custom Horizontal Spacing

Item 1
@@ -276,7 +296,7 @@

Responsive Custom Vertical Spacing

-
{{setVar "items" 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 }} diff --git a/packages/web/src/scss/components/Footer/README.md b/packages/web/src/scss/components/Footer/README.md index a6fa57094b..0cc35ebd20 100644 --- a/packages/web/src/scss/components/Footer/README.md +++ b/packages/web/src/scss/components/Footer/README.md @@ -93,7 +93,7 @@ Use the [Product Logo][product-logo] component to display the logo of your produ Use the secondary [Button][button] component to create social media links inside a [Flex][flex] container. ```html -
-