@charcoal-ui/react 4.0.0-beta.0 → 4.0.0-beta.11

package/src/components/Radio/index.css

@@ -0,0 +1,18 @@
+.charcoal-radio__label {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 4px;
+  align-items: center;
+  cursor: pointer;
+}
+
+.charcoal-radio__label[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.charcoal-radio__label_div {
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--charcoal-text2);
+}

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

@@ -1,36 +1,43 @@
-import styled from 'styled-components'
-import Radio, { RadioGroup } from '.'
-import { px } from '@charcoal-ui/utils'
+import Radio from '.'
+import { RadioGroup } from './RadioGroup'
 import { StoryObj } from '@storybook/react'
 import { useState } from 'react'
 
 export default {
-  title: 'Radio',
+  title: 'react/Radio',
   component: Radio,
-  args: {
-    name: 'name',
-    label: 'label',
-  },
   parameters: {
     layout: 'centered',
   },
 }
 
-const LayoutDiv = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme }) => px(theme.spacing[24])};
-`
+const options = ['1', '2', '3'] as const
+type Option = (typeof options)[number]
+
+const LayoutDiv = (props: { children: React.ReactNode }) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 24,
+      }}
+    >
+      {props.children}
+    </div>
+  )
+}
+
+export const Default: StoryObj<typeof Radio> = {
+  render: function Render(args) {
+    const [value, setValue] = useState<Option>(options[0])
 
-export const Basic: StoryObj<typeof Radio> = {
-  render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
     return (
       <LayoutDiv>
-        <RadioGroup
-          label={'label'}
-          name={'name'}
+        <RadioGroup<Option>
+          name="default_story"
+          label="default story"
+          {...args}
           value={value}
           onChange={setValue}
         >
@@ -47,13 +54,13 @@ export const Basic: StoryObj<typeof Radio> = {
 
 export const Disabled: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
-          label={'label'}
-          name={'name'}
+        <RadioGroup<Option>
+          label="disabled_stroy"
+          name="disabled story"
           value={value}
           onChange={setValue}
           disabled
@@ -71,13 +78,13 @@ export const Disabled: StoryObj<typeof Radio> = {
 
 export const PartialDisabled: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
-          label={'label'}
-          name={'name'}
+        <RadioGroup<Option>
+          name={'partial_disabled_story'}
+          label={'partial disabled story'}
           value={value}
           onChange={setValue}
         >
@@ -94,13 +101,13 @@ export const PartialDisabled: StoryObj<typeof Radio> = {
 
 export const Readonly: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
-          label={'label'}
-          name={'name'}
+        <RadioGroup<Option>
+          name="readonly_story"
+          label="readonly story"
           value={value}
           onChange={setValue}
           readonly
@@ -118,13 +125,13 @@ export const Readonly: StoryObj<typeof Radio> = {
 
 export const Invalid: StoryObj<typeof Radio> = {
   render: function Render() {
-    const options = ['1', '2', '3']
-    const [value, setValue] = useState(options[0])
+    const [value, setValue] = useState<Option>(options[0])
+
     return (
       <LayoutDiv>
-        <RadioGroup
-          label={'label'}
-          name={'name'}
+        <RadioGroup<Option>
+          name="invalid_story"
+          label="invalid story"
           value={value}
           onChange={setValue}
           invalid

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

@@ -1,7 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import { ThemeProvider } from 'styled-components'
-import Radio, { RadioGroup } from '.'
-import { light } from '@charcoal-ui/theme'
+import Radio from '.'
+import { RadioGroup } from './RadioGroup'
 
 describe('Radio', () => {
   describe('development mode', () => {
@@ -14,11 +13,7 @@ describe('Radio', () => {
         // eslint-disable-next-line no-console
         console.error = jest.fn()
 
-        render(
-          <ThemeProvider theme={light}>
-            <Radio value="option1" />
-          </ThemeProvider>
-        )
+        render(<Radio value="option1" />)
       })
 
       it('console.error()', () => {
@@ -124,23 +119,20 @@ function TestComponent({
   option2Disabled?: boolean
 }) {
   return (
-    <ThemeProvider theme={light}>
-      <RadioGroup
-        label="テスト項目"
-        name="test"
-        value={value}
-        onChange={onChange}
-        disabled={radioGroupDisabled}
-        readonly={readonly}
-        invalid={invalid}
-      >
-        <Radio value="option1" disabled={option1Disabled}>
-          option1を選ぶ
-        </Radio>
-        <Radio value="option2" disabled={option2Disabled}>
-          option2を選ぶ
-        </Radio>
-      </RadioGroup>
-    </ThemeProvider>
+    <RadioGroup
+      name="test"
+      value={value}
+      onChange={onChange}
+      disabled={radioGroupDisabled}
+      readonly={readonly}
+      invalid={invalid}
+    >
+      <Radio value="option1" disabled={option1Disabled}>
+        option1を選ぶ
+      </Radio>
+      <Radio value="option2" disabled={option2Disabled}>
+        option2を選ぶ
+      </Radio>
+    </RadioGroup>
   )
 }

package/src/components/Radio/index.tsx

@@ -1,8 +1,12 @@
-import { memo, forwardRef, useCallback, useContext } from 'react'
+import './index.css'
+
+import { memo, forwardRef, useContext } from 'react'
 import * as React from 'react'
-import styled from 'styled-components'
 import warning from 'warning'
-import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
+import { useClassNames } from '../../_lib/useClassNames'
+
+import { RadioGroupContext } from './RadioGroupContext'
+import RadioInput from './RadioInput'
 
 export type RadioProps = React.PropsWithChildren<{
   value: string
@@ -11,7 +15,7 @@ export type RadioProps = React.PropsWithChildren<{
 }>
 
 const Radio = forwardRef<HTMLInputElement, RadioProps>(function RadioInner(
-  { value, disabled = false, children, className },
+  { value, disabled = false, children, ...props },
   ref
 ) {
   const {
@@ -23,6 +27,8 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(function RadioInner(
     onChange,
   } = useContext(RadioGroupContext)
 
+  const classNames = useClassNames('charcoal-radio__label', props.className)
+
   warning(
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     name !== undefined,
@@ -33,220 +39,22 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(function RadioInner(
   const isDisabled = disabled || isParentDisabled
   const isReadonly = readonly && !isSelected
 
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      onChange(e.currentTarget.value)
-    },
-    [onChange]
-  )
-
   return (
-    <RadioRoot aria-disabled={isDisabled || isReadonly} className={className}>
+    <label aria-disabled={isDisabled || isReadonly} className={classNames}>
       <RadioInput
         name={name}
         value={value}
         checked={isSelected}
         aria-invalid={invalid}
-        onChange={handleChange}
+        onChange={onChange}
         disabled={isDisabled || isReadonly}
         ref={ref}
       />
-      {children != null && <RadioLabel>{children}</RadioLabel>}
-    </RadioRoot>
+      {children != null && (
+        <div className="charcoal-radio__label_div">{children}</div>
+      )}
+    </label>
   )
 })
 
 export default memo(Radio)
-
-const RadioRoot = styled.label`
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: 4px;
-  align-items: center;
-  cursor: pointer;
-
-  &[aria-disabled]:not([aria-disabled='false']) {
-    opacity: 0.32;
-    cursor: default;
-  }
-`
-
-export const RadioInput = styled.input.attrs({ type: 'radio' })`
-  /** Make prior to browser default style */
-  &[type='radio'] {
-    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;
-
-    :disabled {
-      cursor: default;
-    }
-
-    &:not(:disabled):not([aria-disabled]),
-    &[aria-disabled='false'] {
-      &:hover {
-        background-color: var(--charcoal-surface1-hover);
-      }
-      &:active {
-        background-color: var(--charcoal-surface1-press);
-      }
-      ${focusVisibleFocusRingCss}
-      &[aria-invalid='true'] {
-        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-        &:focus {
-          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-        }
-      }
-    }
-
-    &:not(:checked) {
-      border-width: 2px;
-      border-style: solid;
-      border-color: var(--charcoal-text3);
-    }
-
-    &:checked {
-      background-color: var(--charcoal-brand);
-      &::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;
-      }
-
-      &:not(:disabled):not([aria-disabled]),
-      &[aria-disabled='false'] {
-        &:hover {
-          background-color: var(--charcoal-brand-hover);
-          &::after {
-            background-color: var(--charcoal-text5-hover);
-          }
-        }
-        &:active {
-          background-color: var(--charcoal-brand-press);
-          &::after {
-            background-color: var(--charcoal-text5-press);
-          }
-        }
-      }
-    }
-  }
-`
-
-const RadioLabel = styled.div`
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
-`
-
-export type RadioGroupProps = React.PropsWithChildren<{
-  className?: string
-  value?: string
-  label: string
-  name: string
-  onChange(next: string): void
-  disabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-}>
-
-// TODO: use (or polyfill) flex gap
-const StyledRadioGroup = styled.div`
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 8px;
-`
-
-interface RadioGroupContext {
-  name: string
-  selected?: string
-  disabled: boolean
-  readonly: boolean
-  invalid: boolean
-  onChange: (next: string) => void
-}
-
-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> ?'
-    )
-  },
-})
-
-export function RadioGroup({
-  className,
-  value,
-  label,
-  name,
-  onChange,
-  disabled,
-  readonly,
-  invalid,
-  children,
-}: RadioGroupProps) {
-  const handleChange = useCallback(
-    (next: string) => {
-      onChange(next)
-    },
-    [onChange]
-  )
-
-  return (
-    <RadioGroupContext.Provider
-      value={{
-        name,
-        selected: value,
-        disabled: disabled ?? false,
-        readonly: readonly ?? false,
-        invalid: invalid ?? false,
-        onChange: handleChange,
-      }}
-    >
-      <StyledRadioGroup
-        role="radiogroup"
-        aria-orientation="vertical"
-        aria-label={label}
-        aria-invalid={invalid}
-        className={className}
-      >
-        {children}
-      </StyledRadioGroup>
-    </RadioGroupContext.Provider>
-  )
-}