fix composite input size and disabled color input. (#2730)

sumup-oss · Oct 22, 2024 · 42448c9 · 42448c9
1 parent d222d1e
commit 42448c9
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/.changeset/chilly-gorillas-wonder.md b/.changeset/chilly-gorillas-wonder.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": patch
+---
+
+Fixed some sizing and alignment issues for composite inputs ColorInput and PhoneNumberInput. Disabled color input when ColorInput has prop `readOnly`.
diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.module.css b/packages/circuit-ui/components/ColorInput/ColorInput.module.css
@@ -7,29 +7,33 @@
   position: relative;
   width: var(--cui-spacings-exa);
   height: var(--cui-spacings-exa);
-  margin-right: 1px;
   cursor: pointer;
+  border: 1px solid var(--cui-border-normal);
   border-top-left-radius: var(--cui-border-radius-byte);
   border-bottom-left-radius: var(--cui-border-radius-byte);
-  box-shadow: 0 0 0 1px var(--cui-border-normal);
+  box-shadow: none;
+  transition:
+    box-shadow var(--cui-transitions-default),
+    border var(--cui-transitions-default);
 }
 
 .picker:hover {
   z-index: var(--cui-z-index-absolute);
   background: var(--cui-bg-normal-hovered);
-  box-shadow: 0 0 0 1px var(--cui-border-normal-hovered);
+  border: 1px solid var(--cui-border-normal-hovered);
 }
 
 .picker:focus-within {
   z-index: var(--cui-z-index-absolute);
   background: var(--cui-bg-normal-pressed);
-  box-shadow: 0 0 0 2px var(--cui-border-focus);
+  border: 1px solid var(--cui-border-focus);
+  box-shadow: inset 0 0 0 1px 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);
+  border: 1px solid var(--cui-border-normal-disabled);
 }
 
 .color-input {
@@ -77,6 +81,9 @@
   font-family: var(--cui-font-stack-mono);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
+
+  /* to avoid having a 2px inner border separating the two inputs */
+  transform: translateX(-1px);
 }
 
 .input:hover,

diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.tsx b/packages/circuit-ui/components/ColorInput/ColorInput.tsx
@@ -188,8 +188,7 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
               aria-describedby={descriptionIds}
               className={classes['color-input']}
               onChange={onPickerColorChange}
-              readOnly={readOnly}
-              disabled={disabled}
+              disabled={disabled || readOnly}
               defaultValue={defaultValue}
               value={value}
             />

diff --git a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.module.css b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.module.css
@@ -12,8 +12,12 @@
     flex-direction: column;
   }
 
+  .subscriber-number {
+    /* to avoid having a 2px inner border separating the two inputs */
+    transform: translateY(-1px);
+  }
+
   .country-code.country-code {
-    margin-bottom: 1px;
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
@@ -25,8 +29,12 @@
 }
 
 @media (min-width: 480px) {
+  .subscriber-number {
+    /* to avoid having a 2px inner border separating the two inputs */
+    transform: translateX(-1px);
+  }
+
   .country-code.country-code {
-    margin-right: 1px;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }