Change disable icon label (#324)

* added styling for disabled icon label * ci: version bump to 5.4.0 --------- Co-authored-by: Automated Version Bump <[email protected]>
woven-planet · Nov 30, 2023 · 8b8216c · 8b8216c
1 parent 1e48f4d
commit 8b8216c
Show file tree

Hide file tree

Showing 5 changed files with 251 additions and 183 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@toyota-research-institute/lakefront",
   "description": "React UI Components",
-  "version": "5.3.3",
+  "version": "5.4.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "homepage": "https://github.com/ToyotaResearchInstitute/lakefront",

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -3,11 +3,11 @@ import { ThemeProvider } from '@emotion/react';
 import ButtonVariants from './buttonVariants';
 import IconButton from './IconButton';
 import {
-    ButtonComponentProps,
-    ICON_BUTTON_COLOR,
-    ICON_SVGS,
-    InvalidButtonColorError,
-    shouldUseMappedIcon
+  ButtonComponentProps,
+  ICON_BUTTON_COLOR,
+  ICON_SVGS,
+  InvalidButtonColorError,
+  shouldUseMappedIcon
 } from './buttonUtil';
 import theme from 'src/styles/theme';
 import { StyledDiv } from './buttonStyles';
@@ -25,64 +25,76 @@ import { StyledDiv } from './buttonStyles';
  * we will attempt to convert it into an icon. When icon is defined, the position can be specified via the iconPosition prop.
  */
 const Button: FC<ButtonComponentProps> = ({
-    alternate = false,
-    color = 'primary',
-    children,
-    icon = false,
-    iconPosition = 'left',
-    iconLabel = '',
-    ...props
+  alternate = false,
+  color = 'primary',
+  children,
+  icon = false,
+  iconPosition = 'left',
+  iconLabel = '',
+  ...props
 }) => {
-    // When an icon is supplied we need to render the IconButton component inside the Button
-    if (icon) {
-        // If icon is true, we need to show the icon associated with the button color type, such as add or delete
-        const defaultIcon = shouldUseMappedIcon(icon) ? ICON_SVGS[color ?? 'primary'] : icon;
-        const isIconOnly = !children || !defaultIcon;
+  // When an icon is supplied we need to render the IconButton component inside the Button
+  if (icon) {
+    // If icon is true, we need to show the icon associated with the button color type, such as add or delete
+    const defaultIcon = shouldUseMappedIcon(icon)
+      ? ICON_SVGS[color ?? 'primary']
+      : icon;
+    const isIconOnly = !children || !defaultIcon;
 
-        // Icon Buttons have a different color mapping, i.e. there is no secondary, but primary uses the secondary component
-        const ButtonComponent = isIconOnly ? ButtonVariants[ICON_BUTTON_COLOR[color]] : ButtonVariants[color];
+    // Icon Buttons have a different color mapping, i.e. there is no secondary, but primary uses the secondary component
+    const ButtonComponent = isIconOnly
+      ? ButtonVariants[ICON_BUTTON_COLOR[color]]
+      : ButtonVariants[color];
 
-        // Show a meaningful error when the color doesn't match our allowed color strings instead of crashing the page
-        if (!ButtonComponent) {
-            throw new InvalidButtonColorError(color);
-        }
-
-        if (iconLabel) {
-            const { className, ...rest } = props;
-            return (
-                <ThemeProvider theme={theme}>
-                    <StyledDiv className={className}>
-                        <ButtonComponent alternate={alternate} {...rest} isIconOnly={isIconOnly}>
-                            <IconButton icon={defaultIcon} iconPosition={iconPosition}>
-                                {children}
-                            </IconButton>
-                        </ButtonComponent>
-                        <div className='icon-label'>{iconLabel}</div>
-                    </StyledDiv>
-                </ThemeProvider>
-            );
-        }
-        return (
-            <ThemeProvider theme={theme}>
-                <ButtonComponent alternate={alternate} {...props} isIconOnly={isIconOnly}>
-                    <IconButton icon={defaultIcon} iconPosition={iconPosition}>
-                        {children}
-                    </IconButton>
-                </ButtonComponent>
-            </ThemeProvider>
-        );
-    } else {
-        // Like in the Icon version, we return a styled component based on the color type
-        const ButtonComponent = ButtonVariants[color] || ButtonVariants.primary;
+    // Show a meaningful error when the color doesn't match our allowed color strings instead of crashing the page
+    if (!ButtonComponent) {
+      throw new InvalidButtonColorError(color);
+    }
 
-        return (
-            <ThemeProvider theme={theme}>
-                <ButtonComponent alternate={alternate} {...props}>
-                    {children}
-                </ButtonComponent>
-            </ThemeProvider>
-        );
+    if (iconLabel) {
+      const { className, ...rest } = props;
+      return (
+        <ThemeProvider theme={theme}>
+          <StyledDiv className={className} disable={props.disabled ?? false}>
+            <ButtonComponent
+              alternate={alternate}
+              {...rest}
+              isIconOnly={isIconOnly}
+            >
+              <IconButton icon={defaultIcon} iconPosition={iconPosition}>
+                {children}
+              </IconButton>
+            </ButtonComponent>
+            <div className="icon-label">{iconLabel}</div>
+          </StyledDiv>
+        </ThemeProvider>
+      );
     }
+    return (
+      <ThemeProvider theme={theme}>
+        <ButtonComponent
+          alternate={alternate}
+          {...props}
+          isIconOnly={isIconOnly}
+        >
+          <IconButton icon={defaultIcon} iconPosition={iconPosition}>
+            {children}
+          </IconButton>
+        </ButtonComponent>
+      </ThemeProvider>
+    );
+  } else {
+    // Like in the Icon version, we return a styled component based on the color type
+    const ButtonComponent = ButtonVariants[color] || ButtonVariants.primary;
+
+    return (
+      <ThemeProvider theme={theme}>
+        <ButtonComponent alternate={alternate} {...props}>
+          {children}
+        </ButtonComponent>
+      </ThemeProvider>
+    );
+  }
 };
 
 export default Button;