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: Storybookにcontrols addonを追加 #2488

Merged
merged 4 commits into from
May 26, 2022
Merged

Conversation

yuw27b
Copy link
Contributor

@yuw27b yuw27b commented May 19, 2022

Overview

Storybook上でpropsを変更しながら挙動を確認できる、controls addonを有効化しました。

What I did

#2443 にてButtonコンポーネントのインターフェースが変わったということなので、まずButtonコンポーネントに試験実装しています。
controlsタブでvariant Propsを動的に変更できるようになるため、表示されるコンポーネントは1つだけにしています。

Capture

https://deploy-preview-2488--smarthr-ui.netlify.app/?path=/story/button--button

image

@yuw27b yuw27b requested a review from a team as a code owner May 19, 2022 09:30
@yuw27b yuw27b requested review from uknmr and taconasu and removed request for a team May 19, 2022 09:30
@yuw27b yuw27b self-assigned this May 19, 2022
@reg-suit
Copy link

reg-suit bot commented May 19, 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.

@netlify
Copy link

netlify bot commented May 19, 2022

Deploy Preview for smarthr-ui ready!

Name Link
🔨 Latest commit d52ebc3
🔍 Latest deploy log https://app.netlify.com/sites/smarthr-ui/deploys/628db454a48ca30009b5c3a6
😎 Deploy Preview https://deploy-preview-2488--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.

ありがとうございます!
Control パネルで children の変更が反映されないようでした。
他、気になったところをコメントしました。

<WrapLineUp vAlign="center">
<Button variant={variant} onClick={action('clicked')}>
<Cluster>
<Button variant={'primary'} onClick={action('clicked')}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

imo: 他も同じ。

Suggested change
<Button variant={'primary'} onClick={action('clicked')}>
<Button variant="primary" onClick={action('clicked')}>

Comment on lines 333 to 336

> * + * {
margin-top: 24px;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Wrapper は複数コンポーネントを持っていないようだったので、不要に見えました。

* fix: variant propsの記述を修正

* fix: 不要なCSSを削除

* feat: children propsにdefaultValueを追加
@yuw27b
Copy link
Contributor Author

yuw27b commented May 25, 2022

@uknmr 確認いただきありがとうございます!
ご指摘の点、修正しました。
childrenについては、初期表示の"ボタン"をdefaultValueに設定して対応しました。

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~

@yuw27b yuw27b changed the title (WIP) feat: Storybookにcontrols addonを追加 feat: Storybookにcontrols addonを追加 May 26, 2022
@uknmr uknmr merged commit 334e612 into master May 26, 2022
@uknmr uknmr deleted the feat/storybook-controls branch May 26, 2022 04:57
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