[DESign2-51] Add Chips component #54064
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* add test for disabled chips and commented it for now
* update stories * update/refacor component
* update focus styles * wip
* remove unneeded Chip id that was constantly updating * refactor
* more refactor * update documentation
This was referenced Oct 17, 2023
sanchitmalhotra126
approved these changes
Oct 20, 2023
| // This is needed to fix children type error (passing string instead of React.ReactNode type) | ||
| // eslint-disable-next-line | ||
| const SingleTemplate: Story<ChipsProps> = args => { | ||
| const [values, setValues] = useState([]); |
There was a problem hiding this comment.
does parameterizing useState as useState<string[]> allow you to remove the cast below?
There was a problem hiding this comment.
It is, thanks for noticing!
| // Reset validity so it gets checked again. | ||
| e.target.setCustomValidity(''); | ||
| }} | ||
| onInvalid={e => { |
There was a problem hiding this comment.
How does this work exactly? would it be better for the consumer to decide what message to display in an invalid state?
There was a problem hiding this comment.
I thought of it, but since that's the only use cale of invalid message for now and it don't looks like there'll be any other different messages I decided it would be easier to keep this string in the component so that we won't need to constantly pass the same prop (something like: invalidMessage={coomonI18n.chooseAtLeastOne()})
There was a problem hiding this comment.
Gotcha - that makes sense, though it also might be good to not take a dependency on localized strings so it's easier to pull these components out into a separate package if/when we want to. I'll leave it up to you!
There was a problem hiding this comment.
Yeah, I thought of it as well. Decided that once we'll be migrating to separate package - we'll either create a common local i18n strings(e.g. for form fields validation) for package or refactor component to use external strings
| border-radius: 100px; | ||
| white-space: nowrap; | ||
| margin: 0; | ||
| //padding: 8px 12px; |
…gn2-51 # Conflicts: # shared/css/color.scss
molly-moen
added a commit
that referenced
this pull request
Nov 15, 2023
* Tutorial explorer: preview mode on hourofcode.com * Updated test to account for flakiness. * Added comment * Re-enabled test * hoc2023: AI string updates * Use use_preview variable * Update schema cache dump after schema changes. * Require script_id for SingleSectionExperiment and TeacherBasedExperiment (#54843) * require script_id on SingleSectionExperiment and TeacherBasedExperiment * fix and improve unit tests * fix unit tests * revert stray schema changes * Update string and font size * Split lines for explanation text. * update injection options (#54818) * Handle pending and error states for rubric ai evaluation (#54860) * updated rubric for more useful error messages * updated rubric settings tests for new errors * undo debug changes to rubrics_controller * bug fixes * added messages for pending and running states * Dance AI: Add start over button (#54899) * Dance AI: Add start over button * don't show on explanation page, add tooltips * Updates to instructions in HoC progression (#54881) Updates to instructions in HoC progression * Allow setting workshop organizer permission (#54896) * Allow setting workshop organizer permission * Update Assignable Permissions * added categories and standards csv files (#54933) * levelbuilder content changes (-robo-commit) * staging content changes (-robo-commit) * * removed empty files on dashboard/public/fonts/gotham (#54906) * P20-522: Fix Express22 level (#54789) * P20-522: Translate `gamelab_ifVarEquals` block type NUM vsriables * P20-522: Translate `procedures_defnoreturn` block id attr * Revert "P20-522: Translate `procedures_defnoreturn` block id attr" This reverts commit e0f4280. * [DESign2-51] Add Chips component (#54064) * Created Chips component * created stories for Chips * created tests for Chips * created documentation for Chips * removed MultiSelectGroup * used Chips instead of MultiSelectGroup in the code * Teachers find course button goes to catalog (#54918) * Teachers find course button goes to catalog * update test * staging content changes (-) * HoC 2023 - Fix missing string on Educators How-to guide (#54932) * Add skinny banner to code.org/student/middle-high for AFE scholarships (#54907) * refactor middle-high.haml and remove stylesheet * add afe_scholarship_skinny_banner.haml view * update grade labels and add empty alt text to images * Dance AI: handle RTL in header, footer, and effect/code toggle (#54922) * * add focus state for toggle code/effect buttons * * dance ai - explanation area RTL support fixes * * dance party - song selector RTL support fix * * updated explanation button rtl languages positioning * added comment (review fix) * Center toggle in LTR/RTL, force LTR header even in RTL languages * RTL header * Handle RTL in footer buttons * Fix text/icon spacing in RTL * Undo spacing change * Use div instead of span --------- Co-authored-by: denyslevada <levada.denys@gmail.com> * standardize counting of events so all are right (#54927) * Update Neural Networks lesson text on code.org/ai/how-ai-works and hourofcode.com/ai (#54915) * Update code.org/hourofcode see all Hour of code tutorials section (#54931) * add see all activities section * update images and add responsive styles --------- Co-authored-by: breville <brendan@code.org> Co-authored-by: Jessica Kulwik <jessica@code.org> Co-authored-by: Dave Bailey <davidsbailey@users.noreply.github.com> Co-authored-by: Molly Moen <molly@code.org> Co-authored-by: Mark Barnes <mark.barnes@code.org> Co-authored-by: Sanchit Malhotra <85528507+sanchitmalhotra126@users.noreply.github.com> Co-authored-by: fisher-alice <107423305+fisher-alice@users.noreply.github.com> Co-authored-by: Brendan Reville <breville@users.noreply.github.com> Co-authored-by: Dani LaMarca <dani@code.org> Co-authored-by: levadadenys <levada.denys@gmail.com> Co-authored-by: Artem Vavilov <11708250+artem-vavilov@users.noreply.github.com> Co-authored-by: Kelby Hawn <9256643+kelbyhawn@users.noreply.github.com> Co-authored-by: bencodeorg <ben@code.org> Co-authored-by: Turner Riley <56283563+TurnerRiley@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
[DESign2-51] Add Chips component
ChipscomponentChipsChipsChipsMultiSelectGroupChipsinstead ofMultiSelectGroupin the codeChipscomponent is based on Ryan's MultiSelectGroup. (It's already refactored, but still used it as a base).Storybook (localhost url):
2023-11-14.19.45.00.mov
Live code Before:
2023-10-12.16.37.28.mov
Live code After:
2023-11-15.14.12.46.mov
Links
Testing story
Deployment strategy
Follow-up work
Privacy
Security
Caching
PR Checklist: