@charcoal-ui/react 4.0.0-beta.5 → 4.0.0-beta.7

package/src/components/TextArea/index.css

@@ -0,0 +1,78 @@
+.charcoal-text-area-root {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 4px;
+}
+
+.charcoal-text-area-root[aria-disabled='true'] {
+  opacity: 0.32;
+}
+
+.charcoal-text-area-container {
+  position: relative;
+  overflow: hidden;
+
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+  transition: 0.2s background-color, 0.2s box-shadow;
+  height: calc(22px * var(--charcoal-text-area-rows) + 18px);
+}
+
+.charcoal-text-area-container[aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-text-area-container:focus-within {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-text-area-container:not(aria-disabled='true'):hover {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.charcoal-text-area-container[aria-invalid='true']:focus-within {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-text-area-textarea {
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  color: inherit;
+  box-sizing: border-box;
+
+  /* Prevent zooming for iOS Safari */
+  transform-origin: top left;
+  transform: scale(0.875);
+  width: calc(100% / 0.875);
+  font-size: calc(14px / 0.875);
+  line-height: calc(22px / 0.875);
+  padding: calc(9px / 0.875) calc(8px / 0.875);
+  height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px);
+
+  /* Display box-shadow for iOS Safari */
+  appearance: none;
+
+  background: none;
+}
+.charcoal-text-area-textarea[data-no-bottom-padding='true'] {
+  padding: calc(9px / 0.875) calc(8px / 0.875) 0;
+  height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
+}
+
+.charcoal-text-area-textarea::placeholder {
+  color: var(--charcoal-text3);
+}
+
+.charcoal-text-area-counter {
+  position: absolute;
+  bottom: 9px;
+  right: 8px;
+
+  line-height: 22px;
+  font-size: 14px;
+  color: var(--charcoal-text3);
+}

package/src/components/TextArea/index.tsx

@@ -1,11 +1,13 @@
+import './index.css'
+
 import { useVisuallyHidden } from '@react-aria/visually-hidden'
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
-import styled, { css } from 'styled-components'
 import FieldLabel from '../FieldLabel'
 import { countCodePointsInString, mergeRefs } from '../../_lib'
-import { AssistiveText } from '../TextField'
 import { useFocusWithClick } from '../TextField/useFocusWithClick'
 import { useId } from '@react-aria/utils'
+import { AssistiveText } from '../TextField/AssistiveText'
+import { useClassNames } from '../../_lib/useClassNames'
 
 export type TextAreaProps = {
   value?: string
@@ -42,6 +44,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       maxLength,
       autoHeight = false,
       rows: initialRows = 4,
+      invalid,
       getCount = countCodePointsInString,
       ...props
     },
@@ -49,7 +52,6 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   ) {
     const { visuallyHiddenProps } = useVisuallyHidden()
     const textareaRef = useRef<HTMLTextAreaElement>(null)
-    const textAreaRef = useRef<HTMLTextAreaElement>(null)
     const [count, setCount] = useState(getCount(value ?? ''))
     const [rows, setRows] = useState(initialRows)
 
@@ -92,17 +94,19 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
 
     const containerRef = useRef(null)
 
-    useFocusWithClick(containerRef, textAreaRef)
+    useFocusWithClick(containerRef, textareaRef)
 
     const textAreaId = useId(props.id)
     const describedbyId = useId()
     const labelledbyId = useId()
 
+    const classNames = useClassNames('charcoal-text-area-root', className)
+
     const showAssistiveText =
       assistiveText != null && assistiveText.length !== 0
 
     return (
-      <TextFieldRoot className={className} isDisabled={disabled}>
+      <div className={classNames} aria-disabled={disabled}>
         <FieldLabel
           htmlFor={textAreaId}
           id={labelledbyId}
@@ -112,118 +116,44 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           subLabel={subLabel}
           {...(!showLabel ? visuallyHiddenProps : {})}
         />
-        <StyledTextareaContainer
+        <div
+          className="charcoal-text-area-container"
           aria-disabled={disabled === true ? 'true' : undefined}
-          invalid={props.invalid === true}
+          aria-invalid={invalid === true}
           ref={containerRef}
-          rows={showCount ? rows + 1 : rows}
+          style={{
+            '--charcoal-text-area-rows': `${showCount ? rows + 1 : rows}`,
+          }}
         >
-          <StyledTextarea
+          <textarea
+            className="charcoal-text-area-textarea"
             aria-describedby={showAssistiveText ? describedbyId : undefined}
-            aria-invalid={props.invalid}
+            aria-invalid={invalid}
             aria-labelledby={labelledbyId}
             id={textAreaId}
             maxLength={maxLength}
-            noBottomPadding={showCount}
+            data-no-bottom-padding={showCount}
             onChange={handleChange}
-            ref={mergeRefs(forwardRef, textAreaRef)}
+            ref={mergeRefs(forwardRef, textareaRef)}
             rows={rows}
             value={value}
+            disabled={disabled}
             {...props}
           />
           {showCount && (
-            <MultiLineCounter>
+            <span className="charcoal-text-area-counter">
               {maxLength !== undefined ? `${count}/${maxLength}` : count}
-            </MultiLineCounter>
+            </span>
           )}
-        </StyledTextareaContainer>
+        </div>
         {showAssistiveText && (
-          <AssistiveText invalid={props.invalid === true} id={describedbyId}>
+          <AssistiveText data-invalid={invalid === true} id={describedbyId}>
             {assistiveText}
           </AssistiveText>
         )}
-      </TextFieldRoot>
+      </div>
     )
   }
 )
 
 export default TextArea
-
-const TextFieldRoot = styled.div<{ isDisabled: boolean }>`
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 4px;
-
-  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
-`
-
-const StyledTextareaContainer = styled.div<{ rows: number; invalid: boolean }>`
-  position: relative;
-  overflow: hidden;
-
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-  transition: 0.2s background-color, 0.2s box-shadow;
-
-  ${({ rows }) => css`
-    height: calc(22px * ${rows} + 18px);
-  `};
-
-  :not([aria-disabled]):hover,
-  [aria-disabled='false']:hover {
-    background-color: var(--charcoal-surface3-hover);
-  }
-  :focus-within {
-    outline: none;
-    box-shadow: 0 0 0 4px
-      ${(p) => (p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`)};
-  }
-
-  ${(p) =>
-    p.invalid &&
-    css`
-      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-    `}
-`
-
-const StyledTextarea = styled.textarea<{ noBottomPadding: boolean }>`
-  border: none;
-  outline: none;
-  resize: none;
-  font-family: inherit;
-  color: inherit;
-  box-sizing: border-box;
-
-  /* Prevent zooming for iOS Safari */
-  transform-origin: top left;
-  transform: scale(0.875);
-  width: calc(100% / 0.875);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875)
-    ${(p) => (p.noBottomPadding ? 0 : '')};
-
-  ${({ rows = 1, noBottomPadding }) => css`
-    height: calc(22px / 0.875 * ${rows} + ${noBottomPadding ? 9 : 20}px);
-  `};
-
-  /* Display box-shadow for iOS Safari */
-  appearance: none;
-
-  background: none;
-
-  &::placeholder {
-    color: var(--charcoal-text3);
-  }
-`
-
-const MultiLineCounter = styled.span`
-  position: absolute;
-  bottom: 9px;
-  right: 8px;
-
-  line-height: 22px;
-  font-size: 14px;
-  color: var(--charcoal-text3);
-`

package/src/components/TextField/AssistiveText/index.css

@@ -0,0 +1,10 @@
+.charcoal-text-field-assistive-text {
+  font-size: 14px;
+  line-height: 22px;
+  margin: 0;
+  color: var(--charcoal-text2);
+}
+
+.charcoal-text-field-assistive-text[data-invalid='true'] {
+  color: var(--charcoal-assertive);
+}

package/src/components/TextField/AssistiveText/index.tsx

@@ -0,0 +1,6 @@
+import { createDivComponent } from '../../../_lib/createDivComponent'
+import './index.css'
+
+export const AssistiveText = createDivComponent(
+  'charcoal-text-field-assistive-text'
+)

package/src/components/TextField/TextField.story.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'TextField',
+  title: 'react/TextField',
   component: TextField,
   parameters: {
     layout: 'centered',