@kaizen/components 1.67.3 → 1.67.4

package/dist/types/TextArea/TextArea.d.ts

@@ -3,6 +3,10 @@ import { OverrideClassName } from "../types/OverrideClassName";
 export type TextAreaProps = {
     textAreaRef?: React.RefObject<HTMLTextAreaElement>;
     status?: "default" | "error" | "caution";
+    /**
+     * Grows the input height as more content is added
+     * Replace with CSS field-sizing once it's supported by all major browsers
+     */
     autogrow?: boolean;
     reversed?: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.67.3",
+  "version": "1.67.4",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/TextArea/TextArea.module.css

@@ -0,0 +1,142 @@
+.wrapper {
+  font-family: var(--typography-paragraph-body-font-family);
+  font-size: var(--typography-paragraph-body-font-size);
+  font-weight: var(--typography-paragraph-body-font-weight);
+  line-height: var(--typography-paragraph-body-line-height);
+  letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  color: var(--color-purple-800-rgb);
+}
+
+.wrapperAutogrow {
+  display: grid;
+}
+
+.wrapperAutogrow::after {
+  content: attr(data-value) " ";
+  white-space: pre-wrap;
+  visibility: hidden;
+}
+
+/* these properties need to be set on both for autogrow to work properly */
+.textarea,
+.wrapperAutogrow::after {
+  border: var(--border-solid-border-width) var(--border-solid-border-style)
+    var(--color-gray-500);
+  border-radius: var(--border-solid-border-radius);
+  padding: var(--spacing-sm);
+  box-sizing: border-box;
+  width: 100%;
+  font: inherit;
+}
+
+.textareaAutogrow,
+.wrapperAutogrow::after {
+  grid-area: 2 / 1;
+}
+
+.textarea {
+  display: block;
+  border: var(--border-solid-border-width) var(--border-solid-border-style)
+    var(--color-gray-500);
+  border-radius: var(--border-solid-border-radius);
+  padding: var(--spacing-sm);
+  resize: vertical;
+
+  &:focus {
+    outline: var(--border-focus-ring-border-width)
+      var(--border-focus-ring-border-style) var(--color-blue-500);
+    outline-offset: 1px;
+  }
+
+  &:disabled {
+    resize: none;
+  }
+}
+
+.textareaAutogrow {
+  overflow: hidden;
+}
+
+.default {
+  &:not(.error, .caution) {
+    &:disabled {
+      border-color: rgba(var(--color-gray-500-rgb), 0.3);
+    }
+  }
+
+  &:focus:not([disabled]),
+  &:hover:not([disabled]),
+  &:hover:focus:not([disabled]) {
+    background-color: var(--color-gray-200);
+    border-color: var(--color-gray-600);
+  }
+
+  &.error {
+    border-color: var(--color-red-500);
+
+    &:focus:not([disabled]),
+    &:hover:not([disabled]),
+    &:hover:focus:not([disabled]) {
+      border-color: var(--color-red-500);
+    }
+  }
+
+  &.caution {
+    border-color: var(--color-yellow-600);
+
+    &:focus:not([disabled]),
+    &:hover:not([disabled]),
+    &:hover:focus:not([disabled]) {
+      border-color: var(--color-yellow-600);
+    }
+  }
+
+  &.disabled {
+    background-color: var(--color-white);
+    border-color: rgba(var(--color-gray-500-rgb), 0.3);
+    color: rgba(var(--color-purple-800-rgb), 0.3);
+  }
+}
+
+.reversed {
+  border-color: rgba(var(--color-white-rgb), 0.65);
+  background: transparent;
+  color: var(--color-white);
+
+  &:focus {
+    outline-color: var(--color-blue-300);
+  }
+
+  &:focus:not([disabled]),
+  &:hover:not([disabled]),
+  &:hover:focus:not([disabled]) {
+    background: rgba(var(--color-white-rgb), 0.1);
+    border-color: var(--color-white);
+  }
+
+  &.error {
+    border-color: var(--color-red-300);
+
+    &:focus:not([disabled]),
+    &:hover:not([disabled]),
+    &:hover:focus:not([disabled]) {
+      border-color: var(--color-red-300);
+    }
+  }
+
+  &.caution {
+    border-color: var(--color-yellow-400);
+
+    &:focus:not([disabled]),
+    &:hover:not([disabled]),
+    &:hover:focus:not([disabled]) {
+      border-color: var(--color-yellow-400);
+    }
+  }
+
+  &.disabled {
+    background: transparent;
+    border-color: rgba(var(--color-white-rgb), 0.3);
+    color: rgba(var(--color-white-rgb), 0.3);
+  }
+}

package/src/TextArea/TextArea.tsx

@@ -1,16 +1,15 @@
-import React, {
-  TextareaHTMLAttributes,
-  useEffect,
-  useRef,
-  useState,
-} from "react"
+import React, { TextareaHTMLAttributes, useRef, useState } from "react"
 import classnames from "classnames"
 import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./TextArea.module.scss"
+import styles from "./TextArea.module.css"
 
 export type TextAreaProps = {
   textAreaRef?: React.RefObject<HTMLTextAreaElement>
   status?: "default" | "error" | "caution"
+  /**
+   * Grows the input height as more content is added
+   * Replace with CSS field-sizing once it's supported by all major browsers
+   */
   autogrow?: boolean
   reversed?: boolean
   /**
@@ -32,73 +31,46 @@ export const TextArea = ({
   onChange: propsOnChange,
   ...restProps
 }: TextAreaProps): JSX.Element => {
-  const [textAreaHeight, setTextAreaHeight] = useState<string>("auto")
-  const [parentHeight, setParentHeight] = useState<string>("auto")
   const [internalValue, setInternalValue] = useState<
     string | number | readonly string[] | undefined
-  >(autogrow ? defaultValue : undefined)
+  >(autogrow && !value ? defaultValue : undefined)
   // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas
-  // essentially forces the textarea into an (interally) controlled mode if autogrow is true
-  const textAreaRef = propsTextAreaRef || useRef(null)
-
-  useEffect(() => {
-    if (!autogrow) return
-
-    const scrollHeight = textAreaRef.current!.scrollHeight
-    if (scrollHeight < 1) return
-
-    const borderWidth = textAreaRef.current
-      ? parseInt(getComputedStyle(textAreaRef.current).borderTopWidth, 10)
-      : 0
-    const newHeight = scrollHeight + borderWidth * 2
-    setParentHeight(`${newHeight}px`)
-    setTextAreaHeight(`${newHeight}px`)
-  }, [internalValue])
-
-  const onChange = !autogrow
-    ? undefined
-    : (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
-        setTextAreaHeight("auto")
-        // ^ this is required to avoid the textarea height from building up indefinitely
-        // see https://medium.com/@lucasalgus/creating-a-custom-auto-resize-textarea-component-for-your-react-web-application-6959c0ad68bc#2dee
-
-        setInternalValue(event.target.value)
-        if (propsOnChange) {
-          propsOnChange(event)
-        }
-      }
-
-  const getWrapperStyle = (): { minHeight: string } | undefined =>
-    autogrow ? { minHeight: parentHeight } : undefined
-
-  const getTextAreaStyle = (): { height: string } | undefined =>
-    autogrow ? { height: textAreaHeight } : undefined
+  // essentially forces the textarea into an (interally) controlled mode if autogrow is true and mode is uncontrolled
 
   const controlledValue = value || internalValue
+  const textAreaRef = propsTextAreaRef || useRef(null)
+
+  const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
+    propsOnChange && propsOnChange(event)
+    setInternalValue(event.target.value)
+  }
 
   return (
-    <div className={styles.wrapper} style={getWrapperStyle()}>
+    <div
+      className={classnames(styles.wrapper, {
+        [styles.wrapperAutogrow]: autogrow,
+      })}
+      data-value={autogrow ? controlledValue : undefined}
+    >
       <textarea
         className={classnames(
           styles.textarea,
           styles[status],
           reversed ? styles.reversed : styles.default,
-          disabled && styles.disabled
+          {
+            [styles.disabled]: disabled,
+            [styles.textareaAutogrow]: autogrow,
+          }
         )}
         rows={rows}
-        onChange={onChange || propsOnChange}
+        onChange={onChange}
         value={controlledValue}
         defaultValue={controlledValue ? undefined : defaultValue}
         // ^ React throws a warning if you specify both a value and a defaultValue
         ref={textAreaRef}
-        style={getTextAreaStyle()}
         disabled={disabled}
         {...restProps}
       />
-
-      {/* Textareas aren't able to have pseudo elements like ::after on them,
-          so we have to create an element ourselves for the focus ring */}
-      <div className={styles.focusRing} />
     </div>
   )
 }

