@innovaccer/design-system 2.9.1 → 3.0.0-2

package/core/components/molecules/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap

@@ -45,29 +45,24 @@ exports[`Dialog component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Modal--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Modal--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div
@@ -173,29 +168,24 @@ exports[`Dialog component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Modal--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Modal--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div
@@ -299,29 +289,24 @@ exports[`Dialog component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Modal--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Modal--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div
@@ -426,29 +411,24 @@ exports[`Dialog component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Modal--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Modal--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div
@@ -553,29 +533,24 @@ exports[`Dialog component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Modal--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Modal--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div
@@ -680,29 +655,24 @@ exports[`Dialog component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Modal--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Modal--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div
@@ -807,29 +777,24 @@ exports[`Dialog component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Modal--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Modal--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div
@@ -934,29 +899,24 @@ exports[`Dialog component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Modal--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Modal--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div
@@ -1061,29 +1021,24 @@ exports[`Dialog component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Modal--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Modal--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div
@@ -1188,29 +1143,24 @@ exports[`Dialog component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Modal--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Modal--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div
@@ -1315,29 +1265,24 @@ exports[`Dialog component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Modal--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Modal--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div
@@ -1442,29 +1387,24 @@ exports[`Dialog component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Modal--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Modal--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div
@@ -1569,29 +1509,24 @@ exports[`Dialog component
             class="Col flex-grow-0"
             data-test="DesignSystem-Column"
           >
-            <style />
-            <div
-              class="OutsideClick PopperWrapper-trigger"
+            <button
+              class="Button Button--regular Button--regularSquare Button--transparent"
+              data-test="DesignSystem-Modal--CloseButton"
+              tabindex="0"
             >
-              <button
-                class="Button Button--regular Button--regularSquare Button--transparent"
-                data-test="DesignSystem-Modal--CloseButton"
-                tabindex="0"
+              <div
+                class="Button-icon"
               >
-                <div
-                  class="Button-icon"
+                <i
+                  class="material-icons material-icons-round Icon Icon--default"
+                  data-test="DesignSystem-Button--Icon"
+                  role="button"
+                  style="font-size: 16px; width: 16px;"
                 >
-                  <i
-                    class="material-icons material-icons-round Icon Icon--default"
-                    data-test="DesignSystem-Button--Icon"
-                    role="button"
-                    style="font-size: 16px; width: 16px;"
-                  >
-                    close_round
-                  </i>
-                </div>
-              </button>
-            </div>
+                  close_round
+                </i>
+              </div>
+            </button>
           </div>
         </div>
         <div

package/core/components/molecules/fullscreenModal/FullscreenModal.tsx

@@ -5,7 +5,7 @@ import { BaseProps, extractBaseProps } from '@/utils/types';
 import { OverlayFooter } from '@/components/molecules/overlayFooter';
 import { OverlayHeader, OverlayHeaderProps } from '@/components/molecules/overlayHeader';
 import { OverlayBody } from '@/components/molecules/overlayBody';
-import { Row, Column, Button, Tooltip } from '@/index';
+import { Row, Column, Button } from '@/index';
 import { ColumnProps } from '@/index.type';
 import { getWrapperElement, getUpdatedZIndex, closeOnEscapeKeypress } from '@/utils/overlayHelper';
 import OverlayManager from '@/utils/OverlayManager';
@@ -200,6 +200,7 @@ class FullscreenModal extends React.Component<FullscreenModalProps, ModalState>
     const classes = classNames(
       {
         FullscreenModal: true,
+        'FullscreenModal--open': open,
         'FullscreenModal-animation--open': animate,
         'FullscreenModal-animation--close': !animate,
       },
@@ -227,7 +228,7 @@ class FullscreenModal extends React.Component<FullscreenModalProps, ModalState>
       },
     };
 
-    const ModalContainer = open ? (
+    const ModalContainer = (
       <div
         data-test="DesignSystem-FullscreenModalContainer"
         className={ContainerClass}
@@ -244,16 +245,14 @@ class FullscreenModal extends React.Component<FullscreenModalProps, ModalState>
                   {!!header && header}
                 </Column>
                 <Column className="flex-grow-0">
-                  <Tooltip tooltip="Close">
-                    <Button
-                      icon="close"
-                      appearance="transparent"
-                      data-test="DesignSystem-FullscreenModal--CloseButton"
-                      onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                        if (onClose) onClose(event, 'IconClick');
-                      }}
-                    />
-                  </Tooltip>
+                  <Button
+                    icon="close"
+                    appearance="transparent"
+                    data-test="DesignSystem-FullscreenModal--CloseButton"
+                    onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                      if (onClose) onClose(event, 'IconClick');
+                    }}
+                  />
                 </Column>
               </Row>
               <OverlayBody data-test="DesignSystem-FullscreenModal--Body" className="FullscreenModal-body">
@@ -273,7 +272,7 @@ class FullscreenModal extends React.Component<FullscreenModalProps, ModalState>
           </Row>
         </div>
       </div>
-    ) : null;
+    );
 
     const WrapperElement = ReactDOM.createPortal(ModalContainer, this.element);
 

package/core/components/molecules/fullscreenModal/__tests__/Fullscreen.test.tsx

@@ -178,18 +178,21 @@ describe('FullscreenModal component with prop: open', () => {
   it('renders FullscreenModal with open: true', () => {
     const { getByTestId } = render(<FullscreenModal open={true} />);
 
+    expect(getByTestId('DesignSystem-FullscreenModal')).toHaveClass('FullscreenModal--open');
     expect(getByTestId('DesignSystem-FullscreenModal')).toHaveClass('FullscreenModal-animation--open');
     expect(getByTestId('DesignSystem-FullscreenModalContainer')).toHaveClass('Overlay-container--open');
   });
 
   it('renders FullscreenModal with open: false', () => {
-    const { container } = render(<FullscreenModal open={false} />);
-    expect(container.firstChild).toBeNull();
+    const { getByTestId } = render(<FullscreenModal open={false} />);
+
+    expect(getByTestId('DesignSystem-FullscreenModal')).toHaveClass('FullscreenModal-animation--close');
   });
 
   it('renders FullscreenModal with toggle of open', () => {
     const { getByTestId, rerender } = render(<FullscreenModal open={true}>this is modal body</FullscreenModal>);
 
+    expect(getByTestId('DesignSystem-FullscreenModal')).toHaveClass('FullscreenModal--open');
     expect(getByTestId('DesignSystem-FullscreenModal')).toHaveClass('FullscreenModal-animation--open');
 
     const closeIcon = getByTestId('DesignSystem-FullscreenModal--CloseButton');