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.

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

Merged
merged 7 commits into from
May 9, 2022

Conversation

wmoai
Copy link
Contributor

@wmoai wmoai commented Apr 25, 2022

Related URL

https://smarthr.atlassian.net/browse/SHRUI-545

Overview

既存のボタンコンポーネントは PrimaryButton, SecondaryButton など種類毎に別コンポーネントになっていますが、コンポーネントを ButtonAnchorButton に統一し、variant Props で種類を選べるように変更します。

What I did

  • Button, AnchorButton を追加
    • variant?: 'primary' | 'secondary' | 'danger' | 'skeleton' | 'text' 、デフォルトは secondary
  • 既存のボタンを非推奨化
    • PrimaryButton
    • PrimaryButtonAnchor
    • SecondaryButton
    • SecondaryButtonAnchor
    • DangerButton
    • DangerButtonAnchor
    • SkeletonButton
    • SkeletonButtonAnchor
    • TextButton
    • TextButtonAnchor
  • テキストボタンの disabled 時の文字色が color.disableColor(color.TEXT_DISABLED) で二重に色が薄くなっていたので、単に TEXT_DISABLED になるように修正

Capture

@wmoai wmoai self-assigned this Apr 25, 2022
@wmoai wmoai requested a review from a team as a code owner April 25, 2022 07:00
@reg-suit
Copy link

reg-suit bot commented Apr 25, 2022

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.

@wmoai wmoai requested review from uknmr and zoshigayan and removed request for a team April 25, 2022 07:00
@netlify
Copy link

netlify bot commented Apr 25, 2022

Deploy Preview for smarthr-ui ready!

Name Link
🔨 Latest commit 85630a2
🔍 Latest deploy log https://app.netlify.com/sites/smarthr-ui/deploys/6267a05028e6220008a339d8
😎 Deploy Preview https://deploy-preview-2443--smarthr-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Copy link
Collaborator

@uknmr uknmr left a 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;
Copy link
Collaborator

Choose a reason for hiding this comment

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

nits

Suggested change
background-clip: padding-box;
background-clip: padding-box;

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ありがとうございます。まとめて対応済みです。
d0f134c
96e78d2

${styles.disabled}

/* alpha color を使用しているので、背景色と干渉させない */
background-clip: padding-box;
Copy link
Collaborator

Choose a reason for hiding this comment

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

nits

Suggested change
background-clip: padding-box;
background-clip: padding-box;

${baseStyles}
${styles.default}

&:focus,
Copy link
Collaborator

Choose a reason for hiding this comment

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

:focus-visible でお願いします。

Suggested change
&:focus,
&:focus-visible,

${styles.default}
text-decoration: none;

&:focus,
Copy link
Collaborator

Choose a reason for hiding this comment

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

:focus-visible でお願いします。

Suggested change
&:focus,
&:focus-visible,

min-height: calc(${fontSize.S} + ${spacingByChar(1)} + (${border.lineWidth} * 2));
}

&:focus {
Copy link
Collaborator

Choose a reason for hiding this comment

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

:focus-visible でお願いします。

Suggested change
&:focus {
&:focus-visible {

@wmoai wmoai requested a review from uknmr April 26, 2022 00:55
uknmr
uknmr previously approved these changes Apr 26, 2022
Copy link
Collaborator

@uknmr uknmr left a comment

Choose a reason for hiding this comment

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

LGTM!

@wmoai
Copy link
Contributor Author

wmoai commented Apr 26, 2022

すみません、エスケープハッチ付け忘れてたので追加しました! e45bb55

@uknmr uknmr merged commit 98bedf6 into master May 9, 2022
@uknmr uknmr deleted the button-union branch May 9, 2022 02:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants