Skip to content

Commit

Permalink
Fix placeholder selector for form components (#4295)
Browse files Browse the repository at this point in the history 
* fix selector

* Create young-bikes-kneel.md

* snaps

* test(vrt): update snapshots

* Update young-bikes-kneel.md

---------

Co-authored-by: langermank <langermank@users.noreply.github.com>
  • Loading branch information
@langermank @lukasoppermann
2 people authored and lukasoppermann committed Apr 16, 2024
1 parent 95ce111 commit 63e2d1f
Show file tree
Hide file tree
Showing 9 changed files with 1,036 additions and 514 deletions.
6 changes: 6 additions & 0 deletions .changeset/young-bikes-kneel.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@primer/react": patch
---

Fix `placeholder` selector for form components

Binary file modified ...put.test.ts-snapshots/TextInput-With-Trailing-Icon-dark-high-contrast-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ut.test.ts-snapshots/TextInput-With-Trailing-Icon-light-high-contrast-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...Panel.test.ts-snapshots/drafts-SelectPanel-Default-dark-high-contrast-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...anel.test.ts-snapshots/drafts-SelectPanel-Default-light-high-contrast-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
168 changes: 112 additions & 56 deletions packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,20 +33,28 @@ exports[`snapshots renders a custom empty state message 1`] = `
cursor: pointer;
}
.c0::-webkit-input-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::-webkit-input-placeholder,
.c0 textarea::-webkit-input-placeholder,
.c0 select::-webkit-input-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0::-moz-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::-moz-placeholder,
.c0 textarea::-moz-placeholder,
.c0 select::-moz-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0:-ms-input-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input:-ms-input-placeholder,
.c0 textarea:-ms-input-placeholder,
.c0 select:-ms-input-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0::placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::placeholder,
.c0 textarea::placeholder,
.c0 select::placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0:focus-within {
Expand Down Expand Up @@ -200,20 +208,28 @@ exports[`snapshots renders a loading state 1`] = `
cursor: pointer;
}
.c0::-webkit-input-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::-webkit-input-placeholder,
.c0 textarea::-webkit-input-placeholder,
.c0 select::-webkit-input-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0::-moz-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::-moz-placeholder,
.c0 textarea::-moz-placeholder,
.c0 select::-moz-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0:-ms-input-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input:-ms-input-placeholder,
.c0 textarea:-ms-input-placeholder,
.c0 select:-ms-input-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0::placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::placeholder,
.c0 textarea::placeholder,
.c0 select::placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0:focus-within {
Expand Down Expand Up @@ -402,20 +418,28 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
cursor: pointer;
}
.c0::-webkit-input-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::-webkit-input-placeholder,
.c0 textarea::-webkit-input-placeholder,
.c0 select::-webkit-input-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0::-moz-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::-moz-placeholder,
.c0 textarea::-moz-placeholder,
.c0 select::-moz-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0:-ms-input-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input:-ms-input-placeholder,
.c0 textarea:-ms-input-placeholder,
.c0 select:-ms-input-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0::placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::placeholder,
.c0 textarea::placeholder,
.c0 select::placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0:focus-within {
Expand Down Expand Up @@ -1194,20 +1218,28 @@ exports[`snapshots renders a multiselect input 1`] = `
cursor: pointer;
}
.c0::-webkit-input-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::-webkit-input-placeholder,
.c0 textarea::-webkit-input-placeholder,
.c0 select::-webkit-input-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0::-moz-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::-moz-placeholder,
.c0 textarea::-moz-placeholder,
.c0 select::-moz-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0:-ms-input-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input:-ms-input-placeholder,
.c0 textarea:-ms-input-placeholder,
.c0 select:-ms-input-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0::placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::placeholder,
.c0 textarea::placeholder,
.c0 select::placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0:focus-within {
Expand Down Expand Up @@ -1872,20 +1904,28 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
cursor: pointer;
}
.c0::-webkit-input-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::-webkit-input-placeholder,
.c0 textarea::-webkit-input-placeholder,
.c0 select::-webkit-input-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0::-moz-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::-moz-placeholder,
.c0 textarea::-moz-placeholder,
.c0 select::-moz-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0:-ms-input-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input:-ms-input-placeholder,
.c0 textarea:-ms-input-placeholder,
.c0 select:-ms-input-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0::placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::placeholder,
.c0 textarea::placeholder,
.c0 select::placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0:focus-within {
Expand Down Expand Up @@ -2701,20 +2741,28 @@ exports[`snapshots renders a single select input 1`] = `
cursor: pointer;
}
.c0::-webkit-input-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::-webkit-input-placeholder,
.c0 textarea::-webkit-input-placeholder,
.c0 select::-webkit-input-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0::-moz-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::-moz-placeholder,
.c0 textarea::-moz-placeholder,
.c0 select::-moz-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0:-ms-input-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input:-ms-input-placeholder,
.c0 textarea:-ms-input-placeholder,
.c0 select:-ms-input-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0::placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::placeholder,
.c0 textarea::placeholder,
.c0 select::placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0:focus-within {
Expand Down Expand Up @@ -3731,20 +3779,28 @@ exports[`snapshots renders with an input value 1`] = `
cursor: pointer;
}
.c0::-webkit-input-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::-webkit-input-placeholder,
.c0 textarea::-webkit-input-placeholder,
.c0 select::-webkit-input-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0::-moz-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::-moz-placeholder,
.c0 textarea::-moz-placeholder,
.c0 select::-moz-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0:-ms-input-placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input:-ms-input-placeholder,
.c0 textarea:-ms-input-placeholder,
.c0 select:-ms-input-placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0::placeholder {
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
.c0 input::placeholder,
.c0 textarea::placeholder,
.c0 select::placeholder {
color: var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
}
.c0:focus-within {
Expand Down
Loading

0 comments on commit 63e2d1f

Please sign in to comment.