@react-md/button - npm Package Compare versions

Comparing version 2.0.0-beta.1 to 2.0.0-beta.2

CHANGELOG.md

@@ -6,4 +6,5 @@ # v2.0.0
 rendered with only children to enable a default theme. However, the `Button`
-component removed built-in support for tooltips and rendering icons with text as
-well as the floating button styles.
+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.
 
@@ -51,2 +52,8 @@ A new `UnstyledButton` component was added that can be used to create a
   `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
@@ -85,23 +92,24 @@ the theme name is valid
   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
 
-- the `$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
-- the `$md-btn-fized-z-index`, `$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` variables were removed size floating
-  buttons aren't included in this release
-- the `$md-btn-mobile-height`, `$md-btn-mobile-font-size`,
-  `$md-btn-desktop-height`, and `$md-btn-desktop-font-size` variables were
-  removed since buttons no longer change size and font-size based on device size
-- `@mixin react-md-theme-buttons` was removed 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` removed due to having a static size on all
-  devices now
-- `@mixin react-md-button-fixed-positions` removed due to no longer having
-  floating buttons
+- 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
 
@@ -108,0 +116,0 @@ ## Rendering non-button components and elements

dist/scssVariables.d.ts

@@ -19,2 +19,22 @@ declare const _default: {
     "rmd-button-contained-pressed-elevation": number;
+    "rmd-button-floating-z-index": number;
+    "rmd-button-floating-margin": string;
+    "rmd-button-floating-positions": {
+        tl: {
+            left: string;
+            top: string;
+        };
+        tr: {
+            right: string;
+            top: string;
+        };
+        bl: {
+            bottom: string;
+            left: string;
+        };
+        br: {
+            bottom: string;
+            right: string;
+        };
+    };
     "rmd-button-theme-values": {
@@ -21,0 +41,0 @@ "text-border-radius": string;

dist/scssVariables.js

@@ -22,2 +22,10 @@ "use strict";
     "rmd-button-contained-pressed-elevation": 4,
+    "rmd-button-floating-z-index": 30,
+    "rmd-button-floating-margin": "1.5rem",
+    "rmd-button-floating-positions": {
+        tl: { left: "1.5rem", top: "1.5rem" },
+        tr: { right: "1.5rem", top: "1.5rem" },
+        bl: { bottom: "1.5rem", left: "1.5rem" },
+        br: { bottom: "1.5rem", right: "1.5rem" },
+    },
     "rmd-button-theme-values": {
@@ -24,0 +32,0 @@ "text-border-radius": "0.5rem",

es/Button.js

@@ -27,8 +27,9 @@ var __assign = (this && this.__assign) || function () {
 import buttonThemeClassNames from "./buttonThemeClassNames";
+import FAB from "./FAB";
 var Button = forwardRef(function Button(_a, ref) {
-    var _b = _a.type, type = _b === void 0 ? "button" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.theme, theme = _d === void 0 ? "clear" : _d, _e = _a.themeType, themeType = _e === void 0 ? "flat" : _e, _f = _a.buttonType, buttonType = _f === void 0 ? "text" : _f, propClassName = _a.className, children = _a.children, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, rippleClassName = _a.rippleClassName, rippleContainerClassName = _a.rippleContainerClassName, propEnablePressedAndRipple = _a.enablePressedAndRipple, props = __rest(_a, ["type", "disabled", "theme", "themeType", "buttonType", "className", "children", "disableRipple", "disableProgrammaticRipple", "rippleTimeout", "rippleClassNames", "rippleClassName", "rippleContainerClassName", "enablePressedAndRipple"]);
+    var _b = _a.type, type = _b === void 0 ? "button" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.floating, floating = _d === void 0 ? null : _d, floatingProps = _a.floatingProps, _e = _a.theme, theme = _e === void 0 ? floating ? "secondary" : "clear" : _e, _f = _a.themeType, themeType = _f === void 0 ? floating ? "contained" : "flat" : _f, _g = _a.buttonType, buttonType = _g === void 0 ? floating ? "icon" : "text" : _g, propClassName = _a.className, children = _a.children, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, rippleClassName = _a.rippleClassName, rippleContainerClassName = _a.rippleContainerClassName, propEnablePressedAndRipple = _a.enablePressedAndRipple, props = __rest(_a, ["type", "disabled", "floating", "floatingProps", "theme", "themeType", "buttonType", "className", "children", "disableRipple", "disableProgrammaticRipple", "rippleTimeout", "rippleClassNames", "rippleClassName", "rippleContainerClassName", "enablePressedAndRipple"]);
     var enablePressedAndRipple = typeof propEnablePressedAndRipple === "boolean"
         ? propEnablePressedAndRipple
         : themeType === "contained";
-    var _g = useInteractionStates({
+    var _h = useInteractionStates({
         handlers: props,
@@ -50,6 +51,7 @@ className: buttonThemeClassNames({
         enablePressedAndRipple: enablePressedAndRipple,
-    }), ripples = _g.ripples, className = _g.className, handlers = _g.handlers;
-    return (React.createElement("button", __assign({}, props, handlers, { ref: ref, type: type, className: className, disabled: disabled }),
-        children,
-        ripples));
+    }), ripples = _h.ripples, className = _h.className, handlers = _h.handlers;
+    return (React.createElement(FAB, __assign({ position: floating }, floatingProps),
+        React.createElement("button", __assign({}, props, handlers, { ref: ref, type: type, className: className, disabled: disabled }),
+            children,
+            ripples)));
 });
@@ -99,2 +101,9 @@ if (process.env.NODE_ENV !== "production") {
             enablePressedAndRipple: PropTypes.bool,
+            floating: PropTypes.oneOf([
+                "top-left",
+                "top-right",
+                "bottom-left",
+                "bottom-right",
+            ]),
+            floatingProps: PropTypes.object,
         };
@@ -101,0 +110,0 @@ }

es/index.js

@@ -7,2 +7,4 @@ export { default as buttonThemeClassNames } from "./buttonThemeClassNames";
 export * from "./UnstyledButton";
+export { default as FAB } from "./FAB";
+export * from "./FAB";
 //# sourceMappingURL=index.js.map

lib/Button.d.ts

 import React, { ButtonHTMLAttributes, ReactNode } from "react";
 import { InteractionStatesOptions } from "@react-md/states";
+import { PropsWithRef } from "@react-md/utils";
 import { ButtonThemeProps } from "./buttonThemeClassNames";
+import { FABPosition, FABProps } from "./FAB";
 /**
@@ -24,4 +26,14 @@ * This interface includes all the props that the `Button` component accepts so
     children?: ReactNode;
+    /**
+     * The position within the viewport to display the button as a floating action
+     * button.
+     */
+    floating?: FABPosition;
+    /**
+     * Any additional props to provide the to `FAB` container element when the
+     * `floating` prop is provided
+     */
+    floatingProps?: PropsWithRef<FABProps, HTMLSpanElement>;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

lib/Button.js

@@ -51,8 +51,9 @@ "use strict";
 var buttonThemeClassNames_1 = __importDefault(require("./buttonThemeClassNames"));
+var FAB_1 = __importDefault(require("./FAB"));
 var Button = react_1.forwardRef(function Button(_a, ref) {
-    var _b = _a.type, type = _b === void 0 ? "button" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.theme, theme = _d === void 0 ? "clear" : _d, _e = _a.themeType, themeType = _e === void 0 ? "flat" : _e, _f = _a.buttonType, buttonType = _f === void 0 ? "text" : _f, propClassName = _a.className, children = _a.children, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, rippleClassName = _a.rippleClassName, rippleContainerClassName = _a.rippleContainerClassName, propEnablePressedAndRipple = _a.enablePressedAndRipple, props = __rest(_a, ["type", "disabled", "theme", "themeType", "buttonType", "className", "children", "disableRipple", "disableProgrammaticRipple", "rippleTimeout", "rippleClassNames", "rippleClassName", "rippleContainerClassName", "enablePressedAndRipple"]);
+    var _b = _a.type, type = _b === void 0 ? "button" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.floating, floating = _d === void 0 ? null : _d, floatingProps = _a.floatingProps, _e = _a.theme, theme = _e === void 0 ? floating ? "secondary" : "clear" : _e, _f = _a.themeType, themeType = _f === void 0 ? floating ? "contained" : "flat" : _f, _g = _a.buttonType, buttonType = _g === void 0 ? floating ? "icon" : "text" : _g, propClassName = _a.className, children = _a.children, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, rippleClassName = _a.rippleClassName, rippleContainerClassName = _a.rippleContainerClassName, propEnablePressedAndRipple = _a.enablePressedAndRipple, props = __rest(_a, ["type", "disabled", "floating", "floatingProps", "theme", "themeType", "buttonType", "className", "children", "disableRipple", "disableProgrammaticRipple", "rippleTimeout", "rippleClassNames", "rippleClassName", "rippleContainerClassName", "enablePressedAndRipple"]);
     var enablePressedAndRipple = typeof propEnablePressedAndRipple === "boolean"
         ? propEnablePressedAndRipple
         : themeType === "contained";
-    var _g = states_1.useInteractionStates({
+    var _h = states_1.useInteractionStates({
         handlers: props,
@@ -74,6 +75,7 @@ className: buttonThemeClassNames_1.default({
         enablePressedAndRipple: enablePressedAndRipple,
-    }), ripples = _g.ripples, className = _g.className, handlers = _g.handlers;
-    return (react_1.default.createElement("button", __assign({}, props, handlers, { ref: ref, type: type, className: className, disabled: disabled }),
-        children,
-        ripples));
+    }), ripples = _h.ripples, className = _h.className, handlers = _h.handlers;
+    return (react_1.default.createElement(FAB_1.default, __assign({ position: floating }, floatingProps),
+        react_1.default.createElement("button", __assign({}, props, handlers, { ref: ref, type: type, className: className, disabled: disabled }),
+            children,
+            ripples)));
 });
@@ -123,2 +125,9 @@ if (process.env.NODE_ENV !== "production") {
             enablePressedAndRipple: PropTypes.bool,
+            floating: PropTypes.oneOf([
+                "top-left",
+                "top-right",
+                "bottom-left",
+                "bottom-right",
+            ]),
+            floatingProps: PropTypes.object,
         };
@@ -125,0 +134,0 @@ }

lib/index.d.ts

@@ -7,1 +7,3 @@ export { default as buttonThemeClassNames } from "./buttonThemeClassNames";
 export * from "./UnstyledButton";
+export { default as FAB } from "./FAB";
+export * from "./FAB";

lib/index.js

@@ -11,3 +11,3 @@ "use strict";
     for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
-}
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -23,2 +23,5 @@ var buttonThemeClassNames_1 = require("./buttonThemeClassNames");
 __exportStar(require("./UnstyledButton"), exports);
+var FAB_1 = require("./FAB");
+Object.defineProperty(exports, "FAB", { enumerable: true, get: function () { return FAB_1.default; } });
+__exportStar(require("./FAB"), exports);
 //# sourceMappingURL=index.js.map

lib/UnstyledButton.d.ts

@@ -12,3 +12,3 @@ import React, { ButtonHTMLAttributes } from "react";
  */
-declare const UnstyledButton: React.ForwardRefExoticComponent<Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "className" | "children" | "autoFocus" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLButtonElement>>;
+declare const UnstyledButton: React.ForwardRefExoticComponent<Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, "disabled" | "className" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value"> & React.RefAttributes<HTMLButtonElement>>;
 export default UnstyledButton;

package.json

 {
   "name": "@react-md/button",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "This package is used to create buttons with the material design spec. There is built-in support to be able to render accessible clickable divs that look like buttons, or even apply button styles to any element.",
@@ -40,9 +40,9 @@ "scripts": {
   "dependencies": {
-    "@react-md/elevation": "^2.0.0-beta.1",
-    "@react-md/icon": "^2.0.0-beta.1",
-    "@react-md/states": "^2.0.0-beta.1",
-    "@react-md/theme": "^2.0.0-beta.1",
-    "@react-md/transition": "^2.0.0-beta.1",
-    "@react-md/typography": "^2.0.0-beta.1",
-    "@react-md/utils": "^2.0.0-beta.1",
+    "@react-md/elevation": "^2.0.0-beta.2",
+    "@react-md/icon": "^2.0.0-beta.2",
+    "@react-md/states": "^2.0.0-beta.2",
+    "@react-md/theme": "^2.0.0-beta.2",
+    "@react-md/transition": "^2.0.0-beta.2",
+    "@react-md/typography": "^2.0.0-beta.2",
+    "@react-md/utils": "^2.0.0-beta.2",
     "classnames": "^2.2.6"
@@ -59,3 +59,7 @@ },
   },
-  "gitHead": "76642fca0cf36307a5431d67a8eb4abe0a7b18a6"
+  "devDependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "gitHead": "cf3a082e89a038dd4cc60974874938af6480b289"
 }

src/index.ts

@@ -9,1 +9,4 @@ export { default as buttonThemeClassNames } from "./buttonThemeClassNames";
 export * from "./UnstyledButton";
+
+export { default as FAB } from "./FAB";
+export * from "./FAB";

src/scssVariables.ts

@@ -20,2 +20,10 @@ /** this is an auto-generated file from @react-md/dev-utils */
   "rmd-button-contained-pressed-elevation": 4,
+  "rmd-button-floating-z-index": 30,
+  "rmd-button-floating-margin": "1.5rem",
+  "rmd-button-floating-positions": {
+    tl: { left: "1.5rem", top: "1.5rem" },
+    tr: { right: "1.5rem", top: "1.5rem" },
+    bl: { bottom: "1.5rem", left: "1.5rem" },
+    br: { bottom: "1.5rem", right: "1.5rem" },
+  },
   "rmd-button-theme-values": {
@@ -22,0 +30,0 @@ "text-border-radius": "0.5rem",

types/Button.d.ts

 import React, { ButtonHTMLAttributes, ReactNode } from "react";
 import { InteractionStatesOptions } from "@react-md/states";
+import { PropsWithRef } from "@react-md/utils";
 import { ButtonThemeProps } from "./buttonThemeClassNames";
+import { FABPosition, FABProps } from "./FAB";
 /**
@@ -24,4 +26,14 @@ * This interface includes all the props that the `Button` component accepts so
     children?: ReactNode;
+    /**
+     * The position within the viewport to display the button as a floating action
+     * button.
+     */
+    floating?: FABPosition;
+    /**
+     * Any additional props to provide the to `FAB` container element when the
+     * `floating` prop is provided
+     */
+    floatingProps?: PropsWithRef<FABProps, HTMLSpanElement>;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

types/index.d.ts

@@ -7,1 +7,3 @@ export { default as buttonThemeClassNames } from "./buttonThemeClassNames";
 export * from "./UnstyledButton";
+export { default as FAB } from "./FAB";
+export * from "./FAB";

No alert changes

Improved metrics

Total package byte prevSize

236055

increased by69.73%

Number of package files

60

increased by13.21%

Lines of code

1588

increased by28.17%

Worsened metrics

Dev dependency count

2

increased byInfinity%

Dependency changes

• Updated@react-md/elevation@^2.0.0-beta.2

• Updated@react-md/icon@^2.0.0-beta.2

• Updated@react-md/states@^2.0.0-beta.2

• Updated@react-md/theme@^2.0.0-beta.2

• Updated@react-md/transition@^2.0.0-beta.2

• Updated@react-md/typography@^2.0.0-beta.2

• Updated@react-md/utils@^2.0.0-beta.2