Release v1.0.5 (#1173)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

.storybook/main.js

@@ -1,10 +1,7 @@
 import remarkGfm from "remark-gfm";
 
 module.exports = {
-  stories: [
-    "../src/**/**/*.stories.mdx",
-    "../src/**/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
+  stories: ["../src/**/**/*.mdx", "../src/**/**/*.stories.@(js|jsx|ts|tsx)"],
   core: {
     disableTelemetry: true,
   },
@@ -23,12 +20,12 @@ module.exports = {
         },
       },
     },
+    "@storybook/addon-webpack5-compiler-babel",
+    "@chromatic-com/storybook",
   ],
   framework: {
     name: "@storybook/react-webpack5",
     options: {},
   },
-  docs: {
-    autodocs: true,
-  },
+  docs: {},
 };

.storybook/preview.js

@@ -2,7 +2,7 @@ import { themes } from "@storybook/theming";
 import { darkColors, lightColors } from "../src/global/themes";
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: {},
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -38,3 +38,4 @@ export const parameters = {
     },
   },
 };
+export const tags = ["autodocs"];

dist/cjs/types/components/Autocomplete/Autocomplete.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CSSObject } from "styled-components";
 import { SelectorType } from "../../global/global.types";
 import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";

dist/cjs/types/components/DataTable/TableActionButton.d.ts

@@ -1,18 +1,7 @@
 import { FC } from "react";
-import { IActionButton } from "./DataTable.types";
+import { IActionButton, PredefinedActionTypes } from "./DataTable.types";
 export declare const isPredefinedAction: (
   val: any,
-) => val is
-  | "view"
-  | "console"
-  | "cloud"
-  | "format"
-  | "edit"
-  | "delete"
-  | "description"
-  | "share"
-  | "download"
-  | "disable"
-  | "preview";
+) => val is PredefinedActionTypes;
 declare const TableActionButton: FC<IActionButton>;
 export default TableActionButton;

dist/cjs/types/components/Menu/Common/MenuDivider.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const MenuDivider: FC;
+export default MenuDivider;

dist/cjs/types/components/Select/Select.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CSSObject } from "styled-components";
 import { SelectorType } from "../../global/global.types";
 import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";

dist/cjs/types/components/index.d.ts

@@ -33,6 +33,7 @@ export { default as RadioGroup } from "./RadioGroup/RadioGroup";
 export { default as ReadBox } from "./ReadBox/ReadBox";
 export { default as CommentBox } from "./CommentBox/CommentBox";
 export { default as Menu } from "./Menu/Menu";
+export { default as MenuItem } from "./Menu/Vertical/MenuItem";
 export { default as ExpandOptionsButton } from "./ExpandOptionsButton/ExpandOptionsButton";
 export { default as Tabs } from "./Tabs/Tabs";
 export { default as CodeEditor } from "./CodeEditor/CodeEditor";

dist/esm/types/components/Autocomplete/Autocomplete.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CSSObject } from "styled-components";
 import { SelectorType } from "../../global/global.types";
 import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";

dist/esm/types/components/DataTable/TableActionButton.d.ts

@@ -1,18 +1,7 @@
 import { FC } from "react";
-import { IActionButton } from "./DataTable.types";
+import { IActionButton, PredefinedActionTypes } from "./DataTable.types";
 export declare const isPredefinedAction: (
   val: any,
-) => val is
-  | "view"
-  | "console"
-  | "cloud"
-  | "format"
-  | "edit"
-  | "delete"
-  | "description"
-  | "share"
-  | "download"
-  | "disable"
-  | "preview";
+) => val is PredefinedActionTypes;
 declare const TableActionButton: FC<IActionButton>;
 export default TableActionButton;

dist/esm/types/components/Menu/Common/MenuDivider.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const MenuDivider: FC;
+export default MenuDivider;

