Merge pull request #69 from AlecsMissangu/updated-data-catalog-compon…

…ents

fix(Button): updates to button styles

package.json

@@ -17,7 +17,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/lab": "5.0.0-alpha.170",
-    "@mui/material": "^5.15.14",
+    "@mui/material": "^5.15.19",
     "@mui/x-tree-view": "7.3.1",
     "@react-spring/web": "9.7.3",
     "@tanstack/react-query": "^5.18.0",

src/v1/components/inputs/Button/Button.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import MUIButton, { ButtonProps as MUIButtonProps } from "@mui/material/Button";
 import PrimaryButton from "./PrimaryButton";
 import SecondaryButton from "./SecondaryButton";
+import LinkButton from "./LinkButton";
 
 export type ButtonProps = Omit<
   MUIButtonProps,
@@ -15,12 +16,19 @@ export type ButtonProps = Omit<
   | "variant"
 > &
   Partial<{
-    variant: "primary" | "secondary" | "tertiary";
+    variant: "primary" | "secondary" | "tertiary" | "link";
   }>;
 
 const Button: React.FC<ButtonProps> = ({ variant = "primary", ...buttonProps }) => {
   if (variant === "primary") return <PrimaryButton {...buttonProps} />;
   if (variant === "secondary") return <SecondaryButton {...buttonProps} />;
+
+  /**
+   * Cannot extend variants in theme. Using sx as workaround
+   * https://github.com/mui/material-ui/issues/32427
+   */
+  if (variant === "link") return <LinkButton {...buttonProps} />;
+
   return (
     <MUIButton variant="text" color="primary" {...buttonProps}>
       {buttonProps.children}

src/v1/components/inputs/Button/LinkButton.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import MUIButton, { ButtonProps as MUIButtonProps } from "@mui/material/Button";
+import MUIBox from "@mui/material/Box";
+import useTheme from "@mui/material/styles/useTheme";
+
+type LinkButtonProps = Omit<MUIButtonProps, "variant" | "color">;
+
+const LinkButton: React.FC<LinkButtonProps> = (buttonProps) => {
+  const theme = useTheme();
+
+  return (
+    <MUIBox sx={{ width: "fit-content" }}>
+      <MUIButton
+        variant="text"
+        color="primary"
+        {...buttonProps}
+        disableRipple
+        sx={{
+          minWidth: "fit-content",
+          padding: 0,
+          ":hover": { backgroundColor: "transparent" },
+          ":not(.Mui-disabled):hover + .ButtonLinkLine": { opacity: 1, width: "100%" },
+        }}
+      >
+        {buttonProps.children}
+      </MUIButton>
+      <MUIBox
+        className="ButtonLinkLine"
+        borderTop={1.5}
+        borderColor={theme.palette.primary.main}
+        sx={{
+          opacity: 0,
+          width: 0,
+          marginLeft: "auto",
+          marginRight: "auto",
+          transitionDuration: "400ms",
+          transitionProperty: "width, opacity",
+          transitionTimingFunction: "cubic-bezier(0.39, 0.58, 0.57, 1)",
+        }}
+      />
+    </MUIBox>
+  );
+};
+
+export default LinkButton;

src/v1/components/inputs/Button/SecondaryButton.tsx

@@ -1,12 +1,21 @@
 import React from "react";
-import { Button, ButtonProps } from "@mui/material";
+import MUIButton, { ButtonProps as MUIButtonProps } from "@mui/material/Button";
 
-type SecondaryButtonProps = Omit<ButtonProps, "variant" | "color">;
+type SecondaryButtonProps = Omit<MUIButtonProps, "variant" | "color">;
 
-const SecondaryButton: React.FC<SecondaryButtonProps> = (buttonProps) => (
-  <Button variant="outlined" color="primary" {...buttonProps}>
-    {buttonProps.children}
-  </Button>
-);
+const SecondaryButton: React.FC<SecondaryButtonProps> = (buttonProps) => {
+  if (buttonProps.disableElevation) {
+    return (
+      <MUIButton variant="outlined" color="primary" {...buttonProps}>
+        {buttonProps.children}
+      </MUIButton>
+    );
+  }
+  return (
+    <MUIButton variant="outlined" color="inherit" {...buttonProps}>
+      {buttonProps.children}
+    </MUIButton>
+  );
+};
 
 export default SecondaryButton;

src/v1/theme/light-palette.ts

@@ -10,6 +10,12 @@ const createLightPalette = (themeColor: UITheme): ThemeOptions["palette"] => ({
     dark: THEME_COLORS[themeColor][600],
     contrastText: common.white,
   },
+  secondary: {
+    main: "#F9F9F9",
+  },
+  warning: undefined,
+  info: undefined,
+  success: undefined,
   background: {
     default: "#F8F9F9",
   },

src/v1/theme/style-overrides/component-overrides/button-overrides.ts

@@ -1,33 +1,43 @@
 import { ThemeOptions } from "@mui/material";
+import THEME_COLORS, { UITheme } from "../../colors/theme-colors";
 
-const BUTTON_OVERRIDES: ThemeOptions["components"] = {
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        paddingInline: theme.spacing(2),
-      }),
-      outlinedPrimary: ({ theme }) => ({
-        border: `1px solid ${theme.palette.primary.main}`,
-      }),
-      startIcon: {
-        ">*:nth-last-of-type(1)": {
-          fontSize: "inherit",
+const generateButtonOverrides = (uiTheme: UITheme) =>
+  ({
+    MuiButton: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          paddingInline: theme.spacing(2),
+        }),
+        outlinedInherit: ({ theme }) => ({
+          border: `1px solid #CFD8DC`,
+          boxShadow: theme.shadows[2],
+        }),
+        outlinedPrimary: ({ theme }) => ({
+          border: `1px solid ${theme.palette.primary.main}`,
+          backgroundColor: theme.palette.secondary.main,
+          ":hover": {
+            backgroundColor: `${THEME_COLORS[uiTheme][100]}`,
+          },
+        }),
+        startIcon: {
+          ">*:nth-last-of-type(1)": {
+            fontSize: "inherit",
+          },
         },
-      },
-      endIcon: {
-        ">*:nth-last-of-type(1)": {
-          fontSize: "inherit",
+        endIcon: {
+          ">*:nth-last-of-type(1)": {
+            fontSize: "inherit",
+          },
         },
       },
     },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: {
-        borderRadius: 4,
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+        },
       },
     },
-  },
-};
+  } satisfies ThemeOptions["components"]);
 
-export default BUTTON_OVERRIDES;
+export default generateButtonOverrides;

src/v1/theme/style-overrides/component-overrides/index.ts

@@ -1,3 +1,3 @@
 export { default as AVATAR_OVERRIDES } from "./avatar-overrides";
-export { default as BUTTON_OVERRIDES } from "./button-overrides";
+export { default as generateButtonOverrides } from "./button-overrides";
 export { default as CARD_OVERRIDES } from "./card-overrides";

src/v1/theme/style-overrides/components.ts

@@ -1,17 +1,19 @@
 import { ThemeOptions } from "@mui/material";
 import * as componentOverrides from "./component-overrides";
+import { UITheme } from "../colors/theme-colors";
 
-const COMPONENTS_STYLE_OVERRIDES = {
-  ...componentOverrides.AVATAR_OVERRIDES,
-  ...componentOverrides.BUTTON_OVERRIDES,
-  ...componentOverrides.CARD_OVERRIDES,
-  MuiAppBar: {
-    styleOverrides: {
-      root: {
-        height: 70,
+const generateComponentOverrides = (uiTheme: UITheme) =>
+  ({
+    ...componentOverrides.AVATAR_OVERRIDES,
+    ...componentOverrides.generateButtonOverrides(uiTheme),
+    ...componentOverrides.CARD_OVERRIDES,
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          height: 70,
+        },
       },
     },
-  },
-} satisfies ThemeOptions["components"];
+  } satisfies ThemeOptions["components"]);
 
-export default COMPONENTS_STYLE_OVERRIDES;
+export default generateComponentOverrides;

src/v1/theme/theme.ts

@@ -2,11 +2,11 @@ import { ThemeOptions, createTheme as createMUITheme } from "@mui/material";
 import { UITheme } from "./colors/theme-colors";
 import TYPOGRAPHY_STYLE_OVERRIDES from "./style-overrides/typography";
 import createLightPalette from "./light-palette";
