From fdca44e3ad032edc59414757452098424ee0a990 Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Fri, 31 May 2024 14:21:49 +0200 Subject: [PATCH] BREAKING CHANGE(web-twig): Tooltip className changes - TooltipWrapper renamed to Tooltip - Changed all stories to use the new Tooltip component structure - Updated README --- .../Resources/components/Tooltip/README.md | 52 +++++-------------- .../Resources/components/Tooltip/Tooltip.twig | 38 ++------------ .../components/Tooltip/TooltipPopover.twig | 8 +-- .../components/Tooltip/TooltipWrapper.twig | 21 -------- .../__fixtures__/tooltipWrapper.twig | 1 - .../__snapshots__/tooltip.twig.snap.html | 8 ++- .../tooltipPopover.twig.snap.html | 8 +-- .../stories/TooltipAdvancedFloating.twig | 5 +- .../Tooltip/stories/TooltipClickable.twig | 47 ----------------- .../Tooltip/stories/TooltipDefault.twig | 4 +- .../Tooltip/stories/TooltipDismissible.twig | 4 +- .../stories/TooltipDismissibleViaJS.twig | 4 +- .../Tooltip/stories/TooltipIcon.twig | 4 +- .../Tooltip/stories/TooltipPlacements.twig | 4 +- .../Tooltip/stories/TooltipTriggers.twig | 15 +++--- .../Tooltip/stories/TooltipWithLink.twig | 4 +- 16 files changed, 51 insertions(+), 176 deletions(-) delete mode 100644 packages/web-twig/src/Resources/components/Tooltip/TooltipWrapper.twig delete mode 100644 packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipWrapper.twig delete mode 100644 packages/web-twig/src/Resources/components/Tooltip/stories/TooltipClickable.twig diff --git a/packages/web-twig/src/Resources/components/Tooltip/README.md b/packages/web-twig/src/Resources/components/Tooltip/README.md index 99009df396..6ddce5c3bc 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/README.md +++ b/packages/web-twig/src/Resources/components/Tooltip/README.md @@ -1,9 +1,5 @@ # Tooltip -This is Twig implementation of the [Tooltip][tooltip] component. - -⚠️ `Tooltip` component is [deprecated][deprecated] and will be renamed to the `TooltipPopover` in the next major version. - Basic usage: ```html @@ -38,27 +34,20 @@ Without lexer: ## Linking with Content -Tooltip is positioned relative to the closest parent element with -`position: relative` or `position: absolute`. You may either provide the CSS -yourself or you can use the prepared TooltipWrapper component: - ```html - + I have a tooltip - + Hello there! - - + + ``` -Please consult the [CSS implementation of Tooltip][tooltip] to help you pick the -best positioning approach for your use case. - ## API -### Tooltip +### TooltipPopover | Name | Type | Default | Required | Description | | --------------- | -------------------------------------------- | -------- | -------- | ------------------------ | @@ -71,25 +60,13 @@ On top of the API options, the components accept [additional attributes][readme- 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]. -### TooltipWrapper - -⚠️ `TooltipWrapper` component is [deprecated][deprecated] and will be renamed to the `Tooltip` in the next major version. - -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]. - -### TooltipPopover - -TooltipPopover is a new name for the Tooltip subcomponent. - #### Basic ```html - + Hello there! - + ``` #### Dismissible @@ -97,10 +74,10 @@ TooltipPopover is a new name for the Tooltip subcomponent. To display close button, add `isDismissible` prop to the `TooltipPopover` subcomponent. ```html - + Close me - + ``` ### Trigger @@ -111,13 +88,13 @@ If you only want the `click` trigger, you need to specify the trigger, as shown This setup might be preferable when you have a link in your tooltip, for example. ```html - + You can click on the link: Link to unknown - + ``` #### Advanced Floating Functionality @@ -125,7 +102,7 @@ This setup might be preferable when you have a link in your tooltip, for example Advanced floating functionality is provided by JavaScript plugin and by [Floating UI][floating-ui] library. ```html - + Close me - + ``` #### API @@ -179,7 +156,6 @@ 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. -[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations [dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#placement [floating-ui-flip-cross-axis]: https://floating-ui.com/docs/flip#crossaxis [floating-ui-flip-fallback-axis-side-direction]: https://floating-ui.com/docs/flip#fallbackaxissidedirection @@ -190,8 +166,6 @@ Or, feel free to write the controlling script yourself. [floating-ui]: https://floating-ui.com [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#additional-attributes [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#escape-hatches -[readme-feature-flags]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md#feature-flags [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/README.md#style-props -[tooltip]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Tooltip [web-js-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Tooltip/README.md#javascript-api [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig index 946bd52b0a..1ceb744bd9 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig +++ b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig @@ -1,50 +1,18 @@ {# API #} {%- set props = props | default([]) -%} -{%- set _closeLabel = props.closeLabel | default('Close') -%} -{%- set _id = props.id | default(null) -%} -{%- set _isDismissible = props.isDismissible | default(false) -%} -{%- set _placement = props.placement | default('bottom') -%} {# Class names #} -{%- set _arrowClassName = _spiritClassPrefix ~ 'Tooltip__arrow' -%} -{%- set _closeClassName = _spiritClassPrefix ~ 'Tooltip__close' -%} {%- set _rootClassName = _spiritClassPrefix ~ 'Tooltip' -%} -{%- set _rootDismissibleClassName = _isDismissible is same as(true) ? _spiritClassPrefix ~ 'Tooltip--dismissible' : null -%} - -{# Attributes #} -{%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%} -{%- set _ariaControlsAttr = _id ? 'aria-controls="' ~ _id | escape('html_attr') ~ '"' : null -%} -{%- set _dataPlacementAttr = _placement ? 'data-spirit-placement="' ~ _placement | escape('html_attr') ~ '"' : null -%} -{%- set _dataTargetAttr = _id ? 'data-spirit-target="#' ~ _id | escape('html_attr') ~ '"' : null -%} {# Miscellaneous #} {%- set _styleProps = useStyleProps(props) -%} -{%- set _classNames = [ _rootClassName, _rootDismissibleClassName, _styleProps.className ] -%} -{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['id', 'data-spirit-placement']) -%} - -{# Deprecations #} -{% deprecated 'Tooltip: The implementation of this component is deprecated and will be replaced with the implementation of the TooltipPopover in the next major version. Please, use TooltipPopover instead.' %} +{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
{% block content %}{% endblock %} - {% if _isDismissible is same as(true) %} - - {% endif %} -
diff --git a/packages/web-twig/src/Resources/components/Tooltip/TooltipPopover.twig b/packages/web-twig/src/Resources/components/Tooltip/TooltipPopover.twig index faea269fae..07508f8f31 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/TooltipPopover.twig +++ b/packages/web-twig/src/Resources/components/Tooltip/TooltipPopover.twig @@ -14,11 +14,11 @@ {%- set _trigger = props.trigger | default('click, hover') -%} {# Class names #} -{%- set _arrowClassName = _spiritClassPrefix ~ 'Tooltip__arrow' -%} -{%- set _closeClassName = _spiritClassPrefix ~ 'Tooltip__close' -%} +{%- set _arrowClassName = _spiritClassPrefix ~ 'TooltipPopover__arrow' -%} +{%- set _closeClassName = _spiritClassPrefix ~ 'TooltipPopover__close' -%} {%- set _isOpenClassName = _isOpen ? '' : 'is-hidden' -%} -{%- set _rootClassName = _spiritClassPrefix ~ 'Tooltip' -%} -{%- set _rootDismissibleClassName = _isDismissible is same as(true) ? _spiritClassPrefix ~ 'Tooltip--dismissible' : null -%} +{%- set _rootClassName = _spiritClassPrefix ~ 'TooltipPopover' -%} +{%- set _rootDismissibleClassName = _isDismissible is same as(true) ? _spiritClassPrefix ~ 'TooltipPopover--dismissible' : null -%} {# Attributes #} {%- set _enableFlippingValue = _enableFlipping ? 'true' : 'false' -%} diff --git a/packages/web-twig/src/Resources/components/Tooltip/TooltipWrapper.twig b/packages/web-twig/src/Resources/components/Tooltip/TooltipWrapper.twig deleted file mode 100644 index 6001509d55..0000000000 --- a/packages/web-twig/src/Resources/components/Tooltip/TooltipWrapper.twig +++ /dev/null @@ -1,21 +0,0 @@ -{# API #} -{%- set props = props | default([]) -%} - -{# Class names #} -{%- set _rootClassName = _spiritClassPrefix ~ 'TooltipWrapper' -%} - -{# Miscellaneous #} -{%- set _styleProps = useStyleProps(props) -%} -{%- set _classNames = [ _rootClassName, _styleProps.className ] -%} - -{# Deprecations #} -{% deprecated 'TooltipWrapper: This component will be renamed to Tooltip in the next major version.' %} - -
- {% block content %}{% endblock %} -
diff --git a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipWrapper.twig b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipWrapper.twig deleted file mode 100644 index 7c30ac47a8..0000000000 --- a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipWrapper.twig +++ /dev/null @@ -1 +0,0 @@ -content diff --git a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltip.twig.snap.html b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltip.twig.snap.html index 8ff7ee1cb2..a446020b37 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltip.twig.snap.html +++ b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltip.twig.snap.html @@ -5,15 +5,13 @@ -
+
Hello there!
-
- Hello there! +
+ Hello there!
diff --git a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipPopover.twig.snap.html b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipPopover.twig.snap.html index 69a7bf2aec..55fe6c9451 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipPopover.twig.snap.html +++ b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipPopover.twig.snap.html @@ -5,19 +5,19 @@ -