feat(fieldlabel): required asterisk vertical alignment #2166
Conversation
This file contains hidden or 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
|
🚀 Deployed on https://pr-2166--spectrum-css.netlify.app |
jawinn
force-pushed
the
jawinn/css-582-asterisk-spacing
branch
from
fdd2866 to
bfbb60b
Compare
jawinn
force-pushed
the
jawinn/css-582-asterisk-spacing
branch
from
bfbb60b to
a026cd8
Compare
jawinn
commented
Sep 13, 2023
| @@ -176,7 +167,7 @@ governing permissions and limitations under the License. | |||
| display: flex; | |||
| flex-direction: column; | |||
|
|
|||
| &+.spectrum-Form-item { | |||
| & + .spectrum-Form-item { | |||
| margin-block-start: var(--mod-field-label-top-to-asterisk, var(--spectrum-field-label-top-to-asterisk)); | |||
There was a problem hiding this comment.
Note: all usages of --spectrum-field-label-top-to-asterisk can probably be removed from this file, as this margin within the Labels Above form appears to be using the wrong token and is the last place it's used. I'll make a cleanup update for the .spectrum-Form related styles in a followup PR, as that was starting to escape the bounds of this PR's issue.
pfulton
reviewed
Sep 14, 2023
Comment on lines
+6
to
+7
| | `--mod-field-label-top-to-asterisk` | | ||
| | `--mod-fieldlabel-font-size` | |
There was a problem hiding this comment.
I hadn't noticed it before, but our naming is inconsistent here, and I'm on the fence as to whether we should leave it alone or update it so that things are consistent. I think we might just want to leave it alone.
pfulton
approved these changes
Sep 14, 2023
- Update the inline-block required icon to be vertically aligned at the baseline using the vertical-align property - Consolidate some repeated styles - Remove non-existant font-smoothing property
- Include note in docs about not adding extra space in markup for required icon. Previously, extra inline space was appearing in examples that was in addition to the defined margin-inline token. - Storybook fix: Add missing required class
Use isRequired field in stories, so the required asterisk is represented in VRTs. Along with wrapping label text.
pfulton
force-pushed
the
jawinn/css-582-asterisk-spacing
branch
from
a026cd8 to
7afa5e1
Compare
mlogsdon18
pushed a commit
that referenced
this pull request
Sep 18, 2023
* feat(fieldlabel): required icon vertical-align - Update the inline-block required icon to be vertically aligned at the baseline using the vertical-align property - Consolidate some repeated styles - Remove non-existant font-smoothing property * docs(fieldlabel): note and change regarding extra inline space - Include note in docs about not adding extra space in markup for required icon. Previously, extra inline space was appearing in examples that was in addition to the defined margin-inline token. - Storybook fix: Add missing required class * docs(fieldlabel): add stories for required asterisk Use isRequired field in stories, so the required asterisk is represented in VRTs. Along with wrapping label text.
12 tasks
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.
Description
Update the required asterisk icon (which is set to
display: inline-block) to be vertically aligned with the baseline of the text using thevertical-alignproperty, instead of using new snapshot tokens. Removes some margin-block from the asterisk that was not needed.Also adds stories for required and wrapping + required, and updates the docs.
Note: Per confirmation with design about the original Slack discussion, the asterisk should stay inline at the end of the text. It's not currently achievable in Figma due to container/frame layouts in the tool. Because of that, the asterisk placement in Figma will not match the asterisk placement in code.
CSS-582
How and where has this been tested?
Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.
Validation Steps
Regression testing
Validate:
Screenshots
To-do list
I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