[Application-Base] Added prop to remove scroll from powerchart

packages/terra-application/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+ * Added `noScroll` prop to remove scroll in powerchart.
+
 ## 1.56.0-alpha.0 - (September 8, 2023)
 
 * Changed

packages/terra-application/src/application-base/ApplicationBase.jsx

@@ -5,6 +5,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import Base from 'terra-base';
 import ThemeProvider from 'terra-theme-provider';
 import { ActiveBreakpointProvider } from 'terra-breakpoints';
@@ -76,10 +77,16 @@ const propTypes = {
    * before continuing with the unload event, even if NavigationPrompts are present.
    */
   unloadPromptIsDisabled: PropTypes.bool,
+  /**
+   * @private
+   * When set to true scroll will be disabled. internal prop to be used by Mpages for terra-tabs in  Powerchart.
+   */
+  noScroll: PropTypes.bool,
+
 };
 
 const ApplicationBase = ({
-  locale, customTranslatedMessages, translationsLoadingPlaceholder, themeName, fitToParentIsDisabled, children, unloadPromptIsDisabled,
+  locale, customTranslatedMessages, translationsLoadingPlaceholder, themeName, fitToParentIsDisabled, children, unloadPromptIsDisabled, noScroll,
 }) => {
   const registeredPromptsRef = useRef();
 
@@ -135,8 +142,8 @@ const ApplicationBase = ({
                       registeredPromptsRef.current = registeredPrompts;
                     }}
                   >
-                    <ApplicationLoadingOverlayProvider>
-                      <ApplicationStatusOverlayProvider>
+                    <ApplicationLoadingOverlayProvider noScroll={noScroll}>
+                      <ApplicationStatusOverlayProvider noScroll={noScroll}>
                         <Suspense fallback={<ApplicationLoadingOverlay isOpen />}>
                           {children}
                         </Suspense>

packages/terra-application/src/application-loading-overlay/ApplicationLoadingOverlayProvider.jsx

@@ -22,9 +22,16 @@ const propTypes = {
    * ApplicationLoadingOverlayProvider.
    */
   scrollRefCallback: PropTypes.func,
+  /**
+   * @private
+   * Prop to not render scroll in  Powerchart.
+   */
+  noScroll: PropTypes.bool,
 };
 
-const ApplicationLoadingOverlayProvider = ({ children, scrollRefCallback, ...customProps }) => {
+const ApplicationLoadingOverlayProvider = ({
+  children, scrollRefCallback, noScroll, ...customProps
+}) => {
   const [registeredLoadingOverlays, setRegisteredLoadingOverlays] = React.useState({});
 
   const contextValue = useMemo(() => ({
@@ -69,6 +76,7 @@ const ApplicationLoadingOverlayProvider = ({ children, scrollRefCallback, ...cus
   );
 
   let className = cx('container');
+  const scrollClass = cx({ 'remove-scroll': noScroll });
   if (customProps.className) {
     className = [className, customProps.className].join(' ');
   }
@@ -79,7 +87,7 @@ const ApplicationLoadingOverlayProvider = ({ children, scrollRefCallback, ...cus
       className={className}
       overlay={overlay}
     >
-      <Scroll refCallback={scrollRefCallback}>
+      <Scroll className={scrollClass} refCallback={scrollRefCallback}>
         <ApplicationLoadingOverlayContext.Provider value={contextValue}>
           {children}
         </ApplicationLoadingOverlayContext.Provider>

packages/terra-application/src/application-loading-overlay/ApplicationLoadingOverlayProvider.module.scss

@@ -2,4 +2,8 @@
   .container {
     height: 100%;
   }
+
+  .remove-scroll {
+    overflow: visible;
+  }
 }

packages/terra-application/src/application-status-overlay/ApplicationStatusOverlayProvider.jsx

@@ -21,9 +21,16 @@ const propTypes = {
    * ApplicationStatusOverlayProvider.
    */
   scrollRefCallback: PropTypes.func,
+  /**
+   * @private
+   * Prop to not render scroll in  Powerchart.
+   */
+  noScroll: PropTypes.bool,
 };
 
-const ApplicationStatusOverlayProvider = ({ children, scrollRefCallback, ...customProps }) => {
+const ApplicationStatusOverlayProvider = ({
+  children, scrollRefCallback, noScroll, ...customProps
+}) => {
   const [registeredStatusOverlay, setRegisteredStatusOverlay] = React.useState({});
 
   const containerRef = React.useRef();
@@ -86,6 +93,7 @@ const ApplicationStatusOverlayProvider = ({ children, scrollRefCallback, ...cust
   }, [registeredStatusOverlayKeys]);
 
   let className = cx('container');
+  const scrollClass = cx({ 'remove-scroll': noScroll });
   if (customProps.className) {
     className = [className, customProps.className].join(' ');
   }
@@ -105,7 +113,7 @@ const ApplicationStatusOverlayProvider = ({ children, scrollRefCallback, ...cust
     <div {...customProps} className={className}>
       {statusView}
       <div data-status-overlay-container-content ref={containerRef} className={cx('container-content')}>
-        <Scroll refCallback={scrollRefCallback}>
+        <Scroll className={scrollClass} refCallback={scrollRefCallback}>
           <ApplicationStatusOverlayContext.Provider value={contextValue}>
             {children}
           </ApplicationStatusOverlayContext.Provider>

packages/terra-application/src/application-status-overlay/ApplicationStatusOverlayProvider.module.scss

@@ -23,4 +23,8 @@
     width: 100%;
     z-index: 1;
   }
+
+  .remove-scroll {
+    overflow: visible;
+  }
 }

packages/terra-application/tests/jest/application-base/ApplicationBase.test.jsx

@@ -36,4 +36,12 @@ describe('ApplicationBase', () => {
     ));
     expect(wrapper).toMatchSnapshot();
   });
+  it('should render without scroll', () => {
+    const wrapper = shallow((
+      <ApplicationBase noScroll>
+        <div>content</div>
+      </ApplicationBase>
+    ));
+    expect(wrapper).toMatchSnapshot();
+  });
 });

packages/terra-application/tests/jest/application-base/__snapshots__/ApplicationBase.test.jsx.snap

@@ -166,3 +166,59 @@ exports[`ApplicationBase should render with the preferred browser local 1`] = `
   </ThemeProvider>
 </div>
 `;
+
+exports[`ApplicationBase should render without scroll 1`] = `
+<div
+  className="application-base fill"
+  data-terra-application-base={true}
+>
+  <ThemeProvider>
+    <ThemeContextProvider
+      theme={
+        Object {
+          "className": undefined,
+          "name": "terra-default-theme",
+        }
+      }
+    >
+      <Base
+        customMessages={Object {}}
+        locale="en"
+        strictMode={false}
+        throwOnI18nLoadError={true}
+      >
+        <InjectIntl(ApplicationErrorBoundary)>
+          <InjectIntl(Component)>
+            <ActiveBreakpointProvider>
+              <withPromptRegistration(NavigationPromptCheckpoint)
+                onPromptChange={[Function]}
+              >
+                <ApplicationLoadingOverlayProvider
+                  noScroll={true}
+                >
+                  <ApplicationStatusOverlayProvider
+                    noScroll={true}
+                  >
+                    <Suspense
+                      fallback={
+                        <ApplicationLoadingOverlay
+                          backgroundStyle="clear"
+                          isOpen={true}
+                        />
+                      }
+                    >
+                      <div>
+                        content
+                      </div>
+                    </Suspense>
+                  </ApplicationStatusOverlayProvider>
+                </ApplicationLoadingOverlayProvider>
+              </withPromptRegistration(NavigationPromptCheckpoint)>
+            </ActiveBreakpointProvider>
+          </InjectIntl(Component)>
+        </InjectIntl(ApplicationErrorBoundary)>
+      </Base>
+    </ThemeContextProvider>
+  </ThemeProvider>
+</div>
+`;

packages/terra-application/tests/jest/application-loading-overlay/ApplicationLoadingOverlayProvider.test.jsx

@@ -88,5 +88,13 @@ describe('ApplicationLoadingOverlayProvider', () => {
 
       React.useState = reactUseState;
     });
+
+    it('should render without scroll', () => {
+      const wrapper = shallow((
+        <ApplicationLoadingOverlayProvider noScroll />
+      ));
+
+      expect(wrapper).toMatchSnapshot();
+    });
   });
 });

packages/terra-application/tests/jest/application-loading-overlay/__snapshots__/ApplicationLoadingOverlayProvider.test.jsx.snap

@@ -13,7 +13,9 @@ exports[`ApplicationLoadingOverlayProvider Snapshots should give render dark ove
     />
   }
 >
-  <Scroll>
+  <Scroll
+    className=""
+  >
     <ContextProvider
       value={
         Object {
@@ -43,7 +45,9 @@ exports[`ApplicationLoadingOverlayProvider Snapshots should give render light ov
     />
   }
 >
-  <Scroll>
+  <Scroll
+    className=""
+  >
     <ContextProvider
       value={
         Object {
@@ -73,7 +77,9 @@ exports[`ApplicationLoadingOverlayProvider Snapshots should render the loading o
     />
   }
 >
-  <Scroll>
+  <Scroll
+    className=""
+  >
     <ContextProvider
       value={
         Object {
@@ -103,7 +109,9 @@ exports[`ApplicationLoadingOverlayProvider Snapshots should render with custom p
     />
   }
 >
-  <Scroll>
+  <Scroll
+    className=""
+  >
     <ContextProvider
       value={
         Object {
@@ -129,7 +137,9 @@ exports[`ApplicationLoadingOverlayProvider Snapshots should render with minimal
     />
   }
 >
-  <Scroll>
+  <Scroll
+    className=""
+  >
     <ContextProvider
       value={
         Object {
@@ -156,6 +166,7 @@ exports[`ApplicationLoadingOverlayProvider Snapshots should render with optional
   }
 >
   <Scroll
+    className=""
     refCallback={[MockFunction]}
   >
     <ContextProvider
@@ -173,3 +184,31 @@ exports[`ApplicationLoadingOverlayProvider Snapshots should render with optional
   </Scroll>
 </OverlayContainer>
 `;
+
+exports[`ApplicationLoadingOverlayProvider Snapshots should render without scroll 1`] = `
+<OverlayContainer
+  className="container"
+  overlay={
+    <LoadingOverlay
+      backgroundStyle="clear"
+      isAnimated={true}
+      isOpen={false}
+      isRelativeToContainer={true}
+      rootSelector="#root"
+    />
+  }
+>
+  <Scroll
+    className="remove-scroll"
+  >
+    <ContextProvider
+      value={
+        Object {
+          "hide": [Function],
+          "show": [Function],
+        }
+      }
+    />
+  </Scroll>
+</OverlayContainer>
+`;

packages/terra-application/tests/jest/application-status-overlay/ApplicationStatusOverlayProvider.test.jsx

@@ -149,5 +149,13 @@ describe('ApplicationStatusOverlayProvider', () => {
 
       React.useState = reactUseState;
     });
+
+    it('should render without scroll', () => {
+      const wrapper = shallow((
+        <ApplicationStatusOverlayProvider noScroll />
+      ));
+
+      expect(wrapper).toMatchSnapshot();
+    });
   });
 });