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

package/src/components/Icon/index.browser.test.tsx

@@ -0,0 +1,280 @@
+/**
+ * Layout shift prevention test
+ *
+ * pixiv-icon Web Component は connectedCallback で Shadow DOM にサイズを設定する。
+ * SSR 時は JS が未実行なので、CSS だけでサイズを確保する必要がある。
+ *
+ * このテストでは以下を検証する:
+ *
+ * 1. CSS メカニズムの検証 (.charcoal-icon クラス)
+ *    - plain HTML 要素 に charcoal-icon クラスと --charcoal-icon-size を設定
+ *    - Web Component を介さず CSS だけでサイズが付くことを確認
+ *
+ * 2. pixiv-icon:not(:defined) の SSR fallback CSS の検証
+ *    - iframe (= 子 window では CustomElementRegistry が独立 = pixiv-icon 未登録) を用いて
+ *      Web Component 登録前の vanilla HTML SSR 状態を再現
+ *
+ * 3. React Icon コンポーネントの統合テスト
+ *    - Icon コンポーネントが正しい CSS variable を設定し、
+ *      WC upgrade 後も同じサイズであることを確認
+ *
+ * 4. 動的 prop 変更で host + shadow SVG サイズが追従するかの検証
+ *    - observedAttributes に含まれない size 系 prop が CSS 変数継承で追従することを確認
+ *
+ * Icon コンポーネントが '@charcoal-ui/icons/css/icon.css' を side-effect import するため、
+ * テスト実行時には Vite が自動的にスタイルを document に注入する (本番と同じ挙動)。
+ */
+import iconCssRaw from '@charcoal-ui/icons/css/icon.css?raw'
+import { render } from '@testing-library/react'
+import Icon from '.'
+import HintText from '../HintText'
+import TagItem from '../TagItem'
+
+// 本番 icon.css の生テキスト (drift 防止のため文字列複製ではなく実ファイル参照)。
+// iframe テストで pixiv-icon:not(:defined) を検証するために、子 document に注入する。
+const iconCss = iconCssRaw
+
+/**
+ * CSS のみと Web Component upgrade 後の両方で
+ * 同じサイズになることを保証するためのテストケース
+ */
+const iconSizeTestCases = [
+  { name: '24/Add', expected: 24 },
+  { name: '24/Add', scale: 2, expected: 48 },
+  { name: '24/Add', scale: 3, expected: 72 },
+  { name: '24/Add', fixedSize: 64, expected: 64 },
+  { name: '24/Add', unsafeNonGuidelineScale: 1.5, expected: 36 },
+  { name: 'Inline/Add', expected: 16 },
+  { name: 'Inline/Add', scale: 2, expected: 32 },
+  { name: '16/Add', expected: 16 },
+  { name: '32/BookmarkOff', expected: 32 },
+] as const
+
+function getIconSize(container: HTMLElement) {
+  const el = container.querySelector('pixiv-icon') as HTMLElement
+  const rect = el.getBoundingClientRect()
+  return { width: rect.width, height: rect.height }
+}
+
+describe('charcoal-icon CSS provides correct sizing without Web Component', () => {
+  // CSS メカニズムを plain HTML 要素で直接テストする。
+  // Web Component を一切介さないため、SSR 時の CSS-only サイジングと等価。
+  // Icon を import した時点で side-effect の icon.css が document に注入される。
+
+  it.each(iconSizeTestCases)(
+    'element with --charcoal-icon-size: $expected px has $expected x $expected',
+    ({ expected }) => {
+      const el = document.createElement('span')
+      el.className = 'charcoal-icon'
+      el.style.setProperty('--charcoal-icon-size', `${expected}px`)
+      document.body.appendChild(el)
+      try {
+        const rect = el.getBoundingClientRect()
+        expect(rect.width).toBe(expected)
+        expect(rect.height).toBe(expected)
+      } finally {
+        el.remove()
+      }
+    },
+  )
+})
+
+describe('Icon component has correct size with Web Component upgrade', () => {
+  it('pixiv-icon IS a registered custom element', () => {
+    expect(customElements.get('pixiv-icon')).toBeDefined()
+  })
+
+  it.each(iconSizeTestCases)(
+    'Icon $name (scale=$scale, fixedSize=$fixedSize, unsafeNonGuidelineScale=$unsafeNonGuidelineScale) has $expected x $expected',
+    ({ name, scale, fixedSize, unsafeNonGuidelineScale, expected }) => {
+      const { container } = render(
+        <Icon
+          name={name}
+          scale={scale}
+          fixedSize={fixedSize}
+          unsafeNonGuidelineScale={unsafeNonGuidelineScale}
+        />,
+      )
+      const { width, height } = getIconSize(container)
+      expect(width).toBe(expected)
+      expect(height).toBe(expected)
+    },
+  )
+
+  it('HintText icon has 16x16', () => {
+    const { container } = render(<HintText>hint</HintText>)
+    const { width, height } = getIconSize(container)
+    expect(width).toBe(16)
+    expect(height).toBe(16)
+  })
+
+  it('TagItem (active) icon has 16x16', () => {
+    const { container } = render(<TagItem label="tag" status="active" />)
+    const { width, height } = getIconSize(container)
+    expect(width).toBe(16)
+    expect(height).toBe(16)
+  })
+})
+
+describe('pixiv-icon:not(:defined) reserves correct size with CSS only (vanilla HTML SSR)', () => {
+  // React 経由ではなく vanilla HTML で <pixiv-icon> を SSR したケースを再現する。
+  // 親 window では pixiv-icon が定義済みなので、未登録状態を作るために iframe を使う。
+  // iframe には実 icon.css のみを注入し、@charcoal-ui/icons の JS は import しない。
+
+  type VanillaCase = {
+    title: string
+    markup: string
+    expected: number
+  }
+
+  const vanillaCases: VanillaCase[] = [
+    {
+      title: '24/Add (no attrs) → 24px',
+      markup: `<pixiv-icon name="24/Add"></pixiv-icon>`,
+      expected: 24,
+    },
+    {
+      title: '24/Add scale=2 → 48px',
+      markup: `<pixiv-icon name="24/Add" scale="2"></pixiv-icon>`,
+      expected: 48,
+    },
+    {
+      title: '24/Add scale=3 → 72px',
+      markup: `<pixiv-icon name="24/Add" scale="3"></pixiv-icon>`,
+      expected: 72,
+    },
+    {
+      title: '16/Add → 16px',
+      markup: `<pixiv-icon name="16/Add"></pixiv-icon>`,
+      expected: 16,
+    },
+    {
+      title: '32/BookmarkOff → 32px',
+      markup: `<pixiv-icon name="32/BookmarkOff"></pixiv-icon>`,
+      expected: 32,
+    },
+    {
+      title: 'Inline/Add → 16px',
+      markup: `<pixiv-icon name="Inline/Add"></pixiv-icon>`,
+      expected: 16,
+    },
+    {
+      title: 'Inline/Add scale=2 → 32px',
+      markup: `<pixiv-icon name="Inline/Add" scale="2"></pixiv-icon>`,
+      expected: 32,
+    },
+    {
+      title: 'unknown name (no prefix match) → fallback 24px',
+      markup: `<pixiv-icon name="24/SomeName"></pixiv-icon>`,
+      expected: 24,
+    },
+    {
+      title: 'non-guideline size via --charcoal-icon-size override → 20px',
+      markup: `<pixiv-icon name="24/Add" style="--charcoal-icon-size: 20px"></pixiv-icon>`,
+      expected: 20,
+    },
+    {
+      title:
+        'non-guideline size for a 20/ prefix (not enumerated in CSS) via --charcoal-icon-size → 20px',
+      markup: `<pixiv-icon name="20/Custom" style="--charcoal-icon-size: 20px"></pixiv-icon>`,
+      expected: 20,
+    },
+  ]
+
+  async function withIframe(
+    body: string,
+    assert: (doc: Document, host: HTMLElement) => void,
+  ): Promise<void> {
+    const iframe = document.createElement('iframe')
+    iframe.style.cssText = 'border:0;width:200px;height:200px;'
+    // srcdoc を appendChild の前にセットすることで、about:blank の暗黙 load を待たずに
+    // 単一の load イベントだけで完了させる (load race 防止)。
+    iframe.srcdoc = `<!doctype html><html><head><style>${iconCss}</style></head><body>${body}</body></html>`
+
+    try {
+      await new Promise<void>((resolve) => {
+        iframe.addEventListener('load', () => resolve(), { once: true })
+        document.body.appendChild(iframe)
+      })
+
+      const doc = iframe.contentDocument
+      if (!doc) throw new Error('iframe document missing')
+      const host = doc.querySelector('pixiv-icon') as HTMLElement | null
+      if (!host) throw new Error('pixiv-icon not found in iframe')
+      assert(doc, host)
+    } finally {
+      iframe.remove()
+    }
+  }
+
+  it.each(vanillaCases)('$title', async ({ markup, expected }) => {
+    await withIframe(markup, (doc, host) => {
+      // iframe 内では pixiv-icon は登録されていないことを確認 (= :not(:defined) が効く)
+      const iframeWindow = doc.defaultView as Window & typeof globalThis
+      expect(iframeWindow.customElements.get('pixiv-icon')).toBeUndefined()
+
+      const rect = host.getBoundingClientRect()
+      expect(rect.width).toBe(expected)
+      expect(rect.height).toBe(expected)
+    })
+  })
+})
+
+describe('Icon reflects dynamic prop changes (no observed-attribute regression)', () => {
+  function getShadowSvgSize(container: HTMLElement) {
+    const host = container.querySelector('pixiv-icon') as HTMLElement
+    const svg = host.shadowRoot?.querySelector('svg') as SVGElement | null
+    if (!svg) return null
+    const rect = svg.getBoundingClientRect()
+    return { width: rect.width, height: rect.height }
+  }
+
+  it('updates host + shadow SVG size when only fixedSize changes', async () => {
+    const { container, rerender } = render(
+      <Icon name="24/Add" fixedSize={20} />,
+    )
+
+    expect(getIconSize(container)).toEqual({ width: 20, height: 20 })
+
+    rerender(<Icon name="24/Add" fixedSize={40} />)
+
+    expect(getIconSize(container)).toEqual({ width: 40, height: 40 })
+
+    const shadowSize = getShadowSvgSize(container)
+    if (shadowSize !== null) {
+      expect(shadowSize).toEqual({ width: 40, height: 40 })
+    }
+  })
+
+  it('updates host + shadow SVG size when only unsafeNonGuidelineScale changes', () => {
+    const { container, rerender } = render(
+      <Icon name="24/Add" unsafeNonGuidelineScale={1.5} />,
+    )
+
+    expect(getIconSize(container)).toEqual({ width: 36, height: 36 })
+
+    rerender(<Icon name="24/Add" unsafeNonGuidelineScale={2.5} />)
+
+    expect(getIconSize(container)).toEqual({ width: 60, height: 60 })
+
+    const shadowSize = getShadowSvgSize(container)
+    if (shadowSize !== null) {
+      expect(shadowSize).toEqual({ width: 60, height: 60 })
+    }
+  })
+
+  it('updates host + shadow SVG size when only scale changes', () => {
+    const { container, rerender } = render(<Icon name="24/Add" scale={1} />)
+
+    expect(getIconSize(container)).toEqual({ width: 24, height: 24 })
+
+    rerender(<Icon name="24/Add" scale={3} />)
+
+    expect(getIconSize(container)).toEqual({ width: 72, height: 72 })
+
+    const shadowSize = getShadowSvgSize(container)
+    if (shadowSize !== null) {
+      expect(shadowSize).toEqual({ width: 72, height: 72 })
+    }
+  })
+})

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

