Add import restriction for MUI's Button (#3391)

Author: juliawegmayr

.changeset/chilly-trams-raise.md

@@ -0,0 +1,8 @@
+---
+"@comet/eslint-config": major
+---
+
+Add import restriction for MUI's `Button`
+
+Buttons used in Comet DXP applications should match the Comet CI.
+Use `Button` from `@comet/admin` instead.

docs/docs/7-migration-guide/migration-from-v7-to-v8.md

@@ -1595,6 +1595,13 @@ Example:
 
 </details>
 
+### Import `Button` from `@comet/admin` package
+
+```diff
+- import { Button } from "@mui/material";
++ import { Button } from "@comet/admin";
+```
+
 ## Site
 
 ### ✅ Remove `graphQLFetch` from `sitePreviewRoute` calls

packages/admin/admin/src/common/buttons/Button.tsx

@@ -1,5 +1,6 @@
 import {
     type Breakpoint,
+    // eslint-disable-next-line no-restricted-imports
     Button as MuiButton,
     type ButtonProps as MuiButtonProps,
     type ComponentsOverrides,

packages/admin/admin/src/common/buttons/split/SplitButton.tsx

@@ -1,5 +1,6 @@
 import { ChevronDown } from "@comet/admin-icons";
 import {
+    // eslint-disable-next-line no-restricted-imports
     Button,
     ButtonGroup as MuiButtonGroup,
     type ButtonGroupProps,

packages/admin/admin/src/common/toolbar/actions/ToolbarActionButton.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { Button, type ButtonProps, type ComponentsOverrides, IconButton } from "@mui/material";
 import { css, type Theme, useTheme, useThemeProps } from "@mui/material/styles";
 

packages/admin/admin/src/error/errordialog/ErrorDialog.tsx

@@ -1,13 +1,6 @@
 import { Accept, Copy } from "@comet/admin-icons";
-import {
-    // eslint-disable-next-line no-restricted-imports
-    Dialog,
-    Divider,
-    List,
-    ListItem,
-    Stack,
-    Typography,
-} from "@mui/material";
+// eslint-disable-next-line no-restricted-imports
+import { Dialog, Divider, List, ListItem, Stack, Typography } from "@mui/material";
 import Button from "@mui/material/Button";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";

packages/admin/admin/src/table/DeleteButton.tsx

@@ -1,5 +1,6 @@
 import { type PureQueryOptions } from "@apollo/client";
 import { Delete } from "@comet/admin-icons";
+// eslint-disable-next-line no-restricted-imports
 import { Button, IconButton } from "@mui/material";
 import { type ButtonProps } from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";

packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx

@@ -1,6 +1,6 @@
 import { ChevronDown } from "@comet/admin-icons";
-import { buttonClasses, type ButtonProps, type ComponentsOverrides, svgIconClasses } from "@mui/material";
-import Button from "@mui/material/Button";
+// eslint-disable-next-line no-restricted-imports
+import { Button, buttonClasses, type ButtonProps, type ComponentsOverrides, svgIconClasses } from "@mui/material";
 import { css, type Theme } from "@mui/material/styles";
 import { useThemeProps } from "@mui/system";
 import { type ComponentType } from "react";

packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx

@@ -1,4 +1,5 @@
 import { Check, Reset } from "@comet/admin-icons";
+// eslint-disable-next-line no-restricted-imports
 import { Button, type ButtonProps, type ComponentsOverrides, Popover as MuiPopover, type Theme } from "@mui/material";
 import { css, useThemeProps } from "@mui/material/styles";
 import { type ComponentType, type MouseEvent, type PropsWithChildren, useState } from "react";

packages/admin/cms-admin/src/blocks/clipboard/CannotPasteBlockDialog.tsx

@@ -1,5 +1,6 @@
 import { messages } from "@comet/admin";
 import {
+    // eslint-disable-next-line no-restricted-imports
     Button,
     // eslint-disable-next-line no-restricted-imports
     Dialog,

packages/admin/cms-admin/src/blocks/common/BlockAdminComponentButton.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { Button } from "@mui/material";
 import { type MouseEventHandler, type PropsWithChildren, type ReactNode } from "react";
 

packages/admin/cms-admin/src/blocks/image/EditImageDialog.tsx

@@ -5,6 +5,7 @@ import { CancelButton, Field, FormSection, messages, SaveButton } from "@comet/a
 import { OpenNewTab } from "@comet/admin-icons";
 import {
     Box,
+    // eslint-disable-next-line no-restricted-imports
     Button,
     // eslint-disable-next-line no-restricted-imports
     Dialog,

packages/admin/cms-admin/src/common/signOutButton/SignOutButton.tsx

@@ -1,5 +1,6 @@
 import { useMutation } from "@apollo/client";
 import { Logout, ThreeDotSaving } from "@comet/admin-icons";
+// eslint-disable-next-line no-restricted-imports
 import { Button, type ButtonProps as MuiButtonProps } from "@mui/material";
 import { type FunctionComponent, type PropsWithChildren } from "react";
 import { FormattedMessage } from "react-intl";

packages/admin/cms-admin/src/pages/pageTree/PageDeleteDialog.tsx

@@ -2,6 +2,7 @@ import { DeleteButton, messages } from "@comet/admin";
 import { ArrowRight, Clear, Delete } from "@comet/admin-icons";
 import {
     Box,
+    // eslint-disable-next-line no-restricted-imports
     Button,
     // eslint-disable-next-line no-restricted-imports
     Dialog,

packages/admin/cms-admin/src/userPermissions/user/ImpersonationButtons.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { Button, type ButtonProps } from "@mui/material";
 import Cookies from "js-cookie";
 

packages/admin/cms-admin/src/userPermissions/user/permissions/ContentScopeGrid.tsx

@@ -12,6 +12,7 @@ import {
 } from "@comet/admin";
 import { Select } from "@comet/admin-icons";
 import {
+    // eslint-disable-next-line no-restricted-imports
     Button,
     Card,
     CardContent,

packages/eslint-config/react.js

@@ -82,6 +82,11 @@ const config = [
                             importNames: ["Alert"],
                             message: "Please use Alert from @comet/admin instead",
                         },
+                        {
+                            name: "@mui/material",
+                            importNames: ["Button"],
+                            message: "Please use Button from @comet/admin instead",
+                        },
                         {
                             name: "@mui/material",
                             importNames: ["Dialog"],

storybook/src/admin/inlineAlert/InlineAlert.stories.tsx

@@ -1,6 +1,6 @@
-import { InlineAlert } from "@comet/admin";
+import { Button, InlineAlert } from "@comet/admin";
 import { Clear, CometColor, InfoFilled, Reload, RemoveFilled, WarningSolid } from "@comet/admin-icons";
-import { Box, Button } from "@mui/material";
+import { Box } from "@mui/material";
 import type { Meta, StoryObj } from "@storybook/react";
 
 type Story = StoryObj<typeof InlineAlert>;
@@ -82,7 +82,7 @@ export const InlineAlertWithActions: Story = {
         actions: (
             <Button
                 startIcon={<Reload />}
-                variant="contained"
+                variant="primary"
                 onClick={() => {
                     alert("onRetry clicked");
                 }}
@@ -104,7 +104,7 @@ export const InlineAlertWithMultipleActions: Story = {
             <Box sx={{ display: "flex", gap: 2 }}>
                 <Button
                     startIcon={<Reload />}
-                    variant="contained"
+                    variant="primary"
                     onClick={() => {
                         alert("onRetry clicked");
                     }}

storybook/src/docs/components/SplitButton/SplitButton.stories.tsx

@@ -1,5 +1,6 @@
 import { SplitButton } from "@comet/admin";
 import { Home } from "@comet/admin-icons";
+// eslint-disable-next-line no-restricted-imports
 import { Button, Typography } from "@mui/material";
 import { useState } from "react";