diff --git a/example/src/Examples/ChipExample.js b/example/src/Examples/ChipExample.js index 9612c7dde4..4baa819bfb 100644 --- a/example/src/Examples/ChipExample.js +++ b/example/src/Examples/ChipExample.js @@ -20,7 +20,12 @@ class ChipExample extends React.Component { > - {}} style={styles.chip}> + {}} + style={styles.chip} + > Simple {}} onClose={() => {}} style={styles.chip}> @@ -137,6 +142,42 @@ class ChipExample extends React.Component { + + + {}} + style={[styles.chip, { backgroundColor: 'rgba(128,0,128,0.2)' }]} + selectedColor="#800080" + > + Flat selected chip with custom color + + {}} + style={styles.chip} + selectedColor="#800080" + > + Flat unselected chip with custom color + + {}} + style={[styles.chip, { backgroundColor: 'rgba(128,0,128, 0.2)' }]} + selectedColor="#800080" + > + Outlined selected chip with custom color + + {}} + style={styles.chip} + selectedColor="#800080" + > + Outlined unselected chip with custom color + + + ); } diff --git a/src/components/Chip.js b/src/components/Chip.js index d11aa3712f..0c5ec199b9 100644 --- a/src/components/Chip.js +++ b/src/components/Chip.js @@ -38,9 +38,13 @@ type Props = React.ElementConfig & {| */ avatar?: React.Node, /** - * Whether to style the chip as selected. + * Whether chip is selected. */ selected?: boolean, + /** + * Whether to style the chip color as selected. + */ + selectedColor?: string, /** * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch. */ @@ -137,6 +141,7 @@ class Chip extends React.Component { style, theme, testID, + selectedColor, ...rest } = this.props; const { dark, colors } = theme; @@ -151,20 +156,24 @@ class Chip extends React.Component { const borderColor = mode === 'outlined' - ? color(dark ? white : black) + ? color( + selectedColor !== undefined + ? selectedColor + : color(dark ? white : black) + ) .alpha(0.29) .rgb() .string() : backgroundColor; const textColor = disabled ? colors.disabled - : color(colors.text) + : color(selectedColor !== undefined ? selectedColor : colors.text) .alpha(0.87) .rgb() .string(); const iconColor = disabled ? colors.disabled - : color(colors.text) + : color(selectedColor !== undefined ? selectedColor : colors.text) .alpha(0.54) .rgb() .string(); @@ -175,6 +184,13 @@ class Chip extends React.Component { .rgb() .string(); + const underlayColor = selectedColor + ? color(selectedColor) + .fade(0.5) + .rgb() + .string() + : selectedBackgroundColor; + const accessibilityTraits = ['button']; const accessibilityStates = []; @@ -210,7 +226,7 @@ class Chip extends React.Component { onPress={onPress} onPressIn={this._handlePressIn} onPressOut={this._handlePressOut} - underlayColor={selectedBackgroundColor} + underlayColor={underlayColor} disabled={disabled} accessibilityLabel={accessibilityLabel} accessibilityTraits={accessibilityTraits}