-{# Dropdown Usage with align to top right #}
-{% include '@components/Dropdown/stories/DropdownTopRight.twig' %}
+ {% include '@components/Dropdown/stories/DropdownDefault.twig' %}
+
-{# Usage with disabled auto close #}
-{% include '@components/Dropdown/stories/DropdownDisabledAutoclose.twig' %}
+
+
Usage with align to top right
-{# Longer content #}
-{% include '@components/Dropdown/stories/DropdownLongerContent.twig' %}
+ {% include '@components/Dropdown/stories/DropdownTopRight.twig' %}
+
-{# Longer content full width feature #}
-{% include '@components/Dropdown/stories/DropdownFullwidth.twig' %}
+
+
Usage with disabled auto close
-{# Full-width dropdown on mobile #}
-{% include '@components/Dropdown/stories/DropdownFullwidthMobile.twig' %}
+ {% include '@components/Dropdown/stories/DropdownDisabledAutoclose.twig' %}
+
-{# Full-width mode 'all' #}
-{% include '@components/Dropdown/stories/DropdownFullwidthAll.twig' %}
+
+
Longer content
-{# Full-width mode 'mobile-only' #}
-{% include '@components/Dropdown/stories/DropdownFullwidthMobileOnly.twig' %}
+ {% include '@components/Dropdown/stories/DropdownLongerContent.twig' %}
+
+
+
Full-width mode 'all'
+
+ {% include '@components/Dropdown/stories/DropdownFullwidthAll.twig' %}
+
+
+
+
Full-width mode 'mobile-only'
+
+ {% include '@components/Dropdown/stories/DropdownFullwidthMobileOnly.twig' %}
+
{% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig
index 88d888b84c..d61f4115a2 100644
--- 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
index 43edd84f91..8660f9a871 100644
--- 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
- Dropdown Content
+ Dropdown Content
```
@@ -25,7 +25,7 @@ Advanced example usage with positioning:
```twig
- Dropdown Content
+ Dropdown Content
```
@@ -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/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownBasic.twig b/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownDefault.twig
similarity index 80%
rename from packages/web-twig/src/Resources/components/Dropdown/stories/DropdownBasic.twig
rename to packages/web-twig/src/Resources/components/Dropdown/stories/DropdownDefault.twig
index 64d3bc2700..ebffc66679 100644
--- a/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownBasic.twig
+++ b/packages/web-twig/src/Resources/components/Dropdown/stories/DropdownDefault.twig
@@ -1,15 +1,11 @@
-
-
-
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set dropdownFull.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set dropdownFull.twig__1.html
index 8b69bece11..87e9976818 100644
--- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set dropdownFull.twig__1.html
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set dropdownFull.twig__1.html
@@ -6,7 +6,7 @@