BREAKING CHANGE(web-twig): Add spirit infix to data attr names in c…

…omponents #DS-585 ## Migration Guide Add `spirit` infix to all affected APIs. - `data-toggle="collapse"` → `data-spirit-toggle="collapse"` You have to modify these component APIs or usages: - Collapse - Dropdown - FileUploader - Header - Modal - ScrollView - Tooltip To make everything work, you have to make these changes: ### Collapse - `<Button data-toggle="collapse" data-target="target-id" …>` → `<Button data-spirit-toggle="collapse" data-spirit-target="target-id" …>` - `<ButtonLink data-toggle="collapse" data-more …>` → `<ButtonLink data-spirit-toggle="collapse" data-spirit-more …>` ### Dropdown - `<Button data-toggle="dropdown" data-target="target-id" …>` → `<Button data-spirit-toggle="dropdown" data-spirit-target="target-id" …>` - `<Button data-toggle="dropdown" data-autoclose="true" …>` → `<Button data-spirit-toggle="dropdown" data-spirit-autoclose="true" …>` ### FileUploader - `<FileUploader data-toggle="fileUploader" …>` → `<FileUploader data-spirit-toggle="fileUploader" …>` ### Header - `<HeaderButton data-toggle="offcanvas" data-target="target-id" …>` → `<HeaderButton data-spirit-toggle="offcanvas" data-spirit-target="target-id" …>` ### Modal - `<Button data-toggle="modal" data-target="target-id" …>` → `<Button data-spirit-toggle="modal" data-spirit-target="target-id" …>` - `<Button data-dismiss="modal" data-target="target-id" …>` → `<Button data-spirit-dismiss="modal" data-spirit-target="target-id" …>` ### ScrollView - `<ScrollView data-toggle="scrollView" …>` → `<ScrollView data-spirit-toggle="scrollView" …>` ### Tabs - `<button class="Tabs__link" data-toggle="tabs" data-target="target-id" …>` → `<button class="Tabs__link" data-spirit-toggle="tabs" data-spirit-target="target-id" …>` ### Tooltip - `<Button data-toggle="tooltip" data-target="target-id" …>` → `<Button data-spirit-toggle="tooltip" data-spirit-target="target-id" …>` Please refer back to this guide or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · 9dd93ac · 9dd93ac
1 parent 1a8acd9
commit 9dd93ac
Show file tree

Hide file tree

Showing 75 changed files with 221 additions and 218 deletions.
diff --git a/packages/web-twig/src/Resources/components/Accordion/Accordion.twig b/packages/web-twig/src/Resources/components/Accordion/Accordion.twig
@@ -19,7 +19,7 @@
     {{ styleProp(_styleProps) }}
     {{ _idAttr | raw }}
     {{ classProp(_classNames) }}
-    data-toggle="accordion"
+    data-spirit-toggle="accordion"
 >
     {% block content %}{% endblock %}
 </{{ _elementType }}>
