@m4l/components 9.2.47 → 9.2.48

package/components/mui_extended/Button/Button.js

@@ -15,7 +15,7 @@ const Button = forwardRef((props, ref) => {
     disabled = false,
     size = "small",
     variant = "contained",
-    skeletonWidth = "100%",
+    skeletonWidth = "15%",
     ...others
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -74,6 +74,7 @@ const Button = forwardRef((props, ref) => {
       size,
       disabled,
       disableRipple: true,
+      tabIndex: 0,
       ownerState: { ...ownerState },
       ref,
       ...others,

package/components/mui_extended/Button/ButtonStyles.js

@@ -5,14 +5,36 @@ const buttonStyles = {
    */
   buttonRoot: ({ theme, ownerState }) => ({
     display: "flex",
+    flexWrap: "wrap",
     alignItems: "center",
     gap: theme.vars.size.baseSpacings.sp1,
     padding: `0px ${theme.vars.size.baseSpacings.sp1}`,
     boxShadow: "none",
     borderRadius: theme.vars.size.borderRadius.r1,
+    "&:hover": {
+      backgroundColor: ownerState.paletteColor?.hoverOpacity,
+      borderColor: ownerState.paletteColor?.hover
+    },
+    "&:active": {
+      boxShadow: "none",
+      borderColor: ownerState.paletteColor?.active,
+      backgroundColor: ownerState.paletteColor?.activeOpacity
+    },
+    "&:focus-visible": {
+      boxShadow: "none",
+      outline: theme.vars.size.borderStroke.container,
+      outlineColor: theme.vars.palette.border.main,
+      outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+      backgroundColor: ownerState.paletteColor?.activeOpacity
+    },
     "&:disabled": {
-      color: theme.vars.palette.text.disabled,
-      backgroundColor: ownerState.paletteColor?.enabled
+      backgroundColor: "none",
+      "&&& .M4LIcon-icon": {
+        backgroundColor: theme.vars.palette.text.disabled
+      },
+      ...ownerState.variant === "contained" && {
+        backgroundColor: ownerState.paletteColor?.enabled
+      }
     },
     ...ownerState.variant === "contained" && {
       backgroundColor: ownerState.paletteColor?.enabled,
@@ -20,109 +42,46 @@ const buttonStyles = {
         backgroundColor: ownerState.paletteColor?.hover
       },
       "&:active": {
-        backgroundColor: ownerState.paletteColor?.active
-      },
-      "&:focus-visible": {
         boxShadow: "none",
-        outline: theme.vars.size.borderStroke.container,
-        outlineColor: theme.vars.palette.border.main,
-        outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
         backgroundColor: ownerState.paletteColor?.active
       }
     },
     ...ownerState.variant === "outlined" && {
-      color: ownerState.paletteColor?.enabled,
       borderColor: ownerState.paletteColor?.enabled,
-      backgroundColor: "transparent",
       "&&& .M4LIcon-icon": {
         backgroundColor: ownerState.paletteColor?.semanticText
-      },
-      ...ownerState.color === "default" && {
-        borderColor: theme.vars.palette.border.default
-      },
-      "&&&:hover": {
-        borderColor: ownerState.paletteColor?.enabled,
-        backgroundColor: ownerState.paletteColor?.hoverOpacity
-      },
-      "&&&:active": {
-        borderColor: ownerState.paletteColor?.active,
-        backgroundColor: ownerState.paletteColor?.activeOpacity
-      },
-      "&&&:focus-visible": {
-        boxShadow: "none",
-        outline: theme.vars.size.borderStroke.container,
-        outlineColor: theme.vars.palette.border.main,
-        outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
-        backgroundColor: ownerState.paletteColor?.activeOpacity
       }
     },
     ...ownerState.variant === "text" && {
       color: ownerState.paletteColor?.semanticText,
       borderColor: ownerState.paletteColor?.enabled,
-      backgroundColor: "transparent",
       "&&& .M4LIcon-icon": {
         backgroundColor: ownerState.paletteColor?.semanticText
-      },
-      "&&&:hover": {
-        backgroundColor: ownerState.paletteColor?.hoverOpacity
-      },
-      "&&&:active": {
-        backgroundColor: ownerState.paletteColor?.activeOpacity
-      },
-      "&:focus-visible": {
-        boxShadow: "none",
-        outline: theme.vars.size.borderStroke.container,
-        outlineColor: theme.vars.palette.border.main,
-        outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
-        backgroundColor: ownerState.paletteColor?.activeOpacity
       }
     },
     "& span": {
       margin: "0px"
     },
-    ...getSizeStyles(
-      theme,
-      ownerState.size || "medium",
-      "action"
-    )
-    // // Estilos específicos para el tamaño small
-    // ...(ownerState.size === 'small' && {
-    //   ...(theme.generalSettings.isMobile
-    //     ? {
-    //         height: theme.vars.size.mobile.small.action,
-    //         minHeight: theme.vars.size.mobile.small.action,
-    //       }
-    //     : {
-    //         height: theme.vars.size.desktop.small.action,
-    //         minHeight: theme.vars.size.desktop.small.action,
-    //       }),
-    // }),
-    // // Estilos específicos para el tamaño medium
-    // ...(ownerState.size === 'medium' && {
-    //   ...(theme.generalSettings.isMobile
-    //     ? {
-    //         height: theme.vars.size.mobile.medium.action,
-    //         minHeight: theme.vars.size.mobile.medium.action,
-    //       }
-    //     : {
-    //         height: theme.vars.size.desktop.medium.action,
-    //         minHeight: theme.vars.size.desktop.medium.action,
-    //       }),
-    // }),
+    maxWidth: "100%",
+    height: "auto !important",
+    minHeight: theme.generalSettings?.isMobile ? theme.vars.size.mobile[ownerState.size || "medium"].action : theme.vars.size.desktop[ownerState.size || "medium"].action
   }),
-  buttonIcon: {},
   /**
    * Styles for the text of the button component.
    */
   textButton: ({ theme, ownerState }) => ({
+    cursor: ownerState.disabled ? "not-allowed" : "pointer",
     ...theme.typography.bodyDens,
-    ...ownerState.disabled ? { color: theme.vars.palette.text.disabled } : {
-      ...ownerState.variant === "contained" && {
-        color: ownerState.paletteColor?.contrastText
-      },
-      ...ownerState.variant === "outlined" && {
-        color: ownerState.paletteColor?.semanticText
-      }
+    whiteSpace: "normal",
+    wordBreak: "break-word",
+    ...ownerState.variant === "contained" && {
+      color: ownerState.paletteColor?.contrastText
+    },
+    ...(ownerState.variant === "outlined" || ownerState.variant === "text") && {
+      color: ownerState.paletteColor?.semanticText
+    },
+    ...ownerState.disabled && {
+      color: theme.vars.palette.text.disabled
     }
   }),
   /**
@@ -141,54 +100,9 @@ const buttonStyles = {
           minHeight: sizeValue
         })
       )
-      // // Estilos específicos para el tamaño small
-      // ...(ownerState.size === 'small' && {
-      //   ...(theme.generalSettings.isMobile
-      //     ? {
-      //         height: theme.vars.size.mobile.small.action,
-      //         minHeight: theme.vars.size.mobile.small.action,
-      //       }
-      //     : {
-      //         height: theme.vars.size.desktop.small.action,
-      //         minHeight: theme.vars.size.desktop.small.action,
-      //       }),
-      //   [theme.breakpoints.up('sm')]: {
-      //     ...(theme.generalSettings.isMobile
-      //       ? {
-      //           height: theme.vars.size.mobile.small.action,
-      //           minHeight: theme.vars.size.mobile.small.action,
-      //         }
-      //       : {
-      //           height: theme.vars.size.desktop.small.action,
-      //           minHeight: theme.vars.size.desktop.small.action,
-      //         }),
-      //   },
-      // }),
-      // // Estilos específicos para el tamaño medium
-      // ...(ownerState.size === 'medium' && {
-      //   ...(theme.generalSettings.isMobile
-      //     ? {
-      //         height: theme.vars.size.mobile.medium.action,
-      //         minHeight: theme.vars.size.mobile.medium.action,
-      //       }
-      //     : {
-      //         height: theme.vars.size.desktop.medium.action,
-      //         minHeight: theme.vars.size.desktop.medium.action,
-      //       }),
-      //   [theme.breakpoints.up('md')]: {
-      //     ...(theme.generalSettings.isMobile
-      //       ? {
-      //           height: theme.vars.size.mobile.small.action,
-      //           minHeight: theme.vars.size.mobile.small.action,
-      //         }
-      //       : {
-      //           height: theme.vars.size.desktop.small.action,
-      //           minHeight: theme.vars.size.desktop.small.action,
-      //         }),
-      //   },
-      // }),
     }
-  })
+  }),
+  buttonIcon: {}
 };
 export {
   buttonStyles as b

package/components/mui_extended/Button/types.d.ts

@@ -8,17 +8,6 @@ import { ReactNode } from 'react';
  * [ButtonVariants] - Defines the possible variants for the `Button` component.
  */
 export type ButtonVariants = 'contained' | 'outlined' | 'text';
-/**
- * Props for the `Button` component, extending the original properties of Material UI.
- * [startIcon] - Optional prop for the icon on the left in the `Button`.
- * [endIcon] - Optional prop for the icon on the right in the `Button`.
- * label - Text describing the `Button`.
- * [disabled] - Indicates if the `Button` is disabled.
- * [size] - Size of the `Button` (default 'medium').
- * [error] - Indicates if the `Button` is in an error state.
- * [variant] - Defines the variant of the `Button` (default 'contained').
- * [color] - Defines the color of the `Button`.
- */
 export interface ButtonProps extends Omit<MUIButtonProps, 'size' | 'variant' | 'color'> {
     startIcon?: ReactNode;
     endIcon?: ReactNode;
@@ -43,4 +32,4 @@ export type ButtonSlotsType = keyof typeof ButtonSlots;
 /**
  * Styles applicable to the `Button` using themes and custom slots.
  */
-export type ButtonStyles = Partial<OverridesStyleRules<ButtonSlotsType, typeof BUTTON_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type ButtonStyles = OverridesStyleRules<ButtonSlotsType, typeof BUTTON_KEY_COMPONENT, Theme>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.47",
+  "version": "9.2.48",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"

package/storybook/components/extended/mui/Button/Button.stories.d.ts

@@ -6,14 +6,6 @@ type Story = StoryObj<typeof Button>;
  * Base story for `Button` in standard mode.
  */
 export declare const Default: Story;
-/**
- * Base story for `Button` with start icon.
- */
-export declare const WithStartIcon: Story;
-/**
- * Base story for `Button` with end icon.
- */
-export declare const WithEndIcon: Story;
 /**
  * Base story for `Button` with start and end icon.
  */

package/components/mui_extended/Button/classes/constants.d.ts

@@ -1 +0,0 @@
-export declare const componentName = "M4LButton";

package/components/mui_extended/Button/classes/index.d.ts

@@ -1,10 +0,0 @@
-import { ButtonClassesType, OwnerState } from './types';
-export declare const buttonClasses: ButtonClassesType;
-export declare function getButtonUtilityClass(slot: string): string;
-/**
- * TODO: Documentar
- */
-export declare const useUtilityClasses: (onwerState: OwnerState) => {
-    skeleton: string;
-    root: string;
-};

package/components/mui_extended/Button/classes/types.d.ts

@@ -1,29 +0,0 @@
-import { ButtonProps as MUIButtonProps } from '@mui/material';
-import { useUtilityClasses } from '.';
-export interface ButtonClassesType {
-    root: string;
-    skeleton: string;
-    sizeSmall: string;
-    sizeMedium: string;
-    variantOutlined: string;
-    variantContained: string;
-    variantText: string;
-    isDisabled: string;
-    colorError: string;
-    colorSuccess: string;
-    colorWarning: string;
-    /**Toggle */
-    togglePressed: string;
-    toggleNotPressed: string;
-}
-export type ButtonClassesKey = keyof ButtonClassesType;
-export type Classes = ReturnType<typeof useUtilityClasses>;
-export interface ButtonProps extends Omit<MUIButtonProps, 'size'> {
-    size?: 'small' | 'medium';
-    skeletonWidth?: number | string;
-    skeletonHeight?: number | string;
-    colorState?: 'error' | 'success' | 'warning';
-}
-export interface OwnerState extends Pick<ButtonProps, 'size' | 'variant' | 'colorState'> {
-    isDisabled?: boolean;
-}