dist/esm/types/components/Select/Select.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CSSObject } from "styled-components";
 import { SelectorType } from "../../global/global.types";
 import { CommonHelpTipPlacement } from "../HelpTip/HelpTip.types";

dist/esm/types/components/index.d.ts

@@ -33,6 +33,7 @@ export { default as RadioGroup } from "./RadioGroup/RadioGroup";
 export { default as ReadBox } from "./ReadBox/ReadBox";
 export { default as CommentBox } from "./CommentBox/CommentBox";
 export { default as Menu } from "./Menu/Menu";
+export { default as MenuItem } from "./Menu/Vertical/MenuItem";
 export { default as ExpandOptionsButton } from "./ExpandOptionsButton/ExpandOptionsButton";
 export { default as Tabs } from "./Tabs/Tabs";
 export { default as CodeEditor } from "./CodeEditor/CodeEditor";

dist/mds.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React$1 from "react";
 import React__default, {
   FC,
@@ -1053,6 +1052,8 @@ interface SubItemsBoxProps {
 
 declare const Menu: FC<MenuProps>;
 
+declare const MenuItem: FC<MenuItemProps>;
+
 interface ExpandOptionsButtonProps {
   label: string;
   open: boolean;
@@ -2770,6 +2771,7 @@ export {
   MenuCollapsedIcon,
   MenuConstructProps,
   MenuCollapsedIcon$1 as MenuExpandedIcon,
+  MenuItem,
   MenuItemProps,
   MenuProps,
   MetadataIcon,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mds",
-  "version": "1.0.1",
+  "version": "1.0.5",
   "description": "A MinIO Components Library",
   "homepage": ".",
   "license": "AGPL-3.0-or-later",
@@ -14,42 +14,44 @@
   },
   "types": "dist/mds.d.ts",
   "dependencies": {
+    "@storybook/test": "^8.2.4",
     "@types/styled-components": "^5.1.34",
     "@uiw/react-textarea-code-editor": "^3.0.2",
-    "detect-gpu": "^5.0.37",
+    "detect-gpu": "^5.0.39",
     "luxon": "^3.4.4",
-    "react-calendar": "^4.8.0",
+    "react-calendar": "^5.0.0",
     "react-virtualized": "^9.22.5",
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.0",
-    "@babel/preset-env": "^7.24.0",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@chromatic-com/storybook": "^1.6.1",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-actions": "^7.6.14",
-    "@storybook/addon-essentials": "^7.6.14",
-    "@storybook/addon-interactions": "^7.6.14",
-    "@storybook/addon-links": "^7.6.14",
-    "@storybook/react": "^7.6.14",
-    "@storybook/react-webpack5": "^7.6.14",
-    "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^6.4.2",
+    "@storybook/addon-actions": "^8.2.4",
+    "@storybook/addon-essentials": "^8.2.4",
+    "@storybook/addon-interactions": "^8.2.4",
+    "@storybook/addon-links": "^8.2.4",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/react": "^8.2.4",
+    "@storybook/react-webpack5": "^8.2.4",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.2.1",
     "@types/jest": "^29.5.11",
-    "@types/react": "^18.2.67",
     "@types/luxon": "^3.4.2",
-    "@types/react-virtualized": "^9.21.29",
+    "@types/react": "^18.3.3",
+    "@types/react-virtualized": "^9.21.30",
     "babel-loader": "^9.1.3",
     "jest": "^29.6.4",
     "jest-environment-jsdom": "^29.6.4",
     "lodash": "^4.17.21",
-    "prettier": "^3.2.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "remark-gfm": "^4.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-copy": "^3.5.0",
@@ -58,10 +60,11 @@
     "rollup-plugin-import-file": "^1.0.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
-    "storybook": "^7.6.14",
-    "storybook-dark-mode": "^3.0.3",
-    "ts-jest": "^29.1.2",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.2"
-  }
+    "storybook": "^8.2.4",
+    "storybook-dark-mode": "4.0.1",
+    "ts-jest": "^29.2.3",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
+  },
+  "packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
 }

src/components/Accordion/Accordion.tsx

@@ -62,11 +62,13 @@ const AccordionContent = styled.div<AccordionContentProps>(
     borderTop: expanded
       ? `1px solid ${get(theme, "borderColor", lightColors.borderColor)}`
       : "0",
-    overflow: "hidden",
+    display: "grid",
+    gridTemplateRows: expanded ? "1fr" : "0fr",
+    transition: "250ms grid-template-rows ease",
     "& .expandSubContainer": {
-      padding: 10,
-      marginTop: expanded ? 0 : "-100%",
-      transition: "all 0.2s",
+      overflow: "hidden",
+      padding: expanded ? 10 : 0,
+      transition: expanded ? "initial" : "250ms padding ease 150ms",
     },
   }),
 );

