Release v0.14.0 (#626)

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

.github/workflows/deployer.yml

@@ -1,4 +1,4 @@
-name: Workflow
+name: Build Container
 
 on:
   release:
@@ -24,24 +24,21 @@ jobs:
         id: node_version
         run: echo "$(cat .nvmrc)" && echo "NVMRC=$(cat .nvmrc)" >> $GITHUB_ENV
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NVMRC }}
           cache: "yarn"
           cache-dependency-path: yarn.lock
 
-      - name: Install Dependencies
-        continue-on-error: false
-        run: |
-          corepack enable
-          yarn set version stable
-          yarn install --frozen-lockfile --immutable
-
       - name: Log in to private Docker registry
-        run: echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login ${{ secrets.REGISTRY_URL }} -u ${{ secrets.REGISTRY_USERNAME }} --password-stdin
+        run: echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login ${{ secrets.REGISTRY_URL }} -u '${{ secrets.REGISTRY_USERNAME }}' --password-stdin
 
       - name: Build Storybook
         run: |
+          rm -Rf node_modules/
+          rm yarn.lock
+          yarn install
+          yarn build
           yarn build-storybook 
           docker buildx build --platform linux/amd64 --push -t registry.min.dev/minio/mds .
           echo "${{ secrets.MDS_DEPLOYER_KUBECONFIG }}" > /tmp/kubecconfig

Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx:1.23
+FROM nginx:1
 
 COPY nginx.conf /etc/nginx/nginx.conf
 COPY docs /usr/share/nginx/html

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

