From d21c8881b933cd3674fc931af36bfafbb8498a6b Mon Sep 17 00:00:00 2001 From: nabeliwo Date: Fri, 21 Jun 2024 16:32:10 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20Heading=20=E3=81=A8=20Text=20=E3=81=AE?= =?UTF-8?q?=E7=9B=B8=E4=BA=92=E5=8F=82=E7=85=A7=E3=82=92=E3=81=AA=E3=81=8F?= =?UTF-8?q?=E3=81=97=E3=81=A6=20Text=20=E3=81=8C=20Heading=20=E3=81=AB?= =?UTF-8?q?=E4=BE=9D=E5=AD=98=E3=81=97=E3=81=AA=E3=81=84=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB=E3=81=99=E3=82=8B=20(#4732)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: Heading 側の変数を Text に移して相互参照が起きないようにする * fix: import のミスを修正 --- .../AccordionPanel/AccordionPanelTrigger.tsx | 5 ++- .../components/FormControl/FormControl.tsx | 5 +-- .../src/components/Heading/Heading.tsx | 43 ++----------------- .../src/components/Heading/index.ts | 2 +- .../smarthr-ui/src/components/Text/Text.tsx | 43 +++++++++++++++++-- .../smarthr-ui/src/components/Text/index.ts | 2 +- 6 files changed, 49 insertions(+), 51 deletions(-) diff --git a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelTrigger.tsx b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelTrigger.tsx index e36140aa2e..0945b48dae 100644 --- a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelTrigger.tsx +++ b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelTrigger.tsx @@ -9,9 +9,10 @@ import React, { import { tv } from 'tailwind-variants' import { getIsInclude, mapToKeyArray } from '../../libs/map' -import { Heading, HeadingTagTypes, HeadingTypes } from '../Heading' +import { Heading, HeadingTagTypes } from '../Heading' import { FaCaretDownIcon, FaCaretRightIcon } from '../Icon' import { Cluster } from '../Layout' +import { TextProps } from '../Text' import { AccordionPanelContext } from './AccordionPanel' import { AccordionPanelItemContext } from './AccordionPanelItem' @@ -19,7 +20,7 @@ import { getNewExpandedItems } from './accordionPanelHelper' type Props = PropsWithChildren<{ /** ヘッダ部分のテキストのスタイル */ - headingType?: HeadingTypes + headingType?: TextProps['styleType'] /** * @deprecated headingTag属性は非推奨です */ diff --git a/packages/smarthr-ui/src/components/FormControl/FormControl.tsx b/packages/smarthr-ui/src/components/FormControl/FormControl.tsx index 9a29751bfc..f9db226bd2 100644 --- a/packages/smarthr-ui/src/components/FormControl/FormControl.tsx +++ b/packages/smarthr-ui/src/components/FormControl/FormControl.tsx @@ -13,14 +13,13 @@ import { useId } from '../../hooks/useId' import { MultiComboBox, SingleComboBox } from '../ComboBox' import { DatePicker } from '../DatePicker' import { DropZone } from '../DropZone' -import { HeadingTypes } from '../Heading' import { FaCircleExclamationIcon } from '../Icon' import { CurrencyInput, Input } from '../Input' import { InputFile } from '../InputFile' import { Cluster, Stack } from '../Layout' import { Select } from '../Select' import { StatusLabel } from '../StatusLabel' -import { Text } from '../Text' +import { Text, TextProps } from '../Text' import { Textarea } from '../Textarea' import { visuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText' @@ -31,7 +30,7 @@ type Props = PropsWithChildren<{ /** グループのタイトル名 */ title: ReactNode /** タイトルの見出しのタイプ */ - titleType?: HeadingTypes + titleType?: TextProps['styleType'] /** タイトルの見出しを視覚的に隠すかどうか */ dangerouslyTitleHidden?: boolean /** label 要素に適用する `htmlFor` 値 */ diff --git a/packages/smarthr-ui/src/components/Heading/Heading.tsx b/packages/smarthr-ui/src/components/Heading/Heading.tsx index 17f38d1a49..613fda139f 100644 --- a/packages/smarthr-ui/src/components/Heading/Heading.tsx +++ b/packages/smarthr-ui/src/components/Heading/Heading.tsx @@ -2,12 +2,12 @@ import React, { ComponentProps, FC, PropsWithChildren, useContext, useMemo } fro import { tv } from 'tailwind-variants' import { LevelContext } from '../SectioningContent' -import { Text, TextProps } from '../Text' +import { STYLE_TYPE_MAP, Text, TextProps } from '../Text' import { VisuallyHiddenText } from '../VisuallyHiddenText' export type Props = PropsWithChildren<{ /** テキストのスタイル */ - type?: HeadingTypes + type?: TextProps['styleType'] /** * @deprecated SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定してください */ @@ -16,13 +16,6 @@ export type Props = PropsWithChildren<{ visuallyHidden?: boolean }> -export type HeadingTypes = - | 'screenTitle' - | 'sectionTitle' - | 'blockTitle' - | 'subBlockTitle' - | 'subSubBlockTitle' - export type HeadingTagTypes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' type ElementProps = Omit< @@ -30,36 +23,6 @@ type ElementProps = Omit< keyof Props | keyof TextProps | 'role' | 'aria-level' > -export const MAPPER_SIZE_AND_WEIGHT: { [key in HeadingTypes]: TextProps } = { - screenTitle: { - size: 'XL', - leading: 'TIGHT', - weight: 'normal', - }, - sectionTitle: { - size: 'L', - leading: 'TIGHT', - weight: 'normal', - }, - blockTitle: { - size: 'M', - leading: 'TIGHT', - weight: 'bold', - }, - subBlockTitle: { - size: 'M', - leading: 'TIGHT', - weight: 'bold', - color: 'TEXT_GREY', - }, - subSubBlockTitle: { - size: 'S', - leading: 'TIGHT', - weight: 'bold', - color: 'TEXT_GREY', - }, -} - const generateTagProps = (level: number, tag?: HeadingTagTypes) => { let role = undefined let ariaLevel = undefined @@ -101,7 +64,7 @@ export const Heading: FC = ({ const styles = useMemo(() => heading({ visuallyHidden, className }), [className, visuallyHidden]) const actualProps = { ...props, - ...MAPPER_SIZE_AND_WEIGHT[type], + ...STYLE_TYPE_MAP[type], ...tagProps, className: styles, } diff --git a/packages/smarthr-ui/src/components/Heading/index.ts b/packages/smarthr-ui/src/components/Heading/index.ts index 756b85b3ee..df2c87b1ba 100644 --- a/packages/smarthr-ui/src/components/Heading/index.ts +++ b/packages/smarthr-ui/src/components/Heading/index.ts @@ -1,2 +1,2 @@ export { PageHeading, Heading } from './Heading' -export type { Props, HeadingTypes, HeadingTagTypes } from './Heading' +export type { Props, HeadingTagTypes } from './Heading' diff --git a/packages/smarthr-ui/src/components/Text/Text.tsx b/packages/smarthr-ui/src/components/Text/Text.tsx index 3d3c22b074..4628275e58 100644 --- a/packages/smarthr-ui/src/components/Text/Text.tsx +++ b/packages/smarthr-ui/src/components/Text/Text.tsx @@ -1,7 +1,42 @@ import React, { ComponentProps, PropsWithChildren, useMemo } from 'react' import { VariantProps, tv } from 'tailwind-variants' -import { HeadingTypes, MAPPER_SIZE_AND_WEIGHT } from '../Heading/Heading' +type StyleType = + | 'screenTitle' + | 'sectionTitle' + | 'blockTitle' + | 'subBlockTitle' + | 'subSubBlockTitle' + +export const STYLE_TYPE_MAP: { [key in StyleType]: VariantProps } = { + screenTitle: { + size: 'XL', + leading: 'TIGHT', + weight: 'normal', + }, + sectionTitle: { + size: 'L', + leading: 'TIGHT', + weight: 'normal', + }, + blockTitle: { + size: 'M', + leading: 'TIGHT', + weight: 'bold', + }, + subBlockTitle: { + size: 'M', + leading: 'TIGHT', + weight: 'bold', + color: 'TEXT_GREY', + }, + subSubBlockTitle: { + size: 'S', + leading: 'TIGHT', + weight: 'bold', + color: 'TEXT_GREY', + }, +} const text = tv({ variants: { @@ -51,8 +86,8 @@ export type TextProps = VariantProps & { as?: string | React.ComponentType | undefined /** 強調するかどうかの真偽値。指定すると em 要素になる */ emphasis?: boolean - /** 見た目の種類。Heading の種類と同じ */ - styleType?: HeadingTypes + /** 見た目の種類 */ + styleType?: StyleType } export const Text: React.FC>> = ({ @@ -63,7 +98,7 @@ export const Text: React.FC ...props }) => { const { size, italic, color, leading, whiteSpace, className, ...others } = props - const styleTypeValues = styleType ? MAPPER_SIZE_AND_WEIGHT[styleType] : null + const styleTypeValues = styleType ? STYLE_TYPE_MAP[styleType] : null const styles = useMemo( () => diff --git a/packages/smarthr-ui/src/components/Text/index.ts b/packages/smarthr-ui/src/components/Text/index.ts index 6655d8e337..83cf0efa19 100644 --- a/packages/smarthr-ui/src/components/Text/index.ts +++ b/packages/smarthr-ui/src/components/Text/index.ts @@ -1,3 +1,3 @@ -export { Text } from './Text' +export { Text, STYLE_TYPE_MAP } from './Text' export { RangeSeparator } from './RangeSeparator' export type { TextProps } from './Text'