src/components/GlobalStyles/GlobalStyles.tsx

@@ -170,7 +170,7 @@ const GlobalStyles = createGlobalStyle`
     hr {
         border-top: 0;
         border-left: 0;
-        borderR-right: 0;
+        border-right: 0;
         border-color: ${get(theme, "borderColor", lightColors.borderColor)};
         background-color: transparent;
     }

src/components/LoginWrapper/LoginWrapper.tsx

@@ -174,12 +174,13 @@ const LoginWrapper: FC<LoginWrapperProps> = ({
 
   useEffect(() => {
     (async () => {
-      const gpuTier = await getGPUTier();
-
-      setGPUAvailable(!!gpuTier.gpu && gpuTier.tier >= 2);
+      if (backgroundAnimation) {
+        const gpuTier = await getGPUTier();
+        setGPUAvailable(!!gpuTier.gpu && gpuTier.tier >= 2);
+      }
       return;
     })();
-  }, []);
+  }, [backgroundAnimation]);
 
   return (
     <CustomLogin>

src/components/Menu/Common/MenuDivider.tsx

@@ -0,0 +1,36 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2025 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { FC } from "react";
+import styled from "styled-components";
+import { MainHeaderProps } from "../Menu.types";
+import get from "lodash/get";
+import { lightColors } from "../../../global/themes";
+
+const Divider = styled.hr<MainHeaderProps>(({ theme }) => ({
+  borderBottom: `${get(
+    theme,
+    "menu.vertical.sectionDividerColor",
+    lightColors.menuColorDivider,
+  )} 1px solid`,
+  margin: "0 25px 0" as const,
+}));
+
+const MenuDivider: FC = () => {
+  return <Divider />;
+};
+
+export default MenuDivider;

src/components/Menu/Menu.stories.tsx

@@ -26,6 +26,7 @@ import ChatIcon from "../Icons/ChatIcon";
 import LambdaNotificationsIcon from "../Icons/LambdaNotificationsIcon";
 import Button from "../Button/Button";
 import Box from "../Box/Box";
+import MenuItem from "./Vertical/MenuItem";
 
 export default {
   title: "MDS/Layout/Menu",
@@ -33,7 +34,12 @@ export default {
   argTypes: {},
 } as Meta<typeof Menu>;
 
-const Template: Story<MenuProps> = ({ options, horizontal, endComponent }) => {
+const Template: Story<MenuProps> = ({
+  options,
+  horizontal,
+  endComponent,
+  middleComponent,
+}) => {
   const [menuCollapsed, setMenuCollapsed] = useState<boolean>(false);
 
   return (
@@ -57,6 +63,7 @@ const Template: Story<MenuProps> = ({ options, horizontal, endComponent }) => {
         horizontal={horizontal}
         currentPath={"/testPath1"}
         endComponent={endComponent}
+        middleComponent={middleComponent}
       />
     </StoryThemeProvider>
   );
@@ -228,14 +235,87 @@ HorizontalNoOptions.args = {
 export const EndComponent = Template.bind({});
 
 EndComponent.args = {
+  options: [
+    {
+      icon: <ChatIcon />,
+      path: "/testPath1",
+      name: "Test 1",
+      group: "Group 1",
+      id: "test1",
+      onClick: (path) => {
+        console.log("Custom Click Action", path);
+      },
+    },
+    {
+      icon: <LambdaNotificationsIcon />,
+      name: "Test 5",
+      group: "Group 2",
+      id: "test5",
+      children: [
+        {
+          icon: <TestIcon />,
+          path: "/testPath1",
+          name: "Sublevel 1",
+          group: "Group 2",
+          id: "testl1",
+        },
+        {
+          icon: <TestIcon />,
+          path: "/subPath2",
+          name: "Sublevel 2",
+          group: "Group 2",
+          id: "testl2",
+        },
+        {
+          icon: <TestIcon />,
+          path: "/subPath3",
+          name: "Sublevel 3",
+          group: "Group 2",
+          id: "testl3",
+        },
+      ],
+    },
+  ],
   endComponent: (
-    <Box sx={{ display: "flex", justifyContent: "center" }}>
-      <Button
-        id={"randon-button"}
+    <>
+      <MenuItem
+        name={"Menu Element"}
         icon={<TestIcon />}
         onClick={() => alert("Extra!")}
       />
-    </Box>
+      <MenuItem
+        name={"Menu Element 2"}
+        icon={<TestIcon />}
+        onClick={() => alert("Extra!")}
+      />
+    </>
+  ),
+};
+
+export const VerticalMiddleComponent = Template.bind({});
+
+VerticalMiddleComponent.args = {
+  middleComponent: (
+    <>
+      <a href={"https://min.io"}>External Link</a>
+      <a href={"https://min.io"}>External Link</a>
+      <a href={"https://min.io"}>External Link</a>
+      <a href={"https://min.io"}>External Link</a>
+    </>
+  ),
+  endComponent: (
+    <>
+      <MenuItem
+        name={"Menu Element"}
+        icon={<TestIcon />}
+        onClick={() => alert("Extra!")}
+      />
+      <MenuItem
+        name={"Menu Element 2"}
+        icon={<TestIcon />}
+        onClick={() => alert("Extra!")}
+      />
+    </>
   ),
 };
 

src/components/Menu/Vertical/VerticalMenu.tsx

@@ -27,6 +27,7 @@ import MenuSectionHeader from "./MenuSectionHeader";
 import LogoutIcon from "../../Icons/LogoutIcon";
 import Tooltip from "../../Tooltip/Tooltip";
 import MinIOTierIconXs from "../../Icons/MinIOTierIconXs";
+import MenuDivider from "../Common/MenuDivider";
 
 const VerticalMenuDrawer = styled.div<MenuConstructProps>(({ theme, sx }) => {
   return {
@@ -209,6 +210,7 @@ const VerticalMenu: FC<MenuProps> = ({
   collapseAction,
   currentPath,
   endComponent,
+  middleComponent,
   sx,
 }) => {
   let currTitle = "";
@@ -235,6 +237,7 @@ const VerticalMenu: FC<MenuProps> = ({
           </Box>
         </Box>
         <Box className={"menuItems"}>
+          {middleComponent}
           {options &&
             options.map((option) => {
               let extraItem = null;
@@ -281,7 +284,7 @@ const VerticalMenu: FC<MenuProps> = ({
           {signOutAction && (
             <Box sx={{ marginTop: "auto" }}>
               {endComponent}
-              <MenuSectionHeader label={""} />
+              <MenuDivider />
               <MenuItem
                 id="sign-out"
                 group={"common"}

src/components/RadioGroup/RadioGroup.tsx

@@ -26,60 +26,69 @@ import HelpIcon from "../Icons/HelpIcon";
 
 const RadioButton = styled.label<InputLabelProps>(({ sx, theme }) => ({
   "& input": {
+    appearance: "none",
+    backgroundColor: "transparent",
+    margin: 0,
     display: "none",
-  },
-  "& .radio": {
-    position: "relative",
-    display: "block",
-    width: 16,
-    height: 16,
-    borderRadius: "100%",
-    border: `1px solid ${get(theme, "checkbox.checkBoxBorder", "#c3c3c3")}`,
-    boxShadow: "inset 0px 1px 3px rgba(0,0,0,0.1)",
-  },
-  "input:checked": {
     "& ~ .radio": {
-      "&:before": {
-        content: "' '",
-        position: "absolute",
-        display: "block",
-        width: 12,
-        height: 12,
-        backgroundColor: get(theme, "checkbox.checkBoxColor", "#4CCB92"),
-        borderRadius: "100%",
-        top: "50%",
-        left: "50%",
-        transform: "translateX(-50%) translateY(-50%)",
+      position: "relative",
+      display: "block",
+      width: 16,
+      height: 16,
+      borderRadius: "100%",
+      border: `1px solid ${get(theme, "checkbox.checkBoxBorder", "#c3c3c3")}`,
+      boxShadow: "inset 0px 1px 3px rgba(0,0,0,0.1)",
+      "&.checked": {
+        "&::before": {
+          content: "' '",
+          position: "absolute",
+          display: "block",
+          width: 12,
+          height: 12,
+          backgroundColor: get(theme, "checkbox.checkBoxColor", "#4CCB92"),
+          borderRadius: "100%",
+          top: "50%",
+          left: "50%",
+          transform: "translateX(-50%) translateY(-50%)",
+        },
       },
     },
-  },
-  "input:disabled": {
-    "&  ~ .radio": {
-      border: `1px solid ${get(theme, "checkbox.disabledBorder", "#B4B4B4")}`,
-    },
-    "&:checked ~ .radio": {
-      "&:before": {
-        backgroundColor: get(theme, "checkbox.disabledColor", "#D5D7D7"),
+    "&:disabled": {
+      "& ~ .radio": {
+        border: `1px solid ${get(theme, "checkbox.disabledBorder", "#D5D7D7")}`,
+        cursor: "not-allowed",
+        boxShadow: "inset 0px 1px 3px rgba(240,240,240,0.1)" as const,
+      },
+      "&:checked ~ .radio": {
+        "&:before": {
+          backgroundColor: get(theme, "checkbox.disabledColor", "#D5D7D7"),
+        },
       },
     },
   },
   ...sx,
 }));
 
-const OptionsContainer = styled.div<OptionsContainerProps>(({ inColumn }) => ({
-  flexGrow: 1,
-  width: "100%",
-  display: "flex",
-  flexDirection: inColumn ? "column" : "row",
-  justifyContent: "flex-end",
-  gap: 15,
-  "& .optionLabel": {
-    userSelect: "none",
-    "&.checked": {
-      fontWeight: "bold",
+const OptionsContainer = styled.div<OptionsContainerProps>(
+  ({ inColumn, theme }) => ({
+    flexGrow: 1,
+    width: "100%",
+    display: "flex",
+    flexDirection: inColumn ? "column" : "row",
+    justifyContent: "flex-end",
+    gap: 15,
+    "& .optionLabel": {
+      userSelect: "none",
+      "&.checked": {
+        fontWeight: "bold",
+      },
+      "&.disabled": {
+        color: get(theme, "checkbox.disabledColor", "#D5D7D7"),
+        cursor: "not-allowed",
+      },
     },
-  },
-}));
+  }),
+);
 
 const RadioContainer = styled.div(({}) => ({
   display: "flex",
@@ -135,7 +144,7 @@ const RadioGroup: FC<RadioGroupProps> = ({
           <Fragment>
             {selectorOptions.map((selector) => (
               <RadioContainer key={`option-${id}-${selector.value}`}>
-                <RadioButton sx={sx}>
+                <RadioButton htmlFor={`option-${id}-${selector.value}`} sx={sx}>
                   <input
                     type={"radio"}
                     name={name}
@@ -145,13 +154,17 @@ const RadioGroup: FC<RadioGroupProps> = ({
                     onChange={(event) => onChange(event, selector.extraValue)}
                     disabled={disableOptions || !!selector.disabled}
                   />
-                  <span className={"radio"} />
+                  <span
+                    className={`radio ${
+                      currentValue === selector.value ? "checked" : ""
+                    }`}
+                  />
                 </RadioButton>
                 <label
                   htmlFor={`option-${id}-${selector.value}`}
                   className={`optionLabel ${
                     currentValue === selector.value ? "checked" : ""
-                  }`}
+                  } ${disableOptions || !!selector.disabled ? "disabled" : ""}`}
                 >
                   {selector.label}
                 </label>

