From 7cf251d010a6c7f545f87ed3d8e876c9e1763c15 Mon Sep 17 00:00:00 2001 From: Luke Walczak Date: Wed, 10 Jan 2024 22:04:13 +0100 Subject: [PATCH] fix: update input colors (#4259) --- src/components/TextInput/helpers.tsx | 12 ++------ src/components/__tests__/TextInput.test.tsx | 4 +-- .../__snapshots__/TextInput.test.tsx.snap | 28 +++++++++---------- 3 files changed, 18 insertions(+), 26 deletions(-) diff --git a/src/components/TextInput/helpers.tsx b/src/components/TextInput/helpers.tsx index 19ffc012dc..9c3637a2e4 100644 --- a/src/components/TextInput/helpers.tsx +++ b/src/components/TextInput/helpers.tsx @@ -315,9 +315,7 @@ const getInputTextColor = ({ theme, textColor, disabled, - mode, -}: BaseProps & { mode: Mode; textColor?: string }) => { - const isFlat = mode === 'flat'; +}: BaseProps & { textColor?: string }) => { if (textColor) { return textColor; } @@ -327,10 +325,6 @@ const getInputTextColor = ({ return theme.colors.onSurfaceDisabled; } - if (isFlat) { - return theme.colors.onSurfaceVariant; - } - return theme.colors.onSurface; } @@ -442,7 +436,7 @@ const getFlatUnderlineColor = ({ return theme.colors.onSurfaceDisabled; } - return theme.colors.onSurface; + return theme.colors.onSurfaceVariant; } if (disabled) { @@ -512,7 +506,6 @@ export const getFlatInputColors = ({ inputTextColor: getInputTextColor({ ...baseFlatColorProps, textColor, - mode: 'flat', }), activeColor, underlineColorCustom: getFlatUnderlineColor({ @@ -555,7 +548,6 @@ export const getOutlinedInputColors = ({ inputTextColor: getInputTextColor({ ...baseOutlinedColorProps, textColor, - mode: 'outlined', }), activeColor, outlineColor: getOutlinedOutlineInputColor({ diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx index 2e7ff0ae33..cdea7abe1c 100644 --- a/src/components/__tests__/TextInput.test.tsx +++ b/src/components/__tests__/TextInput.test.tsx @@ -557,7 +557,7 @@ describe('getFlatInputColor - underline color', () => { theme: getTheme(), }) ).toMatchObject({ - underlineColorCustom: getTheme().colors.onSurface, + underlineColorCustom: getTheme().colors.onSurfaceVariant, }); }); @@ -644,7 +644,7 @@ describe('getFlatInputColor - input text color', () => { theme: getTheme(), }) ).toMatchObject({ - inputTextColor: getTheme().colors.onSurfaceVariant, + inputTextColor: getTheme().colors.onSurface, }); }); diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index bfd8a241f3..89363a5b1c 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -287,7 +287,7 @@ exports[`correctly applies a component as the text label 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(28, 27, 31, 1)", + "backgroundColor": "rgba(73, 69, 79, 1)", "bottom": 0, "height": 1, "left": 0, @@ -457,7 +457,7 @@ exports[`correctly applies a component as the text label 1`] = ` "paddingTop": 24, }, { - "color": "rgba(73, 69, 79, 1)", + "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -501,7 +501,7 @@ exports[`correctly applies cursorColor prop 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(28, 27, 31, 1)", + "backgroundColor": "rgba(73, 69, 79, 1)", "bottom": 0, "height": 1, "left": 0, @@ -655,7 +655,7 @@ exports[`correctly applies cursorColor prop 1`] = ` "paddingTop": 24, }, { - "color": "rgba(73, 69, 79, 1)", + "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -699,7 +699,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(28, 27, 31, 1)", + "backgroundColor": "rgba(73, 69, 79, 1)", "bottom": 0, "height": 1, "left": 0, @@ -853,7 +853,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = ` "paddingTop": 24, }, { - "color": "rgba(73, 69, 79, 1)", + "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -1127,7 +1127,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(28, 27, 31, 1)", + "backgroundColor": "rgba(73, 69, 79, 1)", "bottom": 0, "height": 1, "left": 0, @@ -1281,7 +1281,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = ` "paddingTop": 24, }, { - "color": "rgba(73, 69, 79, 1)", + "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -1327,7 +1327,7 @@ exports[`correctly applies textAlign center 1`] = ` collapsable={false} style={ { - "backgroundColor": "rgba(28, 27, 31, 1)", + "backgroundColor": "rgba(73, 69, 79, 1)", "bottom": 0, "height": 1, "left": 0, @@ -1481,7 +1481,7 @@ exports[`correctly applies textAlign center 1`] = ` "paddingTop": 24, }, { - "color": "rgba(73, 69, 79, 1)", + "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -1525,7 +1525,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm collapsable={false} style={ { - "backgroundColor": "rgba(28, 27, 31, 1)", + "backgroundColor": "rgba(73, 69, 79, 1)", "bottom": 0, "height": 1, "left": 0, @@ -1679,7 +1679,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm "paddingTop": 24, }, { - "color": "rgba(73, 69, 79, 1)", + "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, @@ -1925,7 +1925,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm collapsable={false} style={ { - "backgroundColor": "rgba(28, 27, 31, 1)", + "backgroundColor": "rgba(73, 69, 79, 1)", "bottom": 0, "height": 1, "left": 0, @@ -2079,7 +2079,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm "paddingTop": 24, }, { - "color": "rgba(73, 69, 79, 1)", + "color": "rgba(28, 27, 31, 1)", "fontFamily": "System", "fontSize": 16, "fontWeight": undefined,