25500013980

Committed 07 May 2026 01:50PM UTC coverage: 84.089% (-0.3%) from 84.395%

Build # 25500013980

Build Type

Pull #2631

github

Committed by

adamkudrna

Commit Message

feat(web,web-react)!: drop `Tag` appearance feature flag #DS-2456

BREAKING CHANGE: The new `Tag` appearance (`inline-flex` layout with explicit
height and inside spacing) is now default. Delete the `$enable-v5-tag-appearance`
Sass variable and the `spirit-feature-enable-v5-tag-appearance` CSS class from
your project — they have no effect. See the Tag: Appearance Feature Flag Removed
sections in the web and web-react package Migration Guides to version 5.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Pull Request Pull Request #2631: feat(web,web-react)!: drop `Tag` appearance feature flag #DS-2456

Coverage Stats

2274 of 3120 branches covered (72.88%)

Branch coverage included in aggregate %.

7149 of 8086 relevant lines covered (88.41%)

197.08 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

87.27

/packages/web-react/src/components/Tooltip/TooltipPopover.tsx

'use client';

import classNames from 'classnames';
import React, { useMemo } from 'react';
import { useStyleProps } from '../../hooks';
import { type TooltipPopoverProps } from '../../types';
import TooltipCloseButton from './TooltipCloseButton';
import { useTooltipContext } from './TooltipContext';
import { useTooltipStyleProps } from './useTooltipStyleProps';

const normalizeFiniteNumber = (value?: number, fallback?: number) =>
  typeof value === 'number' && Number.isFinite(value) ? value : fallback;

const TooltipPopover = (props: TooltipPopoverProps) => {
  const { children, ...rest } = props;
  const {
    arrowRef,
    getFloatingProps,
    isDismissible,
    isOpen,
    middlewareData,
    onToggle,
    placement,
    tooltipRef,
    x,
    y,
    position,
    sizeMaxWidth,
    tooltipMaxWidth,
  } = useTooltipContext();
  const { classProps, props: modifiedProps } = useTooltipStyleProps({
    isOpen,
    isDismissible,
    placement,
    ...rest,
  });
  const { styleProps: contentStyleProps, props: contentOtherProps } = useStyleProps(modifiedProps);

  const renderCloseButton = useMemo(
    () => isDismissible && <TooltipCloseButton onClick={() => onToggle(false)} label="close" />,
    [isDismissible, onToggle],
  );

  const getMaxHeightAndWidth = () => {
    if (isOpen && sizeMaxWidth && tooltipMaxWidth) {
      return {
        maxWidth: tooltipMaxWidth < sizeMaxWidth ? tooltipMaxWidth : sizeMaxWidth,
      };
    }

    return undefined;
  };

  const getArrowStaticSidePosition = () => {
    if (placement && arrowRef.current) {
      const { arrow } = middlewareData;
      const side = placement.split('-')[0];

      const staticSide = {
        top: 'bottom',
        right: 'left',
        bottom: 'top',
        left: 'right',
      }[side] as string;

      const arrowEl = arrowRef.current as HTMLElement;

      const offset =
        staticSide === 'top' || staticSide === 'bottom'
          ? arrowEl.offsetHeight
          : (arrowEl.offsetHeight + arrowEl.offsetWidth) / 2;

      const arrowX = arrow?.x;
      const arrowY = arrow?.y;

      return {
        left: normalizeFiniteNumber(arrowX),
        top: normalizeFiniteNumber(arrowY),
        [staticSide]: offset && -Math.floor(offset), // remove 0.5 pixels values for arrow offset
      };
    }

    return undefined;
  };

  return (
    <div
      ref={tooltipRef}
      className={classNames(classProps.popoverClassName, contentStyleProps.className)}
      {...contentOtherProps}
      {...getFloatingProps()}
      style={{
        position,
        top: normalizeFiniteNumber(y, 0),
        left: normalizeFiniteNumber(x, 0),
        ...getMaxHeightAndWidth(),
        ...contentStyleProps.style,
      }}
      data-spirit-element="tooltip" // This is used to select CSS variables for maxWidth and tooltip offset
    >
      {children}
      {renderCloseButton}
      <span
        ref={arrowRef}
        className={classProps.arrowClassName}
        data-spirit-element="tooltip-arrow"
        style={{
          position: 'absolute',
          ...getArrowStaticSidePosition(),
        }}
      />
    </div>
  );
};

