Merge branch 'refs/heads/master' into HEAD

kufu · Jul 23, 2024 · 9cee00f · 9cee00f
2 parents 54b1e16 + a6f53a9
commit 9cee00f
Show file tree

Hide file tree

Showing 21 changed files with 1,316 additions and 1,146 deletions.
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx --no-install commitlint --edit "$1"
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "eslint": "^8.57.0",
     "eslint-config-smarthr": "^6.33.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "husky": "^9.0.11",
+    "husky": "^9.1.1",
     "lint-staged": "^15.2.7",
     "prettier": "^3.3.3",
     "prettier-config-smarthr": "^1.0.0",
@@ -27,7 +27,7 @@
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "prepare": "husky"
   },
-  "packageManager": "pnpm@9.5.0",
+  "packageManager": "pnpm@9.6.0",
   "pnpm": {
     "overrides": {
       "@babel/helper-compilation-targets": "^7.24.8",

diff --git a/packages/smarthr-ui/.storybook/preview.tsx b/packages/smarthr-ui/.storybook/preview.tsx
@@ -38,6 +38,7 @@ const preview: Preview = {
           'Page Templates（ページテンプレート）',
           'States（状態）',
           'Text（テキスト）',
+          'Hooks',
           'Experimental（実験的）',
         ],
       },

diff --git a/packages/smarthr-ui/package.json b/packages/smarthr-ui/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "@smarthr/wareki": "^1.2.0",
     "css-loader": "^7.1.2",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.12",
     "lodash.merge": "^4.6.2",
     "lodash.range": "^3.2.0",
     "polished": "^4.3.0",
@@ -17,38 +17,38 @@
     "react-transition-group": "^4.4.5",
     "style-loader": "^4.0.0",
     "tailwind-variants": "^0.2.1",
-    "tailwindcss": "^3.4.4"
+    "tailwindcss": "^3.4.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.8",
+    "@babel/core": "^7.24.9",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@storybook/addon-a11y": "^8.2.2",
-    "@storybook/addon-actions": "^8.2.2",
-    "@storybook/addon-essentials": "^8.2.2",
-    "@storybook/addon-interactions": "^8.2.2",
-    "@storybook/addon-storysource": "^8.2.2",
+    "@storybook/addon-a11y": "^8.2.5",
+    "@storybook/addon-actions": "^8.2.5",
+    "@storybook/addon-essentials": "^8.2.5",
+    "@storybook/addon-interactions": "^8.2.5",
+    "@storybook/addon-storysource": "^8.2.5",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addon-viewport": "^8.2.2",
+    "@storybook/addon-viewport": "^8.2.5",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.2.2",
-    "@storybook/cli": "^8.2.2",
-    "@storybook/manager-api": "^8.2.2",
-    "@storybook/react": "^8.2.2",
-    "@storybook/react-webpack5": "^8.2.2",
-    "@storybook/source-loader": "^8.2.2",
-    "@storybook/test": "^8.2.2",
-    "@storybook/test-runner": "^0.19.0",
-    "@storybook/theming": "^8.2.2",
-    "@swc/core": "^1.6.13",
+    "@storybook/blocks": "^8.2.5",
+    "@storybook/cli": "^8.2.5",
+    "@storybook/manager-api": "^8.2.5",
+    "@storybook/react": "^8.2.5",
+    "@storybook/react-webpack5": "^8.2.5",
+    "@storybook/source-loader": "^8.2.5",
+    "@storybook/test": "^8.2.5",
+    "@storybook/test-runner": "^0.19.1",
+    "@storybook/theming": "^8.2.5",
+    "@swc/core": "^1.7.0",
     "@swc/jest": "^0.2.36",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/lodash.merge": "^4.6.9",
     "@types/lodash.range": "^3.2.9",
-    "@types/node": "^20.14.10",
+    "@types/node": "^20.14.11",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-test-renderer": "^17.0.9",
@@ -59,7 +59,7 @@
     "babel-loader": "^9.1.3",
     "babel-plugin-polyfill-corejs2": "^0.4.11",
     "babel-plugin-polyfill-regenerator": "^0.6.2",
-    "chromatic": "^11.5.5",
+    "chromatic": "^11.5.6",
     "ecma-version-validator-webpack-plugin": "^1.2.1",
     "fs-extra": "^11.2.0",
     "glob": "11.0.0",
@@ -69,19 +69,19 @@
     "jest-styled-components": "^7.2.0",
     "memory-fs": "^0.5.0",
     "npm-run-all": "^4.1.5",
-    "playwright": "^1.45.1",
+    "playwright": "^1.45.2",
     "postcss": "^8.4.39",
     "postcss-styled-syntax": "^0.6.4",
     "postcss-syntax": "^0.36.2",
-    "puppeteer": "^22.13.0",
+    "puppeteer": "^22.13.1",
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",
     "react-test-renderer": "^18.3.1",
     "rimraf": "^6.0.1",
     "standard-version": "^9.3.2",
-    "storybook": "^8.2.2",
+    "storybook": "^8.2.5",
     "storybook-addon-pseudo-states": "^3.1.1",
     "styled-components": "^5.3.11",
     "testcafe": "3.6.2",

diff --git a/packages/smarthr-ui/src/components/Button/Button.tsx b/packages/smarthr-ui/src/components/Button/Button.tsx
@@ -80,7 +80,9 @@ export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & P
     )
     const { createPortal } = usePortal()
 
-    const loader = <Loader size="s" className={loaderStyle} role="presentation" />
+    const loader = (
+      <Loader size="s" deferDisplay={false} className={loaderStyle} role="presentation" />
+    )
     const actualPrefix = !loading && prefix
     const actualSuffix = loading && !square ? loader : suffix
     const disabledOnLoading = loading || disabled

diff --git a/.../smarthr-ui/src/components/CompactInformationPanel/VRTCompactInformationPanel.stories.tsx b/.../smarthr-ui/src/components/CompactInformationPanel/VRTCompactInformationPanel.stories.tsx
@@ -9,7 +9,7 @@ import { Type } from './CompactInformationPanel.stories'
 import { CompactInformationPanel } from '.'
 
 export default {
-  title: 'Data Display（データ表示）/CompactInformationPanel',
+  title: 'Data Display（データ表示）/CompactInformationPanel（非推奨）',
   component: CompactInformationPanel,
   parameters: {
     withTheming: true,

diff --git a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
@@ -400,6 +400,7 @@ export const ModelessDialog: FC<Props & BaseElementProps> = ({
         }}
         position={position}
         bounds={draggableBounds}
+        nodeRef={wrapperRef}
       >
         <div
           {...props}

diff --git a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx b/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 />

diff --git a/packages/smarthr-ui/src/components/LineClamp/VRTLineClamp.stories.tsx b/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;
 `