@@ -4,7 +4,12 @@ export interface DropdownSelectorProps {
   id: string;
   options: SelectorType[];
   selectedOption?: string;
-  onSelect: (value: string, extraValue?: any, label?: string) => void;
+  onSelect: (
+    value: string,
+    extraValue?: any,
+    label?: string,
+    selectedIndex?: number,
+  ) => void;
   hideTriggerAction: () => void;
   open: boolean;
   anchorEl?: (EventTarget & HTMLElement) | null;

dist/cjs/types/components/Icons/ExpandLeftCaret.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const ExpandLeftCaret: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default ExpandLeftCaret;

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

@@ -215,3 +215,4 @@ export { default as DarkModeIcon } from "./DarkModeIcon";
 export { default as ShuffleIcon } from "./ShuffleIcon";
 export { default as LanguageIcon } from "./LanguageIcon";
 export { default as EventBusyIcon } from "./EventBusyIcon";
+export { default as ExpandLeftCaret } from "./ExpandLeftCaret";

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

@@ -14,7 +14,7 @@ export interface MainSwitchProps {
   helpTipPlacement?: CommonHelpTipPlacement;
 }
 export interface IndicatorProps {
-  on: boolean;
+  active: boolean;
   children: React.ReactNode;
 }
 export interface SwitchContainerProps {

dist/cjs/types/global/global.types.d.ts

@@ -322,6 +322,7 @@ export interface SelectorType {
   label: string;
   value: string;
   icon?: React.ReactNode;
+  indicator?: React.ReactNode;
   extraValue?: any;
   disabled?: boolean;
 }

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

@@ -4,7 +4,12 @@ export interface DropdownSelectorProps {
   id: string;
   options: SelectorType[];
   selectedOption?: string;
-  onSelect: (value: string, extraValue?: any, label?: string) => void;
+  onSelect: (
+    value: string,
+    extraValue?: any,
+    label?: string,
+    selectedIndex?: number,
+  ) => void;
   hideTriggerAction: () => void;
   open: boolean;
   anchorEl?: (EventTarget & HTMLElement) | null;

dist/esm/types/components/Icons/ExpandLeftCaret.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { SVGProps } from "react";
+declare const ExpandLeftCaret: (
+  props: SVGProps<SVGSVGElement>,
+) => React.JSX.Element;
+export default ExpandLeftCaret;

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

@@ -215,3 +215,4 @@ export { default as DarkModeIcon } from "./DarkModeIcon";
 export { default as ShuffleIcon } from "./ShuffleIcon";
 export { default as LanguageIcon } from "./LanguageIcon";
 export { default as EventBusyIcon } from "./EventBusyIcon";
+export { default as ExpandLeftCaret } from "./ExpandLeftCaret";

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

@@ -14,7 +14,7 @@ export interface MainSwitchProps {
   helpTipPlacement?: CommonHelpTipPlacement;
 }
 export interface IndicatorProps {
-  on: boolean;
+  active: boolean;
   children: React.ReactNode;
 }
 export interface SwitchContainerProps {

dist/esm/types/global/global.types.d.ts

@@ -322,6 +322,7 @@ export interface SelectorType {
   label: string;
   value: string;
   icon?: React.ReactNode;
+  indicator?: React.ReactNode;
   extraValue?: any;
   disabled?: boolean;
 }

dist/mds.d.ts

@@ -334,6 +334,7 @@ interface SelectorType {
   label: string;
   value: string;
   icon?: React__default.ReactNode;
+  indicator?: React__default.ReactNode;
   extraValue?: any;
   disabled?: boolean;
 }
@@ -854,7 +855,7 @@ interface MainSwitchProps {
   helpTipPlacement?: CommonHelpTipPlacement;
 }
 interface IndicatorProps {
-  on: boolean;
+  active: boolean;
   children: React__default.ReactNode;
 }
 interface SwitchContainerProps {
@@ -892,7 +893,12 @@ interface DropdownSelectorProps {
   id: string;
   options: SelectorType[];
   selectedOption?: string;
-  onSelect: (value: string, extraValue?: any, label?: string) => void;
+  onSelect: (
+    value: string,
+    extraValue?: any,
+    label?: string,
+    selectedIndex?: number,
+  ) => void;
   hideTriggerAction: () => void;
   open: boolean;
   anchorEl?: (EventTarget & HTMLElement) | null;
@@ -2230,6 +2236,10 @@ declare const ShuffleIcon: (
   props: SVGProps<SVGSVGElement>,
 ) => React$1.JSX.Element;
 
+declare const ExpandLeftCaret: (
+  props: SVGProps<SVGSVGElement>,
+) => React$1.JSX.Element;
+
 declare const InspectMenuIcon: (
   props: SVGProps<SVGSVGElement>,
 ) => React$1.JSX.Element;
@@ -2604,6 +2614,7 @@ export {
   EventSubscriptionIcon,
   ExpandCaret,
   ExpandIcon,
+  ExpandLeftCaret,
   ExpandOptionsButton,
   ExpandOptionsButtonProps,
   ExtraCommentProps,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mds",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "description": "A MinIO Components Library",
   "homepage": ".",
   "license": "AGPL-3.0-or-later",
@@ -14,54 +14,54 @@
   },
   "types": "dist/mds.d.ts",
   "dependencies": {
-    "@types/styled-components": "^5.1.32",
-    "@uiw/react-textarea-code-editor": "^2.1.9",
+    "@types/styled-components": "^5.1.34",
+    "@uiw/react-textarea-code-editor": "^3.0.2",
     "detect-gpu": "^5.0.37",
     "luxon": "^3.4.4",
-    "react-calendar": "^4.6.1",
+    "react-calendar": "^4.7.0",
     "react-virtualized": "^9.22.5",
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.5",
-    "@babel/preset-env": "^7.23.5",
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-actions": "^7.6.3",
-    "@storybook/addon-essentials": "^7.6.3",
-    "@storybook/addon-interactions": "^7.6.3",
-    "@storybook/addon-links": "^7.6.3",
-    "@storybook/react": "^7.6.3",
-    "@storybook/react-webpack5": "^7.6.3",
+    "@storybook/addon-actions": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
     "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.10",
-    "@types/react": "^18.2.39",
-    "@types/luxon": "^3.3.5",
-    "@types/react-virtualized": "^9.21.28",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.47",
+    "@types/luxon": "^3.4.0",
+    "@types/react-virtualized": "^9.21.29",
     "babel-loader": "^9.1.3",
     "jest": "^29.6.4",
     "jest-environment-jsdom": "^29.6.4",
     "lodash": "^4.17.21",
-    "prettier": "^3.1.0",
+    "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remark-gfm": "^4.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^4.2.3",
-    "rollup-plugin-import-css": "^3.3.5",
+    "rollup-plugin-import-css": "^3.4.0",
     "rollup-plugin-import-file": "^1.0.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
-    "storybook": "^7.6.3",
+    "storybook": "^7.6.7",
     "storybook-dark-mode": "^3.0.3",
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.3"
   }
 }

src/components/ApplicationLogo/Logos/Enterprise/Enterprise.tsx

@@ -23,7 +23,7 @@ const Enterprise: FC<SVGProps<any> & LogoBaseProps> = ({
   onClick,
 }) => {
   return (
-    <LogoBase viewBox="0 0 288.6 51" inverse={inverse} onClick={onClick}>
+    <LogoBase viewBox="0 0 249.2 51" inverse={inverse} onClick={onClick}>
       <g transform="translate(26.059 -11)">
         <g transform="translate(-29 11)">
           <g transform="translate(0 0)">

src/components/Autocomplete/Autocomplete.stories.tsx

@@ -14,7 +14,7 @@
 // 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, { useState } from "react";
+import { useState } from "react";
 import { Meta, Story } from "@storybook/react";
 
 import Autocomplete from "./Autocomplete";
@@ -27,6 +27,7 @@ import DownloadIcon from "../Icons/DownloadIcon";
 import UploadIcon from "../Icons/UploadIcon";
 import UsersIcon from "../Icons/UsersIcon";
 import { SelectorType } from "../../global/global.types";
+import TestIcon from "../../utils/TestIcon";
 
 export default {
   title: "MDS/Forms/Autocomplete",
@@ -205,3 +206,23 @@ NoDropArrow.args = {
   ],
   displayDropArrow: false,
 };
+
+export const IndicatorInLabel = Template.bind({});
+IndicatorInLabel.args = {
+  options: [
+    {
+      label: "Option with Indicator",
+      value: "value1",
+      indicator: <TestIcon style={{ fill: "#080" }} />,
+    },
+    {
+      label: "Option 2",
+      value: "value2",
+    },
+    {
+      label: "Option 3",
+      value: "value3",
+    },
+    { label: "No Extra Value", value: "value4", icon: <UsersIcon /> },
+  ],
+};

src/components/Autocomplete/Autocomplete.tsx

@@ -14,7 +14,7 @@
 // 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, Fragment, useEffect, useState } from "react";
+import React, { FC, Fragment, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import get from "lodash/get";
 import { AutocompleteProps } from "./Autocomplete.types";
@@ -47,6 +47,7 @@ const AutocompleteBase = styled.input(({ theme }) => {
     borderRadius: 3,
     outline: "none",
     transitionDuration: "0.1s",
+    transitionProperty: "border",
     backgroundColor: get(theme, "inputBox.backgroundColor", "#fff"),
     userAutocomplete: "none",
     "&:placeholder": {
@@ -74,6 +75,9 @@ const AutocompleteBase = styled.input(({ theme }) => {
         borderColor: get(theme, "inputBox.disabledBorder", "#494A4D"),
       },
     },
+    "&.withIcon": {
+      paddingLeft: 38,
+    },
   };
 });
 
@@ -82,6 +86,7 @@ const InputContainer = styled.div<InputContainerProps>(
     display: "flex",
     flexGrow: 1,
     width: "100%",
+    height: 38,
     position: "relative",
     "& .AutocompleteContainer": {
       width: "100%",
@@ -112,6 +117,18 @@ const InputContainer = styled.div<InputContainerProps>(
     "& .inputLabel": {
       marginBottom: error ? 18 : 0,
     },
+    "& .iconOption": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "absolute",
+      marginLeft: 15,
+      height: 38,
+      "& svg": {
+        width: 16,
+        height: 16,
+      },
+    },
     ...sx,
   }),
 );
@@ -136,6 +153,7 @@ const Autocomplete: FC<AutocompleteProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [searchBoxVal, setSearchBoxVal] = useState<string>("");
+  const [valueSelected, setValueSelected] = useState<number | null>(null);
   const [filterVal, setFilterVal] = useState<string>("");
   const [anchorEl, setAnchorEl] = React.useState<
     (EventTarget & HTMLDivElement) | null
@@ -143,9 +161,10 @@ const Autocomplete: FC<AutocompleteProps> = ({
 
   useEffect(() => {
     if (value !== "") {
-      const option = options.find((option) => option.value === value);
+      const index = options.findIndex((option) => option.value === value);
 
-      setSearchBoxVal(option?.label || "");
+      setValueSelected(index);
+      setSearchBoxVal(options[index]?.label || "");
     }
   }, []);
 
@@ -153,6 +172,10 @@ const Autocomplete: FC<AutocompleteProps> = ({
     item.label.toLowerCase().includes(filterVal.toLowerCase()),
   );
 
+  const optionWithIcon =
+    valueSelected !== null &&
+    (options[valueSelected]?.icon || options[valueSelected]?.indicator);
+
   return (
     <InputContainer
       sx={sx}
@@ -195,6 +218,13 @@ const Autocomplete: FC<AutocompleteProps> = ({
           }
         }}
       >
+        {optionWithIcon && (
+          <Box className={"iconOption"}>
+            {options[valueSelected]?.indicator
+              ? options[valueSelected]?.indicator
+              : options[valueSelected].icon}
+          </Box>
+        )}
         <AutocompleteBase
           disabled={disabled}
           id={id}
@@ -205,6 +235,7 @@ const Autocomplete: FC<AutocompleteProps> = ({
             setFilterVal(e.target.value);
           }}
           placeholder={placeholder}
+          className={`${optionWithIcon ? "withIcon" : ""}`}
         />
         {displayDropArrow && (
           <Box className={"overlayArrow"}>
@@ -213,12 +244,16 @@ const Autocomplete: FC<AutocompleteProps> = ({
         )}
 
         <DropdownSelector
-          id={`${id}-options-Autocompleteor`}
+          id={`${id}-options-Autocomplete`}
           options={filteredOptions}
           selectedOption={value}
-          onSelect={(nValue, extraValue, label) => {
+          onSelect={(nValue, extraValue, label, id) => {
+            console.log("Selected", id);
             setSearchBoxVal(label || "");
             setFilterVal("");
+            if (id !== undefined) {
+              setValueSelected(id);
+            }
             onChange(nValue, extraValue);
           }}
           hideTriggerAction={() => {

src/components/DateTimeInput/TimeSelector.tsx

@@ -31,7 +31,7 @@ const TimeSelectorContainer = styled.div(({ theme }) => ({
       "borderColor",
       lightColors.borderColor,
     )}`,
-    padding: "18px 0 12px",
+    padding: "0 0 12px",
     marginBottom: 10,
     fontWeight: "bold",
     fontSize: 16,

src/components/DropdownSelector/DropdownSelector.tsx

@@ -144,7 +144,12 @@ const DropdownSelector: FC<DropdownSelectorProps> = ({
     const option = options[indexHover];
 
     if (!option.disabled) {
-      onSelect(option.value, option.extraValue || null, option.label);
+      onSelect(
+        option.value,
+        option.extraValue || null,
+        option.label,
+        indexHover,
+      );
     }
 
     hideTriggerAction();
@@ -229,6 +234,7 @@ const DropdownSelector: FC<DropdownSelectorProps> = ({
               >
                 {option.icon}
                 {option.label}
+                {option.indicator}
               </li>
             );
           })}

src/components/DropdownSelector/DropdownSelector.types.ts

@@ -21,7 +21,12 @@ export interface DropdownSelectorProps {
   id: string;
   options: SelectorType[];
   selectedOption?: string;
-  onSelect: (value: string, extraValue?: any, label?: string) => void;
+  onSelect: (
+    value: string,
+    extraValue?: any,
+    label?: string,
+    selectedIndex?: number,
+  ) => void;
   hideTriggerAction: () => void;
   open: boolean;
   anchorEl?: (EventTarget & HTMLElement) | null;

src/components/Icons/ExpandLeftCaret.tsx

@@ -0,0 +1,52 @@
+// This file is part of MinIO Design System
+// Copyright (c) 2024 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 * as React from "react";
+import { SVGProps } from "react";
+
+const ExpandLeftCaret = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 15 15"
+    {...props}
+  >
+    <g id="OpenListIcon-full" transform="translate(4 4.984)">
+      <g
+        id="noun_chevron_2320228"
+        transform="translate(0.167 4.016) rotate(-90)"
+      >
+        <path
+          id="Trazado_6842"
+          d="M5.3,1.7c0-0.1,0-0.2-0.1-0.3C5,1.2,4.8,1.2,4.6,1.3c0,0,0,0,0,0L1.9,4.2l-2.7-2.9
+			c-0.1-0.2-0.4-0.2-0.5,0c0,0,0,0,0,0c-0.2,0.2-0.2,0.4,0,0.6l2.9,3.2c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1L5.1,2
+			C5.2,1.9,5.3,1.8,5.3,1.7z"
+        />
+      </g>
+      <rect
+        id="Rectángulo_896"
+        x="3.2"
+        y="-1.4"
+        fill={"none"}
+        width="0.5"
+        height="0.5"
+      />
+    </g>
+  </svg>
+);
+
+export default ExpandLeftCaret;

src/components/Icons/Icons.stories.tsx

@@ -548,6 +548,12 @@ const Template: Story = (args) => {
               ExpandIcon
             </div>
 
+            <div className="story-icon">
+              <cicons.ExpandLeftCaret />
+              <br />
+              ExpandLeftCaret
+            </div>
+
             <div className="story-icon">
               <cicons.ExtraFeaturesIcon />
               <br />

src/components/Icons/index.ts

@@ -231,3 +231,4 @@ export { default as DarkModeIcon } from "./DarkModeIcon";
 export { default as ShuffleIcon } from "./ShuffleIcon";
 export { default as LanguageIcon } from "./LanguageIcon";
 export { default as EventBusyIcon } from "./EventBusyIcon";
+export { default as ExpandLeftCaret } from "./ExpandLeftCaret";

src/components/Select/Select.stories.tsx

@@ -14,7 +14,7 @@
 // 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, { useState } from "react";
+import { Fragment, useState } from "react";
 import { Meta, Story } from "@storybook/react";
 
 import Select from "./Select";
@@ -27,6 +27,7 @@ import DownloadIcon from "../Icons/DownloadIcon";
 import UploadIcon from "../Icons/UploadIcon";
 import UsersIcon from "../Icons/UsersIcon";
 import { SelectorType } from "../../global/global.types";
+import TestIcon from "../../utils/TestIcon";
 
 export default {
   title: "MDS/Forms/Select",
@@ -186,3 +187,30 @@ WithPlaceholder.args = {
     { label: "No Extra Value", value: "value4", icon: <UsersIcon /> },
   ],
 };
+
+export const IndicatorInLabel = Template.bind({});
+IndicatorInLabel.args = {
+  placeholder: "This Select has placeholder",
+  options: [
+    {
+      label: "Option with indicator",
+      value: "value1",
+      icon: <DownloadIcon />,
+      extraValue: { anotherVar: "test1" },
+      indicator: <TestIcon style={{ fill: "#080" }} />,
+    },
+    {
+      label: "Option 2",
+      value: "value2",
+      icon: <UploadIcon />,
+      extraValue: { anotherVar: "test2" },
+    },
+    {
+      label: "Option 3",
+      value: "value3",
+      icon: <UsersIcon />,
+      extraValue: { anotherVar: "test3" },
+    },
+    { label: "No Extra Value", value: "value4", icon: <UsersIcon /> },
+  ],
+};

src/components/Select/Select.tsx

@@ -49,6 +49,7 @@ const SelectBase = styled.div(({ theme }) => {
     transitionDuration: "0.1s",
     backgroundColor: get(theme, "inputBox.backgroundColor", "#fff"),
     userSelect: "none",
+    gap: 8,
     "&:placeholder": {
       color: "#858585",
       opacity: 1,
@@ -74,6 +75,10 @@ const SelectBase = styled.div(({ theme }) => {
         borderColor: get(theme, "inputBox.disabledBorder", "#494A4D"),
       },
     },
+    "& svg": {
+      width: 16,
+      height: 16,
+    },
   };
 });
 
@@ -181,15 +186,17 @@ const Select: FC<SelectProps> = ({
       >
         <SelectBase className={disabled ? "disabled" : ""}>
           <Fragment>
-            {fixedLabel !== "" ? (
+            {fixedLabel && fixedLabel !== "" ? (
               fixedLabel
             ) : (
               <Fragment>
+                {selectedLabel?.icon}
                 {selectedLabel?.label || (
                   <i style={{ opacity: 0.6 }}>
                     {placeholder !== "" ? placeholder : ""}
                   </i>
                 )}
+                {selectedLabel?.indicator}
               </Fragment>
             )}
           </Fragment>

src/components/Switch/Switch.tsx

@@ -28,13 +28,13 @@ import HelpIcon from "../Icons/HelpIcon";
 import Box from "../Box/Box";
 import FieldContainer from "../../global/FieldContainer";
 
-const SwitchIndicator = styled.span<IndicatorProps>(({ theme, on }) => ({
+const SwitchIndicator = styled.span<IndicatorProps>(({ theme, active }) => ({
   fontSize: 12,
-  color: on
+  color: active
     ? get(theme, "switchButton.onLabelColor", "#081C42")
     : get(theme, "switchButton.offLabelColor", "#E2E2E2"),
   margin: "0 8px 0 10px",
-  fontWeight: on ? "bold" : "normal",
+  fontWeight: active ? "bold" : "normal",
 }));
 
 const SwitchItem = styled.label(({ theme }) => ({
@@ -145,7 +145,7 @@ const Switch: FC<SwitchProps & React.InputHTMLAttributes<HTMLInputElement>> = ({
   const switchComponent = (
     <SwitchContainer>
       {!switchOnly && (
-        <SwitchIndicator on={!checked}>
+        <SwitchIndicator active={!checked}>
           {indicatorLabels && indicatorLabels.length > 1
             ? indicatorLabels[1]
             : "OFF"}
@@ -156,7 +156,7 @@ const Switch: FC<SwitchProps & React.InputHTMLAttributes<HTMLInputElement>> = ({
         <span className={"switchRail"} />
       </SwitchItem>
       {!switchOnly && (
-        <SwitchIndicator on={!!checked}>
+        <SwitchIndicator active={!!checked}>
           {indicatorLabels ? indicatorLabels[0] : "ON"}
         </SwitchIndicator>
       )}

src/components/Switch/Switch.types.ts

@@ -32,7 +32,7 @@ export interface MainSwitchProps {
 }
 
 export interface IndicatorProps {
-  on: boolean;
+  active: boolean;
   children: React.ReactNode;
 }
 

src/global/global.types.ts

@@ -15,7 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { lightColors } from "./themes";
 
 export interface ButtonThemeProps {
   border: string;
@@ -376,6 +375,7 @@ export interface SelectorType {
   label: string;
   value: string;
   icon?: React.ReactNode;
+  indicator?: React.ReactNode;
   extraValue?: any;
   disabled?: boolean;
 }