-import COMPONENTS_STYLE_OVERRIDES from "./style-overrides/components";
+import generateComponentOverrides from "./style-overrides/components";
 
 const createTheme = (themeColor: UITheme): ThemeOptions =>
   createMUITheme({
-    components: COMPONENTS_STYLE_OVERRIDES,
+    components: generateComponentOverrides(themeColor),
     palette: createLightPalette(themeColor),
     typography: TYPOGRAPHY_STYLE_OVERRIDES,
   });

vite.config.ts

@@ -3,7 +3,7 @@ import react from "@vitejs/plugin-react";
 import path from "path";
 import copy from "rollup-plugin-copy";
 import dts from "vite-plugin-dts";
-import { watchAndRun } from 'vite-plugin-watch-and-run'
+import { watchAndRun } from "vite-plugin-watch-and-run";
 import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
@@ -42,16 +42,17 @@ export default defineConfig({
     },
   },
   plugins: [
-    dts({ insertTypesEntry: true }), react(),
+    dts({ insertTypesEntry: true }),
+    react(),
 
-    watchAndRun([
-      {
-        name: 'rebuild',
-        watchKind: ['add', 'change', 'unlink'],
-        watch: path.resolve('src/**/*.(ts|tsx)'),
-        run: 'npm run build',
-        delay: 100,
-      }
-    ])
+    //   watchAndRun([
+    //     {
+    //       name: 'rebuild',
+    //       watchKind: ['add', 'change', 'unlink'],
+    //       watch: path.resolve('src/**/*.(ts|tsx)'),
+    //       run: 'npm run build',
+    //       delay: 100,
+    //     }
+    //   ])
   ],
 });

yarn.lock

@@ -2571,10 +2571,10 @@
     clsx "^2.1.0"
     prop-types "^15.8.1"
 
-"@mui/core-downloads-tracker@^5.15.18":
-  version "5.15.18"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.18.tgz#0f9426409a82f78423bdf504b2a5a3788656d612"
-  integrity sha512-/9pVk+Al8qxAjwFUADv4BRZgMpZM4m5E+2Q/20qhVPuIJWqKp4Ie4tGExac6zu93rgPTYVQGgu+1vjiT0E+cEw==
+"@mui/core-downloads-tracker@^5.15.19":
+  version "5.15.19"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.19.tgz#7af0025c871f126367a55219486681954e4821d7"
+  integrity sha512-tCHSi/Tomez9ERynFhZRvFO6n9ATyrPs+2N80DMDzp6xDVirbBjEwhPcE+x7Lj+nwYw0SqFkOxyvMP0irnm55w==
 
 "@mui/lab@5.0.0-alpha.170":
   version "5.0.0-alpha.170"
@@ -2589,14 +2589,14 @@
     clsx "^2.1.0"
     prop-types "^15.8.1"
 
-"@mui/material@^5.15.14":
-  version "5.15.18"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.18.tgz#1184e88cebb5c58625ca799531c0611c1fd9a2a8"
-  integrity sha512-n+/dsiqux74fFfcRUJjok+ieNQ7+BEk6/OwX9cLcLvriZrZb+/7Y8+Fd2HlUUbn5N0CDurgAHm0VH1DqyJ9HAw==
+"@mui/material@^5.15.19":
+  version "5.15.19"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.19.tgz#a5bd50b6e68cee4ed39ea91dbecede5a020aaa97"
+  integrity sha512-lp5xQBbcRuxNtjpWU0BWZgIrv2XLUz4RJ0RqFXBdESIsKoGCQZ6P3wwU5ZPuj5TjssNiKv9AlM+vHopRxZhvVQ==
   dependencies:
     "@babel/runtime" "^7.23.9"
     "@mui/base" "5.0.0-beta.40"
-    "@mui/core-downloads-tracker" "^5.15.18"
+    "@mui/core-downloads-tracker" "^5.15.19"
     "@mui/system" "^5.15.15"
     "@mui/types" "^7.2.14"
     "@mui/utils" "^5.15.14"