diff --git a/docs/migrations/web-twig/MIGRATION-v3.md b/docs/migrations/web-twig/MIGRATION-v3.md index 72168ffa70..6575f2e215 100644 --- a/docs/migrations/web-twig/MIGRATION-v3.md +++ b/docs/migrations/web-twig/MIGRATION-v3.md @@ -18,6 +18,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 @@ -163,6 +164,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 @@ -212,5 +224,6 @@ Please refer back to this guide or reach out to our team if you encounter any is [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-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 index 6470b8eb90..22e0e41c69 100644 --- 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 - Item selected + Item selected - Item + Item Item link @@ -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 index 70459b37bd..d0188a8969 100644 --- 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 index adf74f63c4..669606dbdf 100644 --- 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 @@ - + Item selected - + Item diff --git a/packages/web-twig/src/Resources/components/Tabs/stories/TabsDefault.twig b/packages/web-twig/src/Resources/components/Tabs/stories/TabsDefault.twig index 771b581f9c..a993b90537 100644 --- 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 @@ - Item 1 + Item 1 - Item 2 + Item 2 Item link