From 360cf8d296da372e7f613ddf8e475f98c4d6fee8 Mon Sep 17 00:00:00 2001 From: nikitaorliak-cengage Date: Thu, 24 Oct 2024 15:26:46 +0200 Subject: [PATCH] feat(Input): Update colors for error message, icon and border in dark mode. (#1501) Co-authored-by: Nikita Orliak --- .changeset/feat-input-error-state-update-colors.md | 5 +++++ packages/dropzone/src/components/dropzone/Dropzone.tsx | 2 +- packages/dropzone/src/components/dropzone/Preview.tsx | 4 ++-- .../src/components/Checkbox/Checkbox.test.js | 2 +- .../react-magma-dom/src/components/Input/Input.test.js | 7 ++++--- .../react-magma-dom/src/components/Input/InputMessage.tsx | 5 ++++- .../react-magma-dom/src/components/InputBase/index.tsx | 2 +- .../src/components/NativeSelect/NativeSelect.test.js | 2 +- .../src/components/NativeSelect/NativeSelect.tsx | 2 +- .../react-magma-dom/src/components/Radio/Radio.test.js | 2 +- packages/react-magma-dom/src/components/Radio/index.tsx | 2 +- .../src/components/SelectionControls/InputStyles.tsx | 2 +- 12 files changed, 23 insertions(+), 14 deletions(-) create mode 100644 .changeset/feat-input-error-state-update-colors.md diff --git a/.changeset/feat-input-error-state-update-colors.md b/.changeset/feat-input-error-state-update-colors.md new file mode 100644 index 0000000000..834b63f661 --- /dev/null +++ b/.changeset/feat-input-error-state-update-colors.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': minor +--- + +feat(Input): Update colors for error message, icon and border in dark mode. diff --git a/packages/dropzone/src/components/dropzone/Dropzone.tsx b/packages/dropzone/src/components/dropzone/Dropzone.tsx index 4980478a6b..9b5164b1fe 100644 --- a/packages/dropzone/src/components/dropzone/Dropzone.tsx +++ b/packages/dropzone/src/components/dropzone/Dropzone.tsx @@ -149,7 +149,7 @@ const Container = styled(Flex)< ? `0px` : dragState === 'dragReject' || dragState === 'error' ? isInverse - ? `1px dashed ${theme.colors.danger200}` + ? `1px dashed ${theme.colors.danger300}` : `1px dashed ${theme.colors.danger}` : dragState === 'dragActive' ? `1px dashed ${theme.colors.primary}` diff --git a/packages/dropzone/src/components/dropzone/Preview.tsx b/packages/dropzone/src/components/dropzone/Preview.tsx index d27d2bf260..263348eb94 100644 --- a/packages/dropzone/src/components/dropzone/Preview.tsx +++ b/packages/dropzone/src/components/dropzone/Preview.tsx @@ -106,7 +106,7 @@ const StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>` border-color: ${({ file, theme, isInverse }) => file.errors ? isInverse - ? theme.colors.danger200 + ? theme.colors.danger300 : theme.colors.danger : theme.colors.neutral300}; border-width: 1px; @@ -286,7 +286,7 @@ export const Preview = forwardRef( {file.errors ? ( diff --git a/packages/react-magma-dom/src/components/Checkbox/Checkbox.test.js b/packages/react-magma-dom/src/components/Checkbox/Checkbox.test.js index 1331c0d287..4548c5507c 100644 --- a/packages/react-magma-dom/src/components/Checkbox/Checkbox.test.js +++ b/packages/react-magma-dom/src/components/Checkbox/Checkbox.test.js @@ -236,7 +236,7 @@ describe('Checkbox', () => { ); const span = container.querySelector('span'); - expect(span).toHaveStyleRule('border-color', magma.colors.danger200); + expect(span).toHaveStyleRule('border-color', magma.colors.danger300); expect(span).toHaveStyleRule('color', magma.colors.neutral100); }); diff --git a/packages/react-magma-dom/src/components/Input/Input.test.js b/packages/react-magma-dom/src/components/Input/Input.test.js index 6da7de5bee..5024c2e614 100644 --- a/packages/react-magma-dom/src/components/Input/Input.test.js +++ b/packages/react-magma-dom/src/components/Input/Input.test.js @@ -134,16 +134,17 @@ describe('Input', () => { it('should render an inverse input with a correctly styled error message', () => { const labelText = 'test label'; const testMessage = 'Test error message'; - const { getByTestId, getByLabelText } = render( + const { getByTestId, getByLabelText, getByRole } = render( ); const input = getByLabelText(labelText).parentElement; const errorMessage = getByTestId('inputMessage'); + const errorIcon = getByRole('img').firstChild; - expect(input).toHaveStyleRule('border-color', magma.colors.danger200); - + expect(input).toHaveStyleRule('border-color', magma.colors.danger300); expect(errorMessage).toHaveStyleRule('color', magma.colors.danger200); + expect(errorIcon).toHaveAttribute('fill', magma.colors.danger300); }); it('should render an input with a right-aligned icon by default', () => { diff --git a/packages/react-magma-dom/src/components/Input/InputMessage.tsx b/packages/react-magma-dom/src/components/Input/InputMessage.tsx index 8803ca7177..47fd709acc 100644 --- a/packages/react-magma-dom/src/components/Input/InputMessage.tsx +++ b/packages/react-magma-dom/src/components/Input/InputMessage.tsx @@ -80,7 +80,10 @@ export const InputMessage: React.FunctionComponent = ({ > {hasError && ( - + )}
{children}
diff --git a/packages/react-magma-dom/src/components/InputBase/index.tsx b/packages/react-magma-dom/src/components/InputBase/index.tsx index 704214cb4b..89db223788 100644 --- a/packages/react-magma-dom/src/components/InputBase/index.tsx +++ b/packages/react-magma-dom/src/components/InputBase/index.tsx @@ -204,7 +204,7 @@ export const inputWrapperStyles = (props: InputWrapperStylesProps) => css` ${props.hasError && css` border-color: ${props.isInverse - ? props.theme.colors.danger200 + ? props.theme.colors.danger300 : props.theme.colors.danger}; `} diff --git a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.test.js b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.test.js index 4e8671442e..b8a8902691 100644 --- a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.test.js +++ b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.test.js @@ -113,7 +113,7 @@ describe('NativeSelect', () => { expect(getByTestId(testId).parentElement).toHaveStyleRule( 'border', - `1px solid ${magma.colors.danger200}` + `1px solid ${magma.colors.danger300}` ); expect(getByText(errorMessage)).toBeInTheDocument(); diff --git a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx index 91764bad11..38db83772d 100644 --- a/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx +++ b/packages/react-magma-dom/src/components/NativeSelect/NativeSelect.tsx @@ -58,7 +58,7 @@ const StyledNativeSelectWrapper = styled.div<{ function borderColors(props) { if (props.isInverse) { if (props.hasError) { - return props.theme.colors.danger200; + return props.theme.colors.danger300; } if (props.disabled) { return transparentize(0.85, props.theme.colors.neutral100); diff --git a/packages/react-magma-dom/src/components/Radio/Radio.test.js b/packages/react-magma-dom/src/components/Radio/Radio.test.js index 4b107f59c2..b9fc66f903 100644 --- a/packages/react-magma-dom/src/components/Radio/Radio.test.js +++ b/packages/react-magma-dom/src/components/Radio/Radio.test.js @@ -313,7 +313,7 @@ describe('Radio', () => { expect(span).toHaveStyleRule( 'box-shadow', - `0 0 0 2px ${magma.colors.danger200}` + `0 0 0 2px ${magma.colors.danger300}` ); }); diff --git a/packages/react-magma-dom/src/components/Radio/index.tsx b/packages/react-magma-dom/src/components/Radio/index.tsx index a632d06fff..69f73195c9 100644 --- a/packages/react-magma-dom/src/components/Radio/index.tsx +++ b/packages/react-magma-dom/src/components/Radio/index.tsx @@ -96,7 +96,7 @@ function buildRadioIconColor(props) { export function buildErrorBorder(props) { if (props.hasError) { if (props.isInverse) { - return `0 0 0 2px ${props.theme.colors.danger200}`; + return `0 0 0 2px ${props.theme.colors.danger300}`; } return `0 0 0 2px ${props.theme.colors.danger}`; } diff --git a/packages/react-magma-dom/src/components/SelectionControls/InputStyles.tsx b/packages/react-magma-dom/src/components/SelectionControls/InputStyles.tsx index bb8b2252f5..91ee7771b7 100644 --- a/packages/react-magma-dom/src/components/SelectionControls/InputStyles.tsx +++ b/packages/react-magma-dom/src/components/SelectionControls/InputStyles.tsx @@ -48,7 +48,7 @@ export function buildDisplayInputActiveBackground(props) { export function buildDisplayInputBorderColor(props) { if (props.hasError) { if (props.isInverse) { - return props.theme.colors.danger200; + return props.theme.colors.danger300; } return props.theme.colors.danger; }