Merge pull request #1869 from dxc-technology/jialecl/dropdown-icon

Mil4n0r · web-flow · commit 04501659af93 · 2024-03-08T11:02:19.000+01:00
Icon implemented in the dropdown
diff --git a/lib/src/dropdown/Dropdown.stories.tsx b/lib/src/dropdown/Dropdown.stories.tsx
@@ -15,11 +15,6 @@ export default {
   component: DxcDropdown,
 };
 
-const hamburguerIcon = (
-  <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20">
-    <path d="M3 14.5V13h14v1.5Zm0-3.75v-1.5h14v1.5ZM3 7V5.5h14V7Z" />
-  </svg>
-);
 const iconSVG = (
   <svg viewBox="0 0 24 24" height="24" width="24" fill="currentColor">
     <path d="M0 0h24v24H0z" fill="none" />
@@ -31,8 +26,7 @@ const iconSVGLarge = (
     <path d="M11 44q-1.2 0-2.1-.9Q8 42.2 8 41V15q0-1.2.9-2.1.9-.9 2.1-.9h5.5v-.5q0-3.15 2.175-5.325Q20.85 4 24 4q3.15 0 5.325 2.175Q31.5 8.35 31.5 11.5v.5H37q1.2 0 2.1.9.9.9.9 2.1v26q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h26V15h-5.5v4.5q0 .65-.425 1.075Q30.65 21 30 21q-.65 0-1.075-.425-.425-.425-.425-1.075V15h-9v4.5q0 .65-.425 1.075Q18.65 21 18 21q-.65 0-1.075-.425-.425-.425-.425-1.075V15H11v26Zm8.5-29h9v-.5q0-1.9-1.3-3.2Q25.9 7 24 7q-1.9 0-3.2 1.3-1.3 1.3-1.3 3.2ZM11 41V15v26Z" />
   </svg>
 );
-const iconUrl = "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png";
-const icons = [iconSVG, iconSVGLarge, iconUrl];
+const icons = [iconSVG, iconSVGLarge, "nutrition"];
 
 const defaultOptions: Option[] = [
   {
@@ -86,7 +80,7 @@ const optionWithIcon: Option[] = [
   {
     value: "1",
     label: "Ebay",
-    icon: iconUrl,
+    icon: "shopping_cart",
   },
 ];
 
@@ -136,7 +130,7 @@ const Dropdown = () => (
         label="Icon after"
         options={options}
         onSelectOption={(value) => {}}
-        icon="https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png"
+        icon="shopping_cart"
         iconPosition="after"
       />
     </ExampleContainer>
@@ -146,20 +140,15 @@ const Dropdown = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Only icon without caret" theme="light" level={4} />
-      <DxcDropdown options={options} onSelectOption={(value) => {}} icon={hamburguerIcon} caretHidden />
+      <DxcDropdown options={options} onSelectOption={(value) => {}} icon="menu" caretHidden />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large icon (SVG)" theme="light" level={4} />
       <DxcDropdown label="Large icon" options={options} onSelectOption={(value) => {}} icon={iconSVGLarge} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large icon (image)" theme="light" level={4} />
-      <DxcDropdown
-        label="Large icon"
-        options={options}
-        onSelectOption={(value) => {}}
-        icon="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/2048px-Hamburger_icon.svg.png"
-      />
+      <DxcDropdown label="Large icon" options={options} onSelectOption={(value) => {}} icon="menu" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled with icon" theme="light" level={4} />
diff --git a/lib/src/dropdown/Dropdown.tsx b/lib/src/dropdown/Dropdown.tsx
@@ -7,20 +7,7 @@ import useTheme from "../useTheme";
 import { v4 as uuidv4 } from "uuid";
 import * as Popover from "@radix-ui/react-popover";
 import DropdownMenu from "./DropdownMenu";
-
-const upArrowIcon = (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M7 14l5-5 5 5z" />
-    <path d="M0 0h24v24H0z" fill="none" />
-  </svg>
-);
-
-const downArrowIcon = (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-    <path d="M7 10l5 5 5-5z" />
-    <path d="M0 0h24v24H0z" fill="none" />
-  </svg>
-);
+import DxcIcon from "../icon/Icon";
 
 const useWidth = (target) => {
   const [width, setWidth] = useState(0);
@@ -199,12 +186,16 @@ const DxcDropdown = ({
                 {label && iconPosition === "after" && <DropdownTriggerLabel>{label}</DropdownTriggerLabel>}
                 {icon && (
                   <DropdownTriggerIcon disabled={disabled} role={typeof icon === "string" ? undefined : "img"}>
-                    {typeof icon === "string" ? <img src={icon} /> : icon}
+                    {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
                   </DropdownTriggerIcon>
                 )}
                 {label && iconPosition === "before" && <DropdownTriggerLabel>{label}</DropdownTriggerLabel>}
               </DropdownTriggerContent>
-              {!caretHidden && <CaretIcon disabled={disabled}>{isOpen ? upArrowIcon : downArrowIcon}</CaretIcon>}
+              {!caretHidden && (
+                <CaretIcon disabled={disabled}>
+                  <DxcIcon icon={isOpen ? "arrow_drop_up" : "arrow_drop_down"} />{" "}
+                </CaretIcon>
+              )}
             </DropdownTrigger>
           </Popover.Trigger>
           <Popover.Portal>
@@ -317,8 +308,8 @@ const DropdownTriggerLabel = styled.span`
 const DropdownTriggerIcon = styled.span<{ disabled: DropdownPropsType["disabled"] }>`
   display: flex;
   color: ${(props) => (props.disabled ? props.theme.disabledColor : props.theme.buttonIconColor)};
+  font-size: ${(props) => props.theme.buttonIconSize};
 
-  img,
   svg {
     width: ${(props) => props.theme.buttonIconSize};
     height: ${(props) => props.theme.buttonIconSize};
@@ -328,6 +319,7 @@ const DropdownTriggerIcon = styled.span<{ disabled: DropdownPropsType["disabled"
 const CaretIcon = styled.span<{ disabled: DropdownPropsType["disabled"] }>`
   display: flex;
   color: ${(props) => (props.disabled ? props.theme.disabledColor : props.theme.caretIconColor)};
+  font-size: ${(props) => props.theme.caretIconSize};
 
   svg {
     width: ${(props) => props.theme.caretIconSize};
diff --git a/lib/src/dropdown/DropdownMenuItem.tsx b/lib/src/dropdown/DropdownMenuItem.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { DropdownMenuItemProps } from "./types";
+import DxcIcon from "../icon/Icon";
 
 const DropdownMenuItem = ({
   id,
@@ -21,7 +22,7 @@ const DropdownMenuItem = ({
     {iconPosition === "after" && <DropdownMenuItemLabel>{option.label}</DropdownMenuItemLabel>}
     {option.icon && (
       <DropdownMenuItemIcon role={typeof option.icon === "string" ? undefined : "img"}>
-        {typeof option.icon === "string" ? <img src={option.icon} /> : option.icon}
+        {typeof option.icon === "string" ? <DxcIcon icon={option.icon} /> : option.icon}
       </DropdownMenuItemIcon>
     )}
     {iconPosition === "before" && <DropdownMenuItemLabel>{option.label}</DropdownMenuItemLabel>}
@@ -62,8 +63,8 @@ const DropdownMenuItemLabel = styled.span`
 const DropdownMenuItemIcon = styled.div`
   display: flex;
   color: ${(props) => props.theme.optionIconColor};
+  font-size: ${(props) => props.theme.optionIconSize};
 
-  img,
   svg {
     width: ${(props) => props.theme.optionIconSize};
     height: ${(props) => props.theme.optionIconSize};
diff --git a/lib/src/dropdown/types.ts b/lib/src/dropdown/types.ts
@@ -14,8 +14,7 @@ export type Option = {
    */
   label?: string;
   /**
-   * Element or path used as the icon that will be placed next to the
-   * option label.
+   * Material Symbol name or SVG element as the icon that will be placed next to the label.
    */
   icon?: string | SVG;
   /**
@@ -35,8 +34,7 @@ type Props = {
    */
   optionsIconPosition?: "before" | "after";
   /**
-   * Element or path used as the icon that will be placed next to the
-   * dropdown label.
+   * Material Symbol name or SVG element as the icon that will be placed next to the label.
    */
   icon?: string | SVG;
   /**
