Merge pull request #326 from kiwicom/fix/forms-disabled-states

FIX: Forms disabled state
kiwicom · Aug 27, 2018 · 42b57db · 42b57db
2 parents 534d00c + 818d874
commit 42b57db
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 37 deletions.
diff --git a/src/Checkbox/__snapshots__/Checkbox.stories.storyshot b/src/Checkbox/__snapshots__/Checkbox.stories.storyshot
@@ -99,7 +99,7 @@ exports[`Storyshots CheckBox Default 1`] = `
           }
         >
           <label
-            className="Checkbox__Label-gCTMrH bcLSxT"
+            className="Checkbox__Label-gCTMrH bIKrGc"
           >
             <input
               checked={false}
@@ -401,7 +401,7 @@ exports[`Storyshots CheckBox Playground 1`] = `
           }
         >
           <label
-            className="Checkbox__Label-gCTMrH gaSDRm"
+            className="Checkbox__Label-gCTMrH bnAQKb"
           >
             <input
               checked={true}
@@ -799,7 +799,7 @@ exports[`Storyshots CheckBox With help 1`] = `
           }
         >
           <label
-            className="Checkbox__Label-gCTMrH bcLSxT"
+            className="Checkbox__Label-gCTMrH bIKrGc"
           >
             <input
               checked={false}

diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js
@@ -97,11 +97,9 @@ const Label = styled(({ tokens, disabled, theme, type, ...props }) => (
   position: relative;
 
   &:hover ${IconContainer} {
-    border-color: ${({ disabled, theme }) =>
-      disabled
-        ? theme.orbit.borderColorInputHover
-        : theme.orbit.paletteInkLight}; // TODO create token
+    border-color: ${({ disabled, theme }) => !disabled && theme.orbit.borderColorInputHover};
   }
+
   &:active ${IconContainer} {
     border-color: ${({ disabled, theme, tokens }) =>
       disabled ? tokens.borderColor : theme.orbit.paletteInkNormal}; // TODO create token

diff --git a/src/InputField/__snapshots__/InputField.stories.storyshot b/src/InputField/__snapshots__/InputField.stories.storyshot
@@ -107,7 +107,7 @@ exports[`Storyshots InputField Default input 1`] = `
               Label
             </span>
             <div
-              className="InputField__InputContainer-evnRDD bJvOHm"
+              className="InputField__InputContainer-evnRDD bHPfak"
             >
               <input
                 className="InputField__Input-iRjCvp bzgBik"
@@ -435,7 +435,7 @@ exports[`Storyshots InputField Email input 1`] = `
               Email
             </span>
             <div
-              className="InputField__InputContainer-evnRDD bJvOHm"
+              className="InputField__InputContainer-evnRDD bHPfak"
             >
               <input
                 className="InputField__Input-iRjCvp bzgBik"
@@ -841,7 +841,7 @@ exports[`Storyshots InputField Number input 1`] = `
               Number
             </span>
             <div
-              className="InputField__InputContainer-evnRDD bJvOHm"
+              className="InputField__InputContainer-evnRDD bHPfak"
             >
               <input
                 className="InputField__Input-iRjCvp bzgBik"
@@ -1262,7 +1262,7 @@ exports[`Storyshots InputField Password input 1`] = `
               Password
             </span>
             <div
-              className="InputField__InputContainer-evnRDD bJvOHm"
+              className="InputField__InputContainer-evnRDD bHPfak"
             >
               <input
                 className="InputField__Input-iRjCvp bzgBik"
@@ -1620,7 +1620,7 @@ exports[`Storyshots InputField Playground 1`] = `
               Label
             </span>
             <div
-              className="InputField__InputContainer-evnRDD cDlDsu"
+              className="InputField__InputContainer-evnRDD cirwSX"
             >
               <div
                 className="InputField__Prefix-jLQUQe bYNuXJ"
@@ -2436,7 +2436,7 @@ exports[`Storyshots InputField Small input 1`] = `
               Label
             </span>
             <div
-              className="InputField__InputContainer-evnRDD cDlDsu"
+              className="InputField__InputContainer-evnRDD cirwSX"
             >
               <input
                 className="InputField__Input-iRjCvp jcNEKi"
@@ -2794,7 +2794,7 @@ exports[`Storyshots InputField With ButtonLink suffix 1`] = `
               Label
             </span>
             <div
-              className="InputField__InputContainer-evnRDD bJvOHm"
+              className="InputField__InputContainer-evnRDD bHPfak"
             >
               <input
                 className="InputField__Input-iRjCvp bzgBik"
@@ -3187,7 +3187,7 @@ exports[`Storyshots InputField With Icon prefix 1`] = `
               Label
             </span>
             <div
-              className="InputField__InputContainer-evnRDD bJvOHm"
+              className="InputField__InputContainer-evnRDD bHPfak"
             >
               <div
                 className="InputField__Prefix-jLQUQe fFqSCa"
@@ -3568,7 +3568,7 @@ exports[`Storyshots InputField With text prefix 1`] = `
               Label
             </span>
             <div
-              className="InputField__InputContainer-evnRDD bJvOHm"
+              className="InputField__InputContainer-evnRDD bHPfak"
             >
               <div
                 className="InputField__Prefix-jLQUQe fFqSCa"

