Merge pull request #116 from 8845musign/improve-children-prop

improve children prop
ubie-oss · Jun 29, 2024 · 52b8184 · 52b8184
2 parents f7c339b + 1ef59ec
commit 52b8184
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 22 deletions.
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -2,13 +2,17 @@
 
 import { ArrowBDownIcon } from '@ubie/ubie-icons';
 import clsx from 'clsx';
-import { FC, PropsWithChildren } from 'react';
 import styles from './Accordion.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes';
+import type { FC, ReactNode } from 'react';
 
 export type Size = 'small' | 'medium';
 
 type Props = {
+  /**
+   * コンテンツとして表示する内容。開閉で表示・非表示が切り替わる
+   */
+  children: ReactNode;
   /**
    * 見出しに表示するテキスト
    */
@@ -32,15 +36,7 @@ type Props = {
   initialOpen?: boolean;
 } & CustomDataAttributeProps;
 
-export const Accordion: FC<PropsWithChildren<Props>> = ({
-  header,
-  children,
-  size = 'medium',
-  id,
-  buttonId,
-  initialOpen,
-  ...props
-}) => {
+export const Accordion: FC<Props> = ({ header, children, size = 'medium', id, buttonId, initialOpen, ...props }) => {
   return (
     <details className={clsx(styles.container, styles[size])} id={id} {...props} open={initialOpen}>
       <summary id={buttonId} className={styles.button}>

diff --git a/src/components/ActionHalfModal/ActionHalfModal.tsx b/src/components/ActionHalfModal/ActionHalfModal.tsx
@@ -2,7 +2,7 @@
 
 import { Dialog, Transition } from '@headlessui/react';
 import { clsx } from 'clsx';
-import { FC, Fragment, PropsWithChildren, ReactNode, useCallback, useRef } from 'react';
+import { type FC, Fragment, type ReactNode, useCallback, useRef } from 'react';
 import styles from './ActionHalfModal.module.css';
 import { VisuallyHidden } from '../../sharedComponents/VisuallyHidden/VisuallyHidden';
 import { CustomDataAttributeProps } from '../../types/attributes';
@@ -13,6 +13,10 @@ import { Button } from '../Button/Button';
 type Opacity = 'normal' | 'darker';
 
 type BaseProps = {
+  /**
+   * コンテンツとして表示する内容
+   */
+  children: ReactNode;
   /**
    * 閉じるアクションが実行された場合のコールバック
    */
@@ -98,7 +102,7 @@ type SecondaryActionProps = {
 
 type Props = BaseProps & AllOrNone<PrimaryActionProps> & AllOrNone<SecondaryActionProps> & CustomDataAttributeProps;
 
-export const ActionHalfModal: FC<PropsWithChildren<Props>> = ({
+export const ActionHalfModal: FC<Props> = ({
   children,
   onClose,
   onPrimaryAction,

diff --git a/src/components/ActionModal/ActionModal.tsx b/src/components/ActionModal/ActionModal.tsx
@@ -2,7 +2,7 @@
 
 import { Dialog, Transition } from '@headlessui/react';
 import clsx from 'clsx';
-import { FC, Fragment, PropsWithChildren, type ReactNode, useCallback, useRef } from 'react';
+import { type FC, Fragment, type ReactNode, useCallback, useRef } from 'react';
 import styles from './ActionModal.module.css';
 import { Button } from '../../';
 import { VisuallyHidden } from '../../sharedComponents/VisuallyHidden/VisuallyHidden';
@@ -13,6 +13,10 @@ import { AllOrNone } from '../../utils/types';
 type Opacity = 'normal' | 'darker';
 
 type BaseProps = {
+  /**
+   * コンテンツとして表示する内容
+   */
+  children: ReactNode;
   /**
    * 閉じるアクションが実行された場合のコールバック
    */
@@ -88,7 +92,7 @@ type SecondaryActionProps = {
   secondaryActionLabel: string;
 };
 
-type Props = PropsWithChildren<BaseProps> & AllOrNone<SecondaryActionProps> & CustomDataAttributeProps;
+type Props = BaseProps & AllOrNone<SecondaryActionProps> & CustomDataAttributeProps;
 
 export const ActionModal: FC<Props> = ({
   children,

diff --git a/src/components/Bold/Bold.tsx b/src/components/Bold/Bold.tsx
@@ -1,8 +1,14 @@
-import { type FC, PropsWithChildren } from 'react';
+import { type FC, type ReactNode } from 'react';
 import styles from './Bold.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes';
 
 type Props = {
+  /**
+   * 太字にするテキスト
+   * <p>や<div>などを子要素に指定しないでください（文法的にNGです）
+   *
+   */
+  children: ReactNode;
   /**
    * レンダリングされる要素
    * @default span
@@ -14,7 +20,7 @@ type Props = {
   id?: string;
 } & CustomDataAttributeProps;
 
-export const Bold: FC<PropsWithChildren<Props>> = ({ as = 'span', children, id, ...otherProps }) => {
+export const Bold: FC<Props> = ({ as = 'span', children, id, ...otherProps }) => {
   const BoldComponent = as;
 
   return (

diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
@@ -24,9 +24,13 @@ import type {
   NoteFontSize,
   NoteLeading,
 } from '../../types/style';
-import type { CSSProperties, FC, PropsWithChildren } from 'react';
+import type { CSSProperties, FC, ReactNode } from 'react';
 
 type BaseProps = {
+  /**
+   * Box内に表示するコンテンツやコンポーネント
+   */
+  children?: ReactNode;
   /**
    * レンダリングされるHTML要素
    * @default div
@@ -160,7 +164,7 @@ export const textStyleVariables = ({
 
 const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
 
-export const Box: FC<PropsWithChildren<PropsWithoutText | PropsWithTextBody | PropsWithTextNote>> = ({
+export const Box: FC<PropsWithoutText | PropsWithTextBody | PropsWithTextNote> = ({
   as: BoxComponent = 'div',
   children,
   p,

diff --git a/src/components/Button/ButtonTypes.ts b/src/components/Button/ButtonTypes.ts
@@ -3,6 +3,10 @@ import type { MarginProps } from '../../types/style';
 import type { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, ReactElement } from 'react';
 
 export type BaseProps = {
+  /**
+   * ボタンのラベルとして表示する内容
+   */
+  children: ReactNode;
   /**
    * ボタンの種類
    * @default primary
@@ -68,10 +72,13 @@ export type OnlyLinkButtonProps = {
 
 export type ButtonProps = Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
-  'className' | keyof BaseProps | keyof OnlyButtonProps
+  'children' | 'className' | keyof BaseProps | keyof OnlyButtonProps
 > &
   BaseProps &
   OnlyButtonProps;
-export type LinkButtonProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | keyof BaseProps> &
+export type LinkButtonProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  'children' | 'className' | keyof BaseProps
+> &
   BaseProps &
   OnlyLinkButtonProps;
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { FC, PropsWithChildren } from 'react';
+import { FC, type ReactNode } from 'react';
 import styles from './Text.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes';
 import {
@@ -20,6 +20,11 @@ import {
 import { HTMLTagname } from '../../utils/types';
 
 type BaseProps = {
+  /**
+   * 表示するテキスト
+   * pやdivなどを含めないでください（文法的にNGです）
+   */
+  children: ReactNode;
   /**
    * コンポーネントのHTML要素
    * @default p
@@ -135,7 +140,7 @@ type TextProps = BodyProps | HeadingProps | NoteProps | ButtonProps | TagProps;
 /**
  * Design Systemに則ったTypographyのスタイルを提供
  */
-export const Text: FC<PropsWithChildren<TextProps>> = ({
+export const Text: FC<TextProps> = ({
   as: TextComponent = 'p',
   size = 'md',
   type = 'body',