Is this a new component or an extension?
Variant of an existing component
Existing Component
Modal
Describe the feature
Tearsheet
A Tearsheet is a (almost)full-sized modal-like component that allows users to utilize a complex UX flow without having to navigate away from the important work they are doing.
The inspiration for this request of a PatternFly Tearsheet comes from IBM's carbon component libraries that make use of it.
Resources
Dependencies
Due to the large screen nature of the Tearsheet, the lack of entry/exit animations for <Modal/> cause a negative-UX on users suddenly seeing a large element pop-up on screen.
Implementation
I have completed a rough first-pass PoC implementation of what the component could look like directly in a fork of patternfly-react. The main sources to look at are:
The resulting PoC implementation gives us the following Component use to be considered for Tearsheet
<Tearsheet
isOpen={isTearsheetOpen}
onClose={toggleTearsheet}
>
<TearsheetHeader title="Tearsheet Header" labelId="basic-modal-title" />
<TearsheetBody>
Lorem...
</TearsheetBody>
<TearsheetFooter>
<Button key="confirm" variant="primary" onClick={confirm}>Confirm</Button>
<Button key="cancel" variant="primary" onClick={toggleTearsheet}>Confirm</Button>
</TearsheetFooter>
</Tearsheet>For managing infinite stacked tearsheets (See the visuals/mockup sections for more details on what this looks likes in practice._) we get this Component use
<TearsheetGroup id="tearsheet-group-demo">
<Tearsheet id="tearsheet-1" isOpen={tearsheet1Open}>...<Tearsheet/>
<Tearsheet id="tearsheet-2" isOpen={tearsheet2Open}>...<Tearsheet/>
..
<Tearsheet id="tearsheet-N" isOpen={tearsheetNOpen}>...<Tearsheet/>
</TearsheetGroup>User Story
User Story: Uninterrupted navigation
As a user of complex tools (example: AutoRAG & AutoML) found in Red Hat OpenShift AI I would like my main use of these tools to not be interrupted while having to set up/configure complex configs or dependent tools that would normally require me to leave the page.
As a direct example: Pipeline server configuration requires me to navigate to another full page experience just to configure.
User Story: Full screen experience
As a user of complex tools (example: AutoRAG & AutoML) found in Red Hat OpenShift AI that display rich and complex data I would like to view the results of that data in as-close to a full page experience as I can without being interrupted of the tool's main use.
As a direct example: When seeing the final resulting models table in AutoML, I have to view all of the model details in a large-variant PF Modal which might not be big enough to see all of the model details I would like in one view
Visuals & Mockups
Tearsheet: Basic
The most basic use of a Tearsheet with simple text in the TearsheetBody
Tearsheet: Stacked
What the various levels (level 0, 1, 2) of Tearsheet stacking look like on top of each other
Tearsheet: Infinite stacking
With the use of TearsheetGroup to manage a larger collection of Tearsheets, you can achieve an infinite level of stacking.
Tearsheet: Layouts
Possibilities are endless - but just some variations on what could be included inside of the TearsheetBody
Interaction States & Variations
Tearsheet states/variations
Since the Tearsheet is heavily based on the <Modal/>; The same states from it could be considered for Tearsheet.
Tearsheet stacking
One powerful concept for Tearsheets is stacking. Since one tearsheets open wizard/ux-flow may itself also require some other uninterrupted view, another tearsheet would open on top. The user needs to clearly see this as a new element while also understanding the previous work done on the main page and on the first tearsheet is still there.
See the visuals/mockup sections for more details on what this looks likes in practice._
Tearsheet scrolling
Because a Tearsheet is meant for full-height (full screen) like content the styling of the Tearsheet should have it's TearsheetBody take up as much height as is possible. This means the TearsheetFooter that holds the CTAs would sit at the bottom of the page.
Accessibility (A11y)
Tearsheet A11Y
Since the Tearsheet is heavily based on the <Modal/>; The same A11Y concerns from it could be applied to the Tearsheet.
Product & Target Release
No response
Contribution
Jira Issue: PF-4539
Is this a new component or an extension?
Variant of an existing component
Existing Component
Modal
Describe the feature
Tearsheet
A Tearsheet is a (almost)full-sized modal-like component that allows users to utilize a complex UX flow without having to navigate away from the important work they are doing.
The inspiration for this request of a PatternFly Tearsheet comes from IBM's carbon component libraries that make use of it.
Resources
carbon/ibm-products Tearsheet storybook
carbon/UX guidelines on using Tearsheets
Dependencies
Due to the large screen nature of the Tearsheet, the lack of entry/exit animations for
<Modal/>cause a negative-UX on users suddenly seeing a large element pop-up on screen.Implementation
I have completed a rough first-pass PoC implementation of what the component could look like directly in a fork of patternfly-react. The main sources to look at are:
GAUNSD:patternfly-react/react-core/Tearsheet
[GAUNSD:patternfly-react/react-styles/tearsheet.css]https://github.com/GAUNSD/patternfly-react/blob/gmurcia/tearsheet/packages/react-styles/src/css/components/Tearsheet/tearsheet.css
The resulting PoC implementation gives us the following Component use to be considered for Tearsheet
For managing infinite stacked tearsheets (See the visuals/mockup sections for more details on what this looks likes in practice._) we get this Component use
User Story
User Story: Uninterrupted navigation
As a user of complex tools (example: AutoRAG & AutoML) found in Red Hat OpenShift AI I would like my main use of these tools to not be interrupted while having to set up/configure complex configs or dependent tools that would normally require me to leave the page.
As a direct example: Pipeline server configuration requires me to navigate to another full page experience just to configure.
User Story: Full screen experience
As a user of complex tools (example: AutoRAG & AutoML) found in Red Hat OpenShift AI that display rich and complex data I would like to view the results of that data in as-close to a full page experience as I can without being interrupted of the tool's main use.
As a direct example: When seeing the final resulting models table in AutoML, I have to view all of the model details in a large-variant PF Modal which might not be big enough to see all of the model details I would like in one view
Visuals & Mockups
Tearsheet: Basic
The most basic use of a Tearsheet with simple text in the TearsheetBody
Tearsheet: Stacked
What the various levels (level 0, 1, 2) of Tearsheet stacking look like on top of each other
Tearsheet: Infinite stacking
With the use of TearsheetGroup to manage a larger collection of Tearsheets, you can achieve an infinite level of stacking.
Tearsheet: Layouts
Possibilities are endless - but just some variations on what could be included inside of the TearsheetBody
Interaction States & Variations
Tearsheet states/variations
Since the Tearsheet is heavily based on the
<Modal/>; The same states from it could be considered for Tearsheet.Tearsheet stacking
One powerful concept for Tearsheets is stacking. Since one tearsheets open wizard/ux-flow may itself also require some other uninterrupted view, another tearsheet would open on top. The user needs to clearly see this as a new element while also understanding the previous work done on the main page and on the first tearsheet is still there.
See the visuals/mockup sections for more details on what this looks likes in practice._
Tearsheet scrolling
Because a Tearsheet is meant for full-height (full screen) like content the styling of the Tearsheet should have it's TearsheetBody take up as much height as is possible. This means the TearsheetFooter that holds the CTAs would sit at the bottom of the page.
Accessibility (A11y)
Tearsheet A11Y
Since the Tearsheet is heavily based on the
<Modal/>; The same A11Y concerns from it could be applied to the Tearsheet.Product & Target Release
No response
Contribution
I am interested in contributing this feature.
I have searched for similar existing requests.
Jira Issue: PF-4539