BREAKING CHANGE(web-twig): Remove theme prop and default color fr…

…om `Tag` #DS-648 ## Migration Guide Instead of the `default` color, use `neutral` in the `Tag` component. Instead of the `theme` prop, use `isSubtle` in the `Tag` component. - `<Tag color="default" …>` → `<Tag color="neutral" …>` - `<Tag theme="light" …>` → `<Tag isSubtle …>` - `<Tag theme="dark" …>` → `<Tag …>` (default) Please refer back to this guide or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · bf62242 · bf62242
1 parent 273aa26
commit bf62242
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 32 deletions.
diff --git 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
@@ -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/...ig/tests/__snapshots__/ComponentsSnapshotTest__test with data set tagDefault.twig__1.html b/...ig/tests/__snapshots__/ComponentsSnapshotTest__test with data set tagDefault.twig__1.html
@@ -5,22 +5,13 @@
     </title>
   </head>
   <body>
-    <span class="Tag Tag--neutral Tag--medium">Tag</span> <span class="Tag Tag--default Tag--medium">Tag</span>
-    <span class="Tag Tag--success Tag--medium">Tag</span>
+    <span class="Tag Tag--neutral Tag--medium">Tag</span> <span class="Tag Tag--success Tag--medium">Tag</span>
     <div class="Tag Tag--neutral Tag--medium">
       Tag
     </div>
     <span class="Tag Tag--neutral Tag--xlarge">Tag</span> <span class="Tag Tag--neutral Tag--medium Tag--subtle">Tag</span>
     <div class="Tag Tag--danger Tag--xsmall Tag--subtle">
       Tag
     </div>
-
-    <div class="Tag Tag--danger Tag--xsmall Tag--light">
-      Tag
-    </div>
-
-    <div class="Tag Tag--danger Tag--xsmall Tag--dark">
-      Tag
-    </div>
   </body>
 </html>
diff --git 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 color="default">Tag</Tag>
 <Tag color="success">Tag</Tag>
 <Tag elementType="div">Tag</Tag>
 <Tag size="xlarge">Tag</Tag>
 <Tag isSubtle>Tag</Tag>
 <Tag color="danger" elementType="div" size="xsmall" isSubtle>Tag</Tag>
-<Tag color="danger" elementType="div" size="xsmall" theme="light">Tag</Tag>
-<Tag color="danger" elementType="div" size="xsmall" theme="dark">Tag</Tag>