TooltipPopover.spiritComponent = 'TooltipPopover';

export default TooltipPopover;

1	'use client';
2
3	import classNames from 'classnames';	189✔
4	import React, { useMemo } from 'react';	189✔
5	import { useStyleProps } from '../../hooks';	189✔
6	import { type TooltipPopoverProps } from '../../types';
7	import TooltipCloseButton from './TooltipCloseButton';	189✔
8	import { useTooltipContext } from './TooltipContext';	189✔
9	import { useTooltipStyleProps } from './useTooltipStyleProps';	189✔
10
11	const normalizeFiniteNumber = (value?: number, fallback?: number) =>	189✔
12	typeof value === 'number' && Number.isFinite(value) ? value : fallback;	132✔
13
14	const TooltipPopover = (props: TooltipPopoverProps) => {	189✔
15	const { children, ...rest } = props;	47✔
16	const {
17	arrowRef,
18	getFloatingProps,
19	isDismissible,
20	isOpen,
21	middlewareData,
22	onToggle,
23	placement,
24	tooltipRef,
25	x,
26	y,
27	position,
28	sizeMaxWidth,
29	tooltipMaxWidth,
30	} = useTooltipContext();	47✔
31	const { classProps, props: modifiedProps } = useTooltipStyleProps({	47✔
32	isOpen,
33	isDismissible,
34	placement,
35	...rest,
36	});
37	const { styleProps: contentStyleProps, props: contentOtherProps } = useStyleProps(modifiedProps);	47✔
38
39	const renderCloseButton = useMemo(	47✔
40	() => isDismissible && <TooltipCloseButton onClick={() => onToggle(false)} label="close" />,	28✔
41	[isDismissible, onToggle],
42	);
43
44	const getMaxHeightAndWidth = () => {	47✔
45	if (isOpen && sizeMaxWidth && tooltipMaxWidth) {	47!
46	return {	×
47	maxWidth: tooltipMaxWidth < sizeMaxWidth ? tooltipMaxWidth : sizeMaxWidth,	×
48	};
49	}
50
51	return undefined;	47✔
52	};
53
54	const getArrowStaticSidePosition = () => {	47✔
55	if (placement && arrowRef.current) {	47✔
56	const { arrow } = middlewareData;	19✔
57	const side = placement.split('-')[0];	19✔
58
59	const staticSide = {	19✔
60	top: 'bottom',
61	right: 'left',
62	bottom: 'top',
63	left: 'right',
64	}[side] as string;
65
66	const arrowEl = arrowRef.current as HTMLElement;	19✔
67
68	const offset =
69	staticSide === 'top' \|\| staticSide === 'bottom'	19!
70	? arrowEl.offsetHeight
71	: (arrowEl.offsetHeight + arrowEl.offsetWidth) / 2;
72
73	const arrowX = arrow?.x;	19✔
74	const arrowY = arrow?.y;	19✔
75
76	return {	19✔
77	left: normalizeFiniteNumber(arrowX),
78	top: normalizeFiniteNumber(arrowY),
79	[staticSide]: offset && -Math.floor(offset), // remove 0.5 pixels values for arrow offset	19!
80	};
81	}
82
83	return undefined;	28✔
84	};
85
86	return (
87	<div
88	ref={tooltipRef}
89	className={classNames(classProps.popoverClassName, contentStyleProps.className)}
90	{...contentOtherProps}
91	{...getFloatingProps()}
92	style={{
93	position,
94	top: normalizeFiniteNumber(y, 0),
95	left: normalizeFiniteNumber(x, 0),
96	...getMaxHeightAndWidth(),
97	...contentStyleProps.style,
98	}}
99	data-spirit-element="tooltip" // This is used to select CSS variables for maxWidth and tooltip offset
100	>
101	{children}
102	{renderCloseButton}
103	<span
104	ref={arrowRef}
105	className={classProps.arrowClassName}
106	data-spirit-element="tooltip-arrow"
107	style={{
108	position: 'absolute',
109	...getArrowStaticSidePosition(),
110	}}
111	/>
112	</div>
113	);
114	};
115
116	TooltipPopover.spiritComponent = 'TooltipPopover';	189✔
117
118	export default TooltipPopover;	189✔

alma-oss / spirit-design-system / 25500013980

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous