diff --git a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.stories.twig b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.stories.twig
index 3247fe15bb..646f03bb36 100644
--- a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.stories.twig
+++ b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.stories.twig
@@ -29,4 +29,8 @@
{% include '@components/Dropdown/stories/DropdownFullwidthMobileOnly.twig' %}
+
+ {% include '@components/Dropdown/stories/DropdownAlignment.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 62c82b265a..24b52603c7 100644
--- a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig
+++ b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig
@@ -1,5 +1,7 @@
{# API #}
{%- set props = props | default([]) -%}
+{%- set _alignmentX = props.alignmentX | default(null) -%}
+{%- set _alignmentY = props.alignmentY | default(null) -%}
{%- set _elementType = props.elementType | default('div') -%}
{# Class names #}
@@ -7,7 +9,32 @@
{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
-{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
+
+{%- set _alignmentXClasses = [] -%}
+{%- if _alignmentX is iterable and _alignmentX is not null -%}
+ {%- for breakpoint, breakpointValue in _alignmentX -%}
+ {%- set infix = (breakpoint == 'mobile') ? '' : '--' ~ breakpoint -%}
+ {%- set breakpointValueCapitalized = breakpointValue[:1] | upper ~ breakpointValue[1:] -%}
+ {%- set _alignmentXClasses = _alignmentXClasses | merge([ _spiritClassPrefix ~ 'Dropdown' ~ infix ~ '--alignmentX' ~ breakpointValueCapitalized ]) -%}
+ {%- endfor -%}
+{%- elseif _alignmentX is not null -%}
+ {%- set _alignmentXCapitalized = _alignmentX[:1] | upper ~ _alignmentX[1:] -%}
+ {%- set _alignmentXClasses = [ _spiritClassPrefix ~ 'Dropdown--alignmentX' ~ _alignmentXCapitalized ] -%}
+{%- endif -%}
+
+{%- set _alignmentYClasses = [] -%}
+{%- if _alignmentY is iterable and _alignmentY is not null -%}
+ {%- for breakpoint, breakpointValue in _alignmentY -%}
+ {%- set infix = (breakpoint == 'mobile') ? '' : '--' ~ breakpoint -%}
+ {%- set breakpointValueCapitalized = breakpointValue[:1] | upper ~ breakpointValue[1:] -%}
+ {%- set _alignmentYClasses = _alignmentYClasses | merge([ _spiritClassPrefix ~ 'Dropdown' ~ infix ~ '--alignmentY' ~ breakpointValueCapitalized ]) -%}
+ {%- endfor -%}
+{%- elseif _alignmentY is not null -%}
+ {%- set _alignmentYCapitalized = _alignmentY[:1] | upper ~ _alignmentY[1:] -%}
+ {%- set _alignmentYClasses = [ _spiritClassPrefix ~ 'Dropdown--alignmentY' ~ _alignmentYCapitalized ] -%}
+{%- endif -%}
+
+{%- set _classNames = [ _rootClassName, _styleProps.className ] | merge(_alignmentXClasses, _alignmentYClasses) -%}
<{{ _elementType }}
{{ mainProps(props) }}
diff --git a/packages/web-twig/src/Resources/components/Dropdown/README.md b/packages/web-twig/src/Resources/components/Dropdown/README.md
index ffe0f8d804..750dfa7eb2 100644
--- a/packages/web-twig/src/Resources/components/Dropdown/README.md
+++ b/packages/web-twig/src/Resources/components/Dropdown/README.md
@@ -72,14 +72,37 @@ or the width of the window is changed. There can be several triggers, the same r
### Dropdown
-| Name | Type | Default | Required | Description |
-| ------------- | -------- | ------- | -------- | ------------------ |
-| `elementType` | `string` | `div` | ✕ | HTML tag to render |
+| Name | Type | Default | Required | Description |
+| ------------- | --------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `alignmentX` | \[ [AlignmentXExtended dictionary][dictionary-alignment] \| `object`] | `null` | ✕ | Apply vertical alignment to trigger, use object to set responsive values, e.g. `{ mobile: 'left', tablet: 'center', desktop: 'right' }` |
+| `alignmentY` | \[ [AlignmentYExtended dictionary][dictionary-alignment] \| `object`] | `null` | ✕ | Apply horizontal alignment to trigger, use object to set responsive values, e.g. `{ mobile: 'top', tablet: 'center', desktop: 'bottom' }` |
+| `elementType` | `string` | `div` | ✕ | HTML tag to render |
On top of the API options, the components accept [additional attributes][readme-additional-attributes].
If you need more control over the styling of a component, you can use [style props][readme-style-props]
and [escape hatches][readme-escape-hatches].
+#### Alignment
+
+Dropdown supports the extended [Alignment Dictionary][dictionary-alignment] for alignment on both axis. To use it, set the
+specific prop to the `Dropdown` component, e.g. `` or ``. Adding
+any of these props will make the element display as `flex`.
+
+We also support responsive alignment props. To use them, set the prop as an object,
+e.g. ``.
+
+ℹ️ This controls only the alignment inside the wrapping `Dropdown` element. And even with alignment, the popover will still be positioned
+at edge of the `Dropdown` element and on the place defined by the placement attribute.
+
+```twig
+
+
+
+
+
+
+```
+
## JavaScript Plugin
For full functionality, you need to provide Spirit JavaScript:
@@ -94,6 +117,7 @@ Or, feel free to write the controlling script yourself.
👉 Check the [component's docs in the web package][web-js-api] to see the full documentation and API of the plugin.
+[dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#alignment
[dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement
[dropdown]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Dropdown
[item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Item/README.md
diff --git a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdown.twig b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdown.twig
index a7bf839042..a4d4f1f520 100644
--- a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdown.twig
+++ b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__fixtures__/dropdown.twig
@@ -1 +1,8 @@
content
+
+
+ content
+
diff --git a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html
index a818b21758..7c613453f1 100644
--- a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html
@@ -8,5 +8,9 @@