diff --git a/packages/web-twig/src/Resources/components/Accordion/AccordionContent.twig b/packages/web-twig/src/Resources/components/Accordion/AccordionContent.twig
@@ -14,7 +14,7 @@
 {# Attributes #}
 {%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
 {%- set _labelledIdAttr = _labelledById ? 'aria-labelledby="' ~ _labelledById | escape('html_attr') ~ '"' : null -%}
-{%- set _dataParentAttr = _parent ? 'data-parent="' ~ _parent | escape('html_attr') ~ '"' : null -%}
+{%- set _dataParentAttr = _parent ? 'data-spirit-parent="' ~ _parent | escape('html_attr') ~ '"' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}

diff --git a/packages/web-twig/src/Resources/components/Accordion/AccordionHeader.twig b/packages/web-twig/src/Resources/components/Accordion/AccordionHeader.twig
@@ -15,7 +15,7 @@
 
 {# Attributes #}
 {%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
-{%- set _dataTargetAttr = _for ? 'data-target="' ~ _for | escape('html_attr') ~ '"' : null -%}
+{%- set _dataTargetAttr = _for ? 'data-spirit-target="' ~ _for | escape('html_attr') ~ '"' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
@@ -32,7 +32,7 @@
     <button
         type="button"
         class="{{ _toggleClassName }}"
-        data-toggle="collapse"
+        data-spirit-toggle="collapse"
         {{ _dataTargetAttr | raw }}
         aria-expanded="{{ _ariaExpanded }}"
         aria-controls="{{ _for }}"

diff --git a/packages/web-twig/src/Resources/components/Collapse/Collapse.twig b/packages/web-twig/src/Resources/components/Collapse/Collapse.twig
@@ -13,8 +13,8 @@
 
 {# Attributes #}
 {%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
-{%- set _dataBreakpointAttr = _breakpoint ? 'data-breakpoint="' ~ _breakpoint | escape('html_attr') ~ '"' : null -%}
-{%- set _dataParentAttr = _parent ? 'data-parent="' ~ _parent | escape('html_attr') ~ '"' : null -%}
+{%- set _dataBreakpointAttr = _breakpoint ? 'data-spirit-breakpoint="' ~ _breakpoint | escape('html_attr') ~ '"' : null -%}
+{%- set _dataParentAttr = _parent ? 'data-spirit-parent="' ~ _parent | escape('html_attr') ~ '"' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}

diff --git a/packages/web-twig/src/Resources/components/Collapse/README.md b/packages/web-twig/src/Resources/components/Collapse/README.md
@@ -5,20 +5,20 @@ This is Twig implementation of the [Collapse] component.
 Basic example usage:
 
 ```twig
-<Button data-toggle="collapse" data-target="CollapseExample">Collapse trigger</Button>
+<Button data-spirit-toggle="collapse" data-spirit-target="CollapseExample">Collapse trigger</Button>
 <Collapse id="CollapseExample">Collapse content</Collapse>
 ```
 
 Usage with link:
 
 ```twig
-<ButtonLink href="javascript:void(0)" data-toggle="collapse" data-target="CollapseExample">Collapse trigger</ButtonLink>
+<ButtonLink href="javascript:void(0)" data-spirit-toggle="collapse" data-spirit-target="CollapseExample">Collapse trigger</ButtonLink>
 ```
 
 Open on page load:
 
 ```twig
-<Button data-toggle="collapse" data-target="CollapseExample" aria-expanded="true">Collapse trigger</Button>
+<Button data-spirit-toggle="collapse" data-spirit-target="CollapseExample" aria-expanded="true">Collapse trigger</Button>
 <Collapse id="CollapseExample" isOpen>Collapse content</Collapse>
 ```
 
@@ -32,7 +32,7 @@ Activate Collapse only on mobile screens:
 Hide Collapse trigger on collapse:
 
 ```twig
-<Button {# … #} data-more>Collapse trigger</Button> {# … #}
+<Button {# … #} data-spirit-more>Collapse trigger</Button> {# … #}
 ```
 
 Without lexer:
@@ -48,7 +48,7 @@ Without lexer:
 {% endembed %}
 ```
 
-You can add any custom trigger like `<button>` or `<a>` but it is necessary to add `data-toggle="collapse"`, `data-target="<id>"`
+You can add any custom trigger like `<button>` or `<a>` but it is necessary to add `data-spirit-toggle="collapse"`, `data-spirit-target="<id>"`
 attributes to register trigger events.
 
 ## API
@@ -69,13 +69,13 @@ see the [Escape hatches][escape-hatches] section in README to learn how and when
 
 ## Trigger attributes
 
-| Prop name       | Type      | Default    | Required | Description                         |
-| --------------- | --------- | ---------- | -------- | ----------------------------------- |
-| `aria-controls` | `string`  | -          | no       | Aria controls state (auto)          |
-| `aria-expanded` | `string`  | -          | no       | Aria expanded state (auto)          |
-| `data-more`     | `boolean` | -          | no       | For hide on collapse as more button |
-| `data-target`   | `string`  | -          | yes      | Target selector                     |
-| `data-toggle`   | `string`  | `collapse` | yes      | Iterable selector                   |
+| Prop name            | Type      | Default    | Required | Description                         |
+| -------------------- | --------- | ---------- | -------- | ----------------------------------- |
+| `aria-controls`      | `string`  | -          | no       | Aria controls state (auto)          |
+| `aria-expanded`      | `string`  | -          | no       | Aria expanded state (auto)          |
+| `data-spirit-more`   | `boolean` | -          | no       | For hide on collapse as more button |
+| `data-spirit-target` | `string`  | -          | yes      | Target selector                     |
+| `data-spirit-toggle` | `string`  | `collapse` | yes      | Iterable selector                   |
 
 Other necessary attributes are toggled automatically, like `aria-controls` and `aria-expanded` when component is loaded
 or width of window is changed. There can be several triggers, the same rules apply to each.

diff --git a/packages/web-twig/src/Resources/components/Collapse/stories/CollapseDefaultWithButton.twig b/packages/web-twig/src/Resources/components/Collapse/stories/CollapseDefaultWithButton.twig
@@ -7,8 +7,8 @@
     -->
     <div class="mb-400">
         <Button
-            data-toggle="collapse"
-            data-target="CollapseExample0"
+            data-spirit-toggle="collapse"
+            data-spirit-target="CollapseExample0"
         >
             Collapse trigger
         </Button>

diff --git a/packages/web-twig/src/Resources/components/Collapse/stories/CollapseHelperClass.twig b/packages/web-twig/src/Resources/components/Collapse/stories/CollapseHelperClass.twig
@@ -16,17 +16,17 @@
     </Collapse>
     <div class="mb-400">
         <Button
-            data-toggle="collapse"
-            data-target="CollapseExampleV"
+            data-spirit-toggle="collapse"
+            data-spirit-target="CollapseExampleV"
         >
             <span class="accessibility-open">Show less</span>
             <span class="accessibility-closed">Show more</span>
         </Button>
         &nbsp;
         <ButtonLink
             href="javascript:void(0)"
-            data-toggle="collapse"
-            data-target="CollapseExampleV"
+            data-spirit-toggle="collapse"
+            data-spirit-target="CollapseExampleV"
         >
             <span class="accessibility-open">Show less</span>
             <span class="accessibility-closed">Show more</span>

diff --git a/packages/web-twig/src/Resources/components/Collapse/stories/CollapseHideTrigger.twig b/packages/web-twig/src/Resources/components/Collapse/stories/CollapseHideTrigger.twig
@@ -12,9 +12,9 @@
         nisi nunc donec felis erat quis, phasellus ac nec phasellus ac nibh. Scelerisque  fringilla, viverra nisl vel purus sed porttitor porttitor et iaculis commodo, vehicula urna purus ultrices.
         <ButtonLink
             href="javascript:void(0)"
-            data-toggle="collapse"
-            data-target="CollapseExampleIII"
-            data-more
+            data-spirit-toggle="collapse"
+            data-spirit-target="CollapseExampleIII"
+            data-spirit-more
         >
             ...more
         </ButtonLink>

diff --git a/packages/web-twig/src/Resources/components/Collapse/stories/CollapseMultipleTriggers.twig b/packages/web-twig/src/Resources/components/Collapse/stories/CollapseMultipleTriggers.twig
@@ -7,8 +7,8 @@
     -->
     <div class="mb-400">
         <Button
-            data-toggle="collapse"
-            data-target="CollapseExampleIV"
+            data-spirit-toggle="collapse"
+            data-spirit-target="CollapseExampleIV"
         >
             Collapse trigger
         </Button>
@@ -21,15 +21,15 @@
     </Collapse>
     <div class="pt-400">
         <Button
-            data-toggle="collapse"
-            data-target="CollapseExampleIV"
+            data-spirit-toggle="collapse"
+            data-spirit-target="CollapseExampleIV"
         >
             Secondary Collapse trigger
         </Button>
         <ButtonLink
             href="#"
-            data-toggle="collapse"
-            data-target="CollapseExampleIV"
+            data-spirit-toggle="collapse"
+            data-spirit-target="CollapseExampleIV"
         >
             Tertiary Collapse trigger
         </ButtonLink>

diff --git a/packages/web-twig/src/Resources/components/Collapse/stories/CollapseOpenOnInit.twig b/packages/web-twig/src/Resources/components/Collapse/stories/CollapseOpenOnInit.twig
@@ -8,8 +8,8 @@
     <div class="mb-400">
         <div class="mb-400">
             <Button
-                data-toggle="collapse"
-                data-target="CollapseExampleI"
+                data-spirit-toggle="collapse"
+                data-spirit-target="CollapseExampleI"
             >
                 Collapse trigger
             </Button>

diff --git a/...ages/web-twig/src/Resources/components/Collapse/stories/CollapseVisibilityBreakpoint.twig b/...ages/web-twig/src/Resources/components/Collapse/stories/CollapseVisibilityBreakpoint.twig
@@ -9,8 +9,8 @@
     <div class="mb-400">
         <ButtonLink
             href="javascript:void(0)"
-            data-toggle="collapse"
-            data-target="CollapseExample2"
+            data-spirit-toggle="collapse"
+            data-spirit-target="CollapseExample2"
         >
             Collapse breakpoint trigger
         </ButtonLink>
@@ -30,8 +30,8 @@
     <div class="mb-400">
         <ButtonLink
             href="javascript:void(0)"
-            data-toggle="collapse"
-            data-target="CollapseExample3"
+            data-spirit-toggle="collapse"
+            data-spirit-target="CollapseExample3"
         >
             Collapse breakpoint trigger
         </ButtonLink>

diff --git a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig
@@ -12,7 +12,7 @@
 {%- set _leftClassName = _spiritClassPrefix ~ 'Dropdown--left' -%}
 
 {# Attributes #}
-{%- set _dataFullWidthModeAttr = _fullWidthMode ? 'data-fullwidthmode="' ~ _fullWidthMode | escape('html_attr') ~ '"' : null -%}
+{%- set _dataFullWidthModeAttr = _fullWidthMode ? 'data-spirit-fullwidthmode="' ~ _fullWidthMode | escape('html_attr') ~ '"' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}

diff --git a/packages/web-twig/src/Resources/components/Dropdown/README.md b/packages/web-twig/src/Resources/components/Dropdown/README.md
@@ -6,7 +6,7 @@ Basic example usage:
 
 ```twig
 <DropdownWrapper>
-  <Button data-toggle="dropdown" data-target="DropdownExample" aria-controls="DropdownExample" aria-expanded="false">Open Dropdown</Button>
+  <Button data-spirit-toggle="dropdown" data-spirit-target="DropdownExample" aria-controls="DropdownExample" aria-expanded="false">Open Dropdown</Button>
   <Dropdown id="DropdownExample">Dropdown Content</Dropdown>
 </DropdownWrapper>
 ```
@@ -15,7 +15,7 @@ Full width on mobile
 
 ```twig
 <DropdownWrapper>
-  <Button data-toggle="dropdown" data-target="DropdownExample" aria-controls="DropdownExample" aria-expanded="false">Open Dropdown</Button>
+  <Button data-spirit-toggle="dropdown" data-spirit-target="DropdownExample" aria-controls="DropdownExample" aria-expanded="false">Open Dropdown</Button>
   <Dropdown id="DropdownExample" fullWidthMode="mobile-only">Dropdown Content</Dropdown>
 </DropdownWrapper>
 ```
@@ -24,7 +24,7 @@ Advanced example usage with positioning:
 
 ```twig
 <DropdownWrapper>
-  <Button data-toggle="dropdown" data-target="DropdownExample" aria-controls="DropdownExample" aria-expanded="false">Open Dropdown</Button>
+  <Button data-spirit-toggle="dropdown" data-spirit-target="DropdownExample" aria-controls="DropdownExample" aria-expanded="false">Open Dropdown</Button>
   <Dropdown elementType="span" id="DropdownExample" placement="top-right" fullWidthMode="all">Dropdown Content</Dropdown>
 </DropdownWrapper>
 ```
@@ -47,7 +47,7 @@ Without lexer:
 {% endembed %}
 ```
 
-You can add any custom trigger like a `<Button>` but it is necessary to add `data-toggle="dropdown"`, `data-target="<id>"`
+You can add any custom trigger like a `<Button>` but it is necessary to add `data-spirit-toggle="dropdown"`, `data-spirit-target="<id>"`
 attributes to register trigger events.
 
 ## API
@@ -67,12 +67,12 @@ see the [Escape hatches][escape-hatches] section in README to learn how and when
 
 ### Trigger attributes
 
-| Prop name       | Type     | Default    | Required | Description                |
-| --------------- | -------- | ---------- | -------- | -------------------------- |
-| `aria-controls` | `string` | -          | no       | Aria controls state (auto) |
-| `aria-expanded` | `string` | -          | no       | Aria expanded state (auto) |
-| `data-target`   | `string` | -          | yes      | Target selector            |
-| `data-toggle`   | `string` | `dropdown` | yes      | Iterable selector          |
+| Prop name            | Type     | Default    | Required | Description                |
+| -------------------- | -------- | ---------- | -------- | -------------------------- |
+| `aria-controls`      | `string` | -          | no       | Aria controls state (auto) |
+| `aria-expanded`      | `string` | -          | no       | Aria expanded state (auto) |
+| `data-spirit-target` | `string` | -          | yes      | Target selector            |
+| `data-spirit-toggle` | `string` | `dropdown` | yes      | Iterable selector          |
 
 Other necessary attributes are toggled automatically, like `aria-controls` and `aria-expanded` when the component is loaded
 or the width of the window is changed. There can be several triggers, the same rules apply to each.

diff --git a/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownDefault.twig b/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownDefault.twig
@@ -1,26 +1,26 @@
 <DropdownWrapper>
-        <Button
-            data-toggle="dropdown"
-            data-target="#dropdownDefault"
-        >
-            Button as anchor
-        </Button>
-        <Dropdown id="dropdownDefault">
-            <a href="#" class="d-flex mb-400">
-                <Icon name="info" UNSAFE_className="mr-400" />
-                <span>Information</span>
-            </a>
-            <a href="#" class="d-flex mb-400">
-                <Icon name="link" UNSAFE_className="mr-400" />
-                <span>Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim</span>
-            </a>
-            <a href="#" class="d-flex mb-400">
-                <Icon name="profile" UNSAFE_className="mr-400" />
-                <span>Profile</span>
-            </a>
-            <a href="#" class="d-flex">
-                <Icon name="help" UNSAFE_className="mr-400" />
-                <span>Help</span>
-            </a>
-        </Dropdown>
-    </DropdownWrapper>
+    <Button
+        data-spirit-toggle="dropdown"
+        data-spirit-target="#dropdownDefault"
+    >
+        Button as anchor
+    </Button>
+    <Dropdown id="dropdownDefault">
+        <a href="#" class="d-flex mb-400">
+            <Icon name="info" UNSAFE_className="mr-400" />
+            <span>Information</span>
+        </a>
+        <a href="#" class="d-flex mb-400">
+            <Icon name="link" UNSAFE_className="mr-400" />
+            <span>Bibendum aliquam, fusce integer sit amet congue non nulla aliquet enim</span>
+        </a>
+        <a href="#" class="d-flex mb-400">
+            <Icon name="profile" UNSAFE_className="mr-400" />
+            <span>Profile</span>
+        </a>
+        <a href="#" class="d-flex">
+            <Icon name="help" UNSAFE_className="mr-400" />
+            <span>Help</span>
+        </a>
+    </Dropdown>
+</DropdownWrapper>
diff --git a/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownDisabledAutoclose.twig b/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownDisabledAutoclose.twig
@@ -1,8 +1,8 @@
 <DropdownWrapper>
     <Button
-        data-toggle="dropdown"
-        data-target="#dropdownDisabledAutoClose"
-        data-autoclose="true"
+        data-spirit-toggle="dropdown"
+        data-spirit-target="#dropdownDisabledAutoClose"
+        data-spirit-autoclose="true"
     >
         Button as anchor
     </Button>

diff --git a/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownFullwidthAll.twig b/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownFullwidthAll.twig
@@ -1,7 +1,7 @@
 <DropdownWrapper>
     <Button
-        data-toggle="dropdown"
-        data-target="#dropdownFullWidthModeAll"
+        data-spirit-toggle="dropdown"
+        data-spirit-target="#dropdownFullWidthModeAll"
     >
         Finibus quis imperdiet, semper imperdiet aliquam
     </Button>

diff --git a/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownFullwidthMobileOnly.twig b/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownFullwidthMobileOnly.twig
@@ -1,7 +1,7 @@
 <DropdownWrapper>
     <Button
-        data-toggle="dropdown"
-        data-target="#dropdownFullWidthModeMobile"
+        data-spirit-toggle="dropdown"
+        data-spirit-target="#dropdownFullWidthModeMobile"
     >
         Finibus quis imperdiet, semper imperdiet aliquam
     </Button>

diff --git a/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownLongerContent.twig b/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownLongerContent.twig
@@ -1,7 +1,7 @@
 <DropdownWrapper>
     <Button
-        data-toggle="dropdown"
-        data-target="#dropdownLonger"
+        data-spirit-toggle="dropdown"
+        data-spirit-target="#dropdownLonger"
     >
         Button as anchor
     </Button>

diff --git a/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownTopRight.twig b/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownTopRight.twig
@@ -1,7 +1,7 @@
 <DropdownWrapper>
     <Button
-        data-toggle="dropdown"
-        data-target="#dropdownTopRight"
+        data-spirit-toggle="dropdown"
+        data-spirit-target="#dropdownTopRight"
     >
         Button as anchor
     </Button>