-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
CircularOptionPicker: refactor to TypeScript #47937
Conversation
18b061a
to
c04ba09
Compare
Size Change: +402 B (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
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.
Nicely done!
✅ No runtime changes
✅ Types look good to me
✅ Did a quick smoke test in GradientPicker
's Storybook example
Apart from the inline comments, would you be able to add a simple Storybook example? Nothing too complex, just a "standard" default example to show the auto-generated docs and test the component in isolation.
Thanks for the review @ciampo! I've updated the README with the subcomponents, and I've also added a story. While I was there I added stories to demonstrate the two subcomponents, in part because I wanted to experiment with |
Shoot, I almost forgot: quick question about formatting the code examples in Storybook: I've used an array of options and then Is there a trick to force some indentation there, or would we be better off just hardcoding those |
packages/components/src/circular-option-picker/stories/index.tsx
Outdated
Show resolved
Hide resolved
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.
Thank you for working on the README and the Storybook example.
I've left inline comments, but overall changes are looking great 🎉
...this leads to the options prop in the code examples not being formatted nicely.
Is there a trick to force some indentation there, or would we be better off just hardcoding those Options subcomponents so we can just explicitly format/indent as we see fit?
I'm not sure I understand what you mean — how would I be able to see the issues with the formatting?
packages/components/src/circular-option-picker/stories/index.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/circular-option-picker/stories/index.tsx
Outdated
Show resolved
Hide resolved
Sorry, I wasn't clear in my description. On the Docs tab in Storybook, the code example was rendering with the I think I'm caught up on existing feedback. I'll address the CHANGELOG conflict as a final step when the other ducks are all in a row. Thank you again for all of the detailed feedback! |
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.
Great work here and thank you for the patience 🚀
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
495a911
to
6ca7c5f
Compare
Thank you for all of the thoughtful help and feedback @ciampo! |
What?
Refactor
CircularOptionPicker
component to TypeScriptPart of #35744
Co-authored with @ciampo
Why?
The refactor to TypeScript has many benefits (auto-generated docs, static linting and error prevention, better IDE experience). See #35744 for more details
How?
Followed the steps in the TypeScript migration guide
I've also added a README for the component.
Testing Instructions
ColorPalette
,DuotonePicker
, andGradientPicker
still work as expected.