From 29b3217906031cb9b3772c74dacef304ce4db9e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Thu, 8 Feb 2024 15:30:23 +0100 Subject: [PATCH] Feat(web-twig): Deprecate Dropdown non flow placements DS-1132 Use flow placement values, e.g. `top-left` is now `top-start`. --- .../components/Dropdown/Dropdown.twig | 51 ++++++++----------- .../Resources/components/Dropdown/README.md | 23 ++++++--- .../__tests__/__fixtures__/dropdown.twig | 2 +- .../__snapshots__/dropdown.twig.snap.html | 4 +- .../stories/DropdownDisabledAutoclose.twig | 4 +- .../DropdownFeatureEnhancedShadow.twig | 4 +- .../stories/DropdownFullwidthAll.twig | 4 +- .../stories/DropdownFullwidthMobileOnly.twig | 4 +- .../stories/DropdownLongerContent.twig | 4 +- .../Dropdown/stories/DropdownPlacements.twig | 36 ++++++------- .../stories/DropdownVariousItems.twig | 4 +- 11 files changed, 71 insertions(+), 69 deletions(-) diff --git a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig index 3db25d2b01..f746d4b5a1 100644 --- a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig +++ b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig @@ -2,49 +2,42 @@ {%- set props = props | default([]) -%} {%- set _fullWidthMode = props.fullWidthMode | default(null) -%} {%- set _elementType = props.elementType | default('div') -%} -{%- set _placement = props.placement | default('bottom-left') -%} +{%- set _placement = props.placement | default('bottom-start') -%} {# Class names #} {%- set _rootClassName = _spiritClassPrefix ~ 'Dropdown' -%} -{%- set _topClassName = _spiritClassPrefix ~ 'Dropdown--top' -%} -{%- set _topLeftClassName = _spiritClassPrefix ~ 'Dropdown--topLeft' -%} -{%- set _topRightClassName = _spiritClassPrefix ~ 'Dropdown--topRight' -%} -{%- set _bottomClassName = _spiritClassPrefix ~ 'Dropdown--bottom' -%} -{%- set _bottomLeftClassName = _spiritClassPrefix ~ 'Dropdown--bottomLeft' -%} -{%- set _bottomRightClassName = _spiritClassPrefix ~ 'Dropdown--bottomRight' -%} -{%- set _leftClassName = _spiritClassPrefix ~ 'Dropdown--left' -%} -{%- set _leftTopClassName = _spiritClassPrefix ~ 'Dropdown--leftTop' -%} -{%- set _leftBottomClassName = _spiritClassPrefix ~ 'Dropdown--leftBottom' -%} -{%- set _rightClassName = _spiritClassPrefix ~ 'Dropdown--right' -%} -{%- set _rightTopClassName = _spiritClassPrefix ~ 'Dropdown--rightTop' -%} -{%- set _rightBottomClassName = _spiritClassPrefix ~ 'Dropdown--rightBottom' -%} {# Attributes #} {%- set _dataFullWidthModeAttr = _fullWidthMode ? 'data-spirit-fullwidthmode="' ~ _fullWidthMode | escape('html_attr') ~ '"' : null -%} +{%- set _dataPlacementAttr = _placement ? 'data-spirit-placement="' ~ _placement | escape('html_attr') ~ '"' : null -%} {# Miscellaneous #} {%- set _styleProps = useStyleProps(props) -%} -{%- set _placementClassNames = { - 'top': _topClassName, - 'top-left': _topLeftClassName, - 'top-right': _topRightClassName, - 'bottom': _bottomClassName, - 'bottom-left': _bottomLeftClassName, - 'bottom-right': _bottomRightClassName, - 'left': _leftClassName, - 'left-top': _leftTopClassName, - 'left-bottom': _leftBottomClassName, - 'right': _rightClassName, - 'right-top': _rightTopClassName, - 'right-bottom': _rightBottomClassName, -} -%} -{%- set _classNames = [ _rootClassName, _placementClassNames[_placement], _styleProps.className ] -%} +{%- set _classNames = [ _rootClassName, _styleProps.className ] -%} +{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['data-spirit-placement']) -%} + +{# Deprecations #} +{% set deprecatedPlacements = { + 'top-left': 'top-start', + 'top-right': 'top-end', + 'right-top': 'right-start', + 'right-bottom': 'right-end', + 'bottom-left': 'bottom-start', + 'bottom-right': 'bottom-end', + 'left-top': 'left-start', + 'left-bottom': 'left-end', +} %} + +{% if deprecatedPlacements[_placement] is defined %} + {% deprecated 'Dropdown: Non-flow-relative values (eg. "' ~ _placement ~ '") in "placement" property are deprecated and will be removed in the next major version. Use flow-relative (eg. "' ~ deprecatedPlacements[_placement] ~ '") instead.' %} +{% endif %} <{{ _elementType }} - {{ mainProps(props) }} + {{ mainProps(_mainPropsWithoutReservedAttributes) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }} {{ _dataFullWidthModeAttr | raw }} + {{ _dataPlacementAttr | 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 cfcb7722bf..f1197dec85 100644 --- a/packages/web-twig/src/Resources/components/Dropdown/README.md +++ b/packages/web-twig/src/Resources/components/Dropdown/README.md @@ -25,7 +25,7 @@ Advanced example usage with positioning: ```twig - Dropdown Content + Dropdown Content ``` @@ -47,17 +47,25 @@ attributes to register trigger events. ### Dropdown -| Name | Type | Default | Required | Description | -| --------------- | -------------------------------------------- | ------------- | -------- | ------------------------------------- | -| `elementType` | `string` | `div` | ✕ | HTML tag to render | -| `fullWidthMode` | `string` | — | ✕ | Full-width mode [off,mobile-only,all] | -| `id` | `string` | — | ✔ | Dropdown ID | -| `placement` | [Placement Dictionary][dictionary-placement] | `bottom-left` | ✕ | Placement of the dropdown | +| Name | Type | Default | Required | Description | +| --------------- | -------------------------------------------- | -------------- | -------- | ------------------------------------- | +| `elementType` | `string` | `div` | ✕ | HTML tag to render | +| `fullWidthMode` | `string` | — | ✕ | Full-width mode [off,mobile-only,all] | +| `id` | `string` | — | ✔ | Dropdown ID | +| `placement` | [Placement Dictionary][dictionary-placement] | `bottom-start` | ✕ | Placement of the dropdown | 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]. +#### ⚠️ DEPRECATION NOTICE + +Both axis side placements are renamed from `top-left`, `top-right`, `right-top`, `right-bottom`, +etc. to `top-start`, `top-end`, `right-start`, `right-end`, etc. Old names are deprecated and will be +removed in the next major release. + +[What are deprecations?][readme-deprecations] + ### Trigger attributes | Name | Type | Default | Required | Description | @@ -98,6 +106,7 @@ Or, feel free to write the controlling script yourself. [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 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes +[readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches [web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Dropdown/README.md#javascript 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 47acda56fb..b4481a8712 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 @@ -5,7 +5,7 @@ elementType="aside" fullWidthMode="mobile-only" id="my-dropdown" - placement="top-right" + placement="top-end" > 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 0fa6de21a5..7a2cbb30e1 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 @@ -5,12 +5,12 @@ -
+
content
-