Skip to content

Commit 9a7f40b

Browse files
Big-CheungEvan Cheung
andauthored
feat: option for hiding check icon on selected chip (#3969)
Co-authored-by: Evan Cheung <evancheung@funktroniclabs.com>
1 parent f62b694 commit 9a7f40b

File tree

1 file changed

+11
-2
lines changed

1 file changed

+11
-2
lines changed

src/components/Chip/Chip.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,11 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
6565
* Whether to display overlay on selected chip
6666
*/
6767
showSelectedOverlay?: boolean;
68+
/**
69+
* Whether to display default check icon on selected chip.
70+
* Note: Check will not be shown if `icon` is specified. If specified, `icon` will be shown regardless of `selected`.
71+
*/
72+
showSelectedCheck?: boolean;
6873
/**
6974
* Color of the ripple effect.
7075
*/
@@ -180,6 +185,7 @@ const Chip = ({
180185
selectedColor,
181186
rippleColor: customRippleColor,
182187
showSelectedOverlay = false,
188+
showSelectedCheck = true,
183189
ellipsizeMode,
184190
compact,
185191
elevated = false,
@@ -256,7 +262,10 @@ const Chip = ({
256262
const multiplier = isV3 ? (compact ? 1.5 : 2) : 1;
257263
const labelSpacings = {
258264
marginRight: onClose ? 0 : 8 * multiplier,
259-
marginLeft: avatar || icon || selected ? 4 * multiplier : 8 * multiplier,
265+
marginLeft:
266+
avatar || icon || (selected && showSelectedCheck)
267+
? 4 * multiplier
268+
: 8 * multiplier,
260269
};
261270
const contentSpacings = {
262271
paddingRight: isV3 ? (onClose ? 34 : 0) : onClose ? 32 : 4,
@@ -320,7 +329,7 @@ const Chip = ({
320329
: avatar}
321330
</View>
322331
) : null}
323-
{icon || selected ? (
332+
{icon || (selected && showSelectedCheck) ? (
324333
<View
325334
style={[
326335
styles.icon,

0 commit comments

Comments
 (0)