@innovaccer/design-system 2.7.0 → 2.9.0-0

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 } from '@/index';
+import { Row, Column, Button, Tooltip } from '@/index';
 import { ColumnProps } from '@/index.type';
 import { getWrapperElement, getUpdatedZIndex, closeOnEscapeKeypress } from '@/utils/overlayHelper';
 import OverlayManager from '@/utils/OverlayManager';
@@ -200,7 +200,6 @@ class FullscreenModal extends React.Component<FullscreenModalProps, ModalState>
     const classes = classNames(
       {
         FullscreenModal: true,
-        'FullscreenModal--open': open,
         'FullscreenModal-animation--open': animate,
         'FullscreenModal-animation--close': !animate,
       },
@@ -228,7 +227,7 @@ class FullscreenModal extends React.Component<FullscreenModalProps, ModalState>
       },
     };
 
-    const ModalContainer = (
+    const ModalContainer = open ? (
       <div
         data-test="DesignSystem-FullscreenModalContainer"
         className={ContainerClass}
@@ -245,14 +244,16 @@ class FullscreenModal extends React.Component<FullscreenModalProps, ModalState>
                   {!!header && header}
                 </Column>
                 <Column className="flex-grow-0">
-                  <Button
-                    icon="close"
-                    appearance="transparent"
-                    data-test="DesignSystem-FullscreenModal--CloseButton"
-                    onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                      if (onClose) onClose(event, 'IconClick');
-                    }}
-                  />
+                  <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>
                 </Column>
               </Row>
               <OverlayBody data-test="DesignSystem-FullscreenModal--Body" className="FullscreenModal-body">
@@ -272,7 +273,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,21 +178,18 @@ 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 { getByTestId } = render(<FullscreenModal open={false} />);
-
-    expect(getByTestId('DesignSystem-FullscreenModal')).toHaveClass('FullscreenModal-animation--close');
+    const { container } = render(<FullscreenModal open={false} />);
+    expect(container.firstChild).toBeNull();
   });
 
   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');

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

