BREAKING CHANGE(web-twig): Tooltip className changes

- TooltipWrapper renamed to Tooltip - Changed all stories to use the new Tooltip component structure - Updated README
lmc-eu · Jun 3, 2024 · fdca44e · fdca44e
1 parent bf6682d
commit fdca44e
Show file tree

Hide file tree

Showing 16 changed files with 51 additions and 176 deletions.
diff --git 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
-<TooltipWrapper>
+<Tooltip>
     <Link href="#" aria-describedby="my-tooltip">
         I have a tooltip
     </Link>
-    <Tooltip id="my-tooltip">
+    <TooltipPopover id="my-tooltip">
         Hello there!
-    </Tooltip>
-</TooltipWrapper>
+    </TooltipPopover>
+</Tooltip>
 ```
 
-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,36 +60,24 @@ 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
-<TooltipWrapper>
+<Tooltip>
   <button>I have a tooltip!</button>
   <TooltipPopover>Hello there!</TooltipPopover>
-</TooltipWrapper>
+</Tooltip>
 ```
 
 #### Dismissible
 
 To display close button, add `isDismissible` prop to the `TooltipPopover` subcomponent.
 
 ```html
-<TooltipWrapper>
+<Tooltip>
   <button data-spirit-toggle="tooltip" data-spirit-target="my-tooltip-dismissible">I have a tooltip 😎</button>
   <TooltipPopover id="my-tooltip-dismissible" placement="right" isDismissible>Close me</TooltipPopover>
-</TooltipWrapper>
+</Tooltip>
 ```
 
 ### Trigger
@@ -111,21 +88,21 @@ 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
-<TooltipWrapper>
+<Tooltip>
   <button data-spirit-toggle="tooltip" data-spirit-target="my-tooltip-trigger">I have a tooltip 😎</button>
   <TooltipPopover id="my-tooltip-trigger" trigger="click">
     <!-- Only `click` trigger is active now. -->
     You can click on the link: <a href="#">Link to unknown</a>
   </TooltipPopover>
-</TooltipWrapper>
+</Tooltip>
 ```
 
 #### Advanced Floating Functionality
 
 Advanced floating functionality is provided by JavaScript plugin and by [Floating UI][floating-ui] library.
 
 ```html
-<TooltipWrapper>
+<Tooltip>
   <button data-spirit-toggle="tooltip" data-spirit-target="my-tooltip-advanced">I have a tooltip 😎</button>
   <TooltipPopover
     closeLabel="Close tooltip"
