Remove duplicate id from the validation hint icon in form components (#…

…1993) * Don't forward props to validation hint icon * Add changeset
sumup-oss · Mar 14, 2023 · 167ec18 · 167ec18 · vercel · Mar 14, 2023
1 parent 36d44de
commit 167ec18
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 15 deletions.
diff --git a/.changeset/tasty-ghosts-smell.md b/.changeset/tasty-ghosts-smell.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Remove duplicate id from the validation hint icon in form components.
diff --git a/packages/circuit-ui/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap b/packages/circuit-ui/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap
@@ -629,11 +629,6 @@ exports[`Checkbox Styles should render with invalid styles and an error message
   height: 16px;
   vertical-align: text-top;
   margin-right: 4px;
-  color: var(--cui-fg-danger);
-}
-
-.cui-field-disabled .circuit-4 {
-  color: var(--cui-fg-danger-disabled);
 }
 
 <div>
@@ -676,7 +671,6 @@ exports[`Checkbox Styles should render with invalid styles and an error message
       >
         <div
           class="circuit-4"
-          id="validation_hint-8"
         >
           <svg
             fill="none"

diff --git a/packages/circuit-ui/components/FieldAtoms/FieldValidationHint.tsx b/packages/circuit-ui/components/FieldAtoms/FieldValidationHint.tsx
@@ -104,21 +104,21 @@ const getIcon = (props: FieldValidationHintProps) => {
     }
     case props.invalid: {
       return (
-        <IconWrapper {...props}>
+        <IconWrapper>
           <Alert role="presentation" size="16" />
         </IconWrapper>
       );
     }
     case props.hasWarning: {
       return (
-        <IconWrapper {...props}>
+        <IconWrapper>
           <Notify role="presentation" size="16" />
         </IconWrapper>
       );
     }
     case props.showValid: {
       return (
-        <IconWrapper {...props}>
+        <IconWrapper>
           <Confirm role="presentation" size="16" />
         </IconWrapper>
       );

diff --git a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap
@@ -2001,11 +2001,6 @@ exports[`ImageInput Styles should render with invalid styles and an error messag
   height: 16px;
   vertical-align: text-top;
   margin-right: 4px;
-  color: var(--cui-fg-danger);
-}
-
-.cui-field-disabled .circuit-14 {
-  color: var(--cui-fg-danger-disabled);
 }
 
 <div>
@@ -2107,7 +2102,6 @@ exports[`ImageInput Styles should render with invalid styles and an error messag
       >
         <div
           class="circuit-14"
-          id="validation-hint_6"
         >
           <svg
             fill="none"