refactor(TextArea): refresh

Author: enisdenjo

packages/ui/src/TextArea/TextArea.treat.ts

@@ -1,73 +1,80 @@
-import { style, globalStyle } from 'treat';
+import { style, styleMap } from 'treat';
 
 export const root = style({
   position: 'relative',
-  flexDirection: 'column-reverse', // because we select the `label` using the CSS `+` adjacent sibling selector
   display: 'flex',
-  textAlign: 'left',
+  flexDirection: 'column',
 });
 
-export const textArea = style(({ palette, sizing, shadows, shape, typography }) => ({
-  // reset
-  display: 'inherit',
-  margin: 0,
-  outline: 0,
-  boxSizing: 'border-box',
-  backgroundClip: 'padding-box',
-  whiteSpace: 'nowrap',
-  '--webkit-appearance': 'none',
-  // ./reset
-  boxShadow: shadows.line,
-  border: `1px solid ${palette.border}`,
-  borderRadius: shape.borderRadius.tiny,
-  minWidth: 256,
-  minHeight: sizing('tiny') * 6,
-  padding: sizing('tiny') - 2.5,
-  backgroundColor: palette.white,
-  ...typography.variant('small'),
-  textAlign: 'inherit',
-  color: palette.textDark,
-  ':invalid': {
-    borderColor: palette.warning,
-  },
-  '::placeholder': {
-    color: palette.light('textDark'),
-  },
-}));
+export const label = style(() => ({}));
 
-export const label = style(({ palette }) => ({
-  selectors: {
-    [`${textArea}:invalid + &`]: {
-      color: palette.warning,
+export const textArea = styleMap(({ palette, sizing, shape, typography }) => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    backgroundColor: palette.surface,
+    borderRadius: shape.borderRadius.small,
+    border: `1px solid ${palette.border}`,
+  },
+  root: {
+    flex: 1,
+    border: 0,
+    outline: 0,
+    margin: 0,
+    backgroundColor: 'transparent',
+    backgroundClip: 'padding-box',
+    color: palette.text,
+    padding: sizing('small'),
+    ...typography.variant('regular'),
+    textAlign: 'inherit',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    '--webkit-appearance': 'none',
+    '::placeholder': {
+      color: palette.light('text'),
     },
+    minWidth: 256,
+    minHeight: sizing('large'),
   },
 }));
 
 export const dense = style(({ sizing }) => ({
   selectors: {
-    [`${textArea}&`]: {
-      padding: sizing('tiny') / 2 + 0.5,
+    [`${label}&`]: {
+      lineHeight: 1.125,
+    },
+    [`${textArea.root}&`]: {
+      padding: sizing('tiny'),
     },
   },
 }));
 
 export const disabled = style(({ palette }) => ({
   selectors: {
-    [`${textArea}&`]: {
-      boxShadow: 'none',
+    [`${textArea.container}&`]: {
       cursor: 'not-allowed',
-      color: palette.lighten('textDark', 0.68),
+      backgroundColor: palette.disabled,
     },
   },
 }));
 
-globalStyle(`${textArea}:hover:not(${disabled}), ${textArea}:focus`, ({ palette }) => ({
-  borderColor: palette.dark('border'),
+export const invalid = style(({ palette }) => ({
+  selectors: {
+    [`${textArea.container}&`]: {
+      borderColor: palette.warning,
+    },
+    [`${textArea.root}&`]: {
+      borderColor: palette.warning,
+    },
+  },
 }));
 
-globalStyle(
-  `${textArea}:hover:not(${disabled}):invalid, ${textArea}:focus:invalid`,
-  ({ palette }) => ({
-    borderColor: palette.dark('warning'),
-  }),
-);
+export const focused = style(({ palette, shadows }) => ({
+  selectors: {
+    [`${textArea.container}&`]: {
+      boxShadow: shadows.line,
+      outline: `${palette.focus} auto 5px`,
+    },
+  },
+}));

packages/ui/src/TextArea/TextArea.tsx

@@ -4,14 +4,11 @@
  *
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import clsx from 'clsx';
-
+import { Label } from '../Typography';
 import { useStyles } from 'react-treat';
-
-import { Label } from '../Label';
-
-import * as styles from './TextArea.treat';
+import * as classesRef from './TextArea.treat';
 
 export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   dense?: boolean;
@@ -23,19 +20,57 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(fun
   props,
   ref,
 ) {
-  const { className, dense, disabled, label, ...rest } = props;
-
-  const classes = useStyles(styles);
+  const { className, dense, disabled, label, onFocus, onBlur, onInvalid, onInput, ...rest } = props;
+  const classes = useStyles(classesRef);
+  const [focused, setFocused] = useState(false);
+  const [invalid, setInvalid] = useState(false);
 
   return (
     <div className={clsx(classes.root, className)}>
-      <textarea
-        {...rest}
-        ref={ref}
-        disabled={disabled}
-        className={clsx(classes.textArea, dense && classes.dense, disabled && classes.disabled)}
-      />
-      {label && <Label className={clsx(classes.label, dense && classes.dense)}>{label}</Label>}
+      {label && (
+        <Label
+          color={invalid ? 'warning' : undefined}
+          className={clsx(classes.label, dense && classes.dense)}
+        >
+          {label}
+        </Label>
+      )}
+      <div
+        className={clsx(
+          classes.textArea.container,
+          focused && classes.focused,
+          invalid && classes.invalid,
+          disabled && classes.disabled,
+          dense && classes.dense,
+        )}
+      >
+        <textarea
+          {...rest}
+          ref={ref}
+          disabled={disabled}
+          onFocus={(event) => {
+            setFocused(true);
+            if (onFocus) onFocus(event);
+          }}
+          onBlur={(event) => {
+            setFocused(false);
+            if (onBlur) onBlur(event);
+          }}
+          onInvalid={(event) => {
+            setInvalid(true);
+            if (onInvalid) onInvalid(event);
+          }}
+          onInput={(event) => {
+            if (event.currentTarget.checkValidity()) setInvalid(false);
+            if (onInput) onInput(event);
+          }}
+          className={clsx(
+            classes.textArea.root,
+            dense && classes.dense,
+            disabled && classes.disabled,
+          )}
+        />
+      </div>
     </div>
   );
 });