feat(Tearsheet): Implement new Tearsheet component#954
Open
GAUNSD wants to merge 9 commits into
Open
Conversation
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>
GAUNSD
changed the title
2 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issues
Summary
Implementation of Tearsheet as a set of components in react-component-groups
Changes
<Tearsheet>,<TearsheetBody>,<TearsheetFooter>,<TearsheetHeader>, and<TearsheetGroup><Tearsheet>packages/module/utils.js(Common Windows support for paths)packages/module/generate-fed-package-json.jspackages/module/generate-index.jspackages/module/patternfly-docs/patternfly-docs.source.jsscripts/parse-dynamic-modules.mjsScreenshots