diff --git a/src/InputField/index.js b/src/InputField/index.js
@@ -59,12 +59,11 @@ const InputContainer = styled(({ children, className }) => (
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "text")};
 
   &:hover > ${FakeInput} {
-    box-shadow: inset 0 0 0
-      ${({ disabled, theme, error }) =>
-        !disabled &&
-        `${theme.orbit.borderWidthInput} ${
-          error ? theme.orbit.paletteRedNormalHover : theme.orbit.borderColorInputHover
-        }`};
+    ${({ disabled, theme, error }) =>
+      !disabled &&
+      `box-shadow: inset 0 0 0 ${theme.orbit.borderWidthInput} ${
+        error ? theme.orbit.paletteRedNormalHover : theme.orbit.borderColorInputHover
+      }`};
   }
 `;
 

diff --git a/src/Radio/__snapshots__/Radio.stories.storyshot b/src/Radio/__snapshots__/Radio.stories.storyshot
@@ -99,7 +99,7 @@ exports[`Storyshots Radio Default 1`] = `
           }
         >
           <label
-            className="Radio__Label-bpjkjl jHbmxu"
+            className="Radio__Label-bpjkjl oDgKl"
           >
             <input
               checked={false}
@@ -387,7 +387,7 @@ exports[`Storyshots Radio Playground 1`] = `
           }
         >
           <label
-            className="Radio__Label-bpjkjl dLsYYr"
+            className="Radio__Label-bpjkjl EtzVG"
           >
             <input
               checked={true}
@@ -771,7 +771,7 @@ exports[`Storyshots Radio With help 1`] = `
           }
         >
           <label
-            className="Radio__Label-bpjkjl jHbmxu"
+            className="Radio__Label-bpjkjl oDgKl"
           >
             <input
               checked={false}

diff --git a/src/Radio/index.js b/src/Radio/index.js
@@ -101,11 +101,9 @@ const Label = styled(({ tokens, disabled, theme, type, ...props }) => (
   position: relative;
 
   &:hover ${IconContainer} {
-    border-color: ${({ disabled, theme }) =>
-      disabled
-        ? theme.orbit.borderColorInputHover
-        : theme.orbit.paletteInkLight}; // TODO create token
+    border-color: ${({ disabled, theme }) => !disabled && theme.orbit.borderColorInputHover};
   }
+
   &:active ${IconContainer} {
     border-color: ${({ disabled, theme, tokens }) =>
       disabled ? tokens.borderColor : theme.orbit.paletteInkNormal}; // TODO create token

diff --git a/src/Select/__snapshots__/Select.stories.storyshot b/src/Select/__snapshots__/Select.stories.storyshot
@@ -103,7 +103,7 @@ exports[`Storyshots Select Default 1`] = `
               className="Select__SelectContainer-hisSov erDdbv"
             >
               <select
-                className="Select__StyledSelect-eyhbyk FHpMK"
+                className="Select__StyledSelect-eyhbyk caetDp"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}
@@ -573,7 +573,7 @@ exports[`Storyshots Select Playground 1`] = `
               className="Select__SelectContainer-hisSov erDdbv"
             >
               <select
-                className="Select__StyledSelect-eyhbyk hlAgIh"
+                className="Select__StyledSelect-eyhbyk jPDlFj"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}
@@ -1215,7 +1215,7 @@ exports[`Storyshots Select With error message 1`] = `
               className="Select__SelectContainer-hisSov erDdbv"
             >
               <select
-                className="Select__StyledSelect-eyhbyk iAVQYf"
+                className="Select__StyledSelect-eyhbyk cvmoZE"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}
@@ -1764,7 +1764,7 @@ exports[`Storyshots Select With help message 1`] = `
               className="Select__SelectContainer-hisSov erDdbv"
             >
               <select
-                className="Select__StyledSelect-eyhbyk FHpMK"
+                className="Select__StyledSelect-eyhbyk caetDp"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}
@@ -2316,7 +2316,7 @@ exports[`Storyshots Select With placeholder 1`] = `
               className="Select__SelectContainer-hisSov erDdbv"
             >
               <select
-                className="Select__StyledSelect-eyhbyk hlAgIh"
+                className="Select__StyledSelect-eyhbyk jPDlFj"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}
@@ -2887,7 +2887,7 @@ exports[`Storyshots Select With prefix 1`] = `
                 </svg>
               </div>
               <select
-                className="Select__StyledSelect-eyhbyk dGbwEL"
+                className="Select__StyledSelect-eyhbyk faZRaN"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}
@@ -3429,7 +3429,7 @@ exports[`Storyshots Select With small size 1`] = `
               className="Select__SelectContainer-hisSov erDdbv"
             >
               <select
-                className="Select__StyledSelect-eyhbyk jgRkDt"
+                className="Select__StyledSelect-eyhbyk doQclr"
                 disabled={false}
                 onBlur={undefined}
                 onChange={[Function]}

diff --git a/src/Select/index.js b/src/Select/index.js
@@ -75,7 +75,7 @@ const StyledSelect = styled(
     cursor: default;
 
     &:hover {
-      border-color: ${({ theme }) => theme.orbit.borderColorInput};
+      box-shadow: inset 0 0 0 1px ${({ theme }) => theme.orbit.borderColorInput};
     }
   }
 `;