All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package @react-md/button
Note: Version bump only for package @react-md/button
Note: Version bump only for package @react-md/button
typedoc
(cf54c35)Note: Version bump only for package @react-md/button
Note: Version bump only for package @react-md/button
Note: Version bump only for package @react-md/button
Note: Version bump only for package @react-md/button
Note: Version bump only for package @react-md/button
Note: Version bump only for package @react-md/button
Note: Version bump only for package @react-md/button
Note: Version bump only for package @react-md/button
CircularProgress
(c6c616b)Note: Version bump only for package @react-md/button
CircularProgress
(c6c616b)Note: Version bump only for package @react-md/button
Note: Version bump only for package @react-md/button
Note: Version bump only for package @react-md/button
Note: Version bump only for package @react-md/button
Note: Version bump only for package @react-md/button
Note: Version bump only for package @react-md/button
sideEffects field to package.json
(31820b9)sideEffects formatting
(78a7b6b)No changes.
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.
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)px to remdist (and dist/scss) folder instead of src<button> elementcomponent and href propsprimary, secondary, flat, raised, floating,
swapTheming, and icon theme propsfixed, fixedPosition, and mini propstooltipLabel, tooltipDelay, and tooltipPosition propsiconClassName, iconChildren, iconEl, forceIconSize,
forceIconFontSize, and svg propsFlatButton, RaisedButton, IconButton, and
FloatingButton components$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 componentmixin rmd-button-styled - generates the base styles for an unstyled button
if it's useful to not use the UnstyledButton component$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$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$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$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@mixin react-md-theme-buttons since the new theming functions and
mixins are preferred@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
nowThis 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.
123456789101112131415161718192021const LinkStyledButton = ({
classname,
theme,
themeType,
buttonType,
children,
...props
}) => (
<a
{...props}
className={buttonThemeClassNames({
className,
theme,
themeType,
buttonType,
children,
})}
>
{children}
</a>
);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:
themethemeTypebuttonTypetheme
Using the new theme prop is a replacement the primary and secondary props,
but also includes 3 additional themes. The supported values are:
clearprimary (default)secondarywarningerrorthemeType
Using the new themeType prop is a replacement for the raised, flat, and
floating props. The supported values are:
flat (default)outlinecontained - this is a rename for the raised and floating specsThe 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:
A small change is that the floating spec was entirely removed as it can be
implemented by providing buttonType="icon" and themeType="contained".
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.
12345678910import React from "react";
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>
);