@kaizen/components 0.0.0-canary-fix-select-futureselect-focus-jumping-20241003232256 → 0.0.0-canary-tsx-codemod-20241029235345

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/src/TextField/TextField.module.scss

@@ -1,49 +1,23 @@
-@import "~@kaizen/design-tokens/sass/color";
 @import "../../styles/utils/animation";
-@import "../../styles/utils/legacy/layout";
-@import "../../styles/utils/legacy/type";
-
-@mixin input-icon($color, $reversed) {
-  color: $color;
-
-  .withReversed & {
-    color: $reversed;
-  }
-}
 
 .input {
-  margin-top: $spacing-6;
+  margin-top: var(--spacing-6);
 }
 
-$input-disabled-opacity: 0.3;
+.icon {
+  color: var(--textfield-icon-color);
 
-///////////////////////////////////////////////////
-// VALIDATION STYLES
-///////////////////////////////////////////////////
-.success {
-  @include input-icon($color-green-500, $color-green-400);
   @include ca-animation-fade(in);
-
-  &.disabled {
-    @include input-icon(
-      rgba($color-green-500-rgb, $input-disabled-opacity),
-      rgba($color-green-400-rgb, $input-disabled-opacity)
-    );
-  }
 }
 
-.error {
-  @include input-icon($color-red-100, $color-purple-700);
-  @include ca-animation-fade(in);
-}
+.success {
+  --textfield-icon-color: var(--color-green-500);
 
-.caution {
-  @include input-icon($color-yellow-200, $color-purple-700);
-  @include ca-animation-fade(in);
+  .reversed & {
+    --textfield-icon-color: var(--color-green-400);
+  }
 }
 
-.message {
-  &.disabled {
-    opacity: $input-disabled-opacity;
-  }
+.disabled {
+  opacity: 0.3;
 }

package/src/TextField/TextField.spec.tsx

@@ -26,25 +26,30 @@ describe("<TextField />", () => {
       <TextField
         {...defaultProps}
         description={undefined}
-        validationMessage="Error message"
+        status="caution"
+        validationMessage="Revision required"
       />
     )
+    // React Testing Library bug: Icon should be showing aria-label "caution message" instead
     const input = getByRole("textbox", {
-      description: "Error message",
+      description: "warning Revision required",
     })
 
     expect(input).toBeInTheDocument()
   })
+
   it("renders correct aria-describedby when both description and validation message provided", () => {
     const { getByRole } = render(
       <TextField
         {...defaultProps}
         description="Description text"
-        validationMessage="Error message"
+        status="error"
+        validationMessage="Something went wrong"
       />
     )
+    // React Testing Library bug: Icon should be showing aria-label "error message" instead
     const input = getByRole("textbox", {
-      description: "Description text Error message",
+      description: "Description text error Something went wrong",
     })
 
     expect(input).toBeInTheDocument()

package/src/TextField/TextField.tsx

@@ -2,9 +2,9 @@ import React, { useId } from "react"
 import classnames from "classnames"
 import { FieldGroup } from "~components/FieldGroup"
 import { FieldMessage } from "~components/FieldMessage"
-import { SuccessIcon } from "~components/Icon"
 import { Input, InputProps } from "~components/Input"
 import { Label } from "~components/Label"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./TextField.module.scss"
 
 type OmittedInputProps =
@@ -62,10 +62,7 @@ export const TextField = ({
       id={`${id}-field-group`}
       data-testid={`${id}-field-group`}
       inline={inline}
-      classNameOverride={classnames(
-        styles.withLabel,
-        disabled && styles.withDisabled
-      )}
+      classNameOverride={classnames(reversed && styles.reversed)}
     >
       <Label
         id={`${id}-field-label`}
@@ -88,11 +85,12 @@ export const TextField = ({
           status === "success" && (
             <div
               className={classnames(
+                styles.icon,
                 styles.success,
                 disabled && styles.disabled
               )}
             >
-              <SuccessIcon role="presentation" />
+              <Icon name="check_circle" isPresentational isFilled />
             </div>
           )
         }

package/src/TextField/_docs/TextField.stickersheet.stories.tsx

@@ -34,7 +34,7 @@ const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
     <StickerSheet isReversed={isReversed}>
       <StickerSheet.Header
-        headings={["Default", "Hover", "Active", "Focus"]}
+        headings={["Default", "Hover", "Active", "Focus", "Disabled"]}
         hasVerticalHeadings
       />
       <StickerSheet.Body>
@@ -71,6 +71,14 @@ const StickerSheetTemplate: StickerSheetStory = {
               validationMessage="A valid question"
               data-sb-pseudo-styles="focus"
             />
+            <TextFieldExampleGroup
+              reversed={isReversed}
+              labelText="TextField"
+              description="A short description"
+              status={status}
+              validationMessage="A valid question"
+              disabled
+            />
           </StickerSheet.Row>
         ))}
       </StickerSheet.Body>

package/src/TextField/_docs/TextField.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { WritingIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { TextField } from "../index"
 
 const meta = {
@@ -40,8 +40,9 @@ export const Types: Story = {
   },
 }
 
-export const Icon: Story = {
-  args: { icon: <WritingIcon role="presentation" /> },
+export const IconStory: Story = {
+  name: "Icon",
+  args: { icon: <Icon name="edit" isPresentational isFilled /> },
 }
 
 export const Description: Story = {

package/src/Tile/subcomponents/GenericTile/GenericTile.module.scss

@@ -13,19 +13,18 @@ $tilePaddingTop: $spacing-xl;
 }
 
 .tile {
+  position: relative;
   width: $tileWidth;
-
-  [data-tile-grid] & {
-    width: auto;
-  }
-
   height: $tileHeight;
-  position: relative;
-  box-shadow: $shadow-small-box-shadow;
-  background-color: $color-white;
   transition: transform $ca-duration-slow $ca-default;
   transform-style: preserve-3d;
+  box-shadow: $shadow-small-box-shadow;
   border-radius: 7px;
+  background-color: $color-white;
+
+  [data-tile-grid] & {
+    width: auto;
+  }
 
   @include ca-media-mobile {
     width: 100%;

package/src/Tile/subcomponents/GenericTile/GenericTile.tsx

@@ -1,10 +1,10 @@
 import React, { HTMLAttributes, useState } from "react"
 import classnames from "classnames"
 import { AllowedHeadingTags, Heading } from "~components/Heading"
-import { ArrowBackwardIcon, InformationIcon } from "~components/Icon"
 import { Text } from "~components/Text"
 import { GenericButtonProps } from "~components/__actions__/Button/v1/GenericButton"
 import { IconButton, Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./GenericTile.module.scss"
 
@@ -81,7 +81,7 @@ export const GenericTile = ({
         <div className={styles.informationBtn}>
           <IconButton
             label="Information"
-            icon={<InformationIcon role="presentation" />}
+            icon={<Icon name="info" isPresentational isFilled />}
             onClick={(): void => setIsFlipped(true)}
             disabled={isFlipped}
             aria-hidden={isFlipped}
@@ -140,7 +140,7 @@ export const GenericTile = ({
         <div className={styles.informationBtn}>
           <IconButton
             label="Information"
-            icon={<ArrowBackwardIcon role="presentation" />}
+            icon={<Icon name="arrow_back" isPresentational />}
             onClick={(): void => setIsFlipped(false)}
             disabled={!isFlipped}
             aria-hidden={!isFlipped}

package/src/TitleBlockZen/TitleBlockZen.module.scss

@@ -115,14 +115,13 @@ $tab-container-height-medium-and-small-collapsed: 0;
   align-items: center;
   min-width: 0; // this is an important trick to prevent flexbox items from overflowing
   z-index: $ca-z-index-dropdown; // this ensures the page switcher dropdown sits over nav tabs
+  transform: translateY(-0.0833em);
 
   .hasSubtitle & {
     @include title-block-under-1366 {
       transform: translateY(-0.3833em);
     }
   }
-
-  transform: translateY(-0.0833em);
 }
 
 .titleAndSubtitleInner {
@@ -243,13 +242,12 @@ $tab-container-height-medium-and-small-collapsed: 0;
   line-height: $typography-paragraph-small-line-height;
   letter-spacing: $typography-paragraph-small-letter-spacing;
   max-width: 230px;
+  margin-inline: var(--spacing-12) 0;
 
   .adminVariant & {
     color: $color-purple-800;
   }
 
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   @include title-block-under-1366 {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -285,9 +283,7 @@ $tab-container-height-medium-and-small-collapsed: 0;
 
 .sectionTitleOverride.sectionTitleOverride {
   white-space: nowrap;
-
-  @include ca-margin($end: $ca-grid);
-
+  margin-inline: 0 var(--spacing-24);
   font-family: $typography-heading-2-font-family;
   font-weight: $typography-heading-2-font-weight;
   font-size: $typography-heading-2-font-size;
@@ -316,10 +312,6 @@ $tab-container-height-medium-and-small-collapsed: 0;
 }
 
 .sectionTitleDescription {
-  .sectionTitle + & {
-    margin-top: calc(#{$ca-grid} / 4);
-  }
-
   color: $color-white;
   max-width: 780px;
   font-family: $typography-paragraph-small-font-family;
@@ -328,6 +320,10 @@ $tab-container-height-medium-and-small-collapsed: 0;
   line-height: $typography-paragraph-small-line-height;
   letter-spacing: $typography-paragraph-small-letter-spacing;
 
+  .sectionTitle + & {
+    margin-top: var(--spacing-6);
+  }
+
   &.dark {
     color: rgba($color-purple-800-rgb, 0.7);
   }
@@ -360,30 +356,28 @@ $tab-container-height-medium-and-small-collapsed: 0;
 }
 
 .tag {
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   display: flex;
   align-items: center;
+  margin-inline: var(--spacing-12) 0;
 
   @include title-block-medium-and-small {
     display: none;
   }
 
   + .pageSwitcherSelectNextToTitle {
-    @include ca-margin($start: 0);
+    margin-inline-start: 0;
   }
 }
 
 .pageSwitcherSelectNextToTitle {
-  @include ca-margin($start: calc(#{$ca-grid} / 2));
-
   flex-shrink: 0;
-  width: 10 * $ca-grid;
+  width: var(--spacing-240);
+  margin-inline: var(--spacing-12) 0;
 }
 
 .pageSwitcherSelectUnderneathTitle {
   flex-shrink: 0;
-  max-width: 10 * $ca-grid;
+  max-width: var(--spacing-240);
 }
 
 .navigationTabsContainer {
@@ -525,6 +519,7 @@ $tab-container-height-medium-and-small-collapsed: 0;
   align-items: center;
   top: 50%;
   transform: translateY(-50%);
+  text-decoration: none;
 
   @include ca-position(
     $start: calc(-#{$breadcrumb-circle-width} - #{$ca-grid})
@@ -557,11 +552,10 @@ $tab-container-height-medium-and-small-collapsed: 0;
 
   @media only screen and (max-width: $breadcrumb-breakpoint-width) {
     position: relative;
+    transform: translateY(0);
+    margin-inline: 0 var(--spacing-12);
 
-    @include ca-margin($end: calc(#{$ca-grid} / 2));
     @include ca-position($start: 0);
-
-    transform: translateY(0);
   }
 
   @include title-block-medium-and-small {

package/src/TitleBlockZen/TitleBlockZen.spec.tsx

@@ -258,7 +258,7 @@ describe("<TitleBlockZen />", () => {
         </TitleBlockZen>
       )
       const btn = getByTestId("title-block-primary-action-button")
-      expect(btn.textContent).toEqual(primaryActionAsMenu.label)
+      expect(btn).toHaveAccessibleName(primaryActionAsMenu.label)
       await user.click(btn)
 
       await waitFor(() => {

package/src/TitleBlockZen/TitleBlockZen.tsx

@@ -2,10 +2,10 @@ import React from "react"
 import classnames from "classnames"
 import { Avatar } from "~components/Avatar"
 import { Heading } from "~components/Heading"
-import { ArrowLeftIcon, ArrowRightIcon, HamburgerIcon } from "~components/Icon"
 import { Select } from "~components/Select"
 import { Tag } from "~components/Tag"
 import { IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { useMediaQueries } from "~components/utils/useMediaQueries"
 import { MainActions } from "./subcomponents/MainActions"
 import { MobileActions } from "./subcomponents/MobileActions"
@@ -157,15 +157,12 @@ const Breadcrumb = ({
   textDirection,
 }: TitleBlockBreadcrumbProps): JSX.Element => {
   const { path, handleClick, text, render } = breadcrumb
-  const icon =
-    textDirection === "rtl" ? (
-      <ArrowRightIcon role="presentation" />
-    ) : (
-      <ArrowLeftIcon role="presentation" />
-    )
+
   const InnerContents = (): JSX.Element => (
     <>
-      <div className={styles.circle}>{icon}</div>
+      <div className={styles.circle}>
+        <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+      </div>
       <span
         className={styles.breadcrumbTextLink}
         data-automation-id={textAutomationId}
@@ -318,7 +315,7 @@ export const TitleBlockZen = ({
                       <div className={styles.hamburger}>
                         <IconButton
                           onClick={handleHamburgerClick}
-                          icon={<HamburgerIcon role="presentation" />}
+                          icon={<Icon name="menu" isPresentational />}
                           label="Open menu"
                           reversed={isReversed(variant)}
                         />