diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-AllShowcases-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-AllShowcases-dark-chromium-linux.png new file mode 100644 index 0000000000..d5a194c0df Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-AllShowcases-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-AllShowcases-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-AllShowcases-dark-webkit-linux.png new file mode 100644 index 0000000000..6b0c85e23d Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-AllShowcases-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-AllShowcases-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-AllShowcases-light-chromium-linux.png new file mode 100644 index 0000000000..6b7c4e7811 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-AllShowcases-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-AllShowcases-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-AllShowcases-light-webkit-linux.png new file mode 100644 index 0000000000..9c8db0079d Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-AllShowcases-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Custom-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Custom-dark-chromium-linux.png new file mode 100644 index 0000000000..d0e5a87e03 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Custom-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Custom-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Custom-dark-webkit-linux.png new file mode 100644 index 0000000000..6191a2f0d0 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Custom-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Custom-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Custom-light-chromium-linux.png new file mode 100644 index 0000000000..60698949d3 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Custom-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Custom-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Custom-light-webkit-linux.png new file mode 100644 index 0000000000..054a4aae3d Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Custom-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-CustomShowcases-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-CustomShowcases-dark-chromium-linux.png new file mode 100644 index 0000000000..c2f027c3f6 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-CustomShowcases-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-CustomShowcases-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-CustomShowcases-dark-webkit-linux.png new file mode 100644 index 0000000000..8c59d3f2b6 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-CustomShowcases-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-CustomShowcases-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-CustomShowcases-light-chromium-linux.png new file mode 100644 index 0000000000..decef6fb37 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-CustomShowcases-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-CustomShowcases-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-CustomShowcases-light-webkit-linux.png new file mode 100644 index 0000000000..51f10dcd55 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-CustomShowcases-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Default-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Default-dark-chromium-linux.png new file mode 100644 index 0000000000..3b87ef2e78 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Default-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Default-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Default-dark-webkit-linux.png new file mode 100644 index 0000000000..e0f4ad5e7d Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Default-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Default-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Default-light-chromium-linux.png new file mode 100644 index 0000000000..df137b3226 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Default-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Default-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Default-light-webkit-linux.png new file mode 100644 index 0000000000..a511a618c7 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Default-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Disabled-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Disabled-dark-chromium-linux.png new file mode 100644 index 0000000000..65e1d13700 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Disabled-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Disabled-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Disabled-dark-webkit-linux.png new file mode 100644 index 0000000000..7a99a78bdf Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Disabled-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Disabled-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Disabled-light-chromium-linux.png new file mode 100644 index 0000000000..b920adf088 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Disabled-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Disabled-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Disabled-light-webkit-linux.png new file mode 100644 index 0000000000..fe93e1749e Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Disabled-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ErrorPlacement-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ErrorPlacement-dark-chromium-linux.png new file mode 100644 index 0000000000..0e67a976f3 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ErrorPlacement-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ErrorPlacement-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ErrorPlacement-dark-webkit-linux.png new file mode 100644 index 0000000000..d002004395 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ErrorPlacement-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ErrorPlacement-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ErrorPlacement-light-chromium-linux.png new file mode 100644 index 0000000000..ffa33becee Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ErrorPlacement-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ErrorPlacement-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ErrorPlacement-light-webkit-linux.png new file mode 100644 index 0000000000..e6dc7327e9 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ErrorPlacement-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-HasClear-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-HasClear-dark-chromium-linux.png new file mode 100644 index 0000000000..1054afc2f6 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-HasClear-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-HasClear-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-HasClear-dark-webkit-linux.png new file mode 100644 index 0000000000..3019c0779a Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-HasClear-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-HasClear-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-HasClear-light-chromium-linux.png new file mode 100644 index 0000000000..80df7979dd Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-HasClear-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-HasClear-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-HasClear-light-webkit-linux.png new file mode 100644 index 0000000000..a054f89dda Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-HasClear-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Pin-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Pin-dark-chromium-linux.png new file mode 100644 index 0000000000..986fdb99b9 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Pin-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Pin-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Pin-dark-webkit-linux.png new file mode 100644 index 0000000000..a231765ac4 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Pin-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Pin-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Pin-light-chromium-linux.png new file mode 100644 index 0000000000..752d4ccd29 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Pin-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Pin-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Pin-light-webkit-linux.png new file mode 100644 index 0000000000..e2836bedf8 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Pin-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Size-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Size-dark-chromium-linux.png new file mode 100644 index 0000000000..e1b229ba58 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Size-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Size-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Size-dark-webkit-linux.png new file mode 100644 index 0000000000..122cece46f Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Size-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Size-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Size-light-chromium-linux.png new file mode 100644 index 0000000000..b40ee91846 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Size-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Size-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Size-light-webkit-linux.png new file mode 100644 index 0000000000..b677609d16 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-Size-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ValidationState-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ValidationState-dark-chromium-linux.png new file mode 100644 index 0000000000..a1bd39e807 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ValidationState-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ValidationState-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ValidationState-dark-webkit-linux.png new file mode 100644 index 0000000000..b58d2fbb19 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ValidationState-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ValidationState-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ValidationState-light-chromium-linux.png new file mode 100644 index 0000000000..01394683f7 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ValidationState-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ValidationState-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ValidationState-light-webkit-linux.png new file mode 100644 index 0000000000..a2f51ff3f6 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-ValidationState-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-View-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-View-dark-chromium-linux.png new file mode 100644 index 0000000000..3b5f94d1e2 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-View-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-View-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-View-dark-webkit-linux.png new file mode 100644 index 0000000000..beed70489d Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-View-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-View-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-View-light-chromium-linux.png new file mode 100644 index 0000000000..fe9db0f705 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-View-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-View-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-View-light-webkit-linux.png new file mode 100644 index 0000000000..3c24acc090 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-View-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEmailType-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEmailType-dark-chromium-linux.png new file mode 100644 index 0000000000..151dac22c2 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEmailType-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEmailType-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEmailType-dark-webkit-linux.png new file mode 100644 index 0000000000..574205de33 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEmailType-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEmailType-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEmailType-light-chromium-linux.png new file mode 100644 index 0000000000..6482500056 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEmailType-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEmailType-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEmailType-light-webkit-linux.png new file mode 100644 index 0000000000..f07345fae1 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEmailType-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEndContent-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEndContent-dark-chromium-linux.png new file mode 100644 index 0000000000..6a461ecb80 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEndContent-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEndContent-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEndContent-dark-webkit-linux.png new file mode 100644 index 0000000000..7e86d0b5fe Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEndContent-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEndContent-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEndContent-light-chromium-linux.png new file mode 100644 index 0000000000..02f3908eab Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEndContent-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEndContent-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEndContent-light-webkit-linux.png new file mode 100644 index 0000000000..988c49260e Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithEndContent-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithLabel-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithLabel-dark-chromium-linux.png new file mode 100644 index 0000000000..aa3c9b6337 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithLabel-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithLabel-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithLabel-dark-webkit-linux.png new file mode 100644 index 0000000000..e99b7d522a Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithLabel-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithLabel-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithLabel-light-chromium-linux.png new file mode 100644 index 0000000000..bb59cea17f Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithLabel-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithLabel-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithLabel-light-webkit-linux.png new file mode 100644 index 0000000000..461af8181d Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithLabel-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNote-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNote-dark-chromium-linux.png new file mode 100644 index 0000000000..df1e12128b Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNote-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNote-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNote-dark-webkit-linux.png new file mode 100644 index 0000000000..ab88f5c47a Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNote-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNote-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNote-light-chromium-linux.png new file mode 100644 index 0000000000..a9dafaeb5a Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNote-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNote-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNote-light-webkit-linux.png new file mode 100644 index 0000000000..dc424301f7 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNote-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNumberType-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNumberType-dark-chromium-linux.png new file mode 100644 index 0000000000..0a66d3c1ff Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNumberType-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNumberType-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNumberType-dark-webkit-linux.png new file mode 100644 index 0000000000..07487acc0c Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNumberType-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNumberType-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNumberType-light-chromium-linux.png new file mode 100644 index 0000000000..5ddf11505b Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNumberType-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNumberType-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNumberType-light-webkit-linux.png new file mode 100644 index 0000000000..0d13d2cc6b Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithNumberType-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithPasswordType-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithPasswordType-dark-chromium-linux.png new file mode 100644 index 0000000000..15822eaa37 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithPasswordType-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithPasswordType-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithPasswordType-dark-webkit-linux.png new file mode 100644 index 0000000000..015f932171 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithPasswordType-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithPasswordType-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithPasswordType-light-chromium-linux.png new file mode 100644 index 0000000000..9cac4df970 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithPasswordType-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithPasswordType-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithPasswordType-light-webkit-linux.png new file mode 100644 index 0000000000..bb117066b4 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithPasswordType-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithSearchType-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithSearchType-dark-chromium-linux.png new file mode 100644 index 0000000000..4466f449fc Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithSearchType-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithSearchType-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithSearchType-dark-webkit-linux.png new file mode 100644 index 0000000000..50e235ca2c Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithSearchType-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithSearchType-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithSearchType-light-chromium-linux.png new file mode 100644 index 0000000000..b9bc1083cc Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithSearchType-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithSearchType-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithSearchType-light-webkit-linux.png new file mode 100644 index 0000000000..827f488f12 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithSearchType-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithStartContent-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithStartContent-dark-chromium-linux.png new file mode 100644 index 0000000000..98346ab3e3 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithStartContent-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithStartContent-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithStartContent-dark-webkit-linux.png new file mode 100644 index 0000000000..edaa6fbd34 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithStartContent-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithStartContent-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithStartContent-light-chromium-linux.png new file mode 100644 index 0000000000..24f3c04fb6 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithStartContent-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithStartContent-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithStartContent-light-webkit-linux.png new file mode 100644 index 0000000000..4836ca7db8 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithStartContent-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTelType-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTelType-dark-chromium-linux.png new file mode 100644 index 0000000000..fc379740ff Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTelType-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTelType-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTelType-dark-webkit-linux.png new file mode 100644 index 0000000000..c9a8c250e4 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTelType-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTelType-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTelType-light-chromium-linux.png new file mode 100644 index 0000000000..1372715af3 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTelType-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTelType-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTelType-light-webkit-linux.png new file mode 100644 index 0000000000..3591dea088 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTelType-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTextType-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTextType-dark-chromium-linux.png new file mode 100644 index 0000000000..3b87ef2e78 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTextType-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTextType-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTextType-dark-webkit-linux.png new file mode 100644 index 0000000000..e0f4ad5e7d Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTextType-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTextType-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTextType-light-chromium-linux.png new file mode 100644 index 0000000000..df137b3226 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTextType-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTextType-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTextType-light-webkit-linux.png new file mode 100644 index 0000000000..a511a618c7 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithTextType-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithUrlType-dark-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithUrlType-dark-chromium-linux.png new file mode 100644 index 0000000000..3baa18e438 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithUrlType-dark-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithUrlType-dark-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithUrlType-dark-webkit-linux.png new file mode 100644 index 0000000000..61111416c6 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithUrlType-dark-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithUrlType-light-chromium-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithUrlType-light-chromium-linux.png new file mode 100644 index 0000000000..286a27bd47 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithUrlType-light-chromium-linux.png differ diff --git a/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithUrlType-light-webkit-linux.png b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithUrlType-light-webkit-linux.png new file mode 100644 index 0000000000..f6d5abbec1 Binary files /dev/null and b/src/components/controls/TextInput/__snapshots__/TextInput.visual.test.tsx-snapshots/TextInput-render-story-WithUrlType-light-webkit-linux.png differ diff --git a/src/components/controls/TextInput/__stories__/TextInput.stories.tsx b/src/components/controls/TextInput/__stories__/TextInput.stories.tsx index 8451e5a17a..abac66aea8 100644 --- a/src/components/controls/TextInput/__stories__/TextInput.stories.tsx +++ b/src/components/controls/TextInput/__stories__/TextInput.stories.tsx @@ -1,9 +1,13 @@ import React from 'react'; -import type {Meta, StoryFn} from '@storybook/react'; +import {action} from '@storybook/addon-actions'; +import {useArgs} from '@storybook/preview-api'; +import type {Meta, StoryObj} from '@storybook/react'; -import {TextInput} from '../TextInput'; +import {Showcase} from '../../../../demo/Showcase'; +import {ShowcaseItem} from '../../../../demo/ShowcaseItem'; import type {TextInputProps} from '../TextInput'; +import {TextInput} from '../TextInput'; import {CustomThemeShowcase} from './TextInputCustomThemeShowcase'; import {TextInputShowcase} from './TextInputShowcase'; @@ -33,21 +37,266 @@ export default { }, }, }, + decorators: [ + function useTextValue(Story, ctx) { + const [, setArgs] = useArgs(); + + const handleUpdate = (value: string) => { + ctx.args.onValueChange?.(value); + + // Check if the component is controlled + if (ctx.args.value !== undefined) { + setArgs({value}); + } + }; + + return ; + }, + ], } as Meta; -const fixConsoleErrors = { - onKeyDown: () => {}, - onKeyUp: () => {}, - onKeyPress: () => {}, +type Story = StoryObj; + +export const Default: Story = { + args: { + onChange: action('onChange'), + onBlur: action('onBlur'), + onFocus: action('onFocus'), + onKeyDown: action('onKeyDown'), + onKeyPress: action('onKeyPress'), + onKeyUp: action('onKeyUp'), + onUpdate: action('onUpdate'), + value: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.', + placeholder: 'Type text...', + }, +}; + +export const AllShowcases: Story = { + render: (args) => , +}; + +export const CustomShowcases: Story = { + render: (args) => , +}; + +const viewCases: Array> = ['normal', 'clear']; + +export const View: Story = { + render: (args) => ( + + {viewCases.map((view, index) => ( + + + + ))} + + ), + args: { + ...Default.args, + }, +}; + +const sizeCases: Array> = ['s', 'm', 'l', 'xl']; + +export const Size: Story = { + render: (args) => ( + + {sizeCases.map((size, index) => ( + + + + ))} + + ), + args: { + ...Default.args, + }, +}; + +const pinCases: Array> = [ + 'round-round', + 'brick-brick', + 'clear-clear', + 'round-brick', + 'brick-round', + 'round-clear', + 'clear-round', + 'brick-clear', + 'clear-brick', +]; + +export const Pin: Story = { + render: (args) => ( + + {pinCases.map((pin, index) => ( + + + + ))} + + ), + args: { + ...Default.args, + }, +}; + +const validationStateCases: Array> = ['invalid']; + +export const ValidationState: Story = { + render: (args) => ( + + {validationStateCases.map((validationState, index) => ( + + + + ))} + + ), + args: { + ...Default.args, + }, }; -const DefaultTemplate: StoryFn = (args) => ( - -); -export const Default = DefaultTemplate.bind({}); +const errorPlacementCases: Array> = [ + 'outside', + 'inside', +]; -const ShowcaseTemplate: StoryFn = () => ; -export const Showcase = ShowcaseTemplate.bind({}); +export const ErrorPlacement: Story = { + render: (args) => ( + + {errorPlacementCases.map((errorPlacement, index) => ( + + + + ))} + + ), + args: { + ...Default.args, + errorMessage: 'Error message', + validationState: 'invalid', + }, +}; + +export const Disabled: Story = { + args: { + ...Default.args, + disabled: true, + }, +}; + +export const HasClear: Story = { + args: { + ...Default.args, + hasClear: true, + }, +}; -const CustomThemeTemplate: StoryFn = () => ; -export const CustomTheme = CustomThemeTemplate.bind({}); +export const WithNote: Story = { + args: { + ...Default.args, + note: 'Note text', + }, +}; + +export const WithEndContent: Story = { + args: { + ...Default.args, + endContent: 'End content', + }, +}; + +export const WithStartContent: Story = { + args: { + ...Default.args, + startContent: 'Start content', + }, +}; + +export const WithLabel: Story = { + args: { + ...Default.args, + label: 'Label', + }, +}; + +export const WithEmailType: Story = { + args: { + ...Default.args, + value: 'test@gravity-ui.com', + type: 'email', + }, +}; + +export const WithNumberType: Story = { + args: { + ...Default.args, + value: '1234', + type: 'number', + }, +}; + +export const WithPasswordType: Story = { + args: { + ...Default.args, + value: 'qwerty', + type: 'password', + }, +}; + +export const WithSearchType: Story = { + args: { + ...Default.args, + value: 'query', + type: 'search', + }, +}; + +export const WithTelType: Story = { + args: { + ...Default.args, + value: '+7911111111', + type: 'tel', + }, +}; + +export const WithTextType: Story = { + args: { + ...Default.args, + type: 'text', + }, +}; + +export const WithUrlType: Story = { + args: { + ...Default.args, + value: 'https://gravity-ui.com/', + type: 'url', + }, +}; + +export const Custom: Story = { + render: (args) => ( + + + + + ), + args: { + ...Default.args, + }, +}; diff --git a/src/components/controls/TextInput/__tests__/TextInput.visual.test.tsx b/src/components/controls/TextInput/__tests__/TextInput.visual.test.tsx new file mode 100644 index 0000000000..ad61a244ab --- /dev/null +++ b/src/components/controls/TextInput/__tests__/TextInput.visual.test.tsx @@ -0,0 +1,139 @@ +import React from 'react'; + +import {test} from '~playwright/core'; + +import {TextInputStories} from './helpersPlaywright'; + +test.describe('TextInput', () => { + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); + + test('render story: ', async ({mount, expectScreenshot}) => { + await mount(); + + await expectScreenshot(); + }); +}); diff --git a/src/components/controls/TextInput/__tests__/helpersPlaywright.tsx b/src/components/controls/TextInput/__tests__/helpersPlaywright.tsx new file mode 100644 index 0000000000..4897302417 --- /dev/null +++ b/src/components/controls/TextInput/__tests__/helpersPlaywright.tsx @@ -0,0 +1,5 @@ +import {composeStories} from '@storybook/react'; + +import * as DefaultTextInputStories from '../__stories__/TextInput.stories'; + +export const TextInputStories = composeStories(DefaultTextInputStories);