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