BREAKING CHANGE(web-twig): Tooltip plugin support only TooltipFloatingUI

- fix and update demo to match demos in react and web
lmc-eu · Jun 3, 2024 · 6856a53 · 6856a53
1 parent d0bc8fb
commit 6856a53
Show file tree

Hide file tree

Showing 21 changed files with 253 additions and 168 deletions.
diff --git a/apps/web-twig-demo/assets/scripts/tooltip-dismissible-via-js.ts b/apps/web-twig-demo/assets/scripts/tooltip-dismissible-via-js.ts
@@ -1,8 +1,9 @@
 import { Tooltip } from '@lmc-eu/spirit-web/src/js/index.esm';
 
-const buttonId = 'my-dismissible-button';
-const tooltipId = 'my-dismissible-tooltip-with-floating-ui';
-const storageName = 'show-tooltip';
+const buttonId = 'my-dismissible-button-with-local-storage';
+const tooltipId = 'my-dismissible-tooltip-with-local-storage';
+
+const storageName = 'show-tooltip-twig';
 const myTooltipEl = document.getElementById(tooltipId);
 const myTooltip = new Tooltip(myTooltipEl);
 
@@ -16,9 +17,17 @@ document.getElementById(buttonId).addEventListener('click', () => {
   const isToggled = window.localStorage.getItem(storageName);
   const isShown = myTooltip.isShown();
 
-  if (isToggled && !isShown) {
-    window.localStorage.removeItem(storageName);
-  } else {
+  if (!isToggled && !!isShown) {
     window.localStorage.setItem(storageName, 'true');
+    myTooltip.show();
+  } else {
+    window.localStorage.removeItem(storageName);
+    myTooltip.hide();
   }
 });
+
+// close button inside the tooltip
+document.querySelector(`#${tooltipId} [data-spirit-dismiss="tooltip"]`).addEventListener('click', () => {
+  window.localStorage.removeItem(storageName);
+  myTooltip.hide();
+});
diff --git a/apps/web-twig-demo/assets/scripts/tooltip-placement-example.ts b/apps/web-twig-demo/assets/scripts/tooltip-placement-example.ts
@@ -0,0 +1,21 @@
+import { Tooltip } from '@lmc-eu/spirit-web/src/js/index.esm';
+import { Placement } from '@floating-ui/dom';
+
+const radios = document.querySelectorAll('input[type="radio"]');
+
+const tooltip = document.getElementById('tooltip-placements-example');
+const tooltipText = document.getElementById('tooltip-placements-example-text');
+const myTooltip = new Tooltip(tooltip);
+
+myTooltip.show();
+
+radios.forEach((radio) => {
+  radio.addEventListener('change', () => {
+    const placement = (radio as HTMLInputElement).value;
+
+    myTooltip.updateConfig({ placement: placement as Placement });
+    myTooltip.show();
+
+    tooltipText.textContent = placement;
+  });
+});
diff --git a/apps/web-twig-demo/webpack.config.js b/apps/web-twig-demo/webpack.config.js
@@ -31,6 +31,7 @@ Encore
     .addEntry('formValidations', './assets/scripts/form-validations.ts')
     .addEntry('tooltipDismissibleViaJS', './assets/scripts/tooltip-dismissible-via-js.ts')
     .addEntry('tooltipAdvancedUsage', './assets/scripts/tooltip-advanced-usage.ts')
+    .addEntry('tooltipPlacementExample', './assets/scripts/tooltip-placement-example.ts')
 
     // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
     // .enableStimulusBridge('./assets/controllers.json')

diff --git a/docs/migrations/web-twig/MIGRATION-v3.md b/docs/migrations/web-twig/MIGRATION-v3.md
@@ -25,6 +25,8 @@ Introducing version 3 of the _spirit-web-twig_ package
   - [Tabs: TabLink `target` Prop](#tabs-tablink-target-prop)
   - [Tooltip: Composition](#tooltip-composition)
   - [Tooltip: Hidden by default](#tooltip-hidden-by-default)
+  - [Tooltip: TooltipPopover `enableControlledPlacement` Prop](#tooltip-tooltippopover-enablecontrolledplacement-prop)
+  - [Tooltip: TooltipPopover Default Values](#tooltip-tooltippopover-default-values)
 
 ## General Changes
 
@@ -326,6 +328,64 @@ Use:
 
 See [`Tooltip` documentation][tooltip-readme] for more details and examples.
 
+### Tooltip: TooltipPopover `enableControlledPlacement` Prop
+
+We have decided to stop support for non-FloatingUI and CSS-only tooltips.
+As a result, the `enableControlledPlacement` prop is no longer mandatory for the `TooltipPopover` component, as all tooltips now use FloatingUI.
+
+#### Migration Guide
+
+Instead of:
+
+```twig
+<Tooltip>
+  <a
+    href="#"
+    data-spirit-toggle="tooltip"
+    data-spirit-target="my-tooltip"
+    aria-describedby="my-tooltip"
+  >
+    I have a tooltip
+  </a>
+  <TooltipPopover
+    id="my-tooltip"
+    enableControlledPlacement
+  >
+    Hello there!
+  </TooltipPopover>
+<Tooltip>
+
+```
+
+Use:
+
+```twig
+<Tooltip>
+  <a
+    href="#"
+    data-spirit-toggle="tooltip"
+    data-spirit-target="my-tooltip"
+    aria-describedby="my-tooltip"
+  >
+    I have a tooltip
+  </a>
+  <TooltipPopover
+    id="my-tooltip"
+  >
+    Hello there!
+  </TooltipPopover>
+<Tooltip>
+```
+
+See [`Tooltip` documentation][tooltip-readme] for more details and examples.
+
+### Tooltip: TooltipPopover Default Values
+
+Tooltip props `enableFlipping`, `enableFlippingCrossAxis`, `enableShifting`, and `enableSizing` are now turned on by default.
+You can turn them off by setting them to `false`.
+
+See [`Tooltip` documentation][tooltip-readme] for more details and examples.
+
 ---
 
 Please refer back to this guide or reach out to our team if you encounter any issues during migration.

diff --git a/packages/web-twig/src/Resources/components/Tooltip/README.md b/packages/web-twig/src/Resources/components/Tooltip/README.md
@@ -122,8 +122,6 @@ This setup might be preferable when you have a link in your tooltip, for example
 
 #### Advanced Floating Functionality
 
-For more info about feature flags, see main [README][readme-feature-flags].
-
 Advanced floating functionality is provided by JavaScript plugin and by [Floating UI][floating-ui] library.
 
 ```html
@@ -133,7 +131,6 @@ Advanced floating functionality is provided by JavaScript plugin and by [Floatin
     closeLabel="Close tooltip"
     id="my-tooltip-advanced"
     isDismissible
-    enableControlledPlacement
     enableFlipping
     enableFlippingCrossAxis
     enableShifting
@@ -152,10 +149,10 @@ Advanced floating functionality is provided by JavaScript plugin and by [Floatin
 | Attribute                       | Type                                         | Default        | Required | Description                                                                                                                                                                                                                                                                |
 | ------------------------------- | -------------------------------------------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `closeLabel`                    | `string`                                     | `Close`        | ✕        | Close label                                                                                                                                                                                                                                                                |
-| `enableFlipping`                | `bool`                                       | false          | ✕        | Enables [flipping][floating-ui-flip] of the element’s placement when it starts to overflow its boundary area. For example `top` can be flipped to `bottom`.                                                                                                                |
-| `enableFlippingCrossAxis`       | `bool`                                       | false          | ✕        | Enables flipping on the [cross axis][floating-ui-flip-cross-axis], the axis perpendicular to main axis. For example `top-end` can be flipped to the `top-start`.                                                                                                           |
-| `enableShifting`                | `bool`                                       | false          | ✕        | Enables [shifting][floating-ui-shift] of the element to keep it inside the boundary area by adjusting its position.                                                                                                                                                        |
-| `enableSizing`                  | `bool`                                       | false          | ✕        | Enables [sizing][floating-ui-size] of the element to keep it inside the boundary area by setting the max width.                                                                                                                                                            |
+| `enableFlipping`                | `bool`                                       | true           | ✕        | Enables [flipping][floating-ui-flip] of the element’s placement when it starts to overflow its boundary area. For example `top` can be flipped to `bottom`.                                                                                                                |
+| `enableFlippingCrossAxis`       | `bool`                                       | true           | ✕        | Enables flipping on the [cross axis][floating-ui-flip-cross-axis], the axis perpendicular to main axis. For example `top-end` can be flipped to the `top-start`.                                                                                                           |
+| `enableShifting`                | `bool`                                       | true           | ✕        | Enables [shifting][floating-ui-shift] of the element to keep it inside the boundary area by adjusting its position.                                                                                                                                                        |
+| `enableSizing`                  | `bool`                                       | true           | ✕        | Enables [sizing][floating-ui-size] of the element to keep it inside the boundary area by setting the max width.                                                                                                                                                            |
 | `flipFallbackAxisSideDirection` | ["none" \| "start" \| "end"]                 | "none"         | ✕        | Whether to allow [fallback to the opposite axis][floating-ui-flip-fallback-axis-side-direction] if no placements along the preferred placement axis fit, and if so, which side direction along that axis to choose. If necessary, it will fallback to the other direction. |
 | `flipFallbackPlacements`        | `string`                                     | -              | ✕        | This describes a list of [explicit placements][floating-ui-flip-fallback-placements] to try if the initial placement doesn’t fit on the axes in which overflow is checked. For example you can set `"top, right, bottom"`                                                  |
 | `id`                            | `string`                                     | -              | ✔        | Tooltip ID                                                                                                                                                                                                                                                                 |

diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
@@ -6,40 +6,32 @@
         {% include '@components/Tooltip/stories/TooltipPlacements.twig' %}
     </DocsSection>
 
-    <DocsSection title="Static Tooltip (No Interaction)" stackAlignment="stretch">
-        {% include '@components/Tooltip/stories/TooltipStatic.twig' %}
-    </DocsSection>
-
-    <DocsSection title="Tooltip on Hover (Pure CSS)" stackAlignment="stretch">
-        {% include '@components/Tooltip/stories/TooltipOnHover.twig' %}
-    </DocsSection>
-
-    <DocsSection title="Tooltip with JS plugin">
-        {% include '@components/Tooltip/stories/TooltipWithJsPlugin.twig' %}
-    </DocsSection>
-
-    <DocsSection title="Tooltip on Click (JavaScript)">
-        {% include '@components/Tooltip/stories/TooltipClickable.twig' %}
+    <DocsSection title="Default">
+        {% include '@components/Tooltip/stories/TooltipDefault.twig' %}
     </DocsSection>
 
     <DocsSection title="Dismissible Tooltip">
         {% include '@components/Tooltip/stories/TooltipDismissible.twig' %}
     </DocsSection>
 
-    <DocsSection title="Dismissible Tooltip via JS API and Floating UI">
+    <DocsSection title="Dismissible Tooltip via JS API">
         {% include '@components/Tooltip/stories/TooltipDismissibleViaJS.twig' %}
     </DocsSection>
 
-    <DocsSection title="Tooltip on Hover with Floating UI">
-        {% include '@components/Tooltip/stories/TooltipEnableHover.twig' %}
+    <DocsSection title="Tooltip with Link Component">
+        {% include '@components/Tooltip/stories/TooltipWithLink.twig' %}
+    </DocsSection>
+
+    <DocsSection title="Tooltip Triggers">
+        {% include '@components/Tooltip/stories/TooltipTriggers.twig' %}
     </DocsSection>
 
     <DocsSection title="Tooltip on Icon Component">
         {% include '@components/Tooltip/stories/TooltipIcon.twig' %}
     </DocsSection>
 
     <DocsSection title="Advanced Floating Functionality">
-        {% include '@components/Tooltip/stories/TooltipFloatingUI.twig' %}
+        {% include '@components/Tooltip/stories/TooltipAdvancedFloating.twig' %}
     </DocsSection>
 
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Tooltip/TooltipPopover.twig b/packages/web-twig/src/Resources/components/Tooltip/TooltipPopover.twig
@@ -1,11 +1,10 @@
 {# API #}
 {%- set props = props | default([]) -%}
 {%- set _closeLabel = props.closeLabel | default('Close') -%}
-{%- set _enableControlledPlacement = props.enableControlledPlacement | default(false) -%}
-{%- set _enableFlipping = props.enableFlipping | default(null) -%}
-{%- set _enableFlippingCrossAxis = props.enableFlippingCrossAxis | default(null) -%}
-{%- set _enableShifting = props.enableShifting | default(null) -%}
-{%- set _enableSizing = props.enableSizing | default(null) -%}
+{%- set _enableFlipping = props.enableFlipping ?? true -%}
+{%- set _enableFlippingCrossAxis = props.enableFlippingCrossAxis ?? true -%}
+{%- set _enableShifting = props.enableShifting ?? true -%}
+{%- set _enableSizing = props.enableSizing ?? true -%}
 {%- set _flipFallbackAxisSideDirection = props.flipFallbackAxisSideDirection | default(null) -%}
 {%- set _flipFallbackPlacements = props.flipFallbackPlacements | default(null) -%}
 {%- set _id = props.id | default(null) -%}
@@ -28,16 +27,15 @@
 {%- set _enableSizingValue = _enableSizing ? 'true' : 'false' -%}
 
 {%- set _ariaControlsAttr = _id ? 'aria-controls="' ~ _id | escape('html_attr') ~ '"' : null -%}
-{%- set _dataEnableControlledPlacement = _enableControlledPlacement ? 'data-spirit-placement-controlled' : null -%}
-{%- set _dataEnableFlippingAttr = _enableFlipping and _enableControlledPlacement ? 'data-spirit-enable-flipping="' ~ _enableFlippingValue ~ '"' : null -%}
-{%- set _dataEnableFlippingCrossAxisAttr = _enableFlippingCrossAxis and _enableControlledPlacement ? 'data-spirit-enable-flipping-cross-axis="' ~ _enableFlippingCrossAxisValue ~ '"' : null -%}
-{%- set _dataEnableShiftingAttr = _enableShifting and _enableControlledPlacement ? 'data-spirit-enable-shifting="' ~ _enableShiftingValue ~ '"' : null -%}
-{%- set _dataEnableSizingAttr = _enableSizing and _enableControlledPlacement ? 'data-spirit-enable-sizing="' ~ _enableSizingValue ~ '"' : null -%}
-{%- set _dataFillFallbackAxisSideDirectionAttr = _flipFallbackAxisSideDirection and _enableControlledPlacement ? 'data-spirit-flip-fallback-axis-side-direction="' ~ _flipFallbackAxisSideDirection | escape('html_attr') ~ '"' : null -%}
-{%- set _dataFlipFallbackPlacementsAttr = _flipFallbackPlacements and _enableControlledPlacement ? 'data-spirit-flip-fallback-placements="' ~ _flipFallbackPlacements | escape('html_attr') ~ '"' : null -%}
+{%- set _dataEnableFlippingAttr = 'data-spirit-enable-flipping="' ~ _enableFlippingValue ~ '"' -%}
+{%- set _dataEnableFlippingCrossAxisAttr = 'data-spirit-enable-flipping-cross-axis="' ~ _enableFlippingCrossAxisValue ~ '"' -%}
+{%- set _dataEnableShiftingAttr = 'data-spirit-enable-shifting="' ~ _enableShiftingValue ~ '"'-%}
+{%- set _dataEnableSizingAttr = 'data-spirit-enable-sizing="' ~ _enableSizingValue ~ '"' -%}
+{%- set _dataFillFallbackAxisSideDirectionAttr = _flipFallbackAxisSideDirection ? 'data-spirit-flip-fallback-axis-side-direction="' ~ _flipFallbackAxisSideDirection | escape('html_attr') ~ '"' : null -%}
+{%- set _dataFlipFallbackPlacementsAttr = _flipFallbackPlacements ? 'data-spirit-flip-fallback-placements="' ~ _flipFallbackPlacements | 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 -%}
-{%- set _dataTriggerAttr =  _enableControlledPlacement ? 'data-spirit-trigger="' ~ _trigger ~ '"' : null -%}
+{%- set _dataTriggerAttr = 'data-spirit-trigger="' ~ _trigger ~ '"' -%}
 {%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
 
 {# Miscellaneous #}
@@ -51,7 +49,6 @@
     {{ classProp(_classNames) }}
     {{ _idAttr | raw }}
     {{ _dataPlacementAttr | raw }}
-    {{ _dataEnableControlledPlacement | raw }}
     {{ _dataEnableFlippingAttr | raw }}
     {{ _dataEnableFlippingCrossAxisAttr | raw }}
     {{ _dataFillFallbackAxisSideDirectionAttr | raw }}

diff --git a/...ages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipPopover.twig b/...ages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipPopover.twig
@@ -5,7 +5,6 @@
     closeLabel="Close tooltip"
     id="my-tooltip"
     isDismissible
-    enableControlledPlacement
     enableFlipping
     enableFlippingCrossAxis
     enableShifting
@@ -16,3 +15,14 @@
 >
     Hello there!
 </TooltipPopover>
+
+<!-- Render with turned off "enabled*" attributes -->
+<TooltipPopover
+    id="my-tooltip-disabled-props"
+    enableFlipping={ false }
+    enableFlippingCrossAxis={ false }
+    enableShifting={ false }
+    enableSizing={ false }
+>
+    Hello there again!
+</TooltipPopover>
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,15 +5,20 @@
     </title>
   </head>
   <body>
-    <div class="Tooltip is-hidden" data-spirit-placement="bottom">
+    <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">
       Hello there!
     </div>
     <!-- Render with all props -->
 
-    <div class="Tooltip Tooltip--dismissible is-hidden" id="my-tooltip" data-spirit-placement="right-start" data-spirit-placement-controlled="" 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">
+    <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">
       <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">
+      Hello there again!
+    </div>
   </body>
 </html>