Merge pull request #1871 from dxc-technology/jialecl/actionsCell-icon

Icon implemented in the actions cell

Author: kukoc

lib/src/action-icon/ActionIcon.stories.tsx

@@ -19,15 +19,15 @@ export const Chromatic = () => (
   <>
     <Title title="Default" theme="light" level={2} />
     <ExampleContainer>
-      <DxcActionIcon icon={"https://www.freepnglogos.com/uploads/facebook-logo-design-1.png"} title="Favourite" />
+      <DxcActionIcon icon="favorite" title="Favourite" />
     </ExampleContainer>
     <Title title="Disabled" theme="light" level={2} />
     <ExampleContainer>
-      <DxcActionIcon icon={iconSVG} title="Favourite" disabled />
+      <DxcActionIcon icon="favorite" title="Favourite" disabled />
     </ExampleContainer>
     <Title title="Hover" theme="light" level={2} />
     <ExampleContainer pseudoState="pseudo-hover">
-      <DxcActionIcon icon={iconSVG} title="Favourite" />
+      <DxcActionIcon icon="filled_favorite" title="Favourite" />
     </ExampleContainer>
     <Title title="Focus" theme="light" level={2} />
     <ExampleContainer pseudoState="pseudo-focus">

lib/src/action-icon/ActionIcon.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ActionIconPropsTypes, { RefType } from "./types";
 import styled from "styled-components";
 import CoreTokens from "../common/coreTokens";
+import DxcIcon from "../icon/Icon";
 
 const DxcActionIcon = React.forwardRef<RefType, ActionIconPropsTypes>(
   ({ disabled = false, title, icon, onClick, tabIndex }, ref): JSX.Element => {
@@ -18,7 +19,7 @@ const DxcActionIcon = React.forwardRef<RefType, ActionIconPropsTypes>(
         type="button"
         ref={ref}
       >
-        {typeof icon === "string" ? <img src={icon} /> : icon}
+        {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
       </ActionIcon>
     );
   }
@@ -33,6 +34,7 @@ const ActionIcon = styled.button`
   border-radius: 2px;
   width: 24px;
   height: 24px;
+  font-size: 16px;
   padding: 0px;
   ${(props) => (props.disabled ? `cursor: not-allowed;` : `cursor: pointer;`)}
 
@@ -65,7 +67,7 @@ const ActionIcon = styled.button`
       }
     `}
 
-  img, svg {
+  svg {
     width: 16px;
     height: 16px;
   }

lib/src/action-icon/types.ts

@@ -10,7 +10,7 @@ type Props = {
    */
   title: string;
   /**
-   * Element or path used as the icon that will be placed next to the label.
+   * Material Symbol name or SVG element as the icon that will be placed next to the label.
    */
   icon: string | SVG;
   /**

lib/src/resultset-table/ResultsetTable.stories.tsx

@@ -62,7 +62,7 @@ const actions = [
     ],
   },
   {
-    icon: "https://www.freepnglogos.com/uploads/facebook-logo-design-1.png",
+    icon: "filled_edit",
     title: "icon",
     onClick: () => {},
   },

lib/src/table/Table.stories.tsx

@@ -28,13 +28,6 @@ const advancedTheme = {
   },
 };
 
-const icon1 = (
-  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
-    <path d="M0 0h24v24H0V0z" fill="none" />
-    <path d="M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z" />
-  </svg>
-);
-
 const actions = [
   {
     title: "icon",
@@ -98,12 +91,12 @@ const actions = [
     ],
   },
   {
-    icon: icon1,
+    icon: "filled_edit",
     title: "icon",
     onClick: () => {},
   },
   {
-    icon: icon1,
+    icon: "filled_delete",
     title: "icon",
     onClick: () => {},
     disabled: true,

lib/src/table/Table.tsx

@@ -11,12 +11,6 @@ import DxcFlex from "../flex/Flex";
 import { HalstackProvider } from "../HalstackContext";
 import DxcActionIcon from "../action-icon/ActionIcon";
 
-const moreVertIcon = (
-  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor">
-    <path d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z" />
-  </svg>
-);
-
 const overwriteTheme = (theme: DeepPartial<AdvancedTheme>) => {
   const newTheme = DropdownTheme;
   newTheme.dropdown.buttonBackgroundColor = theme.table.actionBackgroundColor;
@@ -55,7 +49,7 @@ export const DxcActionsCell = ({ actions }: ActionCellsPropsType): JSX.Element =
             options={actionDropdown.options}
             onSelectOption={actionDropdown.onClick}
             disabled={actionDropdown.disabled}
-            icon={moreVertIcon}
+            icon="more_vert"
             tabIndex={actionDropdown.tabIndex}
             caretHidden
           ></DxcDropdown>

lib/src/table/types.ts

@@ -1,3 +1,4 @@
+import { Option } from "../dropdown/types";
 type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
 type Margin = {
   top?: Space;
@@ -7,22 +8,6 @@ type Margin = {
 };
 
 type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-type Option = {
-  /**
-   * Option display value.
-   */
-  label?: string;
-  /**
-   * Element or path used as the icon that will be placed next to the
-   * option label.
-   */
-  icon?: string | SVG;
-  /**
-   * Option inner value.
-   */
-  value: string;
-};
-
 export type DeepPartial<T> = {
   [P in keyof T]?: Partial<T[P]>;
 };

lib/src/text-input/TextInput.stories.tsx

@@ -35,7 +35,7 @@ const actionLargeIconSVG = {
 
 const actionLargeIconURL = {
   onClick: () => {},
-  icon: "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png",
+  icon: "search",
 };
 
 const country = ["Afghanistan"];