remove color contexts from Input

textkernel · Jan 27, 2020 · 87b169e · 87b169e
1 parent ce2f7a3
commit 87b169e
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 22 deletions.
diff --git a/src/components/FieldWithValidation/__tests__/__snapshots__/FieldWithValidation.spec.js.snap b/src/components/FieldWithValidation/__tests__/__snapshots__/FieldWithValidation.spec.js.snap
@@ -5,14 +5,13 @@ exports[`FieldWithValidation when error message is not defined should simply ren
   useTooltip={false}
 >
   <Input
-    context="brand"
     disabled={false}
     isBlock={false}
     size="normal"
     type="text"
   >
     <input
-      className="Input Input--context_brand"
+      className="Input"
       disabled={false}
       type="text"
     />

diff --git a/src/components/Input/Input.scss b/src/components/Input/Input.scss
@@ -4,20 +4,17 @@
     @extend %input;
 
     &--context {
-        @each $context in (brand, primary, accent, info, good, warning, bad) {
+        @each $context in (good, warning, bad) {
             &_#{ $context } {
+                border-color: var(--color-#{$context});
+                box-shadow: 0 0 0 var(--outline-size) var(--color-#{$context}-25);
+
                 &:focus {
                     border-color: var(--color-#{$context});
                     box-shadow: 0 0 0 var(--outline-size) var(--color-#{$context}-25);
                 }
             }
         }
-        @each $context in (warning, bad) {
-            &_#{ $context } {
-                border-color: var(--color-#{$context});
-                box-shadow: 0 0 0 var(--outline-size) var(--color-#{$context}-25);
-            }
-        }
     }
 
     &--isBlock {

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { bem } from '../../utils';
 import styles from './Input.scss';
-import { Context, InputType, Size } from '../../constants';
+import { ValidationContext, InputType, Size } from '../../constants';
 
 // Any other attributes (onChange, onKeyUp etc.) are
 // supported although not defined in props type definition
 interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /** The input field context (e.g. brand, primary, bad, good etc. - defaults to brand) */
-    context?: Context;
+    context?: ValidationContext;
     /** Should the input field be disabled or not */
     disabled?: boolean;
     /** Whether or not to show block-level input field (full width) */
@@ -39,7 +39,6 @@ export const Input: React.FC<Props> = React.forwardRef((props, ref) => {
 Input.displayName = 'Input';
 
 Input.defaultProps = {
-    context: 'brand',
     disabled: false,
     isBlock: false,
     type: 'text',

diff --git a/src/components/Input/__tests__/__snapshots__/Input.spec.js.snap b/src/components/Input/__tests__/__snapshots__/Input.spec.js.snap
@@ -10,7 +10,7 @@ exports[`<Input> that renders an input field should add classes when props are c
 
 exports[`<Input> that renders an input field should render default input correctly 1`] = `
 <input
-  className="Input Input--context_brand"
+  className="Input"
   disabled={false}
   type="text"
   value="Some value"

diff --git a/src/constants/style-related.ts b/src/constants/style-related.ts
@@ -1,17 +1,18 @@
+export const VALIDATION_CONTEXTS = ['good', 'warning', 'bad'] as const;
+
 export const CONTEXTS = [
     'neutral',
     'brand',
     'primary',
     'accent',
     'info',
-    'good',
-    'warning',
-    'bad',
+    ...VALIDATION_CONTEXTS,
 ] as const;
 
 export const SIZES = ['small', 'normal', 'large'] as const;
 export const HEADING_SIZES = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
 export const CHECKBOX_VIEWBOX = [0, 0, 10, 10] as const;
 
+export type ValidationContext = typeof VALIDATION_CONTEXTS[number];
 export type Context = typeof CONTEXTS[number];
 export type Size = typeof SIZES[number];
diff --git a/src/themes/oneui/placeholders/_input.scss b/src/themes/oneui/placeholders/_input.scss
@@ -1,5 +1,5 @@
 %input {
-    background-color: #FFF;
+    background-color: #fff;
     border: {
         color: var(--color-neutral);
         radius: var(--border-radius);
@@ -19,8 +19,8 @@
     transition: border-color var(--transition-duration);
 
     &:focus {
-        border-color: var(--color-neutral);
-        box-shadow: 0 0 0 var(--outline-size) var(--color-neutral-25);
+        border-color: var(--color-brand);
+        box-shadow: 0 0 0 var(--outline-size) var(--color-brand-25);
         z-index: 1;
     }
 

diff --git a/stories/Input.tsx b/stories/Input.tsx
@@ -2,13 +2,13 @@ import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import { boolean, select, text, withKnobs } from '@storybook/addon-knobs';
 import { Input } from '@textkernel/oneui';
-import { CONTEXTS, INPUT_TYPES, SIZES } from '@textkernel/oneui/constants';
+import { VALIDATION_CONTEXTS, INPUT_TYPES, SIZES } from '@textkernel/oneui/constants';
 
 storiesOf('Atoms|Input', module)
     .addDecorator(withKnobs)
     .add('Default behavior', () => (
         <Input
-            context={select('Context', CONTEXTS, CONTEXTS[1])}
+            context={select('Context', [null, ...VALIDATION_CONTEXTS], null)}
             disabled={boolean('Disabled', false)}
             isBlock={boolean('isBlock', false)}
             onChange={e => {
@@ -22,7 +22,7 @@ storiesOf('Atoms|Input', module)
     ))
     .add('Controlled component', () => (
         <Input
-            context={select('Context', CONTEXTS, CONTEXTS[1])}
+            context={select('Context', [null, ...VALIDATION_CONTEXTS], null)}
             disabled={boolean('Disabled', false)}
             isBlock={boolean('isBlock', false)}
             onChange={e => {