Merge pull request #12 from tableflowhq/input/disabled

Improve disabled states for Checkbox & Input

Author: ciminelli

src/Checkbox/Checkbox.stories.tsx

@@ -13,4 +13,5 @@ const Template: ComponentStory<typeof CheckboxComponent> = (args: CheckboxProps)
 export const Checkbox = Template.bind({});
 Checkbox.args = {
   label: "Text",
+  disabled: false,
 };

src/Checkbox/style/Checkbox.module.scss

@@ -34,21 +34,29 @@
 
     &:checked::before {
       clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-      box-shadow: inset 1em 1em var(--color-input-background);
+      box-shadow: inset 1em 1em var(--color-text-on-primary);
     }
 
-    //&:not(:disabled) {
-    //  &:focus {
-    //    outline: 1px solid var(--color-border);
-    //    outline-offset: 3px;
-    //  }
-    //}
+    &:not(:disabled) {
+      &:focus-visible {
+        outline: 1px solid var(--color-border);
+        outline-offset: 3px;
+      }
+    }
 
     &:disabled {
       --container-color: var(--container-disabled);
       color: var(--container-disabled);
       cursor: default;
       background-color: var(--color-input-disabled);
+      border-color: var(--color-border-soft);
+
+      &:checked {
+        &::before {
+          clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+          box-shadow: inset 1em 1em var(--color-border-soft);
+        }
+      }
     }
   }
 }

src/Input/Input.stories.tsx

@@ -135,6 +135,6 @@ Dropdown.args = {
         "Option III": { value: "3" },
         "Option IV": { value: "4" },
         "Option V": { value: "5" },
-        "Option V": { value: "required", required: true },
+        "Option VI": { value: "required", required: true },
     },
 };