@availity/mui-button 0.1.2 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-button",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Availity MUI Button Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -33,6 +33,9 @@
     "publish": "yarn npm publish --tolerate-republish --access public",
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
+  "dependencies": {
+    "@mui/lab": "^5.0.0-alpha.121"
+  },
   "devDependencies": {
     "@mui/material": "^5.11.9",
     "react": "18.2.0",

package/src/index.ts

@@ -1 +1,3 @@
 export * from './lib/Button';
+export * from './lib/IconButton';
+export * from './lib/LoadingButton';

package/src/lib/Button.tsx

@@ -1,23 +1,67 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import { Button as MUIButton } from '@mui/material';
-import {LoadingButton as MUILoadingButton} from '@mui/lab'
 import type { ButtonProps as MUIButtonProps } from '@mui/material';
-// import Icon from '@availity/mui-icon';
 
 export type ButtonProps = {
-  children: React.ReactNode;
-} & MUIButtonProps;
+  /** The color of the component.
+   * @default secondary */
+  color?: 'primary' | 'secondary' | 'tertiary' | 'error';
+  /** The variant to use.
+   * @default contained */
+  variant?: 'outlined' | 'contained';
+  /** Internal prop used by IconButton for contained variant. */
+  iconOnly?: boolean;
+} & Omit<
+  MUIButtonProps,
+  | 'color'
+  | 'variant'
+  | 'disableElevation'
+  | 'disableFocusRipple'
+  | 'disableTouchRipple'
+  | 'centerRipple'
+  | 'disableRipple'
+  | 'focusRipple'
+  | 'TouchRippleProps'
+  | 'touchRippleRef'
+>;
 
-export const Button = ({ children, ...rest }: ButtonProps): JSX.Element => (
-  <MUIButton {...rest}>
-    {children}
-  </MUIButton>
-);
+const tertiaryContainedStyles = {
+  bgcolor: 'tertiary.main',
+  color: 'black',
+  '&:focus, &:hover': {
+    bgcolor: 'tertiary.dark',
+  },
+  '&:active': {
+    bgcolor: 'tertiary.light',
+  },
+};
 
-export const LoadingButton = ({ children, ...rest }: ButtonProps): JSX.Element => (
-  <MUILoadingButton {...rest}>
-    {children}
-  </MUILoadingButton>
-);
+const iconOnlyStyles = {
+  minWidth: 2,
+  px: 1,
+  '& .MuiButton-startIcon': {
+    m: 0,
+  },
+  '& .MuiButton-endIcon': {
+    m: 0,
+  },
+};
 
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { color = 'secondary', variant = 'contained', iconOnly, sx, ...rest } = props;
+  const styles = {
+    ...(color == 'tertiary' && variant == 'contained' && tertiaryContainedStyles),
+    ...(iconOnly && iconOnlyStyles),
+  };
 
+  return (
+    <MUIButton
+      color={color == 'tertiary' ? 'secondary' : color}
+      variant={variant}
+      sx={{ ...styles, ...sx }}
+      disableRipple
+      {...rest}
+      ref={ref}
+    />
+  );
+});

package/src/lib/IconButton.tsx

@@ -0,0 +1,35 @@
+import { IconButton as MuiIconButton, Tooltip } from '@mui/material';
+import type { IconButtonProps as MUIIconButtonProps } from '@mui/material';
+import { Button } from './Button';
+
+export type IconButtonProps = {
+  /**
+   * Text for tooltip and aria-label
+   */
+  title: string;
+  children: React.ReactNode;
+  /**
+   * Toggles contained Button styling
+   */
+  filled?: boolean;
+  /**
+   * The color of the component.
+   */
+  color?: "primary" | "secondary" | "tertiary" | "error";
+} & Omit<MUIIconButtonProps, 'aria-label' | 'color' | 'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'disableFocusRipple' | 'TouchRippleProps' | 'touchRippleRef'>;
+
+
+
+export const IconButton = ({ children, title, filled, color = 'tertiary', ...rest }: IconButtonProps): JSX.Element => {
+  return (
+    <Tooltip title={title}>
+      { filled ?
+        <Button aria-label={title} color={color} startIcon={children} iconOnly {...rest}>{'\u2060'}</Button>
+        :
+        <MuiIconButton aria-label={title} disableRipple color={color === 'tertiary' ? 'secondary' : color} {...rest}>
+          {children}
+        </MuiIconButton>
+      }
+    </Tooltip>
+  );
+}

package/src/lib/LoadingButton.tsx

@@ -0,0 +1,47 @@
+import { forwardRef } from 'react';
+import MUILoadingButton, { LoadingButtonProps as MuiLoadingButtonProps } from '@mui/lab/LoadingButton';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export type LoadingButtonProps = {
+  children: React.ReactNode;
+  /**
+   * The color of the component.
+   */
+  color?: 'primary' | 'secondary' | 'error';
+} & Omit<
+  MuiLoadingButtonProps,
+  | 'color'
+  | 'centerRipple'
+  | 'disableRipple'
+  | 'disableTouchRipple'
+  | 'focusRipple'
+  | 'disableFocusRipple'
+  | 'TouchRippleProps'
+  | 'touchRippleRef'
+  | 'loadingIndicator'
+  | 'loadingPosition'
+>;
+
+const LoadingIndicator = <CircularProgress color="inherit" size={16} aria-label="loading" />;
+
+export const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>((props, ref) => {
+  const { children, loading, ...rest } = props;
+  //changing default loading button behavior to add end loading icon instead of replacing contents completely with icon
+  const loadingPosition = rest.startIcon ? 'start' : 'end';
+  const nonLoadingStyling = rest.startIcon || rest.endIcon || loading ? {} : { padding: '0 .7rem' };
+  const endIcon = rest.startIcon ? undefined : <span style={loading ? { padding: '0 .7rem' } : {}}></span>;
+
+  return (
+    <MUILoadingButton
+      endIcon={endIcon}
+      loadingPosition={loadingPosition}
+      loading={loading}
+      disableRipple
+      loadingIndicator={LoadingIndicator}
+      {...rest}
+      ref={ref}
+    >
+      <span style={nonLoadingStyling}>{children}</span>
+    </MUILoadingButton>
+  );
+});