@react-md/button - npm Package Compare versions

Comparing version 2.0.0-alpha.1 to 2.0.0-alpha.3

dist/scssVariables.d.ts

@@ -11,4 +11,2 @@ declare const _default: {
     "rmd-button-icon-size": string;
-    "rmd-button-hover-background-color": string;
-    "rmd-button-background-color-transition-time": string;
     "rmd-button-outline-width": string;
@@ -15,0 +13,0 @@ "rmd-button-box-shadow": string;

dist/scssVariables.js

@@ -14,4 +14,2 @@ "use strict";
     "rmd-button-icon-size": "3rem",
-    "rmd-button-hover-background-color": "rgba(0, 0, 0, 0.2)",
-    "rmd-button-background-color-transition-time": "0.15s",
     "rmd-button-outline-width": "1px",
@@ -18,0 +16,0 @@ "rmd-button-box-shadow": "inset 0 0 0",

es/Button.js

@@ -21,3 +21,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { forwardRef, } from "react";
+import React, { forwardRef } from "react";
 import { useInteractionStates, } from "@react-md/states";
@@ -47,4 +47,5 @@ import buttonThemeClassNames from "./buttonThemeClassNames";
 var defaultProps = {
+    type: "button",
     disabled: false,
-    theme: "primary",
+    theme: "clear",
     themeType: "flat",
@@ -51,0 +52,0 @@ buttonType: "text",

es/buttonThemeClassNames.js

@@ -14,3 +14,3 @@ import cn from "classnames";
     var _a;
-    var _b = props.buttonType, buttonType = _b === void 0 ? "text" : _b, _c = props.themeType, themeType = _c === void 0 ? "flat" : _c, _d = props.theme, theme = _d === void 0 ? "primary" : _d, disabled = props.disabled, className = props.className;
+    var _b = props.buttonType, buttonType = _b === void 0 ? "text" : _b, _c = props.themeType, themeType = _c === void 0 ? "flat" : _c, _d = props.theme, theme = _d === void 0 ? "clear" : _d, disabled = props.disabled, className = props.className;
     var text = buttonType === "text";
@@ -17,0 +17,0 @@ var icon = buttonType === "icon";

es/index.js

 export { default as buttonThemeClassNames } from "./buttonThemeClassNames";
+export * from "./buttonThemeClassNames";
 export { default as Button } from "./Button";
 export * from "./Button";
 //# sourceMappingURL=index.js.map

lib/Button.js

@@ -58,4 +58,5 @@ "use strict";
 var defaultProps = {
+    type: "button",
     disabled: false,
-    theme: "primary",
+    theme: "clear",
     themeType: "flat",
@@ -62,0 +63,0 @@ buttonType: "text",

lib/buttonThemeClassNames.js

@@ -19,3 +19,3 @@ "use strict";
     var _a;
-    var _b = props.buttonType, buttonType = _b === void 0 ? "text" : _b, _c = props.themeType, themeType = _c === void 0 ? "flat" : _c, _d = props.theme, theme = _d === void 0 ? "primary" : _d, disabled = props.disabled, className = props.className;
+    var _b = props.buttonType, buttonType = _b === void 0 ? "text" : _b, _c = props.themeType, themeType = _c === void 0 ? "flat" : _c, _d = props.theme, theme = _d === void 0 ? "clear" : _d, disabled = props.disabled, className = props.className;
     var text = buttonType === "text";
@@ -22,0 +22,0 @@ var icon = buttonType === "icon";

lib/index.js

@@ -8,2 +8,3 @@ "use strict";
 exports.buttonThemeClassNames = buttonThemeClassNames_1.default;
+__export(require("./buttonThemeClassNames"));
 var Button_1 = require("./Button");
@@ -10,0 +11,0 @@ exports.Button = Button_1.default;

package.json

 {
   "name": "@react-md/button",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.3",
   "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.",
   "scripts": {
     "build": "dev-utils build",
-    "clean": "dev-utils clean",
-    "test": "dev-utils test"
+    "clean": "dev-utils clean"
   },
@@ -34,8 +33,8 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@react-md/elevation": "^2.0.0-alpha.1",
-    "@react-md/icon": "^2.0.0-alpha.1",
-    "@react-md/states": "^2.0.0-alpha.1",
-    "@react-md/theme": "^2.0.0-alpha.1",
-    "@react-md/typography": "^2.0.0-alpha.1",
-    "@react-md/utils": "^2.0.0-alpha.1",
+    "@react-md/elevation": "^2.0.0-alpha.3",
+    "@react-md/icon": "^2.0.0-alpha.3",
+    "@react-md/states": "^2.0.0-alpha.3",
+    "@react-md/theme": "^2.0.0-alpha.3",
+    "@react-md/typography": "^2.0.0-alpha.3",
+    "@react-md/utils": "^2.0.0-alpha.3",
     "classnames": "^2.2.6"
@@ -52,3 +51,3 @@ },
   },
-  "gitHead": "9197bcdf38df3cff304499431696dc8e950b4b17"
+  "gitHead": "ff38fa4bd502c527ffb8847eae71b471456e0355"
 }

src/__tests__/buttonThemeClassNames.ts

@@ -1,3 +0,2 @@
-import buttonThemeClassNames from "../buttonThemeClassNames";
-import { ButtonTheme } from "../types.d";
+import buttonThemeClassNames, { ButtonTheme } from "../buttonThemeClassNames";
 
@@ -4,0 +3,0 @@ describe("buttonThemeClassNames", () => {

src/buttonThemeClassNames.ts

 import cn from "classnames";
 import { bem } from "@react-md/theme";
 
-import { ButtonThemeProps } from "./types.d";
+/**
+ * One of the valid button types that can be used
+ */
+export type ButtonType = "text" | "icon";
 
+/**
+ * One of the valid material design default button themes that can be used. This will
+ * update the general look and feel by updating the colors within the button while the
+ * `ButtonThemeType` will update the borders or box shadow.
+ */
+export type ButtonTheme =
+  | "clear"
+  | "primary"
+  | "secondary"
+  | "warning"
+  | "error";
+
+/**
+ * One of the valid material design "themed" button types that can be used. This will
+ * update the general look and feel by adding borders or box shadow to the button while
+ * the `ButtonTheme` will update the colors.
+ */
+export type ButtonThemeType = "flat" | "outline" | "contained";
+
+/**
+ * This is an interface of all the button's customizable theme props. This is mainly used if you
+ * want to add a button theme to another component and have it configurable via props.
+ */
+export interface ButtonThemeProps {
+  /**
+   * An optional className to also apply to the button for additional theming and styling. This
+   * will be merged with the `Button.theme` class name styles.
+   */
+  className?: string;
+
+  /**
+   * Enabling this prop will apply the disabled styles to a `Button`. When this is also applied
+   * to the button component, the button will be updated so that it can no longer be interacted
+   * with.
+   */
+  disabled?: boolean;
+
+  /**
+   * This is the specific material design button type to use. This can either be set to "text" or
+   * "icon". When this is set to "text", the styles applied will make buttons with just text or text
+   * with icons render nicely. When this is set to "icon", the styles applied will make icon only
+   * buttons render nicely.
+   */
+  buttonType?: ButtonType;
+
+  /**
+   * The material design theme to apply to the button. The theme prop will update the look and feel
+   * of the button by applying different background and/or foreground colors.
+   */
+  theme?: ButtonTheme;
+
+  /**
+   * The material design theme type to apply. The themeTYpe prop will update the look and feel of
+   * the button by applying different border or box shadow.
+   */
+  themeType?: ButtonThemeType;
+}
+
 const block = bem("rmd-button");
@@ -20,3 +81,3 @@
     themeType = "flat",
-    theme = "primary",
+    theme = "clear",
     disabled,
@@ -23,0 +84,0 @@ className,

src/index.ts

@@ -1,5 +0,5 @@
-export * from "./types.d";
 export { default as buttonThemeClassNames } from "./buttonThemeClassNames";
+export * from "./buttonThemeClassNames";
 
 export { default as Button } from "./Button";
 export * from "./Button";

src/scssVariables.ts

@@ -12,4 +12,2 @@ /** this is an auto-generated file from @react-md/dev-utils */
   "rmd-button-icon-size": "3rem",
-  "rmd-button-hover-background-color": "rgba(0, 0, 0, 0.2)",
-  "rmd-button-background-color-transition-time": "0.15s",
   "rmd-button-outline-width": "1px",
@@ -16,0 +14,0 @@ "rmd-button-box-shadow": "inset 0 0 0",

types/Button.d.ts

 import React, { ReactNode, HTMLAttributes } from "react";
 import { InteractionStatesOptions } from "@react-md/states";
 import { Omit } from "@react-md/utils";
-import { ButtonThemeProps } from "./types.d";
+import { ButtonThemeProps } from "./buttonThemeClassNames";
 /**
@@ -6,0 +6,0 @@ * This interface includes all the props that the `Button` component accepts so the main

types/buttonThemeClassNames.d.ts

@@ -1,3 +0,52 @@
-import { ButtonThemeProps } from "./types.d";
 /**
+ * One of the valid button types that can be used
+ */
+export declare type ButtonType = "text" | "icon";
+/**
+ * One of the valid material design default button themes that can be used. This will
+ * update the general look and feel by updating the colors within the button while the
+ * `ButtonThemeType` will update the borders or box shadow.
+ */
+export declare type ButtonTheme = "clear" | "primary" | "secondary" | "warning" | "error";
+/**
+ * One of the valid material design "themed" button types that can be used. This will
+ * update the general look and feel by adding borders or box shadow to the button while
+ * the `ButtonTheme` will update the colors.
+ */
+export declare type ButtonThemeType = "flat" | "outline" | "contained";
+/**
+ * This is an interface of all the button's customizable theme props. This is mainly used if you
+ * want to add a button theme to another component and have it configurable via props.
+ */
+export interface ButtonThemeProps {
+    /**
+     * An optional className to also apply to the button for additional theming and styling. This
+     * will be merged with the `Button.theme` class name styles.
+     */
+    className?: string;
+    /**
+     * Enabling this prop will apply the disabled styles to a `Button`. When this is also applied
+     * to the button component, the button will be updated so that it can no longer be interacted
+     * with.
+     */
+    disabled?: boolean;
+    /**
+     * This is the specific material design button type to use. This can either be set to "text" or
+     * "icon". When this is set to "text", the styles applied will make buttons with just text or text
+     * with icons render nicely. When this is set to "icon", the styles applied will make icon only
+     * buttons render nicely.
+     */
+    buttonType?: ButtonType;
+    /**
+     * The material design theme to apply to the button. The theme prop will update the look and feel
+     * of the button by applying different background and/or foreground colors.
+     */
+    theme?: ButtonTheme;
+    /**
+     * The material design theme type to apply. The themeTYpe prop will update the look and feel of
+     * the button by applying different border or box shadow.
+     */
+    themeType?: ButtonThemeType;
+}
+/**
  * Creates a button theme based on the button theming props. This is really just used so that
@@ -4,0 +53,0 @@ * other elements like clickable `<div>`s or `<input type="file">` can look like buttons.

types/index.d.ts

@@ -1,4 +0,4 @@
-export * from "./types.d";
 export { default as buttonThemeClassNames } from "./buttonThemeClassNames";
+export * from "./buttonThemeClassNames";
 export { default as Button } from "./Button";
 export * from "./Button";

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

112158

increased by11.25%

Number of package files

44

increased by4.76%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

968

decreased by-1.33%

Dependency changes

• + Added@babel/runtime@7.26.9(transitive)

• + Added@types/react@19.0.9(transitive)

• - Removed@babel/runtime@7.26.7(transitive)

• - Removed@types/react@19.0.8(transitive)

• Updated@react-md/elevation@^2.0.0-alpha.3

• Updated@react-md/icon@^2.0.0-alpha.3

• Updated@react-md/states@^2.0.0-alpha.3

• Updated@react-md/theme@^2.0.0-alpha.3

• Updated@react-md/typography@^2.0.0-alpha.3

• Updated@react-md/utils@^2.0.0-alpha.3