Merge pull request #2343 from innovaccer/develop

Develop
innovaccer · Sep 11, 2024 · 2a13358 · 2a13358
2 parents d05dde9 + f4a1218
commit 2a13358
Show file tree

Hide file tree

Showing 56 changed files with 2,289 additions and 77 deletions.
diff --git a/core/components/atoms/button/Button.tsx b/core/components/atoms/button/Button.tsx
@@ -137,6 +137,7 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
   const iconClass = classNames({
     ['Button-icon']: true,
     [`Button-icon--${iconAlign}`]: children && iconAlign,
+    [`Button-regularIcon--${iconAlign}`]: children && iconAlign && size === 'regular' && !expanded,
   });
 
   return (
@@ -162,7 +163,7 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
       ) : (
         <>
           {icon && (
-            <div className={iconClass}>
+            <div className={iconClass} data-test="DesignSystem-Button--Icon-Wrapper">
               <Icon
                 data-test="DesignSystem-Button--Icon"
                 name={icon}

diff --git a/core/components/atoms/button/__tests__/Button.test.tsx b/core/components/atoms/button/__tests__/Button.test.tsx
@@ -258,3 +258,37 @@ describe('Button component with Tooltip', () => {
     expect(TooltipComponent).not.toBeInTheDocument();
   });
 });
+
+describe('Button component with Icon', () => {
+  it('check for icon classes with align:left', () => {
+    const { getByTestId } = render(
+      <Button appearance="basic" icon="keyboard_arrow_right" tooltip="Next in rank">
+        Click Me
+      </Button>
+    );
+
+    expect(getByTestId('DesignSystem-Button--Icon-Wrapper')).toHaveClass('Button-regularIcon--left');
+  });
+
+  it('check for icon classes with align:right', () => {
+    const { getByTestId } = render(
+      <Button appearance="basic" icon="keyboard_arrow_right" iconAlign="right" tooltip="Next in rank">
+        Click Me
+      </Button>
+    );
+
+    expect(getByTestId('DesignSystem-Button--Icon-Wrapper')).toHaveClass('Button-regularIcon--right');
+  });
+
+  it('check for icon classes with align:left without children', () => {
+    const { getByTestId } = render(<Button appearance="basic" icon="keyboard_arrow_right" tooltip="Next in rank" />);
+
+    expect(getByTestId('DesignSystem-Button--Icon-Wrapper')).not.toHaveClass('Button-regularIcon--left');
+  });
+
+  it('check for icon classes with align:right without children', () => {
+    const { getByTestId } = render(<Button appearance="basic" icon="keyboard_arrow_right" tooltip="Next in rank" />);
+
+    expect(getByTestId('DesignSystem-Button--Icon-Wrapper')).not.toHaveClass('Button-regularIcon--right');
+  });
+});
diff --git a/core/components/atoms/button/__tests__/__snapshots__/Button.test.tsx.snap b/core/components/atoms/button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -504,6 +504,7 @@ exports[`Button component
     >
       <div
         class="Button-icon Button-icon--left"
+        data-test="DesignSystem-Button--Icon-Wrapper"
       >
         <i
           class="material-symbols material-symbols-rounded Icon"
@@ -536,6 +537,7 @@ exports[`Button component
     >
       <div
         class="Button-icon Button-icon--right"
+        data-test="DesignSystem-Button--Icon-Wrapper"
       >
         <i
           class="material-symbols material-symbols-rounded Icon"
@@ -568,6 +570,7 @@ exports[`Button component
     >
       <div
         class="Button-icon Button-icon--left"
+        data-test="DesignSystem-Button--Icon-Wrapper"
       >
         <i
           class="material-symbols material-symbols-rounded Icon"
@@ -619,7 +622,8 @@ exports[`Button component
       tabindex="0"
     >
       <div
-        class="Button-icon Button-icon--left"
+        class="Button-icon Button-icon--left Button-regularIcon--left"
+        data-test="DesignSystem-Button--Icon-Wrapper"
       >
         <i
           class="material-symbols material-symbols-rounded Icon"
@@ -651,7 +655,8 @@ exports[`Button component
       tabindex="0"
     >
       <div
-        class="Button-icon Button-icon--right"
+        class="Button-icon Button-icon--right Button-regularIcon--right"
+        data-test="DesignSystem-Button--Icon-Wrapper"
       >
         <i
           class="material-symbols material-symbols-rounded Icon"
@@ -683,7 +688,8 @@ exports[`Button component
       tabindex="0"
     >
       <div
-        class="Button-icon Button-icon--left"
+        class="Button-icon Button-icon--left Button-regularIcon--left"
+        data-test="DesignSystem-Button--Icon-Wrapper"
       >
         <i
           class="material-symbols material-symbols-rounded Icon"
@@ -736,6 +742,7 @@ exports[`Button component
     >
       <div
         class="Button-icon Button-icon--left"
+        data-test="DesignSystem-Button--Icon-Wrapper"
       >
         <i
           class="material-symbols material-symbols-rounded Icon"
@@ -768,6 +775,7 @@ exports[`Button component
     >
       <div
         class="Button-icon Button-icon--right"
+        data-test="DesignSystem-Button--Icon-Wrapper"
       >
         <i
           class="material-symbols material-symbols-rounded Icon"
@@ -800,6 +808,7 @@ exports[`Button component
     >
       <div
         class="Button-icon Button-icon--left"
+        data-test="DesignSystem-Button--Icon-Wrapper"
       >
         <i
           class="material-symbols material-symbols-rounded Icon"

diff --git a/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap b/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap
@@ -35,6 +35,7 @@ exports[`MetricInput component
         >
           <div
             class="Button-icon"
+            data-test="DesignSystem-Button--Icon-Wrapper"
           >
             <i
               class="material-symbols material-symbols-rounded Icon"
@@ -54,6 +55,7 @@ exports[`MetricInput component
         >
           <div
             class="Button-icon"
+            data-test="DesignSystem-Button--Icon-Wrapper"
           >
             <i
               class="material-symbols material-symbols-rounded Icon"
@@ -106,6 +108,7 @@ exports[`MetricInput component
         >
           <div
             class="Button-icon"
+            data-test="DesignSystem-Button--Icon-Wrapper"
           >
             <i
               class="material-symbols material-symbols-rounded Icon"
@@ -125,6 +128,7 @@ exports[`MetricInput component
         >
           <div
             class="Button-icon"
+            data-test="DesignSystem-Button--Icon-Wrapper"
           >
             <i
               class="material-symbols material-symbols-rounded Icon"
@@ -182,6 +186,7 @@ exports[`MetricInput component
         >
           <div
             class="Button-icon"
+            data-test="DesignSystem-Button--Icon-Wrapper"
           >
             <i
               class="material-symbols material-symbols-rounded Icon"
@@ -201,6 +206,7 @@ exports[`MetricInput component
         >
           <div
             class="Button-icon"
+            data-test="DesignSystem-Button--Icon-Wrapper"
           >
             <i
               class="material-symbols material-symbols-rounded Icon"
@@ -258,6 +264,7 @@ exports[`MetricInput component
         >
           <div
             class="Button-icon"
+            data-test="DesignSystem-Button--Icon-Wrapper"
           >
             <i
               class="material-symbols material-symbols-rounded Icon"
@@ -277,6 +284,7 @@ exports[`MetricInput component
         >
           <div
             class="Button-icon"
+            data-test="DesignSystem-Button--Icon-Wrapper"
           >
             <i
               class="material-symbols material-symbols-rounded Icon"

diff --git a/core/components/atoms/popperWrapper/PopperWrapper.tsx b/core/components/atoms/popperWrapper/PopperWrapper.tsx
@@ -322,13 +322,13 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
     const shouldPopoverClose = (clicked: HTMLElement): boolean => {
       const popover = this.popupRef.current as HTMLElement;
       const container = document.body;
-      const popoverIndex = parseInt(window.getComputedStyle(popover).zIndex);
+      const popoverIndex = popover && parseInt(window.getComputedStyle(popover).zIndex);
       let clickInsideLayer = false;
       let shouldClose = false;
 
       const openedLayers = container.querySelectorAll('[data-opened="true"]');
       openedLayers.forEach((layer) => {
-        if (layer.contains(clicked)) {
+        if (layer && layer.contains(clicked)) {
           clickInsideLayer = true;
           const clickedIndex = parseInt(window.getComputedStyle(layer).zIndex);
           if (popoverIndex > clickedIndex) {

diff --git a/core/components/molecules/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/core/components/molecules/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -58,6 +58,7 @@ exports[`Dialog component
               >
                 <div
                   class="Button-icon"
+                  data-test="DesignSystem-Button--Icon-Wrapper"
                 >
                   <i
                     class="material-symbols material-symbols-rounded Icon"
@@ -197,6 +198,7 @@ exports[`Dialog component
               >
                 <div
                   class="Button-icon"
+                  data-test="DesignSystem-Button--Icon-Wrapper"
                 >
                   <i
                     class="material-symbols material-symbols-rounded Icon"
@@ -334,6 +336,7 @@ exports[`Dialog component
               >
                 <div
                   class="Button-icon"
+                  data-test="DesignSystem-Button--Icon-Wrapper"
                 >
                   <i
                     class="material-symbols material-symbols-rounded Icon"
@@ -472,6 +475,7 @@ exports[`Dialog component
               >
                 <div
                   class="Button-icon"
+                  data-test="DesignSystem-Button--Icon-Wrapper"
                 >
                   <i
                     class="material-symbols material-symbols-rounded Icon"
@@ -610,6 +614,7 @@ exports[`Dialog component
               >
                 <div
                   class="Button-icon"
+                  data-test="DesignSystem-Button--Icon-Wrapper"
                 >
                   <i
                     class="material-symbols material-symbols-rounded Icon"
@@ -748,6 +753,7 @@ exports[`Dialog component
               >
                 <div
                   class="Button-icon"
+                  data-test="DesignSystem-Button--Icon-Wrapper"
                 >
                   <i
                     class="material-symbols material-symbols-rounded Icon"
@@ -886,6 +892,7 @@ exports[`Dialog component
               >
                 <div
                   class="Button-icon"
+                  data-test="DesignSystem-Button--Icon-Wrapper"
                 >
                   <i
                     class="material-symbols material-symbols-rounded Icon"
@@ -1024,6 +1031,7 @@ exports[`Dialog component
               >
                 <div
                   class="Button-icon"
+                  data-test="DesignSystem-Button--Icon-Wrapper"
                 >
                   <i
                     class="material-symbols material-symbols-rounded Icon"
@@ -1162,6 +1170,7 @@ exports[`Dialog component
               >
                 <div
                   class="Button-icon"
+                  data-test="DesignSystem-Button--Icon-Wrapper"
                 >
                   <i
                     class="material-symbols material-symbols-rounded Icon"
@@ -1300,6 +1309,7 @@ exports[`Dialog component
               >
                 <div
                   class="Button-icon"
+                  data-test="DesignSystem-Button--Icon-Wrapper"
                 >
                   <i
                     class="material-symbols material-symbols-rounded Icon"
@@ -1438,6 +1448,7 @@ exports[`Dialog component
               >
                 <div
                   class="Button-icon"
+                  data-test="DesignSystem-Button--Icon-Wrapper"
                 >
                   <i
                     class="material-symbols material-symbols-rounded Icon"
@@ -1576,6 +1587,7 @@ exports[`Dialog component
               >
                 <div
                   class="Button-icon"
+                  data-test="DesignSystem-Button--Icon-Wrapper"
                 >
                   <i
                     class="material-symbols material-symbols-rounded Icon"
@@ -1714,6 +1726,7 @@ exports[`Dialog component
               >
                 <div
                   class="Button-icon"
+                  data-test="DesignSystem-Button--Icon-Wrapper"
                 >
                   <i
                     class="material-symbols material-symbols-rounded Icon"

diff --git a/core/components/molecules/fileUploader/__tests__/__snapshots__/FileUploader.test.tsx.snap b/core/components/molecules/fileUploader/__tests__/__snapshots__/FileUploader.test.tsx.snap
@@ -36,7 +36,8 @@ exports[`FileUploader component
         type="button"
       >
         <div
-          class="Button-icon Button-icon--left"
+          class="Button-icon Button-icon--left Button-regularIcon--left"
+          data-test="DesignSystem-Button--Icon-Wrapper"
         >
           <i
             class="material-symbols material-symbols-rounded Icon"
@@ -94,7 +95,8 @@ exports[`FileUploader component prop:accept snapshot
         type="button"
       >
         <div
-          class="Button-icon Button-icon--left"
+          class="Button-icon Button-icon--left Button-regularIcon--left"
+          data-test="DesignSystem-Button--Icon-Wrapper"
         >
           <i
             class="material-symbols material-symbols-rounded Icon"
@@ -153,7 +155,8 @@ exports[`FileUploader component prop:disabled snapshot
         type="button"
       >
         <div
-          class="Button-icon Button-icon--left"
+          class="Button-icon Button-icon--left Button-regularIcon--left"
+          data-test="DesignSystem-Button--Icon-Wrapper"
         >
           <i
             class="material-symbols material-symbols-rounded Icon"
@@ -212,7 +215,8 @@ exports[`FileUploader component prop:disabled snapshot
         type="button"
       >
         <div
-          class="Button-icon Button-icon--left"
+          class="Button-icon Button-icon--left Button-regularIcon--left"
+          data-test="DesignSystem-Button--Icon-Wrapper"
         >
           <i
             class="material-symbols material-symbols-rounded Icon"
@@ -271,7 +275,8 @@ exports[`FileUploader component prop:multiple snapshot
         type="button"
       >
         <div
-          class="Button-icon Button-icon--left"
+          class="Button-icon Button-icon--left Button-regularIcon--left"
+          data-test="DesignSystem-Button--Icon-Wrapper"
         >
           <i
             class="material-symbols material-symbols-rounded Icon"
@@ -329,7 +334,8 @@ exports[`FileUploader component prop:multiple snapshot
         type="button"
       >
         <div
-          class="Button-icon Button-icon--left"
+          class="Button-icon Button-icon--left Button-regularIcon--left"
+          data-test="DesignSystem-Button--Icon-Wrapper"
         >
           <i
             class="material-symbols material-symbols-rounded Icon"