BREAKING CHANGE(web-twig): Rename TabLink target prop to targetPaneId…

… #DS-1096 See the Tabs: TabLink `target` Prop section in the web-twig package Migration Guide to version 3.
lmc-eu · May 14, 2024 · c93d91d · c93d91d
1 parent 80cae41
commit c93d91d
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 15 deletions.
diff --git a/docs/migrations/web-twig/MIGRATION-v3.md b/docs/migrations/web-twig/MIGRATION-v3.md
@@ -19,6 +19,7 @@ Introducing version 3 of the _spirit-web-twig_ package
   - [Header: Abstracts Class and Style](#header-abstracts-class-and-style)
   - [Modal: ModalDialog `isScrollable` Prop](#modal-modaldialog-isscrollable-prop)
   - [Modal: ModalDialog Uniform Appearance](#modal-modaldialog-uniform-appearance)
+  - [Tabs: TabLink `target` Prop](#tabs-tablink-target-prop)
   - [Tooltip: Composition](#tooltip-composition)
 
 ## General Changes
@@ -181,6 +182,17 @@ remains accessible via the `isDockedOnMobile` property.
 
 Add `isDockedOnMobile` prop to the `ModalDialog` component.
 
+### Tabs: TabLink `target` Prop
+
+The `target` prop was renamed to `targetPaneId` in the `TabLink` component.
+
+The reason for this change is to avoid confusion with the
+[`target` attribute][mdn-anchor-target] in the anchor tag.
+
+#### Migration Guide
+
+Replace `target` with `targetPaneId` in the `TabLink` component.
+
 ### Tooltip: Composition
 
 The `Tooltip` component structure was changed, so `Tooltip` (formerly the optional
@@ -231,6 +243,7 @@ Please refer back to this guide or reach out to our team if you encounter any is
 [alert-role-documentation]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
 [dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#placement
 [dropdown-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Dropdown/README.md
+[mdn-anchor-target]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes
 [readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#deprecations
 [tooltip-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Tooltip/README.md
diff --git a/packages/web-twig/src/Resources/components/Tabs/README.md b/packages/web-twig/src/Resources/components/Tabs/README.md
@@ -7,10 +7,10 @@ Basic example usage:
 ```html
 <TabList>
   <TabItem>
-    <TabLink isSelected id="pane1-tab" target="pane1" data-spirit-toggle="tabs">Item selected</TabLink>
+    <TabLink isSelected id="pane1-tab" targetPaneId="pane1" data-spirit-toggle="tabs">Item selected</TabLink>
   </TabItem>
   <TabItem>
-    <TabLink id="pane2-tab" target="pane2" data-spirit-toggle="tabs">Item</TabLink>
+    <TabLink id="pane2-tab" targetPaneId="pane2" data-spirit-toggle="tabs">Item</TabLink>
   </TabItem>
   <TabItem>
     <TabLink href="https://www.example.com">Item link</TabLink>
@@ -30,7 +30,7 @@ Without lexer:
                 {% embed "@spirit/tabLink.twig" with { props: {
                   id: 'pane1-tab',
                   isSelected: true,
-                  target: 'pane1',
+                  targetPaneId: 'pane1',
                 } } %}
                     {% block content %}
                         Item selected
@@ -56,11 +56,11 @@ There is no API for TabItem.
 
 ### TabLink
 
-| Name         | Type     | Default | Required | Description                  |
-| ------------ | -------- | ------- | -------- | ---------------------------- |
-| `href`       | `string` | `null`  | ✕        | URL target of a link         |
-| `isSelected` | `bool`   | `false` | ✕        | Whether is tab item selected |
-| `target`     | `string` | `null`  | ✕        | Target tab pane ID           |
+| Name           | Type     | Default | Required | Description                  |
+| -------------- | -------- | ------- | -------- | ---------------------------- |
+| `href`         | `string` | `null`  | ✕        | URL target of a link         |
+| `isSelected`   | `bool`   | `false` | ✕        | Whether is tab item selected |
+| `targetPaneId` | `string` | `null`  | ✕        | Target tab pane ID           |
 
 ### TabPane
 

diff --git a/packages/web-twig/src/Resources/components/Tabs/TabLink.twig b/packages/web-twig/src/Resources/components/Tabs/TabLink.twig
@@ -3,15 +3,15 @@
 {%- set _ariaTarget = props.ariaTarget | default(null) -%}
 {%- set _href = props.href | default(null) -%}
 {%- set _isSelected = props.isSelected | default(false) -%}
-{%- set _target = props.target | default(null) -%}
+{%- set _targetPaneId = props.targetPaneId | default(null) -%}
 
 {# Class names #}
 {%- set _isSelectedClassName = _isSelected ? 'is-selected' : null -%}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Tabs__link' -%}
 
 {# Attributes #}
-{%- set _ariaControlsAttr = _target ? 'aria-controls="' ~ _target | escape('html_attr') ~ '"' : null -%}
-{%- set _dataTargetAttr = _target ? 'data-spirit-target="#' ~ _target | escape('html_attr') ~ '"' : null -%}
+{%- set _ariaControlsAttr = _targetPaneId ? 'aria-controls="' ~ _targetPaneId | escape('html_attr') ~ '"' : null -%}
+{%- set _dataTargetAttr = _targetPaneId ? 'data-spirit-target="#' ~ _targetPaneId | escape('html_attr') ~ '"' : null -%}
 {%- set _roleAttr = _href ? 'role="tab"' : null -%}
 {%- set _typeAttr = _href ? null : 'type="button"' -%}
 

diff --git a/packages/web-twig/src/Resources/components/Tabs/__tests__/__fixtures__/tabsDefault.twig b/packages/web-twig/src/Resources/components/Tabs/__tests__/__fixtures__/tabsDefault.twig
@@ -1,11 +1,11 @@
 <TabList>
     <TabItem>
-        <TabLink isSelected id="pane1-tab" data-spirit-toggle="tabs" target="pane1">
+        <TabLink isSelected id="pane1-tab" data-spirit-toggle="tabs" targetPaneId="pane1">
             Item selected
         </TabLink>
     </TabItem>
     <TabItem>
-        <TabLink id="pane2-tab" data-spirit-toggle="tabs" target="pane2">
+        <TabLink id="pane2-tab" data-spirit-toggle="tabs" targetPaneId="pane2">
             Item
         </TabLink>
     </TabItem>

diff --git a/packages/web-twig/src/Resources/components/Tabs/stories/TabsDefault.twig b/packages/web-twig/src/Resources/components/Tabs/stories/TabsDefault.twig
@@ -1,9 +1,9 @@
 <TabList>
     <TabItem>
-        <TabLink isSelected id="pane1-tab" data-spirit-toggle="tabs" target="pane1">Item 1</TabLink>
+        <TabLink isSelected id="pane1-tab" data-spirit-toggle="tabs" targetPaneId="pane1">Item 1</TabLink>
     </TabItem>
     <TabItem>
-        <TabLink id="pane2-tab" data-spirit-toggle="tabs" target="pane2">Item 2</TabLink>
+        <TabLink id="pane2-tab" data-spirit-toggle="tabs" targetPaneId="pane2">Item 2</TabLink>
     </TabItem>
     <TabItem>
         <TabLink href="https://www.example.com">Item link</TabLink>