fix: InputColor improvements

ynput · Dec 31, 2024 · dd29c6f · dd29c6f
1 parent 2593eb1
commit dd29c6f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/src/Dropdowns/SortingDropdown/SortCard.tsx b/src/Dropdowns/SortingDropdown/SortCard.tsx
@@ -2,6 +2,7 @@ import { forwardRef } from 'react'
 import { SortCardType } from './SortingDropdown'
 import { Icon } from '../../Icon'
 import * as Styled from './SortCard.styled'
+import clsx from 'clsx'
 
 interface SortCardProps extends SortCardType, Omit<React.HTMLAttributes<HTMLDivElement>, 'id'> {
   onRemove: () => void
@@ -12,7 +13,13 @@ interface SortCardProps extends SortCardType, Omit<React.HTMLAttributes<HTMLDivE
 const SortCard = forwardRef<HTMLDivElement, SortCardProps>(
   ({ id, label, sortOrder, onRemove, onSortBy, disabled, ...props }, ref) => {
     return (
-      <Styled.Card {...props} ref={ref} tabIndex={0} $disabled={!!disabled}>
+      <Styled.Card
+        {...props}
+        ref={ref}
+        tabIndex={0}
+        $disabled={!!disabled}
+        className={clsx('sort-chip', props.className)}
+      >
         <Icon
           icon="close"
           onClick={(e) => {

diff --git a/src/Inputs/InputColor/ColorPickerPreview.tsx b/src/Inputs/InputColor/ColorPickerPreview.tsx
@@ -1,8 +1,9 @@
+import clsx from 'clsx'
 import { ChangeEvent, FC, FocusEvent, forwardRef } from 'react'
 import styled, { css } from 'styled-components'
 
 // types
-export interface ColorPickerPreviewProps {
+export interface ColorPickerPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   onClick?: () => void
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void
   backgroundColor?: string
@@ -68,16 +69,17 @@ const ColorButton = styled.button`
 `
 
 const ColorPickerPreview = forwardRef<HTMLDivElement, ColorPickerPreviewProps>(
-  ({ onClick, onChange, backgroundColor, value, onBlur }, ref) => {
+  ({ onClick, onChange, backgroundColor, value, onBlur, ...props }, ref) => {
     return (
-      <Wrapper ref={ref}>
+      <Wrapper ref={ref} className={clsx('color-picker-preview', props.className)} {...props}>
         <Input
           type="color"
           disabled={!onChange}
           tabIndex={!onChange ? -1 : 0}
           onChange={onChange && onChange}
           value={value}
           onBlur={onBlur}
+          className="color-picker-input"
         />
         <Checkerboard />
         <ColorButton
@@ -88,6 +90,7 @@ const ColorPickerPreview = forwardRef<HTMLDivElement, ColorPickerPreviewProps>(
           disabled={!onClick}
           tabIndex={!onClick ? -1 : 0}
           onClick={onClick}
+          className="color-picker-button"
         />
       </Wrapper>
     )

diff --git a/src/Inputs/InputColor/InputColor.tsx b/src/Inputs/InputColor/InputColor.tsx
@@ -57,18 +57,19 @@ const formatsConfig = {
   },
 }
 
-export interface InputColorProps {
+export interface InputColorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   value: string | number[]
   onChange: (event: { target: { value: string | number[] } }) => void
   alpha?: boolean
   format?: 'hex' | 'float' | 'uint8' | 'uint16'
-  className?: string
-  style?: HTMLAttributes<HTMLDivElement>['style']
+  pt?: {
+    preview?: HTMLAttributes<HTMLDivElement>
+  }
 }
 
 // REACT FUNCTIONAL COMPONENT
 export const InputColor = forwardRef<HTMLDivElement, InputColorProps>(
-  ({ value, onChange, alpha, format = 'hex', className, style }, ref) => {
+  ({ value, onChange, alpha, format = 'hex', pt = { preview: {} }, ...props }, ref) => {
     const isHex = format === 'hex'
 
     let initValue: string | number[]
@@ -226,8 +227,9 @@ export const InputColor = forwardRef<HTMLDivElement, InputColorProps>(
     const useDialog = alpha || ['uint16', 'float'].includes(format)
 
     return (
-      <div ref={ref} className={className} style={style}>
+      <div ref={ref} {...props}>
         <ColorPickerPreview
+          {...pt.preview}
           onClick={useDialog ? handleOpenDialog : undefined}
           backgroundColor={previewBG}
           value={hex}