-
Notifications
You must be signed in to change notification settings - Fork 141
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
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.
ありがとうございます!
Control パネルで children
の変更が反映されないようでした。
他、気になったところをコメントしました。
<WrapLineUp vAlign="center"> | ||
<Button variant={variant} onClick={action('clicked')}> | ||
<Cluster> | ||
<Button variant={'primary'} onClick={action('clicked')}> |
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.
imo: 他も同じ。
<Button variant={'primary'} onClick={action('clicked')}> | |
<Button variant="primary" onClick={action('clicked')}> |
|
||
> * + * { | ||
margin-top: 24px; | ||
} |
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.
Wrapper
は複数コンポーネントを持っていないようだったので、不要に見えました。
* fix: variant propsの記述を修正 * fix: 不要なCSSを削除 * feat: children propsにdefaultValueを追加
@uknmr 確認いただきありがとうございます! |
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~
Overview
Storybook上でpropsを変更しながら挙動を確認できる、controls addonを有効化しました。
What I did
#2443 にてButtonコンポーネントのインターフェースが変わったということなので、まずButtonコンポーネントに試験実装しています。
controlsタブで
variant
Propsを動的に変更できるようになるため、表示されるコンポーネントは1つだけにしています。hideNoControlsWarning: true
というオプションを設定する必要があるかもしれません。ReactNode
typeのPropsの場合、controlsにはデフォルトでJSONエディタが表示されてしまい、Storybookがエラーを表示するという問題があるため、children
suffix
prefix
の3つについては、{ control: 'text' }
を明示的に指定しています。Capture
https://deploy-preview-2488--smarthr-ui.netlify.app/?path=/story/button--button