feat(Tearsheet): Implement new Tearsheet component by GAUNSD · Pull Request #954 · patternfly/react-component-groups

GAUNSD · 2026-07-09T19:58:18Z

Issues

Tearsheet - New component based on Modal #966

Summary

Implementation of Tearsheet as a set of components in react-component-groups

Changes

🆕 New components: <Tearsheet>, <TearsheetBody>, <TearsheetFooter>, <TearsheetHeader>, and <TearsheetGroup>
🆕 New documentation for use of <Tearsheet>
🔀 Tweaked build scripts to support Windows
- I'm running locally on Windows where path separators are \ instead of the /.
- While running locally, some build scripts fail because of this and tweaks were made in order to get a successful build.
- Changed files:
  - packages/module/utils.js (Common Windows support for paths)
  - packages/module/generate-fed-package-json.js
  - packages/module/generate-index.js
  - packages/module/patternfly-docs/patternfly-docs.source.js
  - scripts/parse-dynamic-modules.mjs
🧹 Small cleanup in README.md

Screenshots

Generated-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

On Windows, Node's path.resolve and path.relative produce backslash-separated paths (e.g. C:\src\*\index.ts). glob v10+ treats backslashes as escape characters rather than path separators, so \* becomes a literal asterisk match instead of a wildcard. This caused generate-index.js to find zero source files, producing an empty src/index.ts, which compiled to an empty dist/esm/index.js. The downstream build:fed:packages step then crashed with "Cannot read properties of undefined (reading 'flags')" when the TypeScript checker tried to get exports from a module with no symbol. Even if the index had been populated, generate-fed-package-json.js had the same glob issue — its patterns with process.cwd() backslashes would match nothing on Windows, so no dist/dynamic/*/package.json stubs would be created. The doc examples import from those stubs, so the dev server would still show a blank page. Additionally, path.relative on Windows returns backslash paths, which broke the .replace('/dist', '') calls that strip the dist prefix from relative paths written into generated package.json files. Changes: - Add packages/module/utils.js with cross-platform path utilities: toPosixPath (normalize separators), posixGlobSync (normalize glob pattern + results), and posixRelative (normalize path.relative output). Each function is documented with why it exists. - Refactor generate-index.js to use posixGlobSync from utils.js - Refactor generate-fed-package-json.js to use toPosixPath, posixGlobSync, and posixRelative from utils.js - Normalize basePath and path.relative output inline in scripts/parse-dynamic-modules.mjs (kept inline since it lives in a separate shared scripts directory) All changes are no-ops on Linux/macOS where paths already use forward slashes. Generated-by: Claude <noreply@anthropic.com> Co-authored-by: Claude <noreply@anthropic.com>

Doc site source discovery (patternfly-docs.source.js) passed raw path.join() output into globSync(). On Windows, path.join() produces backslash-separated paths (e.g. patternfly-docs\content\extensions\**\*.md). glob v10+ treats backslashes as escape characters, not path separators, so both the sourceProps and sourceMD globs silently matched zero files. This caused the generated/index.js routes file to be empty, leaving the entire Extensions sidenav blank on Windows dev servers. Fix: wrap glob patterns with the existing toPosixPath() utility from utils.js (created in d93b8fe for the same class of bug in other build scripts). Also mark className as optional in TearsheetBody, TearsheetFooter, and TearsheetHeader props interfaces — className is passed through to PF ModalBody/ModalFooter/ModalHeader which already default it. Generated-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Assisted-by: Claude <noreply@anthropic.com> Co-authored-by: Claude <noreply@anthropic.com>

