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

- fix and update demo to match demos in react and web See the Tooltip: TooltipPopover enableControlledPlacement Prop section in the web-twig package Migration Guide to version 3.
lmc-eu · Jun 10, 2024 · 215dd2c · 215dd2c
1 parent 79e798d
commit 215dd2c
Show file tree

Hide file tree

Showing 21 changed files with 254 additions and 169 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,13 +149,13 @@ 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                                                                                                                                                                                                                                                                 |
+| `id`                            | `string`                                     | -              | ✔       | Tooltip ID                                                                                                                                                                                                                                                                 |
 | `isDismissible`                 | `bool`                                       | false          | ✕        | Make tooltip dismissible                                                                                                                                                                                                                                                   |
 | `isOpen`                        | `bool`                                       | false          | ✕        | Whether is Tooltip open or hidden on initial render                                                                                                                                                                                                                        |
 | `placement`                     | [Placement Dictionary][dictionary-placement] | "bottom"       | ✕        | Placement of tooltip                                                                                                                                                                                                                                                       |

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>