From 1a32535541942a7a9a3553ea9260f0f601f589d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Tue, 18 Apr 2023 11:24:21 +0200 Subject: [PATCH] Feat(web-twig): Deprecate class in Stack #DS-646 --- packages/web-twig/src/Resources/components/Stack/README.md | 5 +++-- packages/web-twig/src/Resources/components/Stack/Stack.twig | 6 +++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/web-twig/src/Resources/components/Stack/README.md b/packages/web-twig/src/Resources/components/Stack/README.md index 8fe18dc8b5..eaebc27d1f 100644 --- a/packages/web-twig/src/Resources/components/Stack/README.md +++ b/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 diff --git a/packages/web-twig/src/Resources/components/Stack/Stack.twig b/packages/web-twig/src/Resources/components/Stack/Stack.twig index 6fed0e5f48..cd2dd41568 100644 --- a/packages/web-twig/src/Resources/components/Stack/Stack.twig +++ b/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 -%}