@charcoal-ui/react 6.0.0-rc.6 → 6.0.0-rc.7

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

@@ -16,25 +16,18 @@ const makeSampleImages = (style: CSSProperties) =>
     />
   ))
 
-// M 用: スライド間隔はコンポーネントが所有しないので、利用者側の margin で注入する。
-// width: 100% と margin の併用はラッパーとの循環サイズ解決で間隔が潰れるため、明示サイズにする。
-const spacedImages = makeSampleImages({
-  width: 280,
-  height: 210,
-  marginInlineEnd: 24,
-})
+// M 用: スライド間隔は gap prop で注入する（既定 args の gap: 24）。
+const spacedImages = makeSampleImages({ width: 280, height: 210 })
 // S 用: 1 枚全幅ページングのため間隔なし
 const fullWidthImages = makeSampleImages({ width: '100%', height: '100%' })
 
 // 横幅が確定したスロット（defaultScroll の初期位置計算と 0.75 ページ送りを確認するため）。
-// スライド間隔はコンポーネントが所有しないので、利用者側の margin で注入する。
 const numberedSlides = Array.from({ length: 20 }, (_, i) => (
   <div
     key={`num-${i + 1}`}
     style={{
       width: 200,
       height: 120,
-      marginInlineEnd: 24,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -60,6 +53,7 @@ export default {
     hasGradient: false,
     fullWidth: false,
     scrollStep: 0.75,
+    gap: 24,
   },
   argTypes: {
     children: { control: false },
@@ -80,6 +74,10 @@ export default {
       // Controls では数値（比率）のみ操作可能。関数形式は ScrollStepFunction story を参照。
       control: { type: 'range', min: 0.1, max: 1.5, step: 0.05 },
     },
+    gap: {
+      // number は px。'1rem' などの CSS 値文字列も渡せる。
+      control: { type: 'number' },
+    },
   },
 } satisfies Meta<typeof Carousel>
 
@@ -88,7 +86,7 @@ export const SizeM: StoryObj<typeof Carousel> = {
 }
 
 export const SizeS: StoryObj<typeof Carousel> = {
-  args: { size: 'S', children: fullWidthImages },
+  args: { size: 'S', children: fullWidthImages, gap: 0 },
 }
 
 export const WithGradient: StoryObj<typeof Carousel> = {
@@ -100,7 +98,12 @@ export const FullWidth: StoryObj<typeof Carousel> = {
 }
 
 export const NavigationButtonsOnSizeS: StoryObj<typeof Carousel> = {
-  args: { size: 'S', navigationButtons: true, children: fullWidthImages },
+  args: {
+    size: 'S',
+    navigationButtons: true,
+    children: fullWidthImages,
+    gap: 0,
+  },
 }
 
 export const IndicatorOnSizeM: StoryObj<typeof Carousel> = {
@@ -140,7 +143,6 @@ const darkTiles = Array.from({ length: 10 }, (_, i) => (
     style={{
       width: 220,
       height: 140,
-      marginInlineEnd: 24,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',

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

@@ -92,6 +92,30 @@ describe('Carousel', () => {
     })
   })
 
+  describe('gap', () => {
+    it('sets --charcoal-carousel-gap in px when gap is a number', () => {
+      const { container } = render(<Carousel gap={24}>{slides}</Carousel>)
+      const root = container.querySelector('.charcoal-carousel') as HTMLElement
+      expect(root.style.getPropertyValue('--charcoal-carousel-gap')).toBe(
+        '24px',
+      )
+    })
+
+    it('passes string gap values through as-is', () => {
+      const { container } = render(<Carousel gap="1rem">{slides}</Carousel>)
+      const root = container.querySelector('.charcoal-carousel') as HTMLElement
+      expect(root.style.getPropertyValue('--charcoal-carousel-gap')).toBe(
+        '1rem',
+      )
+    })
+
+    it('does not set the custom property when gap is not specified', () => {
+      const { container } = render(<Carousel>{slides}</Carousel>)
+      const root = container.querySelector('.charcoal-carousel') as HTMLElement
+      expect(root.style.getPropertyValue('--charcoal-carousel-gap')).toBe('')
+    })
+  })
+
   describe('Size M (default)', () => {
     it('shows navigation buttons', () => {
       render(<Carousel size="M">{slides}</Carousel>)

package/src/components/Carousel/index.tsx

@@ -7,9 +7,11 @@ import {
   memo,
   useCallback,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
   useSyncExternalStore,
+  type CSSProperties,
   type ReactNode,
 } from 'react'
 import { mergeProps, useFocusRing, useKeyboard } from 'react-aria'
@@ -67,6 +69,8 @@ export type CarouselProps = Readonly<{
   onResize?: (width: number) => void
   onScrollStateChange?: (canScroll: boolean) => void
   defaultScroll?: { align?: ScrollAlign; offset?: number }
+  // スライド間隔。number は px、string は CSS 値をそのまま使う。未指定は間隔なし。
+  gap?: number | string
   // 1 直接子要素 = 1 スライド（react-sandbox 互換）。
   children: ReactNode
 }>
@@ -147,6 +151,7 @@ const Carousel = forwardRef<CarouselHandlerRef, CarouselProps>(function Render(
     onResize,
     onScrollStateChange,
     defaultScroll: { align = 'left', offset = 0 } = {},
+    gap,
     children,
     ...props
   }: CarouselProps,
@@ -213,10 +218,22 @@ const Carousel = forwardRef<CarouselHandlerRef, CarouselProps>(function Render(
   const { focusProps: rootFocusProps, isFocusVisible: rootFocusVisible } =
     useFocusRing({ within: true })
 
+  // gap 宣言自体は index.css 側に置き、ここでは CSS 変数の値だけを注入する。
+  const gapStyle = useMemo(
+    () =>
+      ({
+        ...(gap != null && {
+          '--charcoal-carousel-gap': typeof gap === 'number' ? `${gap}px` : gap,
+        }),
+      }) satisfies CSSProperties,
+    [gap],
+  )
+
   return (
     <div
       {...rootFocusProps}
       className={className}
+      style={gapStyle}
       data-size={size}
       data-has-gradient={hasGradient}
       data-full-width={fullWidth}

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

@@ -0,0 +1,38 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { forwardRef } from 'react'
+import TagItem from '.'
+
+describe('TagItem', () => {
+  it('preserves link props on a custom link component', () => {
+    const NextLink = forwardRef<
+      HTMLAnchorElement,
+      React.ComponentPropsWithoutRef<'a'>
+    >(function NextLink({ children, ...props }, ref) {
+      return (
+        <a ref={ref} {...props}>
+          {children}
+        </a>
+      )
+    })
+
+    const onClick = vi.fn()
+
+    render(
+      <TagItem
+        component={NextLink}
+        href="/tags/girl"
+        label="#girl"
+        target="_blank"
+        onClick={onClick}
+      />,
+    )
+
+    const link = screen.getByRole('link')
+
+    expect(link).toHaveAttribute('href', '/tags/girl')
+    expect(link).toHaveAttribute('target', '_blank')
+
+    fireEvent.click(link)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})

package/src/components/TagItem/index.tsx

@@ -61,6 +61,7 @@ const TagItem = forwardRef<HTMLAnchorElement, TagItemProps>(
 
     const { linkProps } = useLink(
       {
+        ...props,
         isDisabled: disabled,
         elementType: typeof Component === 'string' ? Component : 'a',
       },

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

@@ -30,6 +30,10 @@
   box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
 }
 
+.charcoal-text-area-container:has([data-no-bottom-padding='true']) {
+  height: calc(22px * (var(--charcoal-text-area-rows) + 1) + 18px);
+}
+
 .charcoal-text-area-container:not([aria-disabled='true']):hover {
   background-color: var(--charcoal-color-container-secondary-hover-a);
 }
@@ -47,13 +51,26 @@
   box-sizing: border-box;
 
   /* Prevent zooming for iOS Safari */
+  --charcoal-textarea-safari-prevent-zoom-scale: 0.875;
+  --charcoal-textarea-line-height: calc(
+    22px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+  --charcoal-textarea-padding-y: calc(
+    8px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+  --charcoal-textarea-padding-x: calc(
+    9px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
   transform-origin: top left;
-  transform: scale(0.875);
-  width: calc(100% / 0.875);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px);
+  transform: scale(var(--charcoal-textarea-safari-prevent-zoom-scale));
+  width: calc(100% / var(--charcoal-textarea-safari-prevent-zoom-scale));
+  font-size: calc(14px / var(--charcoal-textarea-safari-prevent-zoom-scale));
+  line-height: var(--charcoal-textarea-line-height);
+  padding: var(--charcoal-textarea-padding-y) var(--charcoal-textarea-padding-x);
+  height: calc(
+    var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
+      var(--charcoal-textarea-padding-y) * 2
+  );
 
   /* Display box-shadow for iOS Safari */
   appearance: none;
@@ -61,8 +78,12 @@
 }
 
 .charcoal-text-area-textarea[data-no-bottom-padding='true'] {
-  padding: calc(9px / 0.875) calc(8px / 0.875) 0;
-  height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
+  padding: var(--charcoal-textarea-padding-y)
+      var(--charcoal-textarea-padding-x) 0;
+  height: calc(
+      var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
+        var(--charcoal-textarea-padding-y)
+    );
 }
 
 .charcoal-text-area-textarea::placeholder {

package/src/components/TextArea/index.css

@@ -32,6 +32,10 @@
     box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
   }
 
+  &:has([data-no-bottom-padding='true']) {
+    height: calc(22px * (var(--charcoal-text-area-rows) + 1) + 18px);
+  }
+
   &:not([aria-disabled='true']):hover {
     background-color: var(--charcoal-color-container-secondary-hover-a);
   }
@@ -50,13 +54,27 @@
   box-sizing: border-box;
 
   /* Prevent zooming for iOS Safari */
+  --charcoal-textarea-safari-prevent-zoom-scale: 0.875;
+  --charcoal-textarea-line-height: calc(
+    22px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+  --charcoal-textarea-padding-y: calc(
+    8px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+  --charcoal-textarea-padding-x: calc(
+    9px / var(--charcoal-textarea-safari-prevent-zoom-scale)
+  );
+
   transform-origin: top left;
-  transform: scale(0.875);
-  width: calc(100% / 0.875);
-  font-size: calc(14px / 0.875);
-  line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) calc(8px / 0.875);
-  height: calc(22px / 0.875 * var(--charcoal-text-area-rows) + 20px);
+  transform: scale(var(--charcoal-textarea-safari-prevent-zoom-scale));
+  width: calc(100% / var(--charcoal-textarea-safari-prevent-zoom-scale));
+  font-size: calc(14px / var(--charcoal-textarea-safari-prevent-zoom-scale));
+  line-height: var(--charcoal-textarea-line-height);
+  padding: var(--charcoal-textarea-padding-y) var(--charcoal-textarea-padding-x);
+  height: calc(
+    var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
+      var(--charcoal-textarea-padding-y) * 2
+  );
 
   /* Display box-shadow for iOS Safari */
   appearance: none;
@@ -64,8 +82,12 @@
   background: none;
 
   &[data-no-bottom-padding='true'] {
-    padding: calc(9px / 0.875) calc(8px / 0.875) 0;
-    height: calc(22px / 0.875 * (var(--charcoal-text-area-rows) - 1) + 9px);
+    padding: var(--charcoal-textarea-padding-y)
+      var(--charcoal-textarea-padding-x) 0;
+    height: calc(
+      var(--charcoal-textarea-line-height) * var(--charcoal-text-area-rows) +
+        var(--charcoal-textarea-padding-y)
+    );
   }
 
   &::placeholder {

package/src/components/TextArea/index.tsx

@@ -206,7 +206,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           aria-invalid={invalid === true}
           ref={containerRef}
           style={{
-            '--charcoal-text-area-rows': `${showCount ? rows + 1 : rows}`,
+            '--charcoal-text-area-rows': rows,
           }}
         >
           <textarea