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

packages/web-twig/src/Resources/components/Stack/README.md

@@ -52,10 +52,11 @@ Without lexer:
 
 | Prop name     | Type     | Default | Required | Description        |
 | ------------- | -------- | ------- | -------- | ------------------ |
-| `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.
 
 [stack]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Stack
+[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches

packages/web-twig/src/Resources/components/Stack/Stack.twig

@@ -1,14 +1,14 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _class = props.class | default(null) -%}
 {%- set _elementType = props.elementType | default('div') -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Stack' -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _class ] -%}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
 
-<{{ _elementType }} {{ mainProps(props) }} {{ classProp(_classNames) }}>
+<{{ _elementType }} {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
 {%- block content %}{% endblock -%}
 </{{ _elementType }}>