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

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

@@ -15,15 +15,39 @@ 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: {
+        base: '[display:-webkit-box]',
+        clampedLine: 'shr-line-clamp-[2]',
+      },
+      3: {
+        base: '[display:-webkit-box]',
+        clampedLine: 'shr-line-clamp-[3]',
+      },
+      4: {
+        base: '[display:-webkit-box]',
+        clampedLine: 'shr-line-clamp-[4]',
+      },
+      5: {
+        base: '[display:-webkit-box]',
+        clampedLine: 'shr-line-clamp-[5]',
+      },
+      6: {
+        base: '[display:-webkit-box]',
+        clampedLine: 'shr-line-clamp-[6]',
+      },
     },
   },
 })
@@ -34,30 +58,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,55 @@ VRTForcedColors.parameters = {
   chromatic: { forcedColors: 'active' },
 }
 
+export const VRTLineClampInButton: StoryFn = () => (
+  <>
+    <VRTInformationPanel title="VRT 用の Story です">
+      タイプサイズがline-heightより大きいフォントを設定した時にツールチップが表示されないことを確認します
+    </VRTInformationPanel>
+    <Wrapper>
+      <List>
+        <dt>LineClampされるボタン</dt>
+        <dd style={{ fontFamily: 'Zapfino' }}>
+          <Button style={{ width: 100 }}>
+            <LineClamp data-testid="user-focus" maxLines={1}>
+              LineClampされるボタン
+            </LineClamp>
+          </Button>
+        </dd>
+        <dt>LineClampされないボタン</dt>
+        <dd style={{ fontFamily: 'Zapfino' }}>
+          <Button>
+            <LineClamp data-testid="user-focus" maxLines={1}>
+              LineClampされないボタン
+            </LineClamp>
+          </Button>
+        </dd>
+        <dt>LineClampされる2行まで入るボタン</dt>
+        <dd style={{ fontFamily: 'Zapfino' }}>
+          <Button style={{ textWrap: 'wrap', width: 100 }}>
+            <LineClamp data-testid="user-focus" maxLines={2}>
+              LineClampされるボタン
+            </LineClamp>
+          </Button>
+        </dd>
+        <dt>LineClampされない2行まで入るボタン</dt>
+        <dd style={{ fontFamily: 'Zapfino' }}>
+          <Button>
+            <LineClamp data-testid="user-focus" maxLines={2}>
+              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;
 `