bpk-component-chip-css

bpk-component-chip

Backpack chip component.

Installation

npm install bpk-component-chip --save-dev

Usage

import React from 'react';
import BpkSelectableChip, { BpkDismissibleChip, CHIP_TYPES } from 'bpk-component-chip';
import BeachIconSm from 'bpk-component-icon/sm/beach';

export default () => (

  <div style={{ display: 'flex' }}> // IMPORTANT: Flex styles make sure chips align with each other
    // Standard selectable chip.
    <BpkSelectableChip
      accessibilityLabel="Press to toggle chip"
      selected={false}
      onClick={() => { /* Use state to set 'selected={true}' */ }}
    >
      Toggle me
    </BpkSelectableChip>

    // Selectable chip with an icon.
    <BpkSelectableChip
      accessibilityLabel="Press to toggle chip"
      selected={false}
      onClick={() => { /* Use state to set 'selected={true}' */ }}
      leadingAccessoryView={<BeachIconSm />}
    >
      Toggle me
    </BpkSelectableChip>

    // Standard dismissible chip.
    <BpkDismissibleChip
      accessibilityLabel="Press to dismiss chip"
      onClick={() => { /* Use state to handle removing this chip. */ }}
    >
      Dismiss me
    </BpkDismissibleChip>

    // Dismissible chip with an icon.
      <BpkDismissibleChip
      accessibilityLabel="Press to dismiss chip"
      onClick={() => { /* Use state to handle removing this chip. */ }}
      leadingAccessoryView={<BeachIconSm />}
    >
      Dismiss me
    </BpkDismissibleChip>
  </div>
);

Props

BpkSelectableChip

Property	PropType	Required	Default Value
accessibilityLabel	string	true	-
children	node	true	-
onClick	func	true	-
className	string	false	null
disabled	bool	false	false
leadingAccessoryView	node	false	null
selected	bool	false	false
trailingAccessoryView	node	false	null
type	oneOf(CHIP_TYPES.light, CHIP_TYPES.primary, CHIP_TYPES.success)

BpkDismissibleChip

Dismissible chips are selectable chips that have been preconfigured to have a 'close' icon trailing accessory view and cannot be selected, so they have the same props as BpkSelectableChip, minus trailingAccessoryView and selected.

Property	PropType	Required	Default Value
accessibilityLabel	string	true	-
children	node	true	-
onClick	func	true	-
className	string	false	null
disabled	bool	false	false
leadingAccessoryView	node	false	null
type	oneOf(CHIP_TYPES.light, CHIP_TYPES.primary, CHIP_TYPES.success)

Theme Props

Primary

• chipPrimarySelectedBackgroundColor
• chipPrimarySelectedHoverBackgroundColor
• chipPrimarySelectedActiveBackgroundColor
• chipPrimarySelectedTextColor

Light

• chipLightSelectedBackgroundColor
• chipLightSelectedHoverBackgroundColor
• chipLightSelectedActiveBackgroundColor
• chipLightSelectedTextColor

Success

• chipSuccessSelectedBackgroundColor
• chipSuccessSelectedHoverBackgroundColor
• chipSuccessSelectedActiveBackgroundColor
• chipSuccessSelectedTextColor