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