diff --git a/.changeset/sour-pants-drive.md b/.changeset/sour-pants-drive.md new file mode 100644 index 0000000000..86c4620c4b --- /dev/null +++ b/.changeset/sour-pants-drive.md @@ -0,0 +1,14 @@ +--- +'@alfalab/core-components': minor +'@alfalab/core-components-input': minor +--- + +##### Input + +Раобота пропа `clear` разделена на 2 механики: +- `false` или `never` — не отображается +- `true` или `always` — отображается всегда +- `auto` — отображается только при взаимодействии c input (hover, focus) +- Исправлен размер контейнера иконки статусов (success, error) + +Булевы значения будут удалены в core-components@51 diff --git a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-desktop-screenshots-addons-theme-default-snap.png b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-desktop-screenshots-addons-theme-default-snap.png index 3a94cacc16..c6b49eabf4 100644 --- a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-desktop-screenshots-addons-theme-default-snap.png +++ b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-desktop-screenshots-addons-theme-default-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:da25a32d965d5396aa0aafbf1e895c5926bdac0cb99dfcf534b66442381b1ede -size 57285 +oid sha256:3fd871cee865a2f0628557871a15398723c13439bbc6fa30438cfe950baa44ea +size 55120 diff --git a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-desktop-screenshots-addons-theme-site-2-snap.png b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-desktop-screenshots-addons-theme-site-2-snap.png index bae48b3333..b26e0bebb0 100644 --- a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-desktop-screenshots-addons-theme-site-2-snap.png +++ b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-desktop-screenshots-addons-theme-site-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4a2717cd2a82455e0b6a62c21845803cac3924b2cde67762e6a23ff2787c1744 -size 55265 +oid sha256:81fd3711f098edf7bc5f1f92383afb975c72b4c3e6999fd1a887a3a8a732aef5 +size 53779 diff --git a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-desktop-screenshots-addons-theme-site-snap.png b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-desktop-screenshots-addons-theme-site-snap.png index a969b1cc49..48ac0ae22a 100644 --- a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-desktop-screenshots-addons-theme-site-snap.png +++ b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-desktop-screenshots-addons-theme-site-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c4a4706470e52b22d6e2bb2bd170ce8b2fb3ed1c08ae2280901b3079348891b9 -size 55369 +oid sha256:92bbcbd3407d7ce89d99faffcf1115d8d5111a038d13059ffcd40029639c8366 +size 53391 diff --git a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-screenshots-right-addons-site-theme-sprite-snap.png b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-screenshots-right-addons-site-theme-sprite-snap.png index d7e5256c4f..29c19387dd 100644 --- a/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-screenshots-right-addons-site-theme-sprite-snap.png +++ b/packages/input-autocomplete/src/__image_snapshots__/input-autocomplete-screenshots-right-addons-site-theme-sprite-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:626d515c240de9e4eb638383faf47d27faa291eef8be152e2f68262fb1119b85 -size 17865 +oid sha256:a8b12c8b954590ba6aa3315e3c65e1b3fe4f0bc758d992addbce6fa8f5ed8c7d +size 17863 diff --git a/packages/input/src/Component.test.tsx b/packages/input/src/Component.test.tsx index 22317727f7..579ed9f278 100644 --- a/packages/input/src/Component.test.tsx +++ b/packages/input/src/Component.test.tsx @@ -41,7 +41,7 @@ describe('Input', () => { expect(ref.current.classList.contains('wrapperClassName')); }); - it('should set `data-test-id` atribute to input', () => { + it('should set `data-test-id` attribute to input', () => { const dti = 'input-dti'; const { getByTestId } = render( { ); expect(getByTestIdHint(testIds.hint)).toBeInTheDocument(); - expect(getByTestId(testIds.successIcon)).toBeInTheDocument(); expect(getByTestId(testIds.clearIcon)).toBeInTheDocument(); }); + it('should set success `data-test-id` attribute to input', () => { + const dti = 'input-dti'; + + const { getByTestId } = render( + , + ); + + const testIds = getInputTestIds(dti); + + expect(getByTestId(testIds.successIcon)).toBeInTheDocument(); + }); + it('should set `aria-label` atribute to input', () => { const label = 'label'; const { getByLabelText } = render(); @@ -425,4 +436,124 @@ describe('Input', () => { expect(unmount).not.toThrow(); }); + + describe('clearButton tests', () => { + const dti = 'input-dti'; + + describe('auto', () => { + it('should not render if status icon and empty input', () => { + const { queryByTestId } = render( + , + ); + + const testIds = getInputTestIds(dti); + + expect(queryByTestId(testIds.clearIcon)).not.toBeInTheDocument(); + expect(queryByTestId(testIds.successIcon)).toBeInTheDocument(); + }); + + it('should not render if status icon', () => { + const { queryByTestId } = render( + , + ); + + const testIds = getInputTestIds(dti); + + expect(queryByTestId(testIds.clearIcon)).not.toBeInTheDocument(); + expect(queryByTestId(testIds.successIcon)).toBeInTheDocument(); + }); + + it('should render if status icon and focus input', async () => { + const { queryByTestId } = render( + , + ); + + const testIds = getInputTestIds(dti); + + const inputElement = queryByTestId(testIds.input); + + if (inputElement) { + await userEvent.click(inputElement); + } + + expect(queryByTestId(testIds.clearIcon)).toBeInTheDocument(); + expect(queryByTestId(testIds.successIcon)).not.toBeInTheDocument(); + }); + + it('should render if status icons and hover input', async () => { + const { queryByTestId } = render( + , + ); + + const testIds = getInputTestIds(dti); + + const inputElement = queryByTestId(testIds.input); + + if (inputElement) { + await userEvent.hover(inputElement); + } + + expect(queryByTestId(testIds.clearIcon)).toBeInTheDocument(); + expect(queryByTestId(testIds.successIcon)).not.toBeInTheDocument(); + }); + }); + + describe('always', () => { + it('should render if status icon', () => { + const { queryByTestId } = render( + , + ); + + const testIds = getInputTestIds(dti); + + expect(queryByTestId(testIds.clearIcon)).toBeInTheDocument(); + expect(queryByTestId(testIds.successIcon)).not.toBeInTheDocument(); + }); + + it('should render if status icon and focus input', async () => { + const { queryByTestId } = render( + , + ); + + const testIds = getInputTestIds(dti); + + const inputElement = queryByTestId(testIds.input); + + if (inputElement) { + await userEvent.click(inputElement); + } + + expect(queryByTestId(testIds.clearIcon)).toBeInTheDocument(); + expect(queryByTestId(testIds.successIcon)).not.toBeInTheDocument(); + }); + + it('should render if status icon and hover input', async () => { + const { queryByTestId } = render( + , + ); + + const testIds = getInputTestIds(dti); + + const inputElement = queryByTestId(testIds.input); + + if (inputElement) { + await userEvent.hover(inputElement); + } + + expect(queryByTestId(testIds.clearIcon)).toBeInTheDocument(); + expect(queryByTestId(testIds.successIcon)).not.toBeInTheDocument(); + }); + + it('should not render if status and empty input', async () => { + const { queryByTestId } = render( + , + ); + + const testIds = getInputTestIds(dti); + + expect(queryByTestId(testIds.clearIcon)).not.toBeInTheDocument(); + expect(queryByTestId(testIds.successIcon)).toBeInTheDocument(); + }); + }); + }); }); diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-001-default-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-001-default-snap.png new file mode 100644 index 0000000000..fd7166b202 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-001-default-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6856d53299e2f3d0ed50d788b2d6facbfea125adb6e24739a5a6babbeae9cb1b +size 2185 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-002-filled-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-002-filled-snap.png new file mode 100644 index 0000000000..ec444aeec6 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-002-filled-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:13228ecad1fac7fdc830a82501e8c5791d20458da5317cfe3c823e23dfca9810 +size 2719 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-003-error-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-003-error-snap.png new file mode 100644 index 0000000000..270938ad27 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-003-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:28e8efa5c1593a231ae4a4c25f9d8437eb750c993419206b63e88ac5800c1132 +size 5204 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-004-success-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-004-success-snap.png new file mode 100644 index 0000000000..0b8d553ccf --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-004-success-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ab625a8ec173a427561ef6baa2703109c97328acf30411866911595dce0f934f +size 4754 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-005-error-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-005-error-snap.png new file mode 100644 index 0000000000..09889041f6 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-005-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:28e79f29ae6b52c98312b59fb21d72659ad0d9b232c6e22dad48a0e5a428c35f +size 7527 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-006-success-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-006-success-snap.png new file mode 100644 index 0000000000..a7e753b79a --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-006-success-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bb075dbd0302ca8501ac45e4c5d46f0fdb1591b491e500a79109178a56f00c95 +size 7124 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-007-error-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-007-error-snap.png new file mode 100644 index 0000000000..b8b9eaae96 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-007-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:23845b4fbebe29c13461d06d01576f3a0117e32a839c8a1e77b130a2f3d90785 +size 7533 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-008-success-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-008-success-snap.png new file mode 100644 index 0000000000..28f6b1ef3a --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-008-success-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9eb76cb52842b0cd431de80c70b893d7c5ff1ef4fb5e731816a1ae4fccd23519 +size 7346 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-009-start-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-009-start-snap.png new file mode 100644 index 0000000000..00b1a00e3f --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-009-start-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:33a44b74391abc175093f4240fc80832030a7d39d54220e013b204429ac5c690 +size 3919 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-010-filling-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-010-filling-snap.png new file mode 100644 index 0000000000..b562cdc19d --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-010-filling-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:057bc9655c98b896bdf3c619b752d7885577844de78bb752e55f48e920eca06e +size 4262 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-011-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-011-hover-snap.png new file mode 100644 index 0000000000..924de200ba --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-011-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1443b3028046fdf671f5de027bbcf3dbbce2caa42078f02b1a56faa40de0fe1f +size 2147 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-012-filled-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-012-filled-hover-snap.png new file mode 100644 index 0000000000..3e09c055d7 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-012-filled-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a154e7d0554c641460f3bd6442ae24fd30d6f31b63c4ac892cabed7a70d468f2 +size 3883 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-013-error-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-013-error-hover-snap.png new file mode 100644 index 0000000000..46fc10192e --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-013-error-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e68b14ab849d6035cfe281a5408ab1ab76a46e4ae82f13c26ecb478fcff12e78 +size 5201 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-014-success-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-014-success-hover-snap.png new file mode 100644 index 0000000000..8141d766d2 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-014-success-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e8ee716d185f3b4795c8a609241afb89e263f3d85886945636cdefd216ef2638 +size 4708 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-015-error-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-015-error-hover-snap.png new file mode 100644 index 0000000000..233c158d89 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-015-error-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:217749469144beae03e6e78474f28311641d2552d2ffa1cafa11d2d023625d0b +size 7512 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-016-success-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-016-success-hover-snap.png new file mode 100644 index 0000000000..7feaa3f0c4 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-016-success-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:559e6976390d6cccf0dac92e18316afb3f5ba524884a923a9d7399e857e450b4 +size 7088 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-017-error-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-017-error-hover-snap.png new file mode 100644 index 0000000000..523f0f9e7c --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-017-error-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:69bb379bc5d41690e68d7a6a9ae57f5ac3a2b5d9346a773f255b604cb596a64a +size 7491 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-018-success-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-018-success-hover-snap.png new file mode 100644 index 0000000000..7028ab030b --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-018-success-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:49d3a54e18fa36019f59fde7aae6f6f6676f0b8e1bda267e7b7cf8029250bd8e +size 7311 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-001-error-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-001-error-snap.png new file mode 100644 index 0000000000..9200bc33f9 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-001-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:91bcd31f8b042858cafab95625c3822e7f2ce5e925a23ae5abaa2cdeda1c01f1 +size 4544 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-002-error-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-002-error-snap.png new file mode 100644 index 0000000000..a57d32246d --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-002-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1a9996d2e278286db44388f72a2b9bf8e025bcef31223f1b18457db94c583a98 +size 6910 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-003-error-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-003-error-snap.png new file mode 100644 index 0000000000..ac91ffa3a1 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-003-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:58aa7c7b75342566fbd72442c048dac4cf95633988b87319e8e49302a0546fb1 +size 6888 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-004-error-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-004-error-hover-snap.png new file mode 100644 index 0000000000..656faf33b5 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-004-error-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a3daec1cc06a20de2f80cce6bc3bd6f91164c395cb6f33e88b58cfaf52b37944 +size 4571 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-005-error-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-005-error-hover-snap.png new file mode 100644 index 0000000000..2621b5cc85 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-005-error-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:386d1a2bdea467f3bdce0784a694875f24240062e45aefd996052bce2ae79a63 +size 6916 diff --git a/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-006-error-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-006-error-hover-snap.png new file mode 100644 index 0000000000..d0019bb920 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-always-clear-site-theme-006-error-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:02184bb33cd8a6738657a7599ebade1564257bc043cec2a254af8b853ff35416 +size 6895 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-001-default-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-001-default-snap.png new file mode 100644 index 0000000000..fd7166b202 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-001-default-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6856d53299e2f3d0ed50d788b2d6facbfea125adb6e24739a5a6babbeae9cb1b +size 2185 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-002-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-002-hover-snap.png new file mode 100644 index 0000000000..924de200ba --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-002-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1443b3028046fdf671f5de027bbcf3dbbce2caa42078f02b1a56faa40de0fe1f +size 2147 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-003-start-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-003-start-snap.png new file mode 100644 index 0000000000..00b1a00e3f --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-003-start-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:33a44b74391abc175093f4240fc80832030a7d39d54220e013b204429ac5c690 +size 3919 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-004-filling-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-004-filling-snap.png new file mode 100644 index 0000000000..b562cdc19d --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-004-filling-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:057bc9655c98b896bdf3c619b752d7885577844de78bb752e55f48e920eca06e +size 4262 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-005-filled-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-005-filled-snap.png new file mode 100644 index 0000000000..2492ca15dc --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-005-filled-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7dd740bd6dcc1fd388e736bb897f83d2ff55536a6967b538f53521cd496927af +size 2280 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-006-filled-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-006-filled-hover-snap.png new file mode 100644 index 0000000000..3e09c055d7 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-006-filled-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a154e7d0554c641460f3bd6442ae24fd30d6f31b63c4ac892cabed7a70d468f2 +size 3883 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-007-error-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-007-error-snap.png new file mode 100644 index 0000000000..ea21398c7d --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-007-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3ac3a6377cf466cc2a4cc914707eb052451a6e2f87b3f599c146c8f53af9c5a7 +size 4726 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-008-error-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-008-error-hover-snap.png new file mode 100644 index 0000000000..46fc10192e --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-008-error-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e68b14ab849d6035cfe281a5408ab1ab76a46e4ae82f13c26ecb478fcff12e78 +size 5201 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-009-success-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-009-success-snap.png new file mode 100644 index 0000000000..5c8e915622 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-009-success-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:19c4bd2e4cad8cbb88c191d608575eeef66d61342b5b7dc5fcfa37421e733b40 +size 4728 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-010-success-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-010-success-hover-snap.png new file mode 100644 index 0000000000..8141d766d2 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-010-success-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e8ee716d185f3b4795c8a609241afb89e263f3d85886945636cdefd216ef2638 +size 4708 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-011-error-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-011-error-snap.png new file mode 100644 index 0000000000..c36c6c1574 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-011-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9b050d015c065bab38606a46c1900c60c9e9ba1a951dc030babe0e459f8b5d7e +size 7057 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-012-error-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-012-error-hover-snap.png new file mode 100644 index 0000000000..233c158d89 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-012-error-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:217749469144beae03e6e78474f28311641d2552d2ffa1cafa11d2d023625d0b +size 7512 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-013-success-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-013-success-snap.png new file mode 100644 index 0000000000..0d479d95dd --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-013-success-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b4fb7a0334157e0c926fe68bb8b3afe1a9f76ec093818ca4845fe68b9ab4bc1a +size 7093 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-014-success-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-014-success-hover-snap.png new file mode 100644 index 0000000000..7feaa3f0c4 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-014-success-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:559e6976390d6cccf0dac92e18316afb3f5ba524884a923a9d7399e857e450b4 +size 7088 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-015-error-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-015-error-snap.png new file mode 100644 index 0000000000..506adade0b --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-015-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b80b8bb6114257953c44b1f26dd9db866f810115cf89ddfa734f5b076826800a +size 7333 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-016-error-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-016-error-hover-snap.png new file mode 100644 index 0000000000..523f0f9e7c --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-016-error-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:69bb379bc5d41690e68d7a6a9ae57f5ac3a2b5d9346a773f255b604cb596a64a +size 7491 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-017-success-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-017-success-snap.png new file mode 100644 index 0000000000..fe1de2cbcc --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-017-success-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:aabac615f71988b5928ff0f65b65b3a6a30c00d397146119cbc187cc2acd9578 +size 7355 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-018-success-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-018-success-hover-snap.png new file mode 100644 index 0000000000..7028ab030b --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-018-success-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:49d3a54e18fa36019f59fde7aae6f6f6676f0b8e1bda267e7b7cf8029250bd8e +size 7311 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-001-error-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-001-error-snap.png new file mode 100644 index 0000000000..69f3db72bb --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-001-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ad1ac217c46b0c579d0efbaa885e1e7f6ffa38e0b955cf25533c498dd0ac1f24 +size 4431 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-002-error-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-002-error-hover-snap.png new file mode 100644 index 0000000000..656faf33b5 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-002-error-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a3daec1cc06a20de2f80cce6bc3bd6f91164c395cb6f33e88b58cfaf52b37944 +size 4571 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-003-error-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-003-error-snap.png new file mode 100644 index 0000000000..9a388ea26a --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-003-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:77cb21795fa44c7f14eb8ac0e198f01457485fff83caaed332a9bcdf6b6056fa +size 6791 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-004-error-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-004-error-hover-snap.png new file mode 100644 index 0000000000..2621b5cc85 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-004-error-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:386d1a2bdea467f3bdce0784a694875f24240062e45aefd996052bce2ae79a63 +size 6916 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-005-error-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-005-error-snap.png new file mode 100644 index 0000000000..73343b1c6a --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-005-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:923aab2ade64b022cf6b841ce46309c3fc6b87b46d1d34d0c59b158d2d8a52a0 +size 6800 diff --git a/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-006-error-hover-snap.png b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-006-error-hover-snap.png new file mode 100644 index 0000000000..d0019bb920 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-desktop-auto-clear-site-theme-006-error-hover-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:02184bb33cd8a6738657a7599ebade1564257bc043cec2a254af8b853ff35416 +size 6895 diff --git a/packages/input/src/__image_snapshots__/input-desktop-screenshots-addons-default-theme-snap.png b/packages/input/src/__image_snapshots__/input-desktop-screenshots-addons-default-theme-snap.png index 28acad7624..b2477f1472 100644 --- a/packages/input/src/__image_snapshots__/input-desktop-screenshots-addons-default-theme-snap.png +++ b/packages/input/src/__image_snapshots__/input-desktop-screenshots-addons-default-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:865c9321207d1557f48c6d6cd61e6f79f93e05d38b46440446ac3cb48f99a2d1 -size 37649 +oid sha256:ee70f0f465ca273be4d31c01c1e2809e38398506c5dab14baa7da6ccfe3fc947 +size 35797 diff --git a/packages/input/src/__image_snapshots__/input-desktop-screenshots-addons-site-theme-2-snap.png b/packages/input/src/__image_snapshots__/input-desktop-screenshots-addons-site-theme-2-snap.png index b35d079f50..872a8171e8 100644 --- a/packages/input/src/__image_snapshots__/input-desktop-screenshots-addons-site-theme-2-snap.png +++ b/packages/input/src/__image_snapshots__/input-desktop-screenshots-addons-site-theme-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6648f06adad47d34b1d1dd3258d76eae87294c00b6f5c85e800b673c4dbab3ce -size 34512 +oid sha256:adcdd85c6a101cfaebdcbcc32f980d96ca11604723b84711ae8a13b826a7bd71 +size 32963 diff --git a/packages/input/src/__image_snapshots__/input-desktop-screenshots-addons-site-theme-snap.png b/packages/input/src/__image_snapshots__/input-desktop-screenshots-addons-site-theme-snap.png index 294e00bfc5..013911cc81 100644 --- a/packages/input/src/__image_snapshots__/input-desktop-screenshots-addons-site-theme-snap.png +++ b/packages/input/src/__image_snapshots__/input-desktop-screenshots-addons-site-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5afe5fbc7593f571b5478f014e073f58cae984796f0dfbc7505fba80e42141d6 -size 36278 +oid sha256:4d9de95755add848730b2c614127fa63f733c166ccee1f132c2b5e4ee8d312cd +size 34186 diff --git a/packages/input/src/__image_snapshots__/input-mobile-always-clear-001-default-snap.png b/packages/input/src/__image_snapshots__/input-mobile-always-clear-001-default-snap.png new file mode 100644 index 0000000000..924de200ba --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-always-clear-001-default-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1443b3028046fdf671f5de027bbcf3dbbce2caa42078f02b1a56faa40de0fe1f +size 2147 diff --git a/packages/input/src/__image_snapshots__/input-mobile-always-clear-002-filled-snap.png b/packages/input/src/__image_snapshots__/input-mobile-always-clear-002-filled-snap.png new file mode 100644 index 0000000000..25e180ebab --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-always-clear-002-filled-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f39cba51385d9fe76c46a7223fb773e492ff233cdd5cdfba5960ee24b72e2905 +size 2632 diff --git a/packages/input/src/__image_snapshots__/input-mobile-always-clear-003-filled-success-snap.png b/packages/input/src/__image_snapshots__/input-mobile-always-clear-003-filled-success-snap.png new file mode 100644 index 0000000000..25e180ebab --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-always-clear-003-filled-success-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f39cba51385d9fe76c46a7223fb773e492ff233cdd5cdfba5960ee24b72e2905 +size 2632 diff --git a/packages/input/src/__image_snapshots__/input-mobile-always-clear-004-filled-error-snap.png b/packages/input/src/__image_snapshots__/input-mobile-always-clear-004-filled-error-snap.png new file mode 100644 index 0000000000..e346a835e3 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-always-clear-004-filled-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:462c36bdb42aa33681f4e661bf0cacc6e4f98d4c232acf4c58d12e80be438cb2 +size 3103 diff --git a/packages/input/src/__image_snapshots__/input-mobile-always-clear-005-start-snap.png b/packages/input/src/__image_snapshots__/input-mobile-always-clear-005-start-snap.png new file mode 100644 index 0000000000..00b1a00e3f --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-always-clear-005-start-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:33a44b74391abc175093f4240fc80832030a7d39d54220e013b204429ac5c690 +size 3919 diff --git a/packages/input/src/__image_snapshots__/input-mobile-always-clear-006-filling-snap.png b/packages/input/src/__image_snapshots__/input-mobile-always-clear-006-filling-snap.png new file mode 100644 index 0000000000..b562cdc19d --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-always-clear-006-filling-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:057bc9655c98b896bdf3c619b752d7885577844de78bb752e55f48e920eca06e +size 4262 diff --git a/packages/input/src/__image_snapshots__/input-mobile-always-clear-007-filling-error-snap.png b/packages/input/src/__image_snapshots__/input-mobile-always-clear-007-filling-error-snap.png new file mode 100644 index 0000000000..0692161e19 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-always-clear-007-filling-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:360a0336ef3735aadc49ecc98116ad039ddf46d70be30eb974872a5e5831dfc8 +size 4172 diff --git a/packages/input/src/__image_snapshots__/input-mobile-always-clear-008-filling-success-snap.png b/packages/input/src/__image_snapshots__/input-mobile-always-clear-008-filling-success-snap.png new file mode 100644 index 0000000000..b562cdc19d --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-always-clear-008-filling-success-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:057bc9655c98b896bdf3c619b752d7885577844de78bb752e55f48e920eca06e +size 4262 diff --git a/packages/input/src/__image_snapshots__/input-mobile-always-clear-site-theme-009-filled-error-snap.png b/packages/input/src/__image_snapshots__/input-mobile-always-clear-site-theme-009-filled-error-snap.png new file mode 100644 index 0000000000..ef4c822d54 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-always-clear-site-theme-009-filled-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8cac67327b31c0a28cd9ce9c759de1ebdad173b34a84a412dbe56a6545f66b11 +size 2404 diff --git a/packages/input/src/__image_snapshots__/input-mobile-always-clear-site-theme-010-filling-error-snap.png b/packages/input/src/__image_snapshots__/input-mobile-always-clear-site-theme-010-filling-error-snap.png new file mode 100644 index 0000000000..85407e8c7d --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-always-clear-site-theme-010-filling-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a4aeef10ca98f1b909eb28cf6988dbeb40a5e4f9ab91d3187e08fa9047ccb125 +size 3701 diff --git a/packages/input/src/__image_snapshots__/input-mobile-auto-clear-001-default-snap.png b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-001-default-snap.png new file mode 100644 index 0000000000..924de200ba --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-001-default-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1443b3028046fdf671f5de027bbcf3dbbce2caa42078f02b1a56faa40de0fe1f +size 2147 diff --git a/packages/input/src/__image_snapshots__/input-mobile-auto-clear-002-start-snap.png b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-002-start-snap.png new file mode 100644 index 0000000000..00b1a00e3f --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-002-start-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:33a44b74391abc175093f4240fc80832030a7d39d54220e013b204429ac5c690 +size 3919 diff --git a/packages/input/src/__image_snapshots__/input-mobile-auto-clear-003-filling-snap.png b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-003-filling-snap.png new file mode 100644 index 0000000000..b562cdc19d --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-003-filling-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:057bc9655c98b896bdf3c619b752d7885577844de78bb752e55f48e920eca06e +size 4262 diff --git a/packages/input/src/__image_snapshots__/input-mobile-auto-clear-004-filled-snap.png b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-004-filled-snap.png new file mode 100644 index 0000000000..4832b1744e --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-004-filled-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e4ea3a5fb1cfc071c483fb5f86fcd46d7681c5c5e79a79b6f820a691d5e0f984 +size 2226 diff --git a/packages/input/src/__image_snapshots__/input-mobile-auto-clear-005-filled-success-snap.png b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-005-filled-success-snap.png new file mode 100644 index 0000000000..2b7613858b --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-005-filled-success-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:390b781f325739400bde67ea1fd4d9a975bb32baa627c018d2940b6c6eb8d9dc +size 2652 diff --git a/packages/input/src/__image_snapshots__/input-mobile-auto-clear-006-filled-error-snap.png b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-006-filled-error-snap.png new file mode 100644 index 0000000000..3098a1bea7 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-006-filled-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:034d18586188affe4a19ef609023b5db1c87d53eed0c8e9bd4e0ea5fa41c82b7 +size 2613 diff --git a/packages/input/src/__image_snapshots__/input-mobile-auto-clear-007-filling-error-snap.png b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-007-filling-error-snap.png new file mode 100644 index 0000000000..0692161e19 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-007-filling-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:360a0336ef3735aadc49ecc98116ad039ddf46d70be30eb974872a5e5831dfc8 +size 4172 diff --git a/packages/input/src/__image_snapshots__/input-mobile-auto-clear-008-filling-success-snap.png b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-008-filling-success-snap.png new file mode 100644 index 0000000000..b562cdc19d --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-008-filling-success-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:057bc9655c98b896bdf3c619b752d7885577844de78bb752e55f48e920eca06e +size 4262 diff --git a/packages/input/src/__image_snapshots__/input-mobile-auto-clear-site-theme-001-filled-error-snap.png b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-site-theme-001-filled-error-snap.png new file mode 100644 index 0000000000..84be57e527 --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-site-theme-001-filled-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:34d2c0bb918a8f29a84d418d98b4d9e9599ef4dd5a41be9f3be3b917f0608e3f +size 2312 diff --git a/packages/input/src/__image_snapshots__/input-mobile-auto-clear-site-theme-002-filling-error-snap.png b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-site-theme-002-filling-error-snap.png new file mode 100644 index 0000000000..85407e8c7d --- /dev/null +++ b/packages/input/src/__image_snapshots__/input-mobile-auto-clear-site-theme-002-filling-error-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a4aeef10ca98f1b909eb28cf6988dbeb40a5e4f9ab91d3187e08fa9047ccb125 +size 3701 diff --git a/packages/input/src/__image_snapshots__/input-mobile-screenshots-addons-default-theme-snap.png b/packages/input/src/__image_snapshots__/input-mobile-screenshots-addons-default-theme-snap.png index 4d7efccf01..43d814e26c 100644 --- a/packages/input/src/__image_snapshots__/input-mobile-screenshots-addons-default-theme-snap.png +++ b/packages/input/src/__image_snapshots__/input-mobile-screenshots-addons-default-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e823cab5d9470e2114bb15bed06ac960c1b92e56e2b471b4c088f1056a0a007d -size 37352 +oid sha256:6fe8f3ef0b93475df965ed3257a6f5df0ab3aeaa7880b08063f4b3e9de19b31e +size 35182 diff --git a/packages/input/src/__image_snapshots__/input-mobile-screenshots-addons-site-theme-2-snap.png b/packages/input/src/__image_snapshots__/input-mobile-screenshots-addons-site-theme-2-snap.png index 6424eebac6..3c2203b0c9 100644 --- a/packages/input/src/__image_snapshots__/input-mobile-screenshots-addons-site-theme-2-snap.png +++ b/packages/input/src/__image_snapshots__/input-mobile-screenshots-addons-site-theme-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bb4295a38a533cdfdc91122cebcb363897668fddc6fdedefcc8d7f9a22d40975 -size 34490 +oid sha256:2145bc295c971d8d4c64bbf068c26b557ba3f1c84210aad61a88d1341ad56c54 +size 32981 diff --git a/packages/input/src/__image_snapshots__/input-mobile-screenshots-addons-site-theme-snap.png b/packages/input/src/__image_snapshots__/input-mobile-screenshots-addons-site-theme-snap.png index 4c1114b46e..83557c511f 100644 --- a/packages/input/src/__image_snapshots__/input-mobile-screenshots-addons-site-theme-snap.png +++ b/packages/input/src/__image_snapshots__/input-mobile-screenshots-addons-site-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7ccbaada4d2f3d6627b3c593a1a2a277249e337bf001f0abe27dde899be09c92 -size 36331 +oid sha256:e45785d876ec973bcb49765f652fa8f2d7b417f0f713fea5bcc4faae2bc07984 +size 34198 diff --git a/packages/input/src/__image_snapshots__/input-screenshots-addons-sprite-2-snap.png b/packages/input/src/__image_snapshots__/input-screenshots-addons-sprite-2-snap.png index 365c389a57..8cdbb2138e 100644 --- a/packages/input/src/__image_snapshots__/input-screenshots-addons-sprite-2-snap.png +++ b/packages/input/src/__image_snapshots__/input-screenshots-addons-sprite-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9e64f9d4e9dc578e2dcaa2d62e65c17463ae88e9fabc27121efc0c1cdf2d22db -size 45747 +oid sha256:12be765218da74f06a3de548e4ce9b22a129236cbcc49770d1a34cc47b477880 +size 46152 diff --git a/packages/input/src/__image_snapshots__/input-screenshots-addons-sprite-4-snap.png b/packages/input/src/__image_snapshots__/input-screenshots-addons-sprite-4-snap.png index 86981c99ee..79e0a281d3 100644 --- a/packages/input/src/__image_snapshots__/input-screenshots-addons-sprite-4-snap.png +++ b/packages/input/src/__image_snapshots__/input-screenshots-addons-sprite-4-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e0d7d22dd94502e7e79a5fe4c3a48d58190f602ad67cf435b838ffd0b655b004 -size 57094 +oid sha256:8bb07b524b925d0f95832cefff873c0de5e97e282b9188515fc11b5c69cc9515 +size 57574 diff --git a/packages/input/src/__image_snapshots__/input-screenshots-hint-and-error-site-theme-2-snap.png b/packages/input/src/__image_snapshots__/input-screenshots-hint-and-error-site-theme-2-snap.png index 6f91f324d4..ea4716f039 100644 --- a/packages/input/src/__image_snapshots__/input-screenshots-hint-and-error-site-theme-2-snap.png +++ b/packages/input/src/__image_snapshots__/input-screenshots-hint-and-error-site-theme-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2607385e94243f273d1790f18d7d02a84277f3a55abbbda1333912f5ddfd0628 -size 44031 +oid sha256:9cab84aeb458e23945195cc0a7e76a303257a27fecdfd692c9cae290b761431d +size 44074 diff --git a/packages/input/src/__image_snapshots__/input-screenshots-hint-and-error-site-theme-snap.png b/packages/input/src/__image_snapshots__/input-screenshots-hint-and-error-site-theme-snap.png index 103b551c3c..6134d672ee 100644 --- a/packages/input/src/__image_snapshots__/input-screenshots-hint-and-error-site-theme-snap.png +++ b/packages/input/src/__image_snapshots__/input-screenshots-hint-and-error-site-theme-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d20ea758b147e7daf343373925ef16803866d609083ade5bac89a33826bbc83d -size 28924 +oid sha256:e14cee9cd2d628b4f38a25fb7bbb63f9180d26f05e407fc68a8682829121583c +size 28935 diff --git a/packages/input/src/components/base-input/Component.tsx b/packages/input/src/components/base-input/Component.tsx index 58e3547f06..a51c5b1821 100644 --- a/packages/input/src/components/base-input/Component.tsx +++ b/packages/input/src/components/base-input/Component.tsx @@ -4,6 +4,7 @@ import React, { Fragment, type KeyboardEvent, type MouseEvent, + type MouseEventHandler, useCallback, useRef, useState, @@ -38,6 +39,7 @@ export const BaseInput = forwardRef< platformStyles?: Record; } >( + // eslint-disable-next-line complexity ( { size = 48, @@ -85,7 +87,7 @@ export const BaseInput = forwardRef< }, ref, ) => { - const { onKeyDown } = restProps; + const { onKeyDown, onMouseEnter, onMouseLeave } = restProps; const uncontrolled = value === undefined; const readOnly = readOnlyProp || disableUserInput; @@ -94,13 +96,55 @@ export const BaseInput = forwardRef< const [focusVisible] = useFocus(inputRef, 'keyboard'); const [focused, setFocused] = useState(restProps.autoFocus); + const [hovered, setHovered] = useState(false); const [stateValue, setStateValue] = useState(defaultValue || ''); const filled = Boolean(uncontrolled ? stateValue : value); const [autofilled, setAutofilled] = useState(false); - // отображаем крестик только для заполненного и активного инпута - const clearButtonVisible = clear && filled && !disabled && !readOnlyProp; + const resolveClearVisible = () => { + if (Boolean(clear) && filled && !disabled && !readOnlyProp) { + if ([true, 'always'].includes(clear)) { + return true; + } + + if (clear === 'auto' && (focused || hovered)) { + return true; + } + + return false; + } + + return false; + }; + + const clearButtonVisible = resolveClearVisible(); + + const handleMouseEnter: MouseEventHandler = useCallback( + (e) => { + setHovered(true); + + if (onMouseEnter) { + onMouseEnter(e); + } + }, + [onMouseEnter], + ); + + const handleMouseLeave: MouseEventHandler = useCallback( + (e) => { + setHovered(false); + + if (onMouseLeave) { + onMouseLeave(e); + } + }, + [onMouseLeave], + ); + + const shouldRenderErrorIcon = error && !clearButtonVisible; + const shouldRenderSuccessIcon = success && !error && !clearButtonVisible; + const hasInnerLabel = label && labelView === 'inner'; useLayoutEffect_SAFE_FOR_SSR(() => { @@ -227,9 +271,9 @@ export const BaseInput = forwardRef< ); /** - * Right addons priority [4] <= [3] <= [2] <= [1] or [0] - * [4] - Clear - * [3] - Status (error, success) + * Right addons priority [4] or [3] <= [2] <= [1] or [0] + * [4] - Status (error, success) + * [3] - Clear * [2] - Common (info, e.g.) * [1] - Indicators (eye, calendar, chevron, stepper e.g.) * [0] - Lock @@ -248,8 +292,13 @@ export const BaseInput = forwardRef< size={size} /> )} - {error && ( -
+ {shouldRenderErrorIcon && ( +
)} - {success && !error && ( -
+ {shouldRenderSuccessIcon && ( +
= { title: 'Components/Input', @@ -47,7 +50,7 @@ export const input: Story = { )} value={text('value', '')} block={boolean('block', false)} - clear={boolean('clear', false)} + clear={select('clear', ['auto', 'always', true, undefined], 'auto')} size={size} colors={colors} disabled={boolean('disabled', false)} @@ -99,7 +102,7 @@ export const input_mobile: Story = { )} value={text('value', '')} block={boolean('block', false)} - clear={boolean('clear', false)} + clear={select('clear', ['auto', 'always', true, undefined], 'auto')} size={size} colors={colors} disabled={boolean('disabled', false)} @@ -127,6 +130,26 @@ export const input_desktop: Story = { const IconComponent = size === 40 ? DiamondsSIcon : StarMIcon; + const rightAddons = boolean('rightAddons', false); + const multipleRightAddons = rightAddons && boolean('multipleRightAddons', false); + + const renderRightAddons = () => { + if (multipleRightAddons) { + return ( + <> + + {size === 40 ? : } + + ); + } + + if (rightAddons) { + return ; + } + + return undefined; + }; + return (
} + rightAddons={renderRightAddons()} leftAddons={boolean('leftAddons', false) && } bottomAddons={boolean('bottomAddons', false) && bottom text} readOnly={boolean('readOnly', false)} diff --git a/packages/input/src/input-clear.screenshots.test.ts b/packages/input/src/input-clear.screenshots.test.ts new file mode 100644 index 0000000000..2576f64e00 --- /dev/null +++ b/packages/input/src/input-clear.screenshots.test.ts @@ -0,0 +1,1173 @@ +import { + setupScreenshotTesting, + createStorybookUrl, +} from '@alfalab/core-components-screenshot-utils'; +import { Page } from 'playwright'; + +const screenshotTesting = setupScreenshotTesting({ + it, + beforeAll, + afterAll, + expect, +}); + +describe('InputDesktop | auto clear', () => { + screenshotTesting({ + cases: [ + [ + '001 default', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + label: 'Фамилия', + }, + }), + ], + [ + '005 filled', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + value: 'John Doe', + }, + }), + ], + [ + '007 error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + error: '\u200B', + value: 'Некорректное значение', + }, + }), + ], + [ + '009 success', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + success: true, + value: 'Корректное значение', + }, + }), + ], + [ + '011 error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + error: '\u200B', + rightAddons: true, + value: 'Некорректное значение', + label: 'Название инпута', + }, + }), + ], + [ + '013 success', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + success: true, + value: 'Корректное значение', + rightAddons: true, + label: 'Название инпута', + }, + }), + ], + [ + '015 error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + error: '\u200B', + value: 'Некорректное значение', + label: 'Название инпута', + rightAddons: true, + multipleRightAddons: true, + }, + }), + ], + [ + '017 success', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + success: true, + value: 'Корректное значение', + label: 'Название инпута', + rightAddons: true, + multipleRightAddons: true, + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + })(); +}); + +describe('InputDesktop | always clear', () => { + screenshotTesting({ + cases: [ + [ + '001 default', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + label: 'Фамилия', + }, + }), + ], + [ + '002 filled', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + value: 'John Doe', + }, + }), + ], + [ + '003 error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + error: '\u200B', + value: 'Некорректное значение', + }, + }), + ], + [ + '004 success', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + success: true, + value: 'Корректное значение', + }, + }), + ], + [ + '005 error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + error: '\u200B', + rightAddons: true, + value: 'Некорректное значение', + label: 'Название инпута', + }, + }), + ], + [ + '006 success', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + success: true, + value: 'Корректное значение', + rightAddons: true, + label: 'Название инпута', + }, + }), + ], + [ + '007 error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + error: '\u200B', + value: 'Некорректное значение', + label: 'Название инпута', + rightAddons: true, + multipleRightAddons: true, + }, + }), + ], + [ + '008 success', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + success: true, + value: 'Корректное значение', + label: 'Название инпута', + rightAddons: true, + multipleRightAddons: true, + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + })(); +}); + +describe('InputDesktop | auto clear', () => { + screenshotTesting({ + cases: [ + [ + '003 start', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + label: 'Фамилия', + placeholder: 'Placeholder', + }, + }), + ], + [ + '004 filling', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + label: 'Фамилия', + value: 'John Doe', + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + evaluate: (page: Page) => page.focus('input').then(() => page.waitForTimeout(500)), + })(); +}); + +describe('InputDesktop | always clear', () => { + screenshotTesting({ + cases: [ + [ + '009 start', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + label: 'Фамилия', + placeholder: 'Placeholder', + }, + }), + ], + [ + '010 filling', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + label: 'Фамилия', + value: 'John Doe', + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + evaluate: (page: Page) => page.focus('input').then(() => page.waitForTimeout(500)), + })(); +}); + +describe('InputDesktop | auto clear', () => { + screenshotTesting({ + cases: [ + [ + '002 hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + label: 'Фамилия', + }, + }), + ], + [ + '006 filled hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + label: 'Фамилия', + value: 'John Doe', + }, + }), + ], + [ + '008 error hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + error: '\u200B', + value: 'Некорректное значение', + }, + }), + ], + [ + '010 success hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + success: true, + value: 'Корректное значение', + }, + }), + ], + [ + '012 error hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + error: '\u200B', + rightAddons: true, + value: 'Некорректное значение', + label: 'Название инпута', + }, + }), + ], + [ + '014 success hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + success: true, + value: 'Корректное значение', + rightAddons: true, + label: 'Название инпута', + }, + }), + ], + [ + '016 error hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + error: '\u200B', + value: 'Некорректное значение', + label: 'Название инпута', + rightAddons: true, + multipleRightAddons: true, + }, + }), + ], + [ + '018 success hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + success: true, + value: 'Корректное значение', + label: 'Название инпута', + rightAddons: true, + multipleRightAddons: true, + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + evaluate: (page: Page) => page.hover('input').then(() => page.waitForTimeout(500)), + })(); +}); + +describe('InputDesktop | always clear', () => { + screenshotTesting({ + cases: [ + [ + '011 hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + label: 'Фамилия', + }, + }), + ], + [ + '012 filled hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + label: 'Фамилия', + value: 'John Doe', + }, + }), + ], + [ + '013 error hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + error: '\u200B', + value: 'Некорректное значение', + }, + }), + ], + [ + '014 success hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + success: true, + value: 'Корректное значение', + }, + }), + ], + [ + '015 error hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + error: '\u200B', + rightAddons: true, + value: 'Некорректное значение', + label: 'Название инпута', + }, + }), + ], + [ + '016 success hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + success: true, + value: 'Корректное значение', + rightAddons: true, + label: 'Название инпута', + }, + }), + ], + [ + '017 error hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + error: '\u200B', + value: 'Некорректное значение', + label: 'Название инпута', + rightAddons: true, + multipleRightAddons: true, + }, + }), + ], + [ + '018 success hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + success: true, + value: 'Корректное значение', + label: 'Название инпута', + rightAddons: true, + multipleRightAddons: true, + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + evaluate: (page: Page) => page.hover('input').then(() => page.waitForTimeout(500)), + })(); +}); + +// region Desktop site +describe('InputDesktop | auto clear site theme', () => { + screenshotTesting({ + cases: [ + [ + '001 error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + error: '\u200B', + value: 'Некорректное значение', + }, + }), + ], + [ + '003 error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + error: '\u200B', + value: 'Некорректное значение', + rightAddons: true, + label: 'Название инпута', + }, + }), + ], + [ + '005 error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + error: '\u200B', + value: 'Некорректное значение', + label: 'Название инпута', + rightAddons: true, + multipleRightAddons: true, + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + theme: 'site', + })(); +}); + +describe('InputDesktop | always clear site theme', () => { + screenshotTesting({ + cases: [ + [ + '001 error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + error: '\u200B', + value: 'Некорректное значение', + }, + }), + ], + [ + '002 error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + error: '\u200B', + value: 'Некорректное значение', + rightAddons: true, + label: 'Название инпута', + }, + }), + ], + [ + '003 error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + error: '\u200B', + value: 'Некорректное значение', + label: 'Название инпута', + rightAddons: true, + multipleRightAddons: true, + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + theme: 'site', + })(); +}); + +describe('InputDesktop | auto clear site theme', () => { + screenshotTesting({ + cases: [ + [ + '002 error hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + error: '\u200B', + value: 'Некорректное значение', + }, + }), + ], + [ + '004 error hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + error: '\u200B', + value: 'Некорректное значение', + rightAddons: true, + label: 'Название инпута', + }, + }), + ], + [ + '006 error hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'auto', + error: '\u200B', + value: 'Некорректное значение', + label: 'Название инпута', + rightAddons: true, + multipleRightAddons: true, + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + theme: 'site', + evaluate: (page: Page) => page.hover('input').then(() => page.waitForTimeout(500)), + })(); +}); + +describe('InputDesktop | always clear site theme', () => { + screenshotTesting({ + cases: [ + [ + '004 error hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + error: '\u200B', + value: 'Некорректное значение', + }, + }), + ], + [ + '005 error hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + error: '\u200B', + value: 'Некорректное значение', + rightAddons: true, + label: 'Название инпута', + }, + }), + ], + [ + '006 error hover', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputDesktop', + knobs: { + clear: 'always', + error: '\u200B', + value: 'Некорректное значение', + label: 'Название инпута', + rightAddons: true, + multipleRightAddons: true, + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + theme: 'site', + evaluate: (page: Page) => page.hover('input').then(() => page.waitForTimeout(500)), + })(); +}); + +// endregion + +// region Mobile +describe('InputMobile | auto clear', () => { + screenshotTesting({ + cases: [ + [ + '001 default', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'auto', + label: 'Фамилия', + }, + }), + ], + [ + '004 filled', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'auto', + value: 'John Doe', + }, + }), + ], + [ + '005 filled success', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'auto', + value: 'John Doe', + success: true, + }, + }), + ], + [ + '006 filled error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'auto', + value: 'John Doe', + error: '\u200B', + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + })(); +}); + +describe('InputMobile | always clear', () => { + screenshotTesting({ + cases: [ + [ + '001 default', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'always', + label: 'Фамилия', + }, + }), + ], + [ + '002 filled', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'always', + value: 'John Doe', + }, + }), + ], + [ + '003 filled success', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'always', + value: 'John Doe', + success: true, + }, + }), + ], + [ + '004 filled error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'always', + value: 'John Doe', + error: '\u200B', + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + })(); +}); + +describe('InputMobile | auto clear', () => { + screenshotTesting({ + cases: [ + [ + '002 start', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'auto', + label: 'Фамилия', + placeholder: 'Placeholder', + }, + }), + ], + [ + '003 filling', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'auto', + label: 'Фамилия', + value: 'John Doe', + }, + }), + ], + [ + '007 filling error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'auto', + label: 'Фамилия', + value: 'John Doe', + error: '\u200B', + }, + }), + ], + [ + '008 filling success', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'auto', + label: 'Фамилия', + value: 'John Doe', + success: true, + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + evaluate: (page: Page) => page.focus('input').then(() => page.waitForTimeout(500)), + })(); +}); + +describe('InputMobile | always clear', () => { + screenshotTesting({ + cases: [ + [ + '005 start', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'always', + label: 'Фамилия', + placeholder: 'Placeholder', + }, + }), + ], + [ + '006 filling', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'always', + label: 'Фамилия', + value: 'John Doe', + }, + }), + ], + [ + '007 filling error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'always', + label: 'Фамилия', + value: 'John Doe', + error: '\u200B', + }, + }), + ], + [ + '008 filling success', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'always', + label: 'Фамилия', + value: 'John Doe', + success: true, + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + evaluate: (page: Page) => page.focus('input').then(() => page.waitForTimeout(500)), + })(); +}); + +describe('InputMobile | auto clear site theme', () => { + screenshotTesting({ + cases: [ + [ + '001 filled error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'auto', + value: 'John Doe', + error: '\u200B', + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + theme: 'site', + })(); +}); + +describe('InputMobile | always clear site theme', () => { + screenshotTesting({ + cases: [ + [ + '009 filled error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'always', + value: 'John Doe', + error: '\u200B', + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + theme: 'site', + })(); +}); + +describe('InputMobile | auto clear site theme', () => { + screenshotTesting({ + cases: [ + [ + '002 filling error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'auto', + label: 'Фамилия', + value: 'John Doe', + error: '\u200B', + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + theme: 'site', + evaluate: (page: Page) => page.focus('input').then(() => page.waitForTimeout(500)), + })(); +}); + +describe('InputMobile | always clear site theme', () => { + screenshotTesting({ + cases: [ + [ + '010 filling error', + createStorybookUrl({ + testStory: false, + componentName: 'Input', + subComponentName: 'InputMobile', + knobs: { + clear: 'always', + label: 'Фамилия', + value: 'John Doe', + error: '\u200B', + }, + }), + ], + ], + viewport: { width: 320, height: 80 }, + screenshotOpts: { + fullPage: false, + }, + theme: 'site', + evaluate: (page: Page) => page.focus('input').then(() => page.waitForTimeout(500)), + })(); +}); +// endregion diff --git a/packages/number-input/src/Component.test.tsx b/packages/number-input/src/Component.test.tsx index 9515d65ff6..f9c88a3266 100644 --- a/packages/number-input/src/Component.test.tsx +++ b/packages/number-input/src/Component.test.tsx @@ -3,7 +3,7 @@ import { render, fireEvent } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { getNumberInputTestIds } from './utils'; -import { NumberInput, NumberInputProps } from '.'; +import { NumberInputResponsive as NumberInput } from './Component.responsive'; describe('NumberInput', () => { Object.defineProperty(window, 'matchMedia', { diff --git a/packages/password-input/src/__image_snapshots__/password-input-desktop-screenshots-addons-default-theme-2-snap.png b/packages/password-input/src/__image_snapshots__/password-input-desktop-screenshots-addons-default-theme-2-snap.png index e142126e6f..f3bce9da46 100644 --- a/packages/password-input/src/__image_snapshots__/password-input-desktop-screenshots-addons-default-theme-2-snap.png +++ b/packages/password-input/src/__image_snapshots__/password-input-desktop-screenshots-addons-default-theme-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3cdba0963558a754bbd5c024246666750f9a98471d29fce3767cd3a17cff0048 -size 29481 +oid sha256:04c1683b3f72c7c5bbb9ed023dc8afc1eb58708698cb6cb941bf0548fd6035cf +size 29493 diff --git a/packages/password-input/src/__image_snapshots__/password-input-desktop-screenshots-addons-site-theme-2-snap.png b/packages/password-input/src/__image_snapshots__/password-input-desktop-screenshots-addons-site-theme-2-snap.png index df2968ec1e..e7dc82b3fd 100644 --- a/packages/password-input/src/__image_snapshots__/password-input-desktop-screenshots-addons-site-theme-2-snap.png +++ b/packages/password-input/src/__image_snapshots__/password-input-desktop-screenshots-addons-site-theme-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2e3583dd85e8642a568a8348050c20edb0669eb9c265d4310d5edd00c447ee1f -size 28369 +oid sha256:c05e1f588d12b79e93298d639285e521a098c8df04ba1fe7a0f1115ba5cedab4 +size 28381 diff --git a/packages/password-input/src/__image_snapshots__/password-input-desktop-screenshots-addons-site-theme-3-snap.png b/packages/password-input/src/__image_snapshots__/password-input-desktop-screenshots-addons-site-theme-3-snap.png index 07f8f3ab81..f694752596 100644 --- a/packages/password-input/src/__image_snapshots__/password-input-desktop-screenshots-addons-site-theme-3-snap.png +++ b/packages/password-input/src/__image_snapshots__/password-input-desktop-screenshots-addons-site-theme-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8b26ca3f92fffd9f70a518e2eb018c7ef0079a0d883d4c7a9364f5e917df819f -size 27301 +oid sha256:3165168a78b3f39843fe6d572691f5e26fcc46958779bc79da1c62473494f9af +size 27309 diff --git a/packages/password-input/src/__image_snapshots__/password-input-mobile-screenshots-addons-default-theme-2-snap.png b/packages/password-input/src/__image_snapshots__/password-input-mobile-screenshots-addons-default-theme-2-snap.png index ba9a393ee6..1dfb53cb6a 100644 --- a/packages/password-input/src/__image_snapshots__/password-input-mobile-screenshots-addons-default-theme-2-snap.png +++ b/packages/password-input/src/__image_snapshots__/password-input-mobile-screenshots-addons-default-theme-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:adff3a83a214c07f463c79217b1678a0d4ed6e7a873f81dfef38549bce0a9425 -size 25550 +oid sha256:51025b65eb0e9a6bebe38ddda25a33ae0c691648698d6d9a242233d80d3fe83c +size 25545 diff --git a/packages/password-input/src/__image_snapshots__/password-input-mobile-screenshots-addons-site-theme-2-snap.png b/packages/password-input/src/__image_snapshots__/password-input-mobile-screenshots-addons-site-theme-2-snap.png index d472258683..d4a4e75072 100644 --- a/packages/password-input/src/__image_snapshots__/password-input-mobile-screenshots-addons-site-theme-2-snap.png +++ b/packages/password-input/src/__image_snapshots__/password-input-mobile-screenshots-addons-site-theme-2-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:63b76b8b84421c382c739f982913f2a7ced8c59cf170c8219ee9249b555ff0e1 -size 24709 +oid sha256:1955190d4884d622417c350be5fb953a374c97da6d0a007e6c2628465af1e677 +size 24704 diff --git a/packages/password-input/src/__image_snapshots__/password-input-mobile-screenshots-addons-site-theme-3-snap.png b/packages/password-input/src/__image_snapshots__/password-input-mobile-screenshots-addons-site-theme-3-snap.png index bb930f8df0..7324a5b599 100644 --- a/packages/password-input/src/__image_snapshots__/password-input-mobile-screenshots-addons-site-theme-3-snap.png +++ b/packages/password-input/src/__image_snapshots__/password-input-mobile-screenshots-addons-site-theme-3-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:62f1e22b5753b58798c71ae7b52dfe7541c4e785f766416071647ae3ed56704f -size 23583 +oid sha256:21f1ad6a8344bcb266f5490a0690f54bcb7a94b70b5f3e4728475f0f0bf0a4b5 +size 23579