BREAKING CHANGE(web-twig): Remove isFullWidth and breakpoint prop…

…s from `Dropdown` #DS-588 Also improved demo and docs. ## Migration Guide Use `fullWidthMode` prop instead of `isFullWidth` and `breakpoint` on `Dropdown` component. - `<Dropdown isFullWidth …>` → `<Dropdown fullWidthMode="all" …>` - `<Dropdown isFullWidth breakpoint="mobile" …>` → `<Dropdown fullWidthMode="mobile-only" …>` Please refer back to this guide or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · edeabac · edeabac
1 parent d84016c
commit edeabac
Show file tree

Hide file tree

Showing 15 changed files with 177 additions and 283 deletions.
diff --git a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.stories.twig b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.stories.twig
@@ -2,28 +2,39 @@
 
 {% block content %}
 
-{# Dropdown Basic usage with default align #}
-{% include '@components/Dropdown/stories/DropdownBasic.twig' %}
+    <section class="docs-Section">
+        <h2 class="docs-Heading">Basic usage with default align</h2>
 
-{# Dropdown Usage with align to top right #}
-{% include '@components/Dropdown/stories/DropdownTopRight.twig' %}
+        {% include '@components/Dropdown/stories/DropdownDefault.twig' %}
+    </section>
 
-{# Usage with disabled auto close #}
-{% include '@components/Dropdown/stories/DropdownDisabledAutoclose.twig' %}
+    <section class="docs-Section">
+        <h2 class="docs-Heading">Usage with align to top right</h2>
 
-{# Longer content #}
-{% include '@components/Dropdown/stories/DropdownLongerContent.twig' %}
+        {% include '@components/Dropdown/stories/DropdownTopRight.twig' %}
+    </section>
 
-{# Longer content full width feature #}
-{% include '@components/Dropdown/stories/DropdownFullwidth.twig' %}
+    <section class="docs-Section">
+        <h2 class="docs-Heading">Usage with disabled auto close</h2>
 
-{# Full-width dropdown on mobile #}
-{% include '@components/Dropdown/stories/DropdownFullwidthMobile.twig' %}
+        {% include '@components/Dropdown/stories/DropdownDisabledAutoclose.twig' %}
+    </section>
 
-{# Full-width mode 'all' #}
-{% include '@components/Dropdown/stories/DropdownFullwidthAll.twig' %}
+    <section class="docs-Section">
+        <h2 class="docs-Heading">Longer content</h2>
 
-{# Full-width mode 'mobile-only' #}
-{% include '@components/Dropdown/stories/DropdownFullwidthMobileOnly.twig' %}
+        {% include '@components/Dropdown/stories/DropdownLongerContent.twig' %}
+    </section>
 
+    <section class="docs-Section">
+        <h2 class="docs-Heading">Full-width mode 'all'</h2>
+
+        {% include '@components/Dropdown/stories/DropdownFullwidthAll.twig' %}
+    </section>
+
+    <section class="docs-Section">
+        <h2 class="docs-Heading">Full-width mode 'mobile-only'</h2>
+
+        {% include '@components/Dropdown/stories/DropdownFullwidthMobileOnly.twig' %}
+    </section>
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig
@@ -1,21 +1,17 @@
 {# API #}
 {%- set props = props | default([]) -%}
-{%- set _breakpoint = props.breakpoint | default(null)  -%}
 {%- set _fullWidthMode = props.fullWidthMode | default(null)  -%}
 {%- set _elementType = props.elementType | default('div') -%}
-{%- set _isFullWidth = props.isFullWidth | default(false) | boolprop -%}
 {%- set _placement = props.placement | default('bottom-left') -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Dropdown' -%}
-{%- set _fullWidthClassName = _isFullWidth ? _spiritClassPrefix ~ 'Dropdown--fullWidth' : null -%}
 {%- set _topClassName = _spiritClassPrefix ~ 'Dropdown--top' -%}
 {%- set _bottomClassName = _spiritClassPrefix ~ 'Dropdown--bottom' -%}
 {%- set _rightClassName = _spiritClassPrefix ~ 'Dropdown--right' -%}
 {%- set _leftClassName = _spiritClassPrefix ~ 'Dropdown--left' -%}
 
 {# Attributes #}
-{%- set _dataBreakpointAttr = _breakpoint ? 'data-breakpoint="' ~ _breakpoint | escape('html_attr') ~ '"' : null -%}
 {%- set _dataFullWidthModeAttr = _fullWidthMode ? 'data-fullwidthmode="' ~ _fullWidthMode | escape('html_attr') ~ '"' : null -%}
 
 {# Miscellaneous #}
@@ -26,21 +22,12 @@
     'top-left': [ _topClassName, _leftClassName ],
     'top-right': [ _topClassName, _rightClassName ]
 } -%}
-{%- set _classNames = [ _rootClassName, _fullWidthClassName, _styleProps.className ] | merge(_placementClassNames[_placement]) -%}
-
-{# Deprecations #}
-{% if _isFullWidth %}
-    {% deprecated 'Dropdown: The "isFullWidth" property is deprecated, use "fullWidthMode" instead.' %}
-{% endif %}
-{% if _breakpoint %}
-    {% deprecated 'Dropdown: The "breakpoint" property is deprecated, use "fullWidthMode" instead.' %}
-{% endif %}
+{%- set _classNames = [ _rootClassName, _styleProps.className ] | merge(_placementClassNames[_placement]) -%}
 
 <{{ _elementType }}
     {{ mainProps(props) }}
     {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
-    {{ _dataBreakpointAttr | raw }}
     {{ _dataFullWidthModeAttr | raw }}
 >
     {%- block content %}{% endblock -%}

diff --git a/packages/web-twig/src/Resources/components/Dropdown/README.md b/packages/web-twig/src/Resources/components/Dropdown/README.md
@@ -16,7 +16,7 @@ Full width on mobile
 ```twig
 <DropdownWrapper>
   <Button data-toggle="dropdown" data-target="DropdownExample" aria-controls="DropdownExample" aria-expanded="false">Open Dropdown</Button>
-  <Dropdown id="DropdownExample" isFullWidth breakpoint="tablet">Dropdown Content</Dropdown>
+  <Dropdown id="DropdownExample" fullWidthMode="mobile-only">Dropdown Content</Dropdown>
 </DropdownWrapper>
 ```
 
@@ -25,7 +25,7 @@ Advanced example usage with positioning:
 ```twig
 <DropdownWrapper>
   <Button data-toggle="dropdown" data-target="DropdownExample" aria-controls="DropdownExample" aria-expanded="false">Open Dropdown</Button>
-  <Dropdown elementType="span" id="DropdownExample" placement="top-right" isFullWidth>Dropdown Content</Dropdown>
+  <Dropdown elementType="span" id="DropdownExample" placement="top-right" fullWidthMode="all">Dropdown Content</Dropdown>
 </DropdownWrapper>
 ```
 
@@ -35,9 +35,8 @@ Without lexer:
 {% embed "@spirit/dropdownWrapper.twig" %}
   {% block content %}
     {% embed "@spirit/dropdown.twig" with { props: {
-        breakpoint: 'tablet',
         elementType: 'span',
-        isFullWidth: true,
+        fullWidthMode: 'mobile-only',
         placement: 'top-right'
     }} %}
         {% block content %}
@@ -55,14 +54,12 @@ attributes to register trigger events.
 
 ### Dropdown
 
-| Prop name       | Type                                                     | Default       | Required | Description                                                                                            |
-| --------------- | -------------------------------------------------------- | ------------- | -------- | ------------------------------------------------------------------------------------------------------ |
-| `breakpoint`    | `string`                                                 | -             | no       | [**DEPRECATED**][deprecated] in favor of `fullWidthMode`; Breakpoint level [tablet,desktop]            |
-| `elementType`   | `string`                                                 | `div`         | no       | HTML tag to render                                                                                     |
-| `fullWidthMode` | `string`                                                 | -             | no       | Full-width mode [off,mobile-only,all]                                                                  |
-| `id`            | `string`                                                 | -             | yes      | Dropdown ID                                                                                            |
-| `isFullWidth`   | `boolean`                                                | `false`       | no       | [**DEPRECATED**][deprecated] in favor of `fullWidthMode`; Whether is component displayed in full width |
-| `placement`     | [`bottom-left`, `bottom-right`, `top-left`, `top-right`] | `bottom-left` | no       | Alignment of the component                                                                             |
+| Prop name       | Type                                                     | Default       | Required | Description                           |
+| --------------- | -------------------------------------------------------- | ------------- | -------- | ------------------------------------- |
+| `elementType`   | `string`                                                 | `div`         | no       | HTML tag to render                    |
+| `fullWidthMode` | `string`                                                 | -             | no       | Full-width mode [off,mobile-only,all] |
+| `id`            | `string`                                                 | -             | yes      | Dropdown ID                           |
+| `placement`     | [`bottom-left`, `bottom-right`, `top-left`, `top-right`] | `bottom-left` | no       | Alignment of the component            |
 
 You can add `data-*` or `aria-*` attributes to further extend the component's
 descriptiveness and accessibility. Also, UNSAFE styling props are available,
@@ -91,5 +88,4 @@ descriptiveness and accessibility. Also, UNSAFE styling props are available,
 see the [Escape hatches][escape-hatches] section in README to learn how and when to use them.
 
 [dropdown]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Dropdown
-[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/...nents/Dropdown/stories/DropdownBasic.twig → ...nts/Dropdown/stories/DropdownDefault.twig b/...nents/Dropdown/stories/DropdownBasic.twig → ...nts/Dropdown/stories/DropdownDefault.twig
@@ -1,15 +1,11 @@
-<section class="docs-Section">
-
-    <h2 class="docs-Heading">Basic usage with default align</h2>
-
-    <DropdownWrapper>
+<DropdownWrapper>
         <Button
             data-toggle="dropdown"
-            data-target="#DropdownDemo1-0"
+            data-target="#dropdownDefault"
         >
             Button as anchor
         </Button>
-        <Dropdown id="DropdownDemo1-0">
+        <Dropdown id="dropdownDefault">
             <a href="#" class="d-flex mb-400">
                 <Icon name="info" UNSAFE_className="mr-400" />
                 <span>Information</span>
@@ -28,5 +24,3 @@
             </a>
         </Dropdown>
     </DropdownWrapper>
-
-</section>
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,33 +1,27 @@
-<section class="docs-Section">
-
-    <h2 class="docs-Heading">Usage with disabled auto close</h2>
-
-    <DropdownWrapper>
-        <Button
-            data-toggle="dropdown"
-            data-target="#DropdownDemo1-2"
-            data-autoclose="true"
-        >
-            Button as anchor
-        </Button>
-        <Dropdown id="DropdownDemo1-2">
-            <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>
-
-</section>
+<DropdownWrapper>
+    <Button
+        data-toggle="dropdown"
+        data-target="#dropdownDisabledAutoClose"
+        data-autoclose="true"
+    >
+        Button as anchor
+    </Button>
+    <Dropdown id="dropdownDisabledAutoClose">
+        <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/DropdownFullwidth.twig b/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownFullwidth.twig
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,32 +1,26 @@
-<section class="docs-Section">
-
-    <h2 class="docs-Heading">Full-width mode 'all'</h2>
-
-    <DropdownWrapper>
-        <Button
-            data-toggle="dropdown"
-            data-target="#DropdownDemo2-1"
-        >
-            Finibus quis imperdiet, semper imperdiet aliquam
-        </Button>
-        <Dropdown id="DropdownDemo2-1" fullWidthMode="all">
-            <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>
-
-</section>
+<DropdownWrapper>
+    <Button
+        data-toggle="dropdown"
+        data-target="#dropdownFullWidthModeAll"
+    >
+        Finibus quis imperdiet, semper imperdiet aliquam
+    </Button>
+    <Dropdown id="dropdownFullWidthModeAll" fullWidthMode="all">
+        <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/DropdownFullwidthMobile.twig b/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownFullwidthMobile.twig