fix(ld-toggle): update to match current design

- Make both icons visible in disabled state - Use neutral colors in disabled state - Update icon color in disabled state - Add e2e tests covering disabled invalid combinations
emdgroup-liquid · Nov 9, 2021 · 8a5b800 · 8a5b800
1 parent 3f0e35d
commit 8a5b800
Show file tree

Hide file tree

Showing 45 changed files with 1,000 additions and 2,181 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
diff --git a/...ages/688ec1bef2fdd2e6dea1ebb61b2dd67d.png → ...ages/02f03893f479af9a63d9cf183bdbc4eb.png b/...ages/688ec1bef2fdd2e6dea1ebb61b2dd67d.png → ...ages/02f03893f479af9a63d9cf183bdbc4eb.png
diff --git a/...ages/056ba1e90555d77e3e484efde90fd4ab.png → ...ages/0745a7b88aea5ade78711731e733a84b.png b/...ages/056ba1e90555d77e3e484efde90fd4ab.png → ...ages/0745a7b88aea5ade78711731e733a84b.png
diff --git a/screenshot/images/223e1921921620754f74bb9ff58621e7.png b/screenshot/images/223e1921921620754f74bb9ff58621e7.png
diff --git a/screenshot/images/22c36a3bfb1f735dd248976c656a21de.png b/screenshot/images/22c36a3bfb1f735dd248976c656a21de.png
diff --git a/screenshot/images/27283eb098187a8c69706d3391a3c1ad.png b/screenshot/images/27283eb098187a8c69706d3391a3c1ad.png
diff --git a/screenshot/images/280f783f2d80ef2e3d955e53786fd6da.png b/screenshot/images/280f783f2d80ef2e3d955e53786fd6da.png
diff --git a/screenshot/images/2b0f171df1657086516ebd780d43afdd.png b/screenshot/images/2b0f171df1657086516ebd780d43afdd.png
diff --git a/screenshot/images/328a9e15030139e06c110932ab38480b.png b/screenshot/images/328a9e15030139e06c110932ab38480b.png
diff --git a/screenshot/images/354d79e5702e6fa92422f8a8944e5cdf.png b/screenshot/images/354d79e5702e6fa92422f8a8944e5cdf.png
diff --git a/screenshot/images/405ea47bef97cceb021aeeb56bb81fe0.png b/screenshot/images/405ea47bef97cceb021aeeb56bb81fe0.png
diff --git a/screenshot/images/41d0419f8e39c361fddd5879429865cf.png b/screenshot/images/41d0419f8e39c361fddd5879429865cf.png
diff --git a/screenshot/images/5dbcbe7488f66240273af28b41924c01.png b/screenshot/images/5dbcbe7488f66240273af28b41924c01.png
diff --git a/screenshot/images/5ef447d3a3457112a09f37bbc1928a42.png b/screenshot/images/5ef447d3a3457112a09f37bbc1928a42.png
diff --git a/screenshot/images/640e2caa19e66dac2b7a8a8f1411d6ea.png b/screenshot/images/640e2caa19e66dac2b7a8a8f1411d6ea.png
diff --git a/screenshot/images/682dc5107339d2999e228bcbb14207de.png b/screenshot/images/682dc5107339d2999e228bcbb14207de.png
diff --git a/screenshot/images/6b2ac4a7e986e9a5b495e85d6da3c193.png b/screenshot/images/6b2ac4a7e986e9a5b495e85d6da3c193.png
diff --git a/screenshot/images/728e7bc29a81493e709df9461e352887.png b/screenshot/images/728e7bc29a81493e709df9461e352887.png
diff --git a/screenshot/images/804dd7459e29d5303f9495c9aadf5c75.png b/screenshot/images/804dd7459e29d5303f9495c9aadf5c75.png
diff --git a/screenshot/images/8977571f62d56aa45d241a490d0bd10b.png b/screenshot/images/8977571f62d56aa45d241a490d0bd10b.png
diff --git a/screenshot/images/91799ace8702a9d603953a918121214a.png b/screenshot/images/91799ace8702a9d603953a918121214a.png
diff --git a/screenshot/images/92a7e855fdf768128abc2d14f28c5e25.png b/screenshot/images/92a7e855fdf768128abc2d14f28c5e25.png
diff --git a/screenshot/images/989d4d683da7fd867b6d3590ea33add4.png b/screenshot/images/989d4d683da7fd867b6d3590ea33add4.png
diff --git a/screenshot/images/a45a05e9333714dabb3a88b7b74d8d0f.png b/screenshot/images/a45a05e9333714dabb3a88b7b74d8d0f.png
diff --git a/screenshot/images/a497e7ef68f8eaa48f4d792530198711.png b/screenshot/images/a497e7ef68f8eaa48f4d792530198711.png
diff --git a/screenshot/images/a9c343f3c15d4586830670a3bf3bc532.png b/screenshot/images/a9c343f3c15d4586830670a3bf3bc532.png
diff --git a/screenshot/images/aa2f3020954cb6b6063bfc361c71b654.png b/screenshot/images/aa2f3020954cb6b6063bfc361c71b654.png
diff --git a/screenshot/images/b936e74c655a6d0e3ae0780d62068425.png b/screenshot/images/b936e74c655a6d0e3ae0780d62068425.png
diff --git a/screenshot/images/c43a40070782513bab2f0b35207b02dd.png b/screenshot/images/c43a40070782513bab2f0b35207b02dd.png
diff --git a/screenshot/images/c970cabacf74a0cd95f43c1334f680da.png b/screenshot/images/c970cabacf74a0cd95f43c1334f680da.png
diff --git a/screenshot/images/c9a3e5b85a09b7492538d6510998100d.png b/screenshot/images/c9a3e5b85a09b7492538d6510998100d.png
diff --git a/screenshot/images/cdaaebc92fa21c2f8dae8e46cba17a63.png b/screenshot/images/cdaaebc92fa21c2f8dae8e46cba17a63.png
diff --git a/...ages/607ed10031098492663ef220cfcefb13.png → ...ages/d117555e2f3b81440f298ce728047992.png b/...ages/607ed10031098492663ef220cfcefb13.png → ...ages/d117555e2f3b81440f298ce728047992.png
diff --git a/screenshot/images/d1e5f1e166c2cd918de6a65fa515729b.png b/screenshot/images/d1e5f1e166c2cd918de6a65fa515729b.png
diff --git a/screenshot/images/e15beef70e28995e9c60ec551f9b61be.png b/screenshot/images/e15beef70e28995e9c60ec551f9b61be.png
diff --git a/...ages/1dc0e323b98a140c2ee5e3b86e4d0f41.png → ...ages/e30c2ddb9c2d46042954a433adad93fd.png b/...ages/1dc0e323b98a140c2ee5e3b86e4d0f41.png → ...ages/e30c2ddb9c2d46042954a433adad93fd.png
diff --git a/screenshot/images/e6932adaf6c890797d2772af5b669034.png b/screenshot/images/e6932adaf6c890797d2772af5b669034.png
diff --git a/...ages/561a30ac1f2500e231f3e87dd58fbb33.png → ...ages/ebc3696999a79038f7f374e1db36dd61.png b/...ages/561a30ac1f2500e231f3e87dd58fbb33.png → ...ages/ebc3696999a79038f7f374e1db36dd61.png
diff --git a/screenshot/images/ef839789c903694df3ad0273cd98f05f.png b/screenshot/images/ef839789c903694df3ad0273cd98f05f.png
diff --git a/screenshot/images/f0f8e4e7bafd755721e2f6ad3445865f.png b/screenshot/images/f0f8e4e7bafd755721e2f6ad3445865f.png
diff --git a/screenshot/images/f43cb4178a7548a526aa9cdfaa53db17.png b/screenshot/images/f43cb4178a7548a526aa9cdfaa53db17.png
diff --git a/screenshot/images/f6d11dfefcae645c35bd0ab4a63a184e.png b/screenshot/images/f6d11dfefcae645c35bd0ab4a63a184e.png
diff --git a/screenshot/images/fd39ca719a25a820262ad191ee4db177.png b/screenshot/images/fd39ca719a25a820262ad191ee4db177.png
diff --git a/src/liquid/components/ld-toggle/ld-toggle.css b/src/liquid/components/ld-toggle/ld-toggle.css
@@ -20,14 +20,13 @@
   --ld-toggle-checked-icon-start-col: var(--ld-col-neutral);
   --ld-toggle-checked-icon-end-col: var(--ld-col-wht);
   --ld-toggle-disabled-input-bg-col: var(--ld-col-neutral-050);
