# 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)

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





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


### Bug Fixes

* **@react-md/button:** do not shrink in flex containers ([66bf6e0](https://github.com/mlaursen/react-md/commit/66bf6e0f97a744d02c3813f63e841293c68de2ea))


### Other Internal Changes

* **typos:** fix additional typos throughout repo ([ef20132](https://github.com/mlaursen/react-md/commit/ef2013288ce8649b9fddba9bc23c71df72ea03a1))






## [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/button





# [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/button





## [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)


### Other Internal Changes

* Updated imports to use `import type` when possible ([ba96bb6](https://github.com/mlaursen/react-md/commit/ba96bb62eeddcc0879f6d584aa670850203561e6))






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


### 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))


### 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/button





## [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/button





## [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/button





## [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/button





## [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/button





# [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)

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





# [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))


### 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)

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





## [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/button](../button)

## [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/button](../button)

# [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/button](../button)

## [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/button](../button)

## [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/button](../button)

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

### Bug Fixes

- [@react-md/states](../states): fixed usedPressStates to pass onClick like
  other state hooks
  ([82cd676](https://github.com/mlaursen/react-md/commit/82cd67695c2ecd6e9a710d5fbfce97ae4dfeda80))

### Features

- [@react-md/button](../button): added built-in support for rendering
  `CircularProgress`
  ([c6c616b](https://github.com/mlaursen/react-md/commit/c6c616b72866cc1533b7f83c4d9f031354319dfc))
- [@react-md/button](../button): added support for disabled theme without
  disabling button
  ([6a647e2](https://github.com/mlaursen/react-md/commit/6a647e23831c7b3c97eb12baa47dfd5dd074271a))
- [@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/button](../button)

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

### Bug Fixes

- [@react-md/states](../states): fixed usedPressStates to pass onClick like
  other state hooks
  ([82cd676](https://github.com/mlaursen/react-md/commit/82cd67695c2ecd6e9a710d5fbfce97ae4dfeda80))

### Features

- [@react-md/button](../button): added built-in support for rendering
  `CircularProgress`
  ([c6c616b](https://github.com/mlaursen/react-md/commit/c6c616b72866cc1533b7f83c4d9f031354319dfc))
- [@react-md/button](../button): added support for disabled theme without
  disabling button
  ([6a647e2](https://github.com/mlaursen/react-md/commit/6a647e23831c7b3c97eb12baa47dfd5dd074271a))

## [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/button](../button)

## [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/button](../button)

# [2.2.0](https://github.com/mlaursen/react-md/compare/v2.1.2...v2.2.0) (2020-08-11)

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

## [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/button](../button)

## [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/button](../button)

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

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

## [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 `Button` component was completely re-written in this release for full
Typescript support, forwarding the ref to the `<button>` element, and can be
rendered with only children to enable a default theme. However, the `Button`
component removed built-in support for tooltips and rendering icons with text
but can be easily added back in with the `@react-md/tooltip` and
`@react-md/icon` packages.

A new `UnstyledButton` component was added that can be used to create a
clickable element with the native accessibility of a `<button>` without the
default styles.

### New Behavior and Features

- added a new `UnstyledButton` component that can be used for simple clickable
  elements without the default browser button styles (think of this as a better
  version of `AccessibleFakeButton`)
- buttons can be rendered without requiring any of the theme props
- buttons will have a static size across all device sizes instead of changing
  between mobile and desktop
- switched from `px` to `rem`
- the SCSS variables, functions, and mixins are now in separate files and moved
  to the `dist` (and `dist/scss`) folder instead of `src`
- updated the theme to be configured with css variables and utility mixins

### Breaking changes

- updated the ref to be forwarded on to the `<button>` element
- removed built-in support for rendering icons
- removed the `component` and `href` props
- removed the `primary`, `secondary`, `flat`, `raised`, `floating`,
  `swapTheming`, and `icon` theme props
- removed the `fixed`, `fixedPosition`, and `mini` props
- removed the `tooltipLabel`, `tooltipDelay`, and `tooltipPosition` props
- removed the `iconClassName`, `iconChildren`, `iconEl`, `forceIconSize`,
  `forceIconFontSize`, and `svg` props
- removed the deprecated `FlatButton`, `RaisedButton`, `IconButton`, and
  `FloatingButton` components
- every SCSS variable, function, and mixin has been renamed or removed

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

- `$rmd-button-text-icon-inherit-color: true !default` - boolean if buttons that
  have both text and icons should force the icons to inherit the button color
- `$rmd-button-text-icon-size: 1.125rem !default` - a new icon size to apply to
  buttons that have both text and icons
- `$rmd-button-text-border-radius: 0.5rem !default` - a new border radius to
  apply to buttons that include text. **Note: there was no `border-radius` in
  `v1` for text buttons**
- `$rmd-button-floating-margin: 1.5rem !default` - the default viewport margin
  to apply to floating buttons. This is used in the
  `$rmd-button-floating-positions` variable
- `$rmd-button-floating-positions` - a Map of floating position styles to
  create. Each key will be made into a `className` and the value will apply the
  styles
- `@function rmd-button-theme` - gets one of the theme values and validates that
  the theme name is valid
- `@function rmd-button-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-button-theme` - applies one of the theme values to a css property
  as a css variable
- `@mixin rmd-button-theme-update-var` - updates one of the theme values as a
  css variable
- `@mixin rmd-button-reset` - a minimal button reset that removes the default
  borders, outline, and focus effects from a button and adds
  `display: inline-flex`
- `@mixin rmd-button-base` - generates the base styles for a styled button
  within a selector if the button styles should be used without the `Button`
  component
- `@mixin rmd-button-text` - generates the styles for a text button within a
  selector if the text button styles should be used without the `Button`
  component
- `@mixin rmd-button-icon` - generates the styles for an icon button within a
  selector if the icon button styles should be used without the `Button`
  component
- `@mixin rmd-button` - generates the styles for a button within a selector if
  the button styles should be used without the `Button` component
- `mixin rmd-button-styled` - generates the base styles for an unstyled button
  if it's useful to not use the `UnstyledButton` component

#### Renamed SCSS Variables and Values

- `$md-btn-tb-padding` was renamed to `$rmd-button-text-vertical-padding` and
  changed from a default value of `8px` to `0`
- `$md-btn-lr-padding` was renamed to `$rmd-button-text-horizontal-padding` and
  changed from a default value of `16px` to `1rem` (same size, just `rem`-ified)
- `$md-btn-min-width` was renamed to `$rmd-button-text-min-width` and changed
  from a default value of `88px` to a smaller `4rem`
- `$md-btn-fixed-z-index` was renamed to `$rmd-button-floating-z-index` and
  changed the default value from `10` to `25`
- `@mixin react-md-button-fixed-positions` was renamed to
  `@mixin rmd-button-floating-positions`

#### Removed SCSS Variables and Mixins

- removed `$md-btn-include-flat`, `$md-btn-include-raised`,
  `$md-btn-include-icon`, and `$md-btn-include-floating` variables have been
  completely removed with no new implementation
- removed `$md-btn-mobile-floating-margin`, `$md-btn-desktop-floating-margin`,
  `$md-btn-floating-size`, `$md-btn-floating-dense-size`,
  `$md-btn-floating-mini-size`, and `$md-btn-floating-fixed-positions` in favor
  of the new floating variables
- removed `$md-btn-mobile-height`, `$md-btn-mobile-font-size`,
  `$md-btn-desktop-height`, and `$md-btn-desktop-font-size` since buttons no
  longer change size and font-size based on device size
- removed `@mixin react-md-theme-buttons` since the new theming functions and
  mixins are preferred
- removed `@mixin react-md-buttons-mobile`, `@mixin react-md-buttons-desktop`,
  and `@mixin react-md-buttons-media` due to having a static size on all devices
  now

### Rendering non-button components and elements

This release "simplified" the button component as now it can only be rendered as
a `<button>`. There is no longer support to render as a link (when the `href`)
prop was provided or the provided `component` prop to be able to render as any
React Component. Instead, there is now an exported `buttonThemeClassNames`
function that can be used instead to apply a button theme to any other component
with the generated class names.

```tsx
const LinkStyledButton = ({
  classname,
  theme,
  themeType,
  buttonType,
  children,
  ...props
}) => (
  <a
    {...props}
    className={buttonThemeClassNames({
      className,
      theme,
      themeType,
      buttonType,
      children,
    })}
  >
    {children}
  </a>
);
```

### Theming

The theme has been updated along with the default props so now you can render a
`Button` without provided any props and it will render without any warnings and
with general button styles. This is possible since the theming props were moved
into:

- `theme`
- `themeType`
- `buttonType`

#### `theme`

Using the new `theme` prop is a replacement the `primary` and `secondary` props,
but also includes 3 additional themes. The supported values are:

- `clear`
- `primary` (default)
- `secondary`
- `warning`
- `error`

#### `themeType`

Using the new `themeType` prop is a replacement for the `raised`, `flat`, and
`floating` props. The supported values are:

- `flat` (default)
- `outline`
- `contained` - this is a rename for the `raised` and `floating` specs

The value of this prop affects how the `theme` prop gets applied as well. A
`themeType` of `flat` will apply the `theme` to the text color of the button. A
`themeType` of `outline` will apply the `theme` to the text color and outline of
the button. Finally, a `themeType` of `contained` will apply the theme color to
the background of the button and update the text color to be legible on that
background color.

#### `buttonType`

Using the new `buttonType` prop is how you can now render either as a text or
icon button. The supported values are:

- text (default)
- icon

A small change is that the `floating` spec was entirely removed as it can be
implemented by providing `buttonType="icon"` and `themeType="contained"`.

### Icon Support

Built-in icon rendering support was also removed since it became confusing about
how to render an icon button vs an text button with an icon. The icons can be
added back by using the `TextIconSpacing` component from the [@react-md/icon]
package. There is also a new icon package [@react-md/material-icons] that can be
used to implement all the pre-made icons, so it felt easier to keep the icon
support omitted.

```tsx
import { Button } from "@react-md/button";
import { TextIconSpacing } from "@react-md/icon";
import { InfoSVGIcon } from "@react-md/material-icons";

const Example = () => (
  <Button>
    <TextIconSpacing icon={<InfoSVGIcon />}>Info</TextIconSpacing>
  </Button>
);
```

[@react-md/icon]: https://github.com/mlaursen/react-md/tree/main/packages/icon
[@react-md/material-icons]:
  https://github.com/mlaursen/react-md/tree/main/packages/material-icons