fix(LineClamp): 表示されている行数が最大行数以下のときにTooltipを表示しないように修正

packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx

@@ -15,17 +15,45 @@ type Props = PropsWithChildren<VariantProps<typeof lineClamp>>
 type ElementProps = Omit<ComponentPropsWithRef<'span'>, keyof Props>
 
 const lineClamp = tv({
-  base: 'smarthr-ui-LineClamp',
+  slots: {
+    base: 'smarthr-ui-LineClamp shr-relative',
+    clampedLine: 'shr-w-full',
+    shadowElementWrapper:
+      'shr-absolute shr-overflow-hidden shr-w-full shr-h-full shr-opacity-0 shr-invisible shr-left-0 shr-top-0 shr-whitespace-normal',
+    shadowElement: 'shr-absolute shr-w-full shr-top-0 shr-left-0',
+  },
   variants: {
     maxLines: {
-      1: 'shr-inline-block shr-w-full shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap shr-align-middle',
-      2: 'shr-line-clamp-[2]',
-      3: 'shr-line-clamp-[3]',
-      4: 'shr-line-clamp-[4]',
-      5: 'shr-line-clamp-[5]',
-      6: 'shr-line-clamp-[6]',
+      1: {
+        clampedLine:
+          'shr-inline-block shr-w-full shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap shr-align-middle',
+      },
+      2: {
+        clampedLine: 'shr-line-clamp-[2]',
+      },
+      3: {
+        clampedLine: 'shr-line-clamp-[3]',
+      },
+      4: {
+        clampedLine: 'shr-line-clamp-[4]',
+      },
+      5: {
+        clampedLine: 'shr-line-clamp-[5]',
+      },
+      6: {
+        clampedLine: 'shr-line-clamp-[6]',
+      },
     },
   },
+  compoundVariants: [
+    {
+      maxLines: [2, 3, 4, 5, 6],
+      className: {
+        // baseがdisplay:-webkit-boxでないと高さ取得用の要素が表示部分と同じ大きさで表示されないバグを回避するため
+        base: '[display:-webkit-box]',
+      },
+    },
+  ],
 })
 
 export const LineClamp: FC<Props & ElementProps> = ({
@@ -34,30 +62,55 @@ export const LineClamp: FC<Props & ElementProps> = ({
   className,
   ...props
 }) => {
-  if (maxLines < 1) {
-    throw new Error('"maxLines" cannot be less than 0.')
-  }
-
   const [isTooltipVisible, setTooltipVisible] = useState(false)
   const ref = useRef<HTMLSpanElement>(null)
+  const shadowRef = useRef<HTMLSpanElement>(null)
 
   const isMultiLineOverflow = () => {
     const el = ref.current
-    return el ? el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight : false
+    const shadowEl = shadowRef.current
+
+    // -webkit-line-clamp を使った要素ではel.scrollHeightとel.clientHeightの比較だと
+    // フォントの高さの計算が期待と異なり適切な高さが取得できないためshadowElと比較している
+    // 参考: https://github.com/kufu/smarthr-ui/pull/4710
+    return el && shadowEl
+      ? shadowEl.clientWidth > el.clientWidth || shadowEl.clientHeight > el.clientHeight
+      : false
   }
 
   useEffect(() => {
     setTooltipVisible(isMultiLineOverflow())
   }, [maxLines, children])
 
+  if (maxLines < 1) {
+    throw new Error('"maxLines" cannot be less than 0.')
+  }
+
+  const { baseStyle, clampedLineStyle, shadowElementWrapperStyle, shadowElementStyle } =
+    useMemo(() => {
+      const { base, clampedLine, shadowElementWrapper, shadowElement } = lineClamp({ maxLines })
+      return {
+        baseStyle: base({ className }),
+        clampedLineStyle: clampedLine(),
+        shadowElementWrapperStyle: shadowElementWrapper(),
+        shadowElementStyle: shadowElement(),
+      }
+    }, [maxLines, className])
+
   const ActualLineClamp = () => (
-    <span {...props} className={styles} ref={ref}>
-      {children}
+    <span {...props} className={baseStyle}>
+      <span className={clampedLineStyle} ref={ref}>
+        {children}
+      </span>
+      {/* 切り取られていないテキストの高さを取得するための要素 */}
+      <span aria-hidden className={shadowElementWrapperStyle}>
+        <span className={shadowElementStyle} ref={shadowRef}>
+          {children}
+        </span>
+      </span>
     </span>
   )
 
-  const styles = useMemo(() => lineClamp({ maxLines, className }), [className, maxLines])
-
   return isTooltipVisible ? (
     <Tooltip message={children} multiLine vertical="auto">
       <ActualLineClamp />

packages/smarthr-ui/src/components/LineClamp/VRTLineClamp.stories.tsx

@@ -3,6 +3,7 @@ import { userEvent, within } from '@storybook/test'
 import React from 'react'
 import styled from 'styled-components'
 
+import { Button } from '../Button'
 import { InformationPanel } from '../InformationPanel'
 
 import { LineClamp } from './LineClamp'
@@ -106,6 +107,47 @@ VRTForcedColors.parameters = {
   chromatic: { forcedColors: 'active' },
 }
 
+export const VRTLineClampInButton: StoryFn = () => (
+  <>
+    <VRTInformationPanel title="VRT 用の Story です">
+      フォントのタイプサイズがline-heightより大きいときにツールチップが表示されないことを確認します
+    </VRTInformationPanel>
+    <Wrapper>
+      <List>
+        <dt>LineClampが1行でされるボタン</dt>
+        <dd>
+          <Button style={{ width: 100 }}>
+            <LineClamp data-testid="user-focus" maxLines={1}>
+              LineClampされるボタン
+            </LineClamp>
+          </Button>
+        </dd>
+        <dt>LineClampが2行でされるボタン</dt>
+        <dd>
+          <Button style={{ textWrap: 'wrap', width: 100 }}>
+            <LineClamp data-testid="user-focus" maxLines={2}>
+              LineClampされるボタン
+            </LineClamp>
+          </Button>
+        </dd>
+        <dt>LineClampされないボタン</dt>
+        <dd>
+          <Button>
+            <LineClamp data-testid="user-focus" maxLines={1}>
+              LineClampされないボタン
+            </LineClamp>
+          </Button>
+        </dd>
+      </List>
+    </Wrapper>
+  </>
+)
+VRTLineClampInButton.play = async ({ canvasElement }) => {
+  await new Promise((resolve) => setTimeout(resolve, 500)) // スナップショット時にツールチップを確実に表示させるため
+  const tooltips = canvasElement.querySelectorAll('.smarthr-ui-Tooltip')
+  tooltips.forEach((tooltip) => userEvent.hover(tooltip))
+}
+
 const VRTInformationPanel = styled(InformationPanel)`
   margin-bottom: 24px;
 `