Tearsheet component: - Remove bottom border radius so tearsheet sits flush against viewport edge - Change tearsheetInner from height:100% to flex:1 1 auto + minHeight:0 so it participates properly in the ModalBox flex layout TearsheetBody component: - Replace placeholder caretColor:red with flex:1, minHeight:0, overflow:auto so the body fills remaining space and scrolls independently TearsheetGroup component: - Remove placeholder caretColor:red style Documentation (Tearsheet.md): - Expand propComponents to include TearsheetHeader, TearsheetBody, TearsheetFooter, and TearsheetGroup - Add descriptive text for each example section - Reorder examples: Basic, Layouts, Stacked, Group, Comparison TearsheetLayouts example: - Remove 'simple' layout, rename 'xl-text' to 'long-text' - Expand grid layout to 60 randomly sorted cards - Rename 'long' label to 'Flex layout' TearsheetComparison example (new): - Side-by-side Tearsheet vs Modal (ModalVariant.large) demo showing why tearsheets are better for dense content - Body content: sticky search bar (PageSection), vertical JumpLinks in a SidebarPanel, 3-column card grid with DescriptionLists, Labels, and CodeBlocks across 6 sections (36 cards total) - CSS fix for sidebar scrolling: sidebar__main height:100%, sidebar__content overflow:scroll + height:100% Generated-by: Claude <noreply@anthropic.com> Co-authored-by: Claude <noreply@anthropic.com>

thatblindgeye · 2026-07-13T15:48:28Z

/deploy-preview

patternfly-build · 2026-07-13T15:50:26Z

Preview: https://react-component-groups-pr-component-groups-954.surge.sh

A11y report: https://react-component-groups-pr-component-groups-954-a11y.surge.sh

thatblindgeye

In addition to file comments below, we need to bump to the following package versions if they're being used in the component-groups package jsons:

@patternfly/react-code-editor@6.6.2
@patternfly/react-core@6.6.2
@patternfly/react-docs@7.6.2
@patternfly/react-drag-drop@6.6.2
@patternfly/react-table@6.6.2
@patternfly/react-templates@6.6.2

kaylachumley

Thanks for working on this!
Left a bunch of content suggestions to match the patternfly voice and tone. @thatblindgeye feel free to chime in on any of those suggestions.

Also wanted to note that it looks like the tearsheets are using an outdated version of the "x" close icon button and needs to be swapped to the rh-icon equivalent.

Left a design recommendation as well. Tried to review as best I could, but just wanted to make note that if we can, lets make sure to use pf styling and no custom out of the box css (i didnt see anything crazy but just a general friendly note) 🤓

mcoker

Left some comments but it looks good to me as long as you want to lock the full-page and stacked offset styles down and not allow overrides.

kmcfaul

Looks pretty good overall, just +1'd a few comments I'd like to see in before approving.

mcoker

LGTM as is. If you address any of my comments and want me to take another look, just request another review 👍

GAUNSD · 2026-08-27T22:11:40Z

Thank you so much for the thorough reviews @thatblindgeye, @kaylachumley, @mcoker, @kmcfaul!
I'll work on them and provide an update once the changes are pushed up!

```sh npm install @patternfly/react-drag-drop@6.6.2 npm install @patternfly/react-core@6.6.2 @patternfly/react-table@6.6.2 @patternfly/react-code-editor@6.6.2 @patternfly/react-drag-drop@6.6.2 -w @patternfly/react-component-groups ``` Assisted-by: Claude <noreply@anthropic.com> Co-authored-by: Claude <noreply@anthropic.com>

Top level comments

TearsheetFooter styles come for free from ModalFooter

TearsheetHeader styles come for free from ModalHeader

…-groups into gmurcia/tearsheet

TearsheetBody styles largely overlap with ModalBody

@mcoker

Update packages/module/src/Tearsheet/Tearsheet.tsx From: @mcoker Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

GAUNSD · 2026-08-31T23:00:26Z

I've pushed up changes for most of the PR feedback!
Thanks again @thatblindgeye, @kaylachumley, @mcoker, @kmcfaul!

thatblindgeye

Some additional quick comments below, mainly to do with the docs/MD file. Some spots where lines of text should be on one line, or an empty line needed between two lines of text etc. Also left a response to my previous review regarding the empty useStyles block in TearsheetGroup (tldr we could just remove it for now)

