Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

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

Merged
merged 5 commits into from
Sep 14, 2023
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1dfe7fd
Remove Scroll
saket2403 Sep 7, 2023
0ddbf36
Delete tar file
saket2403 Sep 7, 2023
eaa8dab
Fix lint
saket2403 Sep 7, 2023
ba1df5f
Merge branch 'terra-application-v1' into pct-scroll
saket2403 Sep 11, 2023
1260b86
Prop Desc
saket2403 Sep 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/terra-application/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Changed
* Added `noScroll` prop to remove scroll in powerchart.

## 1.56.0-alpha.0 - (September 8, 2023)

* Changed
Expand Down
13 changes: 10 additions & 3 deletions packages/terra-application/src/application-base/ApplicationBase.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -76,10 +77,16 @@ const propTypes = {
* before continuing with the unload event, even if NavigationPrompts are present.
*/
unloadPromptIsDisabled: PropTypes.bool,
/**
* @private
* Prop to not render scroll in Powerchart.
saket2403 marked this conversation as resolved.
Show resolved Hide resolved
*/
noScroll: PropTypes.bool,

};

const ApplicationBase = ({
locale, customTranslatedMessages, translationsLoadingPlaceholder, themeName, fitToParentIsDisabled, children, unloadPromptIsDisabled,
locale, customTranslatedMessages, translationsLoadingPlaceholder, themeName, fitToParentIsDisabled, children, unloadPromptIsDisabled, noScroll,
}) => {
const registeredPromptsRef = useRef();

Expand Down Expand Up @@ -135,8 +142,8 @@ const ApplicationBase = ({
registeredPromptsRef.current = registeredPrompts;
}}
>
<ApplicationLoadingOverlayProvider>
<ApplicationStatusOverlayProvider>
<ApplicationLoadingOverlayProvider noScroll={noScroll}>
<ApplicationStatusOverlayProvider noScroll={noScroll}>
<Suspense fallback={<ApplicationLoadingOverlay isOpen />}>
{children}
</Suspense>
Expand Down
12 changes: 10 additions & 2 deletions ...s/terra-application/src/application-loading-overlay/ApplicationLoadingOverlayProvider.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => ({
Expand Down Expand Up @@ -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(' ');
}
Expand All @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions ...application/src/application-loading-overlay/ApplicationLoadingOverlayProvider.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,8 @@
.container {
height: 100%;
}

.remove-scroll {
overflow: visible;
}
}
12 changes: 10 additions & 2 deletions ...ges/terra-application/src/application-status-overlay/ApplicationStatusOverlayProvider.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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(' ');
}
Expand All @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions ...a-application/src/application-status-overlay/ApplicationStatusOverlayProvider.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,8 @@
width: 100%;
z-index: 1;
}

.remove-scroll {
overflow: visible;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://caniuse.com/?search=overflow%3A%20visible
overflow-visible is not supported on IE 10 and IE 11 have we tested this on the IE11 and IE10 browsers.

Copy link
Contributor Author

@saket2403 saket2403 Sep 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this is an MPage-specific change and MPages 9.0 supports only edge. We do not have to worry about IE.

}
}
8 changes: 8 additions & 0 deletions packages/terra-application/tests/jest/application-base/ApplicationBase.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
56 changes: 56 additions & 0 deletions ...terra-application/tests/jest/application-base/__snapshots__/ApplicationBase.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;
8 changes: 8 additions & 0 deletions ...ication/tests/jest/application-loading-overlay/ApplicationLoadingOverlayProvider.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,5 +88,13 @@ describe('ApplicationLoadingOverlayProvider', () => {

React.useState = reactUseState;
});

it('should render without scroll', () => {
const wrapper = shallow((
<ApplicationLoadingOverlayProvider noScroll />
));

expect(wrapper).toMatchSnapshot();
});
});
});
49 changes: 44 additions & 5 deletions ...application-loading-overlay/__snapshots__/ApplicationLoadingOverlayProvider.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ exports[`ApplicationLoadingOverlayProvider Snapshots should give render dark ove
/>
}
>
<Scroll>
<Scroll
className=""
>
<ContextProvider
value={
Object {
Expand Down Expand Up @@ -43,7 +45,9 @@ exports[`ApplicationLoadingOverlayProvider Snapshots should give render light ov
/>
}
>
<Scroll>
<Scroll
className=""
>
<ContextProvider
value={
Object {
Expand Down Expand Up @@ -73,7 +77,9 @@ exports[`ApplicationLoadingOverlayProvider Snapshots should render the loading o
/>
}
>
<Scroll>
<Scroll
className=""
>
<ContextProvider
value={
Object {
Expand Down Expand Up @@ -103,7 +109,9 @@ exports[`ApplicationLoadingOverlayProvider Snapshots should render with custom p
/>
}
>
<Scroll>
<Scroll
className=""
>
<ContextProvider
value={
Object {
Expand All @@ -129,7 +137,9 @@ exports[`ApplicationLoadingOverlayProvider Snapshots should render with minimal
/>
}
>
<Scroll>
<Scroll
className=""
>
<ContextProvider
value={
Object {
Expand All @@ -156,6 +166,7 @@ exports[`ApplicationLoadingOverlayProvider Snapshots should render with optional
}
>
<Scroll
className=""
refCallback={[MockFunction]}
>
<ContextProvider
Expand All @@ -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>
`;
8 changes: 8 additions & 0 deletions ...plication/tests/jest/application-status-overlay/ApplicationStatusOverlayProvider.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,5 +149,13 @@ describe('ApplicationStatusOverlayProvider', () => {

React.useState = reactUseState;
});

it('should render without scroll', () => {
const wrapper = shallow((
<ApplicationStatusOverlayProvider noScroll />
));

expect(wrapper).toMatchSnapshot();
});
});
});
Loading
Loading