fixup! Feat(web-twig): Introduce advanced Tooltip usage supported by …

…FloatingUI
lmc-eu · Jan 25, 2024 · f48ce35 · f48ce35
1 parent e5b1f8f
commit f48ce35
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/packages/web-twig/src/Resources/components/Tooltip/TooltipModern.twig b/packages/web-twig/src/Resources/components/Tooltip/TooltipModern.twig
@@ -22,13 +22,13 @@
 {%- 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 _dataEnableFlippingAttr = _enableFlipping and _enableControlledPlacement ? 'data-spirit-enable-flipping="' ~ _enableFlipping | escape('html_attr') ~ '"' : null -%}
-{%- set _dataEnableFlippingCrossAxisAttr = _enableFlippingCrossAxis and _enableControlledPlacement ? 'data-spirit-enable-flipping-cross-axis="' ~ _enableFlippingCrossAxis | escape('html_attr') ~ '"' : null -%}
+{%- set _dataEnableFlippingAttr = _enableFlipping and _enableControlledPlacement ? 'data-spirit-enable-flipping="true"' : null -%}
+{%- set _dataEnableFlippingCrossAxisAttr = _enableFlippingCrossAxis and _enableControlledPlacement ? 'data-spirit-enable-flipping-cross-axis="true"' : 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 _dataEnableShiftingAttr = _enableShifting and _enableControlledPlacement ? 'data-spirit-enable-shifting="' ~ _enableShifting | escape('html_attr') ~ '"' : null -%}
-{%- set _dataEnableSizingAttr = _enableSizing and _enableControlledPlacement ? 'data-spirit-enable-sizing="' ~ _enableSizing | escape('html_attr') ~ '"' : null -%}
-{%- set _dataEnableControlledPlacement = _enableControlledPlacement ? 'data-spirit-placement-controlled="' ~ _enableControlledPlacement | escape('html_attr') ~ '"' : null -%}
+{%- set _dataEnableShiftingAttr = _enableShifting and _enableControlledPlacement ? 'data-spirit-enable-shifting="true"' : null -%}
+{%- set _dataEnableSizingAttr = _enableSizing and _enableControlledPlacement ? 'data-spirit-enable-sizing="true"' : null -%}
+{%- set _dataEnableControlledPlacement = _enableControlledPlacement ? 'data-spirit-placement-controlled="true"' : null -%}
 {%- set _dataTargetAttr = _id ? 'data-spirit-target="#' ~ _id | escape('html_attr') ~ '"' : null -%}
 
 {# Miscellaneous #}

diff --git a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipModern.twig b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__fixtures__/tooltipModern.twig
@@ -1,12 +1,18 @@
 <Tooltip>Hello there!</Tooltip>
 
 <!-- Render with all props -->
-<Tooltip
+<TooltipModern
     closeLabel="Close tooltip"
     id="my-tooltip"
     isDismissible
     enableControlledPlacement
+    enableFlipping
+    enableFlippingCrossAxis
+    enableShifting
+    enableSizing
+    flipFallbackAxisSideDirection="top, left, right, bottom"
+    flipFallbackPlacements="left-start"
     placement="right-start"
 >
     Hello there!
-</Tooltip>
+</TooltipModern>
diff --git a/...wig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipModern.twig.snap.html b/...wig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltipModern.twig.snap.html
@@ -10,7 +10,7 @@
     </div>
     <!-- Render with all props -->
 
-    <div class="Tooltip Tooltip--dismissible Tooltip--rightStart" id="my-tooltip">
+    <div class="Tooltip Tooltip--dismissible" id="my-tooltip" data-spirit-placement="right-start" data-spirit-placement-controlled="true" 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">
       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>