add shouldForwardProp to ValidationHint

sumup-oss · Feb 14, 2022 · 71c13f9 · 71c13f9
1 parent 48c6eb5
commit 71c13f9
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 5 deletions.
diff --git a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap
@@ -1510,7 +1510,6 @@ exports[`ImageInput styles should render with invalid styles 1`] = `
   >
     <div
       class="circuit-13"
-      color="alert"
     >
       <svg
         fill="none"

diff --git a/packages/circuit-ui/components/ValidationHint/ValidationHint.tsx b/packages/circuit-ui/components/ValidationHint/ValidationHint.tsx
@@ -16,6 +16,7 @@
 import { HTMLAttributes } from 'react';
 import { css } from '@emotion/react';
 import { Confirm, NotifyCircle, Alert } from '@sumup/icons';
+import isPropValid from '@emotion/is-prop-valid';
 
 import styled, { StyleProps } from '../../styles/styled';
 import { typography } from '../../styles/style-mixins';
@@ -66,7 +67,9 @@ const Wrapper = styled('span')<ValidationHintProps>(
   warningStyles,
 );
 
-const IconWrapper = styled.div(
+const IconWrapper = styled('div', {
+  shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color',
+})(
   ({ theme, color }: StyleProps & { color: Color }) =>
     css`
       display: inline-block;

diff --git a/packages/circuit-ui/components/ValidationHint/__snapshots__/ValidationHint.spec.tsx.snap b/packages/circuit-ui/components/ValidationHint/__snapshots__/ValidationHint.spec.tsx.snap
@@ -45,7 +45,6 @@ exports[`ValidationHint styles should render with invalid styles 1`] = `
 >
   <div
     class="circuit-1"
-    color="alert"
   >
     <svg
       fill="none"
@@ -92,7 +91,6 @@ exports[`ValidationHint styles should render with valid styles 1`] = `
 >
   <div
     class="circuit-1"
-    color="confirm"
   >
     <svg
       fill="none"
@@ -156,7 +154,6 @@ exports[`ValidationHint styles should render with warning styles 1`] = `
 >
   <div
     class="circuit-1"
-    color="notify"
   >
     <svg
       fill="none"