package/dist/cjs/TextArea/TextArea.module.scss.cjs

@@ -1,13 +0,0 @@
-'use strict';
-
-var styles = {
-  "wrapper": "TextArea-module_wrapper__ytS6M",
-  "textarea": "TextArea-module_textarea__GeHn4",
-  "focusRing": "TextArea-module_focusRing__kECqH",
-  "default": "TextArea-module_default__Z8jvR",
-  "error": "TextArea-module_error__XOQRm",
-  "caution": "TextArea-module_caution__9BGd0",
-  "disabled": "TextArea-module_disabled__N09tP",
-  "reversed": "TextArea-module_reversed__-SoNq"
-};
-module.exports = styles;

package/dist/esm/TextArea/TextArea.module.scss.mjs

@@ -1,11 +0,0 @@
-var styles = {
-  "wrapper": "TextArea-module_wrapper__ytS6M",
-  "textarea": "TextArea-module_textarea__GeHn4",
-  "focusRing": "TextArea-module_focusRing__kECqH",
-  "default": "TextArea-module_default__Z8jvR",
-  "error": "TextArea-module_error__XOQRm",
-  "caution": "TextArea-module_caution__9BGd0",
-  "disabled": "TextArea-module_disabled__N09tP",
-  "reversed": "TextArea-module_reversed__-SoNq"
-};
-export { styles as default };

