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 5e9b9f12ea..4cb6f43ea2 100644 --- 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 %} -
- - {% include '@components/Tooltip/stories/TooltipPlacements.twig' %} - - - - {% include '@components/Tooltip/stories/TooltipStatic.twig' %} - - - - {% include '@components/Tooltip/stories/TooltipOnHover.twig' %} - - - - {% include '@components/Tooltip/stories/TooltipClickable.twig' %} - - - - {% include '@components/Tooltip/stories/TooltipDismissible.twig' %} - - - - {% include '@components/Tooltip/stories/TooltipDismissibleViaJS.twig' %} - - - - {% include '@components/Tooltip/stories/TooltipFloatingUI.twig' %} - -
+ + {% include '@components/Tooltip/stories/TooltipPlacements.twig' %} + + + + {% include '@components/Tooltip/stories/TooltipStatic.twig' %} + + + + {% include '@components/Tooltip/stories/TooltipOnHover.twig' %} + + + + {% include '@components/Tooltip/stories/TooltipClickable.twig' %} + + + + {% include '@components/Tooltip/stories/TooltipDismissible.twig' %} + + + + {% include '@components/Tooltip/stories/TooltipDismissibleViaJS.twig' %} + + + + {% include '@components/Tooltip/stories/TooltipFloatingUI.twig' %} + {% endblock %} diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.twig index 68ab94da0d..ba7122d1e7 100644 --- 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 %}
{% block content %}{% endblock %} {% if _isDismissible == 'true' %} diff --git a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltip.twig.snap.html b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltip.twig.snap.html index 8ff7ee1cb2..99aa281dee 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltip.twig.snap.html +++ b/packages/web-twig/src/Resources/components/Tooltip/__tests__/__snapshots__/tooltip.twig.snap.html @@ -5,12 +5,12 @@ -
+
Hello there!
-
+
Hello there! diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig index 82f925d916..bd0e280436 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig +++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig @@ -43,7 +43,7 @@ } -
+
- + 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.