diff --git a/packages/web-twig/README.md b/packages/web-twig/README.md index 0c09fa46e9..143d421925 100644 --- a/packages/web-twig/README.md +++ b/packages/web-twig/README.md @@ -125,6 +125,13 @@ or pure original implementation - [Tooltip](./src/Resources/components/Tooltip/README.md) if you want to extend these components, an example guide is [here](./docs/extendComponents.md). -if you want to contribute, read guide [here](./docs/contribution.md). +if you want to contribute, read the guide [here](./docs/contribution.md). + +## Deprecations + +This package uses the deprecation warnings for props, functions and components that will be removed or replaced in the next major release. +Check your Symfony console or log to see if you are using any of the deprecated functionality. + +![Deprecations in Symfony's console](https://github.com/lmc-eu/spirit-design-system/blob/main/static/deprecations-symfony-console.png?raw=true) [spirit design system]: https://github.com/lmc-eu/spirit-design-system diff --git a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig index f1f9dfc00b..84fe402369 100644 --- a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig +++ b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig @@ -2,6 +2,7 @@ {%- set props = props | default([]) -%} {%- set _class = props.class | default(null) -%} {%- 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') -%} @@ -16,6 +17,7 @@ {# Attributes #} {%- set _dataBreakpointAttr = _breakpoint ? 'data-breakpoint="' ~ _breakpoint ~ '"' : null -%} +{%- set _dataFullWidthModeAttr = _fullWidthMode ? 'data-fullwidthmode="' ~ _fullWidthMode ~ '"' : null -%} {# Miscellaneous #} {%- set _placementClassNames = { @@ -26,10 +28,16 @@ } -%} {%- set _classNames = [ _rootClassName, _fullWidthClassName, _class ] | merge(_placementClassNames[_placement]) -%} +{# Deprecations #} +{% if _breakpoint %} + {% deprecated 'Dropdown: The "breakpoint" property is deprecated, use "fullWidthMode" instead.' %} +{% endif %} + <{{ _elementType }} {{ mainProps(props) }} {{ 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 daa75e0eba..c86d748825 100644 --- a/packages/web-twig/src/Resources/components/Dropdown/README.md +++ b/packages/web-twig/src/Resources/components/Dropdown/README.md @@ -56,14 +56,15 @@ attributes to register trigger events. ### Dropdown -| Prop name | Type | Default | Required | Description | -| ------------- | -------------------------------------------------------- | ------------- | -------- | -------------------------------------------- | -| `id` | `string` | - | yes | Dropdown ID | -| `breakpoint` | `string` | - | no | Breakpoint level [tablet,desktop] | -| `class` | `string` | `null` | no | Custom CSS class | -| `elementType` | `string` | `div` | no | HTML tag to render | -| `isFullWidth` | `boolean` | `false` | no | 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 | +| --------------- | -------------------------------------------------------- | ------------- | -------- | ------------------------------------------------------------------------------------------- | +| `id` | `string` | - | yes | Dropdown ID | +| `breakpoint` | `string` | - | no | [**DEPRECATED**][deprecated] in favor of `fullWidthMode`; Breakpoint level [tablet,desktop] | +| `fullWidthMode` | `string` | - | no | Full-width mode [off,mobile-only,all] | +| `class` | `string` | `null` | no | Custom CSS class | +| `elementType` | `string` | `div` | no | HTML tag to render | +| `isFullWidth` | `boolean` | `false` | no | Whether is component displayed in full width | +| `placement` | [`bottom-left`, `bottom-right`, `top-left`, `top-right`] | `bottom-left` | no | Alignment of the component | ### Trigger attributes @@ -85,3 +86,4 @@ or the width of the window is changed. There can be several triggers, the same r | `elementType` | `string` | `div` | no | HTML tag to render | [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 diff --git a/static/deprecations-symfony-console.png b/static/deprecations-symfony-console.png new file mode 100644 index 0000000000..829459e3a1 Binary files /dev/null and b/static/deprecations-symfony-console.png differ