diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-colorblind-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-colorblind-linux.png index 311cc30f98f..0b7b7617a88 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-colorblind-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-dimmed-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-dimmed-linux.png index 98dd138bf15..d159439fce0 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-dimmed-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-high-contrast-linux.png index 56e307ea624..b6aa09f078b 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-linux.png index 57702ef7140..99356057e66 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-tritanopia-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-tritanopia-linux.png index 57702ef7140..99356057e66 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-colorblind-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-colorblind-linux.png index b5fa36f8e54..5e320df927f 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-colorblind-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-high-contrast-linux.png index 990871b845f..63c0d424c47 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-linux.png index 3cd985aea11..250e211790b 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-tritanopia-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-tritanopia-linux.png index 0f46605881b..250e211790b 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-tritanopia-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Error-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-colorblind-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-colorblind-linux.png index fcda29d7f73..7f97946fee8 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-colorblind-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-dimmed-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-dimmed-linux.png index e44c104202c..76273e004d6 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-dimmed-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-high-contrast-linux.png index 4539828b23c..9f226b63517 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-linux.png index 2b6e2e71ade..e6dfce69d95 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-tritanopia-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-tritanopia-linux.png index fcda29d7f73..7f97946fee8 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-colorblind-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-colorblind-linux.png index 9f9398e22bc..b269cbf42bf 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-colorblind-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-high-contrast-linux.png index ed019467eee..9c246ab72e7 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-high-contrast-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-linux.png index 5f60d179255..1d0adbbb59a 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-tritanopia-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-tritanopia-linux.png index 9f9398e22bc..97cf96a72db 100644 Binary files a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-tritanopia-linux.png and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-Success-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-colorblind-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-colorblind-linux.png new file mode 100644 index 00000000000..ef2d09254f6 Binary files /dev/null and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-dimmed-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-dimmed-linux.png new file mode 100644 index 00000000000..6a83fdb873f Binary files /dev/null and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-high-contrast-linux.png new file mode 100644 index 00000000000..6ac39780f43 Binary files /dev/null and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-linux.png new file mode 100644 index 00000000000..ef2d09254f6 Binary files /dev/null and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-tritanopia-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-tritanopia-linux.png new file mode 100644 index 00000000000..ef2d09254f6 Binary files /dev/null and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-light-colorblind-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-light-colorblind-linux.png new file mode 100644 index 00000000000..c9795b16119 Binary files /dev/null and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-light-high-contrast-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-light-high-contrast-linux.png new file mode 100644 index 00000000000..6f94b00c349 Binary files /dev/null and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-light-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-light-linux.png new file mode 100644 index 00000000000..c9795b16119 Binary files /dev/null and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-light-linux.png differ diff --git a/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-light-tritanopia-linux.png b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-light-tritanopia-linux.png new file mode 100644 index 00000000000..c9795b16119 Binary files /dev/null and b/.playwright/snapshots/components/Select.test.ts-snapshots/Select-With-Placeholder-Option-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-colorblind-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-colorblind-linux.png new file mode 100644 index 00000000000..031956454c9 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-dimmed-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-dimmed-linux.png new file mode 100644 index 00000000000..9195424d5ac Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-high-contrast-linux.png new file mode 100644 index 00000000000..5fac562c130 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-linux.png new file mode 100644 index 00000000000..031956454c9 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-tritanopia-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-tritanopia-linux.png new file mode 100644 index 00000000000..031956454c9 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-colorblind-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-colorblind-linux.png new file mode 100644 index 00000000000..d9d2cf55cfe Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-high-contrast-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-high-contrast-linux.png new file mode 100644 index 00000000000..2650497ddb1 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-linux.png new file mode 100644 index 00000000000..d9d2cf55cfe Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-tritanopia-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-tritanopia-linux.png new file mode 100644 index 00000000000..d9d2cf55cfe Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-colorblind-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-colorblind-linux.png new file mode 100644 index 00000000000..860a1c26cb2 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-dimmed-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-dimmed-linux.png new file mode 100644 index 00000000000..5de0994599d Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-high-contrast-linux.png new file mode 100644 index 00000000000..5e85a4ec648 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-linux.png new file mode 100644 index 00000000000..860a1c26cb2 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-tritanopia-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-tritanopia-linux.png new file mode 100644 index 00000000000..860a1c26cb2 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-colorblind-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-colorblind-linux.png new file mode 100644 index 00000000000..4bbface4251 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-high-contrast-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-high-contrast-linux.png new file mode 100644 index 00000000000..45a96fa9ad4 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-linux.png new file mode 100644 index 00000000000..4bbface4251 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-tritanopia-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-tritanopia-linux.png new file mode 100644 index 00000000000..4bbface4251 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-colorblind-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-colorblind-linux.png new file mode 100644 index 00000000000..36915db3c2c Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-dimmed-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-dimmed-linux.png new file mode 100644 index 00000000000..1701b9b56c7 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-high-contrast-linux.png new file mode 100644 index 00000000000..d846b4fbc76 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-linux.png new file mode 100644 index 00000000000..36915db3c2c Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-tritanopia-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-tritanopia-linux.png new file mode 100644 index 00000000000..36915db3c2c Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-colorblind-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-colorblind-linux.png new file mode 100644 index 00000000000..a798488b4fd Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-high-contrast-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-high-contrast-linux.png new file mode 100644 index 00000000000..87cc80fd5bb Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-linux.png new file mode 100644 index 00000000000..a798488b4fd Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-tritanopia-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-tritanopia-linux.png new file mode 100644 index 00000000000..a798488b4fd Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-colorblind-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-colorblind-linux.png new file mode 100644 index 00000000000..0552a8c340a Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-dimmed-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-dimmed-linux.png new file mode 100644 index 00000000000..f325e972335 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-high-contrast-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-high-contrast-linux.png new file mode 100644 index 00000000000..4bc880e0626 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-linux.png new file mode 100644 index 00000000000..0552a8c340a Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-tritanopia-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-tritanopia-linux.png new file mode 100644 index 00000000000..0552a8c340a Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-light-colorblind-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-light-colorblind-linux.png new file mode 100644 index 00000000000..66fc5a432b2 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-light-high-contrast-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-light-high-contrast-linux.png new file mode 100644 index 00000000000..2aa155efe69 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-light-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-light-linux.png new file mode 100644 index 00000000000..66fc5a432b2 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-light-linux.png differ diff --git a/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-light-tritanopia-linux.png b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-light-tritanopia-linux.png new file mode 100644 index 00000000000..66fc5a432b2 Binary files /dev/null and b/.playwright/snapshots/components/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-colorblind-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-colorblind-linux.png new file mode 100644 index 00000000000..e2117cc1f19 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-dimmed-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-dimmed-linux.png new file mode 100644 index 00000000000..1cd56a4c4b4 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-high-contrast-linux.png new file mode 100644 index 00000000000..b6878aba965 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-linux.png new file mode 100644 index 00000000000..e2117cc1f19 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-tritanopia-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-tritanopia-linux.png new file mode 100644 index 00000000000..e2117cc1f19 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-colorblind-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-colorblind-linux.png new file mode 100644 index 00000000000..98ae07b0395 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-high-contrast-linux.png new file mode 100644 index 00000000000..fc488fb1830 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-linux.png new file mode 100644 index 00000000000..98ae07b0395 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-tritanopia-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-tritanopia-linux.png new file mode 100644 index 00000000000..98ae07b0395 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-colorblind-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-colorblind-linux.png new file mode 100644 index 00000000000..74ef7050069 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-dimmed-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-dimmed-linux.png new file mode 100644 index 00000000000..b3e9f33eb72 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-high-contrast-linux.png new file mode 100644 index 00000000000..43f4731d16c Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-linux.png new file mode 100644 index 00000000000..74ef7050069 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-tritanopia-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-tritanopia-linux.png new file mode 100644 index 00000000000..74ef7050069 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-colorblind-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-colorblind-linux.png new file mode 100644 index 00000000000..172862aca0c Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-high-contrast-linux.png new file mode 100644 index 00000000000..64b9ac9d1dc Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-linux.png new file mode 100644 index 00000000000..172862aca0c Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-tritanopia-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-tritanopia-linux.png new file mode 100644 index 00000000000..172862aca0c Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-colorblind-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-colorblind-linux.png new file mode 100644 index 00000000000..440d7778920 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-dimmed-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-dimmed-linux.png new file mode 100644 index 00000000000..1bbccea338a Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-high-contrast-linux.png new file mode 100644 index 00000000000..1767e20ff3c Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-linux.png new file mode 100644 index 00000000000..440d7778920 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-tritanopia-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-tritanopia-linux.png new file mode 100644 index 00000000000..440d7778920 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-colorblind-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-colorblind-linux.png new file mode 100644 index 00000000000..164484c0104 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-high-contrast-linux.png new file mode 100644 index 00000000000..6ed87ab8f57 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-linux.png new file mode 100644 index 00000000000..164484c0104 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-tritanopia-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-tritanopia-linux.png new file mode 100644 index 00000000000..164484c0104 Binary files /dev/null and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-colorblind-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-colorblind-linux.png index ee8dd339224..3526e83bf75 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-colorblind-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-dimmed-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-dimmed-linux.png index 136d8d5506d..41d9b4ec601 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-dimmed-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-high-contrast-linux.png index 018cb48dcdd..d6a41567d35 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-linux.png index 2a290b52592..eec0461de11 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-tritanopia-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-tritanopia-linux.png index 2a290b52592..eec0461de11 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-colorblind-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-colorblind-linux.png index c1cdeefad08..9a3d5d4d145 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-colorblind-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-high-contrast-linux.png index 64e54163bfb..a5c61a6a038 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-high-contrast-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-linux.png index 8e9de8dd046..b464e948d32 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-tritanopia-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-tritanopia-linux.png index 0046dc879f4..b464e948d32 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-tritanopia-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-colorblind-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-colorblind-linux.png index 1c941cbb396..4e74a4db7c1 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-colorblind-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-dimmed-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-dimmed-linux.png index 44349261d60..77a1c22abab 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-dimmed-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-high-contrast-linux.png index ed4fa6e8a47..72360f8500e 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-linux.png index cd57c44ae3c..7ccd8b799cf 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-tritanopia-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-tritanopia-linux.png index 1c941cbb396..4e74a4db7c1 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-colorblind-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-colorblind-linux.png index 686932cdd80..1a442853d65 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-colorblind-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-high-contrast-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-high-contrast-linux.png index 2d9ba97170a..33efddd677b 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-high-contrast-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-linux.png index 83158eaff89..a8c9acebaa3 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-linux.png differ diff --git a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-tritanopia-linux.png b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-tritanopia-linux.png index 686932cdd80..1a442853d65 100644 Binary files a/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-tritanopia-linux.png and b/.playwright/snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-tritanopia-linux.png differ diff --git a/e2e/components/Select.test.ts b/e2e/components/Select.test.ts index 0fa7576e1d7..4e24fdb4ad3 100644 --- a/e2e/components/Select.test.ts +++ b/e2e/components/Select.test.ts @@ -2,348 +2,89 @@ import {test, expect} from '@playwright/test' import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' -test.describe('Select', () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-select--default', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Select.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-select--default', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Block', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-select-features--block', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Select.Block.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-select-features--block', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Disabled', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-select-features--disabled', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Select.Disabled.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-select-features--disabled', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Error', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-select-features--error', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Select.Error.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-select-features--error', - globals: { - colorScheme: theme, - }, - }) - - await expect(page.getByText('Something went wrong')).toBeVisible() - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Large', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-select-features--large', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Select.Large.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-select-features--large', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Small', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-select-features--small', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Select.Small.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-select-features--small', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Success', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-select-features--success', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Select.Success.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-select-features--success', - globals: { - colorScheme: theme, - }, - }) - - await expect(page.getByText('Success')).toBeVisible() - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - - test.describe('Visually Hidden Label', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-select-features--visually-hidden-label', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Select.Visually Hidden Label.${theme}.png`) - }) +const stories = [ + { + id: 'components-select--default', + title: 'Default', + }, + { + id: 'components-select-features--block', + title: 'Block', + }, + { + id: 'components-select-features--disabled', + title: 'Disabled', + }, + { + id: 'components-select-features--error', + title: 'Error', + }, + { + id: 'components-select-features--large', + title: 'Large', + }, + { + id: 'components-select-features--small', + title: 'Small', + }, + { + id: 'components-select-features--success', + title: 'Success', + }, + { + id: 'components-select-features--visually-hidden-label', + title: 'Visually Hidden Label', + }, + { + id: 'components-select-features--with-caption', + title: 'With Caption', + }, + { + id: 'components-select-features--with-option-groups', + title: 'With Option Groups', + }, + { + id: 'components-select-features--with-placeholder-option', + title: 'With Placeholder Option', + }, +] as const - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-select-features--visually-hidden-label', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', +test.describe('Select', () => { + for (const story of stories) { + test.describe(story.title, () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, }, - }, - }) - }) - }) - } - }) + }) - test.describe('With Caption', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-select-features--with-caption', - globals: { - colorScheme: theme, - }, + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `Select.${story.title}.${theme}.png`, + ) }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Select.With Caption.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-select-features--with-caption', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', + test('axe @aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, }, - }, - }) - }) - }) - } - }) - - test.describe('With Option Groups', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-select-features--with-option-groups', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Select.With Option Groups.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-select-features--with-option-groups', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, }, - }, + }) }) }) - }) - } - }) + } + }) + } }) diff --git a/e2e/components/TextInputWithTokens.test.ts b/e2e/components/TextInputWithTokens.test.ts index a08368328b9..7331bd43939 100644 --- a/e2e/components/TextInputWithTokens.test.ts +++ b/e2e/components/TextInputWithTokens.test.ts @@ -2,88 +2,71 @@ import {test, expect} from '@playwright/test' import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' -test.describe('TextInputWithTokens', () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-textinputwithtokens--default', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`TextInputWithTokens.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-textinputwithtokens--default', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('With Leading Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-textinputwithtokens-features--with-leading-visual', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`TextInputWithTokens.With Leading Visual.${theme}.png`) - }) +const stories = [ + { + id: 'components-textinputwithtokens--default', + title: 'Default', + }, + { + id: 'components-textinputwithtokens-features--with-leading-visual', + title: 'With Leading Visual', + }, + { + id: 'components-textinputwithtokens-features--with-trailing-visual', + title: 'With Trailing Visual', + }, + { + id: 'components-textinputwithtokens-features--max-height', + title: 'Max Height', + }, + { + id: 'components-textinputwithtokens-features--prevent-tokens-from-wrapping', + title: 'Prevent Tokens From Wrapping', + }, + { + id: 'components-textinputwithtokens-features--size', + title: 'Size', + }, + { + id: 'components-textinputwithtokens-features--truncated', + title: 'Truncated', + }, +] as const - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-textinputwithtokens-features--with-leading-visual', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) +test.describe('TextInputWithTokens', () => { + for (const story of stories) { + test.describe(story.title, () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + }, + }) - test.describe('With Trailing Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-textinputwithtokens-features--with-trailing-visual', - globals: { - colorScheme: theme, - }, + // Default state + expect(await page.screenshot()).toMatchSnapshot(`TextInputWithTokens.${story.title}.${theme}.png`) }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`TextInputWithTokens.With Trailing Visual.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-textinputwithtokens-features--with-trailing-visual', - globals: { - colorScheme: theme, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) }) - await expect(page).toHaveNoViolations() }) - }) - } - }) + } + }) + } }) diff --git a/e2e/components/Textarea.test.ts b/e2e/components/Textarea.test.ts index 6df9ca2792e..828436027fd 100644 --- a/e2e/components/Textarea.test.ts +++ b/e2e/components/Textarea.test.ts @@ -2,200 +2,85 @@ import {test, expect} from '@playwright/test' import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' -test.describe('Textarea', () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-textarea--default', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Textarea.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-textarea--default', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('Block', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-textarea-features--block', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Textarea.Block.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-textarea-features--block', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('Disabled', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-textarea-features--disabled', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Textarea.Disabled.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-textarea-features--disabled', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('Error', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-textarea-features--error', - globals: { - colorScheme: theme, - }, - }) +const stories = [ + { + id: 'components-textarea--default', + title: 'Default', + }, + { + id: 'components-textarea-features--block', + title: 'Block', + }, + { + id: 'components-textarea-features--disabled', + title: 'Disabled', + }, + { + id: 'components-textarea-features--error', + title: 'Error', + }, + { + id: 'components-textarea-features--success', + title: 'Success', + }, + { + id: 'components-textarea-features--visually-hidden-label', + title: 'Visually Hidden Label', + }, + { + id: 'components-textarea-features--with-caption', + title: 'With Caption', + }, + { + id: 'components-textarea-features--custom-height', + title: 'Custom Height', + }, + { + id: 'components-textarea-features--custom-resize-behavior', + title: 'Custom Resize Behavior', + }, + { + id: 'components-textarea-features--custom-width', + title: 'Custom Width', + }, +] as const - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Textarea.Error.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-textarea-features--error', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('Success', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-textarea-features--success', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Textarea.Success.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-textarea-features--success', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('Visually Hidden Label', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-textarea-features--visually-hidden-label', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Textarea.Visually Hidden Label.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-textarea-features--visually-hidden-label', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('With Caption', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-textarea-features--with-caption', - globals: { - colorScheme: theme, - }, +test.describe('Textarea', () => { + for (const story of stories) { + test.describe(story.title, () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `Textarea.${story.title}.${theme}.png`, + ) }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Textarea.With Caption.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-textarea-features--with-caption', - globals: { - colorScheme: theme, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) }) - await expect(page).toHaveNoViolations() }) - }) - } - }) + } + }) + } }) diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx index db90164b260..5d3401b9e60 100644 --- a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx +++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx @@ -2,7 +2,7 @@ import type {ChangeEventHandler, RefObject} from 'react' import React, {useCallback, useEffect, useRef, useState} from 'react' import type {Meta} from '@storybook/react' -import {BaseStyles, Box, ThemeProvider, registerPortalRoot} from '..' +import {BaseStyles, Box, Stack, ThemeProvider, registerPortalRoot} from '..' import {Dialog} from '../DialogV1' import TextInputTokens from '../TextInputWithTokens' import Autocomplete from './Autocomplete' @@ -16,7 +16,6 @@ import { formControlArgTypes, getFormControlArgsByChildComponent, getTextInputArgTypes, - textInputWithTokensArgTypes, } from '../utils/story-helpers' type AutocompleteOverlayArgs = ComponentProps @@ -102,8 +101,6 @@ const items: Datum[] = [ {text: 'design-systems', id: '6'}, ] -const mockTokens: Datum[] = [...items].slice(0, 3) - const autocompleteStoryMeta: Meta = { title: 'Components/Autocomplete/Features', decorators: [ @@ -219,9 +216,7 @@ const autocompleteStoryMeta: Meta = { }, } as Meta -export const WithTokenInput = (args: FormControlArgs) => { - const {parentArgs, labelArgs, captionArgs, validationArgs} = getFormControlArgsByChildComponent(args) - const {menuArgs, overlayArgs, textInputWithTokensArgs} = getArgsByChildComponent(args) +export const WithTokenInput = () => { const [tokens, setTokens] = useState([]) const selectedTokenIds = tokens.map(token => token.id) const [selectedItemIds, setSelectedItemIds] = useState>(selectedTokenIds) @@ -252,162 +247,68 @@ export const WithTokenInput = (args: FormControlArgs) => { return ( - - + + Default label - - + + - {captionArgs.children && } - {validationArgs.children && validationArgs.variant && ( - - )} ) } -WithTokenInput.argTypes = { - ...autocompleteStoryMeta.argTypes, - ...getTextInputArgTypes('TextInput props'), - ...textInputWithTokensArgTypes, -} -WithTokenInput.args = { - block: true, - selectionVariant: 'multiple', -} -WithTokenInput.parameters = { - controls: { - exclude: [...excludedControlKeys, 'size'], - }, -} - -export const AddNewItem = (args: FormControlArgs) => { - const {parentArgs, labelArgs, captionArgs, validationArgs} = getFormControlArgsByChildComponent(args) - const {menuArgs, overlayArgs, textInputWithTokensArgs} = getArgsByChildComponent(args) - const [localItemsState, setLocalItemsState] = useState(items.slice(0, 3)) - const [filterVal, setFilterVal] = useState('') - const [tokens, setTokens] = useState(mockTokens) - const selectedTokenIds = tokens.map(token => token.id) - const [selectedItemIds, setSelectedItemIds] = useState>(selectedTokenIds) - const onTokenRemove: (tokenId: string | number) => void = tokenId => { - setTokens(tokens.filter(token => token.id !== tokenId)) - setSelectedItemIds(selectedItemIds.filter(id => id !== tokenId)) - } - const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => { - if (!Array.isArray(newlySelectedItems)) { - return - } - - setSelectedItemIds(newlySelectedItems.map(item => item.id)) - - if (newlySelectedItems.length < selectedItemIds.length) { - const newlySelectedItemIds = newlySelectedItems.map(({id}) => id) - const removedItemIds = selectedTokenIds.filter(id => !newlySelectedItemIds.includes(id)) - for (const removedItemId of removedItemIds) { - onTokenRemove(removedItemId) - } - - return - } - - setTokens(newlySelectedItems.map(({id, text}) => ({id, text}))) - } - - const onItemSelect: (item: Datum) => void = item => { - onSelectedChange([ - ...selectedItemIds.map(id => localItemsState.find(selectedItem => selectedItem.id === id) as Datum), - item, - ]) - - if (!localItemsState.some(localItem => localItem.id === item.id)) { - setLocalItemsState([...localItemsState, item]) - } - } - - const handleChange: ChangeEventHandler = e => { - setFilterVal(e.currentTarget.value) - } +export const AddNewItem = () => { + const [inputValue, setInputValue] = React.useState('') return ( - - + + Label { + setInputValue(e.currentTarget.value) + }} /> - + localItem.text).includes(filterVal) + inputValue && !items.map(item => item.text).includes(inputValue) ? { - id: filterVal, - text: `Add '${filterVal}'`, - handleAddItem: item => { - onItemSelect({ - ...item, - text: filterVal, - selected: true, - id: `${tokens.length}`, - }) - setFilterVal('') + text: inputValue, + id: inputValue, + // `handleAddItem` callback isn't needed for this specific example, + // but it's included here to show that it exists + handleAddItem: selectedItem => { + // eslint-disable-next-line no-console + console.log('added item:', selectedItem) + return }, } : undefined } - items={localItemsState} - selectedItemIds={selectedItemIds} - onSelectedChange={onSelectedChange} - aria-labelledby="autocompleteLabel" - {...menuArgs} + items={items} /> - {captionArgs.children && } - {validationArgs.children && validationArgs.variant && ( - - )} ) } -AddNewItem.args = { - block: true, - selectionVariant: 'multiple', -} -AddNewItem.argTypes = { - ...autocompleteStoryMeta.argTypes, - ...getTextInputArgTypes('TextInput props'), - ...textInputWithTokensArgTypes, -} -AddNewItem.parameters = { - controls: { - exclude: [...excludedControlKeys, 'size'], - }, -} -export const CustomSearchFilterFn = (args: FormControlArgs) => { - const {parentArgs, labelArgs, captionArgs, validationArgs} = getFormControlArgsByChildComponent(args) - const {menuArgs, overlayArgs, textInputArgs} = getArgsByChildComponent(args) +export const CustomSearchFilterFn = () => { const [filterVal, setFilterVal] = useState('') const handleChange: ChangeEventHandler = e => { setFilterVal(e.currentTarget.value) @@ -416,35 +317,28 @@ export const CustomSearchFilterFn = (args: FormControlArgs) => return ( - - + + Default label - - + + - {captionArgs.children && } - {validationArgs.children && validationArgs.variant && ( - - )} + + Items in dropdown are filtered if their text has no part that matches the input value + ) } -CustomSearchFilterFn.args = { - captionChildren: 'Items in dropdown are filtered if their text has no part that matches the input value', -} -export const CustomSortAfterMenuClose = (args: FormControlArgs) => { - const {parentArgs, labelArgs, captionArgs, validationArgs} = getFormControlArgsByChildComponent(args) - const {menuArgs, overlayArgs, textInputArgs} = getArgsByChildComponent(args) +export const CustomSortAfterMenuClose = () => { const [selectedItemIds, setSelectedItemIds] = useState>([]) const isItemSelected = (itemId: string) => selectedItemIds.includes(itemId) const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => { @@ -459,66 +353,52 @@ export const CustomSortAfterMenuClose = (args: FormControlArgs return ( - - + + Default label - - + + - {captionArgs.children && } - {validationArgs.children && validationArgs.variant && ( - - )} + When the dropdown closes, selected items are sorted to the end ) } -CustomSortAfterMenuClose.args = { - captionChildren: 'When the dropdown closes, selected items are sorted to the end', -} -export const WithCallbackWhenOverlayOpenStateChanges = (args: FormControlArgs) => { - const {parentArgs, labelArgs, captionArgs, validationArgs} = getFormControlArgsByChildComponent(args) - const {menuArgs, overlayArgs, textInputArgs} = getArgsByChildComponent(args) +export const WithCallbackWhenOverlayOpenStateChanges = () => { const [isMenuOpen, setIsMenuOpen] = useState(false) const onOpenChange = (isOpen: boolean) => { setIsMenuOpen(isOpen) } return ( - - - + + + Default label - - + + - {captionArgs.children && } - {validationArgs.children && validationArgs.variant && ( - - )}
The menu is {isMenuOpen ? 'opened' : 'closed'}
- + ) } @@ -526,10 +406,12 @@ export const AsyncLoadingOfItems = (args: FormControlArgs) => const {parentArgs, labelArgs, captionArgs, validationArgs} = getFormControlArgsByChildComponent(args) const {menuArgs, overlayArgs, textInputArgs} = getArgsByChildComponent(args) const [loadedItems, setLoadedItems] = useState([]) - const onOpenChange = () => { - setTimeout(() => { - setLoadedItems(items) - }, 1500) + const onOpenChange = (isOpen: boolean) => { + if (isOpen) { + setTimeout(() => { + setLoadedItems(items) + }, 1500) + } } return ( @@ -559,51 +441,41 @@ export const AsyncLoadingOfItems = (args: FormControlArgs) => } AsyncLoadingOfItems.parameters = {controls: {exclude: [...excludedControlKeys, 'loading']}} -export const RenderingTheMenuOutsideAnOverlay = (args: FormControlArgs) => { - const {parentArgs, labelArgs, captionArgs, validationArgs} = getFormControlArgsByChildComponent(args) - const {menuArgs, textInputArgs} = getArgsByChildComponent(args) - +export const RenderingTheMenuOutsideAnOverlay = () => { return ( - - + + Default label - - + + - {captionArgs.children && } - {validationArgs.children && validationArgs.variant && ( - - )} ) } -RenderingTheMenuOutsideAnOverlay.parameters = { - controls: { - exclude: [...excludedControlKeys, 'anchorSide', 'height', 'maxHeight', 'width'], - }, -} -export const CustomOverlayMenuAnchor = (args: FormControlArgs) => { - const {parentArgs, labelArgs, captionArgs, validationArgs} = getFormControlArgsByChildComponent(args) - const {menuArgs, overlayArgs, textInputArgs} = getArgsByChildComponent(args) +export const CustomOverlayMenuAnchor = () => { const menuAnchorRef = useRef(null) - const anchorWrapperStyles = { - display: 'flex', - alignItems: 'center', - flexGrow: 1, - flexShrink: 0, - flexBasis: '25%', - border: '1px solid black', - padding: '1em', - } return ( - - - }> + + + Default label + + } + sx={{ + display: 'flex', + alignItems: 'center', + flexGrow: 1, + flexShrink: 0, + flexBasis: '25%', + border: '1px solid black', + padding: '1em', + }} + > ) boxShadow: 'none', }, }} - {...textInputArgs} - size={textInputArgs.inputSize} /> - - + + - {captionArgs.children && } - {validationArgs.children && validationArgs.variant && ( - - )} + + The overlay menu position is anchored to the div with the black border instead of to the text input + ) } -CustomOverlayMenuAnchor.args = { - captionChildren: `The overlay menu's position is anchored to the div with the black border instead of to the text input`, -} -export const InOverlayWithCustomScrollContainerRef = (args: FormControlArgs) => { - const {menuArgs, textInputArgs} = getArgsByChildComponent(args) +export const InOverlayWithCustomScrollContainerRef = () => { const scrollContainerRef = useRef(null) const inputRef = useRef(null) const triggerRef = useRef(null) @@ -673,8 +538,21 @@ export const InOverlayWithCustomScrollContainerRef = (args: FormControlArgs } > - - + + - }> + } + sx={{ + overflow: 'auto', + flexGrow: 1, + }} + > @@ -710,22 +591,7 @@ export const InOverlayWithCustomScrollContainerRef = (args: FormControlArgs) => { - const {overlayArgs} = getArgsByChildComponent(args) +export const InADialog = () => { const outerContainerRef = useRef(null) const [mounted, setMounted] = useState(false) const [isDialogOpen, setIsDialogOpen] = useState(false) @@ -745,10 +611,10 @@ export const InADialog = (args: FormControlArgs) => { {mounted ? ( - + Default label - + @@ -765,18 +631,4 @@ export const InADialog = (args: FormControlArgs) => { ) } -InADialog.parameters = { - controls: { - exclude: [ - ...excludedControlKeys, - ...Object.keys(formControlArgTypes), - ...Object.keys(getTextInputArgTypes()), - 'input (size)', - 'children', - 'emptyStateText', - 'selectionVariant', - ], - }, -} - export default autocompleteStoryMeta diff --git a/packages/react/src/Autocomplete/Autocomplete.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.stories.tsx index f0d1dd21bdb..b47abb90f09 100644 --- a/packages/react/src/Autocomplete/Autocomplete.stories.tsx +++ b/packages/react/src/Autocomplete/Autocomplete.stories.tsx @@ -229,7 +229,23 @@ const autocompleteStoryMeta: Meta = { }, } as Meta -export const Default = (args: FormControlArgs) => { +export const Default = () => { + return ( + event.preventDefault()}> + + Label + + + + + + + + + ) +} + +export const Playground = (args: FormControlArgs) => { const {parentArgs, labelArgs, captionArgs, validationArgs} = getFormControlArgsByChildComponent(args) const {menuArgs, inputArgs, overlayArgs, textInputArgs} = getArgsByChildComponent(args) const isMultiselect = menuArgs.selectionVariant === 'multiple' @@ -274,7 +290,7 @@ export const Default = (args: FormControlArgs) => { ) } -Default.play = async ({canvasElement}: {canvasElement: HTMLElement}) => { +Playground.play = async ({canvasElement}: {canvasElement: HTMLElement}) => { const canvas = within(canvasElement) const inputBox = canvas.getByTestId('autocompleteInput') await userEvent.click(inputBox) diff --git a/packages/react/src/Select/Select.features.stories.tsx b/packages/react/src/Select/Select.features.stories.tsx index ff25f5dffe8..1279d3d0dd6 100644 --- a/packages/react/src/Select/Select.features.stories.tsx +++ b/packages/react/src/Select/Select.features.stories.tsx @@ -175,3 +175,19 @@ export const WithCustomStyling = () => ( ) + +export const WithPlaceholderOption = () => ( + + + Default label + + + +) diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.features.stories.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.features.stories.tsx index 46588e6870d..3ed5be14f46 100644 --- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.features.stories.tsx +++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.features.stories.tsx @@ -142,3 +142,73 @@ export const Unstyled = () => { ) } + +export const PreventTokensFromWrapping = () => { + const [tokens, setTokens] = useState([...mockTokens].slice(0, 3)) + const onTokenRemove: (tokenId: string | number) => void = tokenId => { + setTokens(tokens.filter(token => token.id !== tokenId)) + } + + return ( + + + Default label + + + + ) +} + +export const MaxHeight = () => { + const [tokens, setTokens] = useState([...mockTokens].slice(0, 7)) + const onTokenRemove: (tokenId: string | number) => void = tokenId => { + setTokens(tokens.filter(token => token.id !== tokenId)) + } + + return ( + + {/* Setting max-width to force tokens to wrap and demo `maxHeight` behavior */} + + Default label + + + + ) +} + +export const Size = () => { + const [tokens, setTokens] = useState([...mockTokens].slice(0, 3)) + const onTokenRemove: (tokenId: string | number) => void = tokenId => { + setTokens(tokens.filter(token => token.id !== tokenId)) + } + + return ( + + + Default label + + + + ) +} + +export const Truncated = () => { + const [tokens, setTokens] = useState(mockTokens) + const onTokenRemove: (tokenId: string | number) => void = tokenId => { + setTokens(tokens.filter(token => token.id !== tokenId)) + } + + return ( + + + Default label + + + + ) +} diff --git a/packages/react/src/Textarea/Textarea.features.stories.tsx b/packages/react/src/Textarea/Textarea.features.stories.tsx index 553164f3b8c..cc34c900b80 100644 --- a/packages/react/src/Textarea/Textarea.features.stories.tsx +++ b/packages/react/src/Textarea/Textarea.features.stories.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Box, FormControl, Heading} from '..' +import {Box, FormControl, Heading, Stack} from '..' import Textarea from '../Textarea' export default { @@ -66,3 +66,42 @@ export const Block = () => ( ) + +export const CustomHeight = () => ( + + + Default label +