@@ -0,0 +1,94 @@
+import { render } from '@testing-library/react'
+import Icon from '.'
+
+function queryIcon(container: HTMLElement) {
+  const el = container.querySelector('pixiv-icon')
+  if (el === null) throw new Error('pixiv-icon not found')
+  return el as HTMLElement
+}
+
+describe('Icon', () => {
+  it('always sets --charcoal-icon-size with calculated size', () => {
+    const { container } = render(<Icon name="24/Add" />)
+    expect(
+      queryIcon(container).style.getPropertyValue('--charcoal-icon-size'),
+    ).toBe('24px')
+  })
+
+  it('sets --charcoal-icon-size with scale', () => {
+    const { container } = render(<Icon name="24/Add" scale={2} />)
+    expect(
+      queryIcon(container).style.getPropertyValue('--charcoal-icon-size'),
+    ).toBe('48px')
+  })
+
+  it('sets --charcoal-icon-size with unsafeNonGuidelineScale (deprecated)', () => {
+    const { container } = render(
+      <Icon name="24/Add" unsafeNonGuidelineScale={1.5} />,
+    )
+    expect(
+      queryIcon(container).style.getPropertyValue('--charcoal-icon-size'),
+    ).toBe('36px')
+  })
+
+  it('sets --charcoal-icon-size with fixedSize', () => {
+    const { container } = render(<Icon name="24/Add" fixedSize={100} />)
+    expect(
+      queryIcon(container).style.getPropertyValue('--charcoal-icon-size'),
+    ).toBe('100px')
+  })
+
+  it('passes scale attribute through to pixiv-icon', () => {
+    const { container } = render(<Icon name="24/Add" scale={2} />)
+    expect(queryIcon(container).getAttribute('scale')).toBe('2')
+  })
+
+  it('passes unsafe-non-guideline-scale attribute to pixiv-icon for hydration', () => {
+    const { container } = render(
+      <Icon name="24/Add" unsafeNonGuidelineScale={1.5} />,
+    )
+    expect(
+      queryIcon(container).getAttribute('unsafe-non-guideline-scale'),
+    ).toBe('1.5')
+  })
+
+  it('passes fixed-size attribute to pixiv-icon for hydration', () => {
+    const { container } = render(<Icon name="24/Add" fixedSize={100} />)
+    expect(queryIcon(container).getAttribute('fixed-size')).toBe('100')
+  })
+
+  it('adds charcoal-icon class', () => {
+    const { container } = render(<Icon name="24/Add" />)
+    expect(queryIcon(container).classList.contains('charcoal-icon')).toBe(true)
+  })
+
+  it('preserves user className alongside charcoal-icon', () => {
+    const { container } = render(<Icon name="24/Add" className="my-icon" />)
+    const el = queryIcon(container)
+    expect(el.classList.contains('charcoal-icon')).toBe(true)
+    expect(el.classList.contains('my-icon')).toBe(true)
+  })
+
+  it('merges user style with SSR CSS variable', () => {
+    const { container } = render(
+      <Icon name="24/Add" style={{ color: 'red' }} />,
+    )
+    const el = queryIcon(container)
+    expect(el.style.getPropertyValue('--charcoal-icon-size')).toBe('24px')
+    expect(el.style.color).toBe('red')
+  })
+
+  it('handles Inline icons', () => {
+    const { container } = render(<Icon name="Inline/Add" />)
+    expect(
+      queryIcon(container).style.getPropertyValue('--charcoal-icon-size'),
+    ).toBe('16px')
+  })
+
+  it('handles Inline icons with scale=2', () => {
+    const { container } = render(<Icon name="Inline/Add" scale={2} />)
+    expect(
+      queryIcon(container).style.getPropertyValue('--charcoal-icon-size'),
+    ).toBe('32px')
+  })
+})

