From 6856a5379e1ae31327eb37b4ab5437cab6f5fe89 Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Thu, 23 May 2024 13:19:59 +0200 Subject: [PATCH] BREAKING CHANGE(web-twig): Tooltip plugin support only TooltipFloatingUI - fix and update demo to match demos in react and web --- .../scripts/tooltip-dismissible-via-js.ts | 21 ++++-- .../scripts/tooltip-placement-example.ts | 21 ++++++ apps/web-twig-demo/webpack.config.js | 1 + docs/migrations/web-twig/MIGRATION-v3.md | 60 ++++++++++++++++ .../Resources/components/Tooltip/README.md | 11 ++- .../components/Tooltip/Tooltip.stories.twig | 28 +++----- .../components/Tooltip/TooltipPopover.twig | 25 +++---- .../__fixtures__/tooltipPopover.twig | 12 +++- .../tooltipPopover.twig.snap.html | 9 ++- ...ngUI.twig => TooltipAdvancedFloating.twig} | 6 +- .../Tooltip/stories/TooltipDefault.twig | 16 +++++ .../Tooltip/stories/TooltipDismissible.twig | 16 ++++- .../stories/TooltipDismissibleViaJS.twig | 9 +-- .../Tooltip/stories/TooltipIcon.twig | 3 +- .../Tooltip/stories/TooltipOnHover.twig | 37 ---------- .../Tooltip/stories/TooltipPlacements.twig | 19 +---- .../Tooltip/stories/TooltipStatic.twig | 13 ---- .../Tooltip/stories/TooltipTriggers.twig | 69 +++++++++++++++++++ .../Tooltip/stories/TooltipWithJsPlugin.twig | 39 ----------- ...pEnableHover.twig => TooltipWithLink.twig} | 5 +- packages/web/src/js/Tooltip.ts | 1 - 21 files changed, 253 insertions(+), 168 deletions(-) create mode 100644 apps/web-twig-demo/assets/scripts/tooltip-placement-example.ts rename packages/web-twig/src/Resources/components/Tooltip/stories/{TooltipFloatingUI.twig => TooltipAdvancedFloating.twig} (94%) create mode 100644 packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDefault.twig delete mode 100644 packages/web-twig/src/Resources/components/Tooltip/stories/TooltipOnHover.twig delete mode 100644 packages/web-twig/src/Resources/components/Tooltip/stories/TooltipStatic.twig create mode 100644 packages/web-twig/src/Resources/components/Tooltip/stories/TooltipTriggers.twig delete mode 100644 packages/web-twig/src/Resources/components/Tooltip/stories/TooltipWithJsPlugin.twig rename packages/web-twig/src/Resources/components/Tooltip/stories/{TooltipEnableHover.twig => TooltipWithLink.twig} (84%) 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 index 8fea8d1cbb..d27713a037 100644 --- 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 new file mode 100644 index 0000000000..f390436339 --- /dev/null +++ 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 index 0fb34aa36b..e376cb1d1a 100644 --- 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 index c3fb8b117c..020482a640 100644 --- 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 + + + I have a tooltip + + + Hello there! + + + +``` + +Use: + +```twig + + + I have a tooltip + + + Hello there! + + +``` + +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 index 8b6d43af00..6a2ae9fc07 100644 --- 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 index 6a88f61e87..7b0e960bf9 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig +++ b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig @@ -6,32 +6,24 @@ {% include '@components/Tooltip/stories/TooltipPlacements.twig' %} - - {% include '@components/Tooltip/stories/TooltipStatic.twig' %} - - - - {% include '@components/Tooltip/stories/TooltipOnHover.twig' %} - - - - {% include '@components/Tooltip/stories/TooltipWithJsPlugin.twig' %} - - - - {% include '@components/Tooltip/stories/TooltipClickable.twig' %} + + {% include '@components/Tooltip/stories/TooltipDefault.twig' %} {% include '@components/Tooltip/stories/TooltipDismissible.twig' %} - + {% include '@components/Tooltip/stories/TooltipDismissibleViaJS.twig' %} - - {% include '@components/Tooltip/stories/TooltipEnableHover.twig' %} + + {% include '@components/Tooltip/stories/TooltipWithLink.twig' %} + + + + {% include '@components/Tooltip/stories/TooltipTriggers.twig' %} @@ -39,7 +31,7 @@ - {% include '@components/Tooltip/stories/TooltipFloatingUI.twig' %} + {% include '@components/Tooltip/stories/TooltipAdvancedFloating.twig' %} {% endblock %} diff --git a/packages/web-twig/src/Resources/components/Tooltip/TooltipPopover.twig b/packages/web-twig/src/Resources/components/Tooltip/TooltipPopover.twig index b908032bd6..faea269fae 100644 --- 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/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipPopover.twig b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipPopover.twig index 81c0db6a46..294f353e8e 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipPopover.twig +++ b/packages/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! + + + + Hello there again! + \ No newline at end of file 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 0997f25e3c..69a7bf2aec 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,15 +5,20 @@ -