feat(text-area): Add theming support (#459)

* feat(text-area): Add theming support * chore: Move TextArea static states component to the bottom of story file Co-authored-by: Alex Nicholls <anicholls3@gmail.com>
Workday · Feb 13, 2020 · 50353be · 50353be
1 parent 625a78f
commit 50353be
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 57 deletions.
diff --git a/modules/form-field/react/stories/stories_TextArea.tsx b/modules/form-field/react/stories/stories_TextArea.tsx
@@ -3,7 +3,12 @@ import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import withReadme from 'storybook-readme/with-readme';
 import {StaticStates} from '@workday/canvas-kit-labs-react-core';
-import {controlComponent, ComponentStatesTable, permutateProps} from '../../../../utils/storybook';
+import {
+  controlComponent,
+  ComponentStatesTable,
+  permutateProps,
+  customColorTheme,
+} from '../../../../utils/storybook';
 
 import {TextArea} from '../../../text-area/react';
 import FormField from '../index';
@@ -158,56 +163,64 @@ storiesOf('Components|Inputs/TextArea/React/Left Label', module)
     </FormField>
   ));
 
+const TextAreaStates = () => (
+  <StaticStates>
+    <ComponentStatesTable
+      rowProps={permutateProps(
+        {
+          value: [{value: 'Input value', label: 'With Value'}, {value: '', label: 'No Value'}],
+          placeholder: [{value: 'Placeholder', label: 'Placeholder'}],
+          error: [
+            {value: undefined, label: ''},
+            {value: TextArea.ErrorType.Alert, label: 'Alert'},
+            {value: TextArea.ErrorType.Error, label: 'Error'},
+          ],
+        },
+        props => {
+          if (props.value === '' && !props.placeholder) {
+            return false;
+          }
+          return true;
+        }
+      )}
+      columnProps={permutateProps(
+        {
+          className: [
+            {label: 'Default', value: ''},
+            {label: 'Hover', value: 'hover'},
+            {label: 'Focus', value: 'focus'},
+            {label: 'Focus Hover', value: 'focus hover'},
+            {label: 'Active', value: 'active'},
+            {label: 'Active Hover', value: 'active hover'},
+          ],
+          disabled: [{label: '', value: false}, {label: 'Disabled', value: true}],
+        },
+        props => {
+          if (props.disabled && !['', 'hover'].includes(props.className)) {
+            return false;
+          }
+          return true;
+        }
+      )}
+    >
+      {props => (
+        <TextArea
+          {...props}
+          style={{minWidth: 60, width: 100}}
+          onChange={() => {}} // eslint-disable-line no-empty-function
+        />
+      )}
+    </ComponentStatesTable>
+  </StaticStates>
+);
+
 storiesOf('Components|Inputs/TextArea/React/Visual Testing', module)
   .addParameters({component: TextArea})
   .addDecorator(withReadme(README))
-  .add('States', () => (
-    <StaticStates>
-      <ComponentStatesTable
-        rowProps={permutateProps(
-          {
-            value: [{value: 'Input value', label: 'With Value'}, {value: '', label: 'No Value'}],
-            placeholder: [{value: 'Placeholder', label: 'Placeholder'}],
-            error: [
-              {value: undefined, label: ''},
-              {value: TextArea.ErrorType.Alert, label: 'Alert'},
-              {value: TextArea.ErrorType.Error, label: 'Error'},
-            ],
-          },
-          props => {
-            if (props.value === '' && !props.placeholder) {
-              return false;
-            }
-            return true;
-          }
-        )}
-        columnProps={permutateProps(
-          {
-            className: [
-              {label: 'Default', value: ''},
-              {label: 'Hover', value: 'hover'},
-              {label: 'Focus', value: 'focus'},
-              {label: 'Focus Hover', value: 'focus hover'},
-              {label: 'Active', value: 'active'},
-              {label: 'Active Hover', value: 'active hover'},
-            ],
-            disabled: [{label: '', value: false}, {label: 'Disabled', value: true}],
-          },
-          props => {
-            if (props.disabled && !['', 'hover'].includes(props.className)) {
-              return false;
-            }
-            return true;
-          }
-        )}
-      >
-        {props => (
-          <TextArea
-            {...props}
-            style={{minWidth: 60, width: 100}}
-            onChange={() => {}} // eslint-disable-line no-empty-function
-          />
-        )}
-      </ComponentStatesTable>
-    </StaticStates>
-  ));
+  .add('States', () => <TextAreaStates />)
+  .addParameters({
+    canvasProviderDecorator: {
+      theme: customColorTheme,
+    },
+  })
+  .add('Theming', () => <TextAreaStates />);
diff --git a/modules/text-area/react/lib/TextArea.tsx b/modules/text-area/react/lib/TextArea.tsx
@@ -52,7 +52,7 @@ export enum TextAreaResizeDirection {
 }
 
 const TextAreaContainer = styled('textarea')<TextAreaProps>(
-  {
+  ({theme, error}) => ({
     ...type.body,
     border: `1px solid ${inputColors.border}`,
     display: 'block',
@@ -74,8 +74,8 @@ const TextAreaContainer = styled('textarea')<TextAreaProps>(
       borderColor: inputColors.hoverBorder,
     },
     '&:focus:not([disabled])': {
-      borderColor: inputColors.focusBorder,
-      boxShadow: `inset 0 0 0 1px ${inputColors.focusBorder}`,
+      borderColor: theme.palette.common.focusOutline,
+      boxShadow: `inset 0 0 0 1px ${theme.palette.common.focusOutline}`,
       outline: 'none',
     },
     '&:disabled': {
@@ -86,10 +86,9 @@ const TextAreaContainer = styled('textarea')<TextAreaProps>(
         color: inputColors.disabled.text,
       },
     },
-  },
-  ({error}) => ({
-    ...errorRing(error),
+    ...errorRing(error, theme),
   }),
+
   ({resize, grow}) => ({
     width: grow ? '100%' : undefined,
     resize: grow ? TextAreaResizeDirection.Vertical : resize,