Spinnerの修正 - #115
Merged
Merged
Conversation
- Introduced a new `size` prop in the Spinner component to allow dynamic sizing via a range control in the storybook. - Updated the default size in the Spinner story to 6. - Modified the Spinner's className to include a default text color for better visibility. feat(tooltip): add Tooltip component with content and trigger - Implemented a new Tooltip component using Radix UI for displaying additional information. - Created TooltipContent and TooltipTrigger components for better structure and usage. - Added TypeScript types for props to enhance developer experience and type safety.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
このPRはSpinnerコンポーネントの修正とTooltipコンポーネントの追加を含む包括的な更新を行っています。主にUI改善とコンポーネントライブラリの拡張に焦点を当てています。
- Spinnerコンポーネントの視認性向上とStorybook設定の改善
- 新しいTooltipコンポーネントの実装とRadix UIの活用
- registryファイルの整理と更新
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/ui/spinner/index.tsx | デフォルトテキスト色（text-text-low）を追加して視認性を向上 |
| src/components/ui/spinner/index.stories.tsx | StorybookのargTypes設定をsize propのrange controlに変更し、デフォルト値を6に設定 |
| registry.json | コンポーネント定義の整理とTooltipコンポーネントの追加 |
| public/r/tooltip.json | Radix UIベースの新しいTooltipコンポーネントの実装 |
| public/r/spinner.json | Spinnerコンポーネントのtext-text-lowクラス追加を反映 |
| public/r/registry.json | メインregistryファイルとの同期更新 |
| "type": "registry:component", | ||
| "title": "Tooltip", | ||
| "description": "ツールチップは情報を一時的に補足するために使用するコンポーネントです。", | ||
| "dependencies": [], |
There was a problem hiding this comment.
The Tooltip component uses Radix UI (as shown in the imports), but the dependencies array is empty. It should include "@radix-ui/react-tooltip" as a dependency.
| "files": [ | ||
| { | ||
| "path": "src/components/ui/tooltip/index.tsx", | ||
| "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * TooltipContentコンポーネントのプロパティ型\n * en: Props type for TooltipContent component\n */\ninterface TooltipContentProps\n extends React.ComponentProps<typeof TooltipPrimitive.Content> {\n /**\n * ツールチップの表示位置を指定します。\n * en: Specifies the position of the tooltip (top, right, bottom, left).\n */\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\n /**\n * トリガー要素とツールチップの間の距離を指定します。\n * en: Specifies the distance between the trigger element and the tooltip.\n */\n sideOffset?: number;\n}\n\n/**\n * TooltipProvider コンポーネント\n * en: TooltipProvider component\n */\nfunction TooltipProvider({\n delayDuration = 0,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n return (\n <TooltipPrimitive.Provider\n data-slot=\"tooltip-provider\"\n delayDuration={delayDuration}\n {...props}\n />\n );\n}\n\n/**\n * Tooltip コンポーネント\n * en: Tooltip component\n */\nfunction Tooltip({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipProvider>\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n </TooltipProvider>\n );\n}\n\n/**\n * TooltipTrigger コンポーネント\n * en: TooltipTrigger component\n */\nfunction TooltipTrigger({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\n/**\n * **概要 / Overview**\n *\n * - ツールチップは情報を一時的に補足するために使用するコンポーネントです。\n * - en: The Tooltip component is used to provide additional information temporarily.\n *\n * **使用例 / Usage Example**\n *\n * ```tsx\n * <Tooltip>\n * <TooltipTrigger>Tooltip Trigger</TooltipTrigger>\n * <TooltipContent>Tooltip Content</TooltipContent>\n * </Tooltip>\n * ```\n *\n * @param {ButtonProps} props\n */\nfunction TooltipContent({\n className,\n side = \"top\",\n sideOffset = 0,\n children,\n ...props\n}: TooltipContentProps) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n data-slot=\"tooltip-content\"\n side={side}\n sideOffset={sideOffset}\n className={cn(\n \"bg-neutral-900 shadow-float animate-in fade-in-0 zoom-in-95\",\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\n \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n \"z-50 w-fit origin-[--radix-tooltip-content-transform-origin] rounded-notice\",\n \"px-2 py-1 character-2-regular-pro text-white\",\n className\n )}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"bg-neutral-900 fill-neutral-900 shadow-float z-50 size-3 translate-y-[calc(-50%_-_1px)] rotate-45 rounded-xs\" />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n", |
There was a problem hiding this comment.
The import statement 'import { Tooltip as TooltipPrimitive } from "radix-ui";' is incorrect. It should be 'import * as TooltipPrimitive from "@radix-ui/react-tooltip";' to properly import Radix UI tooltip components.
| "files": [ | ||
| { | ||
| "path": "src/components/ui/tooltip/index.tsx", | ||
| "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * TooltipContentコンポーネントのプロパティ型\n * en: Props type for TooltipContent component\n */\ninterface TooltipContentProps\n extends React.ComponentProps<typeof TooltipPrimitive.Content> {\n /**\n * ツールチップの表示位置を指定します。\n * en: Specifies the position of the tooltip (top, right, bottom, left).\n */\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\n /**\n * トリガー要素とツールチップの間の距離を指定します。\n * en: Specifies the distance between the trigger element and the tooltip.\n */\n sideOffset?: number;\n}\n\n/**\n * TooltipProvider コンポーネント\n * en: TooltipProvider component\n */\nfunction TooltipProvider({\n delayDuration = 0,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n return (\n <TooltipPrimitive.Provider\n data-slot=\"tooltip-provider\"\n delayDuration={delayDuration}\n {...props}\n />\n );\n}\n\n/**\n * Tooltip コンポーネント\n * en: Tooltip component\n */\nfunction Tooltip({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipProvider>\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n </TooltipProvider>\n );\n}\n\n/**\n * TooltipTrigger コンポーネント\n * en: TooltipTrigger component\n */\nfunction TooltipTrigger({\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\n/**\n * **概要 / Overview**\n *\n * - ツールチップは情報を一時的に補足するために使用するコンポーネントです。\n * - en: The Tooltip component is used to provide additional information temporarily.\n *\n * **使用例 / Usage Example**\n *\n * ```tsx\n * <Tooltip>\n * <TooltipTrigger>Tooltip Trigger</TooltipTrigger>\n * <TooltipContent>Tooltip Content</TooltipContent>\n * </Tooltip>\n * ```\n *\n * @param {ButtonProps} props\n */\nfunction TooltipContent({\n className,\n side = \"top\",\n sideOffset = 0,\n children,\n ...props\n}: TooltipContentProps) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n data-slot=\"tooltip-content\"\n side={side}\n sideOffset={sideOffset}\n className={cn(\n \"bg-neutral-900 shadow-float animate-in fade-in-0 zoom-in-95\",\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\n \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n \"z-50 w-fit origin-[--radix-tooltip-content-transform-origin] rounded-notice\",\n \"px-2 py-1 character-2-regular-pro text-white\",\n className\n )}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"bg-neutral-900 fill-neutral-900 shadow-float z-50 size-3 translate-y-[calc(-50%_-_1px)] rotate-45 rounded-xs\" />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n", |
There was a problem hiding this comment.
The JSDoc comment incorrectly references 'ButtonProps' for the TooltipContent component. It should reference 'TooltipContentProps' instead.
- Sizeコンポーネントのrender関数をargsを使用するように変更 - Spinnerコンポーネントのサイズを動的に設定
5 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
sizeprop in the Spinner component to allow dynamic sizing via a range control in the storybook.feat(tooltip): add Tooltip component with content and trigger
概要
以下の指摘の修正と調整
https://www.notion.so/goodpatch-design-div/Spinner-f909cf8005bb4beeb715ccac69f99e95?source=copy_link
変更内容
動作確認
pnpm lintを実行pnpm build:packageを実行してプロジェクトが正常にビルドされることを確認pnpm testを実行してテストがすべて成功することを確認関連 Issue