I'm also noticing that when stacked tearsheets are open, each one beyond the initial tearsheet flows out of view to the point where you can't click anything in the footer. @mcoker would any of the CSS updates made cause this?

mcoker

Just one thing - in this comment I snuck in that with the update, you'll need to remove insetBlockStart from the pf-m-stiack-level (and probably `pf-m-stack-hidden) tearsheets. That should fix the alignment bug with stacked tearsheets.

@thatblindgeye

Apply batched suggestions from code review From: @thatblindgeye Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

@thatblindgeye

Update packages/module/src/Tearsheet/Tearsheet.tsx From: @thatblindgeye Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

@mcoker

Apply batched suggestions from code review From: @mcoker Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

``` SH npx jest packages -u ```

GAUNSD · 2026-09-01T17:22:23Z

Just pushed up the remaining changes @thatblindgeye @mcoker.

Tests now all run successfully after npx jest packages -u

Test Suites: 26 passed, 26 total
Tests:       120 passed, 120 total
Snapshots:   53 passed, 53 total
Time:        48.723 s

Ran all test suites matching /packages/i.

mcoker

🚀 good stuff @GAUNSD ,thank you!!

mcoker · 2026-09-01T18:22:55Z

Just an observation (non-blocking IMO) is that the tearsheet inset is about 8px more than our default page chrome/layout inset, so you can see a small bit of the page container behind/along the right edge of the tearsheet.