package/src/components/Icon/index.tsx

@@ -1,30 +1,75 @@
 import * as React from 'react'
 
 import '@charcoal-ui/icons'
-import type { PixivIcon, Props } from '@charcoal-ui/icons'
+import '@charcoal-ui/icons/css/icon.css'
+import { calcActualSize } from '@charcoal-ui/icons'
+import type { IconSizing, PixivIcon, Props } from '@charcoal-ui/icons'
 
 export interface OwnProps {
+  /**
+   * @deprecated `fixedSize` を利用してください。
+   * `attr()` の数値解釈サポートが限定的なため、リセット CSS だけではレイアウトシフトが防げません。
+   */
   unsafeNonGuidelineScale?: number
+  /**
+   * 固定 px サイズで描画します。ガイドライン外のサイズを利用する場合に推奨される指定方法で、
+   * 他のサイズ指定 (`scale` / `unsafeNonGuidelineScale`) よりも常に優先されます。
+   *
+   * `<Icon>` は同じ値を `--charcoal-icon-size` インライン CSS 変数として自動付与するため、
+   * Web Component の hydrate 前後でレイアウトシフトは発生しません。
+   */
+  fixedSize?: number
   className?: string
 }
 
 export interface IconProps
   extends OwnProps,
     React.PropsWithoutRef<
