@availity/mui-button 0.6.4 → 0.6.6

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.6.6](https://github.com/Availity/element/compare/@availity/mui-button@0.6.5...@availity/mui-button@0.6.6) (2024-04-15)
+
+## [0.6.5](https://github.com/Availity/element/compare/@availity/mui-button@0.6.4...@availity/mui-button@0.6.5) (2024-04-04)
+
+### Dependency Updates
+
+* `mui-layout` updated to version `0.1.5`
+* `mui-icon` updated to version `0.8.1`
+
+### Performance Improvements
+
+* **mui-button:** use path imports for material deps ([5675780](https://github.com/Availity/element/commit/567578011d9d9b6e0736fb735c87ed7d619756c7))
+
 ## [0.6.4](https://github.com/Availity/element/compare/@availity/mui-button@0.6.3...@availity/mui-button@0.6.4) (2024-03-15)
 
 ### Dependency Updates

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { ButtonProps as ButtonProps$1, IconButtonProps as IconButtonProps$1 } from '@mui/material';
+import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
+import { IconButtonProps as IconButtonProps$1 } from '@mui/material/IconButton';
 import { LoadingButtonProps as LoadingButtonProps$1 } from '@mui/lab/LoadingButton';
 
 declare module '@mui/material/Button' {

package/dist/index.js

@@ -34,7 +34,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/lib/Button.tsx
 var import_react = require("react");
-var import_material = require("@mui/material");
+var import_Button = __toESM(require("@mui/material/Button"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var overrideProps = {
   disableRipple: true,
@@ -42,7 +42,7 @@ var overrideProps = {
   disableTouchRipple: true
 };
 var Button = (0, import_react.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, {
     ...props,
     ...overrideProps,
     ref
@@ -51,7 +51,8 @@ var Button = (0, import_react.forwardRef)((props, ref) => {
 
 // src/lib/IconButton.tsx
 var import_react2 = require("react");
-var import_material2 = require("@mui/material");
+var import_IconButton = __toESM(require("@mui/material/IconButton"));
+var import_Tooltip = __toESM(require("@mui/material/Tooltip"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var outlinedStyles = {
   borderRadius: ".25rem",
@@ -63,9 +64,9 @@ var IconButton = (0, import_react2.forwardRef)((props, ref) => {
     ...sx,
     ...variant === "outlined" && outlinedStyles
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material2.Tooltip, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.default, {
     title,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material2.IconButton, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_IconButton.default, {
       "aria-label": title,
       sx: { ...styles },
       ...rest,

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/lib/Button.tsx
 import { forwardRef } from "react";
-import { Button as MUIButton } from "@mui/material";
+import { default as MUIButton } from "@mui/material/Button";
 import { jsx } from "react/jsx-runtime";
 var overrideProps = {
   disableRipple: true,
@@ -17,7 +17,8 @@ var Button = forwardRef((props, ref) => {
 
 // src/lib/IconButton.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { IconButton as MuiIconButton, Tooltip } from "@mui/material";
+import { default as MuiIconButton } from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var outlinedStyles = {
   borderRadius: ".25rem",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-button",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "description": "Availity MUI Button Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/Button.tsx

@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-import { Button as MUIButton, ButtonPropsColorOverrides } from '@mui/material';
-import type { ButtonProps as MUIButtonProps } from '@mui/material';
+import { default as MUIButton, ButtonProps as MUIButtonProps } from '@mui/material/Button';
 
 declare module '@mui/material/Button' {
   interface ButtonPropsColorOverrides {

package/src/lib/IconButton.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
-import { IconButton as MuiIconButton, Tooltip } from '@mui/material';
-import type { IconButtonProps as MUIIconButtonProps } from '@mui/material';
+import { default as MuiIconButton, IconButtonProps as MUIIconButtonProps } from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 
 export type IconButtonProps = {
   /**

package/src/lib/bs4migration.stories.mdx

@@ -0,0 +1,55 @@
+import { Meta, Source } from '@storybook/blocks';
+
+<Meta title="BS4 Migration/Button" />
+
+# Component Migration
+
+This migration guide is just an overview. For more in depth component information, visit:
+- [Availity Usage Guide](https://zeroheight.com/2e36e50c7/p/54f663-button)
+- [MUI Documentation](https://mui.com/material-ui/react-button/)
+
+
+## Key Differences (not exhaustive list)
+
+- Changed
+  - Per UX, the available colors for a button have changed, notably the removal of success and error colors.
+- Removed
+  - `outline` while mui moves this option into the `variant` prop, per UX this variant has also been removed going forward.
+- Other
+  - UX has updated the guidelines for when to use which color. Refer to zeroheight docs for more information.
+
+## Code Examples
+
+`reactstrap`/`availity-react` Example:
+
+<Source
+  code={`
+import { Button } from 'reactstrap';\n
+const ReactstrapButton = () => (
+  <Button
+    color="primary"
+    size="lg"
+    outline
+    block
+  >
+    I'm a Button
+  </Button>
+);
+`}/>
+
+`@availity/element` Example:
+
+<Source
+  code={`
+import { Button } from '@availity/element';\n
+const MUIButton = () => (
+  <Button
+    color="primary"
+    size="large"
+    variant="outlined"
+    fullWidth
+  >
+    I'm a Button
+  </Button>
+);
+`}/>