Revert(web-twig): Set Tooltip to use modifier class instead of data a…

…ttr to set the placement inside The data attribute placement works when you enabled the feature flag, but we need the Tooltip to works even without the flag.
lmc-eu · Jan 23, 2024 · 0fa635a · 0fa635a
1 parent 3692198
commit 0fa635a
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 38 deletions.
diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
@@ -2,34 +2,32 @@
 
 {% block content %}
 
-    <div class="spirit-feature-tooltip-enable-data-placement">
-        <DocsSection title="Placements" stackAlignment="stretch">
-            {% 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 on Click (JavaScript)">
-            {% include '@components/Tooltip/stories/TooltipClickable.twig' %}
-        </DocsSection>
-
-        <DocsSection title="Dismissible Tooltip">
-            {% include '@components/Tooltip/stories/TooltipDismissible.twig' %}
-        </DocsSection>
-
-        <DocsSection title="Dismissible Tooltip via JS API">
-            {% include '@components/Tooltip/stories/TooltipDismissibleViaJS.twig' %}
-        </DocsSection>
-
-        <DocsSection title="Full Floating UI Usage">
-            {% include '@components/Tooltip/stories/TooltipFloatingUI.twig' %}
-        </DocsSection>
-    </div>
+    <DocsSection title="Placements" stackAlignment="stretch">
+        {% 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 on Click (JavaScript)">
+        {% include '@components/Tooltip/stories/TooltipClickable.twig' %}
+    </DocsSection>
+
+    <DocsSection title="Dismissible Tooltip">
+        {% include '@components/Tooltip/stories/TooltipDismissible.twig' %}
+    </DocsSection>
+
+    <DocsSection title="Dismissible Tooltip via JS API">
+        {% include '@components/Tooltip/stories/TooltipDismissibleViaJS.twig' %}
+    </DocsSection>
+
+    <DocsSection title="Full Floating UI Usage">
+        {% include '@components/Tooltip/stories/TooltipFloatingUI.twig' %}
+    </DocsSection>
 
 {% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig
@@ -10,17 +10,58 @@
 {%- set _closeClassName = _spiritClassPrefix ~ 'Tooltip__close' -%}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Tooltip' -%}
 {%- set _rootDismissibleClassName = _isDismissible == 'true' ? _spiritClassPrefix ~ 'Tooltip--dismissible' : null -%}
+{%- set _topClassName = _spiritClassPrefix ~ 'Tooltip--top' -%}
+{%- set _topStartClassName = _spiritClassPrefix ~ 'Tooltip--topStart' -%}
+{%- set _topEndClassName = _spiritClassPrefix ~ 'Tooltip--topEnd' -%}
+{%- set _bottomClassName = _spiritClassPrefix ~ 'Tooltip--bottom' -%}
+{%- set _bottomStartClassName = _spiritClassPrefix ~ 'Tooltip--bottomStart' -%}
+{%- set _bottomEndClassName = _spiritClassPrefix ~ 'Tooltip--bottomEnd' -%}
+{%- set _leftClassName = _spiritClassPrefix ~ 'Tooltip--left' -%}
+{%- set _leftStartClassName = _spiritClassPrefix ~ 'Tooltip--leftStart' -%}
+{%- set _leftEndClassName = _spiritClassPrefix ~ 'Tooltip--leftEnd' -%}
+{%- set _rightClassName = _spiritClassPrefix ~ 'Tooltip--right' -%}
+{%- set _rightStartClassName = _spiritClassPrefix ~ 'Tooltip--rightStart' -%}
+{%- set _rightEndClassName = _spiritClassPrefix ~ 'Tooltip--rightEnd' -%}
+{%- set _topLeftClassName = _spiritClassPrefix ~ 'Tooltip--topLeft' -%}
+{%- set _topRightClassName = _spiritClassPrefix ~ 'Tooltip--topRight' -%}
+{%- set _bottomLeftClassName = _spiritClassPrefix ~ 'Tooltip--bottomLeft' -%}
+{%- set _bottomRightClassName = _spiritClassPrefix ~ 'Tooltip--bottomRight' -%}
+{%- set _leftTopClassName = _spiritClassPrefix ~ 'Tooltip--leftTop' -%}
+{%- set _leftBottomClassName = _spiritClassPrefix ~ 'Tooltip--leftBottom' -%}
+{%- set _rightTopClassName = _spiritClassPrefix ~ 'Tooltip--rightTop' -%}
+{%- set _rightBottomClassName = _spiritClassPrefix ~ 'Tooltip--rightBottom' -%}
 
 {# 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']) -%}
+{%- set _placementClassNames = {
+    'top': _topClassName,
+    'top-start': _topStartClassName,
+    'top-end': _topEndClassName,
+    'bottom': _bottomClassName,
+    'bottom-start': _bottomStartClassName,
+    'bottom-end': _bottomEndClassName,
+    'left': _leftClassName,
+    'left-start': _leftStartClassName,
+    'left-end': _leftEndClassName,
+    'right': _rightClassName,
+    'right-start': _rightStartClassName,
+    'right-end': _rightEndClassName,
+    'top-left': _topLeftClassName,
+    'top-right': _topRightClassName,
+    'bottom-left': _bottomLeftClassName,
+    'bottom-right': _bottomRightClassName,
+    'left-top': _leftTopClassName,
+    'left-bottom': _leftBottomClassName,
+    'right-top': _rightTopClassName,
+    'right-bottom': _rightBottomClassName,
+} -%}
+{%- set _classNames = [ _rootClassName, _rootDismissibleClassName, _placementClassNames[_placement], _styleProps.className ] -%}
+{%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
 
 {# Deprecations #}
 {% set deprecatedPlacements = {
@@ -39,11 +80,10 @@
 {% endif %}
 
 <div
-    {{ mainProps(_mainPropsWithoutReservedAttributes) }}
+    {{ mainProps(_mainPropsWithoutId) }}
     {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
     {{ _idAttr | raw }}
-    {{ _dataPlacementAttr | raw }}
 >
     {% block content %}{% endblock %}
     {% if _isDismissible == 'true' %}

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,12 +5,12 @@
     </title>
   </head>
   <body>
-    <div class="Tooltip" data-spirit-placement="bottom">
+    <div class="Tooltip Tooltip--bottom">
       Hello there!
     </div>
     <!-- Render with all props -->
 
-    <div class="Tooltip Tooltip--dismissible" id="my-tooltip" data-spirit-placement="right-start">
+    <div class="Tooltip Tooltip--dismissible Tooltip--rightStart" id="my-tooltip">
       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>

diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig
@@ -43,15 +43,22 @@
     }
 </style>
 
-<div class="example-viewport bg-cover" id="my-advanced-viewport">
+<div class="example-viewport bg-cover spirit-feature-tooltip-enable-data-placement" id="my-advanced-viewport">
     <div class="example-content" id="my-advanced-content">
         <Button
             id="my-button"
             aria-describedby="my-advanced-tooltip"
         >
             I have a Floating tooltip!
         </Button>
-        <Tooltip id="my-advanced-tooltip" placement="top-start" data-spirit-placement-controlled>
+        <Tooltip
+            id="my-advanced-tooltip"
+            {# We should be setting the placement prop here and not data attribute because that should be set
+            in the Tooltip inner implementation. But we cannot change the inner implementation because it would
+            break code of our users. But we can set the data attribute manually and make it work this way. #}
+            data-spirit-placement="top-start"
+            data-spirit-placement-controlled
+        >
             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.
         </Tooltip>