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

package/src/components/Radio/index.css

@@ -0,0 +1,97 @@
+.charcoal-radio__label {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 4px;
+  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 {
+  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

@@ -27,7 +27,6 @@ export const Default: StoryObj<typeof Radio> = {
     return (
       <LayoutDiv>
         <RadioGroup<Option>
-          label={'label'}
           name={'name'}
           {...args}
           value={value}
@@ -51,7 +50,6 @@ export const Disabled: StoryObj<typeof Radio> = {
     return (
       <LayoutDiv>
         <RadioGroup<Option>
-          label={'label'}
           name={'name'}
           value={value}
           onChange={setValue}
@@ -74,12 +72,7 @@ export const PartialDisabled: StoryObj<typeof Radio> = {
 
     return (
       <LayoutDiv>
-        <RadioGroup<Option>
-          label={'label'}
-          name={'name'}
-          value={value}
-          onChange={setValue}
-        >
+        <RadioGroup<Option> name={'name'} value={value} onChange={setValue}>
           {options.map((option) => (
             <Radio key={option} value={option} disabled={option === '2'}>
               Value {option}
@@ -98,7 +91,6 @@ export const Readonly: StoryObj<typeof Radio> = {
     return (
       <LayoutDiv>
         <RadioGroup<Option>
-          label={'label'}
           name={'name'}
           value={value}
           onChange={setValue}
@@ -122,7 +114,6 @@ export const Invalid: StoryObj<typeof Radio> = {
     return (
       <LayoutDiv>
         <RadioGroup<Option>
-          label={'label'}
           name={'name'}
           value={value}
           onChange={setValue}

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

@@ -126,7 +126,6 @@ function TestComponent({
   return (
     <ThemeProvider theme={light}>
       <RadioGroup
-        label="テスト項目"
         name="test"
         value={value}
         onChange={onChange}

package/src/components/Radio/index.tsx

@@ -1,8 +1,9 @@
-import { memo, forwardRef, useCallback, useContext } from 'react'
+import { memo, forwardRef, useCallback, useContext, useMemo } 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 './index.css'
 
 export type RadioProps = React.PropsWithChildren<{
   value: string
@@ -11,7 +12,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 +24,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,
@@ -41,8 +44,10 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(function RadioInner(
   )
 
   return (
-    <RadioRoot aria-disabled={isDisabled || isReadonly} className={className}>
-      <RadioInput
+    <label aria-disabled={isDisabled || isReadonly} className={classNames}>
+      <input
+        type="radio"
+        className="charcoal-radio__input"
         name={name}
         value={value}
         checked={isSelected}
@@ -51,143 +56,27 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(function RadioInner(
         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<Value extends string = string> =
   React.PropsWithChildren<{
     className?: string
     value?: Value
-    label: string
     name: string
     onChange(next: Value): void
     disabled?: boolean
     readonly?: boolean
     invalid?: boolean
+    ref?: React.Ref<HTMLDivElement>
   }>
 
-// 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
@@ -210,44 +99,44 @@ const RadioGroupContext = React.createContext<RadioGroupContext>({
   },
 })
 
-export function RadioGroup<Value extends string = string>({
-  className,
-  value,
-  label,
-  name,
-  onChange,
-  disabled,
-  readonly,
-  invalid,
-  children,
-}: RadioGroupProps<Value>) {
-  const handleChange = useCallback(
-    (next: string) => {
-      onChange(next as Value)
-    },
-    [onChange]
-  )
+export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps<string>>(
+  function RadioGroupInner(
+    { value, name, onChange, disabled, readonly, invalid, children, ...props },
+    ref
+  ) {
+    const classNames = useClassNames('charcoal-radio-group', props.className)
+
+    const handleChange = useCallback(
+      (next: string) => {
+        onChange(next)
+      },
+      [onChange]
+    )
 
-  return (
-    <RadioGroupContext.Provider
-      value={{
+    const contextValue = useMemo(
+      () => ({
         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>
-  )
-}
+      }),
+      [disabled, handleChange, invalid, name, readonly, value]
+    )
+
+    return (
+      <RadioGroupContext.Provider value={contextValue}>
+        <div
+          role="radiogroup"
+          aria-orientation="vertical"
+          aria-invalid={invalid}
+          className={classNames}
+          ref={ref}
+        >
+          {children}
+        </div>
+      </RadioGroupContext.Provider>
+    )
+  }
+) as <Value extends string>(props: RadioGroupProps<Value>) => JSX.Element