-  --ld-toggle-disabled-icon-col: var(--ld-col-neutral-600);
+  --ld-toggle-disabled-icon-col: var(--ld-col-neutral-200);
   --ld-toggle-disabled-knob-bg-col: var(--ld-col-wht);
   --ld-toggle-with-icons-input-bg-col: var(--ld-col-neutral-100);
   --ld-toggle-with-icons-disabled-input-bg-col: var(--ld-col-neutral-050);
 
   /* themable colors */
   --ld-toggle-checked-bg-col: var(--ld-thm-primary);
-  --ld-toggle-checked-disabled-input-bg-col: var(--ld-thm-primary-alpha-low);
   --ld-toggle-invalid-input-bg-col: var(--ld-thm-error);
   --ld-toggle-invalid-knob-bg-col: var(--ld-thm-error);
   --ld-toggle-with-icons-knob-col: var(--ld-thm-primary);
@@ -61,7 +60,7 @@
 
       &:disabled,
       &[aria-disabled='true'] {
-        background-color: var(--ld-toggle-checked-disabled-input-bg-col);
+        background-color: var(--ld-toggle-disabled-input-bg-col);
       }
 
       ~ .ld-toggle__knob {
@@ -83,10 +82,12 @@
     &[aria-disabled='true'] {
       background-color: var(--ld-toggle-disabled-input-bg-col);
 
-      &:checked ~ .ld-toggle__icon-start {
+      &:checked ~ .ld-toggle__icon-start,
+      &:checked ~ .ld-toggle__icon-end {
         color: var(--ld-toggle-disabled-icon-col);
       }
 
+      &:not(:checked) ~ .ld-toggle__icon-start,
       &:not(:checked) ~ .ld-toggle__icon-end {
         color: var(--ld-toggle-disabled-icon-col);
       }
@@ -105,7 +106,7 @@
     z-index: 1;
   }
 
-  input:invalid {
+  input:where(:not(:disabled):not([aria-disabled='true'])):invalid {
     background-color: var(--ld-toggle-invalid-input-bg-col);
   }
 }