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

package/src/components/DropdownSelector/index.css

@@ -0,0 +1,84 @@
+.charcoal-dropdown-selector-root {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 4px;
+  width: 100%;
+}
+
+.charcoal-dropdown-selector-root[aria-disabled='true'] {
+  cursor: default;
+  opacity: 0.32;
+}
+
+.charcoal-dropdown-selector-button {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  justify-content: space-between;
+  align-items: center;
+
+  height: 40px;
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  cursor: pointer;
+  gap: 4px;
+
+  padding-right: 8px;
+  padding-left: 8px;
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+
+  transition: 0.2s box-shadow, 0.2s background-color;
+}
+
+.charcoal-dropdown-selector-button:disabled {
+  cursor: default;
+}
+
+.charcoal-dropdown-selector-button:not(:disabled):focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-dropdown-selector-button:not(:disabled):focus-visible {
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+
+.charcoal-dropdown-selector-button:not(:disabled)[data-active='true'],
+.charcoal-dropdown-selector-button:not(:disabled):active {
+  background-color: var(--charcoal-surface3-press);
+}
+
+.charcoal-dropdown-selector-button:not(:disabled):hover {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.charcoal-dropdown-selector-button:not(:disabled):focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.charcoal-dropdown-selector-button[aria-invalid='true'],
+.charcoal-dropdown-selector-button:not(
+    :disabled
+  )[aria-invalid='true']:focus:not(:focus-visible) {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+
+.charcoal-ui-dropdown-selector-text {
+  text-align: left;
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.charcoal-ui-dropdown-selector-text[data-placeholder='true'] {
+  color: var(--charcoal-text3);
+}
+
+.charcoal-ui-dropdown-selector-icon {
+  color: var(--charcoal-text2);
+}

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

@@ -11,7 +11,7 @@ import TextArea from '../TextArea'
 import Button from '../Button'
 
 export default {
-  title: 'DropdownSelector',
+  title: 'react/DropdownSelector',
   component: DropdownSelector,
 } as Meta<typeof DropdownSelector>
 
@@ -25,8 +25,6 @@ export const Default: StoryObj<typeof DropdownSelector> = {
           {...args}
           onChange={setSelected}
           value={args.value ? args.value : selected}
-          placeholder="Placeholder"
-          label="Label"
         >
           <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
           <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
@@ -164,7 +162,6 @@ export const RequiredText: StoryObj<typeof DropdownSelector> = {
       <div style={{ width: 288 }}>
         <DropdownSelector
           value={selected}
-          invalid
           onChange={setSelected}
           label="Label"
           showLabel
@@ -187,7 +184,6 @@ export const SubLabel: StoryObj<typeof DropdownSelector> = {
       <div style={{ width: 288 }}>
         <DropdownSelector
           value={selected}
-          invalid
           onChange={setSelected}
           label="Label"
           showLabel
@@ -237,7 +233,7 @@ export const LongNames: StoryObj<typeof DropdownSelector> = {
 
 export const InModal: StoryObj<typeof DropdownSelector> = {
   render: function Render() {
-    const [open, setOpen] = useState(true)
+    const [open, setOpen] = useState(false)
     const [selected1, setSelected1] = useState('1')
     const [selected2, setSelected2] = useState('2')
     return (

package/src/components/DropdownSelector/index.tsx

@@ -1,14 +1,16 @@
-import { ReactNode, useState, useRef, useMemo } from 'react'
-import styled, { css } from 'styled-components'
-import { disabledSelector } from '@charcoal-ui/utils'
+import './index.css'
+
+import React, { ReactNode, useState, useRef, useMemo, useCallback } from 'react'
 import Icon from '../Icon'
 import FieldLabel from '../FieldLabel'
 import { DropdownPopover } from './DropdownPopover'
 import { findPreviewRecursive } from './utils/findPreviewRecursive'
 import MenuList, { MenuListChildren } from './MenuList'
-import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
 import { getValuesRecursive } from './MenuList/internals/getValuesRecursive'
 import { useVisuallyHidden } from '@react-aria/visually-hidden'
+import { AssistiveText } from '../TextField/AssistiveText'
+import { useClassNames } from '../../_lib/useClassNames'
+import { useId } from '@react-aria/utils'
 
 export type DropdownSelectorProps = {
   label: string
@@ -27,11 +29,14 @@ export type DropdownSelectorProps = {
   name?: string
   children: MenuListChildren
   onChange: (value: string) => void
+  className?: string
 }
 
-const defaultRequiredText = '*必須'
-
-export default function DropdownSelector(props: DropdownSelectorProps) {
+export default function DropdownSelector({
+  onChange,
+  showLabel = false,
+  ...props
+}: DropdownSelectorProps) {
   const triggerRef = useRef<HTMLButtonElement>(null)
   const [isOpen, setIsOpen] = useState(false)
   const preview = findPreviewRecursive(props.children, props.value)
@@ -45,18 +50,38 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
 
   const { visuallyHiddenProps } = useVisuallyHidden()
 
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      onChange(e.target.value)
+    },
+    [onChange]
+  )
+
+  const labelId = useId()
+  const describedbyId = useId()
+
+  const classNames = useClassNames(
+    'charcoal-dropdown-selector-root',
+    props.className
+  )
+
   return (
-    <DropdownSelectorRoot aria-disabled={props.disabled}>
-      {props.showLabel === true && (
-        <DropdownFieldLabel
-          label={props.label}
-          required={props.required}
-          requiredText={props.requiredText ?? defaultRequiredText}
-          subLabel={props.subLabel}
-        />
-      )}
+    <div className={classNames} aria-disabled={props.disabled}>
+      <FieldLabel
+        id={labelId}
+        label={props.label}
+        required={props.required}
+        requiredText={props.requiredText}
+        subLabel={props.subLabel}
+        {...(!showLabel ? visuallyHiddenProps : {})}
+      />
       <div {...visuallyHiddenProps} aria-hidden="true">
-        <select name={props.name} value={props.value} tabIndex={-1}>
+        <select
+          name={props.name}
+          value={props.value}
+          onChange={handleChange}
+          tabIndex={-1}
+        >
           {propsArray.map((itemProps) => {
             return (
               <option
@@ -70,8 +95,13 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
           })}
         </select>
       </div>
-      <DropdownButton
-        invalid={props.invalid}
+      <button
+        className="charcoal-dropdown-selector-button"
+        aria-labelledby={labelId}
+        aria-invalid={props.invalid}
+        aria-describedby={
+          props.assistiveText !== undefined ? describedbyId : undefined
+        }
         disabled={props.disabled}
         onClick={() => {
           if (props.disabled === true) return
@@ -79,13 +109,16 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
         }}
         ref={triggerRef}
         type="button"
-        $active={isOpen}
+        data-active={isOpen}
       >
-        <DropdownButtonText $isText3={isPlaceholder}>
+        <span
+          className="charcoal-ui-dropdown-selector-text"
+          data-placeholder={isPlaceholder}
+        >
           {isPlaceholder ? props.placeholder : preview}
-        </DropdownButtonText>
-        <DropdownButtonIcon name="16/Menu" />
-      </DropdownButton>
+        </span>
+        <Icon className="charcoal-ui-dropdown-selector-icon" name="16/Menu" />
+      </button>
       {isOpen && (
         <DropdownPopover
           isOpen={isOpen}
@@ -96,7 +129,7 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
           <MenuList
             value={props.value}
             onChange={(v) => {
-              props.onChange(v)
+              onChange(v)
               setIsOpen(false)
             }}
           >
@@ -105,119 +138,10 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
         </DropdownPopover>
       )}
       {props.assistiveText !== undefined && (
-        <AssertiveText invalid={props.invalid}>
+        <AssistiveText data-invalid={props.invalid === true} id={describedbyId}>
           {props.assistiveText}
-        </AssertiveText>
+        </AssistiveText>
       )}
-    </DropdownSelectorRoot>
+    </div>
   )
 }
-
-const DropdownSelectorRoot = styled.div`
-  display: inline-block;
-  width: 100%;
-
-  ${disabledSelector} {
-    cursor: default;
-    opacity: 0.32;
-  }
-`
-
-const DropdownFieldLabel = styled(FieldLabel)`
-  width: 100%;
-  margin-bottom: 8px;
-`
-
-const DropdownButton = styled.button<{ invalid?: boolean; $active?: boolean }>`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  height: 40px;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  cursor: pointer;
-  gap: 4px;
-
-  ${disabledSelector} {
-    cursor: default;
-  }
-
-  padding-right: 8px;
-  padding-left: 8px;
-  background-color: var(--charcoal-surface3);
-  border-radius: 4px;
-
-  transition: 0.2s box-shadow, 0.2s background-color;
-
-  &:not(:disabled):not([aria-disabled]),
-  &[aria-disabled='false'] {
-    ${focusVisibleFocusRingCss}
-    ${({ $active }) =>
-      $active === true
-        ? css`
-            background-color: var(--charcoal-surface3-press);
-          `
-        : css`
-            &:hover {
-              background-color: var(--charcoal-surface3-hover);
-            }
-            &:active {
-              background-color: var(--charcoal-surface3-press);
-            }
-          `}
-  }
-
-  ${({ invalid }) =>
-    invalid === true &&
-    css`
-      &:not(:disabled):not([aria-disabled]),
-      &[aria-disabled='false'] {
-        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-      }
-    `}
-`
-
-const DropdownButtonText = styled.span<{ $isText3: boolean }>`
-  text-align: left;
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-${(p) => (p.$isText3 ? 'text3' : 'text2')});
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const DropdownButtonIcon = styled(Icon)`
-  color: var(--charcoal-text2);
-`
-
-const AssertiveText = styled.div<{ invalid?: boolean }>`
-  margin-top: 8px;
-  font-size: 14px;
-  color: var(--charcoal-text2);
-  line-height: 22px;
-  display: flow-root;
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
-
-  ${({ invalid }) =>
-    invalid === true &&
-    css`
-      color: var(--charcoal-assertive);
-    `}
-`

package/src/components/FieldLabel/index.css

@@ -0,0 +1,35 @@
+.charcoal-field-label {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  display: flow-root;
+  color: var(--charcoal-text1);
+}
+
+.charcoal-field-label-required-text {
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+}
+
+.charcoal-field-label-sub-label {
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text3);
+  transition: 0.2s color, 0.2s box-shadow;
+}
+
+.charcoal-field-label-root {
+  display: inline-flex;
+  align-items: center;
+}
+
+.charcoal-field-label-root > .charcoal-field-label-required-text {
+  margin-left: 4px;
+}
+
+.charcoal-field-label-root > .charcoal-field-label-sub-label {
+  margin-left: auto;
+}

package/src/components/FieldLabel/index.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
-import styled from 'styled-components'
+import { useClassNames } from '../../_lib/useClassNames'
+
+import './index.css'
 
 export interface FieldLabelProps
   extends React.LabelHTMLAttributes<HTMLLabelElement> {
@@ -24,115 +26,23 @@ const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
     },
     ref
   ) {
+    const classNames = useClassNames('charcoal-field-label-root', className)
     return (
-      <FieldLabelWrapper style={style} className={className}>
-        <Label ref={ref} {...labelProps}>
+      <div style={style} className={classNames}>
+        <label ref={ref} className="charcoal-field-label" {...labelProps}>
           {label}
-        </Label>
-        {required && <RequiredText>{requiredText}</RequiredText>}
-        <SubLabelClickable>
+        </label>
+        {required && (
+          <div className="charcoal-field-label-required-text">
+            {requiredText}
+          </div>
+        )}
+        <div className="charcoal-field-label-sub-label">
           <span>{subLabel}</span>
-        </SubLabelClickable>
-      </FieldLabelWrapper>
+        </div>
+      </div>
     )
   }
 )
 
 export default FieldLabel
-
-const Label = styled.label`
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-  display: flow-root;
-  color: var(--charcoal-text1);
-
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
-`
-
-const RequiredText = styled.span`
-  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;
-  }
-`
-
-const SubLabelClickable = styled.div`
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text3);
-  transition: 0.2s color, 0.2s box-shadow;
-
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
-
-  &:not(:disabled):not([aria-disabled]),
-  &[aria-disabled='false'] {
-    &:hover {
-      color: var(--charcoal-text3-hover);
-    }
-    &:active {
-      color: var(--charcoal-text3-press);
-    }
-    &:active,
-    &:focus,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
-  }
-`
-
-const FieldLabelWrapper = styled.div`
-  display: inline-flex;
-  align-items: center;
-
-  > ${RequiredText} {
-    margin-left: 4px;
-  }
-
-  > ${SubLabelClickable} {
-    margin-left: auto;
-  }
-`

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Icon Default 1`] = `
+exports[`Storybook Tests react/Icon Default 1`] = `
 <div
   data-dark={false}
 >

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

@@ -3,7 +3,7 @@ import { KNOWN_ICON_FILES } from '@charcoal-ui/icons'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'Icon',
+  title: 'react/Icon',
   component: Icon,
   argTypes: {
     name: {