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

lmc-eu · Apr 24, 2023 · b382686 · b382686
1 parent 9f55b2f
commit b382686
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.twig b/packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.twig
@@ -1,6 +1,5 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _class = props.class | default(null) -%}
 {%- set _id = props.id | default(null) -%}
 {%- set _isChecked = props.isChecked | default(false) | boolprop -%}
 {%- set _isDisabled = props.isDisabled | default(false) | boolprop -%}
@@ -37,7 +36,8 @@
 {%- set _valueAttr = _value ? 'value=' ~ _value : null -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _rootDisabledClassName, _rootItemClassName, _rootValidationStateClassName, _class ] -%}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _classNames = [ _rootClassName, _rootDisabledClassName, _rootItemClassName, _rootValidationStateClassName, _styleProps.className ] -%}
 {%- set _labelClassName = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop != 'id') -%}
 
@@ -46,7 +46,7 @@
     {% deprecated 'CheckboxField: The "error" value for "validationState" property will be removed in the next major version. Use "danger" instead.' %}
 {% endif %}
 
-<label for="{{ _id }}" {{ mainProps(_mainPropsWithoutId) }} {{ classProp(_classNames) }}>
+<label for="{{ _id }}" {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
     <input
         {{ inputProps(props) }}
         type="checkbox"

diff --git a/packages/web-twig/src/Resources/components/CheckboxField/README.md b/packages/web-twig/src/Resources/components/CheckboxField/README.md
@@ -40,7 +40,6 @@ Without lexer:
 
 | Prop name           | Type                                                                 | Default | Required | Description                                                                                                                        |
 | ------------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `class`             | `string`                                                             | `null`  | no       | Custom CSS class                                                                                                                   |
 | `id`                | `string`                                                             | `null`  | no       | Input and label identification                                                                                                     |
 | `isChecked`         | `bool`                                                               | `false` | no       | If true, input is checked                                                                                                          |
 | `isDisabled`        | `bool`                                                               | `false` | no       | If true, input is disabled                                                                                                         |
@@ -61,10 +60,12 @@ Without lexer:
 \*\*: Props with and without `UNSAFE_` prefix are mutually exclusive.
 
 On top of the API options, you can add `data-*` or `aria-*` attributes to
-further extend component's descriptiveness and accessibility. These attributes
-will be passed to the topmost HTML element of the component.
+further extend component's 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.
+These attributes will be passed to the topmost HTML element of the component.
 
 [checkboxfield]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/CheckboxField
 [item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Item/README.md
 [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation
 [deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations
+[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches