fix(snackbar): remove duplicated alert role (#3443)

* fix: remove duplicate role alert * refactor(snackbar): replaced styled components with useClasses * fix: correctly apply styles * fix: type definition * fix: revert previous, fix type definition in the correct place
lumada-design · Jun 22, 2023 · c7eba2e · c7eba2e
1 parent ecc4cd3
commit c7eba2e
Show file tree

Hide file tree

Showing 11 changed files with 196 additions and 288 deletions.
diff --git a/packages/core/src/components/Snackbar/Snackbar.styles.tsx b/packages/core/src/components/Snackbar/Snackbar.styles.tsx
@@ -1,28 +1,41 @@
-import styled from "@emotion/styled";
-import Snackbar, { snackbarClasses } from "@mui/material/Snackbar";
 import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@core/utils";
+import { snackbarClasses } from "@mui/material";
 
-export const StyledSnackbar = styled(Snackbar)({
-  [`&.${snackbarClasses.anchorOriginTopRight}`]: {
-    top: theme.space.xs,
-    right: theme.space.xs,
+export const { useClasses, staticClasses } = createClasses("HvSnackbar", {
+  root: {},
+  anchorOriginTopRight: {
+    [`&.${snackbarClasses.anchorOriginTopRight}`]: {
+      top: theme.space.xs,
+      right: theme.space.xs,
+    },
   },
-  [`&.${snackbarClasses.anchorOriginTopLeft}`]: {
-    top: theme.space.xs,
-    left: theme.space.xs,
+  anchorOriginTopLeft: {
+    [`&.${snackbarClasses.anchorOriginTopLeft}`]: {
+      top: theme.space.xs,
+      left: theme.space.xs,
+    },
   },
-  [`&.${snackbarClasses.anchorOriginTopCenter}`]: {
-    top: theme.space.xs,
+  anchorOriginTopCenter: {
+    [`&.${snackbarClasses.anchorOriginTopCenter}`]: {
+      top: theme.space.xs,
+    },
   },
-  [`&.${snackbarClasses.anchorOriginBottomCenter}`]: {
-    bottom: theme.space.xs,
+  anchorOriginBottomCenter: {
+    [`&.${snackbarClasses.anchorOriginBottomCenter}`]: {
+      bottom: theme.space.xs,
+    },
   },
-  [`&.${snackbarClasses.anchorOriginBottomLeft}`]: {
-    bottom: theme.space.xs,
-    left: theme.space.xs,
+  anchorOriginBottomLeft: {
+    [`&.${snackbarClasses.anchorOriginBottomLeft}`]: {
+      bottom: theme.space.xs,
+      left: theme.space.xs,
+    },
   },
-  [`&.${snackbarClasses.anchorOriginBottomRight}`]: {
-    bottom: theme.space.xs,
-    right: theme.space.xs,
+  anchorOriginBottomRight: {
+    [`&.${snackbarClasses.anchorOriginBottomRight}`]: {
+      bottom: theme.space.xs,
+      right: theme.space.xs,
+    },
   },
 });
diff --git a/packages/core/src/components/Snackbar/Snackbar.tsx b/packages/core/src/components/Snackbar/Snackbar.tsx
@@ -4,18 +4,21 @@ import {
   SnackbarOrigin,
   SnackbarProps as MuiSnackbarProps,
 } from "@mui/material/Snackbar";
+import { Snackbar as MuiSnackbar } from "@mui/material";
 import { HvBaseProps } from "@core/types";
 import capitalize from "lodash/capitalize";
 import { SyntheticEvent } from "react";
-import { setId } from "@core/utils";
+import { ExtractNames, setId } from "@core/utils";
 import { HvActionGeneric } from "@core/components";
-import { clsx } from "clsx";
 import {
   HvSnackbarContentProps,
   HvSnackbarContent,
 } from "./SnackbarContentWrapper";
-import snackbarClasses, { HvSnackbarClasses } from "./snackbarClasses";
-import { StyledSnackbar } from "./Snackbar.styles";
+import { staticClasses, useClasses } from "./Snackbar.styles";
+
+export { staticClasses as snackbarClasses };
+
+export type HvSnackbarClasses = ExtractNames<typeof useClasses>;
 
 export type HvSnackbarVariant = "default" | "success" | "warning" | "error";
 
@@ -60,7 +63,7 @@ export interface HvSnackbarProps
   /** Others applied to the content of the snackbar. */
   snackbarContentProps?: HvSnackbarContentProps;
   /** A Jss Object used to override or extend the styles applied to the component. */
-  classes?: HvSnackbarClasses;
+  classes?: Partial<HvSnackbarClasses>;
 }
 
 const transLeft = (props) => <Slide {...props} direction="left" />;
@@ -91,7 +94,7 @@ const snackBarDirComponent = (direction) => {
  * The other is the HvSnackbarContent, which allows a finer control and customization of the content of the Snackbar.
  */
 export const HvSnackbar = ({
-  classes,
+  classes: classesProp = {},
   className,
   id,
   open = false,
@@ -110,6 +113,8 @@ export const HvSnackbar = ({
   snackbarContentProps,
   ...others
 }: HvSnackbarProps) => {
+  const { classes } = useClasses(classesProp);
+
   const anchorOriginOffset = {
     anchorOriginTop: {
       top: `${offset}px`,
@@ -120,37 +125,11 @@ export const HvSnackbar = ({
   };
 
   return (
-    <StyledSnackbar
+    <MuiSnackbar
       style={
         anchorOriginOffset[`anchorOrigin${capitalize(anchorOrigin.vertical)}`]
       }
-      classes={{
-        root: clsx(classes?.root, snackbarClasses.root),
-        anchorOriginBottomCenter: clsx(
-          classes?.anchorOriginBottomCenter,
-          snackbarClasses.anchorOriginBottomCenter
-        ),
-        anchorOriginBottomLeft: clsx(
-          classes?.anchorOriginBottomLeft,
-          snackbarClasses.anchorOriginBottomLeft
-        ),
-        anchorOriginBottomRight: clsx(
-          classes?.anchorOriginBottomRight,
-          snackbarClasses.anchorOriginBottomRight
-        ),
-        anchorOriginTopCenter: clsx(
-          classes?.anchorOriginTopCenter,
-          snackbarClasses.anchorOriginTopCenter
-        ),
-        anchorOriginTopLeft: clsx(
-          classes?.anchorOriginTopLeft,
-          snackbarClasses.anchorOriginTopLeft
-        ),
-        anchorOriginTopRight: clsx(
-          classes?.anchorOriginTopRight,
-          snackbarClasses.anchorOriginTopRight
-        ),
-      }}
+      classes={classes}
       className={className}
       id={id}
       anchorOrigin={anchorOrigin}
@@ -171,6 +150,6 @@ export const HvSnackbar = ({
         actionCallback={actionCallback}
         {...snackbarContentProps}
       />
-    </StyledSnackbar>
+    </MuiSnackbar>
   );
 };
diff --git a/...ges/core/src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.tsx b/...ges/core/src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.styles.tsx
@@ -1,55 +1,49 @@
-import styled from "@emotion/styled";
 import { theme } from "@hitachivantara/uikit-styles";
-import SnackbarContent, {
-  snackbarContentClasses,
-} from "@mui/material/SnackbarContent";
 import { CSSProperties } from "react";
-import { transientOptions } from "@core/utils/transientOptions";
+import { createClasses } from "@core/utils";
 
-export const StyledSnackbarContent = styled(
-  SnackbarContent,
-  transientOptions
-)(({ $variant }: { $variant: string }) => ({
-  ...($variant === "success" && {
-    backgroundColor: theme.colors.positive_20,
-  }),
-  ...($variant === "error" && {
-    backgroundColor: theme.colors.negative_20,
-  }),
-  ...($variant === "default" && {
-    backgroundColor: theme.colors.neutral_20,
-  }),
-  ...($variant === "warning" && {
-    backgroundColor: theme.colors.warning_20,
-  }),
-  [`&.${snackbarContentClasses.root}`]: {
-    width: "310px",
-    minHeight: "52px",
-    maxHeight: "92px",
-    padding: theme.space.xs,
-    boxShadow: "none",
-  },
-  [`& .${snackbarContentClasses.message}`]: {
-    padding: 0,
-    width: "100%",
-  },
-}));
-
-export const StyledMessageSpan = styled("div")({
-  display: "flex",
-  alignItems: "center",
-  minHeight: "32px",
-});
-
-export const StyledMessageText = styled("div")({
-  ...(theme.typography.body as CSSProperties),
-  padding: `0 ${theme.space.xs}`,
-  color: theme.colors.base_dark,
-  fontFamily: theme.fontFamily.body,
-  maxHeight: "72px",
-  wordBreak: "break-word",
-});
-
-export const StyledAction = styled("div")({
-  textAlign: "right",
-});
+export const { useClasses, staticClasses } = createClasses(
+  "HvSnackbar-Content",
+  {
+    root: {
+      width: "310px",
+      minHeight: "52px",
+      maxHeight: "92px",
+      padding: theme.space.xs,
+      boxShadow: "none",
+    },
+    success: {
+      backgroundColor: theme.colors.positive_20,
+    },
+    error: {
+      backgroundColor: theme.colors.negative_20,
+    },
+    default: {
+      backgroundColor: theme.colors.neutral_20,
+    },
+    warning: {
+      backgroundColor: theme.colors.warning_20,
+    },
+    message: {
+      padding: 0,
+      width: "100%",
+    },
+    messageSpan: {
+      display: "flex",
+      alignItems: "center",
+      minHeight: "32px",
+    },
+    messageText: {
+      ...(theme.typography.body as CSSProperties),
+      padding: `0 ${theme.space.xs}`,
+      color: theme.colors.base_dark,
+      fontFamily: theme.fontFamily.body,
+      maxHeight: "72px",
+      wordBreak: "break-word",
+    },
+    action: {
+      textAlign: "right",
+    },
+    iconVariant: {},
+  }
+);
diff --git a/packages/core/src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.tsx b/packages/core/src/components/Snackbar/SnackbarContentWrapper/SnackbarContentWrapper.tsx
@@ -1,19 +1,16 @@
-import { clsx } from "clsx";
 import { forwardRef, isValidElement } from "react";
-import { SnackbarContentProps as MuiSnackbarContentProps } from "@mui/material/SnackbarContent";
-import { iconVariant, setId } from "@core/utils";
+import SnackbarContent, {
+  SnackbarContentProps as MuiSnackbarContentProps,
+} from "@mui/material/SnackbarContent";
+import { ExtractNames, iconVariant, setId } from "@core/utils";
 import { HvBaseProps } from "@core/types";
 import { HvActionsGeneric, HvActionGeneric } from "@core/components";
 import { HvSnackbarVariant } from "../Snackbar";
-import {
-  StyledMessageSpan,
-  StyledSnackbarContent,
-  StyledMessageText,
-  StyledAction,
-} from "./SnackbarContentWrapper.styles";
-import snackbarContentClasses, {
-  HvSnackbarContentClasses,
-} from "./snackbarContentWrapperClasses";
+import { staticClasses, useClasses } from "./SnackbarContentWrapper.styles";
+
+export { staticClasses as snackbarContentClasses };
+
+export type HvSnackbarContentClasses = ExtractNames<typeof useClasses>;
 
 export interface HvSnackbarContentProps
   extends Omit<MuiSnackbarContentProps, "variant" | "action" | "classes">,
@@ -35,15 +32,18 @@ export interface HvSnackbarContentProps
     action: HvActionGeneric
   ) => void;
   /** A Jss Object used to override or extend the styles applied to the component. */
-  classes?: HvSnackbarContentClasses;
+  classes?: Partial<HvSnackbarContentClasses>;
 }
 
-const HvSnackbarContent = forwardRef<HTMLDivElement, HvSnackbarContentProps>(
+export const HvSnackbarContent = forwardRef<
+  HTMLDivElement,
+  HvSnackbarContentProps
+>(
   (
     {
       className,
       id,
-      classes,
+      classes: classesProp = {},
       label,
       variant,
       showIcon,
@@ -57,65 +57,35 @@ const HvSnackbarContent = forwardRef<HTMLDivElement, HvSnackbarContentProps>(
     const icon = customIcon || (showIcon && iconVariant(variant, "base_dark"));
     const innerAction: any = isValidElement(action) ? action : [action];
 
+    const { classes, cx } = useClasses(classesProp);
+
     return (
-      <StyledSnackbarContent
+      <SnackbarContent
         ref={ref}
         id={id}
         classes={{
-          root: clsx(snackbarContentClasses.root, classes?.root),
-          message: clsx(snackbarContentClasses.message, classes?.message),
+          root: classes?.root,
+          message: classes?.message,
         }}
-        className={clsx(
-          className,
-          classes?.[variant],
-          snackbarContentClasses[variant]
-        )}
+        className={cx(className, classes?.[variant])}
         message={
-          <StyledMessageSpan
-            id={setId(id, "message")}
-            className={clsx(
-              snackbarContentClasses.messageSpan,
-              classes?.messageSpan
-            )}
-          >
-            {icon && (
-              <div
-                className={clsx(
-                  snackbarContentClasses.iconVariant,
-                  classes?.iconVariant
-                )}
-              >
-                {icon}
-              </div>
-            )}
-            <StyledMessageText
-              className={clsx(
-                snackbarContentClasses.messageText,
-                classes?.messageText
-              )}
-            >
-              {label}
-            </StyledMessageText>
+          <div id={setId(id, "message")} className={classes?.messageSpan}>
+            {icon && <div className={classes?.iconVariant}>{icon}</div>}
+            <div className={classes?.messageText}>{label}</div>
             {action && (
-              <StyledAction
-                id={setId(id, "action")}
-                className={clsx(snackbarContentClasses.action, classes?.action)}
-              >
+              <div id={setId(id, "action")} className={classes?.action}>
                 <HvActionsGeneric
                   id={id}
                   category="secondaryGhost"
                   actions={innerAction}
                   actionsCallback={actionCallback}
                 />
-              </StyledAction>
+              </div>
             )}
-          </StyledMessageSpan>
+          </div>
         }
-        $variant={variant}
         {...others}
       />
     );
   }
 );
-
-export default HvSnackbarContent;
diff --git a/packages/core/src/components/Snackbar/SnackbarContentWrapper/index.ts b/packages/core/src/components/Snackbar/SnackbarContentWrapper/index.ts
@@ -1,4 +1 @@
-export { default as snackbarContentClasses } from "./snackbarContentWrapperClasses";
-export * from "./snackbarContentWrapperClasses";
-export { default as HvSnackbarContent } from "./SnackbarContentWrapper";
 export * from "./SnackbarContentWrapper";