address code review

sumup-oss · Oct 12, 2024 · 2a58c47 · 2a58c47
1 parent 5c66fc4
commit 2a58c47
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.module.css b/packages/circuit-ui/components/ColorInput/ColorInput.module.css
@@ -26,6 +26,12 @@
   box-shadow: 0 0 0 2px var(--cui-border-focus);
 }
 
+.picker[data-disabled="true"] {
+  color: var(--cui-fg-normal-disabled);
+  background-color: var(--cui-bg-normal-disabled);
+  box-shadow: 0 0 0 1px var(--cui-border-normal-disabled);
+}
+
 .color-input {
   width: var(--cui-spacings-giga);
   height: var(--cui-spacings-giga);
@@ -80,4 +86,4 @@
 
 .input::placeholder {
   font-family: var(--cui-font-stack-mono);
-}
+}
diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.spec.tsx b/packages/circuit-ui/components/ColorInput/ColorInput.spec.tsx
@@ -165,7 +165,7 @@ describe('ColorInput', () => {
       ) as HTMLInputElement;
 
       await userEvent.click(colorInput);
-      await userEvent.paste('oviously invalid');
+      await userEvent.paste('obviously invalid');
 
       const colorPicker = container.querySelector(
         "input[type='color']",

diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.tsx b/packages/circuit-ui/components/ColorInput/ColorInput.tsx
@@ -106,12 +106,7 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
     const hasSuffix = Boolean(suffix);
 
     const handlePaste: ClipboardEventHandler<InputElement> = (e) => {
-      if (
-        !colorPickerRef.current ||
-        !colorInputRef.current ||
-        disabled ||
-        readOnly
-      ) {
+      if (!colorPickerRef.current || !colorInputRef.current || readOnly) {
         return;
       }
 
@@ -165,7 +160,11 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
           />
         </FieldLegend>
         <div className={classes.wrapper}>
-          <label htmlFor={pickerId} className={classes.picker}>
+          <label
+            htmlFor={pickerId}
+            className={classes.picker}
+            data-disabled={disabled}
+          >
             <input
               id={pickerId}
               ref={applyMultipleRefs(colorPickerRef, ref)}