From 54b617806bd032369687dddcf494358c8e938fd5 Mon Sep 17 00:00:00 2001 From: Daniil Suvorov Date: Mon, 11 Sep 2023 16:36:53 +0300 Subject: [PATCH] fix(Checkbox): simple width - closed #5749 --- .../Checkbox/Checkbox.e2e-playground.tsx | 8 ++-- .../components/Checkbox/Checkbox.module.css | 48 ++++++++++++------- .../checkbox-android-chromium-dark-1-snap.png | 4 +- ...checkbox-android-chromium-light-1-snap.png | 4 +- .../checkbox-ios-webkit-dark-1-snap.png | 4 +- .../checkbox-ios-webkit-light-1-snap.png | 4 +- ...ox-simple-android-chromium-dark-1-snap.png | 4 +- ...x-simple-android-chromium-light-1-snap.png | 4 +- ...checkbox-simple-ios-webkit-dark-1-snap.png | 4 +- ...heckbox-simple-ios-webkit-light-1-snap.png | 4 +- ...kbox-simple-vkcom-chromium-dark-1-snap.png | 4 +- ...box-simple-vkcom-chromium-light-1-snap.png | 4 +- ...ckbox-simple-vkcom-firefox-dark-1-snap.png | 4 +- ...kbox-simple-vkcom-firefox-light-1-snap.png | 4 +- ...eckbox-simple-vkcom-webkit-dark-1-snap.png | 4 +- ...ckbox-simple-vkcom-webkit-light-1-snap.png | 4 +- .../checkbox-vkcom-chromium-dark-1-snap.png | 4 +- .../checkbox-vkcom-chromium-light-1-snap.png | 4 +- .../checkbox-vkcom-firefox-dark-1-snap.png | 4 +- .../checkbox-vkcom-firefox-light-1-snap.png | 4 +- .../checkbox-vkcom-webkit-dark-1-snap.png | 4 +- .../checkbox-vkcom-webkit-light-1-snap.png | 4 +- 22 files changed, 77 insertions(+), 59 deletions(-) diff --git a/packages/vkui/src/components/Checkbox/Checkbox.e2e-playground.tsx b/packages/vkui/src/components/Checkbox/Checkbox.e2e-playground.tsx index fee4136c8e..dbb11f8756 100644 --- a/packages/vkui/src/components/Checkbox/Checkbox.e2e-playground.tsx +++ b/packages/vkui/src/components/Checkbox/Checkbox.e2e-playground.tsx @@ -7,9 +7,7 @@ import { } from '@vkui-e2e/playground-helpers'; import { Checkbox, type CheckboxProps } from './Checkbox'; -const baseRender = ({ children = 'label', ...restProps }: CheckboxProps) => ( - {children} -); +const baseRender = (props: CheckboxProps) => ; export const CheckboxPlayground = (props: ComponentPlaygroundProps) => { return ( @@ -17,12 +15,16 @@ export const CheckboxPlayground = (props: ComponentPlaygroundProps) => { {...props} propSets={[ { + children: ['label'], checked: [false, true], disabled: [undefined, true], + $adaptivity: 'y', }, { + children: ['label'], indeterminate: [true], disabled: [undefined, true], + $adaptivity: 'y', }, ]} > diff --git a/packages/vkui/src/components/Checkbox/Checkbox.module.css b/packages/vkui/src/components/Checkbox/Checkbox.module.css index c2da2faba7..d44cd8d6bb 100644 --- a/packages/vkui/src/components/Checkbox/Checkbox.module.css +++ b/packages/vkui/src/components/Checkbox/Checkbox.module.css @@ -95,6 +95,28 @@ opacity: var(--vkui--opacity_disable_accessibility); } +/** + * simple + */ + +.Checkbox--simple { + display: flex; + justify-content: center; + align-items: center; + padding: 0; + border-radius: 50%; + width: var(--vkui--size_field_height--regular); + height: var(--vkui--size_field_height--regular); +} + +.Checkbox--simple .Checkbox__content { + display: none; +} + +.Checkbox--simple .Checkbox__icon { + margin: 0; +} + /** * sizeY COMPACT */ @@ -104,6 +126,11 @@ min-height: var(--vkui--size_field_height--compact); } +.Checkbox--sizeY-compact.Checkbox--simple { + width: var(--vkui--size_field_height--compact); + height: var(--vkui--size_field_height--compact); +} + .Checkbox--sizeY-compact .Checkbox__title { margin-top: 8px; } @@ -122,6 +149,11 @@ min-height: var(--vkui--size_field_height--compact); } + .Checkbox--sizeY-none.Checkbox--simple { + width: var(--vkui--size_field_height--compact); + height: var(--vkui--size_field_height--compact); + } + .Checkbox--sizeY-none .Checkbox__title { margin-top: 8px; } @@ -134,19 +166,3 @@ margin-bottom: 8px; } } - -.Checkbox--simple { - display: flex; - justify-content: center; - align-items: center; - padding: 0; - border-radius: 50%; -} - -.Checkbox--simple .Checkbox__content { - display: none; -} - -.Checkbox--simple .Checkbox__icon { - margin: 0; -} diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-android-chromium-dark-1-snap.png index 80e46de650..d6866a6c6e 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:13dcdb692885ab3980a72524779bced06601eb06eab426ea2480e7ef147e7265 -size 17286 +oid sha256:b84a3a1bb4dc2189967475bb8404fe5e2feec05a59621e36f5c1f91d266cbd85 +size 56034 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-android-chromium-light-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-android-chromium-light-1-snap.png index 7dfcb4ddac..e8b8e3bc28 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2bb01437474f6b36e737194b8b8985e05b418fae76f99bcb14ccfb3a829dbad6 -size 17139 +oid sha256:f5714323ad748332946145c2bf035ec82f957fa9ea0bed7d5d6990dba3e1bc52 +size 56375 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-ios-webkit-dark-1-snap.png index 4692682037..8abd68b2c1 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:274030a7ccb7eef4270d9ee8a018a2d20a4b702a880f5eb17b8a5376ea675b23 -size 15585 +oid sha256:4592a1cf2a159e457e29a28cd90b1adf3e1b4f8f98bc6e2178323a9b3ce45798 +size 50940 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-ios-webkit-light-1-snap.png index 59a141f4d4..76fa3c7dc0 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:176b6fdf133d70d664bfd53be626f7640c77954d8e765dd160023ecd78c2a125 -size 13839 +oid sha256:547755ba170c9294718d849e8e8a0d02e1c2d75d7a2d15d0bf8fcea530c10bbd +size 48563 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-android-chromium-dark-1-snap.png index 7c254b0f09..da2affa50b 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:138ad379bf372652046eb16ed62677e64743f09db5c37d4632a29d0f1de7b2c5 -size 45457 +oid sha256:11a7f2825b0b6f6aa1d4cfb30f9403e2890935a69bb3eb97862fc34754e553bb +size 37709 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-android-chromium-light-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-android-chromium-light-1-snap.png index df25ddda7a..8b2b7b5166 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:33543ce95c98a0749150cb26620e29ea9597a9d137114f612146c4ce595c355c -size 45217 +oid sha256:b0f4f2d6dbbbcc586df7e44f1e2a03412640425e599f524857415a85d77ec623 +size 37526 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-ios-webkit-dark-1-snap.png index 0342f21bcf..f01b5d54a0 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bf994314bac6d6a6aece599a6fcd3ed27ceb49093e59109dccc919143c5e4b80 -size 40520 +oid sha256:a9ea4581e75f34d4df0315895ebfba2d4fb1cd9fd3fb0359b309bcbd981f4010 +size 33680 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-ios-webkit-light-1-snap.png index 9ea8fa3260..596ae32d51 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:754b88f1ddb22b25b6bdf00c053a1c849e986a3e2d7de9fc8caba012833203f9 -size 38773 +oid sha256:47d964d72ad5cc34f4ed2236796ae30fa846b3ab7c08dc143758dca5e2feb315 +size 34005 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-chromium-dark-1-snap.png index 57e5a614d0..7899f83253 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6d6a19b6ae397ad59cf1005b66379f742227fd53580da3adc0bc931735d32500 -size 12740 +oid sha256:2ca1c6e021e623016c7276ebc255445bcf9c73146fda676fefcb8ffdb90d0de6 +size 9884 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-chromium-light-1-snap.png index 544bfe17c9..ca44a99ddb 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f5651208929e5af780dae1a4537036947455818ddabe39947a1d432b39861e80 -size 12561 +oid sha256:a5090c678dc34c1a7dfa42892464f9f9bb5bd0a334ce5cc0123b1d0810a1791b +size 9854 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-firefox-dark-1-snap.png index a7508e2cf0..fb357056fc 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3da7a5510fc42ef5c028dde1b7f8d0284d2b3e3325cd1c7ce771dbf7cfd1eb48 -size 14769 +oid sha256:e76e8907d07adcb244f586688d802dca7fc78e5e950ffab741a66caaa58364c3 +size 11703 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-firefox-light-1-snap.png index adbf3364fa..77e4189e87 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:eddb349eb6b6a429f79f6f46b7e94c1818f020e1ee690cc925228efedd815bc6 -size 13487 +oid sha256:50280aa53fe14a13ed6f2fe673efc504093c56b82ab75b0e0128d85bd1d90314 +size 11848 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-webkit-dark-1-snap.png index ee3d5814e0..a3dc164878 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f54d126eaaaa3c103d4b33da873ce833f193fd7196307e075b2b59b37bef4baf -size 9373 +oid sha256:076a10530ad1e689ca0c7b87aec3f360e3a4a5857968fa0130d9e7ad907deb3d +size 6708 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-webkit-light-1-snap.png index f36038a3ca..1731bd0f07 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-simple-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5e9497815287f9522444c2ad00a23ed55580c65b201e96c20e10d0d241c67371 -size 9345 +oid sha256:17990b415b32e1c58514d3d8830c2f79fbbac90c1a2c2e2fec5c31e3df60de55 +size 6784 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-chromium-dark-1-snap.png index 2b8925e1be..7d285d4b8a 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8c197a1ca65232bab04783098dc0cbb669afaeca4bfc5a56b40876de5851450f -size 16382 +oid sha256:c2c31d210decdac5d0fd7e4a14d5e2ac6212f0387cb143cda31b3c69c74e3bbb +size 20422 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-chromium-light-1-snap.png index fcbfc73e84..ed60c1ff84 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:62c6d87436cf153b08d6ed690f2c89dac4b750d6a120845801077537b83bf42c -size 14351 +oid sha256:e611519374fd6e97d39ca50bc6fac4e597134cef8e3149b8da9447fd43701486 +size 20262 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-firefox-dark-1-snap.png index ceeb9cd0c6..6e9ced8590 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:163428fd905b5a192b14a7b806f130a571d2fd860857ea17c749ecf974c1ab9a -size 19287 +oid sha256:bdff9234859be842670f94a73547b4df371111c48cb6ef880147b5bb75f48fd9 +size 27304 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-firefox-light-1-snap.png index 8967485e07..cf47e119ea 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:90e2f304af3b2b9152254db3a6c67895dbef79b3612c7a1bbe772b97aaaac96a -size 17191 +oid sha256:04dbf6b29518499a26f37546abedbb04a940d2c64b762e53da0ba918b7d95a34 +size 26227 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-webkit-dark-1-snap.png index 134d016490..ae62175af2 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bfb69a1742f4cd3e5cbc2443579b56f931574db2bd63f5f91e6e8238885688c2 -size 14845 +oid sha256:2e734d89ee92d9031d64222218d57f4d662e11ed775b816e954391f5c795fe7a +size 18252 diff --git a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-webkit-light-1-snap.png index 9018d105aa..624a728d70 100644 --- a/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Checkbox/__image_snapshots__/checkbox-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4e70f813ca1e1ace5df71bf0c37dc650b8c239f33d0e3cd7a3e00de1d8d48ee3 -size 13150 +oid sha256:5a5c8735cfaeb1b1f18c83e051310a41d2874ce7d7d819a76745acd2a91e46c7 +size 15660