Feat(web-twig): Use data placement in Tooltip #DS-1183

lmc-eu · Jun 10, 2024 · 0c589dd · 0c589dd
1 parent 12a965f
commit 0c589dd
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 31 deletions.
diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig
@@ -10,51 +10,27 @@
 {%- set _closeClassName = _spiritClassPrefix ~ 'Tooltip__close' -%}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Tooltip' -%}
 {%- set _rootDismissibleClassName = _isDismissible is same as(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' -%}
 
 {# 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 _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,
-} -%}
-{%- set _classNames = [ _rootClassName, _rootDismissibleClassName, _placementClassNames[_placement], _styleProps.className ] -%}
-{%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
+{%- set _classNames = [ _rootClassName, _rootDismissibleClassName, _styleProps.className ] -%}
+{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['id', 'data-spirit-placement']) -%}
 
 {# Deprecations #}
 {% deprecated 'Tooltip: The implementation of this component is deprecated and will be replaced with the implementation of the TooltipPopover in the next major version. Please, use TooltipPopover instead.' %}
 
 <div
-    {{ mainProps(_mainPropsWithoutId) }}
+    {{ mainProps(_mainPropsWithoutReservedAttributes) }}
     {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
     {{ _idAttr | raw }}
+    {{ _dataPlacementAttr | raw }}
 >
     {% block content %}{% endblock %}
     {% if _isDismissible is same as(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 Tooltip--bottom">
+    <div class="Tooltip" data-spirit-placement="bottom">
       Hello there!
     </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">
       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>