-      Omit<Props, 'class' | 'unsafe-non-guideline-scale' | 'css'>
+      Omit<Props, 'class' | 'unsafe-non-guideline-scale' | 'fixed-size' | 'css'>
     > {}
 
 const Icon = React.forwardRef<PixivIcon, IconProps>(function IconInner(
-  { name, scale, unsafeNonGuidelineScale, className, ...rest },
+  {
+    name,
+    scale,
+    unsafeNonGuidelineScale,
+    fixedSize,
+    className,
+    style: userStyle,
+    ...rest
+  },
   ref,
 ) {
+  const actualSize = React.useMemo(
+    // IconSizing の排他制約は IconProps の型レベルで保証されるため、内部では緩和する
+    () =>
+      calcActualSize({
+        name,
+        scale,
+        unsafeNonGuidelineScale,
+        fixedSize,
+      } as { name: string } & IconSizing),
+    [name, scale, unsafeNonGuidelineScale, fixedSize],
+  )
+
+  const style = React.useMemo(
+    () =>
+      ({
+        ...userStyle,
+        '--charcoal-icon-size': `${actualSize}px`,
+      }) as React.CSSProperties,
+    [actualSize, userStyle],
+  )
+
   return (
     <pixiv-icon
       ref={ref}
       name={name}
       scale={scale}
       unsafe-non-guideline-scale={unsafeNonGuidelineScale}
-      class={className}
+      fixed-size={fixedSize}
+      style={style}
+      class={`charcoal-icon ${className || ''}`.trim()}
       {...rest}
     />
   )

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

@@ -13,7 +13,9 @@ exports[`Storybook Tests > react/IconButton > Default 1`] = `
       title="add"
     >
       <pixiv-icon
+        class="charcoal-icon"
         name="16/Add"
+        style="--charcoal-icon-size: 16px;"
       />
     </button>
   </div>
@@ -32,7 +34,9 @@ exports[`Storybook Tests > react/IconButton > IsActive 1`] = `
       data-variant="Default"
     >
       <pixiv-icon
+        class="charcoal-icon"
         name="16/Add"
+        style="--charcoal-icon-size: 16px;"
       />
     </button>
   </div>
@@ -51,7 +55,9 @@ exports[`Storybook Tests > react/IconButton > Overlay 1`] = `
       data-variant="Overlay"
     >
       <pixiv-icon
+        class="charcoal-icon"
         name="16/Add"
+        style="--charcoal-icon-size: 16px;"
       />
     </button>
   </div>

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

@@ -187,8 +187,9 @@ exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = `
                       Apple
                     </span>
                     <pixiv-icon
-                      class="charcoal-ui-dropdown-selector-icon"
+                      class="charcoal-icon charcoal-ui-dropdown-selector-icon"
                       name="16/Menu"
+                      style="--charcoal-icon-size: 16px;"
                     />
                   </button>
                 </div>
@@ -221,7 +222,9 @@ exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = `
             type="button"
           >
             <pixiv-icon
+              class="charcoal-icon"
               name="24/Close"
+              style="--charcoal-icon-size: 24px;"
             />
           </button>
         </div>
@@ -322,7 +325,9 @@ exports[`Storybook Tests > react/Modal > BottomSheet 1`] = `
             type="button"
           >
             <pixiv-icon
+              class="charcoal-icon"
               name="24/Close"
+              style="--charcoal-icon-size: 24px;"
             />
           </button>
         </div>
@@ -515,8 +520,9 @@ exports[`Storybook Tests > react/Modal > Default 1`] = `
                       Apple
                     </span>
                     <pixiv-icon
-                      class="charcoal-ui-dropdown-selector-icon"
+                      class="charcoal-icon charcoal-ui-dropdown-selector-icon"
                       name="16/Menu"
+                      style="--charcoal-icon-size: 16px;"
                     />
                   </button>
                 </div>
@@ -549,7 +555,9 @@ exports[`Storybook Tests > react/Modal > Default 1`] = `
             type="button"
           >
             <pixiv-icon
+              class="charcoal-icon"
               name="24/Close"
+              style="--charcoal-icon-size: 24px;"
             />
           </button>
         </div>
@@ -712,7 +720,9 @@ exports[`Storybook Tests > react/Modal > FullBottomSheet 1`] = `
             type="button"
           >
             <pixiv-icon
+              class="charcoal-icon"
               name="24/Close"
+              style="--charcoal-icon-size: 24px;"
             />
           </button>
         </div>