From e6f93337b70f831ac452bd58ff0c39a3ce3351cc Mon Sep 17 00:00:00 2001 From: Qs-F Date: Mon, 10 Jun 2024 19:05:53 +0900 Subject: [PATCH 01/12] =?UTF-8?q?fix(LineClamp):=20=E8=A1=A8=E7=A4=BA?= =?UTF-8?q?=E3=81=95=E3=82=8C=E3=81=A6=E3=81=84=E3=82=8B=E8=A1=8C=E6=95=B0?= =?UTF-8?q?=E3=81=8C=E6=9C=80=E5=A4=A7=E8=A1=8C=E6=95=B0=E4=BB=A5=E4=B8=8B?= =?UTF-8?q?=E3=81=AE=E3=81=A8=E3=81=8D=E3=81=ABTooltip=E3=82=92=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E3=81=97=E3=81=AA=E3=81=84=E3=82=88=E3=81=86=E3=81=AB?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/LineClamp/LineClamp.tsx | 38 ++++++++++++++----- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx b/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx index 77bcb5195e..c7b97cf69a 100644 --- a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx +++ b/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx @@ -14,8 +14,11 @@ import { Tooltip } from '../Tooltip' type Props = PropsWithChildren> type ElementProps = Omit, keyof Props> +const root = tv({ + base: 'smarthr-ui-LineClamp shr-relative', +}) + const lineClamp = tv({ - base: 'smarthr-ui-LineClamp', variants: { maxLines: { 1: 'shr-inline-block shr-w-full shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap shr-align-middle', @@ -34,30 +37,45 @@ export const LineClamp: FC = ({ className, ...props }) => { - if (maxLines < 1) { - throw new Error('"maxLines" cannot be less than 0.') - } - const [isTooltipVisible, setTooltipVisible] = useState(false) const ref = useRef(null) + const shadowRef = useRef(null) const isMultiLineOverflow = () => { const el = ref.current - return el ? el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight : false + const shadowEl = shadowRef.current + return el && shadowEl + ? el.scrollWidth > 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 lineClampStyles = useMemo(() => lineClamp({ maxLines }), [maxLines]) + const rootStyles = useMemo(() => root({ className }), [className]) + const ActualLineClamp = () => ( - - {children} + + + {children} + + {/* 切り取られていないテキストの高さを取得するための要素 */} + + {children} + ) - const styles = useMemo(() => lineClamp({ maxLines, className }), [className, maxLines]) - return isTooltipVisible ? ( From abe5845f0e4041c278ef68ec8c0e31d9f0e3e36e Mon Sep 17 00:00:00 2001 From: Qs-F Date: Mon, 10 Jun 2024 19:28:56 +0900 Subject: [PATCH 02/12] =?UTF-8?q?fix:=20props=E3=82=92=E6=B8=A1=E3=81=99?= =?UTF-8?q?=E8=A6=81=E7=B4=A0=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx b/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx index c7b97cf69a..d23cdfc647 100644 --- a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx +++ b/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx @@ -61,10 +61,8 @@ export const LineClamp: FC = ({ const rootStyles = useMemo(() => root({ className }), [className]) const ActualLineClamp = () => ( - - - {children} - + + {children} {/* 切り取られていないテキストの高さを取得するための要素 */} Date: Thu, 11 Jul 2024 10:02:55 +0900 Subject: [PATCH 03/12] fix(LineClamp): Fix to remove unexpected scroll area expansion --- .../src/components/LineClamp/LineClamp.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx b/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx index d23cdfc647..f41073cf82 100644 --- a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx +++ b/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx @@ -45,7 +45,7 @@ export const LineClamp: FC = ({ const el = ref.current const shadowEl = shadowRef.current return el && shadowEl - ? el.scrollWidth > el.clientWidth || shadowEl.clientHeight > el.clientHeight + ? shadowEl.clientWidth > el.clientWidth || shadowEl.clientHeight > el.clientHeight : false } @@ -61,15 +61,18 @@ export const LineClamp: FC = ({ const rootStyles = useMemo(() => root({ className }), [className]) const ActualLineClamp = () => ( - - {children} + + + {children} + {/* 切り取られていないテキストの高さを取得するための要素 */} - {children} + + {children} + ) From f2dc9100f8d52b13368f9070c112ef7ed13ae464 Mon Sep 17 00:00:00 2001 From: Qs-F Date: Thu, 11 Jul 2024 19:50:36 +0900 Subject: [PATCH 04/12] fix(LineClamp): fix to use tailwind-variants slots option --- .../src/components/LineClamp/LineClamp.tsx | 67 +++++++++++++------ 1 file changed, 47 insertions(+), 20 deletions(-) diff --git a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx b/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx index f41073cf82..14f594202c 100644 --- a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx +++ b/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx @@ -14,19 +14,35 @@ import { Tooltip } from '../Tooltip' type Props = PropsWithChildren> type ElementProps = Omit, keyof Props> -const root = tv({ - base: 'smarthr-ui-LineClamp shr-relative', -}) - const lineClamp = tv({ + slots: { + base: 'smarthr-ui-LineClamp shr-relative', + clampedLine: '', + 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]', + }, }, }, }) @@ -57,20 +73,31 @@ export const LineClamp: FC = ({ throw new Error('"maxLines" cannot be less than 0.') } - const lineClampStyles = useMemo(() => lineClamp({ maxLines }), [maxLines]) - const rootStyles = useMemo(() => root({ className }), [className]) + 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 = () => ( - - + + {children} - {/* 切り取られていないテキストの高さを取得するための要素 */} - - + {/* + 切り取られていないテキストの高さを取得するための要素 + -webkit-line-clamp を使った要素ではjsのscrollHeightとclientHeightがフォントによっては + 予期しない余白分が発生してしまい適切な高さが取得できないため + この要素で取得した高さを元にTooltipの表示を切り替えている + 参考: https://github.com/kufu/smarthr-ui/pull/4710 + */} + + {children} From 2d7879a8faafe8bb00217100443402046d90579c Mon Sep 17 00:00:00 2001 From: Qs-F Date: Fri, 12 Jul 2024 08:35:02 +0900 Subject: [PATCH 05/12] fix(LineClamp): add comment why comparing el and shadowEl size --- .../src/components/LineClamp/LineClamp.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx b/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx index 14f594202c..7254e9d295 100644 --- a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx +++ b/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx @@ -60,6 +60,10 @@ export const LineClamp: FC = ({ const isMultiLineOverflow = () => { const el = ref.current 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 @@ -89,13 +93,7 @@ export const LineClamp: FC = ({ {children} - {/* - 切り取られていないテキストの高さを取得するための要素 - -webkit-line-clamp を使った要素ではjsのscrollHeightとclientHeightがフォントによっては - 予期しない余白分が発生してしまい適切な高さが取得できないため - この要素で取得した高さを元にTooltipの表示を切り替えている - 参考: https://github.com/kufu/smarthr-ui/pull/4710 - */} + {/* 切り取られていないテキストの高さを取得するための要素 */} {children} From f94fc10df02eff6c25f14e2d7e151f89cc1885b0 Mon Sep 17 00:00:00 2001 From: Qs-F Date: Tue, 16 Jul 2024 13:18:29 +0900 Subject: [PATCH 06/12] test(LineClamp): add VRT for LineClamp in Button --- .../LineClamp/VRTLineClamp.stories.tsx | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/smarthr-ui/src/components/LineClamp/VRTLineClamp.stories.tsx b/packages/smarthr-ui/src/components/LineClamp/VRTLineClamp.stories.tsx index 373f65bdf9..6d445ca696 100644 --- 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,32 @@ VRTForcedColors.parameters = { chromatic: { forcedColors: 'active' }, } +export const VRTLineClampInButton: StoryFn = () => ( + <> + + タイプサイズがline-heightより大きいフォントを設定した時にツールチップが表示されないことを確認します + + + +
focus
+
+ +
+ + + +) +VRTLineClampInButton.play = async ({ canvasElement }) => { + await new Promise((resolve) => setTimeout(resolve, 500)) // スナップショット時にツールチップを確実に表示させるため + const canvas = await within(canvasElement) + const target = await canvas.getByTestId('user-focus1').parentElement! // tabIndexがあるのは親要素 + await target.focus() +} + const VRTInformationPanel = styled(InformationPanel)` margin-bottom: 24px; ` From 99701df3ee38bac3317d9c88fe4afb60c02413d8 Mon Sep 17 00:00:00 2001 From: Qs-F Date: Wed, 17 Jul 2024 11:22:01 +0900 Subject: [PATCH 07/12] test(LineClamp): fix VRT story --- .../LineClamp/VRTLineClamp.stories.tsx | 31 ++++++++++++++++--- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/packages/smarthr-ui/src/components/LineClamp/VRTLineClamp.stories.tsx b/packages/smarthr-ui/src/components/LineClamp/VRTLineClamp.stories.tsx index 6d445ca696..8b031ec58b 100644 --- a/packages/smarthr-ui/src/components/LineClamp/VRTLineClamp.stories.tsx +++ b/packages/smarthr-ui/src/components/LineClamp/VRTLineClamp.stories.tsx @@ -114,7 +114,15 @@ export const VRTLineClampInButton: StoryFn = () => ( -
focus
+
LineClampされるボタン
+
+ +
+
LineClampされないボタン
+
LineClampされるボタン
+
+ +
+
LineClampされないボタン
+
+ +
) VRTLineClampInButton.play = async ({ canvasElement }) => { await new Promise((resolve) => setTimeout(resolve, 500)) // スナップショット時にツールチップを確実に表示させるため - const canvas = await within(canvasElement) - const target = await canvas.getByTestId('user-focus1').parentElement! // tabIndexがあるのは親要素 - await target.focus() + const tooltips = canvasElement.querySelectorAll('.smarthr-ui-Tooltip') + tooltips.forEach((tooltip) => userEvent.hover(tooltip)) } const VRTInformationPanel = styled(InformationPanel)` From 68e280a5fdb33d2d8ae3703f8c88168cd15e1369 Mon Sep 17 00:00:00 2001 From: Qs-F Date: Thu, 18 Jul 2024 11:19:21 +0900 Subject: [PATCH 08/12] fix(LineClamp): fix when lines are more than 2 --- packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx b/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx index 7254e9d295..6ec8fe2c20 100644 --- a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx +++ b/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx @@ -29,18 +29,23 @@ const lineClamp = tv({ '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]', }, }, From 3c31b3ae98cccd4afc2681493fd3bb151e58bdb9 Mon Sep 17 00:00:00 2001 From: Qs-F Date: Thu, 18 Jul 2024 11:28:28 +0900 Subject: [PATCH 09/12] fix(LineClamp): fix to clamp --- packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx b/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx index 6ec8fe2c20..68384026bc 100644 --- a/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx +++ b/packages/smarthr-ui/src/components/LineClamp/LineClamp.tsx @@ -17,7 +17,7 @@ type ElementProps = Omit, keyof Props> const lineClamp = tv({ slots: { base: 'smarthr-ui-LineClamp shr-relative', - clampedLine: '', + 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', From 6ebd7bda318bf370203c3200060d71ec5b20dad3 Mon Sep 17 00:00:00 2001 From: Qs-F Date: Thu, 18 Jul 2024 13:10:12 +0900 Subject: [PATCH 10/12] test(LineClamp): fix section name --- .../src/components/LineClamp/VRTLineClamp.stories.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/smarthr-ui/src/components/LineClamp/VRTLineClamp.stories.tsx b/packages/smarthr-ui/src/components/LineClamp/VRTLineClamp.stories.tsx index 8b031ec58b..06ebcf4b4d 100644 --- a/packages/smarthr-ui/src/components/LineClamp/VRTLineClamp.stories.tsx +++ b/packages/smarthr-ui/src/components/LineClamp/VRTLineClamp.stories.tsx @@ -118,7 +118,7 @@ export const VRTLineClampInButton: StoryFn = () => (
@@ -130,15 +130,15 @@ export const VRTLineClampInButton: StoryFn = () => ( -
LineClampされるボタン
+
LineClampされる2行まで入るボタン
-
-
LineClampされないボタン
+
LineClampされない2行まで入るボタン
-
LineClampされないボタン
-
- -
-
LineClampされる2行まで入るボタン
-
+
LineClampが2行でされるボタン
+
-
LineClampされない2行まで入るボタン
-
+
LineClampされないボタン
+