-
Notifications
You must be signed in to change notification settings - Fork 142
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.
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
feat: Button
, AnchorButton
コンポーネントを追加 (SHRUI-545)
#2443
Conversation
reg-suit detected visual differences. Check this report, and review them. 🔴🔴🔴🔴 🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵 What do the circles mean?The number of circles represent the number of changed images.🔴 : Changed items, ⚪ : New items, ⚫ : Deleted items, and 🔵 Passed items How can I change the check status?If reviewers approve this PR, the reg context status will be green automatically. |
✅ Deploy Preview for smarthr-ui ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
regsuit は問題ないことを確認しました!
気になったところにコメント入れました。
${styles.disabled} | ||
|
||
/* alpha color を使用しているので、背景色と干渉させない */ | ||
background-clip: padding-box; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nits
background-clip: padding-box; | |
background-clip: padding-box; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
${styles.disabled} | ||
|
||
/* alpha color を使用しているので、背景色と干渉させない */ | ||
background-clip: padding-box; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nits
background-clip: padding-box; | |
background-clip: padding-box; |
${baseStyles} | ||
${styles.default} | ||
|
||
&:focus, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
:focus-visible
でお願いします。
&:focus, | |
&:focus-visible, |
${styles.default} | ||
text-decoration: none; | ||
|
||
&:focus, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
:focus-visible
でお願いします。
&:focus, | |
&:focus-visible, |
min-height: calc(${fontSize.S} + ${spacingByChar(1)} + (${border.lineWidth} * 2)); | ||
} | ||
|
||
&:focus { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
:focus-visible
でお願いします。
&:focus { | |
&:focus-visible { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
すみません、エスケープハッチ付け忘れてたので追加しました! e45bb55 |
Related URL
https://smarthr.atlassian.net/browse/SHRUI-545
Overview
既存のボタンコンポーネントは
PrimaryButton
,SecondaryButton
など種類毎に別コンポーネントになっていますが、コンポーネントをButton
とAnchorButton
に統一し、variant
Props で種類を選べるように変更します。What I did
Button
,AnchorButton
を追加variant?: 'primary' | 'secondary' | 'danger' | 'skeleton' | 'text'
、デフォルトはsecondary
PrimaryButton
PrimaryButtonAnchor
SecondaryButton
SecondaryButtonAnchor
DangerButton
DangerButtonAnchor
SkeletonButton
SkeletonButtonAnchor
TextButton
TextButtonAnchor
color.disableColor(color.TEXT_DISABLED)
で二重に色が薄くなっていたので、単にTEXT_DISABLED
になるように修正Capture