@@ -13,7 +13,7 @@ exports[`FullscreenModal component
       data-test="DesignSystem-FullscreenModalContainer"
     >
       <div
-        class="FullscreenModal FullscreenModal--open FullscreenModal-animation--open"
+        class="FullscreenModal FullscreenModal-animation--open"
         data-test="DesignSystem-FullscreenModal"
       >
         <div
@@ -45,24 +45,29 @@ exports[`FullscreenModal component
                 class="Col flex-grow-0"
                 data-test="DesignSystem-Column"
               >
-                <button
-                  class="Button Button--regular Button--regularSquare Button--transparent"
-                  data-test="DesignSystem-FullscreenModal--CloseButton"
-                  tabindex="0"
+                <style />
+                <div
+                  class="OutsideClick PopperWrapper-trigger"
                 >
-                  <div
-                    class="Button-icon"
+                  <button
+                    class="Button Button--regular Button--regularSquare Button--transparent"
+                    data-test="DesignSystem-FullscreenModal--CloseButton"
+                    tabindex="0"
                   >
-                    <i
-                      class="material-icons material-icons-round Icon Icon--default"
-                      data-test="DesignSystem-Button--Icon"
-                      role="button"
-                      style="font-size: 16px; width: 16px;"
+                    <div
+                      class="Button-icon"
                     >
-                      close_round
-                    </i>
-                  </div>
-                </button>
+                      <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>
               </div>
             </div>
             <div
@@ -93,7 +98,7 @@ exports[`FullscreenModal component
       data-test="DesignSystem-FullscreenModalContainer"
     >
       <div
-        class="FullscreenModal FullscreenModal--open FullscreenModal-animation--open"
+        class="FullscreenModal FullscreenModal-animation--open"
         data-test="DesignSystem-FullscreenModal"
       >
         <div
@@ -123,24 +128,29 @@ exports[`FullscreenModal component
                 class="Col flex-grow-0"
                 data-test="DesignSystem-Column"
               >
-                <button
-                  class="Button Button--regular Button--regularSquare Button--transparent"
-                  data-test="DesignSystem-FullscreenModal--CloseButton"
-                  tabindex="0"
+                <style />
+                <div
+                  class="OutsideClick PopperWrapper-trigger"
                 >
-                  <div
-                    class="Button-icon"
+                  <button
+                    class="Button Button--regular Button--regularSquare Button--transparent"
+                    data-test="DesignSystem-FullscreenModal--CloseButton"
+                    tabindex="0"
                   >
-                    <i
-                      class="material-icons material-icons-round Icon Icon--default"
-                      data-test="DesignSystem-Button--Icon"
-                      role="button"
-                      style="font-size: 16px; width: 16px;"
+                    <div
+                      class="Button-icon"
                     >
-                      close_round
-                    </i>
-                  </div>
-                </button>
+                      <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>
               </div>
             </div>
             <div
@@ -190,7 +200,7 @@ exports[`FullscreenModal component
       data-test="DesignSystem-FullscreenModalContainer"
     >
       <div
-        class="FullscreenModal FullscreenModal--open FullscreenModal-animation--open"
+        class="FullscreenModal FullscreenModal-animation--open"
         data-test="DesignSystem-FullscreenModal"
       >
         <div
@@ -235,24 +245,29 @@ exports[`FullscreenModal component
                 class="Col flex-grow-0"
                 data-test="DesignSystem-Column"
               >
-                <button
-                  class="Button Button--regular Button--regularSquare Button--transparent"
-                  data-test="DesignSystem-FullscreenModal--CloseButton"
-                  tabindex="0"
+                <style />
+                <div
+                  class="OutsideClick PopperWrapper-trigger"
                 >
-                  <div
-                    class="Button-icon"
+                  <button
+                    class="Button Button--regular Button--regularSquare Button--transparent"
+                    data-test="DesignSystem-FullscreenModal--CloseButton"
+                    tabindex="0"
                   >
-                    <i
-                      class="material-icons material-icons-round Icon Icon--default"
-                      data-test="DesignSystem-Button--Icon"
-                      role="button"
-                      style="font-size: 16px; width: 16px;"
+                    <div
+                      class="Button-icon"
                     >
-                      close_round
-                    </i>
-                  </div>
-                </button>
+                      <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>
               </div>
             </div>
             <div
@@ -288,7 +303,7 @@ exports[`FullscreenModal component
       data-test="DesignSystem-FullscreenModalContainer"
     >
       <div
-        class="FullscreenModal FullscreenModal--open FullscreenModal-animation--open"
+        class="FullscreenModal FullscreenModal-animation--open"
         data-test="DesignSystem-FullscreenModal"
       >
         <div
@@ -320,24 +335,29 @@ exports[`FullscreenModal component
                 class="Col flex-grow-0"
                 data-test="DesignSystem-Column"
               >
-                <button
-                  class="Button Button--regular Button--regularSquare Button--transparent"
-                  data-test="DesignSystem-FullscreenModal--CloseButton"
-                  tabindex="0"
+                <style />
+                <div
+                  class="OutsideClick PopperWrapper-trigger"
                 >
-                  <div
-                    class="Button-icon"
+                  <button
+                    class="Button Button--regular Button--regularSquare Button--transparent"
+                    data-test="DesignSystem-FullscreenModal--CloseButton"
+                    tabindex="0"
                   >
-                    <i
-                      class="material-icons material-icons-round Icon Icon--default"
-                      data-test="DesignSystem-Button--Icon"
-                      role="button"
-                      style="font-size: 16px; width: 16px;"
+                    <div
+                      class="Button-icon"
                     >
-                      close_round
-                    </i>
-                  </div>
-                </button>
+                      <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>
               </div>
             </div>
             <div
@@ -367,7 +387,7 @@ exports[`FullscreenModal component
       data-test="DesignSystem-FullscreenModalContainer"
     >
       <div
-        class="FullscreenModal FullscreenModal--open FullscreenModal-animation--open"
+        class="FullscreenModal FullscreenModal-animation--open"
         data-test="DesignSystem-FullscreenModal"
       >
         <div
@@ -397,24 +417,29 @@ exports[`FullscreenModal component
                 class="Col flex-grow-0"
                 data-test="DesignSystem-Column"
               >
-                <button
-                  class="Button Button--regular Button--regularSquare Button--transparent"
-                  data-test="DesignSystem-FullscreenModal--CloseButton"
-                  tabindex="0"
+                <style />
+                <div
+                  class="OutsideClick PopperWrapper-trigger"
                 >
-                  <div
-                    class="Button-icon"
+                  <button
+                    class="Button Button--regular Button--regularSquare Button--transparent"
+                    data-test="DesignSystem-FullscreenModal--CloseButton"
+                    tabindex="0"
                   >
-                    <i
-                      class="material-icons material-icons-round Icon Icon--default"
-                      data-test="DesignSystem-Button--Icon"
-                      role="button"
-                      style="font-size: 16px; width: 16px;"
+                    <div
+                      class="Button-icon"
                     >
-                      close_round
-                    </i>
-                  </div>
-                </button>
+                      <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>
               </div>
             </div>
             <div
@@ -464,7 +489,7 @@ exports[`FullscreenModal component
       data-test="DesignSystem-FullscreenModalContainer"
     >
       <div
-        class="FullscreenModal FullscreenModal--open FullscreenModal-animation--open"
+        class="FullscreenModal FullscreenModal-animation--open"
         data-test="DesignSystem-FullscreenModal"
       >
         <div
@@ -509,24 +534,29 @@ exports[`FullscreenModal component
                 class="Col flex-grow-0"
                 data-test="DesignSystem-Column"
               >
-                <button
-                  class="Button Button--regular Button--regularSquare Button--transparent"
-                  data-test="DesignSystem-FullscreenModal--CloseButton"
-                  tabindex="0"
+                <style />
+                <div
+                  class="OutsideClick PopperWrapper-trigger"
                 >
-                  <div
-                    class="Button-icon"
+                  <button
+                    class="Button Button--regular Button--regularSquare Button--transparent"
+                    data-test="DesignSystem-FullscreenModal--CloseButton"
+                    tabindex="0"
                   >
-                    <i
-                      class="material-icons material-icons-round Icon Icon--default"
-                      data-test="DesignSystem-Button--Icon"
-                      role="button"
-                      style="font-size: 16px; width: 16px;"
+                    <div
+                      class="Button-icon"
                     >
-                      close_round
-                    </i>
-                  </div>
-                </button>
+                      <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>
               </div>
             </div>
             <div

package/core/components/molecules/modal/Modal.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, Backdrop, OutsideClick, Button } from '@/index';
+import { Row, Column, Backdrop, OutsideClick, Button, Tooltip } from '@/index';
 import { ColumnProps } from '@/index.type';
 import { getWrapperElement, getUpdatedZIndex, closeOnEscapeKeypress } from '@/utils/overlayHelper';
 import OverlayManager from '@/utils/OverlayManager';
@@ -296,14 +296,16 @@ class Modal extends React.Component<ModalProps, ModalState> {
                 {!!header && header}
               </Column>
               <Column className="flex-grow-0">
-                <Button
-                  icon="close"
-                  appearance="transparent"
-                  data-test="DesignSystem-Modal--CloseButton"
-                  onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                    if (onClose) onClose(event, 'IconClick');
-                  }}
-                />
+                <Tooltip tooltip="Close" position="top">
+                  <Button
+                    icon="close"
+                    appearance="transparent"
+                    data-test="DesignSystem-Modal--CloseButton"
+                    onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                      if (onClose) onClose(event, 'IconClick');
+                    }}
+                  />
+                </Tooltip>
               </Column>
             </div>
           )}