Feat(web-twig): Deprecate class in Grid #DS-646

lmc-eu · Apr 24, 2023 · bf5b7f4 · bf5b7f4
1 parent 8878e8e
commit bf5b7f4
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 16 deletions.
diff --git a/packages/web-twig/src/Resources/components/Grid/Grid.twig b/packages/web-twig/src/Resources/components/Grid/Grid.twig
@@ -1,6 +1,5 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _class = props.class | default(null) -%}
 {%- set _cols = props.cols | default(null) -%}
 {%- set _desktop = props.desktop | default(null) -%}
 {%- set _elementType = props.elementType | default('div') -%}
@@ -13,10 +12,12 @@
 {%- set _rootClassName = _spiritClassPrefix ~ 'Grid' -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _colsClassName, _tabletClassName, _desktopClassName, _class ] -%}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _classNames = [ _rootClassName, _colsClassName, _tabletClassName, _desktopClassName, _styleProps.className ] -%}
 
 <{{ _elementType }}
     {{ mainProps(props) }}
+    {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
 >
     {%- block content %}{% endblock -%}

diff --git a/packages/web-twig/src/Resources/components/Grid/GridSpan.twig b/packages/web-twig/src/Resources/components/Grid/GridSpan.twig
@@ -1,6 +1,5 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _class = props.class | default(null) -%}
 {%- set _over = props.over | default(null) -%}
 {%- set _desktop = props.desktop | default(null) -%}
 {%- set _elementType = props.elementType | default('div') -%}
@@ -13,10 +12,12 @@
 {%- set _rootClassName = _spiritClassPrefix ~ 'Grid__span' -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _overClassName, _tabletClassName, _desktopClassName, _class ] -%}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _classNames = [ _rootClassName, _overClassName, _tabletClassName, _desktopClassName, _styleProps.className ] -%}
 
 <{{ _elementType }}
     {{ mainProps(props) }}
+    {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
 >
     {%- block content %}{% endblock -%}

diff --git a/packages/web-twig/src/Resources/components/Grid/README.md b/packages/web-twig/src/Resources/components/Grid/README.md
@@ -56,11 +56,11 @@ Without lexer:
 | `cols`        | `1`, `2`, `3`, `4`, `5`, `6`, `12` | `null`  | no       | Number of columns to use            |
 | `tablet`      | `1`, `2`, `3`, `4`, `5`, `6`, `12` | `null`  | no       | Number of columns to use on tablet  |
 | `desktop`     | `1`, `2`, `3`, `4`, `5`, `6`, `12` | `null`  | no       | Number of columns to use on desktop |
-| `class`       | `string`                           | `null`  | no       | Custom CSS class                    |
 | `elementType` | `string`                           | `div`   | no       | HTML tag to render                  |
 
 You can add `id`, `data-*` or `aria-*` attributes to further extend component's
-descriptiveness and accessibility.
+descriptiveness and accessibility. Also, UNSAFE styling props are available,
+see the [Escape hatches][escape-hatches] section in README to learn how and when to use them.
 
 ## GridSpan
 
@@ -107,10 +107,11 @@ Without lexer:
 | `over`        | `2`, `4`, `6`, `8`, `10`, `12` | `null`  | no       | Number of columns to span over            |
 | `tablet`      | `2`, `4`, `6`, `8`, `10`, `12` | `null`  | no       | Number of columns to span over on tablet  |
 | `desktop`     | `2`, `4`, `6`, `8`, `10`, `12` | `null`  | no       | Number of columns to span over on desktop |
-| `class`       | `string`                       | `null`  | no       | Custom CSS class                          |
 | `elementType` | `string`                       | `div`   | no       | HTML tag to render                        |
 
 You can add `id`, `data-*` or `aria-*` attributes to further extend component's
-descriptiveness and accessibility.
+descriptiveness and accessibility. Also, UNSAFE styling props are available,
+see the [Escape hatches][escape-hatches] section in README to learn how and when to use them.
 
 [grid]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Grid
+[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridEqualColumns.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridEqualColumns.twig
@@ -2,7 +2,7 @@
 
     <h2 class="docs-Heading">Equal Columns</h2>
 
-    <Grid cols="12" class="mb-1000">
+    <Grid cols="12" UNSAFE_className="mb-1000">
         <div class="docs-Box docs-Box--small px-0">1/12</div>
         <div class="docs-Box docs-Box--small px-0">1/12</div>
         <div class="docs-Box docs-Box--small px-0">1/12</div>
@@ -16,33 +16,33 @@
         <div class="docs-Box docs-Box--small px-0">1/12</div>
         <div class="docs-Box docs-Box--small px-0">1/12</div>
     </Grid>
-    <Grid cols="6" class="mb-1000">
+    <Grid cols="6" UNSAFE_className="mb-1000">
         <div class="docs-Box docs-Box--small">1/6</div>
         <div class="docs-Box docs-Box--small">1/6</div>
         <div class="docs-Box docs-Box--small">1/6</div>
         <div class="docs-Box docs-Box--small">1/6</div>
         <div class="docs-Box docs-Box--small">1/6</div>
         <div class="docs-Box docs-Box--small">1/6</div>
     </Grid>
-    <Grid cols="5" class="mb-1000">
+    <Grid cols="5" UNSAFE_className="mb-1000">
         <div class="docs-Box docs-Box--small">1/5</div>
         <div class="docs-Box docs-Box--small">1/5</div>
         <div class="docs-Box docs-Box--small">1/5</div>
         <div class="docs-Box docs-Box--small">1/5</div>
         <div class="docs-Box docs-Box--small">1/5</div>
     </Grid>
-    <Grid cols="4" class="mb-1000">
+    <Grid cols="4" UNSAFE_className="mb-1000">
         <div class="docs-Box docs-Box--small">1/4</div>
         <div class="docs-Box docs-Box--small">1/4</div>
         <div class="docs-Box docs-Box--small">1/4</div>
         <div class="docs-Box docs-Box--small">1/4</div>
     </Grid>
-    <Grid cols="3" class="mb-1000">
+    <Grid cols="3" UNSAFE_className="mb-1000">
         <div class="docs-Box docs-Box--small">1/3</div>
         <div class="docs-Box docs-Box--small">1/3</div>
         <div class="docs-Box docs-Box--small">1/3</div>
     </Grid>
-    <Grid cols="2" class="mb-1000">
+    <Grid cols="2" UNSAFE_className="mb-1000">
         <div class="docs-Box docs-Box--small">1/2</div>
         <div class="docs-Box docs-Box--small">1/2</div>
     </Grid>

diff --git a/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveGridSpan.twig b/packages/web-twig/src/Resources/components/Grid/stories/GridResponsiveGridSpan.twig
@@ -2,15 +2,15 @@
 
     <h2 class="docs-Heading">Responsive Grid Span</h2>
 
-    <Grid class="mb-1000">
+    <Grid UNSAFE_className="mb-1000">
         <GridSpan over="12" tablet="10" desktop="8">
             <div class="docs-Box docs-Box--small">
                 12 on mobile, 10 on tablet, 8 on desktop
             </div>
         </GridSpan>
     </Grid>
 
-    <Grid class="mb-1000">
+    <Grid UNSAFE_className="mb-1000">
         <GridSpan over="10" tablet="8" desktop="6">
             <div class="docs-Box docs-Box--small">
                 10 on mobile, 8 on tablet, 6 on desktop