@react-md/chip/CHANGELOG.md

Create a compact actionable element that can be used to represent an input, attribute, or action. A chip can be used to represent filters, tags, emails, or other inline elements.

# Change Log

All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

## [5.1.6](https://github.com/mlaursen/react-md/compare/v5.1.5...v5.1.6) (2023-12-11)


### Bug Fixes

* **@react-md/chip:** add overflow to support font icons ([da44bbd](https://github.com/mlaursen/react-md/commit/da44bbd8de1de8b1d50d6a0cc35cffa7906a58c2)), closes [#1432](https://github.com/mlaursen/react-md/issues/1432)






## [5.1.3](https://github.com/mlaursen/react-md/compare/v5.1.2...v5.1.3) (2022-05-07)


### Documentation

* fix typos throughout codebase ([725d1a2](https://github.com/mlaursen/react-md/commit/725d1a252482dba56088dffa2f773b2ea13fb08a))






## [5.1.2](https://github.com/mlaursen/react-md/compare/v5.1.1...v5.1.2) (2022-04-02)

**Note:** Version bump only for package @react-md/chip





# [5.1.0](https://github.com/mlaursen/react-md/compare/v5.0.0...v5.1.0) (2022-03-18)


### Other Internal Changes

* run lint-scripts --fix for consistent-type-imports ([42d839d](https://github.com/mlaursen/react-md/commit/42d839d359922e0a8ee3775a75162b9755a2c2b6))






# [5.0.0](https://github.com/mlaursen/react-md/compare/v4.0.3...v5.0.0) (2022-01-31)

**Note:** Version bump only for package @react-md/chip





## [4.0.3](https://github.com/mlaursen/react-md/compare/v4.0.2...v4.0.3) (2021-12-31)


### Other Internal Changes

* Updated all packages' peerDependenciesMeta ([60fcd71](https://github.com/mlaursen/react-md/commit/60fcd719ac785c2f0b9d27cda82baa3c773c0e5a)), closes [#1319](https://github.com/mlaursen/react-md/issues/1319)






## [4.0.1](https://github.com/mlaursen/react-md/compare/v4.0.0...v4.0.1) (2021-11-27)

**Note:** Version bump only for package @react-md/chip





# [4.0.0](https://github.com/mlaursen/react-md/compare/v3.1.1...v4.0.0) (2021-11-24)


### Bug Fixes

* **sass:** Do not use legacy global functions ([6159e16](https://github.com/mlaursen/react-md/commit/6159e161af72a6e2d5fe43afb02ef537c3f55c11))


### Features

* Update to use new JSX Transform and latest `eslint` ([8111cd3](https://github.com/mlaursen/react-md/commit/8111cd31e45bf60c1b92509264af1b71dfba5696))


### Other Internal Changes

* always skip lib check ([229cef1](https://github.com/mlaursen/react-md/commit/229cef1e3d338ea362c1a2eaac06204c84ff21a6))
* **react-md:** Remove prop-types package and usage ([2637a6f](https://github.com/mlaursen/react-md/commit/2637a6f43d681a06054e3a4518f692cf51baf997))
* **stylelint:** Updated to use `stylelint` ([22d1598](https://github.com/mlaursen/react-md/commit/22d15985061df76d827d4ca9319198526e320f11))


### Breaking Changes

* Minimum React version is now 16.14 instead of 16.8
* **react-md:** There will no longer be run-time prop validation with
the `prop-types` package.






# [3.1.0](https://github.com/mlaursen/react-md/compare/v3.0.1...v3.1.0) (2021-09-10)


### Other Internal Changes

* ran `yarn format` to include new files ([48d3d7f](https://github.com/mlaursen/react-md/commit/48d3d7fddb0435edf7dec9d0ba38cf3f0f251709))






## [3.0.1](https://github.com/mlaursen/react-md/compare/v3.0.0...v3.0.1) (2021-08-15)


### Bug Fixes

* Updated peerDependencies to fix yarn berry peer requirements ([250efcd](https://github.com/mlaursen/react-md/commit/250efcdd81ea39c06b08eb30109589c89d9b8e0f)), closes [#1224](https://github.com/mlaursen/react-md/issues/1224)






# [3.0.0](https://github.com/mlaursen/react-md/compare/v2.9.1...v3.0.0) (2021-08-13)

**Note:** Version bump only for package @react-md/chip





## [2.9.1](https://github.com/mlaursen/react-md/compare/v2.9.0...v2.9.1) (2021-07-27)


### Other Internal Changes

* **install:** slighly reduce install size by excluding tests in publish ([9d01a44](https://github.com/mlaursen/react-md/commit/9d01a44b81b619d6ac1c4d458005c99838fc6894))






# [2.9.0](https://github.com/mlaursen/react-md/compare/v2.8.5...v2.9.0) (2021-07-18)

**Note:** Version bump only for package @react-md/chip





## [2.8.5](https://github.com/mlaursen/react-md/compare/v2.8.4...v2.8.5) (2021-07-03)

**Note:** Version bump only for package @react-md/chip





## [2.8.4](https://github.com/mlaursen/react-md/compare/v2.8.3...v2.8.4) (2021-06-10)

**Note:** Version bump only for package @react-md/chip





## [2.8.3](https://github.com/mlaursen/react-md/compare/v2.8.2...v2.8.3) (2021-05-18)


### Documentation

* **react-md.dev:** updated tsdoc to work with `typedoc` ([cf54c35](https://github.com/mlaursen/react-md/commit/cf54c359268332245d1dad8a8d91e0476cd8cb33))






## [2.8.2](https://github.com/mlaursen/react-md/compare/v2.8.1...v2.8.2) (2021-04-23)

**Note:** Version bump only for package @react-md/chip





# [2.8.0](https://github.com/mlaursen/react-md/compare/v2.7.1...v2.8.0) (2021-04-22)


### Other Internal Changes

* **tsconfig:** separate tsconfig by package instead of a single root ([b278230](https://github.com/mlaursen/react-md/commit/b2782303b2a2db07eeaa25b6a3d04337976cffaa))






## [2.7.1](https://github.com/mlaursen/react-md/compare/v2.7.0...v2.7.1) (2021-03-23)


### Other Internal Changes

* **ts:** stopped using FC type ([c5daa47](https://github.com/mlaursen/react-md/commit/c5daa47d73516e075c036fd745e7228d7f155a62))






# [2.7.0](https://github.com/mlaursen/react-md/compare/v2.6.0...v2.7.0) (2021-02-28)


### Documentation

* **tsdoc:** fixed remaining tsdoc syntax warnings ([946f4dd](https://github.com/mlaursen/react-md/commit/946f4dddf380b9f2313fb76d54d969aa2adbff53))
* **tsdoc:** fixed some tsdoc annotations and styling ([0449b86](https://github.com/mlaursen/react-md/commit/0449b86e4e51793710b35a452b7ebcbb6e7b5b2e))
* **tsdoc:** updated \@since annotations ([c62027e](https://github.com/mlaursen/react-md/commit/c62027ebf2223167a2fde0378882e4b934d61971))


### Other Internal Changes

* updated test coverage to not include conditional component PropTypes ([24e5df1](https://github.com/mlaursen/react-md/commit/24e5df14c731411d7691253383435036326407b5))






# [2.6.0](https://github.com/mlaursen/react-md/compare/v2.5.5...v2.6.0) (2021-02-13)


### Features

* **@react-md/chip:** added support for noninteractable chips ([9309985](https://github.com/mlaursen/react-md/commit/9309985a2efaafd731bbfb3e157d8b1443b297de)), closes [#1046](https://github.com/mlaursen/react-md/issues/1046)






## [2.5.5](https://github.com/mlaursen/react-md/compare/v2.5.4...v2.5.5) (2021-01-30)

**Note:** Version bump only for package [@react-md/chip](../chip)

## [2.5.4](https://github.com/mlaursen/react-md/compare/v2.5.3...v2.5.4) (2021-01-27)

**Note:** Version bump only for package [@react-md/chip](../chip)

# [2.5.0](https://github.com/mlaursen/react-md/compare/v2.4.3...v2.5.0) (2020-12-15)

**Note:** Version bump only for package [@react-md/chip](../chip)

## [2.4.2](https://github.com/mlaursen/react-md/compare/v2.4.1...v2.4.2) (2020-10-23)

**Note:** Version bump only for package [@react-md/chip](../chip)

## [2.4.1](https://github.com/mlaursen/react-md/compare/v2.4.0...v2.4.1) (2020-10-17)

**Note:** Version bump only for package [@react-md/chip](../chip)

# [2.4.0](https://github.com/mlaursen/react-md/compare/v2.3.1...v2.4.0) (2020-10-17)

### Features

- [@react-md/theme](../theme): Better Contrast Colors by Default and dev-utils
  refactor ([#955](https://github.com/mlaursen/react-md/issues/955))
  ([519b128](https://github.com/mlaursen/react-md/commit/519b128522de944d55ff96a1e1125447665ed586))

## [2.3.1](https://github.com/mlaursen/react-md/compare/v2.2.0...v2.3.1) (2020-09-15)

**Note:** Version bump only for package [@react-md/chip](../chip)

# [2.3.0](https://github.com/mlaursen/react-md/compare/v2.2.0...v2.3.0) (2020-09-10)

**Note:** Version bump only for package [@react-md/chip](../chip)

## [2.2.2](https://github.com/mlaursen/react-md/compare/v2.2.1...v2.2.2) (2020-09-02)

**Note:** Version bump only for package [@react-md/chip](../chip)

## [2.2.1](https://github.com/mlaursen/react-md/compare/v2.2.0...v2.2.1) (2020-09-02)

**Note:** Version bump only for package [@react-md/chip](../chip)

## [2.1.2](https://github.com/mlaursen/react-md/compare/v2.1.1...v2.1.2) (2020-08-01)

**Note:** Version bump only for package [@react-md/chip](../chip)

## [2.1.1](https://github.com/mlaursen/react-md/compare/v2.1.0...v2.1.1) (2020-07-21)

**Note:** Version bump only for package [@react-md/chip](../chip)

# [2.1.0](https://github.com/mlaursen/react-md/compare/v2.0.4...v2.1.0) (2020-07-12)

### Features

- Improved Dark Mode using Raising Elevation
  ([547877c](https://github.com/mlaursen/react-md/commit/547877c51217a544fdaad9c77e2469a45f30336e)),
  closes [#860](https://github.com/mlaursen/react-md/issues/860)

## [2.0.2](https://github.com/mlaursen/react-md/compare/v2.0.1...v2.0.2) (2020-06-30)

### Bug Fixes

- **LICENSE:** Removed the time range from license since it was incorrect
  ([50c9021](https://github.com/mlaursen/react-md/commit/50c9021cedc0d642758b9fd541bb6c93d2fe1786))
- Added `sideEffects` field to `package.json`
  ([31820b9](https://github.com/mlaursen/react-md/commit/31820b9b43705e5849664500a17b6849eb6dc2a9))
- `sideEffects` formatting
  ([78a7b6b](https://github.com/mlaursen/react-md/commit/78a7b6b0e40c7daefb749835670705f21bd21720))

## v2.0.1

No changes.

## v2.0.0

The chip package was completely re-written with Typescript and additional
theming support for the v2 release.

### New Behavior and Features

- supports a new `"outline"` theme along with the old `"solid"` theme
- supports rendering as a checkbox/radio component with a new `selected` state
  that includes a customizable icon
- supports rendering a `CircularProgress` bar as the `leftIcon`
- automatically updates padding and spacing for right-to-left languages
- supports updating all the sizing, spacing, and colors through css variables
  with the new theme functions and mixins
- renders as a [toggle button](https://www.w3.org/TR/wai-aria-practices/#button)

### Breaking Changes

- everything related to styling and props for the chip
- no longer supports a dense spec out of the box since they are already pretty
  dense

#### New SCSS Variables, Functions, and Mixins

- `$rmd-chip-disable-focus-background-color: $rmd-states-use-focus-shadow !default` -
  boolean if the chip should disable the background-color change when it gains
  keyboard focus. This is disabled by default since the focus-shadow looks a bit
  nicer than the background-color changes due to the color of chips
- `rmd-chip-border-radius: 1rem !default` - the new border radius to apply to
  chips
- `$rmd-chip-small-spacing: 0.25rem !default` - the amount of spacing to use
  between the left edge and the leading icon/avatar in a chip
- `$rmd-chip-medium-spacing: 0.5rem !default` - the amount of spacing to use
  between the leading icon/avatar and the chip's main content/text and the
  trailing icon
- `$rmd-chip-large-spacing: 0.75rem !default` - the amount of spacing to use for
  the chip's edge when there are no leading or trailing addons/icons.
- `$rmd-chip-icon-size: 1.125rem !default` - the size to use for icons that
  appear as a child of the chip
- `$rmd-chip-avatar-size: 1.5rem !default` - the size to use for avatars that
  appear as a child of the chip
- `$rmd-chip-progress-size: $rmd-chip-icon-size !default` - the size for a
  circular progress within a chip
- `$rmd-chip-progress-width: 12 !default` - the `stroke-width` to use for the
  circular progress within a chip
- `$rmd-chip-themed-background-color: rmd-theme-get-swatch($rmd-theme-primary, 300, false, darken($rmd-theme-primary, 20%)) !default` -
  the background-color to use for the selected and themed state of the chip
- `$rmd-chip-themed-color: if(rmd-theme-tone($rmd-chip-themed-background-color) == light, $rmd-black-base, $rmd-white-base) !default` -
  The text color to use for the selected and themed state of the chip
- `$rmd-chip-solid-light-disabled-background-color: $md-grey-100 !default` - the
  background color to use for a solid disabled chip when using the light theme
- `$rmd-chip-solid-dark-disabled-background-color: lighten($rmd-grey-900, 2%) !default` -
  the background color to use for a solid disabled chip when using the dark
  theme
- `$rmd-chip-solid-background-color: if($rmd-theme-light, $rmd-chip-solid-light-background-color, $rmd-chip-solid-dark-background-color) !default` -
  the default background color for solid themed chips
- `$rmd-chip-solid-color: if($rmd-theme-light, $rmd-chip-solid-light-color, $rmd-chip-solid-dark-color) !default` -
  the default color for solid themed chips
- `$rmd-chip-solid-disabled-background-color: if($rmd-theme-light, $rmd-chip-solid-light-disabled-background-color, $rmd-chip-solid-dark-disabled-background-color) !default` -
  the default background-color to use for disabled solid chips
- `$rmd-chip-outline-light-background-color: $rmd-theme-light-surface !default` -
  the background-color to use for an outlined chip when using the light theme
- `$rmd-chip-outline-light-color: if($rmd-theme-tone($rmd-chip-outline-light-background-color) == light, $rmd-black-base, $rmd-white-base) !default` -
  the text color to use for an outlined chip when using the light theme
- `$rmd-chip-outline-dark-background-color: $rmd-theme-dark-surface !default` -
  the background-color to use for an outlined chip when using the dark theme
- `$rmd-chip-outline-dark-color: if($rmd-theme-tone($rmd-chip-outline-dark-background-color) == dark, $rmd-black-base, $rmd-white-base) !default` -
  the text color to use for an outlined chip when using the dark theme
- `$rmd-chip-outline-background-color: if($rmd-theme-light, $rmd-chip-outline-light-background-color, $rmd-chip-outline-dark-background-color) !default` -
  the default background-color to use for an outlined chip
- `$rmd-chip-outline-color: if($rmd-theme-light, $rmd-chip-outline-light-color, $rmd-chip-outline-dark-color) !default` -
  the default color to use for an outlined chip
- `$rmd-chip-outline-border-color: $rmd-grey-300 !default` - the border color to
  use for an outline themed chip
- `$rmd-chip-box-shadow: inset 0 0 0 1px !default` - the base box-shadow to
  apply to chips when outlined
- `@function rmd-chip-theme` - gets one of the theme values and validates that
  the theme name is valid
- `@function rmd-chip-theme-var` - gets one of the theme values as a css
  variable with a fallback value and validates that the theme name is valid
- `@mixin rmd-chip-theme` - applies one of the theme values to a css property as
  a css variable
- `@mixin rmd-chip-theme-update-var` - updates one of the theme values as a css
  variable

#### Renamed SCSS Variables, Functions, and Mixins

- renamed `$md-chip-height` to `$rmd-chip-height` and changed the default value
  from `32px` to `2rem`
- renamed `$md-chip-light-theme-color` to `$rmd-chip-solid-light-color` and
  changed the default value from `rgba($md-black-base, 0.87)` to
  `if(rmd-theme-tone($rmd-chip-solid-light-background-color) == light, $rmd-black-base, $rmd-white-base)`
- renamed `$md-chip-light-theme-bg-color` to
  `$rmd-chip-solid-light-background-color`
- renamed `$md-chip-dark-theme-color` to `$rmd-chip-solid-dark-color` and
  changed the default value from `get-color(secondar, false)` to
  `if(rmd-theme-tone($rmd-chip-solid-dark-background-color) == light, $rmd-black-base, $rmd-white-base)`
- renamed `$md-chip-dark-theme-bg-color` to `$rmd-chip-dark-background-color`
  and changed the default value from `$md-grey-600` to `$rmd-grey-900`

#### Removed SCSS Variables Placeholders, and Mixins

- removed `$md-chip-include-remove` since it's no longer required
- removed `$md-chip-include-avatar` since it's no longer required
- removed `$md-chip-include-contact` and `$md-chip-contact-font-size` since this
  never really worked anyways
- removed `$md-chip-font-size` since it's no longer configurable out of the box
- removed `$md-chip-icon-color` since it's no longer required
- removed `$md-chip-default-padding`, `$md-chip-avatar-left-padding`,
  `$md-chip-icon-padding`, and `$md-chip-icon-dense-padding` since the padding
  was changed to spacing
- removed `@mixin react-md-theme-chips` since it was replaced with the new
  theming api