replace buttons from mui with comet buttons

vivid-planet · Feb 11, 2025 · c5343f9 · c5343f9
1 parent c71604e
commit c5343f9
Show file tree

Hide file tree

Showing 63 changed files with 170 additions and 219 deletions.
diff --git a/demo/admin/src/products/generated/ProductsGrid.tsx b/demo/admin/src/products/generated/ProductsGrid.tsx
@@ -2,6 +2,7 @@
 // You may choose to use this file as scaffold by moving this file out of generated folder and removing this comment.
 import { gql, useApolloClient, useQuery } from "@apollo/client";
 import {
+    Button,
     CrudContextMenu,
     DataGridToolbar,
     GridColDef,
@@ -20,7 +21,7 @@ import {
 import { Add as AddIcon, Edit } from "@comet/admin-icons";
 import { BlockPreviewContent } from "@comet/blocks-admin";
 import { DamImageBlock } from "@comet/cms-admin";
-import { Button, IconButton } from "@mui/material";
+import { IconButton } from "@mui/material";
 import { DataGridPro, GridToolbarQuickFilter } from "@mui/x-data-grid-pro";
 import * as React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -91,7 +92,7 @@ function ProductsGridToolbar() {
             </ToolbarItem>
             <ToolbarFillSpace />
             <ToolbarActions>
-                <Button startIcon={<AddIcon />} component={StackLink} pageName="add" payload="add" variant="contained" color="primary">
+                <Button startIcon={<AddIcon />} component={StackLink} pageName="add" payload="add" variant="primary">
                     <FormattedMessage id="product.newProduct" defaultMessage="New Product" />
                 </Button>
             </ToolbarActions>

diff --git a/packages/admin/admin-date-time/src/DatePickerNavigation.tsx b/packages/admin/admin-date-time/src/DatePickerNavigation.tsx
@@ -1,6 +1,6 @@
-import { createComponentSlot, ThemedComponentBaseProps } from "@comet/admin";
+import { Button, createComponentSlot, ThemedComponentBaseProps } from "@comet/admin";
 import { ArrowLeft, ArrowRight, ChevronDown } from "@comet/admin-icons";
-import { Box, Button, buttonClasses, ComponentsOverrides, IconButton, Menu, menuClasses, MenuItem } from "@mui/material";
+import { Box, buttonClasses, ComponentsOverrides, IconButton, Menu, menuClasses, MenuItem } from "@mui/material";
 import { css, Theme, useThemeProps } from "@mui/material/styles";
 import { useRef, useState } from "react";
 import { useIntl } from "react-intl";

diff --git a/packages/admin/admin-rte/src/core/extension/Link/ToolbarButton.tsx b/packages/admin/admin-rte/src/core/extension/Link/ToolbarButton.tsx
@@ -1,5 +1,6 @@
+import { Button } from "@comet/admin";
 import { Check, Close, Delete, RteLink } from "@comet/admin-icons";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormLabel, Grid, InputBase } from "@mui/material";
+import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormLabel, Grid, InputBase } from "@mui/material";
 import { EditorState, RichUtils } from "draft-js";
 import { MouseEvent, useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
@@ -120,14 +121,14 @@ function LinkDialog(props: {
                     <Grid container spacing={4}>
                         {linkData && (
                             <Grid item>
-                                <Button variant="contained" startIcon={<Delete />} onClick={handleRemove}>
+                                <Button startIcon={<Delete />} onClick={handleRemove}>
                                     {/** Same as in @comet/admin/messages.ts, not referenced as no dependency specified */}
                                     <FormattedMessage id="comet.generic.delete" defaultMessage="Delete" />
                                 </Button>
                             </Grid>
                         )}
                         <Grid item>
-                            <Button variant="contained" color="primary" startIcon={<Check />} onClick={handleUpdate} disabled={!newUrl}>
+                            <Button variant="primary" startIcon={<Check />} onClick={handleUpdate} disabled={!newUrl}>
                                 {/** Same as in @comet/admin/messages.ts, not referenced as no dependency specified */}
                                 <FormattedMessage id="comet.generic.save" defaultMessage="Save" />
                             </Button>

diff --git a/packages/admin/admin/src/EditDialog.routerTabs.test.tsx b/packages/admin/admin/src/EditDialog.routerTabs.test.tsx
@@ -1,5 +1,5 @@
 import { Add, Edit } from "@comet/admin-icons";
-import { Button, IconButton } from "@mui/material";
+import { IconButton } from "@mui/material";
 import { DataGrid } from "@mui/x-data-grid";
 import { screen, waitFor } from "@testing-library/react";
 import { createMemoryHistory } from "history";
@@ -8,6 +8,7 @@ import { useIntl } from "react-intl";
 import { Router } from "react-router";
 import { render } from "test-utils";
 
+import { Button } from "./common/buttons/Button";
 import { ToolbarActions } from "./common/toolbar/actions/ToolbarActions";
 import { DataGridToolbar } from "./common/toolbar/DataGridToolbar";
 import { ToolbarFillSpace } from "./common/toolbar/fillspace/ToolbarFillSpace";
@@ -107,12 +108,7 @@ describe("EditDialog with Stack, Router Tabs and Grid", () => {
                         componentsProps={{
                             toolbar: {
                                 toolbarAction: (
-                                    <Button
-                                        startIcon={<Add />}
-                                        onClick={() => editDialogApi.current?.openAddDialog()}
-                                        variant="contained"
-                                        color="primary"
-                                    >
+                                    <Button startIcon={<Add />} onClick={() => editDialogApi.current?.openAddDialog()} variant="primary">
                                         Add product
                                     </Button>
                                 ),

diff --git a/packages/admin/admin/src/EditDialog.stackRouterTabs.test.tsx b/packages/admin/admin/src/EditDialog.stackRouterTabs.test.tsx
@@ -1,5 +1,5 @@
 import { Add, Edit } from "@comet/admin-icons";
-import { Button, IconButton } from "@mui/material";
+import { IconButton } from "@mui/material";
 import { DataGrid } from "@mui/x-data-grid";
 import { screen, within } from "@testing-library/react";
 import { createMemoryHistory } from "history";
@@ -8,6 +8,7 @@ import { useIntl } from "react-intl";
 import { Router } from "react-router";
 import { render } from "test-utils";
 
+import { Button } from "./common/buttons/Button";
 import { MainContent } from "./common/MainContent";
 import { ToolbarActions } from "./common/toolbar/actions/ToolbarActions";
 import { ToolbarAutomaticTitleItem } from "./common/toolbar/automatictitleitem/ToolbarAutomaticTitleItem";
@@ -119,12 +120,7 @@ describe("EditDialog with Stack, Router Tabs and Grid", () => {
                                     componentsProps={{
                                         toolbar: {
                                             toolbarAction: (
-                                                <Button
-                                                    startIcon={<Add />}
-                                                    onClick={() => editDialogApi.current?.openAddDialog()}
-                                                    variant="contained"
-                                                    color="primary"
-                                                >
+                                                <Button startIcon={<Add />} onClick={() => editDialogApi.current?.openAddDialog()} variant="primary">
                                                     Add product
                                                 </Button>
                                             ),

diff --git a/packages/admin/admin/src/EditDialog.test.tsx b/packages/admin/admin/src/EditDialog.test.tsx
@@ -1,7 +1,7 @@
-import { Button } from "@mui/material";
 import userEvent from "@testing-library/user-event";
 import { render, screen, waitFor } from "test-utils";
 
+import { Button } from "./common/buttons/Button";
 import { useEditDialog } from "./EditDialog";
 import { FinalForm } from "./FinalForm";
 import { Field } from "./form/Field";

diff --git a/packages/admin/admin/src/common/buttons/cancel/CancelButton.tsx b/packages/admin/admin/src/common/buttons/cancel/CancelButton.tsx
@@ -1,10 +1,9 @@
 import { Clear } from "@comet/admin-icons";
-import { Button, ButtonClassKey } from "@mui/material";
-import { ButtonProps } from "@mui/material/Button";
 import { Theme, useThemeProps } from "@mui/material/styles";
 import { ComponentsOverrides } from "@mui/material/styles/overrides";
 import { FormattedMessage } from "react-intl";
 
+import { Button, ButtonClassKey, ButtonProps } from "../../../common/buttons/Button";
 import { createComponentSlot } from "../../../helpers/createComponentSlot";
 import { messages } from "../../../messages";
 

diff --git a/packages/admin/admin/src/common/buttons/delete/DeleteButton.tsx b/packages/admin/admin/src/common/buttons/delete/DeleteButton.tsx
@@ -1,8 +1,9 @@
 import { Delete } from "@comet/admin-icons";
-import { Button, ButtonClassKey, ButtonProps, ComponentsOverrides } from "@mui/material";
+import { ComponentsOverrides } from "@mui/material";
 import { css, Theme, useThemeProps } from "@mui/material/styles";
 import { FormattedMessage } from "react-intl";
 
+import { Button, ButtonClassKey, ButtonProps } from "../../../common/buttons/Button";
 import { createComponentSlot } from "../../../helpers/createComponentSlot";
 import { messages } from "../../../messages";
 

diff --git a/packages/admin/admin/src/common/buttons/okay/OkayButton.tsx b/packages/admin/admin/src/common/buttons/okay/OkayButton.tsx
@@ -1,8 +1,8 @@
 import { Check } from "@comet/admin-icons";
-import { Button, ButtonClassKey, ButtonProps, ComponentsOverrides } from "@mui/material";
-import { Theme, useThemeProps } from "@mui/material/styles";
+import { ComponentsOverrides, Theme, useThemeProps } from "@mui/material/styles";
 import { FormattedMessage } from "react-intl";
 
+import { Button, ButtonClassKey, ButtonProps } from "../../../common/buttons/Button";
 import { createComponentSlot } from "../../../helpers/createComponentSlot";
 import { messages } from "../../../messages";
 
@@ -18,13 +18,12 @@ export function OkayButton(inProps: OkayButtonProps) {
     const {
         children = <FormattedMessage {...messages.ok} />,
         startIcon = <Check />,
-        color = "primary",
-        variant = "contained",
+        variant = "primary",
         ...restProps
     } = useThemeProps({ props: inProps, name: "CometAdminOkayButton" });
 
     return (
-        <Root startIcon={startIcon} color={color} variant={variant} {...restProps}>
+        <Root startIcon={startIcon} variant={variant} {...restProps}>
             {children}
         </Root>
     );

diff --git a/packages/admin/admin/src/dataGrid/CrudVisibility.tsx b/packages/admin/admin/src/dataGrid/CrudVisibility.tsx
@@ -1,7 +1,8 @@
-import { Button, ListItemIcon, Menu, MenuItem } from "@mui/material";
+import { ListItemIcon, Menu, MenuItem } from "@mui/material";
 import { MouseEvent, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
+import { Button } from "../common/buttons/Button";
 import { useSnackbarApi } from "../snackbar/SnackbarProvider";
 import { UndoSnackbar } from "../snackbar/UndoSnackbar";
 import { CrudVisibilityIcon } from "./CrudVisibilityIcon";
@@ -46,7 +47,7 @@ export const CrudVisibility = ({ visibility, onUpdateVisibility }: CrudVisibilit
 
     return (
         <>
-            <Button size="small" onClick={handleMenuOpen} startIcon={<CrudVisibilityIcon visibility={visibility} />} color="info">
+            <Button size="small" onClick={handleMenuOpen} startIcon={<CrudVisibilityIcon visibility={visibility} />} variant="textDark">
                 <FormattedMessage
                     id="comet.common.visibility"
                     defaultMessage="{visibility, select, true {Published} false {Unpublished} other {unknown}}"

diff --git a/packages/admin/admin/src/form/file/FileDropzone.tsx b/packages/admin/admin/src/form/file/FileDropzone.tsx
@@ -1,9 +1,10 @@
 import { Error, Select } from "@comet/admin-icons";
-import { Box, Button, ComponentsOverrides, css, Theme, Typography, useThemeProps } from "@mui/material";
+import { Box, ComponentsOverrides, css, Theme, Typography, useThemeProps } from "@mui/material";
 import { ReactNode, useState } from "react";
 import { DropzoneOptions, useDropzone } from "react-dropzone";
 import { FormattedMessage } from "react-intl";
 
+import { Button } from "../../common/buttons/Button";
 import { createComponentSlot } from "../../helpers/createComponentSlot";
 import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps";
 
@@ -104,14 +105,7 @@ export const FileDropzone = (inProps: FileDropzoneProps) => {
                     </Dropzone>
                 )}
                 {!hideButton && (
-                    <SelectFileButton
-                        tabIndex={-1}
-                        disabled={disabled}
-                        variant="contained"
-                        color="secondary"
-                        startIcon={selectIcon}
-                        {...slotProps?.selectFileButton}
-                    >
+                    <SelectFileButton tabIndex={-1} disabled={disabled} variant="secondary" startIcon={selectIcon} {...slotProps?.selectFileButton}>
                         {buttonText}
                     </SelectFileButton>
                 )}

diff --git a/packages/admin/admin/src/router/ConfirmationDialog.tsx b/packages/admin/admin/src/router/ConfirmationDialog.tsx
@@ -1,9 +1,10 @@
 import { Close, Delete, Save, Warning } from "@comet/admin-icons";
-import { Button, ComponentsOverrides, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Theme, Typography } from "@mui/material";
+import { ComponentsOverrides, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Theme, Typography } from "@mui/material";
 import { css, useThemeProps } from "@mui/material/styles";
 import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
 
+import { Button } from "../common/buttons/Button";
 import { createComponentSlot } from "../helpers/createComponentSlot";
 import { ThemedComponentBaseProps } from "../helpers/ThemedComponentBaseProps";
 import { messages } from "../messages";
@@ -141,13 +142,7 @@ export function RouterConfirmationDialog(inProps: RouterConfirmationDialogProps)
                     <FormattedMessage {...messages.discard} />
                 </DiscardButton>
                 {showSaveButton && (
-                    <SaveButton
-                        startIcon={<Save />}
-                        color="primary"
-                        variant="contained"
-                        onClick={() => handleClose(PromptAction.Save)}
-                        {...slotProps?.saveButton}
-                    >
+                    <SaveButton startIcon={<Save />} variant="primary" onClick={() => handleClose(PromptAction.Save)} {...slotProps?.saveButton}>
                         <FormattedMessage {...messages.save} />
                     </SaveButton>
                 )}

diff --git a/packages/admin/admin/src/snackbar/UndoSnackbar.tsx b/packages/admin/admin/src/snackbar/UndoSnackbar.tsx
@@ -1,8 +1,9 @@
-import { Button, Slide, Snackbar, SnackbarProps } from "@mui/material";
+import { Slide, Snackbar, SnackbarProps } from "@mui/material";
 import { SlideProps } from "@mui/material/Slide/Slide";
 import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
 
+import { Button } from "../common/buttons/Button";
 import { messages } from "../messages";
 import { useSnackbarApi } from "./SnackbarProvider";
 
@@ -25,7 +26,7 @@ export const UndoSnackbar = <Payload,>({ onUndoClick, payload, ...props }: UndoS
             anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
             autoHideDuration={5000}
             action={
-                <Button color="secondary" size="small" onClick={onClick}>
+                <Button variant="secondary" size="small" onClick={onClick}>
                     <FormattedMessage {...messages.undo} />
                 </Button>
             }

diff --git a/packages/admin/admin/src/stack/backbutton/StackBackButton.tsx b/packages/admin/admin/src/stack/backbutton/StackBackButton.tsx
@@ -1,8 +1,9 @@
 import { ArrowLeft } from "@comet/admin-icons";
-import { Button, ButtonClassKey, ButtonProps, ComponentsOverrides } from "@mui/material";
+import { ButtonClassKey, ComponentsOverrides } from "@mui/material";
 import { Theme, useThemeProps } from "@mui/material/styles";
 import { FormattedMessage } from "react-intl";
 
+import { Button, ButtonProps } from "../../common/buttons/Button";
 import { createComponentSlot } from "../../helpers/createComponentSlot";
 import { messages } from "../../messages";
 import { StackApiContext } from "../Api";

diff --git a/packages/admin/admin/src/table/AddButton.tsx b/packages/admin/admin/src/table/AddButton.tsx
@@ -1,8 +1,8 @@
 import { AddNoCircle } from "@comet/admin-icons";
-import { Button } from "@mui/material";
 import { Component } from "react";
 import { FormattedMessage } from "react-intl";
 
+import { Button } from "../common/buttons/Button";
 import { messages } from "../messages";
 import { ISelectionApi } from "../SelectionApi";
 

diff --git a/packages/admin/admin/src/table/DeleteButton.tsx b/packages/admin/admin/src/table/DeleteButton.tsx
@@ -1,11 +1,12 @@
 import { PureQueryOptions } from "@apollo/client";
 import { Delete } from "@comet/admin-icons";
-import { Button, IconButton } from "@mui/material";
+import { IconButton } from "@mui/material";
 import { ButtonProps } from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
 import { Component, ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
 
+import { Button } from "../common/buttons/Button";
 import { DeleteMutation } from "../DeleteMutation";
 import { messages } from "../messages";
 

diff --git a/packages/admin/admin/src/table/ExcelExportButton.tsx b/packages/admin/admin/src/table/ExcelExportButton.tsx
@@ -1,7 +1,8 @@
-import { Button, CircularProgress } from "@mui/material";
+import { CircularProgress } from "@mui/material";
 import { PropsWithChildren, ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
 
+import { Button } from "../common/buttons/Button";
 import { FileIcon } from "../fileIcons/FileIcon";
 import { IExportApi } from "./excelexport/IExportApi";
 

diff --git a/packages/admin/admin/src/table/TableFilterFinalForm.tsx b/packages/admin/admin/src/table/TableFilterFinalForm.tsx
@@ -1,10 +1,11 @@
 import { Clear } from "@comet/admin-icons";
-import { Button, Grid, Typography } from "@mui/material";
+import { Grid, Typography } from "@mui/material";
 import { AnyObject } from "final-form";
 import { Component, ReactNode } from "react";
 import { Form, FormProps, FormRenderProps } from "react-final-form";
 import { FormattedMessage } from "react-intl";
 
+import { Button } from "../common/buttons/Button";
 import { renderFinalFormChildren } from "../renderFinalFormChildren";
 import { IFilterApi } from "./useTableQueryFilter";
 
@@ -52,11 +53,11 @@ export class TableFilterFinalForm<FilterValues = AnyObject> extends Component<Pr
                                 {this.props.resetButton && (
                                     <Grid item>
                                         <Button
-                                            variant="text"
                                             startIcon={<Clear />}
                                             onClick={() => {
                                                 formRenderProps.form.reset();
                                             }}
+                                            variant="textDark"
                                         >
                                             <FormattedMessage id="comet.table.tableFilterFinalForm.resetButton" defaultMessage="Reset filter" />
                                         </Button>

diff --git a/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx b/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx
@@ -1,10 +1,11 @@
 import { Check, Reset } from "@comet/admin-icons";
-import { Button, ButtonProps, ComponentsOverrides, Popover as MuiPopover, Theme } from "@mui/material";
+import { ComponentsOverrides, Popover as MuiPopover, Theme } from "@mui/material";
 import { css, useThemeProps } from "@mui/material/styles";
 import { ComponentType, MouseEvent, PropsWithChildren, useState } from "react";
 import { Form, useForm } from "react-final-form";
 import { FormattedMessage } from "react-intl";
 
+import { Button, ButtonProps } from "../../../common/buttons/Button";
 import { createComponentSlot } from "../../../helpers/createComponentSlot";
 import { ThemedComponentBaseProps } from "../../../helpers/ThemedComponentBaseProps";
 import { messages } from "../../../messages";
@@ -166,7 +167,7 @@ export function FilterBarPopoverFilter(inProps: PropsWithChildren<FilterBarPopov
                                     <ButtonsContainer {...slotProps?.buttonsContainer}>
                                         <Button
                                             type="reset"
-                                            variant="text"
+                                            variant="textDark"
                                             onClick={() => {
                                                 form.getRegisteredFields().map((name) => {
                                                     outerForm.change(name, undefined);
@@ -183,8 +184,7 @@ export function FilterBarPopoverFilter(inProps: PropsWithChildren<FilterBarPopov
 
                                         <Button
                                             type="submit"
-                                            color="primary"
-                                            variant="contained"
+                                            variant="primary"
                                             onClick={() => {
                                                 handleSubmit();
                                                 setAnchorEl(null);