package/src/TextArea/TextArea.module.scss

@@ -1,137 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/border";
-@import "../../styles/utils/forms";
-@import "../../styles/utils/form-variables";
-
-// Vars
-$input-disabled-opacity: 0.3;
-$input-disabled-border-alpha: 50%;
-
-.wrapper {
-  position: relative;
-}
-
-.textarea {
-  @include form-input-reset;
-
-  border-radius: $border-solid-border-radius;
-  width: 100%;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
-  padding: $spacing-sm;
-  color: $color-purple-800-rgb;
-  display: block;
-  resize: vertical;
-
-  @include form-input-placeholder {
-    line-height: 1.5;
-    color: $dt-color-form-text-color-placeholder;
-  }
-
-  &:disabled {
-    resize: none;
-  }
-}
-
-.textarea:focus + .focusRing {
-  $focus-ring-offset: 3px;
-
-  position: absolute;
-  background: transparent;
-  border-radius: $border-focus-ring-border-radius;
-  border-width: $border-focus-ring-border-width;
-  border-style: $border-focus-ring-border-style;
-  border-color: transparent;
-  inset: -$focus-ring-offset;
-  pointer-events: none;
-}
-
-.textarea.default {
-  @include form-input-focus-state {
-    background-color: $color-gray-200;
-    border-color: $color-gray-600;
-  }
-
-  &:focus + .focusRing {
-    border-color: $color-blue-500;
-  }
-
-  &:not(.error, .caution) {
-    &:disabled {
-      border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
-    }
-  }
-
-  &.error {
-    border-color: $color-red-500;
-
-    @include form-input-focus-state {
-      border-color: $color-red-500;
-    }
-  }
-
-  &.caution {
-    border-color: $color-yellow-600;
-
-    @include form-input-focus-state {
-      border-color: $color-yellow-600;
-    }
-  }
-
-  &.disabled {
-    background-color: $color-white;
-    border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
-    color: rgba($color-purple-800-rgb, $input-disabled-opacity);
-
-    @include form-input-placeholder {
-      opacity: $input-disabled-opacity;
-    }
-  }
-}
-
-// Reversed (Dark Backgrounds)
-.textarea.reversed {
-  border-color: rgba($color-white-rgb, 0.65);
-  background: transparent;
-  color: $color-white;
-
-  @include form-input-focus-state {
-    background: rgba($color-white-rgb, 0.1);
-    border-color: $color-white;
-  }
-
-  @include form-input-placeholder {
-    line-height: 1.5;
-    color: $color-white;
-  }
-
-  &:focus + .focusRing {
-    border-color: $color-blue-300;
-  }
-
-  &.error {
-    border-color: $color-red-300;
-
-    @include form-input-focus-state {
-      border-color: $color-red-300;
-    }
-  }
-
-  &.caution {
-    border-color: $color-yellow-400;
-
-    @include form-input-focus-state {
-      border-color: $color-yellow-400;
-    }
-  }
-
-  &.disabled {
-    background: transparent;
-    border-color: rgba($color-white-rgb, $input-disabled-opacity);
-    color: rgba($color-white-rgb, $input-disabled-opacity);
-
-    @include form-input-placeholder {
-      opacity: $input-disabled-opacity;
-    }
-  }
-}