src/components/ThemedLogo/ThemedLogo.stories.tsx

@@ -16,7 +16,6 @@
 
 import React from "react";
 import { Meta, Story } from "@storybook/react";
-
 import ThemedLogo from "./ThemedLogo";
 import StoryThemeProvider from "../../utils/StoryThemeProvider";
 import GlobalStyles from "../GlobalStyles/GlobalStyles";

src/components/ValuePair/ValuePair.stories.tsx

@@ -31,7 +31,16 @@ export default {
 const Template: Story<ValuePairProps> = ({ sx, direction }) => (
   <StoryThemeProvider>
     <GlobalStyles />
-    <ValuePair label={"Label"} value={"Value"} sx={sx} direction={direction} />
+    <ValuePair
+      label={"State"}
+      value={
+        <span>
+          "Value"<a href={"#"}>Link</a>
+        </span>
+      }
+      sx={sx}
+      direction={direction}
+    />
   </StoryThemeProvider>
 );
 

src/components/index.ts

@@ -53,6 +53,7 @@ export { default as RadioGroup } from "./RadioGroup/RadioGroup";
 export { default as ReadBox } from "./ReadBox/ReadBox";
 export { default as CommentBox } from "./CommentBox/CommentBox";
 export { default as Menu } from "./Menu/Menu";
+export { default as MenuItem } from "./Menu/Vertical/MenuItem";
 export { default as ExpandOptionsButton } from "./ExpandOptionsButton/ExpandOptionsButton";
 export { default as Tabs } from "./Tabs/Tabs";
 export { default as CodeEditor } from "./CodeEditor/CodeEditor";

src/global/themes.ts

@@ -363,7 +363,7 @@ export const lightTheme: ThemeDefinitionProps = {
   checkbox: {
     checkBoxBorder: lightColors.checkBoxBorder,
     checkBoxColor: lightColors.mainGreen,
-    disabledBorder: lightColors.disabledInnerGrey,
+    disabledBorder: lightColors.disabledBGGrey,
     disabledColor: lightColors.disabledBGGrey,
   },
   iconButton: {

src/utils/StoryThemeProvider.tsx

@@ -14,9 +14,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useEffect, useState } from "react";
-import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
-import { addons } from "@storybook/addons";
+import React from "react";
+import { useDarkMode } from "storybook-dark-mode";
 
 import ThemeHandler from "../components/ThemeHandler/ThemeHandler";
 
@@ -24,18 +23,8 @@ interface IStoryThemeProvider {
   children: React.ReactNode;
 }
 
-const channel = addons.getChannel();
-
 const StoryThemeProvider = ({ children }: IStoryThemeProvider) => {
-  const [isDark, setDark] = useState(false);
-
-  useEffect(() => {
-    // listen to DARK_MODE event
-    channel.on(DARK_MODE_EVENT_NAME, setDark);
-    return () => channel.off(DARK_MODE_EVENT_NAME, setDark);
-  }, [channel, setDark]);
-
-  return <ThemeHandler darkMode={isDark}>{children}</ThemeHandler>;
+  return <ThemeHandler darkMode={useDarkMode()}>{children}</ThemeHandler>;
 };
 
 export default StoryThemeProvider;