@charcoal-ui/react 4.0.0-beta.6 → 4.0.0-beta.8

package/src/components/Radio/RadioGroup/index.tsx

@@ -0,0 +1,80 @@
+import './index.css'
+
+import { forwardRef, useCallback, useMemo } from 'react'
+import * as React from 'react'
+import { useClassNames } from '../../../_lib/useClassNames'
+import { RadioGroupContext } from '../RadioGroupContext'
+
+export type RadioGroupProps<Value extends string = string> =
+  React.PropsWithChildren<{
+    className?: string
+    value?: Value
+    /**
+     * aria-label of RadioGroup
+     */
+    label?: string
+    name: string
+    onChange(next: Value): void
+    disabled?: boolean
+    readonly?: boolean
+    invalid?: boolean
+    ref?: React.Ref<HTMLDivElement>
+    'aria-labelledby'?: React.ComponentProps<'div'>['aria-labelledby']
+    'aria-orientation'?: React.ComponentProps<'div'>['aria-orientation']
+  }>
+
+export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps<string>>(
+  function RadioGroupInner(
+    {
+      value,
+      label,
+      name,
+      onChange,
+      disabled,
+      readonly,
+      invalid,
+      children,
+      'aria-orientation': ariaOrientation = 'vertical',
+      ...props
+    },
+    ref
+  ) {
+    const classNames = useClassNames('charcoal-radio-group', props.className)
+
+    const handleChange = useCallback(
+      (next: string) => {
+        onChange(next)
+      },
+      [onChange]
+    )
+
+    const contextValue = useMemo(
+      () => ({
+        name,
+        selected: value,
+        disabled: disabled ?? false,
+        readonly: readonly ?? false,
+        invalid: invalid ?? false,
+        onChange: handleChange,
+      }),
+      [disabled, handleChange, invalid, name, readonly, value]
+    )
+
+    return (
+      <RadioGroupContext.Provider value={contextValue}>
+        <div
+          role="radiogroup"
+          aria-disabled={disabled}
+          aria-invalid={invalid}
+          aria-label={label}
+          aria-labelledby={props['aria-labelledby']}
+          aria-orientation={ariaOrientation}
+          className={classNames}
+          ref={ref}
+        >
+          {children}
+        </div>
+      </RadioGroupContext.Provider>
+    )
+  }
+) as <Value extends string>(props: RadioGroupProps<Value>) => JSX.Element

package/src/components/Radio/RadioGroupContext.ts

@@ -0,0 +1,23 @@
+import * as React from 'react'
+
+export interface RadioGroupContext {
+  name: string
+  selected?: string
+  disabled: boolean
+  readonly: boolean
+  invalid: boolean
+  onChange: (next: string) => void
+}
+
+export const RadioGroupContext = React.createContext<RadioGroupContext>({
+  name: undefined as never,
+  selected: undefined,
+  disabled: false,
+  readonly: false,
+  invalid: false,
+  onChange() {
+    throw new Error(
+      'Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?'
+    )
+  },
+})

package/src/components/Radio/RadioInput/index.css

@@ -0,0 +1,82 @@
+.charcoal-radio-input {
+  appearance: none;
+  display: block;
+  box-sizing: border-box;
+
+  margin: 0;
+  padding: 6px;
+
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  border-radius: 999999px;
+  background-color: var(--charcoal-surface1);
+  transition: 0.2s background-color, 0.2s box-shadow;
+}
+
+.charcoal-radio-input:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.charcoal-radio-input:checked::after {
+  content: '';
+  display: block;
+  width: 8px;
+  height: 8px;
+  pointer-events: none;
+  background-color: var(--charcoal-text5);
+  border-radius: 999999px;
+  transition: 0.2s background-color, 0.2s box-shadow;
+}
+
+.charcoal-radio-input:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--charcoal-text3);
+}
+
+.charcoal-radio-input:disabled {
+  cursor: default;
+}
+
+.charcoal-radio-input:not(:disabled):hover {
+  background-color: var(--charcoal-surface1-hover);
+}
+
+.charcoal-radio-input:not(:disabled):active {
+  background-color: var(--charcoal-surface1-press);
+}
+
+.charcoal-radio-input:not(:disabled):focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-radio-input:not(:disabled):focus-visible {
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-radio-input:not(:disabled):focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.charcoal-radio-input:not(:disabled)[aria-invalid='true'],
+.charcoal-radio-input:not(:disabled)[aria-invalid='true']:focus {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-radio-input:checked:not(:disabled):hover {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.charcoal-radio-input:checked:not(:disabled):hover::after {
+  background-color: var(--charcoal-text5-hover);
+}
+
+.charcoal-radio-input:checked:not(:disabled):active {
+  background-color: var(--charcoal-brand-press);
+}
+
+.charcoal-radio-input:checked:not(:disabled):active::after {
+  background-color: var(--charcoal-text5-press);
+}

package/src/components/Radio/RadioInput/index.tsx

@@ -0,0 +1,41 @@
+import './index.css'
+
+import { forwardRef, memo, useCallback } from 'react'
+import { useClassNames } from '../../../_lib/useClassNames'
+
+type CharcoalRadioInputProps = {
+  invalid?: boolean
+  onChange?: (value: string) => void
+}
+
+type InputProps = React.HTMLProps<HTMLInputElement>
+
+export type RadioInputProps = CharcoalRadioInputProps &
+  Omit<InputProps, keyof CharcoalRadioInputProps | 'ref'>
+
+const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
+  function RadioInput({ onChange, invalid, className, ...props }, ref) {
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const el = e.currentTarget
+        onChange?.(el.value)
+      },
+      [onChange]
+    )
+
+    const classNames = useClassNames('charcoal-radio-input', className)
+
+    return (
+      <input
+        className={classNames}
+        ref={ref}
+        type="radio"
+        onChange={handleChange}
+        aria-invalid={invalid}
+        {...props}
+      />
+    )
+  }
+)
+
+export default memo(RadioInput)

