docs(compass): content review and edits#8013
Conversation
|
Preview: https://pf-pr-8013.surge.sh A11y report: https://pf-pr-8013-a11y.surge.sh |
mcoker
left a comment
There was a problem hiding this comment.
Just a couple of syntax things. Also included some context on the demos - not suggesting we include it necessarily, just wanted you to know in case you think it's relevant.
| ## Examples | ||
| ### Card view | ||
|
|
||
| This demo places a card view within the main Compass section. |
There was a problem hiding this comment.
I'm not sure how detailed you want to get with these demo descriptions, or if any of this is relevant to call out in our docs, but FWIW from my perspective these 3 demos show 3 different layouts that I've seen in the compass designs. So they're examples of how to build these types of layouts.
- Card view - this is a normal, common compass page. It has
- A
.pf-v6-c-compass__main-headerthat includes the page title and any toolbar/action stuff - A
.pf-v6-c-compass__contentand the content inside of it is in.pf-v6-c-compass__panel, which is what creates the big box with rounded corners that turns into a glass container (semi opaque, blurred background) in glass theme.
- Dashboard - probably not a super common page? Most likely a homepage or landing page or something I'd guess. It has
- A
.pf-v6-c-herothat's like a big fancy section, probably with some important CTAs. - A
.pf-v6-c-compass__contentwithout.pf-v6-c-compass__panelwrapping all of the contents, so there is no bounding box with a background color around all of the page content. Instead, the content area is a big grid/"dashboard" layout, and each of the cards/boxes are wrapped in.pf-v6-c-compass__panel(providing the background and rounded corners), so each will be a glass container when glass theme is enabled.
- A similar setup as the dashboard above, where there is no
.pf-v6-c-compass__panelwrapping all of the content - instead it's a grid with 2 independently scrollable.pf-v6-c-compass__panelelements. The contents should very likely not be a card view - I just had that card view template handy when I created that demo, and we should change it 😅
There was a problem hiding this comment.
This is great! I think more details are good. I fleshed them out with this info, but I didn't mention the glass stuff - since it doesn't seem like you can toggle the glass effects on in the demos? Can always add it in if we want to be sure it's documented somewhere, though
Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>
WalkthroughRenames the Default example to Basic, expands Compass docs with a structured layout overview and many new public selectors/modifiers, and adds descriptive intro text to several Compass demos. Changes are documentation and API surface updates (selectors/modifiers) only. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 4
Fix all issues with AI Agents 🤖
In @src/patternfly/components/Compass/examples/Compass.md:
- Around line 87-108: Duplicate entry for the selector `.pf-v6-c-compass__nav`
exists in the Usage table with conflicting descriptions; remove the duplicate
and keep the correct description. Open the table in Compass.md, locate both
`.pf-v6-c-compass__nav` rows, decide which description to preserve (either
"Initiates the Compass nav" or "Initiates a Compass container for site
navigation"), delete the other row, and ensure only one `.pf-v6-c-compass__nav`
entry remains with the chosen description.
- Line 115: Update the text describing the modifier so the compound adjective is
hyphenated: change the phrase that describes `.pf-m-pill` modifying
`.pf-v6-c-compass__panel` to read "pill-shaped border radius" (i.e., replace
"pill shaped" with "pill-shaped") in the Compass.md example entry.
In @src/patternfly/demos/Compass/examples/Compass.md:
- Line 24: The phrasing uses "all of the" and should be shortened to "all the"
for conciseness; update the text instances in Compass.md that mention the
`.pf-v6-c-compass__content` and `.pf-v6-c-compass__panel` classes so "wrapping
all of the contents" becomes "wrapping all the contents" and "wrapping all of
the content" becomes "wrapping all the content" (search for those exact phrases
near references to `.pf-v6-c-compass__content` / `.pf-v6-c-compass__panel` to
locate and edit).
- Line 206: Remove the trailing spaces at the end of the markdown lines that
describe the demo (specifically the stray spaces on the sentence "This demo
places multiple sections within the main Compass section, with each section
containing a card view." and the subsequent related line) — edit the Compass.md
content to delete the extra whitespace characters at the ends of those lines
(lines referenced in the review: 206 and 208) so the file no longer violates
MD009.
📜 Review details
Configuration used: Repository UI (base), Organization UI (inherited)
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/patternfly/components/Compass/examples/Compass.mdsrc/patternfly/demos/Compass/examples/Compass.md
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2026-01-02T16:11:59.444Z
Learnt from: srambach
Repo: patternfly/patternfly PR: 8025
File: src/patternfly/components/Toolbar/examples/Toolbar.md:765-766
Timestamp: 2026-01-02T16:11:59.444Z
Learning: In the PatternFly repository (patternfly/patternfly), markdown documentation files under src/patternfly/components/*/examples/*.md intentionally omit blank lines after headings. Treat this as the standard style for these files. During reviews, verify that these files follow this convention (no blank line after headings) and do not enforce inserting blank lines in this path unless there is an explicit exception noted in project guidelines.
Applied to files:
src/patternfly/components/Compass/examples/Compass.md
🪛 LanguageTool
src/patternfly/demos/Compass/examples/Compass.md
[style] ~24-~24: Consider removing “of” to be more concise
Context: ...ut a .pf-v6-c-compass__panel wrapping all of the contents. This removes the rounded-rect...
(ALL_OF_THE)
[style] ~208-~208: Consider removing “of” to be more concise
Context: ...ut a .pf-v6-c-compass__panel wrapping all of the content, there is no rounded-rectangle ...
(ALL_OF_THE)
src/patternfly/components/Compass/examples/Compass.md
[grammar] ~115-~115: Use a hyphen to join words.
Context: ... Modifies a Compass panel to have a pill shaped border radius. | | `.pf-m-scrolla...
(QB_NEW_EN_HYPHEN)
🪛 markdownlint-cli2 (0.18.1)
src/patternfly/demos/Compass/examples/Compass.md
206-206: Trailing spaces
Expected: 0 or 2; Actual: 1
(MD009, no-trailing-spaces)
208-208: Trailing spaces
Expected: 0 or 2; Actual: 1
(MD009, no-trailing-spaces)
src/patternfly/components/Compass/examples/Compass.md
12-12: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Above
(MD022, blanks-around-headings)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-upload
🔇 Additional comments (3)
src/patternfly/components/Compass/examples/Compass.md (1)
12-19: Rename and new descriptive overview are clear and well-structured.The change from "Default" to "Basic" improves clarity, and the new descriptive overview (lines 14–19) provides clear, bullet-point documentation of the Compass layout structure. This aligns well with component documentation best practices. Based on learnings, the established convention in this file path is to intentionally omit blank lines after headings, so the linter flag can be safely ignored.
src/patternfly/demos/Compass/examples/Compass.md (2)
10-24: Excellent narrative descriptions that align with prior review feedback.The new descriptive text for Card view and Dashboard demos provides clear context about layout structures and use cases. The descriptions match the detailed feedback from the previous review (mcoker's architectural insights), and edonehoo has effectively translated those notes into concise documentation. This significantly improves the value of the demo section for users.
382-383: Descriptive text for "With drawer" is clear and appropriate.The explanation on lines 382–383 effectively conveys the purpose of this demo variant. The narrative is concise and provides the context users need.
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI Agents
In @src/patternfly/components/Compass/examples/Compass.md:
- Around line 12-19: Remove the blank line immediately after the "### Basic"
heading in the Compass.md example so the heading is followed directly by the
paragraph describing the Compass layout; locate the "### Basic" heading in
src/patternfly/components/Compass/examples/Compass.md and delete the empty line
below it to conform to the PatternFly markdown heading style.
- Around line 87-108: The Usage table contains a duplicate selector
`.pf-v6-c-compass__nav` with two different descriptions; decide whether these
represent the same element or two distinct classes (e.g., header nav vs sidebar
nav). If they are the same, remove one row and replace the remaining description
for `.pf-v6-c-compass__nav` with a consolidated description such as "Initiates
the Compass navigation container (used for header or sidebar navigation)" that
covers both contexts; if they are distinct, rename one selector to the correct
class (e.g., `.pf-v6-c-compass__nav-home` or `.pf-v6-c-compass__nav-container`)
and update its description accordingly so each selector is unique and
unambiguous.
In @src/patternfly/demos/Compass/examples/Compass.md:
- Around line 381-383: Remove the extraneous blank line immediately following
the heading "### With drawer" so the heading is directly followed by the
descriptive sentence; locate the heading string "### With drawer" in Compass.md
and delete the empty line after it to match the PatternFly markdown convention.
- Around line 204-208: Remove the blank line immediately after the "### Multiple
sections" heading, replace the phrase "all of the content" with "all the
content" in the paragraph referencing
`.pf-v6-c-compass__panel`/`.pf-v6-c-compass__content`, and strip any trailing
whitespace on the affected lines (the paragraph lines that reference those
classes) so the markdown follows PatternFly conventions and MD009.
- Around line 19-24: Remove the blank line immediately after the "### Dashboard"
heading and replace the phrase "all of the contents" with the simpler "all the
contents" in this section; locate the paragraph that begins with the bulleted
list mentioning `.pf-v6-c-hero` and
`.pf-v6-c-compass__content`/`.pf-v6-c-compass__panel`, delete the empty line
right after the "### Dashboard" heading, and update the wording to "all the
contents" to conform to PatternFly heading and style conventions.
📜 Review details
Configuration used: Repository UI (base), Organization UI (inherited)
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/patternfly/components/Compass/examples/Compass.mdsrc/patternfly/demos/Compass/examples/Compass.md
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2026-01-02T16:12:05.437Z
Learnt from: srambach
Repo: patternfly/patternfly PR: 8025
File: src/patternfly/components/Toolbar/examples/Toolbar.md:765-766
Timestamp: 2026-01-02T16:12:05.437Z
Learning: In the PatternFly project (patternfly/patternfly repository), markdown documentation files in src/patternfly/components/*/examples/*.md do not use blank lines after headings. This is an intentional style choice for consistency across the documentation.
Applied to files:
src/patternfly/demos/Compass/examples/Compass.md
📚 Learning: 2026-01-02T16:11:59.444Z
Learnt from: srambach
Repo: patternfly/patternfly PR: 8025
File: src/patternfly/components/Toolbar/examples/Toolbar.md:765-766
Timestamp: 2026-01-02T16:11:59.444Z
Learning: In the PatternFly repository (patternfly/patternfly), markdown documentation files under src/patternfly/components/*/examples/*.md intentionally omit blank lines after headings. Treat this as the standard style for these files. During reviews, verify that these files follow this convention (no blank line after headings) and do not enforce inserting blank lines in this path unless there is an explicit exception noted in project guidelines.
Applied to files:
src/patternfly/components/Compass/examples/Compass.md
🪛 LanguageTool
src/patternfly/demos/Compass/examples/Compass.md
[style] ~24-~24: Consider removing “of” to be more concise
Context: ...ut a .pf-v6-c-compass__panel wrapping all of the contents. This removes the rounded-rect...
(ALL_OF_THE)
[style] ~208-~208: Consider removing “of” to be more concise
Context: ...ut a .pf-v6-c-compass__panel wrapping all of the content, there is no rounded-rectangle ...
(ALL_OF_THE)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-upload
🔇 Additional comments (1)
src/patternfly/demos/Compass/examples/Compass.md (1)
9-13: Remove blank line after the heading for consistency with PatternFly documentation style.Line 10 contains a blank line after
### Card view. Per the established PatternFly documentation convention for markdown files in this path, headings should not be followed by blank lines.🔎 Proposed fix
### Card view - This demo populates the main Compass section with a card view, which is one of the more common page types used within a Compass layout. In this demo, the page includes:Based on learnings, this file should follow the convention of omitting blank lines after headings.
⛔ Skipped due to learnings
Learnt from: srambach Repo: patternfly/patternfly PR: 8025 File: src/patternfly/components/Toolbar/examples/Toolbar.md:765-766 Timestamp: 2026-01-02T16:12:05.437Z Learning: In the PatternFly project (patternfly/patternfly repository), markdown documentation files in src/patternfly/components/*/examples/*.md do not use blank lines after headings. This is an intentional style choice for consistency across the documentation.
| | `.pf-v6-c-compass` | `<div>` | Initiates the Compass component. **Required** | | ||
| | `.pf-v6-c-compass__header` | `<div>` | Initiates the Compass header. **Required** | | ||
| | `.pf-v6-c-compass__logo` | `<div>` | Initiates the Compass logo header. | | ||
| | `.pf-v6-c-compass__nav` | `<div>` | Initiates the Compass nav. | | ||
| | `.pf-v6-c-compass__profile` | `<div>` | Initiates the Compass profile. | | ||
| | `.pf-v6-c-compass__sidebar` | `<div>` | Initiates a Compass sidebar. **Required** | | ||
| | `.pf-v6-c-compass__main` | `<div>` | Initiates the Compass main wrapper. **Required** | | ||
| | `.pf-v6-c-compass__main-header` | `<div>` | Initiates the Compass main header. | | ||
| | `.pf-v6-c-compass__main-header-content` | `<div>` | Initiates the Compass main header content. This should be passed into a `.pf-v6-c-compass__panel` component. | | ||
| | `.pf-v6-c-compass__main-header-title` | `<div>` | Initiates a title within the Compass main header content. | | ||
| | `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the Compass main header content. | | ||
| | `.pf-v6-c-compass__content` | `<div>` | Initiates the Compass content. **Required** | | ||
| | `.pf-v6-c-compass__main-footer` | `<div>` | Initiates the Compass main footer. **Required** | | ||
| | `.pf-v6-c-compass__panel` | `<div>` | Initiates a Compass panel. | | ||
| | `.pf-v6-c-compass__nav` | `<div>` | Initiates a Compass container for site navigation. | | ||
| | `.pf-v6-c-compass__nav-content` | `<div>` | Initiates a Compass container for navigation content. | | ||
| | `.pf-v6-c-compass__nav-home` | `<div>` | Initiates a container for Compass home button. | | ||
| | `.pf-v6-c-compass__nav-main` | `<div>` | Initiates a container for Compass navigation main content. | | ||
| | `.pf-v6-c-compass__nav-search` | `<div>` | Initiates a container for Compass search button. | | ||
| | `.pf-v6-c-compass__hero` | `<div>` | Initiates a Compass hero. | | ||
| | `.pf-v6-c-compass__footer` | `<div>` | Initiates the Compass footer. | | ||
| | `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the Compass message bar. | |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, check if the file exists and get its total line count
wc -l src/patternfly/components/Compass/examples/Compass.mdRepository: patternfly/patternfly
Length of output: 122
🏁 Script executed:
# Read the specific lines mentioned in the review (85-110) to verify the duplicate
sed -n '85,110p' src/patternfly/components/Compass/examples/Compass.md | cat -nRepository: patternfly/patternfly
Length of output: 2555
🏁 Script executed:
# Check git history for recent changes to this file
git log --oneline -20 -- src/patternfly/components/Compass/examples/Compass.mdRepository: patternfly/patternfly
Length of output: 111
🏁 Script executed:
# Check if .pf-v6-c-compass__nav selector is defined in the CSS/SCSS files to understand its intended purpose
find . -type f \( -name "*.scss" -o -name "*.css" \) -path "*/compass/*" | head -20Repository: patternfly/patternfly
Length of output: 47
🏁 Script executed:
# Search for .pf-v6-c-compass__nav in CSS/SCSS files to understand how it's used
rg '\.pf-v6-c-compass__nav' --type scss --type css -A 2Repository: patternfly/patternfly
Length of output: 93
🏁 Script executed:
# Find SCSS files in the compass directory
find . -path "*/compass/*" -name "*.scss" -o -path "*/compass/*" -name "*.css" 2>/dev/null | head -20Repository: patternfly/patternfly
Length of output: 47
🏁 Script executed:
# Search for .pf-v6-c-compass__nav in all files to understand its purpose
rg '\.pf-v6-c-compass__nav' -A 2 -B 1 | head -50Repository: patternfly/patternfly
Length of output: 2780
🏁 Script executed:
# Check the structure of compass component directory
find . -path "*/compass/*" -type f | head -30Repository: patternfly/patternfly
Length of output: 434
Resolve duplicate .pf-v6-c-compass__nav entry in the Usage table.
Lines 90 and 101 both document .pf-v6-c-compass__nav with conflicting descriptions:
- Line 90: "Initiates the Compass nav."
- Line 101: "Initiates a Compass container for site navigation."
The selector appears to be used in two different contexts (header navigation and sidebar navigation container), but documenting the same class twice with different descriptions creates ambiguity in the public API documentation. Consolidate into a single entry with a description that accurately covers the selector's purpose, or clarify whether these should be distinct selectors.
🤖 Prompt for AI Agents
In @src/patternfly/components/Compass/examples/Compass.md around lines 87 - 108,
The Usage table contains a duplicate selector `.pf-v6-c-compass__nav` with two
different descriptions; decide whether these represent the same element or two
distinct classes (e.g., header nav vs sidebar nav). If they are the same, remove
one row and replace the remaining description for `.pf-v6-c-compass__nav` with a
consolidated description such as "Initiates the Compass navigation container
(used for header or sidebar navigation)" that covers both contexts; if they are
distinct, rename one selector to the correct class (e.g.,
`.pf-v6-c-compass__nav-home` or `.pf-v6-c-compass__nav-container`) and update
its description accordingly so each selector is unique and unambiguous.
There was a problem hiding this comment.
@mcoker do we want to remove one of the .pf-v6-c-compass__nav from this table: https://pf-pr-8013.surge.sh/ai/generative-uis/compass#usage, or is it purposeful to have both?
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
mcoker
left a comment
There was a problem hiding this comment.
Just a few bits, lemme know if any of it is unclear
| ### Card view | ||
|
|
||
| This demo populates the main Compass section with a card view, which is one of the more common page types used within a Compass layout. In this demo, the page includes: | ||
| - A `.pf-v6-c-compass__main-header` that contains the page title, any toolbar, or action items. |
There was a problem hiding this comment.
Hm... "that contains the page title, any toolbar, or action items" reads like it's one of those 3?
For this demo it includes the title and an action list with buttons. Technically the main-header element can hold any of the following
- Whatever you want. You can not pass a title or toolbar/actions to it and put anything/any layout in it you want.
- Title
- Toolbar/actions (they're left aligned if there is no title)
- Both a title and toolbar/actions
Might read ok as "that contains the page title and toolbar or action items"?
There was a problem hiding this comment.
ah good catch. I would want it to read as if it is explaining the specific demo, so maybe "that contains the page title and toolbar with action items"
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In @src/patternfly/components/Compass/examples/Compass.md:
- Around line 87-117: Change the wording for
.pf-v6-c-compass__main-header-content to clarify structure: replace "This should
be passed into a .pf-v6-c-compass__panel component." with something like "This
should be nested within a .pf-v6-c-compass__panel component." Update the text in
the Compass.md table row for .pf-v6-c-compass__main-header-content to use
"nested within" (or "wrapped within") so it accurately reflects the relationship
shown in the examples.
In @src/patternfly/demos/Compass/examples/Compass.md:
- Around line 205-209: Replace the phrase "all of the content" with the more
concise "all the content" in the Compass demo description inside the Markdown on
the line that currently reads about wrapping content with
`.pf-v6-c-compass__panel`; update the sentence in the paragraph that references
`.pf-v6-c-compass__panel` and `.pf-v6-c-compass__content` accordingly to use
"all the content".
- Around line 20-25: In the demo description paragraph that begins "This demo
page includes:", replace the phrase "all of the contents" with the more concise
"all the contents" so the sentence reads that the `.pf-v6-c-compass__content`
wraps "all the contents" rather than "all of the contents".
📜 Review details
Configuration used: Repository UI (base), Organization UI (inherited)
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/patternfly/components/Compass/examples/Compass.mdsrc/patternfly/demos/Compass/examples/Compass.md
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2026-01-02T16:12:05.437Z
Learnt from: srambach
Repo: patternfly/patternfly PR: 8025
File: src/patternfly/components/Toolbar/examples/Toolbar.md:765-766
Timestamp: 2026-01-02T16:12:05.437Z
Learning: In the PatternFly project (patternfly/patternfly repository), markdown documentation files in src/patternfly/components/*/examples/*.md do not use blank lines after headings. This is an intentional style choice for consistency across the documentation.
Applied to files:
src/patternfly/demos/Compass/examples/Compass.md
📚 Learning: 2026-01-02T16:11:59.444Z
Learnt from: srambach
Repo: patternfly/patternfly PR: 8025
File: src/patternfly/components/Toolbar/examples/Toolbar.md:765-766
Timestamp: 2026-01-02T16:11:59.444Z
Learning: In the PatternFly repository (patternfly/patternfly), markdown documentation files under src/patternfly/components/*/examples/*.md intentionally omit blank lines after headings. Treat this as the standard style for these files. During reviews, verify that these files follow this convention (no blank line after headings) and do not enforce inserting blank lines in this path unless there is an explicit exception noted in project guidelines.
Applied to files:
src/patternfly/components/Compass/examples/Compass.md
🪛 LanguageTool
src/patternfly/demos/Compass/examples/Compass.md
[style] ~24-~24: Consider removing “of” to be more concise
Context: ...ut a .pf-v6-c-compass__panel wrapping all of the contents. This removes the rounded-rect...
(ALL_OF_THE)
[style] ~208-~208: Consider removing “of” to be more concise
Context: ...ut a .pf-v6-c-compass__panel wrapping all of the content, there is no rounded-rectangle ...
(ALL_OF_THE)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-upload
🔇 Additional comments (3)
src/patternfly/demos/Compass/examples/Compass.md (2)
10-14: LGTM! Clear and helpful documentation.The descriptive text effectively explains the card view demo structure and correctly references the Compass class names.
382-384: LGTM! Clear and concise documentation.The description effectively communicates the drawer positioning within the Compass layout.
src/patternfly/components/Compass/examples/Compass.md (1)
12-20: LGTM! Excellent comprehensive documentation.The "Basic" section provides clear, well-structured documentation of the Compass layout hierarchy. The use of bolded labels and detailed descriptions helps users understand the component structure effectively.
|
|
||
| This demo populates the main Compass section with a dashboard, which is often used as the landing page within a Compass layout. This demo page includes: | ||
|
|
||
| - A `.pf-v6-c-hero` component positioned between the top navigation and the main page content, containing promotional or introductory content with important CTAs. | ||
| - A `.pf-v6-c-compass__content` without a `.pf-v6-c-compass__panel` wrapping all of the contents. This removes the rounded-rectangle container that typically serves as the main content background. Instead, the content area is a dashboard (a grid of cards), and each card is individually wrapped in`.pf-v6-c-compass__panel` to provide the rounded-rectangle styling. | ||
|
|
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider minor wording improvement for conciseness.
The descriptive text is clear and accurate. For slightly improved conciseness, consider "all the contents" instead of "all of the contents" on line 24.
Suggested edit for conciseness
-- A `.pf-v6-c-compass__content` without a `.pf-v6-c-compass__panel` wrapping all of the contents. This removes the rounded-rectangle container that typically serves as the main content background. Instead, the content area is a dashboard (a grid of cards), and each card is individually wrapped in`.pf-v6-c-compass__panel` to provide the rounded-rectangle styling.
+- A `.pf-v6-c-compass__content` without a `.pf-v6-c-compass__panel` wrapping all the contents. This removes the rounded-rectangle container that typically serves as the main content background. Instead, the content area is a dashboard (a grid of cards), and each card is individually wrapped in`.pf-v6-c-compass__panel` to provide the rounded-rectangle styling.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| This demo populates the main Compass section with a dashboard, which is often used as the landing page within a Compass layout. This demo page includes: | |
| - A `.pf-v6-c-hero` component positioned between the top navigation and the main page content, containing promotional or introductory content with important CTAs. | |
| - A `.pf-v6-c-compass__content` without a `.pf-v6-c-compass__panel` wrapping all of the contents. This removes the rounded-rectangle container that typically serves as the main content background. Instead, the content area is a dashboard (a grid of cards), and each card is individually wrapped in`.pf-v6-c-compass__panel` to provide the rounded-rectangle styling. | |
| This demo populates the main Compass section with a dashboard, which is often used as the landing page within a Compass layout. This demo page includes: | |
| - A `.pf-v6-c-hero` component positioned between the top navigation and the main page content, containing promotional or introductory content with important CTAs. | |
| - A `.pf-v6-c-compass__content` without a `.pf-v6-c-compass__panel` wrapping all the contents. This removes the rounded-rectangle container that typically serves as the main content background. Instead, the content area is a dashboard (a grid of cards), and each card is individually wrapped in`.pf-v6-c-compass__panel` to provide the rounded-rectangle styling. |
🧰 Tools
🪛 LanguageTool
[style] ~24-~24: Consider removing “of” to be more concise
Context: ...ut a .pf-v6-c-compass__panel wrapping all of the contents. This removes the rounded-rect...
(ALL_OF_THE)
🤖 Prompt for AI Agents
In @src/patternfly/demos/Compass/examples/Compass.md around lines 20 - 25, In
the demo description paragraph that begins "This demo page includes:", replace
the phrase "all of the contents" with the more concise "all the contents" so the
sentence reads that the `.pf-v6-c-compass__content` wraps "all the contents"
rather than "all of the contents".
|
|
||
| This demo places multiple sections within the main Compass section, with each section containing a card view. | ||
|
|
||
| Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rounded-rectangle container as the main content background. Instead, the `.pf-v6-c-compass__content` is a grid with 2 independently scrollable `.pf-v6-c-compass__panel` elements. | ||
|
|
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider minor wording improvement for conciseness.
The descriptive text effectively explains the multiple sections layout. For slightly improved conciseness, consider "all the content" instead of "all of the content" on line 208.
Suggested edit for conciseness
-Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rounded-rectangle container as the main content background. Instead, the `.pf-v6-c-compass__content` is a grid with 2 independently scrollable `.pf-v6-c-compass__panel` elements.
+Without a `.pf-v6-c-compass__panel` wrapping all the content, there is no rounded-rectangle container as the main content background. Instead, the `.pf-v6-c-compass__content` is a grid with 2 independently scrollable `.pf-v6-c-compass__panel` elements.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| This demo places multiple sections within the main Compass section, with each section containing a card view. | |
| Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rounded-rectangle container as the main content background. Instead, the `.pf-v6-c-compass__content` is a grid with 2 independently scrollable `.pf-v6-c-compass__panel` elements. | |
| This demo places multiple sections within the main Compass section, with each section containing a card view. | |
| Without a `.pf-v6-c-compass__panel` wrapping all the content, there is no rounded-rectangle container as the main content background. Instead, the `.pf-v6-c-compass__content` is a grid with 2 independently scrollable `.pf-v6-c-compass__panel` elements. | |
🧰 Tools
🪛 LanguageTool
[style] ~208-~208: Consider removing “of” to be more concise
Context: ...ut a .pf-v6-c-compass__panel wrapping all of the content, there is no rounded-rectangle ...
(ALL_OF_THE)
🤖 Prompt for AI Agents
In @src/patternfly/demos/Compass/examples/Compass.md around lines 205 - 209,
Replace the phrase "all of the content" with the more concise "all the content"
in the Compass demo description inside the Markdown on the line that currently
reads about wrapping content with `.pf-v6-c-compass__panel`; update the sentence
in the paragraph that references `.pf-v6-c-compass__panel` and
`.pf-v6-c-compass__content` accordingly to use "all the content".
mcoker
left a comment
There was a problem hiding this comment.
Just a small case thing, otherwise LGTM!
Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In @src/patternfly/components/Compass/examples/Compass.md:
- Line 117: Add a single trailing newline to the end of the Markdown file so the
last line (the table row containing `.pf-m-expanded` and the selectors
`.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`,
`.pf-v6-c-compass__main-footer`, `.pf-v6-c-compass__footer`) is followed by
exactly one newline character; update the file `Compass.md` to ensure it ends
with that single newline.
- Around line 87-117: The table incorrectly marks .pf-v6-c-compass__header,
.pf-v6-c-compass__sidebar, and .pf-v6-c-compass__main-footer as **Required**
even though the "Docked" example omits them; update the Compass documentation to
either remove the **Required** marker for those classes or change the wording to
indicate they are "Required for non-docked/default layouts" (or similar) so the
variant-specific requirement is clear; modify the rows for
`.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`, and
`.pf-v6-c-compass__main-footer` in the table to reflect the chosen approach.
- Around line 14-19: The Documentation Usage table is missing an entry for
.pf-v6-c-compass__hero used in the example; update the Compass documentation
Usage table to add a row describing .pf-v6-c-compass__hero, explaining that it
wraps the hero region inside .pf-v6-c-compass__main (used in the example code
block where .pf-v6-c-compass__hero appears) and note its purpose/expected
content and any modifiers if applicable so the class is documented consistently
with other Compass classes.
📜 Review details
Configuration used: Repository UI (base), Organization UI (inherited)
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/patternfly/components/Compass/examples/Compass.md
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2026-01-02T16:11:59.444Z
Learnt from: srambach
Repo: patternfly/patternfly PR: 8025
File: src/patternfly/components/Toolbar/examples/Toolbar.md:765-766
Timestamp: 2026-01-02T16:11:59.444Z
Learning: In the PatternFly repository (patternfly/patternfly), markdown documentation files under src/patternfly/components/*/examples/*.md intentionally omit blank lines after headings. Treat this as the standard style for these files. During reviews, verify that these files follow this convention (no blank line after headings) and do not enforce inserting blank lines in this path unless there is an explicit exception noted in project guidelines.
Applied to files:
src/patternfly/components/Compass/examples/Compass.md
🪛 markdownlint-cli2 (0.18.1)
src/patternfly/components/Compass/examples/Compass.md
12-12: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Above
(MD022, blanks-around-headings)
117-117: Files should end with a single newline character
(MD047, single-trailing-newline)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-upload
🔇 Additional comments (1)
src/patternfly/components/Compass/examples/Compass.md (1)
12-13: LGTM: Clear example naming.Renaming from "Default" to "Basic" improves clarity and aligns with PatternFly naming conventions.
| In a basic Compass layout, the page structure is defined by the order of elements nested within the main `.pf-v6-c-compass` container: | ||
| - **Header:** Content rendered at the top of the page (`.pf-v6-c-compass__header`), typically containing a logo (`.pf-v6-c-compass__logo`), middle navigation (`.pf-v6-c-compass__nav`), and profile (`.pf-v6-c-compass__profile`). | ||
| - **Start sidebar:** Content rendered at the horizontal start of the page (by default, the left side). In this example, a `.pf-v6-c-compass__sidebar` with the `.pf-m-start` modifier. | ||
| - **Main:** Content rendered in the center of the page. The `.pf-v6-c-compass__main` wrapper contains a [hero component](/components/hero), the main header (`.pf-v6-c-compass__main-header`), the content area (`.pf-v6-c-compass__content`), and the main footer (`.pf-v6-c-compass__main-footer`) with the message bar. | ||
| - **End sidebar:** Content rendered at the horizontal end of the page (by default, the right side). In this example, a `.pf-v6-c-compass__sidebar` with the `.pf-m-end` modifier. | ||
| - **Footer:** Content rendered at the bottom of the page (`.pf-v6-c-compass__footer`). |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# First, let's read the Compass.md file to see the full context
wc -l src/patternfly/components/Compass/examples/Compass.mdRepository: patternfly/patternfly
Length of output: 122
🏁 Script executed:
# Read the file to see the table and code examples
cat -n src/patternfly/components/Compass/examples/Compass.md | head -100Repository: patternfly/patternfly
Length of output: 5256
🏁 Script executed:
# Search for hero component documentation in the components directory
fd -type f -name "Hero.md" src/patternfly/components/Repository: patternfly/patternfly
Length of output: 235
🏁 Script executed:
# Also check if there's a hero component folder
fd -type d -name "*[Hh]ero*" src/patternfly/components/Repository: patternfly/patternfly
Length of output: 235
🏁 Script executed:
# Read the remaining lines of the file
tail -20 src/patternfly/components/Compass/examples/Compass.mdRepository: patternfly/patternfly
Length of output: 2077
🏁 Script executed:
# Search for hero component documentation
fd -f "Hero.md" src/patternfly/components/ -o -name "*hero*" -type f | grep -i "\.md"Repository: patternfly/patternfly
Length of output: 295
🏁 Script executed:
# Also search for any documentation or examples about hero component
rg -i "hero" src/patternfly/components/Hero/ 2>/dev/null | head -20Repository: patternfly/patternfly
Length of output: 1944
🏁 Script executed:
# Check if hero component exists in the structure
find src/patternfly/components/ -type d -iname "*hero*"Repository: patternfly/patternfly
Length of output: 95
🏁 Script executed:
# Search for Hero component documentation file
find src/patternfly/components/Hero -name "*.md" -type fRepository: patternfly/patternfly
Length of output: 112
🏁 Script executed:
# Check the Hero component ID to confirm the link path
rg -l "id.*[Hh]ero" src/patternfly/components/Hero/Repository: patternfly/patternfly
Length of output: 153
🏁 Script executed:
# Look at Hero.md to see its documentation structure
head -20 src/patternfly/components/Hero/examples/Hero.md 2>/dev/null || find src/patternfly/components/Hero -name "*.md" | xargs head -20Repository: patternfly/patternfly
Length of output: 291
Add .pf-v6-c-compass__hero to the Documentation Usage table.
The .pf-v6-c-compass__hero class is used in the code example (line 38) but is missing from the Documentation Usage table. Add an entry to document its purpose and usage for consistency with other Compass classes.
🤖 Prompt for AI Agents
In @src/patternfly/components/Compass/examples/Compass.md around lines 14 - 19,
The Documentation Usage table is missing an entry for .pf-v6-c-compass__hero
used in the example; update the Compass documentation Usage table to add a row
describing .pf-v6-c-compass__hero, explaining that it wraps the hero region
inside .pf-v6-c-compass__main (used in the example code block where
.pf-v6-c-compass__hero appears) and note its purpose/expected content and any
modifiers if applicable so the class is documented consistently with other
Compass classes.
| | `.pf-v6-c-compass` | `<div>` | Initiates the Compass component. **Required** | | ||
| | `.pf-v6-c-compass__header` | `<div>` | Initiates the Compass header. **Required** | | ||
| | `.pf-v6-c-compass__logo` | `<div>` | Initiates the Compass logo header. | | ||
| | `.pf-v6-c-compass__dock` | `<div>` | Initiates the Compass dock. | | ||
| | `.pf-v6-c-compass__profile` | `<div>` | Initiates the Compass profile. | | ||
| | `.pf-v6-c-compass__sidebar` | `<div>` | Initiates a Compass sidebar. **Required** | | ||
| | `.pf-v6-c-compass__main` | `<div>` | Initiates the Compass main wrapper. **Required** | | ||
| | `.pf-v6-c-compass__main-header` | `<div>` | Initiates the Compass main header. | | ||
| | `.pf-v6-c-compass__main-header-content` | `<div>` | Initiates the Compass main header content. This should be passed into a `.pf-v6-c-compass__panel` component. | | ||
| | `.pf-v6-c-compass__main-header-title` | `<div>` | Initiates a title within the Compass main header content. | | ||
| | `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the Compass main header content. | | ||
| | `.pf-v6-c-compass__content` | `<div>` | Initiates the Compass content. **Required** | | ||
| | `.pf-v6-c-compass__main-footer` | `<div>` | Initiates the Compass main footer. **Required** | | ||
| | `.pf-v6-c-compass__panel` | `<div>` | Initiates a Compass panel. | | ||
| | `.pf-v6-c-compass__nav` | `<div>` | Initiates a Compass container for site navigation. | | ||
| | `.pf-v6-c-compass__nav-content` | `<div>` | Initiates a Compass container for navigation content. | | ||
| | `.pf-v6-c-compass__nav-home` | `<div>` | Initiates a container for Compass home button. | | ||
| | `.pf-v6-c-compass__nav-main` | `<div>` | Initiates a container for Compass navigation main content. | | ||
| | `.pf-v6-c-compass__nav-search` | `<div>` | Initiates a container for Compass search button. | | ||
| | `.pf-v6-c-compass__footer` | `<div>` | Initiates the Compass footer. | | ||
| | `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the Compass message bar. | | ||
| | `.pf-m-dock` | `.pf-v6-c-compass` | Modifies for dock layout. | | ||
| | `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. | | ||
| | `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a compass sidebar for start styles. **Required** | | ||
| | `.pf-m-end` | `.pf-v6-c-compass__sidebar` | Modifies a compass sidebar for end styles. **Required** | | ||
| | `.pf-m-no-border` | `.pf-v6-c-compass__panel` | Modifies a compass panel to remove the border. | | ||
| | `.pf-m-no-padding` | `.pf-v6-c-compass__panel` | Modifies a compass panel to remove the padding. | | ||
| | `.pf-m-full-height` | `.pf-v6-c-compass__panel` | Modifies a compass panel to be full height. | | ||
| | `.pf-m-pill` | `.pf-v6-c-compass__panel` | Modifies a compass panel to have a pill shaped border radius. | | ||
| | `.pf-m-scrollable` | `.pf-v6-c-compass__panel` | Modifies a compass panel to scroll its overflow. | | ||
| | `.pf-m-expanded` | `.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`, `.pf-v6-c-compass__main-footer`, `.pf-v6-c-compass__footer` | Modifies a compass section for expanded styles. | | ||
| | `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a Compass sidebar for start styles. **Required** | | ||
| | `.pf-m-end` | `.pf-v6-c-compass__sidebar` | Modifies a Compass sidebar for end styles. **Required** | | ||
| | `.pf-m-no-border` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to remove the border. | | ||
| | `.pf-m-no-padding` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to remove the padding. | | ||
| | `.pf-m-full-height` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to be full height. | | ||
| | `.pf-m-pill` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to have a pill-shaped border radius. | | ||
| | `.pf-m-scrollable` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to scroll its overflow. | | ||
| | `.pf-m-expanded` | `.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`, `.pf-v6-c-compass__main-footer`, `.pf-v6-c-compass__footer` | Modifies a Compass section for expanded styles. | No newline at end of file |
There was a problem hiding this comment.
Reconsider "Required" markers for optional elements.
Several classes are marked as Required but are not present in all examples, specifically the "Docked" example (lines 60-81):
- Line 88:
.pf-v6-c-compass__headermarked as required, but absent in the "Docked" example - Line 92:
.pf-v6-c-compass__sidebarmarked as required, but absent in the "Docked" example - Line 99:
.pf-v6-c-compass__main-footermarked as required, but absent in the "Docked" example
These elements appear to be optional based on the layout variant. Consider either:
- Removing the Required markers from these optional elements, or
- Clarifying that these are required only for specific layout variants
📝 Suggested clarification
For optional elements, consider wording like:
-| `.pf-v6-c-compass__header` | `<div>` | Initiates the Compass header. **Required** |
+| `.pf-v6-c-compass__header` | `<div>` | Initiates the Compass header. |Or if they're required for specific layouts:
-| `.pf-v6-c-compass__header` | `<div>` | Initiates the Compass header. **Required** |
+| `.pf-v6-c-compass__header` | `<div>` | Initiates the Compass header. **Required for basic layout** |🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
117-117: Files should end with a single newline character
(MD047, single-trailing-newline)
🤖 Prompt for AI Agents
In @src/patternfly/components/Compass/examples/Compass.md around lines 87 - 117,
The table incorrectly marks .pf-v6-c-compass__header, .pf-v6-c-compass__sidebar,
and .pf-v6-c-compass__main-footer as **Required** even though the "Docked"
example omits them; update the Compass documentation to either remove the
**Required** marker for those classes or change the wording to indicate they are
"Required for non-docked/default layouts" (or similar) so the variant-specific
requirement is clear; modify the rows for `.pf-v6-c-compass__header`,
`.pf-v6-c-compass__sidebar`, and `.pf-v6-c-compass__main-footer` in the table to
reflect the chosen approach.
| | `.pf-m-full-height` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to be full height. | | ||
| | `.pf-m-pill` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to have a pill-shaped border radius. | | ||
| | `.pf-m-scrollable` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to scroll its overflow. | | ||
| | `.pf-m-expanded` | `.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`, `.pf-v6-c-compass__main-footer`, `.pf-v6-c-compass__footer` | Modifies a Compass section for expanded styles. | No newline at end of file |
There was a problem hiding this comment.
Add trailing newline at end of file.
The file should end with a single newline character after the last line of content.
📝 Suggested fix
| `.pf-m-expanded` | `.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`, `.pf-v6-c-compass__main-footer`, `.pf-v6-c-compass__footer` | Modifies a Compass section for expanded styles. |
+📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | `.pf-m-expanded` | `.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`, `.pf-v6-c-compass__main-footer`, `.pf-v6-c-compass__footer` | Modifies a Compass section for expanded styles. | | |
| | `.pf-m-expanded` | `.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`, `.pf-v6-c-compass__main-footer`, `.pf-v6-c-compass__footer` | Modifies a Compass section for expanded styles. | | |
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
117-117: Files should end with a single newline character
(MD047, single-trailing-newline)
🤖 Prompt for AI Agents
In @src/patternfly/components/Compass/examples/Compass.md at line 117, Add a
single trailing newline to the end of the Markdown file so the last line (the
table row containing `.pf-m-expanded` and the selectors
`.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`,
`.pf-v6-c-compass__main-footer`, `.pf-v6-c-compass__footer`) is followed by
exactly one newline character; update the file `Compass.md` to ensure it ends
with that single newline.
|
🎉 This PR is included in version 6.5.0-prerelease.35 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Closes #8003
Some small, simple things. Also tried to mirror the React docs, but open to building off of this however we want
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.