Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changes alignment of form control validation message icon #3121

Merged
merged 14 commits into from
Jun 1, 2023
Merged

Changes alignment of form control validation message icon #3121

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
042fc39
changes alignment of validation message icon
mperrotti Apr 5, 2023
0fed94c
Create .changeset/big-days-obey.md
mperrotti Apr 5, 2023
5e4d9b7
Merge branch 'main' into mp/validation-icon-alignment
mperrotti Apr 13, 2023
5986082
updates snapshots
mperrotti Apr 13, 2023
0c8913c
Merge branch 'main' into mp/validation-icon-alignment
mperrotti Apr 14, 2023
d3cc363
updates snapshots again
mperrotti Apr 14, 2023
a5a0a8b
Merge branch 'main' into mp/validation-icon-alignment
mperrotti Apr 18, 2023
0c127ef
Merge branch 'main' into mp/validation-icon-alignment
mperrotti Apr 18, 2023
c1e05cc
Merge branch 'main' into mp/validation-icon-alignment
mperrotti May 1, 2023
7bddb1c
Merge branch 'main' into mp/validation-icon-alignment
mperrotti May 30, 2023
6737060
refactors layout styles
mperrotti May 31, 2023
03c9384
Merge branch 'main' into mp/validation-icon-alignment
mperrotti May 31, 2023
d497881
test(vrt): update snapshots
joshblack May 31, 2023
0b8d5cf
Merge branch 'main' into mp/validation-icon-alignment
mperrotti Jun 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/big-days-obey.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Changes the alignment of the validation message icon to be vertically center-aligned with the first line of text.
2 changes: 1 addition & 1 deletion src/TextInput/TextInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const Playground = (args: FormControlArgs<TextInputProps>) => {
}

return (
<Box as="form">
<Box as="form" maxWidth={200}>
<FormControl {...parentArgs}>
<FormControl.Label {...labelArgs} />
<TextInput value={value} onChange={handleChange} {...args} />
Expand Down
4 changes: 2 additions & 2 deletions src/_InputValidation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, id
sx={{
fontSize: 0,
fontWeight: 'bold',
alignItems: 'center',
alignItems: 'baseline',
color: fgColor,
display: 'flex',
a: {
Expand All @@ -45,7 +45,7 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, id
}}
>
{IconComponent && (
<Box as="span" mr={1} sx={{display: 'flex'}} aria-hidden="true">
<Box as="span" display="flex" mr={1} sx={{transform: 'translateY(2px)'}} aria-hidden="true">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to deal with a similar problem (offsetting icon to align with the text). So I am wondering:
Why do you prefer translate vs margin?
Is it correct to assume that alignment will break if user changes the font or font size?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the alignment would break if we changed the font size, but it doesn't break if the user zooms their browser in or out.

<IconComponent size={12} fill="currentColor" />
</Box>
)}
Expand Down
24 changes: 16 additions & 8 deletions src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1993,6 +1993,9 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
transform: translateY(2px);
}

.c2 {
Expand All @@ -2019,10 +2022,10 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = `
.c12 {
font-size: 12px;
font-weight: bold;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-items: baseline;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
color: success.fg;
display: -webkit-box;
display: -webkit-flex;
Expand Down Expand Up @@ -2208,6 +2211,7 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = `
<span
aria-hidden="true"
class="c13"
display="flex"
>
<svg
aria-hidden="true"
Expand Down Expand Up @@ -2287,6 +2291,9 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transform: translateY(2px);
-ms-transform: translateY(2px);
transform: translateY(2px);
}

.c2 {
Expand All @@ -2313,10 +2320,10 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
.c12 {
font-size: 12px;
font-weight: bold;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-items: baseline;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
color: danger.fg;
display: -webkit-box;
display: -webkit-flex;
Expand Down Expand Up @@ -2502,6 +2509,7 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
<span
aria-hidden="true"
class="c13"
display="flex"
>
<svg
aria-hidden="true"
Expand Down