No Scroll (#358)

packages/terra-application/CHANGELOG.md

@@ -9,6 +9,7 @@
 
 * Added
   * Added user action utility button.
+  * Added `noScroll` prop to remove scroll in powerchart.
 
 ## 2.1.0 - (June 22, 2022)
 

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

@@ -59,10 +59,15 @@ 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, themeName, fitToParentIsDisabled, children, unloadPromptIsDisabled,
+  locale, themeName, fitToParentIsDisabled, children, unloadPromptIsDisabled, noScroll,
 }) => {
   const registeredPromptsRef = useRef();
   const [messages, setMessages] = useState();
@@ -132,8 +137,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(() => ({
@@ -73,13 +80,15 @@ const ApplicationLoadingOverlayProvider = ({ children, scrollRefCallback, ...cus
     className = [className, customProps.className].join(' ');
   }
 
+  const scrollClass = cx({ 'remove-scroll': noScroll });
+
   return (
     <OverlayContainer
       {...customProps}
       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();
@@ -101,11 +108,13 @@ const ApplicationStatusOverlayProvider = ({ children, scrollRefCallback, ...cust
     />
   );
 
+  const scrollClass = cx({ 'remove-scroll': noScroll });
+
   return (
     <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

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

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

@@ -15,3 +15,9 @@ exports[`ApplicationBase should render with minimal props 1`] = `
 `;
 
 exports[`ApplicationBase should render with the preferred browser locale 1`] = `<ApplicationBase />`;
+
+exports[`ApplicationBase should render without scroll 1`] = `
+<ApplicationBase
+  noScroll={true}
+/>
+`;

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();
+    });
   });
 });

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

@@ -16,7 +16,9 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render a single statu
     className="container-content"
     data-status-overlay-container-content={true}
   >
-    <Scroll>
+    <Scroll
+      className=""
+    >
       <ContextProvider
         value={
           Object {
@@ -61,7 +63,9 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render the status vie
     className="container-content"
     data-status-overlay-container-content={true}
   >
-    <Scroll>
+    <Scroll
+      className=""
+    >
       <ContextProvider
         value={
           Object {
@@ -100,7 +104,9 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render the status vie
     className="container-content"
     data-status-overlay-container-content={true}
   >
-    <Scroll>
+    <Scroll
+      className=""
+    >
       <ContextProvider
         value={
           Object {
@@ -133,7 +139,9 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render the status vie
     className="container-content"
     data-status-overlay-container-content={true}
   >
-    <Scroll>
+    <Scroll
+      className=""
+    >
       <ContextProvider
         value={
           Object {
@@ -166,7 +174,9 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render the status vie
     className="container-content"
     data-status-overlay-container-content={true}
   >
-    <Scroll>
+    <Scroll
+      className=""
+    >
       <ContextProvider
         value={
           Object {
@@ -192,7 +202,9 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render with custom pr
     className="container-content"
     data-status-overlay-container-content={true}
   >
-    <Scroll>
+    <Scroll
+      className=""
+    >
       <ContextProvider
         value={
           Object {
@@ -214,7 +226,9 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render with minimal p
     className="container-content"
     data-status-overlay-container-content={true}
   >
-    <Scroll>
+    <Scroll
+      className=""
+    >
       <ContextProvider
         value={
           Object {
@@ -237,6 +251,7 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render with optional
     data-status-overlay-container-content={true}
   >
     <Scroll
+      className=""
       refCallback={[MockFunction]}
     >
       <ContextProvider
@@ -255,3 +270,27 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render with optional
   </div>
 </div>
 `;
+
+exports[`ApplicationStatusOverlayProvider Snapshots should render without scroll 1`] = `
+<div
+  className="container"
+>
+  <div
+    className="container-content"
+    data-status-overlay-container-content={true}
+  >
+    <Scroll
+      className="remove-scroll"
+    >
+      <ContextProvider
+        value={
+          Object {
+            "hide": [Function],
+            "show": [Function],
+          }
+        }
+      />
+    </Scroll>
+  </div>
+</div>
+`;