Update Select input styles (#906)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net> Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
minio · Aug 2, 2024 · 001dc60 · 001dc60
1 parent 578d7ef
commit 001dc60
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 9 deletions.
diff --git a/src/components/DropdownSelector/DropdownSelector.tsx b/src/components/DropdownSelector/DropdownSelector.tsx
@@ -28,7 +28,8 @@ import { useArrowKeys, useEnterKey, useEscapeKey } from "../../global/hooks";
 import SelectorContainer from "../../global/SelectorContainer";
 import Box from "../Box/Box";
 import { lightV2 } from "../../global/themes";
-import { overridePropsParse } from "../../global/utils";
+import {overridePropsParse, radioVariants} from "../../global/utils";
+import {themeColors, themeShadows} from "../../global/themeColors";
 
 const DropdownBlock = styled.div<DropDownBlockProps>(
   ({ theme, sx, useAnchorWidth, forSelectInput }) => ({
@@ -45,12 +46,11 @@ const DropdownBlock = styled.div<DropDownBlockProps>(
     minWidth: useAnchorWidth ? 160 : 0,
     overflowX: "hidden",
     overflowY: "auto",
-    borderRadius: forSelectInput ? 16 : 12,
+    borderRadius: radioVariants.borderRadiusSM,
     border: forSelectInput
       ? 0
       : `1px solid ${get(theme, "dropdownSelector.border", lightV2.disabledGrey)}`,
-    boxShadow:
-      "0px 2px 8px 0px rgba(156, 163, 175, 0.15), 0px 4px 12px 0px rgba(156, 163, 175, 0.25)",
+    boxShadow: themeShadows["boxShadow-03"],
     "& ul": {
       padding: 0,
       margin: 0,
@@ -84,15 +84,15 @@ const DropdownItem = styled.div<
     color: get(theme, "dropdownSelector.optionTextColor", "#000"),
     padding: "6px 10px",
     fontSize: 14,
-    fontWeight: 600,
+    fontWeight: 400,
     lineHeight: "18px",
     letterSpacing: "0.16px",
     userSelect: "none",
     alignItems: "center",
     justifyContent: "flex-start",
     gap: 10,
     whiteSpace: "nowrap",
-    borderRadius: 6,
+    borderRadius: radioVariants.borderRadiusSM,
     display: "grid",
     gridTemplateColumns: gridColumns,
     "& svg": {
@@ -122,6 +122,13 @@ const DropdownItem = styled.div<
         color: get(theme, "dropdownSelector.disabledText", "#E6EBEB"),
       },
     },
+    "&.danger:not(.disabled)": {
+        color: get(theme, "dropdownSelector.dangerText", themeColors["Color/Brand/Error/colorPrimaryText"].lightMode),
+      "&:hover": {
+        backgroundColor: get(theme, "dropdownSelector.dangerHoverBG", themeColors["Color/Brand/Error/colorPrimaryBgHover"].lightMode),
+        color: get(theme, "dropdownSelector.dangerHoverText", themeColors["Color/Brand/Error/colorPrimaryTextHover"].lightMode),
+      },
+    },
     "&.hovered:not(.disabled)": {
       backgroundColor: get(theme, "dropdownSelector.hoverBG", "#E6EAEB"),
       color: get(theme, "dropdownSelector.hoverText", "#000"),
@@ -265,7 +272,7 @@ const DropdownSelector: FC<DropdownSelectorProps> = ({
                 selectedOption === option.value ? "selected" : ""
               } ${option.disabled ? "disabled" : ""} ${
                 index === indexHover ? "hovered" : ""
-              }`}
+              } ${option.danger ? "danger" : ""}`}
               onClick={selectOption}
               onMouseOver={() => {
                 setIndexHover(index);

diff --git a/src/components/Select/Select.uikit.stories.tsx b/src/components/Select/Select.uikit.stories.tsx
@@ -44,6 +44,11 @@ let useOpts: SelectOption[] = [
     value: "value4",
     disabled: true,
   },
+    {
+        label: "Danger Option",
+        value: "value5",
+        danger: true,
+    }
 ];
 let useIconOpts: SelectOption[] = [
   { label: "Option 1", value: "value1", icon: <DownloadIcon /> },

diff --git a/src/global/global.types.ts b/src/global/global.types.ts
@@ -224,6 +224,9 @@ export interface DropdownSelectorThemeProps {
   hoverBG: string;
   disabledText: string;
   border?: string;
+  dangerText: string;
+  dangerHoverBG: string;
+  dangerHoverText: string;
 }
 
 export interface ReadBoxThemeProps {
@@ -539,6 +542,7 @@ export interface SelectOption {
   disabled?: boolean;
   subLabel?: string;
   description?: string;
+  danger?: boolean;
 }
 
 export interface IBytesCalc {

diff --git a/src/global/themeColors.ts b/src/global/themeColors.ts
@@ -823,7 +823,7 @@ export const themeShadows = {
   "boxShadow-02":
     "0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 6px -1px rgba(0, 0, 0, 0.07), 0px 2px 4px 0px rgba(0, 0, 0, 0.07)",
   "boxShadow-03":
-    "0 1px 2px 0 rgba(0, 0, 0, 0.8), 0 4px 12px 0 rgba(0, 0, 0, 0.15), 0 2px 4px 0 rgba(0, 0, 0, 0.7)",
+    "0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 4px 12px -1px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.07);",
   "boxShadow-04":
     "0px 4px 8px 0px rgba(0, 0, 0, 0.10), 0px 6px 12px 0px rgba(0, 0, 0, 0.10), 0px 6px 16px 0px rgba(0, 0, 0, 0.10)",
   "focusStyle-Light": "0px 0px 0px 2px rgba(43, 100, 229, 0.30)",

diff --git a/src/global/themes.ts b/src/global/themes.ts
@@ -810,7 +810,7 @@ export const lightTheme: ThemeDefinitionProps = {
   },
   dropdownSelector: {
     hoverText: themeColors["Color/Neutral/Text/colorTextHeading"].lightMode,
-    backgroundColor: "transparent",
+    backgroundColor: themeColors["Color/Neutral/Bg/colorBgContainer"].lightMode,
     hoverBG: themeColors["Color/Brand/Control/colorBgHover"].lightMode,
     selectedBGColor: themeColors["Color/Brand/Control/colorBgActive"].lightMode,
     selectedTextColor:
@@ -819,6 +819,9 @@ export const lightTheme: ThemeDefinitionProps = {
       themeColors["Color/Neutral/Text/colorTextHeading"].lightMode,
     disabledText: themeColors["Color/Neutral/Text/colorTextDisabled"].lightMode,
     border: themeColors["Color/Neutral/Border/colorBorderMinimal"].lightMode,
+    dangerText: themeColors["Color/Brand/Error/colorPrimaryText"].lightMode,
+    dangerHoverBG: themeColors["Color/Brand/Error/colorPrimaryBgHover"].lightMode,
+    dangerHoverText: themeColors["Color/Brand/Error/colorPrimaryTextHover"].lightMode,
   },
   readBox: {
     borderColor: lightV2.borderColor,
@@ -1694,6 +1697,9 @@ export const darkTheme: ThemeDefinitionProps = {
       themeColors["Color/Neutral/Text/colorTextHeading"].darkMode,
     disabledText: themeColors["Color/Neutral/Text/colorTextDisabled"].darkMode,
     border: themeColors["Color/Neutral/Border/colorBorderMinimal"].darkMode,
+    dangerText: themeColors["Color/Brand/Error/colorPrimaryText"].darkMode,
+    dangerHoverBG: themeColors["Color/Brand/Error/colorPrimaryBgHover"].darkMode,
+    dangerHoverText: themeColors["Color/Brand/Error/colorPrimaryTextHover"].darkMode,
   },
   readBox: {
     borderColor: darkColors.headerBorder,