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

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

@@ -1,103 +1,73 @@
-import { action } from '@storybook/addon-actions'
 import Checkbox from '.'
 import { Meta, StoryObj } from '@storybook/react'
+import { useCallback, useState } from 'react'
 
 export default {
   title: 'Checkbox',
   component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
 } as Meta<typeof Checkbox>
 
-export const Labelled: StoryObj<typeof Checkbox> = {
-  args: {
-    checked: false,
-    defaultChecked: false,
-    disabled: false,
-    readonly: false,
-    invalid: false,
+export const Default: StoryObj<typeof Checkbox> = {
+  argTypes: {
+    checked: { type: 'boolean' },
+    children: { type: 'string' },
+    disabled: { type: 'boolean' },
+    invalid: { type: 'boolean' },
+    readOnly: { type: 'boolean' },
   },
-  render: (props) => {
-    return (
-      <div>
-        <div style={{ marginBottom: '1em' }}>
-          <Checkbox
-            {...props}
-            name="labelled"
-            label="label"
-            onBlur={action('blur')}
-            onClick={action('click')}
-            onChange={action('change')}
-            onFocus={action('focus')}
-          >
-            同意する
-          </Checkbox>
-        </div>
+  render: function Render(props) {
+    const [checked, setChecked] = useState(props.checked)
+    const handleChange = useCallback((isSelected: boolean) => {
+      setChecked(isSelected)
+    }, [])
 
-        <div>
-          <Checkbox
-            {...props}
-            name="labelled"
-            label="label"
-            onBlur={action('blur')}
-            onClick={action('click')}
-            onChange={action('change')}
-            onFocus={action('focus')}
-          >
-            <span style={{ width: 200, display: 'block' }}>
-              同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する
-            </span>
-          </Checkbox>
-        </div>
-      </div>
+    return (
+      <Checkbox
+        {...props}
+        checked={checked ?? props.checked}
+        onChange={handleChange}
+      />
     )
   },
 }
 
-export const Invalid: StoryObj<typeof Checkbox> = {
-  args: {
-    checked: false,
-    defaultChecked: false,
-    disabled: false,
-    readonly: false,
+export const Label: StoryObj<typeof Checkbox> = {
+  render: () => {
+    return <Checkbox>Checkbox</Checkbox>
   },
-  render: (props) => {
+}
+
+export const Checked: StoryObj<typeof Checkbox> = {
+  render: () => {
+    return <Checkbox checked>Checked</Checkbox>
+  },
+}
+
+export const Disabled: StoryObj<typeof Checkbox> = {
+  render: () => {
+    return <Checkbox disabled>Disabled</Checkbox>
+  },
+}
+
+export const ReadOnly: StoryObj<typeof Checkbox> = {
+  render: () => {
     return (
-      <Checkbox
-        {...props}
-        name="labelled"
-        label="label"
-        invalid
-        onBlur={action('blur')}
-        onClick={action('click')}
-        onChange={action('change')}
-        onFocus={action('focus')}
-      >
-        同意する
+      <Checkbox checked name="labelled" readOnly>
+        ReadOnly
       </Checkbox>
     )
   },
 }
 
-export const Unlabelled: StoryObj<typeof Checkbox> = {
-  args: {
-    checked: false,
-    defaultChecked: false,
-    disabled: false,
-    readonly: false,
-    invalid: false,
-  },
-  render: (props) => {
+export const Invalid: StoryObj<typeof Checkbox> = {
+  render: () => {
     return (
-      <div>
-        <Checkbox
-          {...props}
-          name="unlabelled"
-          label="label"
-          onBlur={action('blur')}
-          onClick={action('click')}
-          onChange={action('change')}
-          onFocus={action('focus')}
-        />
-      </div>
+      <Checkbox name="labelled" invalid>
+        Invalid
+      </Checkbox>
     )
   },
 }

package/src/components/Checkbox/index.tsx

@@ -1,169 +1,39 @@
-import { forwardRef, memo, useMemo } from 'react'
-import * as React from 'react'
-import styled, { css } from 'styled-components'
-import { useCheckbox } from '@react-aria/checkbox'
-import { useObjectRef } from '@react-aria/utils'
-import { useToggleState } from 'react-stately'
-
-import type { AriaCheckboxProps } from '@react-types/checkbox'
-import Icon from '../Icon'
-import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
-
-type CheckboxLabelProps =
-  | {
-      children: React.ReactNode
-    }
-  | {
-      label: string
-    }
-
-export type CheckboxProps = CheckboxLabelProps & {
-  readonly id?: string
-  readonly name?: string
-  readonly className?: string
-
-  readonly checked?: boolean
-  readonly defaultChecked?: boolean
-  readonly disabled?: boolean
-  readonly readonly?: boolean
-  readonly invalid?: boolean
-
-  readonly onClick?: () => void
-  readonly onChange?: (isSelected: boolean) => void
-  readonly onBlur?: () => void
-  readonly onFocus?: () => void
-}
-
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  function CheckboxInner({ invalid = false, ...props }, ref) {
-    const ariaCheckboxProps = useMemo<AriaCheckboxProps>(
-      () => ({
-        ...props,
-        isInValid: invalid,
-        isSelected: props.checked,
-        defaultSelected: props.defaultChecked,
-        validationState: invalid ? 'invalid' : 'valid',
-        // children がいない場合は aria-label をつけないといけない
-        'aria-label': 'children' in props ? undefined : props.label,
-        isDisabled: props.disabled,
-      }),
-      [invalid, props]
+import './index.css'
+
+import { forwardRef, memo } from 'react'
+import { useId } from '@react-aria/utils'
+import CheckboxInput, { CheckboxInputProps } from './CheckboxInput'
+import { CheckboxWithLabel } from './CheckboxWithLabel'
+
+export type CheckboxProps = CheckboxInputProps
+
+const Checkbox = forwardRef<HTMLInputElement, CheckboxInputProps>(
+  function Checkbox({ disabled, className, id, children, ...props }, ref) {
+    const htmlId = useId(id)
+    const noChildren = children === undefined
+    const input = (
+      <CheckboxInput
+        {...props}
+        className={noChildren ? className : undefined}
+        disabled={disabled}
+        id={htmlId}
+        ref={ref}
+      />
     )
-    const state = useToggleState(ariaCheckboxProps)
-    const objectRef = useObjectRef(ref)
-
-    const { inputProps } = useCheckbox(ariaCheckboxProps, state, objectRef)
-    const isDisabled = (props.disabled ?? false) || (props.readonly ?? false)
-
+    if (noChildren) {
+      return input
+    }
     return (
-      <InputRoot aria-disabled={isDisabled} className={props.className}>
-        <CheckboxRoot>
-          <CheckboxInput
-            type="checkbox"
-            {...inputProps}
-            readOnly={props.readonly}
-          />
-          <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>
-            <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
-          </CheckboxInputOverlay>
-        </CheckboxRoot>
-
-        {'children' in props && <InputLabel>{props.children}</InputLabel>}
-      </InputRoot>
+      <CheckboxWithLabel
+        className={className}
+        disabled={disabled}
+        id={htmlId}
+        input={input}
+      >
+        {children}
+      </CheckboxWithLabel>
     )
   }
 )
 
 export default memo(Checkbox)
-
-const hiddenCss = css`
-  visibility: hidden;
-`
-
-const InputRoot = styled.label`
-  position: relative;
-  display: flex;
-
-  cursor: pointer;
-
-  gap: 4px;
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    cursor: default;
-    opacity: 0.32;
-  }
-`
-
-const CheckboxRoot = styled.div`
-  position: relative;
-`
-
-const CheckboxInput = styled.input`
-  &[type='checkbox'] {
-    appearance: none;
-    display: block;
-    cursor: pointer;
-    margin: 0;
-    width: 20px;
-    height: 20px;
-    border-radius: 4px;
-    transition: 0.2s box-shadow, 0.2s background-color;
-
-    &:disabled {
-      cursor: default;
-    }
-    &:read-only {
-      cursor: default;
-    }
-
-    &:checked {
-      background-color: var(--charcoal-brand);
-
-      &:not(:disabled):not([aria-disabled]),
-      &[aria-disabled='false'] {
-        &:hover {
-          background-color: var(--charcoal-brand-hover);
-        }
-        &:active {
-          background-color: var(--charcoal-brand-press);
-        }
-      }
-    }
-
-    &:not(:disabled):not([aria-disabled]),
-    &[aria-disabled='false'] {
-      ${focusVisibleFocusRingCss}
-      &[aria-invalid='true'] {
-        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-      }
-    }
-
-    &:not(:checked) {
-      border-width: 2px;
-      border-style: solid;
-      border-color: var(--charcoal-text4);
-    }
-  }
-`
-
-const CheckboxInputOverlay = styled.div<{ checked?: boolean }>`
-  position: absolute;
-  top: -2px;
-  left: -2px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: var(--charcoal-text5);
-
-  ${({ checked }) => checked !== true && hiddenCss};
-`
-
-const InputLabel = styled.div`
-  color: var(--charcoal-text2);
-  font-size: 14px;
-  /** checkbox の height が 20px なのでcheckbox と text が揃っているように見せるために行ボックスの高さを 20px にしている */
-  line-height: 20px;
-`

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

@@ -1,49 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storybook Tests Clickable Button 1`] = `
-.c0 {
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  padding: 0;
-  border-style: none;
-  outline: none;
-  color: inherit;
-  text-rendering: inherit;
-  -webkit-letter-spacing: inherit;
-  -moz-letter-spacing: inherit;
-  -ms-letter-spacing: inherit;
-  letter-spacing: inherit;
-  word-spacing: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c0:focus {
-  outline: none;
-}
-
-.c0::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
 <div
   data-dark={false}
 >
   <button
-    className="c0"
+    className="charcoal-clickable"
     onClick={[Function]}
   >
     button
@@ -52,49 +14,11 @@ exports[`Storybook Tests Clickable Button 1`] = `
 `;
 
 exports[`Storybook Tests Clickable Link 1`] = `
-.c0 {
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  padding: 0;
-  border-style: none;
-  outline: none;
-  color: inherit;
-  text-rendering: inherit;
-  -webkit-letter-spacing: inherit;
-  -moz-letter-spacing: inherit;
-  -ms-letter-spacing: inherit;
-  letter-spacing: inherit;
-  word-spacing: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c0:focus {
-  outline: none;
-}
-
-.c0::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
 <div
   data-dark={false}
 >
   <a
-    className="c0"
+    className="charcoal-clickable"
     href="#"
     onClick={[Function]}
   >

package/src/components/Clickable/index.css

@@ -0,0 +1,41 @@
+.charcoal-clickable {
+  cursor: pointer;
+
+  /* Reset button appearance */
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  text-decoration: none;
+
+  /* Change the font styles in all browsers. */
+  font: inherit;
+
+  /* Remove the margin in Firefox and Safari. */
+  margin: 0;
+
+  /* Show the overflow in Edge. */
+  overflow: visible;
+
+  /* Remove the inheritance of text transform in Firefox. */
+  text-transform: none;
+}
+
+.charcoal-clickable:disabled,
+.charcoal-clickable[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
+}
+
+.charcoal-clickable:focus {
+  outline: none;
+}
+
+.charcoal-clickable::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}

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

@@ -13,7 +13,7 @@ export const Button: StoryObj = {
 
 export const Link: StoryObj = {
   render: () => (
-    <Clickable to="#" onClick={action('click')}>
+    <Clickable as="a" href="#" onClick={action('click')}>
       link
     </Clickable>
   ),

package/src/components/Clickable/index.tsx

@@ -1,91 +1,31 @@
-import * as React from 'react'
-import styled from 'styled-components'
-import {
-  LinkProps,
-  useComponentAbstraction,
-} from '../../core/ComponentAbstraction'
-import { disabledSelector } from '@charcoal-ui/utils'
+import React, { useMemo, forwardRef } from 'react'
+import { useClassNames } from '../../_lib/useClassNames'
+import './index.css'
 
-interface BaseProps {
+export type ClickableProps<T extends React.ElementType = 'button'> = {
   /**
-   * クリックの無効化
+   * The component used for root element.
+   * @type T extends React.ElementType = 'button'
    */
-  disabled?: boolean
-}
-
-interface LinkBaseProps {
+  as?: T
   /**
-   * リンクのURL。指定するとbuttonタグではなくaタグとして描画される
+   * The as property of the component specified by the Button component's as attribute.
    */
-  to: string
-}
-
-export type ClickableProps =
-  | (BaseProps & Omit<React.ComponentPropsWithoutRef<'button'>, 'disabled'>)
-  | (BaseProps & LinkBaseProps & Omit<LinkProps, 'to'>)
-export type ClickableElement = HTMLButtonElement & HTMLAnchorElement
-
-const Clickable = React.forwardRef<ClickableElement, ClickableProps>(
-  function Clickable(props, ref) {
-    const { Link } = useComponentAbstraction()
-    const isLink = 'to' in props
-    const as = isLink ? Link : 'button'
-    const ariaDisabled = isLink && props.disabled === true ? true : undefined
-    let rest = props
-    if (isLink) {
-      const { disabled, ..._rest } = props
-      rest = _rest
-    }
-    return (
-      <StyledClickableDiv
-        {...rest}
-        ref={ref}
-        as={as}
-        aria-disabled={ariaDisabled}
-      />
-    )
-  }
-)
+  componentAs?: React.ComponentPropsWithRef<T>['as']
+} & Omit<React.ComponentPropsWithRef<T>, 'as'>
+
+const Clickable = forwardRef(function Clickable<T extends React.ElementType>(
+  { componentAs, as, ...props }: ClickableProps<T>,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  const className = useClassNames('charcoal-clickable', props.className)
+
+  const Component = useMemo(() => as ?? 'button', [as])
+
+  return (
+    <Component {...props} ref={ref} className={className} as={componentAs} />
+  )
+}) as <T extends React.ElementType = 'button'>(
+  p: ClickableProps<T>
+) => JSX.Element
 export default Clickable
-
-const StyledClickableDiv = styled.div`
-  cursor: pointer;
-
-  ${disabledSelector} {
-    cursor: default;
-  }
-
-  /* Reset button appearance */
-  appearance: none;
-  background: transparent;
-  padding: 0;
-  border-style: none;
-  outline: none;
-  color: inherit;
-  text-rendering: inherit;
-  letter-spacing: inherit;
-  word-spacing: inherit;
-  text-decoration: none;
-
-  &:focus {
-    outline: none;
-  }
-
-  /* Change the font styles in all browsers. */
-  font: inherit;
-
-  /* Remove the margin in Firefox and Safari. */
-  margin: 0;
-
-  /* Show the overflow in Edge. */
-  overflow: visible;
-
-  /* Remove the inheritance of text transform in Firefox. */
-  text-transform: none;
-
-  /* Remove the inner border and padding in Firefox. */
-  &::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
-`