Tearsheet - New component based on Modal

[GAUNSD]

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. Included in the PoC is my take on what entry/exit animations could look like when added to the <Modal/>.

• GAUNSD:patternfly-react/react-styles/modal-animations.css
• GAUNSD:patternfly-react/react-styles/backdrop-animations.css
• GAUNSD:patternfly-react/react-core/Modal (new animated prop)
• GAUNSD:patternfly-react/react-core/Backdrop (new animated prop)

animated-modal.mp4

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

<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

• I am interested in contributing this feature.
• I have searched for similar existing requests.

---

Jira Issue: PF-4330

[coderabbitai]

🔗 Related PRs

#12197 - chore(miscellaneous): update demo flags from js to ts [merged]
#12327 - feat(Page): added responsive docked nav [merged]
#12347 - feat(Toolbar,OverflowMenu): support responsive height vis breakpoints [merged]
#12370 - chore(QuestionCircleIcon): Replace all usages of QuestionCircleIcon with RhUiQuestionMarkCircleFillIcon [merged]
#12384 - feat(CodeEditor): add isHighContrastTheme [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!