chore: Refactor TextArea and TextInput with new styling utilities (#2825

) Fixes: #2647, #2648 [category:Components] Release Note: We've updated `TextInput` and `TextArea` to use our new Tokens and styling utilities. The React interface **has not changed**, but CSS variables are now used for dynamic properties. Co-authored-by: manuel.carrera <manuel.carrera@workday.com> Co-authored-by: @NicholasBoll <nicholas.boll@gmail.com>
Workday · Jul 26, 2024 · 9bf5667 · 9bf5667
1 parent 603f76c
commit 9bf5667
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 151 deletions.
diff --git a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx
@@ -44,8 +44,8 @@ A note to the reader:
   - [InputIconContainer](#inputiconcontainer)
   - [Select (Preview)](#select-preview)
 - [Component Updates](#component-updates)
-  - [Popup, Dialog and Modal](#popup-dialog-and-modal)
-  - [Toast](#toast)
+  - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
+  - [Text Area](#text-area)
 - [Style Utility Updates](#style-utility-updates)
   - [createStencil](#createstencil)
 - [Troubleshooting](#troubleshooting)
@@ -59,8 +59,8 @@ A note to the reader:
 In v12, all the components listed in this guide have started using our new
 [Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
 
-In v12 you must add `@workday/canvas-tokens-web` to ensure our components are properly styled and the
-variables are defined. For more information on installing and using, please reference our tokens
+In v12 you must add `@workday/canvas-tokens-web` to ensure our components are properly styled and
+the variables are defined. For more information on installing and using, please reference our tokens
 [docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
 
 ## Deprecations
@@ -70,51 +70,67 @@ in a future major release. This signals consumers to migrate to a more stable al
 deprecated code is removed.
 
 ## Removals
-Removals are deletions from our codebase and you can no longer consume this component. We've either promoted or replaced a component or utility.
+
+Removals are deletions from our codebase and you can no longer consume this component. We've either
+promoted or replaced a component or utility.
 
 ### Select (Preview)
 
 **PR:** [#2796](https://github.com/Workday/canvas-kit/pull/2796)
 
-We've removed the `Select` component that was in Preview. Please use the compound [Select component from Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic).
+We've removed the `Select` component that was in Preview. Please use the compound
+[Select component from Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic).
 
 ### InputIconContainer
 
 **PR:** [#2838](https://github.com/Workday/canvas-kit/pull/2838)
 
-We've removed `InputIconContainer` from Main. Please use [InputGroup](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons) from Main instead.
+We've removed `InputIconContainer` from Main. Please use
+[InputGroup](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons)
+from Main instead.
 
 ---
 
 ## Component Updates
 
 ### Styling API and CSS Tokens
 
+**PRs:** [#2825](https://github.com/Workday/canvas-kit/pull/2825),
+[#2795](https://github.com/Workday/canvas-kit/pull/2795)
+
 Several components have been refactored to use our new
 [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
 [styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
 The React interface **has not changed**, but CSS variables are now used for dynamic properties.
 
 The following components are affected:
 
-- `Popup`
 - `Dialog`
 - `Modal`
+- `Popup`
+- `TextArea`
+- `TextInput`
 - `Toast`
 
 > **Note:** These components also support our new `cs` prop for styling. Learn more about styling
 > with `cs` in our
 > [documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--cs-prop).
 
-### Popup, Dialog and Modal
+### Text Area
 
-**PR:** [#2795](https://github.com/Workday/canvas-kit/pull/2795)
+**PR:** [#2825](https://github.com/Workday/canvas-kit/pull/2825)
 
-### Toast
+`TextAreaResizeDirection` is no longer a TypeScript enum, but a JavaScript object. This change does
+not effect runtime at all, but may cause TypeScript errors if you use `TextAreaResizeDirection` as a
+type.
 
-**PR:** [#2795](https://github.com/Workday/canvas-kit/pull/2795)
+```tsx
+// v11
+interface MyProps { resize?: TextAreaResizeDirection }
 
-## Style Utility Updates
+// 12 type ValueOf<T> = T[keyof T]; interface MyProps { resize?:
+ValueOf<typeof TextAreaResizeDirection> }
+```
 
 ## Troubleshooting
 

diff --git a/modules/react/text-area/lib/TextArea.tsx b/modules/react/text-area/lib/TextArea.tsx
@@ -1,107 +1,67 @@
 import * as React from 'react';
-import {
-  createComponent,
-  StyledType,
-  GrowthBehavior,
-  ErrorType,
-  errorRing,
-  styled,
-  Themeable,
-} from '@workday/canvas-kit-react/common';
-import {borderRadius, inputColors, space, type} from '@workday/canvas-kit-react/tokens';
+import {createComponent, GrowthBehavior, ErrorType} from '@workday/canvas-kit-react/common';
+import {createStencil, calc, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {textInputStencil} from '@workday/canvas-kit-react/text-input';
+export type ValueOf<T> = T[keyof T];
 
-export interface TextAreaProps extends Themeable, GrowthBehavior {
-  /**
-   * If true, set the TextArea to the disabled state.
-   * @default false
-   */
-  disabled?: boolean;
+export interface TextAreaProps extends GrowthBehavior {
   /**
    * The type of error associated with the TextArea (if applicable).
    */
   error?: ErrorType;
-  /**
-   * The function called when the TextArea state changes.
-   */
-  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  /**
-   * The placeholder text of the TextArea.
-   */
-  placeholder?: string;
-  /**
-   * If true, set the TextArea to read-only. The user will be unable to interact with the TextArea.
-   * @default false
-   */
-  readOnly?: boolean;
   /**
    * The resize constraints of the TextArea.
    * @default TextArea.ResizeDirection.Both
    */
-  resize?: TextAreaResizeDirection;
-  /**
-   * The value of the TextArea.
-   */
-  value?: any;
+  resize?: ValueOf<typeof TextAreaResizeDirection>;
 }
 
-export enum TextAreaResizeDirection {
-  None = 'none',
-  Both = 'both',
-  Horizontal = 'horizontal',
-  Vertical = 'vertical',
-}
+export const TextAreaResizeDirection = {
+  None: 'none',
+  Both: 'both',
+  Horizontal: 'horizontal',
+  Vertical: 'vertical',
+} as const;
 
-const StyledTextArea = styled('textarea')<TextAreaProps & StyledType>(
-  ({theme, error}) => ({
-    ...type.levels.subtext.large,
-    border: `1px solid ${inputColors.border}`,
-    display: 'block',
-    backgroundColor: inputColors.background,
-    borderRadius: borderRadius.m,
-    boxSizing: 'border-box',
-    minHeight: space.xxl,
-    minWidth: `calc((${space.xxxl} * 3) + ${space.xl})`,
-    transition: '0.2s box-shadow, 0.2s border-color',
-    padding: space.xxs, // Compensate for border
-    margin: 0, // Fix Safari
+export const textAreaStencil = createStencil({
+  extends: textInputStencil,
+  base: {
+    minHeight: system.space.x16,
+    minWidth: calc.add(calc.multiply(system.space.x20, 3), system.space.x10),
     '&::webkit-resizer': {
       display: 'none',
     },
-    '&::placeholder': {
-      color: inputColors.placeholder,
-    },
-    '&:hover': {
-      borderColor: inputColors.hoverBorder,
-    },
-    '&:focus:not([disabled])': {
-      borderColor: theme.canvas.palette.common.focusOutline,
-      boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
-      outline: 'none',
-    },
-    '&:disabled': {
-      backgroundColor: inputColors.disabled.background,
-      borderColor: inputColors.disabled.border,
-      color: inputColors.disabled.text,
-      '&::placeholder': {
-        color: inputColors.disabled.text,
+  },
+
+  modifiers: {
+    resize: {
+      both: {
+        resize: 'both',
+      },
+      horizontal: {
+        resize: 'horizontal',
+      },
+      vertical: {
+        resize: 'vertical',
+      },
+      none: {
+        resize: 'none',
       },
     },
-    ...errorRing(error, theme),
-  }),
-
-  ({resize, grow}) => ({
-    width: grow ? '100%' : undefined,
-    resize: grow ? TextAreaResizeDirection.Vertical : resize,
-  })
-);
+  },
+  defaultModifiers: {
+    resize: 'both',
+  },
+});
 
 export const TextArea = createComponent('textarea')({
   displayName: 'TextArea',
   Component: (
-    {resize = TextAreaResizeDirection.Both, grow, ...elemProps}: TextAreaProps,
+    {resize = TextAreaResizeDirection.Both, grow, error, ...elemProps}: TextAreaProps,
     ref,
     Element
-  ) => <StyledTextArea ref={ref} as={Element} grow={grow} resize={resize} {...elemProps} />,
+  ) => <Element ref={ref} {...handleCsProp(elemProps, textAreaStencil({error, grow, resize}))} />,
   subComponents: {
     ErrorType,
     ResizeDirection: TextAreaResizeDirection,