package/src/components/Radio/__snapshots__/index.story.storyshot

@@ -19,6 +19,7 @@ exports[`Storybook Tests react/Radio Default 1`] = `
     className="c0"
   >
     <div
+      aria-label="default story"
       aria-orientation="vertical"
       className="charcoal-radio-group"
       role="radiogroup"
@@ -30,9 +31,9 @@ exports[`Storybook Tests react/Radio Default 1`] = `
         <input
           aria-invalid={false}
           checked={true}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="default_story"
           onChange={[Function]}
           type="radio"
           value="1"
@@ -51,9 +52,9 @@ exports[`Storybook Tests react/Radio Default 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="default_story"
           onChange={[Function]}
           type="radio"
           value="2"
@@ -72,9 +73,9 @@ exports[`Storybook Tests react/Radio Default 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="default_story"
           onChange={[Function]}
           type="radio"
           value="3"
@@ -110,6 +111,8 @@ exports[`Storybook Tests react/Radio Disabled 1`] = `
     className="c0"
   >
     <div
+      aria-disabled={true}
+      aria-label="disabled_stroy"
       aria-orientation="vertical"
       className="charcoal-radio-group"
       role="radiogroup"
@@ -121,9 +124,9 @@ exports[`Storybook Tests react/Radio Disabled 1`] = `
         <input
           aria-invalid={false}
           checked={true}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="disabled story"
           onChange={[Function]}
           type="radio"
           value="1"
@@ -142,9 +145,9 @@ exports[`Storybook Tests react/Radio Disabled 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="disabled story"
           onChange={[Function]}
           type="radio"
           value="2"
@@ -163,9 +166,9 @@ exports[`Storybook Tests react/Radio Disabled 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="disabled story"
           onChange={[Function]}
           type="radio"
           value="3"
@@ -202,6 +205,7 @@ exports[`Storybook Tests react/Radio Invalid 1`] = `
   >
     <div
       aria-invalid={true}
+      aria-label="invalid story"
       aria-orientation="vertical"
       className="charcoal-radio-group"
       role="radiogroup"
@@ -213,9 +217,9 @@ exports[`Storybook Tests react/Radio Invalid 1`] = `
         <input
           aria-invalid={true}
           checked={true}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="invalid_story"
           onChange={[Function]}
           type="radio"
           value="1"
@@ -234,9 +238,9 @@ exports[`Storybook Tests react/Radio Invalid 1`] = `
         <input
           aria-invalid={true}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="invalid_story"
           onChange={[Function]}
           type="radio"
           value="2"
@@ -255,9 +259,9 @@ exports[`Storybook Tests react/Radio Invalid 1`] = `
         <input
           aria-invalid={true}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="invalid_story"
           onChange={[Function]}
           type="radio"
           value="3"
@@ -293,6 +297,7 @@ exports[`Storybook Tests react/Radio PartialDisabled 1`] = `
     className="c0"
   >
     <div
+      aria-label="partial disabled story"
       aria-orientation="vertical"
       className="charcoal-radio-group"
       role="radiogroup"
@@ -304,9 +309,9 @@ exports[`Storybook Tests react/Radio PartialDisabled 1`] = `
         <input
           aria-invalid={false}
           checked={true}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="partial_disabled_story"
           onChange={[Function]}
           type="radio"
           value="1"
@@ -325,9 +330,9 @@ exports[`Storybook Tests react/Radio PartialDisabled 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="partial_disabled_story"
           onChange={[Function]}
           type="radio"
           value="2"
@@ -346,9 +351,9 @@ exports[`Storybook Tests react/Radio PartialDisabled 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="partial_disabled_story"
           onChange={[Function]}
           type="radio"
           value="3"
@@ -384,6 +389,7 @@ exports[`Storybook Tests react/Radio Readonly 1`] = `
     className="c0"
   >
     <div
+      aria-label="readonly story"
       aria-orientation="vertical"
       className="charcoal-radio-group"
       role="radiogroup"
@@ -395,9 +401,9 @@ exports[`Storybook Tests react/Radio Readonly 1`] = `
         <input
           aria-invalid={false}
           checked={true}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="readonly_story"
           onChange={[Function]}
           type="radio"
           value="1"
@@ -416,9 +422,9 @@ exports[`Storybook Tests react/Radio Readonly 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="readonly_story"
           onChange={[Function]}
           type="radio"
           value="2"
@@ -437,9 +443,9 @@ exports[`Storybook Tests react/Radio Readonly 1`] = `
         <input
           aria-invalid={false}
           checked={false}
-          className="charcoal-radio__input"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="readonly_story"
           onChange={[Function]}
           type="radio"
           value="3"

package/src/components/Radio/index.css

@@ -5,93 +5,14 @@
   align-items: center;
   cursor: pointer;
 }
-.charcoal-radio[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.charcoal-radio__input {
-  appearance: none;
-  display: block;
-  box-sizing: border-box;
 
-  margin: 0;
-  padding: 6px;
-
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  border-radius: 999999px;
-  background-color: var(--charcoal-surface1);
-  transition: 0.2s background-color, 0.2s box-shadow;
-}
-.charcoal-radio__input:checked {
-  background-color: var(--charcoal-brand);
-}
-.charcoal-radio__input:checked::after {
-  content: '';
-  display: block;
-  width: 8px;
-  height: 8px;
-  pointer-events: none;
-  background-color: var(--charcoal-text5);
-  border-radius: 999999px;
-  transition: 0.2s background-color, 0.2s box-shadow;
-}
-
-.charcoal-radio__input:not(:checked) {
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--charcoal-text3);
-}
-.charcoal-radio__input:disabled {
+.charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
   cursor: default;
 }
 
-.charcoal-radio__input:not(:disabled):hover {
-  background-color: var(--charcoal-surface1-hover);
-}
-
-.charcoal-radio__input:not(:disabled):active {
-  background-color: var(--charcoal-surface1-press);
-}
-.charcoal-radio__input:not(:disabled):focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-}
-.charcoal-radio__input:not(:disabled):focus-visible {
-  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-}
-.charcoal-radio__input:not(:disabled):focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.charcoal-radio__input:not(:disabled)[aria-invalid='true'],
-.charcoal-radio__input:not(:disabled)[aria-invalid='true']:focus {
-  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-}
-
-.charcoal-radio__input:checked:not(:disabled):hover {
-  background-color: var(--charcoal-brand-hover);
-}
-.charcoal-radio__input:checked:not(:disabled):hover::after {
-  background-color: var(--charcoal-text5-hover);
-}
-.charcoal-radio__input:checked:not(:disabled):active {
-  background-color: var(--charcoal-brand-press);
-}
-.charcoal-radio__input:checked:not(:disabled):active::after {
-  background-color: var(--charcoal-text5-press);
-}
-
 .charcoal-radio__label_div {
   font-size: 14px;
   line-height: 22px;
   color: var(--charcoal-text2);
 }
-
-.charcoal-radio-group {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 8px;
-}

package/src/components/Radio/index.story.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components'
-import Radio, { RadioGroup } from '.'
+import Radio from '.'
+import { RadioGroup } from './RadioGroup'
 import { px } from '@charcoal-ui/utils'
 import { StoryObj } from '@storybook/react'
 import { useState } from 'react'
@@ -27,7 +28,8 @@ export const Default: StoryObj<typeof Radio> = {
     return (
       <LayoutDiv>
         <RadioGroup<Option>
-          name={'name'}
+          name="default_story"
+          label="default story"
           {...args}
           value={value}
           onChange={setValue}
@@ -50,7 +52,8 @@ export const Disabled: StoryObj<typeof Radio> = {
     return (
       <LayoutDiv>
         <RadioGroup<Option>
-          name={'name'}
+          label="disabled_stroy"
+          name="disabled story"
           value={value}
           onChange={setValue}
           disabled
@@ -72,7 +75,12 @@ export const PartialDisabled: StoryObj<typeof Radio> = {
 
     return (
       <LayoutDiv>
-        <RadioGroup<Option> name={'name'} value={value} onChange={setValue}>
+        <RadioGroup<Option>
+          name={'partial_disabled_story'}
+          label={'partial disabled story'}
+          value={value}
+          onChange={setValue}
+        >
           {options.map((option) => (
             <Radio key={option} value={option} disabled={option === '2'}>
               Value {option}
@@ -91,7 +99,8 @@ export const Readonly: StoryObj<typeof Radio> = {
     return (
       <LayoutDiv>
         <RadioGroup<Option>
-          name={'name'}
+          name="readonly_story"
+          label="readonly story"
           value={value}
           onChange={setValue}
           readonly
@@ -114,7 +123,8 @@ export const Invalid: StoryObj<typeof Radio> = {
     return (
       <LayoutDiv>
         <RadioGroup<Option>
-          name={'name'}
+          name="invalid_story"
+          label="invalid story"
           value={value}
           onChange={setValue}
           invalid

package/src/components/Radio/index.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import { ThemeProvider } from 'styled-components'
-import Radio, { RadioGroup } from '.'
+import Radio from '.'
+import { RadioGroup } from './RadioGroup'
 import { light } from '@charcoal-ui/theme'
 
 describe('Radio', () => {