This repository has been archived by the owner on Jun 2, 2022. It is now read-only.
[FSSS-164] Extract UISelect from Sort to its own component #299
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
heitorado
requested review from
gvc,
hellofanny,
renatamottam,
ArthurTriis1 and
a team
|
✔️ Deploy Preview for basestore ready! 🔨 Explore the source changes: 7805b39 🔍 Inspect the deploy log: https://app.netlify.com/sites/basestore/deploys/61f9f3ca44d9cc00082c7abf 😎 Browse the preview: https://deploy-preview-299--basestore.netlify.app |
Preview is readyThis pull request generated a Preview👀 Preview: https://preview-299--base.preview.vtex.app |
Gatsby Cloud Build Reportbasestore 🎉 Your build was successful! See the Deploy preview here. Build Details🕐 Build time: 4m PerformanceLighthouse report
|
Gatsby Cloud Build Reportbasestore 🎉 Your build was successful! See the Deploy preview here. Build Details🕐 Build time: 5m PerformanceLighthouse report
|
filipewl
reviewed
Feb 2, 2022
hellofanny
reviewed
Feb 2, 2022
hellofanny
reviewed
Feb 2, 2022
hellofanny
reviewed
Feb 2, 2022
renatamottam
approved these changes
Feb 2, 2022
heitorado
force-pushed
the
refactor/extract-select-component
branch
from
b516976 to
9f6df2d
Compare
Co-authored-by: Fanny Chien <fannychienn@gmail.com>
Co-authored-by: Fanny Chien <fannychienn@gmail.com>
heitorado
force-pushed
the
refactor/extract-select-component
branch
from
40a8fd4 to
590cac3
Compare
Closed
danzanzini
pushed a commit
that referenced
this pull request
Feb 7, 2022
* Extract UISelect from Sort to its own component * Rename data-ui-select to data-select * Change attribute className to classes * Remove whitespace * Remove aria-label property from Sort * Make 'id' a required attribute for Select * Change 'SelectOptions' type to Record * Use className attribute instead of classes Co-authored-by: Fanny Chien <fannychienn@gmail.com>
danzanzini
pushed a commit
that referenced
this pull request
Feb 7, 2022
* Extract UISelect from Sort to its own component * Rename data-ui-select to data-select * Change attribute className to classes * Remove whitespace * Remove aria-label property from Sort * Make 'id' a required attribute for Select * Change 'SelectOptions' type to Record * Use className attribute instead of classes Co-authored-by: Fanny Chien <fannychienn@gmail.com>
Merged
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
What's the purpose of this pull request?
This PR extracts the UISelect component that was being used by the Sort component internally to its own component.
How it works?
This essentially:
sort.scssstylesheet completelyselect.scssstylesheetSelectcomponent that wraps theUISelectfrom faststoreidattribute to link thelabelcomponent with theUISelectclassNameattribute, it will forward that attribute to theclassNameprop in the outer div. Optional.labelTextattribute, it will render a label together with the select. Optional.aria-labelattribute to theUISelectaria-label. This attribute is required.optionsattribute which is aRecord<string, string>so it can build the available options that will be displayed when the user clicks the Select component. This attribute is required.How to test it?
yarn testVerify that all the tests still pass, so the original behaviour is kept.
Also open the local instance and verify that no styles are broken, meaning the change did not affect the styles as well.
References
Thanks to @renatamottam