Merge pull request #2001 from anuradha9712/fix-material-symbols

fix(icon): update mapping for outlined icon
innovaccer · Oct 13, 2023 · 85b4466 · 85b4466
2 parents 8845644 + f979c41
commit 85b4466
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 8 deletions.
diff --git a/core/components/atoms/icon/Icon.tsx b/core/components/atoms/icon/Icon.tsx
@@ -78,6 +78,46 @@ export interface IconProps extends BaseProps {
   tabIndex?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>['tabIndex'];
 }
 
+const iconTypeMapper: Record<string, string> = {
+  timelapse: 'outlined',
+  content_copy: 'outlined',
+  speed: 'outlined',
+  add_circle_outline: 'outlined',
+  turned_in_not: 'outlined',
+  important_devices: 'outlined',
+  thumb_down_off_alt: 'outlined',
+  alarm_on: 'outlined',
+  calendar_view_month: 'outlined',
+  aspect_ratio: 'outlined',
+  change_history: 'outlined',
+  arrow_circle_down: 'outlined',
+  card_membership: 'outlined',
+  query_builder: 'outlined',
+  copyright: 'outlined',
+  arrow_circle_up: 'outlined',
+  alarm: 'outlined',
+  work_outline: 'outlined',
+  bookmark_border: 'outlined',
+  delete_outline: 'outlined',
+  credit_card: 'outlined',
+  highlight_of: 'outlined',
+  check_circle_outline: 'outlined',
+  help_outline: 'outlined',
+  schedule: 'outlined',
+  radio_button_unchecked: 'outlined',
+  radio_button_checked: 'outlined',
+  delete: 'outlined',
+};
+
+/**
+ *
+ * <pre class="DocPage-codeBlock mx-6 mb-7">
+ *  Following Icons are mapped to **outlined** type by default:
+ *  <br />
+ *  timelapse,  content_copy,  speed,  add_circle_outline,  turned_in_not,  important_devices,  thumb_down_off_alt,  alarm_on,  calendar_view_month,  aspect_ratio,  change_history,  arrow_circle_down,  card_membership,  query_builder,  copyright,  arrow_circle_up,  alarm,  work_outline,  bookmark_border,  delete_outline,  credit_card,  highlight_of,  check_circle_outline, help_outline,  schedule,  radio_button_unchecked,  radio_button_checked,  delete
+ * </pre>
+ */
+
 export const Icon = (props: IconProps) => {
   const { appearance, className, name, size, children } = props;
   const accessibilityProps = useAccessibilityProps(props);
@@ -92,7 +132,7 @@ export const Icon = (props: IconProps) => {
     'two-tone': 'rounded',
   };
 
-  const type = (props.type && mapper[props.type]) || props.type;
+  const type = (props.type && mapper[props.type]) || props.type || (name && iconTypeMapper[name]) || 'rounded';
 
   const getIconAppearance = (iconColor: string) => {
     const x = iconColor.indexOf('_');
@@ -133,7 +173,6 @@ export const Icon = (props: IconProps) => {
 Icon.displayName = 'Icon';
 Icon.defaultProps = {
   size: 16,
-  type: 'rounded',
 };
 
 export default Icon;
diff --git a/core/components/molecules/stepper/__tests__/__snapshots__/Stepper.test.tsx.snap b/core/components/molecules/stepper/__tests__/__snapshots__/Stepper.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`Stepper component
       tabindex="0"
     >
       <i
-        class="material-icons material-icons-rounded Icon mr-3 my-4 Stepper-animate"
+        class="material-icons material-icons-outlined Icon mr-3 my-4 Stepper-animate"
         data-test="DesignSystem-Step--Icon"
         role="button"
         style="font-size: 16px; width: 16px;"
@@ -54,7 +54,7 @@ exports[`Stepper component
       tabindex="-1"
     >
       <i
-        class="material-icons material-icons-rounded Icon mr-3 my-4 Stepper-animate"
+        class="material-icons material-icons-outlined Icon mr-3 my-4 Stepper-animate"
         data-test="DesignSystem-Step--Icon"
         role="button"
         style="font-size: 16px; width: 16px;"
@@ -74,7 +74,7 @@ exports[`Stepper component
       tabindex="-1"
     >
       <i
-        class="material-icons material-icons-rounded Icon mr-3 my-4 Stepper-animate"
+        class="material-icons material-icons-outlined Icon mr-3 my-4 Stepper-animate"
         data-test="DesignSystem-Step--Icon"
         role="button"
         style="font-size: 16px; width: 16px;"

diff --git a/core/components/organisms/pageHeader/__tests__/__snapshots__/PageHeader.test.tsx.snap b/core/components/organisms/pageHeader/__tests__/__snapshots__/PageHeader.test.tsx.snap
@@ -1058,7 +1058,7 @@ exports[`Navigation component
                       tabindex="0"
                     >
                       <i
-                        class="material-icons material-icons-rounded Icon mr-3 my-4 Stepper-animate"
+                        class="material-icons material-icons-outlined Icon mr-3 my-4 Stepper-animate"
                         data-test="DesignSystem-Step--Icon"
                         role="button"
                         style="font-size: 16px; width: 16px;"
@@ -1078,7 +1078,7 @@ exports[`Navigation component
                       tabindex="-1"
                     >
                       <i
-                        class="material-icons material-icons-rounded Icon mr-3 my-4 Stepper-animate"
+                        class="material-icons material-icons-outlined Icon mr-3 my-4 Stepper-animate"
                         data-test="DesignSystem-Step--Icon"
                         role="button"
                         style="font-size: 16px; width: 16px;"
@@ -1098,7 +1098,7 @@ exports[`Navigation component
                       tabindex="-1"
                     >
                       <i
-                        class="material-icons material-icons-rounded Icon mr-3 my-4 Stepper-animate"
+                        class="material-icons material-icons-outlined Icon mr-3 my-4 Stepper-animate"
                         data-test="DesignSystem-Step--Icon"
                         role="button"
                         style="font-size: 16px; width: 16px;"