@@ -141,7 +118,7 @@ Advanced floating functionality is provided by JavaScript plugin and by [Floatin
   >
     Close me
   </TooltipPopover>
-</TooltipWrapper>
+</Tooltip>
 ```
 
 #### 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
@@ -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 ] -%}
 
 <div
-    {{ mainProps(_mainPropsWithoutReservedAttributes) }}
+    {{ mainProps(props) }}
     {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
-    {{ _idAttr | raw }}
-    {{ _dataPlacementAttr | raw }}
+    data-spirit-element="tooltip-wrapper"
 >
     {% block content %}{% endblock %}
-    {% if _isDismissible is same as(true) %}
-        <button
-            type="button"
-            class="{{ _closeClassName }}"
-            data-spirit-dismiss="tooltip"
-            {{ _ariaControlsAttr | raw }}
-            {{ _dataTargetAttr | raw }}
-            aria-expanded="true"
-        >
-            <Icon name="close" />
-            <VisuallyHidden>{{ _closeLabel }}</VisuallyHidden>
-        </button>
-    {% endif %}
-    <span class="{{ _arrowClassName }}" data-spirit-element="arrow"></span>
 </div>
diff --git 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
diff --git a/...ages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipWrapper.twig b/...ages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipWrapper.twig
diff --git a/.../web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltip.twig.snap.html b/.../web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltip.twig.snap.html
@@ -5,15 +5,13 @@
     </title>
   </head>
   <body>
-    <div class="Tooltip" data-spirit-placement="bottom">
+    <div class="Tooltip" data-spirit-element="tooltip-wrapper">
       Hello there!
     </div>
     <!-- Render with all props -->
 
-    <div class="Tooltip Tooltip--dismissible" id="my-tooltip" data-spirit-placement="right-start">
-      Hello there! <button type="button" class="Tooltip__close" data-spirit-dismiss="tooltip" aria-controls="my-tooltip" data-spirit-target="#my-tooltip" aria-expanded="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="a79dff7a255f69bbe6e39d594aa2275b" aria-hidden="true">
-      <path d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.11 5.69997C6.72 5.30997 6.09 5.30997 5.7 5.69997C5.31 6.08997 5.31 6.71997 5.7 7.10997L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 6.72 18.69 7.11 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997Z" fill="currentColor">
-      </path></svg> <span class="accessibility-hidden">Close tooltip</span></button>
+    <div id="my-tooltip" class="Tooltip" data-spirit-element="tooltip-wrapper">
+      Hello there!
     </div>
   </body>
 </html>
diff --git a/...ig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipPopover.twig.snap.html b/...ig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipPopover.twig.snap.html
@@ -5,19 +5,19 @@
     </title>
   </head>
   <body>
-    <div class="Tooltip is-hidden" data-spirit-placement="bottom" data-spirit-enable-flipping="true" data-spirit-enable-flipping-cross-axis="true" data-spirit-enable-shifting="true" data-spirit-enable-sizing="true" data-spirit-trigger="click, hover">
+    <div class="TooltipPopover is-hidden" data-spirit-placement="bottom" data-spirit-enable-flipping="true" data-spirit-enable-flipping-cross-axis="true" data-spirit-enable-shifting="true" data-spirit-enable-sizing="true" data-spirit-trigger="click, hover">
       Hello there!
     </div>
     <!-- Render with all props -->
 
-    <div class="Tooltip Tooltip--dismissible is-hidden" id="my-tooltip" data-spirit-placement="right-start" data-spirit-enable-flipping="true" data-spirit-enable-flipping-cross-axis="true" data-spirit-flip-fallback-axis-side-direction="top, left, right, bottom" data-spirit-flip-fallback-placements="left-start" data-spirit-enable-shifting="true" data-spirit-enable-sizing="true" data-spirit-trigger="click, hover">
-      Hello there! <button type="button" class="Tooltip__close" data-spirit-dismiss="tooltip" aria-controls="my-tooltip" data-spirit-target="#my-tooltip" aria-expanded="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="a79dff7a255f69bbe6e39d594aa2275b" aria-hidden="true">
+    <div class="TooltipPopover TooltipPopover--dismissible is-hidden" id="my-tooltip" data-spirit-placement="right-start" data-spirit-enable-flipping="true" data-spirit-enable-flipping-cross-axis="true" data-spirit-flip-fallback-axis-side-direction="top, left, right, bottom" data-spirit-flip-fallback-placements="left-start" data-spirit-enable-shifting="true" data-spirit-enable-sizing="true" data-spirit-trigger="click, hover">
+      Hello there! <button type="button" class="TooltipPopover__close" data-spirit-dismiss="tooltip" aria-controls="my-tooltip" data-spirit-target="#my-tooltip" aria-expanded="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="a79dff7a255f69bbe6e39d594aa2275b" aria-hidden="true">
       <path d="M18.3 5.70997C17.91 5.31997 17.28 5.31997 16.89 5.70997L12 10.59L7.11 5.69997C6.72 5.30997 6.09 5.30997 5.7 5.69997C5.31 6.08997 5.31 6.71997 5.7 7.10997L10.59 12L5.7 16.89C5.31 17.28 5.31 17.91 5.7 18.3C6.09 18.69 6.72 18.69 7.11 18.3L12 13.41L16.89 18.3C17.28 18.69 17.91 18.69 18.3 18.3C18.69 17.91 18.69 17.28 18.3 16.89L13.41 12L18.3 7.10997C18.68 6.72997 18.68 6.08997 18.3 5.70997Z" fill="currentColor">
       </path></svg> <span class="accessibility-hidden">Close tooltip</span></button>
     </div>
     <!-- Render with turned off "enabled*" attributes -->
 
-    <div class="Tooltip is-hidden" id="my-tooltip-disabled-props" data-spirit-placement="bottom" data-spirit-enable-flipping="false" data-spirit-enable-flipping-cross-axis="false" data-spirit-enable-shifting="false" data-spirit-enable-sizing="false" data-spirit-trigger="click, hover">
+    <div class="TooltipPopover is-hidden" id="my-tooltip-disabled-props" data-spirit-placement="bottom" data-spirit-enable-flipping="false" data-spirit-enable-flipping-cross-axis="false" data-spirit-enable-shifting="false" data-spirit-enable-sizing="false" data-spirit-trigger="click, hover">
       Hello there again!
     </div>
   </body>

diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipAdvancedFloating.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipAdvancedFloating.twig
@@ -54,7 +54,7 @@
 
 <div class="example-viewport bg-cover" id="my-advanced-viewport">
     <div class="example-content" id="my-advanced-content">
-        <TooltipWrapper UNSAFE_className="d-inline-block">
+        <Tooltip UNSAFE_className="d-inline-block">
             <Button
                 id="my-button"
                 aria-describedby="my-advanced-tooltip"
@@ -68,11 +68,12 @@
                 placement="top-start"
                 flipFallbackAxisSideDirection="top, right, bottom"
                 isDismissible 
+                isOpen
             >
                 This long tooltip is flipping, resizing and shifting to stay in the viewport.
                 Also its arrow is always trying to point to the center of the trigger.
             </TooltipPopover>
-        </TooltipWrapper>
+        </Tooltip>
     </div>
 </div>
 

diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipClickable.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipClickable.twig
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDefault.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDefault.twig
@@ -1,4 +1,4 @@
-<TooltipWrapper>
+<Tooltip>
     <Button
         id="button-default"
         aria-describedby="tooltip-default"
@@ -13,4 +13,4 @@
     >
         Hello there!
     </TooltipPopover>
-</TooltipWrapper>
+</Tooltip>
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDismissible.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDismissible.twig
@@ -1,4 +1,4 @@
-<TooltipWrapper>
+<Tooltip>
     <Button 
         aria-describedby="my-dismissible-tooltip"
         data-spirit-toggle="tooltip"
@@ -15,4 +15,4 @@
     >
         Close me
     </Tooltip>
-</TooltipWrapper>
+</Tooltip>
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDismissibleViaJS.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDismissibleViaJS.twig
@@ -2,7 +2,7 @@
     Saves data to local storage.
 </p>
 
-<TooltipWrapper UNSAFE_className="d-inline-block">
+<Tooltip UNSAFE_className="d-inline-block">
     <Button
         id="my-dismissible-button-with-local-storage"
         aria-describedby="my-dismissible-tooltip-with-local-storage"
@@ -20,6 +20,6 @@
     >
         Close me
     </TooltipPopover>
-</TooltipWrapper>
+</Tooltip>
 
 {{ encore_entry_script_tags('tooltipDismissibleViaJS') }}
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipIcon.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipIcon.twig
@@ -1,6 +1,6 @@
 <div>
   Hover or click on the icon to view the tooltip
-  <TooltipWrapper UNSAFE_className="d-inline-block">
+  <Tooltip UNSAFE_className="d-inline-block">
         <Icon
           id="button-example-with-icon"
           name="info"
@@ -18,5 +18,5 @@
       >
           Close me
       </TooltipPopover>
-  </TooltipWrapper>
+  </Tooltip>
 </div>