From 63cb72a2fbd0da55602e5f3280d728904889f8f4 Mon Sep 17 00:00:00 2001
From: Sean Warren <64291729+seankwarren@users.noreply.github.com>
Date: Wed, 3 Jan 2024 15:59:42 -0800
Subject: [PATCH] fix/buttonStyle (#56)

* fix: button given default nowrap style

* feat: save multiselect button given a compact mode

---------

Co-authored-by: Timur Bazhirov <timur@exabyte.io>
---
 .../components/button/ButtonMultiSelect.tsx   | 21 ++++++++++++-------
 src/theme/components/buttons.ts               |  7 ++++++-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/mui/components/button/ButtonMultiSelect.tsx b/src/mui/components/button/ButtonMultiSelect.tsx
index 4b78bba7..f8c0f833 100644
--- a/src/mui/components/button/ButtonMultiSelect.tsx
+++ b/src/mui/components/button/ButtonMultiSelect.tsx
@@ -9,7 +9,6 @@
  * Usage:
  * To use this component, define an array of ButtonConfig objects, each representing a button's configuration.
  * Pass this array along with a localStorage key (for saving the selected button's state) to the component.
- * Optionally, you can also specify the size of the buttons (see https://mui.com/material-ui/react-button/#sizes).
  *
  * Example:
  * ```
@@ -20,6 +19,8 @@
  *    ]}
  *    localStorageKey="myButtonSelectKey"
  *    size="medium"
+ *    isLoading={false}
+ *    isCompact={true}
  * />
  * ```
  */
@@ -46,6 +47,7 @@ type ButtonMultiSelectProps = {
     size?: "small" | "medium" | "large";
     localStorageKey: string;
     isLoading?: boolean;
+    isCompact?: boolean;
 };
 
 function ButtonMultiSelect({
@@ -54,6 +56,7 @@ function ButtonMultiSelect({
     size = "small",
     localStorageKey,
     isLoading = false,
+    isCompact = false,
 }: ButtonMultiSelectProps) {
     const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
     const [selectedOption, setSelectedOption] = useState<ButtonConfig>(buttonConfigs[0]);
@@ -87,11 +90,7 @@ function ButtonMultiSelect({
 
     return (
         <>
-            <ButtonGroup
-                variant="contained"
-                size={size}
-                aria-label="outlined primary button group"
-                sx={{ height: "fit-content" }}>
+            <ButtonGroup variant="contained" size={size} sx={{ height: "fit-content" }}>
                 <LoadingButton
                     id={id}
                     ref={mainButtonRef}
@@ -99,8 +98,14 @@ function ButtonMultiSelect({
                     onClick={selectedOption.onClick}
                     variant="contained"
                     loading={isLoading}
-                    startIcon={<IconByName name={selectedOption.iconName} fontSize={size} />}>
-                    {selectedOption.label}
+                    startIcon={
+                        !isCompact && <IconByName name={selectedOption.iconName} fontSize={size} />
+                    }>
+                    {isCompact ? (
+                        <IconByName name={selectedOption.iconName} fontSize={size} />
+                    ) : (
+                        selectedOption.label
+                    )}
                 </LoadingButton>
                 <Button onClick={handleExpandClick} size={size}>
                     <IconByName name="shapes.arrow.dropdown" fontSize={size} />
diff --git a/src/theme/components/buttons.ts b/src/theme/components/buttons.ts
index fa3c9143..4a5e3947 100644
--- a/src/theme/components/buttons.ts
+++ b/src/theme/components/buttons.ts
@@ -2,6 +2,12 @@ import { Theme } from "@mui/material/styles";
 
 const buttons = (theme: Theme) => {
     const config = {
+        styleOverrides: {
+            root: {
+                // b/c of https://github.com/material-components/material-components-web/issues/4894
+                whiteSpace: "nowrap",
+            },
+        },
         variants: [
             {
                 props: { size: "large" },
@@ -28,7 +34,6 @@ const buttons = (theme: Theme) => {
                     color: theme.palette.primary.main,
                     boxShadow: theme.shadows[2],
                     padding: "8px 22px",
-
                     "&:hover": {
                         backgroundColor: "rgba(16,86,190,0.2)",
                     },