This is due to the 4rem inset of the tearsheet creating a 32px (2rem) gap on either side, where the page container behind it uses a 24px inset (comes from --pf-t--global--spacer--inset--page-chrome). I imagine the fix would be something like changing the width/max-width to use calc(100% - var(--pf-t--global--spacer--inset--page-chrome * 4) for stack 0, and calc(100% - var(--pf-t--global--spacer--inset--page-chrome * 2) for stack 1. Though if you do that, it's worth noting you should import the t_global_spacer_inset_page_chrome @react-tokens token for the token var instead of hardcoding it.

thatblindgeye

Awesome job on this! 🥳

github-actions · 2026-09-01T20:49:27Z

🎉 This PR is included in version 6.6.0-prerelease.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

GAUNSD and others added 8 commits July 8, 2026 16:00

feat(Tearsheet): Initial scaffolding from sample impl in core patternfly

140d089

chore: Migrate tearsheet.css to proper JSS use

05ab49f

Generated-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

chore: Port doc examples

af55c44

fix: top not working with insetBlockStart because of JSS ordering

d0be617

Assisted-by: Claude <noreply@anthropic.com> Co-authored-by: Claude <noreply@anthropic.com>

doc: Update syntax of code blocks

0047ae8

GAUNSD changed the title ~~feat(Tearsheet):~~ feat(Tearsheet): Implement new Tearsheet component Jul 9, 2026

GAUNSD mentioned this pull request Jul 9, 2026

Tearsheet - New component based on Modal #966

Closed

2 tasks

chore: Cleanup

fe6c124

GAUNSD marked this pull request as ready for review July 10, 2026 00:31

thatblindgeye mentioned this pull request Jul 20, 2026

fix(Modal): exclude Poppers in aria-hidden change patternfly/patternfly-react#12424

Merged

thatblindgeye mentioned this pull request Jul 30, 2026

Expand modal aria-hidden logic beyond just Popper patternfly/patternfly-react#12608

Closed

thatblindgeye linked an issue Aug 24, 2026 that may be closed by this pull request

Tearsheet - New component based on Modal #966

Closed

2 tasks

thatblindgeye requested review from kaylachumley, kmcfaul, mcoker and thatblindgeye August 24, 2026 14:46

thatblindgeye requested changes Aug 26, 2026

View reviewed changes

kaylachumley requested changes Aug 26, 2026

View reviewed changes

mcoker reviewed Aug 26, 2026

View reviewed changes

mcoker reviewed Aug 27, 2026

View reviewed changes

Comment thread ...tternfly-docs/content/extensions/component-groups/examples/Tearsheet/TearsheetComparison.tsx Outdated

kmcfaul reviewed Aug 27, 2026

View reviewed changes

mcoker approved these changes Aug 27, 2026

View reviewed changes

GAUNSD and others added 2 commits August 31, 2026 18:05

chore: Cleanup Tearsheet.md (PR feedback)

2b15f3a

Top level comments

GAUNSD and others added 6 commits August 31, 2026 18:44

chore: Cleanup styles (PR feedback)

2bce77b

TearsheetFooter styles come for free from ModalFooter

chore: Cleanup styles (PR feedback)

4d42ce1

TearsheetHeader styles come for free from ModalHeader

Merge branch 'gmurcia/tearsheet' of github.com:GAUNSD/react-component…

f306ffc

…-groups into gmurcia/tearsheet

chore: Cleanup styles (PR feedback)

29bc935

TearsheetBody styles largely overlap with ModalBody

chore: Update Tearsheet styles (PR feedback)

c56f4e4

Update packages/module/src/Tearsheet/Tearsheet.tsx From: @mcoker Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

fix: TS and Imports

bb7a752

thatblindgeye requested review from kaylachumley and kmcfaul September 1, 2026 12:31

thatblindgeye requested changes Sep 1, 2026

View reviewed changes

thatblindgeye mentioned this pull request Sep 1, 2026

Cut full release for Tearsheets feature #976

Open

mcoker requested changes Sep 1, 2026

View reviewed changes

Comment thread packages/module/src/Tearsheet/Tearsheet.tsx Outdated

Comment thread packages/module/src/Tearsheet/Tearsheet.tsx Outdated

Comment thread packages/module/src/Tearsheet/Tearsheet.tsx Outdated

GAUNSD and others added 7 commits September 1, 2026 12:11

Merge branch 'main' into gmurcia/tearsheet

a9a1f54

chore: Update Tearsheet documentation (PR feedback)

1d9a441

Apply batched suggestions from code review From: @thatblindgeye Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

chore: Update Tearsheet prop description (PR feedback)

50eaa85

Update packages/module/src/Tearsheet/Tearsheet.tsx From: @thatblindgeye Co-authored-by: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>

chore: Update Tearsheet documentation (PR feedback)

4ccb3fc

chore: Remove empty instances of useStyles (PR feedback)

cad6f9f

chore: Update Tearsheet styles (PR feedback)

6e1a4c6

Apply batched suggestions from code review From: @mcoker Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

chore: Update jest snapshots

4c9cf03

``` SH npx jest packages -u ```

mcoker approved these changes Sep 1, 2026

View reviewed changes

kaylachumley approved these changes Sep 1, 2026

View reviewed changes

thatblindgeye approved these changes Sep 1, 2026

View reviewed changes

fix: Lint

fc3e5e7

kmcfaul approved these changes Sep 1, 2026

View reviewed changes

thatblindgeye merged commit 9713c04 into patternfly:main Sep 1, 2026
7 checks passed

github-actions Bot added the released on @prerelease label Sep 1, 2026

GAUNSD deleted the gmurcia/tearsheet branch September 1, 2026 20:54

Uh oh!

Conversation

GAUNSD commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issues

Summary

Changes

Screenshots

Uh oh!

thatblindgeye commented Jul 13, 2026

Uh oh!

patternfly-build commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thatblindgeye left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kaylachumley left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kmcfaul left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

GAUNSD commented Aug 27, 2026

Uh oh!

GAUNSD commented Aug 31, 2026

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

GAUNSD commented Sep 1, 2026

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker commented Sep 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

GAUNSD commented Jul 9, 2026 •

edited

Loading

patternfly-build commented Jul 13, 2026 •

edited

Loading

thatblindgeye left a comment •

edited

Loading

mcoker commented Sep 1, 2026 •

edited

Loading