Closed alrra closed 4 months ago
Thanks for opening this pull request! :100:
This is a community-driven project, and we can't do it without your participation. Please check out our contributing guidelines and review the Contributor Checklist if you haven't already, to make sure everything is squared away. CircleCI will take about 10 minutes to run through the same items that are on the Contributor checklist with a pass/fail check below. Please fix any issues that cause CircleCI to fail or ask for clarification--we try, but sometimes the errors can be unclear. A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread. To ensure codebase quality, large code line changes may take more than 2 weeks to review, but may take longer depending on the number of pull requests in the queue. Feel free to ask for a status update at any time--you won't be bothering anyone. Once feedback has been given, please reply to the feedback giver once the feedback on been addressed, so that they can continue the review. If you need a release while you are waiting for a code review, you can publish a built tag to your own fork. See directions in the release README.
Congrats on merging your first pull request to Design System React! :tada:
If you have a moment, please fill out this five question survey, we would appreciate it.
On behalf of Salesforce's customers, partners, product specialists and employees, we would like offer sincere thanks and appreciation for helping make our user experience better. We look forward to working with you more in the future.
This definitely calls for a high five!
Description
Move the logic of generating the ID into its own utility function.
Ensure the utility function generates IDs that are valid CSS identifiers.
shortid.generate()
by itself will generates IDs that are not always valid [^1] CSS identifiers (e.g. will start with a digit). So, when other parts of the codebase will use those IDs as a selector, aSyntaxError
^2 will be thrown (i.e.'#...' is not a valid selector
).The
slds-
prefix is used so to keep things simple.shortid.characters()
requires "a string of all 64 unique characters" ^3, which means that in order to generate valid CSS identifiers a-z, A-Z, and some "ISO 10646 characters U+00A0 and higher" [^1] will need to be included.[^1]: From https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. "
CONTRIBUTOR checklist (do not remove)
Please complete for every pull request
npm run lint:fix
has been run and linting passes.components/component-docs.json
CI tests pass (npm test
).REVIEWER checklist (do not remove)
components/component-docs.json
tests.Required only if there are markup / UX changes
last-slds-markup-review
inpackage.json
and push.last-accessibility-review
, topackage.json
and push.npm run local-update
within locally cloned site repo to confirm the site will function correctly at the next release.