Release v2.3.12 (#913)

Signed-off-by: Benjamin Perez <[email protected]> Co-authored-by: Benjamin Perez <[email protected]>
minio · Aug 5, 2024 · f0362e9 · f0362e9
1 parent c303556
commit f0362e9
Show file tree

Hide file tree

Showing 8 changed files with 1,768 additions and 1,555 deletions.
diff --git a/dist/esm/index.js b/dist/esm/index.js
diff --git a/dist/esm/index.js.map b/dist/esm/index.js.map
diff --git a/dist/esm/types/src/components/InputLabel/InputLabel.types.d.ts b/dist/esm/types/src/components/InputLabel/InputLabel.types.d.ts
@@ -9,4 +9,5 @@ export interface InputLabelProps extends HTMLAttributes<HTMLLabelElement> {
   helpTip?: ReactNode;
   helpTipPlacement?: CommonHelpTipPlacement;
   orientation?: "horizontal" | "vertical";
+  inputSizeMode?: "small" | "large";
 }
diff --git a/dist/esm/types/src/global/global.types.d.ts b/dist/esm/types/src/global/global.types.d.ts
@@ -49,9 +49,16 @@ export interface CheckBoxThemeProps {
   checkBoxFocusBorder: string;
   checkBoxFocusBackground: string;
   checkBoxFocusShadow: string;
-  checkBoxActiveColor: string;
+  checkBoxActiveCheckboxColor: string;
   checkBoxActiveBorder: string;
   checkBoxActiveBackground: string;
+  checkBoxActiveHoverBackground: string;
+  checkBoxActiveHoverBorder: string;
+  checkBoxActiveHoverCheckboxColor: string;
+  checkBoxFocusActiveBorder: string;
+  checkBoxFocusActiveBackground: string;
+  checkBoxFocusActiveHoverBackground: string;
+  checkBoxFocusActiveCheckboxColor: string;
   disabledBorder: string;
   disabledBackground: string;
   disabledColor: string;

diff --git a/dist/mds.d.ts b/dist/mds.d.ts
@@ -60,9 +60,16 @@ interface CheckBoxThemeProps {
   checkBoxFocusBorder: string;
   checkBoxFocusBackground: string;
   checkBoxFocusShadow: string;
-  checkBoxActiveColor: string;
+  checkBoxActiveCheckboxColor: string;
   checkBoxActiveBorder: string;
   checkBoxActiveBackground: string;
+  checkBoxActiveHoverBackground: string;
+  checkBoxActiveHoverBorder: string;
+  checkBoxActiveHoverCheckboxColor: string;
+  checkBoxFocusActiveBorder: string;
+  checkBoxFocusActiveBackground: string;
+  checkBoxFocusActiveHoverBackground: string;
+  checkBoxFocusActiveCheckboxColor: string;
   disabledBorder: string;
   disabledBackground: string;
   disabledColor: string;
@@ -741,6 +748,7 @@ interface InputLabelProps extends HTMLAttributes<HTMLLabelElement> {
   helpTip?: ReactNode;
   helpTipPlacement?: CommonHelpTipPlacement;
   orientation?: "horizontal" | "vertical";
+  inputSizeMode?: "small" | "large";
 }
 
 declare const InputLabel: FC<InputLabelProps>;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mds",
-  "version": "2.3.11",
+  "version": "2.3.12",
   "description": "A MinIO Components Library",
   "homepage": ".",
   "license": "AGPL-3.0-or-later",

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -39,7 +39,11 @@ const CheckboxItem = styled.label<InputLabelProps>(({ sx, theme }) => ({
     height: 16,
     borderRadius: 4,
     border: `1px solid ${get(theme, "checkbox.checkBoxBorder", themeColors["Color/Neutral/Border/colorBorderSubtle"].lightMode)}`,
-    backgroundColor: get(theme, "checkbox.checkBoxBackground", themeColors["Color/Neutral/Bg/colorBgFields"].lightMode),
+    backgroundColor: get(
+      theme,
+      "checkbox.checkBoxBackground",
+      themeColors["Color/Neutral/Bg/colorBgFields"].lightMode,
+    ),
     boxSizing: "border-box" as const,
     "&:hover:not(:disabled)": {
       borderColor: get(
@@ -59,9 +63,9 @@ const CheckboxItem = styled.label<InputLabelProps>(({ sx, theme }) => ({
       themeColors["Color/Brand/Primary/colorPrimary"].lightMode,
     ),
     backgroundColor: get(
-        theme,
-        "checkbox.checkBoxActiveColor",
-        themeColors["Color/Brand/Primary/colorPrimary"].lightMode,
+      theme,
+      "checkbox.checkBoxActiveColor",
+      themeColors["Color/Brand/Primary/colorPrimary"].lightMode,
     ),
     overflow: "hidden",
     "&:before": {
@@ -80,35 +84,55 @@ const CheckboxItem = styled.label<InputLabelProps>(({ sx, theme }) => ({
     },
     "&:hover": {
       borderColor: get(
-          theme,
-          "checkbox.checkBoxActiveHoverBorder",
-          themeColors["Color/Brand/Primary/colorPrimaryHover"].lightMode,
+        theme,
+        "checkbox.checkBoxActiveHoverBorder",
+        themeColors["Color/Brand/Primary/colorPrimaryHover"].lightMode,
       ),
       backgroundColor: get(
-          theme,
-          "checkbox.checkBoxActiveHoverBackground",
-          themeColors["Color/Brand/Primary/colorPrimaryHover"].lightMode,
+        theme,
+        "checkbox.checkBoxActiveHoverBackground",
+        themeColors["Color/Brand/Primary/colorPrimaryHover"].lightMode,
       ),
-    }
+    },
   },
   "input:disabled": {
     "&  ~ .checkbox": {
       border: `1px solid ${get(theme, "checkbox.disabledBorder", themeColors["Color/Neutral/Border/colorBorderSubtle"].lightMode)}`,
-      backgroundColor: get(theme, "checkbox.disabledBackground", themeColors["Color/Neutral/Bg/colorBgDisabled"].lightMode),
+      backgroundColor: get(
+        theme,
+        "checkbox.disabledBackground",
+        themeColors["Color/Neutral/Bg/colorBgDisabled"].lightMode,
+      ),
       "&:hover": {
-        borderColor: get(theme, "checkbox.disabledBorder", themeColors["Color/Neutral/Border/colorBorderSubtle"].lightMode),
-        backgroundColor: get(theme, "checkbox.disabledBackground", themeColors["Color/Neutral/Bg/colorBgDisabled"].lightMode),
+        borderColor: get(
+          theme,
+          "checkbox.disabledBorder",
+          themeColors["Color/Neutral/Border/colorBorderSubtle"].lightMode,
+        ),
+        backgroundColor: get(
+          theme,
+          "checkbox.disabledBackground",
+          themeColors["Color/Neutral/Bg/colorBgDisabled"].lightMode,
+        ),
       },
     },
   },
   "& .icon-overlay": {
-    color: get(theme, "checkbox.checkBoxActiveCheckboxColor", themeColors["Color/Neutral/Text/colorTextLightSolid"].lightMode),
+    color: get(
+      theme,
+      "checkbox.checkBoxActiveCheckboxColor",
+      themeColors["Color/Neutral/Text/colorTextLightSolid"].lightMode,
+    ),
     position: "absolute",
     width: 14,
     height: 14,
     "&.disabled": {
-      color: get(theme, "checkbox.disabledColor", themeColors["Color/Neutral/Text/colorTextDisabled"].lightMode),
-    }
+      color: get(
+        theme,
+        "checkbox.disabledColor",
+        themeColors["Color/Neutral/Text/colorTextDisabled"].lightMode,
+      ),
+    },
   },
   ...overridePropsParse(sx, theme),
 }));
@@ -125,7 +149,7 @@ const Checkbox: FC<
   helpTip,
   helpTipPlacement,
   checked,
-    disabled,
+  disabled,
   ...props
 }) => {
   return (
@@ -140,7 +164,13 @@ const Checkbox: FC<
       }}
     >
       <CheckboxItem sx={sx} onClick={(e) => e.stopPropagation()}>
-        <input type={"checkbox"} id={id} checked={checked} disabled={disabled} {...props} />
+        <input
+          type={"checkbox"}
+          id={id}
+          checked={checked}
+          disabled={disabled}
+          {...props}
+        />
         <span className={"checkbox"}>
           <CheckIcon className={`${disabled ? "disabled" : ""} icon-overlay`} />
         </span>

diff --git a/src/global/themes.ts b/src/global/themes.ts
@@ -647,24 +647,29 @@ export const lightTheme: ThemeDefinitionProps = {
       themeColors["Color/Neutral/Bg/colorBgFields"].lightMode,
     checkBoxFocusBorder:
       themeColors["Color/Brand/Primary/colorPrimaryBorder"].lightMode,
-    checkBoxFocusBackground: themeColors["Color/Neutral/Bg/colorBgFields"].lightMode,
+    checkBoxFocusBackground:
+      themeColors["Color/Neutral/Bg/colorBgFields"].lightMode,
     checkBoxFocusShadow: "0px 0px 0px 4px rgba(43, 100, 229, 0.30)",
     checkBoxActiveBorder:
       themeColors["Color/Brand/Primary/colorPrimary"].lightMode,
     checkBoxActiveBackground:
       themeColors["Color/Brand/Primary/colorPrimary"].lightMode,
     checkBoxActiveCheckboxColor:
-    themeColors["Color/Neutral/Text/colorTextLightSolid"].lightMode,
+      themeColors["Color/Neutral/Text/colorTextLightSolid"].lightMode,
     checkBoxActiveHoverCheckboxColor:
-    themeColors["Color/Neutral/Text/colorTextLightSolid"].lightMode,
+      themeColors["Color/Neutral/Text/colorTextLightSolid"].lightMode,
     checkBoxActiveHoverBackground:
-        themeColors["Color/Brand/Primary/colorPrimaryHover"].lightMode,
+      themeColors["Color/Brand/Primary/colorPrimaryHover"].lightMode,
     checkBoxActiveHoverBorder:
-    themeColors["Color/Brand/Primary/colorPrimaryHover"].lightMode,
-    checkBoxFocusActiveBorder: themeColors["Color/Brand/Primary/colorPrimaryActive"].lightMode,
-    checkBoxFocusActiveBackground: themeColors["Color/Brand/Primary/colorPrimaryActive"].lightMode,
-    checkBoxFocusActiveCheckboxColor: themeColors["Color/Neutral/Text/colorTextLightSolid"].lightMode,
-    checkBoxFocusActiveHoverBackground: themeColors["Color/Brand/Primary/colorPrimaryHover"].lightMode,
+      themeColors["Color/Brand/Primary/colorPrimaryHover"].lightMode,
+    checkBoxFocusActiveBorder:
+      themeColors["Color/Brand/Primary/colorPrimaryActive"].lightMode,
+    checkBoxFocusActiveBackground:
+      themeColors["Color/Brand/Primary/colorPrimaryActive"].lightMode,
+    checkBoxFocusActiveCheckboxColor:
+      themeColors["Color/Neutral/Text/colorTextLightSolid"].lightMode,
+    checkBoxFocusActiveHoverBackground:
+      themeColors["Color/Brand/Primary/colorPrimaryHover"].lightMode,
     disabledBorder:
       themeColors["Color/Neutral/Border/colorBorderSubtle"].lightMode,
     disabledBackground:
@@ -1540,38 +1545,42 @@ export const darkTheme: ThemeDefinitionProps = {
   },
   checkbox: {
     checkBoxBorder:
-    themeColors["Color/Neutral/Border/colorBorderSubtle"].darkMode,
+      themeColors["Color/Neutral/Border/colorBorderSubtle"].darkMode,
     checkBoxBackground: themeColors["Color/Neutral/Bg/colorBgFields"].darkMode,
     checkBoxHoverBorder:
-    themeColors["Color/Neutral/Border/colorBorderBold"].darkMode,
+      themeColors["Color/Neutral/Border/colorBorderBold"].darkMode,
     checkBoxHoverBackground:
-    themeColors["Color/Neutral/Bg/colorBgFields"].darkMode,
+      themeColors["Color/Neutral/Bg/colorBgFields"].darkMode,
     checkBoxFocusBorder:
-    themeColors["Color/Brand/Primary/colorPrimaryBorder"].darkMode,
-    checkBoxFocusBackground: themeColors["Color/Neutral/Bg/colorBgFields"].darkMode,
+      themeColors["Color/Brand/Primary/colorPrimaryBorder"].darkMode,
+    checkBoxFocusBackground:
+      themeColors["Color/Neutral/Bg/colorBgFields"].darkMode,
     checkBoxFocusShadow: "0px 0px 0px 4px rgba(43, 100, 229, 0.30)",
     checkBoxActiveBorder:
-    themeColors["Color/Brand/Primary/colorPrimary"].darkMode,
+      themeColors["Color/Brand/Primary/colorPrimary"].darkMode,
     checkBoxActiveBackground:
-    themeColors["Color/Brand/Primary/colorPrimary"].darkMode,
+      themeColors["Color/Brand/Primary/colorPrimary"].darkMode,
     checkBoxActiveCheckboxColor:
-    themeColors["Color/Neutral/Text/colorTextLightSolid"].darkMode,
+      themeColors["Color/Neutral/Text/colorTextLightSolid"].darkMode,
     checkBoxActiveHoverCheckboxColor:
-    themeColors["Color/Neutral/Text/colorTextLightSolid"].darkMode,
+      themeColors["Color/Neutral/Text/colorTextLightSolid"].darkMode,
     checkBoxActiveHoverBackground:
-    themeColors["Color/Brand/Primary/colorPrimaryHover"].darkMode,
+      themeColors["Color/Brand/Primary/colorPrimaryHover"].darkMode,
     checkBoxActiveHoverBorder:
-    themeColors["Color/Brand/Primary/colorPrimaryHover"].darkMode,
-    checkBoxFocusActiveBorder: themeColors["Color/Brand/Primary/colorPrimaryActive"].darkMode,
-    checkBoxFocusActiveBackground: themeColors["Color/Brand/Primary/colorPrimaryActive"].darkMode,
-    checkBoxFocusActiveCheckboxColor: themeColors["Color/Neutral/Text/colorTextLightSolid"].darkMode,
-    checkBoxFocusActiveHoverBackground: themeColors["Color/Brand/Primary/colorPrimaryHover"].darkMode,
+      themeColors["Color/Brand/Primary/colorPrimaryHover"].darkMode,
+    checkBoxFocusActiveBorder:
+      themeColors["Color/Brand/Primary/colorPrimaryActive"].darkMode,
+    checkBoxFocusActiveBackground:
+      themeColors["Color/Brand/Primary/colorPrimaryActive"].darkMode,
+    checkBoxFocusActiveCheckboxColor:
+      themeColors["Color/Neutral/Text/colorTextLightSolid"].darkMode,
+    checkBoxFocusActiveHoverBackground:
+      themeColors["Color/Brand/Primary/colorPrimaryHover"].darkMode,
     disabledBorder:
-    themeColors["Color/Neutral/Border/colorBorderSubtle"].darkMode,
+      themeColors["Color/Neutral/Border/colorBorderSubtle"].darkMode,
     disabledBackground:
-    themeColors["Color/Neutral/Bg/colorBgDisabled"].darkMode,
-    disabledColor:
-    themeColors["Color/Neutral/Text/colorTextDisabled"].darkMode,
+      themeColors["Color/Neutral/Bg/colorBgDisabled"].darkMode,
+    disabledColor: themeColors["Color/Neutral/Text/colorTextDisabled"].darkMode,
   },
   radioGroup: {
     radioBorder: themeColors["Color/Neutral/Border/colorBorderSubtle"].darkMode,