From 4d6128faca9800711ade0bf91a4e37e648420829 Mon Sep 17 00:00:00 2001 From: theBGuy <60308670+theBGuy@users.noreply.github.com> Date: Sun, 26 Oct 2025 17:45:57 -0400 Subject: [PATCH 01/10] fix: apply selectedColor only when selected & support custom background - Fix selectedColor applying even when chip not selected by passing selected state to getTextColor helper - Add selectedBackgroundColor prop to specify custom background for selected chips - Update helper functions to handle new prop and improve selected state color logic - Document theme variables usage in theme prop JSDoc --- src/components/Chip/Chip.tsx | 56 ++++++++++++++++++++++----------- src/components/Chip/helpers.tsx | 30 +++++++++++++++--- 2 files changed, 63 insertions(+), 23 deletions(-) diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 0e48e5c145..8d30743abb 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -59,10 +59,14 @@ export type Props = $Omit, 'mode'> & { selected?: boolean; /** * Whether to style the chip color as selected. - * Note: With theme version 3 `selectedColor` doesn't apply to the `icon`. + * Note: With theme version 3 `selectedColor` doesn't apply to the `icon`. Only text color is affected. * If you want specify custom color for the `icon`, render your own `Icon` component. */ selectedColor?: string; + /** + * Background color for the selected chip. + */ + selectedBackgroundColor?: string; /** * @supported Available in v5.x with theme version 3 * Whether to display overlay on selected chip @@ -139,6 +143,25 @@ export type Props = $Omit, 'mode'> & { hitSlop?: TouchableRippleProps['hitSlop']; /** * @optional + * Theme object containing styling properties. The following theme properties are used: + * **V3 Theme:** + * - `colors.onSurfaceDisabled` - Text and icon color when disabled + * - `colors.onSurfaceVariant` - Text/icon color for outlined mode, disabled border color, overlay mixing + * - `colors.outline` - Border color for outlined mode (when not disabled/selected) + * - `colors.surface` - Background color for outlined mode + * - `colors.secondaryContainer` - Background color for flat mode + * - `colors.onSecondaryContainer` - Text/icon color for flat mode, overlay mixing + * - `colors.primary` - Icon color when not disabled (for custom icons) + * **V2 Theme:** + * - `colors.disabled` - Text and icon color when disabled + * - `colors.text` - Base text and icon color (with alpha applied) + * - `colors.surface` - Background color for outlined mode + * **Common:** + * - `roundness` - Used to calculate default border radius (V3: roundness * 2, V2: roundness * 4) + * - `animation.scale` - Used for elevation animation timing + * - `fonts.labelLarge` (V3) / `fonts.regular` (V2) - Text typography + * - `dark` - Determines color calculations for V2 theme + * - `isV3` - Determines which theme version logic to apply */ theme?: ThemeProp; /** @@ -201,6 +224,7 @@ const Chip = ({ theme: themeOverrides, testID = 'chip', selectedColor, + selectedBackgroundColor: customSelectedBackgroundColor, rippleColor: customRippleColor, showSelectedOverlay = false, showSelectedCheck = true, @@ -259,22 +283,18 @@ const Chip = ({ borderRadius = defaultBorderRadius, } = (StyleSheet.flatten(style) || {}) as ViewStyle; - const { - borderColor, - textColor, - iconColor, - rippleColor, - selectedBackgroundColor, - backgroundColor, - } = getChipColors({ - isOutlined, - theme, - selectedColor, - showSelectedOverlay, - customBackgroundColor, - disabled, - customRippleColor, - }); + const { borderColor, textColor, iconColor, rippleColor, backgroundColor } = + getChipColors({ + isOutlined, + theme, + selectedColor, + showSelectedOverlay, + customBackgroundColor, + disabled, + customRippleColor, + selected, + customSelectedBackgroundColor, + }); const accessibilityState: AccessibilityState = { selected, @@ -306,7 +326,7 @@ const Chip = ({ elevation: elevationStyle, }, { - backgroundColor: selected ? selectedBackgroundColor : backgroundColor, + backgroundColor, borderColor, borderRadius, }, diff --git a/src/components/Chip/helpers.tsx b/src/components/Chip/helpers.tsx index 47d0993c86..d3f476eb56 100644 --- a/src/components/Chip/helpers.tsx +++ b/src/components/Chip/helpers.tsx @@ -13,6 +13,7 @@ type BaseProps = { theme: InternalTheme; isOutlined: boolean; disabled?: boolean; + selected?: boolean; }; const getBorderColor = ({ @@ -61,6 +62,7 @@ const getTextColor = ({ isOutlined, disabled, selectedColor, + selected, }: BaseProps & { selectedColor?: string; }) => { @@ -70,7 +72,7 @@ const getTextColor = ({ return theme.colors.onSurfaceDisabled; } - if (isSelectedColor) { + if (isSelectedColor && selected) { return selectedColor; } @@ -119,6 +121,7 @@ const getBackgroundColor = ({ theme, isOutlined, disabled, + selected, customBackgroundColor, }: BaseProps & { customBackgroundColor?: ColorValue; @@ -136,26 +139,37 @@ const getBackgroundColor = ({ } } - return getDefaultBackgroundColor({ theme, isOutlined }); + return getDefaultBackgroundColor({ theme, isOutlined, selected }); }; const getSelectedBackgroundColor = ({ theme, isOutlined, disabled, + selected, customBackgroundColor, showSelectedOverlay, + customSelectedBackgroundColor, }: BaseProps & { customBackgroundColor?: ColorValue; showSelectedOverlay?: boolean; + customSelectedBackgroundColor?: ColorValue; }) => { + // If customSelectedBackgroundColor is provided, use it as-is without processing + if (typeof customSelectedBackgroundColor === 'string') { + return customSelectedBackgroundColor; + } + + // Get the base background color (which may be custom or theme-based) const backgroundColor = getBackgroundColor({ theme, disabled, isOutlined, customBackgroundColor, + selected, }); + // Process the background color to get the selected background color if (theme.isV3) { if (isOutlined) { if (showSelectedOverlay) { @@ -237,6 +251,7 @@ const getRippleColor = ({ theme, isOutlined, disabled, + selected, selectedColor, selectedBackgroundColor, customRippleColor, @@ -255,6 +270,7 @@ const getRippleColor = ({ disabled, selectedColor, isOutlined, + selected, }); if (theme.isV3) { @@ -280,14 +296,18 @@ export const getChipColors = ({ customBackgroundColor, disabled, customRippleColor, + selected = false, + customSelectedBackgroundColor, }: BaseProps & { customBackgroundColor?: ColorValue; disabled?: boolean; showSelectedOverlay?: boolean; selectedColor?: string; customRippleColor?: ColorValue; + selected?: boolean; + customSelectedBackgroundColor?: ColorValue; }) => { - const baseChipColorProps = { theme, isOutlined, disabled }; + const baseChipColorProps = { theme, isOutlined, disabled, selected }; const backgroundColor = getBackgroundColor({ ...baseChipColorProps, @@ -298,6 +318,7 @@ export const getChipColors = ({ ...baseChipColorProps, customBackgroundColor, showSelectedOverlay, + customSelectedBackgroundColor, }); return { @@ -320,7 +341,6 @@ export const getChipColors = ({ selectedBackgroundColor, customRippleColor, }), - backgroundColor, - selectedBackgroundColor, + backgroundColor: selected ? selectedBackgroundColor : backgroundColor, }; }; From 9b5ce49332bacffdb1a9a4ee37d1cabd2a17c340 Mon Sep 17 00:00:00 2001 From: theBGuy <60308670+theBGuy@users.noreply.github.com> Date: Sun, 26 Oct 2025 17:52:46 -0400 Subject: [PATCH 02/10] test: update Chip tests - add selected state where necessary in existing tests - remove usage of selectedBackgroundColor prop from outdated tests - add test cases demonstrating selectedBackgroundColor prop behavior --- src/components/__tests__/Chip.test.tsx | 84 +++++++++++++++++++++----- 1 file changed, 70 insertions(+), 14 deletions(-) diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx index ca3055e35b..b094575c35 100644 --- a/src/components/__tests__/Chip.test.tsx +++ b/src/components/__tests__/Chip.test.tsx @@ -158,6 +158,7 @@ describe('getChipColors - text color', () => { theme: getTheme(), selectedColor: 'purple', isOutlined: false, + selected: true, }) ).toMatchObject({ textColor: 'purple', @@ -422,9 +423,10 @@ describe('getChipColor - selected background color', () => { theme: getTheme(), customBackgroundColor: 'purple', isOutlined: true, + selected: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') + backgroundColor: color('purple') .mix(color(getTheme().colors.onSurfaceVariant), 0) .rgb() .string(), @@ -437,9 +439,10 @@ describe('getChipColor - selected background color', () => { theme: getTheme(), customBackgroundColor: 'purple', isOutlined: false, + selected: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') + backgroundColor: color('purple') .mix(color(getTheme().colors.onSecondaryContainer), 0) .rgb() .string(), @@ -453,9 +456,10 @@ describe('getChipColor - selected background color', () => { customBackgroundColor: 'purple', showSelectedOverlay: true, isOutlined: true, + selected: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') + backgroundColor: color('purple') .mix(color(getTheme().colors.onSurfaceVariant), 0.12) .rgb() .string(), @@ -469,9 +473,10 @@ describe('getChipColor - selected background color', () => { customBackgroundColor: 'purple', showSelectedOverlay: true, isOutlined: false, + selected: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple') + backgroundColor: color('purple') .mix(color(getTheme().colors.onSecondaryContainer), 0.12) .rgb() .string(), @@ -483,9 +488,10 @@ describe('getChipColor - selected background color', () => { getChipColors({ theme: getTheme(), isOutlined: true, + selected: true, }) ).toMatchObject({ - selectedBackgroundColor: color(getTheme().colors.surface) + backgroundColor: color(getTheme().colors.surface) .mix(color(getTheme().colors.onSurfaceVariant), 0) .rgb() .string(), @@ -497,9 +503,10 @@ describe('getChipColor - selected background color', () => { getChipColors({ theme: getTheme(), isOutlined: false, + selected: true, }) ).toMatchObject({ - selectedBackgroundColor: color(getTheme().colors.secondaryContainer) + backgroundColor: color(getTheme().colors.secondaryContainer) .mix(color(getTheme().colors.onSecondaryContainer), 0) .rgb() .string(), @@ -512,9 +519,10 @@ describe('getChipColor - selected background color', () => { theme: getTheme(false, false), customBackgroundColor: 'purple', isOutlined: true, + selected: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple').darken(0.08).rgb().string(), + backgroundColor: color('purple').darken(0.08).rgb().string(), }); }); @@ -524,9 +532,10 @@ describe('getChipColor - selected background color', () => { theme: getTheme(false, false), customBackgroundColor: 'purple', isOutlined: false, + selected: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple').darken(0.2).rgb().string(), + backgroundColor: color('purple').darken(0.2).rgb().string(), }); }); @@ -536,9 +545,10 @@ describe('getChipColor - selected background color', () => { theme: getTheme(true, false), customBackgroundColor: 'purple', isOutlined: true, + selected: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple').lighten(0.2).rgb().string(), + backgroundColor: color('purple').lighten(0.2).rgb().string(), }); }); @@ -548,9 +558,10 @@ describe('getChipColor - selected background color', () => { theme: getTheme(true, false), customBackgroundColor: 'purple', isOutlined: false, + selected: true, }) ).toMatchObject({ - selectedBackgroundColor: color('purple').lighten(0.4).rgb().string(), + backgroundColor: color('purple').lighten(0.4).rgb().string(), }); }); @@ -559,9 +570,10 @@ describe('getChipColor - selected background color', () => { getChipColors({ theme: getTheme(false, false), isOutlined: true, + selected: true, }) ).toMatchObject({ - selectedBackgroundColor: color(getTheme(false, false).colors.surface) + backgroundColor: color(getTheme(false, false).colors.surface) .darken(0.08) .rgb() .string(), @@ -573,9 +585,10 @@ describe('getChipColor - selected background color', () => { getChipColors({ theme: getTheme(false, false), isOutlined: false, + selected: true, }) ).toMatchObject({ - selectedBackgroundColor: color('#ebebeb').darken(0.2).rgb().string(), + backgroundColor: color('#ebebeb').darken(0.2).rgb().string(), }); }); @@ -584,9 +597,36 @@ describe('getChipColor - selected background color', () => { getChipColors({ theme: getTheme(true, false), isOutlined: false, + selected: true, }) ).toMatchObject({ - selectedBackgroundColor: color('#383838').lighten(0.4).rgb().string(), + backgroundColor: color('#383838').lighten(0.4).rgb().string(), + }); + }); + + it('should return custom selectedBackgroundColor when provided & chip is selected', () => { + expect( + getChipColors({ + theme: getTheme(), + customSelectedBackgroundColor: 'red', + isOutlined: false, + selected: true, + }) + ).toMatchObject({ + backgroundColor: 'red', + }); + }); + + it('should return custom selectedBackgroundColor for version 2 theme, when chip is selected', () => { + expect( + getChipColors({ + theme: getTheme(false, false), + customSelectedBackgroundColor: 'red', + isOutlined: false, + selected: true, + }) + ).toMatchObject({ + backgroundColor: 'red', }); }); }); @@ -673,15 +713,31 @@ describe('getChipColor - border color', () => { }); }); - it('should return custom color, for theme version 3', () => { + it('should return custom color, for theme version 3, when selected', () => { expect( getChipColors({ theme: getTheme(), selectedColor: 'purple', isOutlined: false, + selected: true, + }) + ).toMatchObject({ + borderColor: 'transparent', + textColor: 'purple', + }); + }); + + it('should return theme color, for theme version 3, when unselected', () => { + expect( + getChipColors({ + theme: getTheme(false, true), + selectedColor: 'purple', + isOutlined: false, + selected: false, }) ).toMatchObject({ borderColor: 'transparent', + textColor: getTheme(false, true).colors.onSecondaryContainer, }); }); From 10896ee3ef4c801184ad0379d476c0d74a058a32 Mon Sep 17 00:00:00 2001 From: theBGuy <60308670+theBGuy@users.noreply.github.com> Date: Sun, 26 Oct 2025 17:54:25 -0400 Subject: [PATCH 03/10] docs: organize & add chip examples for new usage - group custom chip examples into logical subsections - add custom border radius examples (V3 only) - separate custom background color demonstrations - organize custom selected color examples with variations - consolidate custom styling examples (text, close icon, onLongPress) - improve full width and long text examples section --- example/src/Examples/ChipExample.tsx | 315 ++++++++++++++++++--------- 1 file changed, 212 insertions(+), 103 deletions(-) diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx index 20f0393153..d8a0c66d5e 100644 --- a/example/src/Examples/ChipExample.tsx +++ b/example/src/Examples/ChipExample.tsx @@ -249,10 +249,10 @@ const ChipExample = () => { - - - {isV3 && ( - <> + + {isV3 && ( + + {}} @@ -265,7 +265,7 @@ const ChipExample = () => { } style={[styles.chip, styles.customBorderRadius]} > - Compact with custom border radius + Compact with custom border radius (outlined) { } style={[styles.chip, styles.customBorderRadius]} > - Compact with custom border radius + Compact with custom border radius (flat) - - )} - {}} - onLongPress={() => - setSnackbarProperties({ visible: true, text: '' }) - } - style={styles.chip} - > - With onLongPress - - {}} - style={[ - styles.chip, - { - backgroundColor: color(customColor).alpha(0.2).rgb().string(), - }, - ]} - selectedColor={customColor} - > - Flat selected chip with custom color - - {}} - style={styles.chip} - selectedColor={customColor} - > - Flat unselected chip with custom color - + + + )} + + + {}} + style={[ + styles.chip, + { + backgroundColor: color(customColor) + .alpha(0.2) + .rgb() + .string(), + }, + ]} + > + Flat selected chip with custom background color + + {}} + style={[ + styles.chip, + { + backgroundColor: color(customColor) + .alpha(0.2) + .rgb() + .string(), + }, + ]} + > + Flat unselected chip with custom background color + + {}} + style={[ + styles.chip, + { + backgroundColor: color(customColor) + .alpha(0.2) + .rgb() + .string(), + }, + ]} + > + Flat disabled chip with custom background color + + + + + + {}} + style={[styles.chip]} + selectedColor={customColor} + > + Flat selected chip with custom selected color + + {}} + style={styles.chip} + selectedColor={customColor} + > + Flat unselected chip with custom selected color + + {}} + style={[styles.chip]} + selectedColor={customColor} + > + Flat selected chip with custom selected color (no check) + + {}} + style={styles.chip} + selectedColor={customColor} + > + Flat unselected chip with custom selected color (no check) + + {}} + style={styles.chip} + selectedColor={customColor} + > + Flat disabled unselected chip with custom selected color + + {}} + style={[ + styles.chip, + { + backgroundColor: color(customColor) + .alpha(0.2) + .rgb() + .string(), + }, + ]} + selectedColor={customColor} + > + Outlined selected chip with custom color + + {}} + style={styles.chip} + selectedColor={customColor} + > + Outlined unselected chip with custom color + + + + + + {}} + style={[styles.chip]} + selectedColor="rgba(255, 255, 255, 1)" + selectedBackgroundColor="rgba(0, 0, 0, 1)" + > + Flat selected chip with custom selected color & background color + + {}} + style={[styles.chip]} + selectedColor="rgba(255, 255, 255, 1)" + selectedBackgroundColor="rgba(0, 0, 0, 1)" + > + Flat disabled chip with custom selected & background color + + {}} + style={styles.chip} + textStyle={styles.tiny} + > + With custom size + + {}} + style={styles.chip} + textStyle={styles.tiny} + > + With custom text + + {}} + onClose={() => + setSnackbarProperties({ + visible: true, + text: 'Custom icon close button pressed', + }) + } + closeIcon="arrow-down" + style={styles.chip} + closeIconAccessibilityLabel="Custom Close icon accessibility label" + > + With custom close icon + + {}} + onLongPress={() => + setSnackbarProperties({ visible: true, text: '' }) + } + style={styles.chip} + > + With onLongPress + + + + + + {}} + onClose={() => + setSnackbarProperties({ + visible: true, + text: 'Close button pressed', + }) + } + style={styles.bigTextFlex} + textStyle={styles.bigTextStyle} + ellipsizeMode="middle" + > + With a very big text: React Native Paper is a high-quality, + standard-compliant Material Design library that has you covered + in all major use-cases. + + {}} - style={[ - styles.chip, - { - backgroundColor: color(customColor).alpha(0.2).rgb().string(), - }, - ]} - selectedColor={customColor} - > - Outlined selected chip with custom color - - {}} - style={styles.chip} - selectedColor={customColor} - > - Outlined unselected chip with custom color - - {}} - style={styles.chip} - textStyle={styles.tiny} - > - With custom size - - {}} - onClose={() => - setSnackbarProperties({ - visible: true, - text: 'Close button pressed', - }) - } - style={styles.bigTextFlex} - textStyle={styles.bigTextStyle} - ellipsizeMode="middle" - > - With a very big text: React Native Paper is a high-quality, - standard-compliant Material Design library that has you covered in - all major use-cases. - - {}} - onClose={() => - setSnackbarProperties({ - visible: true, - text: 'Custom icon close button pressed', - }) - } - closeIcon="arrow-down" - style={styles.chip} - closeIconAccessibilityLabel="Custom Close icon accessibility label" + style={styles.fullWidthChip} > - With custom close icon + Full width chip - {}} - style={styles.chip} - textStyle={styles.tiny} - > - With custom text - - - {}} style={styles.fullWidthChip}> - Full width chip - + Date: Sun, 26 Oct 2025 18:13:29 -0400 Subject: [PATCH 04/10] fix: apply selected check to v2 section --- src/components/Chip/helpers.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Chip/helpers.tsx b/src/components/Chip/helpers.tsx index d3f476eb56..9e8b035fc9 100644 --- a/src/components/Chip/helpers.tsx +++ b/src/components/Chip/helpers.tsx @@ -87,7 +87,7 @@ const getTextColor = ({ return theme.colors.disabled; } - if (isSelectedColor) { + if (isSelectedColor && selected) { return color(selectedColor).alpha(0.87).rgb().string(); } From 569a8e935e529b28e95327c266c373b93b4db106 Mon Sep 17 00:00:00 2001 From: theBGuy <60308670+theBGuy@users.noreply.github.com> Date: Sun, 26 Oct 2025 18:15:04 -0400 Subject: [PATCH 05/10] test: update selectedColor tests - add cases for passing a `selectedColor` and confirming it is there for `selected: true` and not for `selected: false` --- src/components/__tests__/Chip.test.tsx | 31 ++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx index b094575c35..9aa3083ab3 100644 --- a/src/components/__tests__/Chip.test.tsx +++ b/src/components/__tests__/Chip.test.tsx @@ -152,7 +152,7 @@ describe('getChipColors - text color', () => { }); }); - it('should return custom color, for theme version 3', () => { + it('should return custom color, for theme version 3, when selected', () => { expect( getChipColors({ theme: getTheme(), @@ -165,17 +165,44 @@ describe('getChipColors - text color', () => { }); }); - it('should return custom color, for theme version 2', () => { + it('should not return custom color, for theme version 3, when unselected', () => { + expect( + getChipColors({ + theme: getTheme(), + selectedColor: 'purple', + isOutlined: false, + selected: false, + }) + ).not.toMatchObject({ + textColor: 'purple', + }); + }); + + it('should return custom color, for theme version 2, when selected', () => { expect( getChipColors({ theme: getTheme(false, false), selectedColor: 'purple', isOutlined: false, + selected: true, }) ).toMatchObject({ textColor: color('purple').alpha(0.87).rgb().string(), }); }); + + it('should not return custom color, for theme version 2, when unselected', () => { + expect( + getChipColors({ + theme: getTheme(false, false), + selectedColor: 'purple', + isOutlined: false, + selected: false, + }) + ).not.toMatchObject({ + textColor: color('purple').alpha(0.87).rgb().string(), + }); + }); }); describe('getChipColors - icon color', () => { From 9f9fccdf739ac4efffae687582101f134a370438 Mon Sep 17 00:00:00 2001 From: theBGuy <60308670+theBGuy@users.noreply.github.com> Date: Sun, 26 Oct 2025 18:19:10 -0400 Subject: [PATCH 06/10] fix: only apply selectedColor when `selected` is true - fixes icons color mismatch with text --- src/components/Chip/helpers.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Chip/helpers.tsx b/src/components/Chip/helpers.tsx index 9e8b035fc9..a07cc16b65 100644 --- a/src/components/Chip/helpers.tsx +++ b/src/components/Chip/helpers.tsx @@ -274,14 +274,14 @@ const getRippleColor = ({ }); if (theme.isV3) { - if (isSelectedColor) { + if (isSelectedColor && selected) { return color(selectedColor).alpha(0.12).rgb().string(); } return color(textColor).alpha(0.12).rgb().string(); } - if (isSelectedColor) { + if (isSelectedColor && selected) { return color(selectedColor).fade(0.5).rgb().string(); } From a8721953717f83843c0e503e7ca116b5f52081b7 Mon Sep 17 00:00:00 2001 From: theBGuy <60308670+theBGuy@users.noreply.github.com> Date: Sun, 26 Oct 2025 18:24:41 -0400 Subject: [PATCH 07/10] fix: update `getIconColor` for selected state --- src/components/Chip/helpers.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Chip/helpers.tsx b/src/components/Chip/helpers.tsx index a07cc16b65..2b90d170b4 100644 --- a/src/components/Chip/helpers.tsx +++ b/src/components/Chip/helpers.tsx @@ -216,6 +216,7 @@ const getIconColor = ({ isOutlined, disabled, selectedColor, + selected, }: BaseProps & { selectedColor?: string; }) => { @@ -225,7 +226,7 @@ const getIconColor = ({ return theme.colors.onSurfaceDisabled; } - if (isSelectedColor) { + if (isSelectedColor && selected) { return selectedColor; } @@ -240,7 +241,7 @@ const getIconColor = ({ return theme.colors.disabled; } - if (isSelectedColor) { + if (isSelectedColor && selected) { return color(selectedColor).alpha(0.54).rgb().string(); } From bf2529c3dd201b433773b98c8007cea8c7ee3bb3 Mon Sep 17 00:00:00 2001 From: theBGuy <60308670+theBGuy@users.noreply.github.com> Date: Sun, 26 Oct 2025 18:25:00 -0400 Subject: [PATCH 08/10] test: update tests for ripple & icon selected state --- src/components/__tests__/Chip.test.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx index 9aa3083ab3..d2f4db95eb 100644 --- a/src/components/__tests__/Chip.test.tsx +++ b/src/components/__tests__/Chip.test.tsx @@ -272,6 +272,7 @@ describe('getChipColors - icon color', () => { theme: getTheme(), selectedColor: 'purple', isOutlined: false, + selected: true, }) ).toMatchObject({ iconColor: 'purple', @@ -284,6 +285,7 @@ describe('getChipColors - icon color', () => { theme: getTheme(false, false), selectedColor: 'purple', isOutlined: false, + selected: true, }) ).toMatchObject({ iconColor: color('purple').alpha(0.54).rgb().string(), @@ -326,6 +328,7 @@ describe('getChipColors - ripple color', () => { theme: getTheme(), selectedColor: 'purple', isOutlined: false, + selected: true, }) ).toMatchObject({ rippleColor: color('purple').alpha(0.12).rgb().string(), @@ -338,6 +341,7 @@ describe('getChipColors - ripple color', () => { theme: getTheme(false, false), selectedColor: 'purple', isOutlined: false, + selected: true, }) ).toMatchObject({ rippleColor: color('purple').fade(0.5).rgb().string(), From bff04c51abb0b474bd02fc386eb4169f89ebd2f0 Mon Sep 17 00:00:00 2001 From: theBGuy <60308670+theBGuy@users.noreply.github.com> Date: Sun, 26 Oct 2025 18:30:56 -0400 Subject: [PATCH 09/10] docs: fix jsdoc translation loosing spacing --- src/components/Chip/Chip.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 8d30743abb..8b15d0d603 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -144,7 +144,9 @@ export type Props = $Omit, 'mode'> & { /** * @optional * Theme object containing styling properties. The following theme properties are used: + * * **V3 Theme:** + * * - `colors.onSurfaceDisabled` - Text and icon color when disabled * - `colors.onSurfaceVariant` - Text/icon color for outlined mode, disabled border color, overlay mixing * - `colors.outline` - Border color for outlined mode (when not disabled/selected) @@ -152,7 +154,9 @@ export type Props = $Omit, 'mode'> & { * - `colors.secondaryContainer` - Background color for flat mode * - `colors.onSecondaryContainer` - Text/icon color for flat mode, overlay mixing * - `colors.primary` - Icon color when not disabled (for custom icons) + * * **V2 Theme:** + * * - `colors.disabled` - Text and icon color when disabled * - `colors.text` - Base text and icon color (with alpha applied) * - `colors.surface` - Background color for outlined mode From 89dfcb01e2222f998fad86ffa9fdaa7a87548e42 Mon Sep 17 00:00:00 2001 From: theBGuy <60308670+theBGuy@users.noreply.github.com> Date: Mon, 27 Oct 2025 01:00:53 -0400 Subject: [PATCH 10/10] fix: add selected check for getBorderColor --- src/components/Chip/helpers.tsx | 5 +++-- src/components/__tests__/Chip.test.tsx | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Chip/helpers.tsx b/src/components/Chip/helpers.tsx index 2b90d170b4..879d8ebc7c 100644 --- a/src/components/Chip/helpers.tsx +++ b/src/components/Chip/helpers.tsx @@ -22,6 +22,7 @@ const getBorderColor = ({ disabled, selectedColor, backgroundColor, + selected, }: BaseProps & { backgroundColor: string; selectedColor?: string }) => { const isSelectedColor = selectedColor !== undefined; @@ -35,7 +36,7 @@ const getBorderColor = ({ return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string(); } - if (isSelectedColor) { + if (isSelectedColor && selected) { return color(selectedColor).alpha(0.29).rgb().string(); } @@ -43,7 +44,7 @@ const getBorderColor = ({ } if (isOutlined) { - if (isSelectedColor) { + if (isSelectedColor && selected) { return color(selectedColor).alpha(0.29).rgb().string(); } diff --git a/src/components/__tests__/Chip.test.tsx b/src/components/__tests__/Chip.test.tsx index d2f4db95eb..5000fb5cc3 100644 --- a/src/components/__tests__/Chip.test.tsx +++ b/src/components/__tests__/Chip.test.tsx @@ -789,6 +789,7 @@ describe('getChipColor - border color', () => { theme: getTheme(false, false), selectedColor: 'purple', isOutlined: true, + selected: true, }) ).toMatchObject({ borderColor: color('purple').alpha(0.29).rgb().string(),