Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Stepperのmarkupを整える #5418

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+33 −30
Open

chore: Stepperのmarkupを整える #5418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c968214
chore: HorizontalStepperはheadingを持つ必要性がないため調整する
AtsushiM Feb 27, 2025
f21f283
chore: テストする際、within_sectionなどでStepを指定できるよう、SectioningFragmentではなくSec…
AtsushiM Feb 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 28 additions & 25 deletions packages/smarthr-ui/src/components/Stepper/HorizontalStepItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React, { useMemo } from 'react'
import { tv } from 'tailwind-variants'

import { Heading } from '../Heading'
import { SectioningFragment } from '../SectioningContent/SectioningContent'
import { Text } from '../Text'

import { StepCounter } from './StepCounter'

Expand All @@ -15,7 +14,7 @@ const classNameGenerator = tv({
// 長いステップ名が来ても等幅にする
'shr-flex-1',
],
headingWrapper: 'shr-flex shr-flex-col shr-items-center shr-gap-0.5',
labelWrapper: 'shr-flex shr-flex-col shr-items-center shr-gap-0.5',
stepCounterWrapper: 'shr-self-stretch shr-flex shr-items-center',
beforeLine: [
'group-first/stepItem:shr-bg-transparent',
Expand All @@ -28,7 +27,7 @@ const classNameGenerator = tv({
'shr-grow shr-h-[theme(borderWidth.2)] shr-bg-border',
'forced-colors:shr-bg-[ButtonBorder]',
],
heading: 'shr-px-0.25 shr-text-sm shr-text-center',
label: 'shr-px-0.25 shr-text-sm shr-text-center',
},
variants: {
status: {
Expand All @@ -39,7 +38,7 @@ const classNameGenerator = tv({
},
current: {
true: {
heading: 'shr-font-bold',
label: 'shr-font-bold',
},
false: {},
},
Expand All @@ -55,7 +54,7 @@ const classNameGenerator = tv({
status: ['completed', 'closed'],
current: false,
className: {
heading: 'shr-text-grey',
label: 'shr-text-grey',
},
},
],
Expand All @@ -73,37 +72,41 @@ type Props = HorizontalStep & {
export const HorizontalStepItem = React.memo<Props>(
({ stepNumber, label, status, current, isPrevStepCompleted }) => {
const classNames = useMemo(() => {
const { wrapper, headingWrapper, stepCounterWrapper, beforeLine, afterLine, heading } =
classNameGenerator({
status: typeof status === 'object' ? status.type : status,
current,
isPrevStepCompleted,
})
const {
wrapper,
labelWrapper,
stepCounterWrapper,
beforeLine,
afterLine,
label: labelText,
} = classNameGenerator({
status: typeof status === 'object' ? status.type : status,
current,
isPrevStepCompleted,
})

return {
wrapper: wrapper(),
headingWrapper: headingWrapper(),
labelWrapper: labelWrapper(),
stepCounterWrapper: stepCounterWrapper(),
beforeLine: beforeLine(),
afterLine: afterLine(),
heading: heading(),
label: labelText(),
}
}, [current, isPrevStepCompleted, status])

return (
<li aria-current={current ? 'step' : undefined} className={classNames.wrapper}>
<SectioningFragment>
<div className={classNames.headingWrapper}>
<div className={classNames.stepCounterWrapper}>
<span className={classNames.beforeLine} />
<StepCounter status={status} current={current} stepNumber={stepNumber} />
<span className={classNames.afterLine} />
</div>
<Heading type="sectionTitle" className={classNames.heading}>
{label}
</Heading>
<div className={classNames.labelWrapper}>
<div className={classNames.stepCounterWrapper}>
<span className={classNames.beforeLine} />
<StepCounter status={status} current={current} stepNumber={stepNumber} />
<span className={classNames.afterLine} />
</div>
</SectioningFragment>
<Text styleType="sectionTitle" className={classNames.label}>
{label}
</Text>
Comment on lines -102 to +108
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Headingの内容に当たるものがHorizontal(横方向)のStepperには存在しないため、Textに変更しました

</div>
</li>
)
},
Expand Down
10 changes: 5 additions & 5 deletions packages/smarthr-ui/src/components/Stepper/VerticalStepItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { type FC, type PropsWithChildren, useMemo } from 'react'
import React, { type FC, type PropsWithChildren, memo, useMemo } from 'react'
import { tv } from 'tailwind-variants'

import { Heading } from '../Heading'
import { SectioningFragment } from '../SectioningContent/SectioningContent'
import { Section } from '../SectioningContent/SectioningContent'

import { StepCounter } from './StepCounter'

Expand Down Expand Up @@ -74,7 +74,7 @@ export const VerticalStepItem: FC<Props> = ({ stepNumber, label, status, childre

return (
<li aria-current={current ? 'step' : undefined} className={classNames.wrapper}>
<SectioningFragment>
<Section>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

liごとに暗黙のoutlineが切られることになるため、このままでも大きな問題にはなりません。
が、実用上SectioningFragmentとSectionでレンダリングコストがほぼ変わらないこと、テストを書く際の within_section のように特定の構造に対するテストなどが書きづらいため、Sectionに変更しました

<StepHeading
status={status}
current={current}
Expand All @@ -87,12 +87,12 @@ export const VerticalStepItem: FC<Props> = ({ stepNumber, label, status, childre
<div className={classNames.body}>
<div className={classNames.inner}>{children}</div>
</div>
</SectioningFragment>
</Section>
</li>
)
}

const StepHeading = React.memo<
const StepHeading = memo<
Pick<Props, 'status' | 'current' | 'stepNumber'> &
PropsWithChildren<{ className: string; headingClassName: string }>
>(({ status, current, stepNumber, children, className, headingClassName }) => (
Expand Down