fix(textfield): remove extra padding on nested label and help #2519
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
File metricsSummaryTotal size: 3.93 MB*
Detailstextfield
* Results are not gzipped or minified. * An ASCII character in UTF-8 is 8 bits or 1 byte. |
|
🚀 Deployed on https://pr-2519--spectrum-css.netlify.app |
jawinn
changed the title
jenndiaz
approved these changes
Feb 13, 2024
castastrophe
force-pushed
the
jawinn/css-674-extra-textfield-padding
branch
from
a6cde0c to
dec0ed9
Compare
castastrophe
approved these changes
Feb 16, 2024
There were styles that were adding extra inline start padding to the label and help text, when they are nested within Textfield (as shown on the docs page for Textfield). This was particularly noticeable on the quiet variation. It looks like this previously was adding padding that matched the amount of corner rounding, so text would start where the corner started its curve. On the design, there is no additional left padding. This update removes that padding to adhere to the design.
Define the icon set used for the valid and invalid icons in Textfield. This necessary story update was related to recent fixes to icon that addressed the fact that icons with the same name exist in both icon sets. This one wasn't caught in VRTs because Textfield does not have a kitchen sink style story yet to represent all of its states.
pfulton
force-pushed
the
jawinn/css-674-extra-textfield-padding
branch
from
dec0ed9 to
551ab69
Compare
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
Previously some styles were adding a small amount of extra inline-start padding to the label and help text, when they are nested within Text field (as shown on the docs page for Text field). This was particularly noticeable on the quiet variation—see screenshot.
It looks like this previously was adding padding that matched the amount of corner rounding, so the label text would start where the corner started its curve.
On the design, there is no additional left padding. This update removes that padding to adhere to the design.
This also includes a small Storybook fix for the alignment of the valid checkmark. Due to recent Icon fixes, it was necessary to specify the icon set as "ui" in some of the args.
CSS-674
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 @jenndiaz
Regression testing
Validate:
Note: Variations of Text field, including with a Field label, are not currently well represented in Chromatic/VRT, but there are already improvements to this coming in PR #2380 .
Screenshots
Design:
Previous behavior:
To-do list