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

fix(Button): disabled の説明が不用意に折り返されないように見直し #5132

Merged
merged 1 commit into from
Nov 25, 2024
+16 −12
Merged

fix(Button): disabled の説明が不用意に折り返されないように見直し #5132

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
28 changes: 16 additions & 12 deletions packages/smarthr-ui/src/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import { tv } from 'tailwind-variants'

import { usePortal } from '../../hooks/usePortal'
import { DecoratorsType } from '../../types'
import { FaInfoCircleIcon } from '../Icon'
import { Cluster } from '../Layout'
import { FaCircleInfoIcon } from '../Icon'
import { Loader } from '../Loader'
import { Tooltip } from '../Tooltip'
import { VisuallyHiddenText } from '../VisuallyHiddenText'
Expand All @@ -18,11 +17,16 @@ type ElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProp
const buttonStyle = tv({
slots: {
wrapper: 'smarthr-ui-Button',
loader:
'shr-align-bottom [&&&_.smarthr-ui-Loader-spinner]:shr-h-em [&&&_.smarthr-ui-Loader-spinner]:shr-w-em',
disabledWrapper: 'smarthr-ui-Button-disabledWrapper',
loader: [
'shr-align-bottom',
'[&_.smarthr-ui-Loader-spinner]:shr-h-em [&_.smarthr-ui-Loader-spinner]:shr-w-em',
],
disabledWrapper: [
'smarthr-ui-Button-disabledWrapper',
'shr-inline-flex shr-items-center shr-gap-0.25',
],
disabledTooltip: [
'[&&&]:shr-overflow-y-visible',
'shr-overflow-y-visible',
/* Tooltip との距離を変えずに反応範囲を広げるために negative space を使う */
'[&_.smarthr-ui-Icon]:-shr-m-0.25',
/* global styleなどでborder-boxが適用されている場合表示崩れを起こす為、content-boxを指定する */
Expand All @@ -34,12 +38,12 @@ const buttonStyle = tv({
variants: {
isSecondary: {
true: {
loader: '[&&&_.smarthr-ui-Loader-line]:shr-border-disabled',
loader: '[&_.smarthr-ui-Loader-line]:shr-border-disabled',
},
false: {
loader: [
'[&&&_.smarthr-ui-Loader-line]:shr-border-white/50',
'[&&&_.smarthr-ui-Loader-line]:forced-colors:shr-border-[ButtonBorder]',
'[&_.smarthr-ui-Loader-line]:shr-border-white/50',
'[&_.smarthr-ui-Loader-line]:forced-colors:shr-border-[ButtonBorder]',
],
},
},
Expand Down Expand Up @@ -115,10 +119,10 @@ export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & P
)

if (disabled && disabledDetail) {
const DisabledDetailIcon = disabledDetail.icon || FaInfoCircleIcon
const DisabledDetailIcon = disabledDetail.icon || FaCircleInfoIcon

return (
<Cluster inline align="center" gap={0.25} className={disabledWrapper()}>
<div className={disabledWrapper()}>
{button}
<Tooltip
message={disabledDetail.message}
Expand All @@ -129,7 +133,7 @@ export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & P
>
<DisabledDetailIcon />
</Tooltip>
</Cluster>
</div>
)
}

Expand Down