@charcoal-ui/react 6.0.0-beta.0 → 6.0.0-beta.2

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

@@ -30,7 +30,9 @@ exports[`Storybook Tests > react/MultiSelect > Basic 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -59,7 +61,9 @@ exports[`Storybook Tests > react/MultiSelect > Basic 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -89,7 +93,9 @@ exports[`Storybook Tests > react/MultiSelect > Basic 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -118,7 +124,9 @@ exports[`Storybook Tests > react/MultiSelect > Basic 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -162,7 +170,9 @@ exports[`Storybook Tests > react/MultiSelect > Invalid 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -191,7 +201,9 @@ exports[`Storybook Tests > react/MultiSelect > Invalid 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -220,7 +232,9 @@ exports[`Storybook Tests > react/MultiSelect > Invalid 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -249,7 +263,9 @@ exports[`Storybook Tests > react/MultiSelect > Invalid 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -293,7 +309,9 @@ exports[`Storybook Tests > react/MultiSelect > Overlay 1`] = `
           data-overlay="true"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -322,7 +340,9 @@ exports[`Storybook Tests > react/MultiSelect > Overlay 1`] = `
           data-overlay="true"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -351,7 +371,9 @@ exports[`Storybook Tests > react/MultiSelect > Overlay 1`] = `
           data-overlay="true"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -380,7 +402,9 @@ exports[`Storybook Tests > react/MultiSelect > Overlay 1`] = `
           data-overlay="true"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -424,7 +448,9 @@ exports[`Storybook Tests > react/MultiSelect > Playground 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -454,7 +480,9 @@ exports[`Storybook Tests > react/MultiSelect > Playground 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -484,7 +512,9 @@ exports[`Storybook Tests > react/MultiSelect > Playground 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>
@@ -514,7 +544,9 @@ exports[`Storybook Tests > react/MultiSelect > Playground 1`] = `
           data-overlay="false"
         >
           <pixiv-icon
+            class="charcoal-icon"
             name="24/Check"
+            style="--charcoal-icon-size: 16px;"
             unsafe-non-guideline-scale="0.6666666666666666"
           />
         </div>

package/src/components/MultiSelect/index.tsx

@@ -76,7 +76,7 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
           aria-invalid={invalid}
           aria-hidden
         >
-          <Icon name="24/Check" unsafe-non-guideline-scale={16 / 24} />
+          <Icon name="24/Check" fixedSize={16} />
         </div>
         {Boolean(children) && (
           <div className="charcoal-multi-select-label">{children}</div>

package/src/components/Pagination/__snapshots__/index.css.snap

@@ -95,11 +95,8 @@
 }
 /* stylelint-enable no-descending-specificity */
 
-/* Kept flat: different root class from .charcoal-pagination-button */
-
-.charcoal-pagination-nav-button[hidden] {
+.charcoal-pagination-nav-button[data-hidden] {
   visibility: hidden;
-  display: block;
 }
 
 .charcoal-pagination-spacer, .charcoal-pagination-spacer:hover, .charcoal-pagination-spacer:active {

package/src/components/Pagination/index.css

@@ -103,10 +103,8 @@
 }
 /* stylelint-enable no-descending-specificity */
 
-/* Kept flat: different root class from .charcoal-pagination-button */
-.charcoal-pagination-nav-button[hidden] {
+.charcoal-pagination-nav-button[data-hidden] {
   visibility: hidden;
-  display: block;
 }
 
 .charcoal-pagination-spacer {

package/src/components/Pagination/index.tsx

@@ -44,7 +44,8 @@ function NavButton({ direction, ariaLabel }: NavButtonProps) {
     <IconButton
       icon={isPrev ? '24/Prev' : '24/Next'}
       size={size}
-      hidden={disabled}
+      /* Use data-hidden, not [hidden]: Tailwind preflight's `[hidden] { display: none !important }` would clobber `visibility: hidden` and collapse the layout space. */
+      data-hidden={disabled || undefined}
       aria-label={ariaLabel}
       {...(isLinkMode && makeUrl
         ? {

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

@@ -24,7 +24,9 @@ exports[`Storybook Tests > react/TagItem > Active 1`] = `
         </span>
       </div>
       <pixiv-icon
+        class="charcoal-icon"
         name="16/Remove"
+        style="--charcoal-icon-size: 16px;"
       />
     </button>
   </div>

package/src/components/TextArea/TextArea.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import TextArea from '.'
+
+describe('TextArea component', () => {
+  it.each`
+    name                                    | value                        | defaultValue | expectedValue | expectedCount
+    ${'uncontrolled defaultValue'}          | ${undefined}                 | ${'abc'}     | ${'abc'}      | ${'3'}
+    ${'controlled null'}                    | ${null as unknown as string} | ${undefined} | ${''}         | ${'0'}
+    ${'controlled null with defaultValue'}  | ${null as unknown as string} | ${'abc'}     | ${'abc'}      | ${'3'}
+    ${'controlled value with defaultValue'} | ${'xy'}                      | ${'abc'}     | ${'xy'}       | ${'2'}
+  `('$name', ({ value, defaultValue, expectedValue, expectedCount }) => {
+    render(<TextArea showCount value={value} defaultValue={defaultValue} />)
+
+    expect(screen.getByRole('textbox')).toHaveValue(expectedValue)
+    expect(screen.getByText(expectedCount)).toBeInTheDocument()
+  })
+})

package/src/components/TextArea/index.tsx

@@ -78,17 +78,18 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
     },
     forwardRef,
   ) {
+    const isUncontrolled = value === undefined
+    // `null` is invalid for TextAreaProps, but may arrive at runtime. Keep the
+    // pre-f710d512 nullish fallback so getCount is never called with null.
+    const countValue = value ?? defaultValue?.toString() ?? ''
     const [rows, setRows] = useState(initialRows)
-    const [count, setCount] = useState(
-      getCount(value ?? defaultValue?.toString() ?? ''),
-    )
+    const [count, setCount] = useState(getCount(countValue))
 
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const containerRef = useRef(null)
     useFocusWithClick(containerRef, textareaRef)
     const { visuallyHiddenProps } = useVisuallyHidden()
 
-    const isUncontrolled = value === undefined
     const isEnableAutoHeight = useMemo(
       () => autoHeight || (maxRows && maxRows >= 0),
       [autoHeight, maxRows],
@@ -172,7 +173,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
     useEffect(() => {
       // 制御コンポーネントの時の挙動
       if (!isUncontrolled) {
-        setCount(getCount(value))
+        setCount(getCount(countValue))
       }
 
       //　autoHeight同期(valueが変更された時にsyncHeightしたい)
@@ -181,7 +182,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       }
     }, [
       isUncontrolled,
-      value,
+      countValue,
       getCount,
       isEnableAutoHeight,
       textareaRef,

package/src/components/TextField/__snapshots__/TextField.story.storyshot

@@ -424,7 +424,9 @@ exports[`Storybook Tests > react/TextField > Prefix 1`] = `
             style="display: flex; align-items: center;"
           >
             <pixiv-icon
+              class="charcoal-icon"
               name="16/Search"
+              style="--charcoal-icon-size: 16px;"
             />
           </div>
         </div>