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

lmc-eu · Apr 24, 2023 · 44affe8 · 44affe8
1 parent 1a32535
commit 44affe8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/web-twig/src/Resources/components/Text/README.md b/packages/web-twig/src/Resources/components/Text/README.md
@@ -31,13 +31,14 @@ Without lexer:
 
 | Prop name     | Type                                        | Default   | Required | Description          |
 | ------------- | ------------------------------------------- | --------- | -------- | -------------------- |
-| `class`       | `string`                                    | `null`    | no       | Custom CSS class     |
 | `elementType` | `string`                                    | `p`       | no       | HTML tag to render   |
 | `emphasis`    | `regular`, `bold`, `italic`                 | `regular` | no       | Emphasis of the text |
 | `size`        | [Size Extended dictionary][dictionary-size] | `medium`  | no       | Size of the text     |
 
 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.
 
 [text]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/src/components/Text
 [dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size
+[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/Text/Text.twig b/packages/web-twig/src/Resources/components/Text/Text.twig
@@ -1,6 +1,5 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _class = props.class | default(null) -%}
 {%- set _emphasis = props.emphasis | default('regular') -%}
 {%- set _size = props.size | default('medium') -%}
 {%- set _elementType = props.elementType | default('p') -%}
@@ -9,8 +8,9 @@
 {%- set _rootClassName = _spiritClassPrefix ~ 'typography-body-' ~ _size ~ '-text-' ~ _emphasis -%}
 
 {# 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 }}>