feat(components): introducing the color picker #5045
Conversation
🦋 Changeset detectedLatest commit: 7cc322b The changes in this PR will be included in the next version bump. This PR includes changesets to release 14 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@MustafaHasanat is attempting to deploy a commit to the HeroUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis pull request introduces a new Color Picker feature. A dedicated package is added that includes the component implementation, documentation, build configuration, and Storybook examples. Additionally, dependency versions are updated, and the new component is integrated into both the core React and theme packages via exports. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Storybook
participant Application
participant ColorPicker
User->>Storybook: Open Storybook interface
Storybook->>ColorPicker: Render "Default" story
User->>Application: Use ColorPicker in application
Application->>ColorPicker: Render component
ColorPicker-->>Application: Return UI element
Assessment against linked issues
Suggested reviewers
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (7)
packages/components/color-picker/README.md (1)
17-17: Minor grammar issue in contribution sectionConsider adding a comma after "Yes" for better readability.
-Yes please! See the +Yes, please! See the🧰 Tools
🪛 LanguageTool
[typographical] ~17-~17: Usually, a comma is necessary before ‘Yes’ at the end of a sentence. Did you mean “, please”?
Context: ...i/color-picker ``` ## Contribution Yes please! See the [contributing guidelines](http...(COMMA_BEFORE_PLEASE)
packages/components/color-picker/src/index.ts (1)
4-5: Empty hooks export sectionThe hooks export section is included but empty. If there are no hooks to export, consider removing this section or adding a TODO comment if hooks are planned for future implementation.
packages/core/theme/src/components/color-picker.ts (1)
6-7: Add documentation to the component.The JSDoc comment block is empty. Consider adding comprehensive documentation that explains the purpose of the component, its usage, and available variants.
/** + * A color picker component that allows users to select colors. + * + * @example + * ```tsx + * <ColorPicker /> + * ``` */packages/components/color-picker/stories/color-picker.stories.tsx (1)
36-40: Enhance the Default story with actual color picker functionality.The Default story doesn't demonstrate any color selection functionality. Consider adding a more comprehensive example that shows the component in action.
export const Default = { args: { ...defaultProps, + defaultColor: "#6366F1", + onColorChange: (color) => console.log("Color changed:", color) }, };packages/components/color-picker/src/color-picker.tsx (1)
1-1: Remove unnecessary eslint-disable comment.This eslint-disable comment for unused variables should be removed once you've implemented the actual component logic, or kept only if there's a specific reason.
-/* eslint-disable @typescript-eslint/no-unused-vars */packages/components/color-picker/package.json (2)
4-4: Add a description for the package.The description field is empty. Add a concise description of what the color picker package does.
- "description": "", + "description": "A color picker component for HeroUI that allows users to select and customize colors in various formats",
3-3: Consider using a more appropriate initial version.The package is using version 1.0.0 but the implementation is currently minimal. Consider starting with 0.1.0 to indicate that this is an initial version that will be enhanced.
- "version": "1.0.0", + "version": "0.1.0",
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (12)
.changeset/real-eyes-draw.md(1 hunks)packages/components/color-picker/README.md(1 hunks)packages/components/color-picker/package.json(1 hunks)packages/components/color-picker/src/color-picker.tsx(1 hunks)packages/components/color-picker/src/index.ts(1 hunks)packages/components/color-picker/stories/color-picker.stories.tsx(1 hunks)packages/components/color-picker/tsconfig.json(1 hunks)packages/components/color-picker/tsup.config.ts(1 hunks)packages/core/react/package.json(1 hunks)packages/core/react/src/index.ts(1 hunks)packages/core/theme/src/components/color-picker.ts(1 hunks)packages/core/theme/src/components/index.ts(1 hunks)
🧰 Additional context used
🪛 LanguageTool
packages/components/color-picker/README.md
[typographical] ~17-~17: Usually, a comma is necessary before ‘Yes’ at the end of a sentence. Did you mean “, please”?
Context: ...i/color-picker ``` ## Contribution Yes please! See the [contributing guidelines](http...
(COMMA_BEFORE_PLEASE)
🪛 Biome (1.9.4)
packages/components/color-picker/src/color-picker.tsx
[error] 4-4: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
🔇 Additional comments (9)
packages/core/theme/src/components/index.ts (1)
46-46: New color-picker component properly integratedThe export of the color-picker component has been correctly added to the components index file, making it available for use with the theme system. This integration follows the established pattern for other components in the library.
.changeset/real-eyes-draw.md (1)
1-7: Appropriate version bumps for color-picker introductionThe version changes look appropriate:
- Major version for the new
@heroui/color-pickerpackage- Minor version for
@heroui/reactas this adds a non-breaking featureThe changeset description clearly indicates the purpose of these changes.
packages/core/react/package.json (1)
94-94: Dependency correctly added to the package.jsonThe
@heroui/color-pickerdependency has been properly added to the dependencies list with the correct workspace reference format, consistent with how other component dependencies are specified in this file.packages/components/color-picker/tsup.config.ts (1)
1-8: Build configuration follows project standardsThe tsup configuration follows the project's standard pattern:
- Properly cleans output before builds
- Targets ES2019 for compatibility
- Outputs both CommonJS and ES Modules formats
- Includes the necessary "use client" banner for React Server Components compatibility
This configuration ensures the color-picker component will build correctly and be compatible with various environments.
packages/components/color-picker/README.md (1)
5-5: Verify documentation linkThe documentation link points to a specific page for the color picker component. Please ensure this URL will be valid when the component is published.
packages/core/react/src/index.ts (1)
52-52: Export integration looks goodThe color-picker component is correctly exported following the same pattern as other components in the package.
packages/components/color-picker/src/index.ts (1)
1-7: Export structure follows project conventionsThe export structure correctly separates types, hooks, and component exports, maintaining consistency with other components in the codebase.
packages/components/color-picker/tsconfig.json (1)
1-11: TypeScript configuration looks goodThe tsconfig.json file properly extends the base configuration and includes appropriate compiler options for the color-picker component.
packages/components/color-picker/package.json (1)
42-48: Verify React Aria dependencies usage.The package includes React Aria dependencies but they aren't being used in the current implementation. Make sure to utilize these libraries for accessibility when implementing the actual color picker functionality.
Consider implementing a custom hook that leverages these dependencies to ensure the color picker is fully accessible:
import { useFocusRing } from "@react-aria/focus"; import { useHover } from "@react-aria/interactions"; import { mergeProps } from "@react-aria/utils"; function useColorPicker(props) { const { focusProps, isFocusVisible } = useFocusRing(); const { hoverProps, isHovered } = useHover({}); // Implement color picker logic here return { colorPickerProps: mergeProps(focusProps, hoverProps), isFocusVisible, isHovered }; }
packages/components/color-picker/stories/color-picker.stories.tsx
Outdated
Show resolved
Hide resolved
|
I built the basics of the component to check if it is accepted or not. If yes, I will start working on the component. |
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (6)
packages/components/color-picker/README.md (1)
1-27: Package documentation looks good, but needs a small grammatical fixThe README provides clear information about the component, installation instructions, contribution guidelines, and licensing. However, there's a small grammatical issue to fix.
-Yes please! See the +Yes, please! See the🧰 Tools
🪛 LanguageTool
[typographical] ~19-~19: Usually, a comma is necessary before ‘Yes’ at the end of a sentence. Did you mean “, please”?
Context: ...i/color-picker ``` ## Contribution Yes please! See the [contributing guidelines](http...(COMMA_BEFORE_PLEASE)
packages/components/color-picker/stories/color-picker.stories.tsx (1)
37-46: Consider adding more stories to showcase component variantsThe current implementation only includes a Default story. Adding more stories would better showcase the component's capabilities and provide better documentation for users.
Consider adding stories for different variants (solid, bordered, light), sizes, and colors to demonstrate the component's full range of options. For example:
export const Bordered = { args: { ...defaultProps, variant: "bordered", }, }; export const Small = { args: { ...defaultProps, size: "sm", }, }; export const Primary = { args: { ...defaultProps, color: "primary", }, };packages/components/color-picker/src/color-picker.tsx (2)
1-2: Remove or replace eslint-disable comment with a more specific directiveThe eslint-disable comment is very broad. If there are specific variables that are unused, it's better to use a more targeted approach.
-/* eslint-disable @typescript-eslint/no-unused-vars */ +// If specific variables are unused, use more targeted disabling: +// /* eslint-disable @typescript-eslint/no-unused-vars -- explanation */
28-41: Improve accessibility with proper ARIA attributes for color inputThe color picker should have appropriate ARIA attributes to ensure it's accessible to users with disabilities.
<Input endContent={ <Tooltip {...getTooltipButtonProps()}> <Button startContent={<CopyDocumentBulkIcon onClick={handleCopyToClipboard} />} + aria-label="Copy color code to clipboard" {...getCopyButtonProps()} /> </Tooltip> } startContent={ <div slot="inner-wrapper" {...getInnerWrapperProps()}> - <input {...getColorInputProps()} /> + <input + {...getColorInputProps()} + aria-label="Color value" + /> <span className="font-bold text-xl">#</span> </div> } {...getColorPickerProps()} />packages/components/color-picker/src/use-color-picker.tsx (2)
43-59: Support shorthand hex colors for better user experience.The color picker currently enforces a 6-character hex code with fixed minLength and maxLength constraints. Supporting shorthand hex codes (e.g., "#FFF") would improve user experience.
const getColorPickerProps = (): InputProps => { return { className: slots.base({class: baseStyles}), value: colorValue.replace("#", ""), - maxLength: 6, - minLength: 6, + // Allow both 3 and 6 character hex codes + maxLength: 6, classNames: { input: "w-16 font-medium text-md me-2", inputWrapper: "p-2", label: "hidden", }, radius: "sm", onValueChange(value) { - setColorValue(`#${value.replace("#", "")}`); + // Clean the input and allow 3 or 6 character hex codes + const hexValue = value.replace(/[^0-9A-Fa-f]/g, ""); + // Ensure we have a proper hex color format + setColorValue(`#${hexValue}`); }, }; };
62-68: Make button styling more configurable through props.The copy button has hardcoded styling values that might not fit all design contexts. Making these configurable would enhance flexibility.
export interface UseColorPickerProps extends HTMLHeroUIProps, ColorPickerVariantProps { // existing props + /** + * Props for the copy button + */ + copyButtonProps?: Partial<ButtonProps>; } // In the hook implementation const getCopyButtonProps = (): ButtonProps => { + const defaultButtonProps = { + isIconOnly: true, + className: "p-0 size-7 min-w-7", + radius: "sm", + variant: "bordered", + }; + + return { + ...defaultButtonProps, + ...(props.copyButtonProps || {}), + }; };
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
.changeset/thick-ravens-crash.md(1 hunks)packages/components/color-picker/README.md(1 hunks)packages/components/color-picker/package.json(1 hunks)packages/components/color-picker/src/color-picker.tsx(1 hunks)packages/components/color-picker/src/use-color-picker.tsx(1 hunks)packages/components/color-picker/stories/color-picker.stories.tsx(1 hunks)packages/components/color-picker/tsconfig.json(1 hunks)packages/core/theme/src/components/color-picker.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- .changeset/thick-ravens-crash.md
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/components/color-picker/tsconfig.json
- packages/components/color-picker/package.json
🧰 Additional context used
🪛 LanguageTool
packages/components/color-picker/README.md
[typographical] ~19-~19: Usually, a comma is necessary before ‘Yes’ at the end of a sentence. Did you mean “, please”?
Context: ...i/color-picker ``` ## Contribution Yes please! See the [contributing guidelines](http...
(COMMA_BEFORE_PLEASE)
🔇 Additional comments (5)
packages/core/theme/src/components/color-picker.ts (1)
5-73: Consider adding more slots for a complete color pickerThe current implementation only includes base and content slots with general styling. For a fully functional color picker, consider adding additional slots for elements like the color palette, swatches, input fields, and preview.
const colorPicker = tv({ slots: { base: ["w-fit", "flex", "outline-none", "box-border"], content: [], + palette: [ + "grid", + "grid-cols-5", + "gap-1", + "p-2" + ], + swatch: [ + "w-6", + "h-6", + "rounded-md", + "cursor-pointer", + "transition-transform", + "hover:scale-110" + ], + input: [ + "mt-2", + "p-1", + "border", + "border-default", + "rounded-md" + ], + preview: [ + "w-8", + "h-8", + "rounded-md", + "border", + "border-default" + ] }, // ...rest of the codepackages/components/color-picker/src/use-color-picker.tsx (4)
1-12: LGTM! Imports are well organized and appropriate.The imports are well-structured, including all necessary dependencies from the HeroUI ecosystem for building the color picker component.
13-23: Interface design follows HeroUI patterns effectively.The
UseColorPickerPropsinterface correctly extends base HeroUI props and variant props, and includes well-documented properties for customization and ref handling.
33-41: LGTM! Proper use of useMemo with dependency tracking.The slots generation with useMemo and objectToDeps for dependency tracking is implemented correctly, ensuring efficient re-renders.
123-123: LGTM! Type export follows best practices.Exporting the return type directly from the hook implementation makes it easier for consumers to use the hook with proper type checking.
| return ( | ||
| <Input | ||
| endContent={ | ||
| <Tooltip {...getTooltipButtonProps()}> | ||
| <Button | ||
| startContent={<CopyDocumentBulkIcon onClick={handleCopyToClipboard} />} | ||
| {...getCopyButtonProps()} | ||
| /> | ||
| </Tooltip> | ||
| } | ||
| startContent={ | ||
| <div slot="inner-wrapper" {...getInnerWrapperProps()}> | ||
| <input {...getColorInputProps()} /> | ||
| <span className="font-bold text-xl">#</span> | ||
| </div> | ||
| } | ||
| {...getColorPickerProps()} | ||
| /> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider adding validation for color input
The current implementation doesn't appear to validate if the input is a valid color format. This could lead to issues when users enter invalid color codes.
Implement validation to ensure that the color input follows a valid hex color format (e.g., using regex). You could update the useColorPicker hook to include validation logic and display an error state when the input is invalid.
Example validation regex for hex colors: ^[0-9A-Fa-f]{6}$
|
|
||
| import {useColorPicker, UseColorPickerProps} from "./use-color-picker"; | ||
|
|
||
| export interface ColorPickerProps extends UseColorPickerProps {} |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Empty interface extending another interface
While it's valid to have an empty interface that extends another, it would be more helpful to document what props from UseColorPickerProps are relevant to this component.
🏁 Script executed:
#!/bin/bash
# Check the definition of UseColorPickerProps to understand what props are available
cat packages/components/color-picker/src/use-color-picker.tsx | grep -A 20 "export interface UseColorPickerProps"Length of output: 927
Enhance documentation for inherited props in ColorPicker
The current empty interface extension is valid, but there's an opportunity to improve clarity. It would be beneficial to explicitly document which props from UseColorPickerProps are actually expected or used in the component (e.g., the DOM node ref and classNames for styling). This additional documentation helps consumers understand the relevant properties without needing to dig into the hook implementation.
- Location:
packages/components/color-picker/src/color-picker.tsx(line 11) - Suggestion: Update the interface or add inline comments to indicate that props like
ref,classNames, and any others inherited (such as those fromColorPickerVariantProps) are significant for the component's behavior.
| const handleCopyToClipboard = () => { | ||
| copy(colorValue); | ||
|
|
||
| setCopied(true); | ||
|
|
||
| setTimeout(() => { | ||
| setCopied(false); | ||
| }, 1000); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Prevent potential memory leaks in timeout handling.
The timeout created for hiding the "Copied" tooltip isn't cleared if the component unmounts before the timeout completes, which could lead to memory leaks.
const handleCopyToClipboard = () => {
copy(colorValue);
setCopied(true);
- setTimeout(() => {
+ const timeoutId = setTimeout(() => {
setCopied(false);
}, 1000);
+
+ // Return a cleanup function that can be used with useEffect
+ return () => clearTimeout(timeoutId);
};And then in the main component that uses this hook:
// Add to your component where useColorPicker is called
useEffect(() => {
let cleanup: (() => void) | undefined;
const handleCopy = () => {
cleanup = handleCopyToClipboard();
};
// Your component logic using handleCopy
return () => {
if (cleanup) cleanup();
};
}, [handleCopyToClipboard]);
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (5)
packages/components/color-picker/src/use-color-picker.tsx (5)
13-23: 🛠️ Refactor suggestionAdd defaultValue to UseColorPickerProps interface
The interface should include a
defaultValueproperty to allow initializing the color picker with a specific color.export interface UseColorPickerProps extends HTMLHeroUIProps, ColorPickerVariantProps { /** * Ref to the DOM node. */ ref?: ReactRef<HTMLDivElement | null>; /** * Classname or List of classes to change the classNames of the element. * if className is passed, it will be added to the base slot. */ classNames?: SlotsToClasses<ColorPickerSlots> & InputProps["classNames"]; + /** + * Initial color value. + * @default "#000000" + */ + defaultValue?: string; }
27-27: 🛠️ Refactor suggestionUse defaultValue prop instead of hardcoded initial color
The color value is hardcoded to "#000000" without allowing an initial value to be set via props.
- const [colorValue, setColorValue] = useState<string>("#000000"); + const {defaultValue = "#000000"} = props; + const [colorValue, setColorValue] = useState<string>(defaultValue);
67-69: 🛠️ Refactor suggestionAdd color value validation to prevent invalid inputs
The current implementation doesn't validate if the input is a valid hex color. This could lead to invalid color values.
onValueChange(value) { - setColorValue(`#${value.replace("#", "")}`); + // Only allow valid hex characters + const hexValue = value.replace(/[^0-9A-Fa-f]/g, "").slice(0, 6); + setColorValue(`#${hexValue}`); },
98-109: 🛠️ Refactor suggestionEnhance accessibility with ARIA attributes and labels
The color input lacks proper accessibility attributes for screen readers.
return { type: "color", value: colorValue, className: "color-swatch:border-none color-swatch:p-0 color-swatch-wrapper:border-none color-swatch-wrapper:p-0 moz-color-swatch:border-none moz-color-swatch:p-0 border-none rounded-md p-0 cursor-pointer size-6", + "aria-label": "Color picker", onChange: (e) => setColorValue(e.target.value), };
111-119: 🛠️ Refactor suggestionPrevent potential memory leaks in timeout handling
The timeout for hiding the "Copied" tooltip isn't cleared if the component unmounts before the timeout completes.
const handleCopyToClipboard = () => { copy(colorValue); setCopied(true); - setTimeout(() => { + const timeoutId = setTimeout(() => { setCopied(false); }, 1000); + + // Return a cleanup function that can be used with useEffect + return () => clearTimeout(timeoutId); };And in the component using this hook:
// Add to your component where useColorPicker is called useEffect(() => { let cleanup: (() => void) | undefined; const handleCopy = () => { cleanup = handleCopyToClipboard(); }; // Your component logic using handleCopy return () => { if (cleanup) cleanup(); }; }, [handleCopyToClipboard]);
🧹 Nitpick comments (2)
packages/components/color-picker/stories/color-picker.stories.tsx (1)
1-70: LGTM: Well-structured Storybook configurationThe Storybook setup is well-structured, with clear argTypes definitions, proper default props from the theme, and appropriate stories to showcase different component states.
Consider adding a story with controlled value to demonstrate use cases where the color is externally controlled.
Example of a controlled story:
export const Controlled = () => { const [color, setColor] = useState("#FF5733"); return ( <div className="flex flex-col gap-2"> <ColorPicker value={color} onValueChange={(value) => setColor(value)} /> <div>Selected color: {color}</div> </div> ); };packages/components/color-picker/src/use-color-picker.tsx (1)
54-71: Add support for controlled mode in the color pickerThe current implementation only supports uncontrolled mode with internal state. Consider adding support for controlled mode where the parent component can manage the state.
export interface UseColorPickerProps extends HTMLHeroUIProps, ColorPickerVariantProps { // ... existing props + /** + * The controlled value of the color picker. + */ + value?: string; + /** + * Handler that is called when the color value changes. + */ + onValueChange?: (value: string) => void; } export function useColorPicker(originalProps: UseColorPickerProps) { const [props, variantProps] = mapPropsVariants(originalProps, colorPicker.variantKeys); - const [colorValue, setColorValue] = useState<string>("#000000"); + const { value, onValueChange, defaultValue = "#000000" } = props; + const [internalValue, setInternalValue] = useState<string>(defaultValue); + + // Determine if component is controlled or uncontrolled + const isControlled = value !== undefined; + const colorValue = isControlled ? value : internalValue; + + const setColorValue = (newValue: string) => { + if (!isControlled) { + setInternalValue(newValue); + } + onValueChange?.(newValue); + };
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
packages/components/color-picker/src/color-picker.tsx(1 hunks)packages/components/color-picker/src/use-color-picker.tsx(1 hunks)packages/components/color-picker/stories/color-picker.stories.tsx(1 hunks)packages/core/theme/src/components/color-picker.ts(1 hunks)packages/storybook/.storybook/main.ts(1 hunks)packages/storybook/tailwind.config.js(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/core/theme/src/components/color-picker.ts
- packages/components/color-picker/src/color-picker.tsx
🔇 Additional comments (1)
packages/storybook/tailwind.config.js (1)
15-19: LGTM: Good implementation of browser-specific color input stylingThe addition of custom Tailwind variants for styling color input elements is a great approach. You've correctly implemented variants for both WebKit (
-webkit-color-swatchand-webkit-color-swatch-wrapper) and Mozilla (-moz-color-swatch) browsers, ensuring cross-browser compatibility.This will work well with the color picker component's styling needs.
| //! TODO: this is just for faster refreshing, revert before merging | ||
| "../../components/color-picker/stories/**/*.stories.@(js|jsx|ts|tsx)", | ||
| "../../components/button/stories/**/*.stories.@(js|jsx|ts|tsx)", |
There was a problem hiding this comment.
Remove TODO comment and temporary configuration before merging
The comment explicitly states this is a temporary change for faster refreshing during development that should be reverted before merging. Either:
- Revert to the original wildcard import that includes all component stories
- Keep the specific imports but remove the TODO comment if this is the intended final configuration
- //! TODO: this is just for faster refreshing, revert before merging
"../../components/color-picker/stories/**/*.stories.@(js|jsx|ts|tsx)",
"../../components/button/stories/**/*.stories.@(js|jsx|ts|tsx)",or revert to the original configuration:
- //! TODO: this is just for faster refreshing, revert before merging
- "../../components/color-picker/stories/**/*.stories.@(js|jsx|ts|tsx)",
- "../../components/button/stories/**/*.stories.@(js|jsx|ts|tsx)",
+ "../../components/**/stories/**/*.stories.@(js|jsx|ts|tsx)",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| //! TODO: this is just for faster refreshing, revert before merging | |
| "../../components/color-picker/stories/**/*.stories.@(js|jsx|ts|tsx)", | |
| "../../components/button/stories/**/*.stories.@(js|jsx|ts|tsx)", | |
| "../../components/color-picker/stories/**/*.stories.@(js|jsx|ts|tsx)", | |
| "../../components/button/stories/**/*.stories.@(js|jsx|ts|tsx)", |
| //! TODO: this is just for faster refreshing, revert before merging | |
| "../../components/color-picker/stories/**/*.stories.@(js|jsx|ts|tsx)", | |
| "../../components/button/stories/**/*.stories.@(js|jsx|ts|tsx)", | |
| "../../components/**/stories/**/*.stories.@(js|jsx|ts|tsx)", |
Closes #5045
📝 Description
This will add a new input component that allows users to pick a color from a color palette.
🚀 New behavior
A color picker input will be added to the components list.
💣 Is this a breaking change (Yes/No):
No
Summary by CodeRabbit
New Features
Documentation
Chores