diff --git a/packages/web-twig/src/Resources/components/Tag/README.md b/packages/web-twig/src/Resources/components/Tag/README.md index 490fd503b5..464eea228c 100644 --- a/packages/web-twig/src/Resources/components/Tag/README.md +++ b/packages/web-twig/src/Resources/components/Tag/README.md @@ -31,13 +31,12 @@ Without lexer: ## API -| Prop name | Type | Default | Required | Description | -| ------------- | ------------------------------------------------------------------------------- | --------- | -------- | ---------------------------------------------------------------------------------------------------------------- | -| `color` | [Emotion Color dictionary][dictionary-color], `neutral`, `default` (deprecated) | `neutral` | no | Color of the component; [**DEPRECATED**][deprecated] The value `default` will be replaced by the value `neutral` | -| `isSubtle` | `boolean` | `false` | no | Whether is Tag displayed in subtle variant | -| `elementType` | `string` | `span` | no | HTML tag to render | -| `size` | [Size Extended dictionary][dictionary-size] | `medium` | no | Size of the Tag | -| `theme` | `light`, `dark` | `null` | no | [**DEPRECATED**][deprecated] in favor of `isSubtle`; Theme variant | +| Prop name | Type | Default | Required | Description | +| ------------- | ------------------------------------------------------- | --------- | -------- | ---------------------------------------------- | +| `color` | [Emotion Color dictionary][dictionary-color], `neutral` | `neutral` | no | Color of the component | +| `elementType` | `string` | `span` | no | HTML tag to render | +| `isSubtle` | `boolean` | `false` | no | Whether the Tag is displayed in subtle variant | +| `size` | [Size Extended dictionary][dictionary-size] | `medium` | no | Size of the Tag | You can add `id`, `data-*` or `aria-*` attributes to further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available, @@ -46,5 +45,4 @@ see the [Escape hatches][escape-hatches] section in README to learn how and when [tag]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Tag [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color [dictionary-size]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#size -[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 diff --git a/packages/web-twig/src/Resources/components/Tag/Tag.twig b/packages/web-twig/src/Resources/components/Tag/Tag.twig index a667d9de15..d4310cec9e 100644 --- a/packages/web-twig/src/Resources/components/Tag/Tag.twig +++ b/packages/web-twig/src/Resources/components/Tag/Tag.twig @@ -4,26 +4,16 @@ {%- set _elementType = props.elementType | default('span') -%} {%- set _isSubtle = props.isSubtle | default(false) -%} {%- set _size = props.size | default('medium') -%} -{%- set _theme = props.theme | default(null) -%} {# Class names #} {%- set _rootClassName = _spiritClassPrefix ~ 'Tag' -%} {%- set _colorClassName = _spiritClassPrefix ~ 'Tag--' ~ _color -%} {%- set _sizeClassName = _spiritClassPrefix ~ 'Tag--' ~ _size -%} {%- set _subtleClassname = _isSubtle ? _spiritClassPrefix ~ 'Tag--subtle' : null -%} -{%- set _themeClassName = _theme ? _spiritClassPrefix ~ 'Tag--' ~ _theme : null -%} {# Miscellaneous #} {%- set _styleProps = useStyleProps(props) -%} -{%- set _classNames = [ _rootClassName, _colorClassName, _sizeClassName, _subtleClassname, _themeClassName, _styleProps.className ] -%} - -{# Deprecations #} -{% if _theme %} - {% deprecated 'Tag: The "theme" property is deprecated, use "isSubtle" instead.' %} -{% endif %} -{% if _color is same as('default') %} - {% deprecated 'Tag: The "default" value for "color" property will be removed in the next major version. Use "neutral" instead.' %} -{% endif %} +{%- set _classNames = [ _rootClassName, _colorClassName, _sizeClassName, _subtleClassname, _styleProps.className ] -%} <{{ _elementType }} {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}> {%- block content %}{% endblock -%} diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set tagDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set tagDefault.twig__1.html index b177d959b6..c52105b2b9 100644 --- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set tagDefault.twig__1.html +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set tagDefault.twig__1.html @@ -5,8 +5,7 @@ - Tag Tag - Tag + Tag Tag
Tag
@@ -14,13 +13,5 @@
Tag
- -
- Tag -
- -
- Tag -
diff --git a/packages/web-twig/tests/components-fixtures/tagDefault.twig b/packages/web-twig/tests/components-fixtures/tagDefault.twig index b1d5a7fbe8..2d4f7c2b56 100644 --- a/packages/web-twig/tests/components-fixtures/tagDefault.twig +++ b/packages/web-twig/tests/components-fixtures/tagDefault.twig @@ -1,9 +1,6 @@ Tag -Tag Tag Tag Tag Tag Tag -Tag -Tag