Skip to content

docs(compass): content review and edits#8013

Merged
mcoker merged 7 commits into
patternfly:mainfrom
edonehoo:iss8003
Jan 13, 2026
Merged

docs(compass): content review and edits#8013
mcoker merged 7 commits into
patternfly:mainfrom
edonehoo:iss8003

Conversation

@edonehoo

@edonehoo edonehoo commented Dec 2, 2025

Copy link
Copy Markdown
Contributor

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

  • Documentation
    • Renamed "Default" to "Basic" and added a descriptive overview of the Compass layout (header, sidebars, main, panels, footer, message bar)
    • Revised public selector and modifier docs to new Compass naming, marked key layout elements as required, and clarified modifier behavior
    • Added documentation entries for header, logo, dock, profile, navigation, sidebars, main areas, panels, footer, and message bar
    • Expanded demo narratives for Card view, Dashboard, Multiple sections, and With drawer

✏️ Tip: You can customize this high-level summary in your review settings.

@patternfly-build

patternfly-build commented Dec 2, 2025

Copy link
Copy Markdown
Collaborator

@edonehoo edonehoo requested a review from mcoker December 2, 2025 20:59

@mcoker mcoker left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread src/patternfly/components/Compass/examples/Compass.md Outdated
Comment thread src/patternfly/components/Compass/examples/Compass.md Outdated
## Examples
### Card view

This demo places a card view within the main Compass section.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

  1. Card view - this is a normal, common compass page. It has
  • A .pf-v6-c-compass__main-header that includes the page title and any toolbar/action stuff
  • A .pf-v6-c-compass__content and 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.
  1. 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-hero that's like a big fancy section, probably with some important CTAs.
  • A .pf-v6-c-compass__content without .pf-v6-c-compass__panel wrapping 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.
  1. A similar setup as the dashboard above, where there is no .pf-v6-c-compass__panel wrapping all of the content - instead it's a grid with 2 independently scrollable .pf-v6-c-compass__panel elements. 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 😅

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

edonehoo and others added 3 commits December 9, 2025 08:51
@coderabbitai

coderabbitai Bot commented Jan 5, 2026

Copy link
Copy Markdown
Contributor

Walkthrough

Renames 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

Cohort / File(s) Summary
Compass component documentation
src/patternfly/components/Compass/examples/Compass.md
Renamed example from "Default" to "Basic"; added detailed layout overview (header, start/end sidebars, main, footer); replaced legacy selector rows with the pf-v6-c-compass public API; added many new public selectors (header, logo, dock, profile, sidebar, main, main-header and subparts, content, main-footer, panel, nav and nav subselectors, footer, message-bar) and public modifiers (pf-m-start, pf-m-end, pf-m-no-border, pf-m-no-padding, pf-m-full-height, pf-m-pill, pf-m-scrollable, pf-m-expanded).
Compass demo documentation
src/patternfly/demos/Compass/examples/Compass.md
Added introductory/descriptive paragraphs to demo pages: Card view, Dashboard, Multiple sections, and With drawer (content-only additions).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title follows conventional commit format with 'docs' type prefix and clearly describes the changes as documentation review and edits for the Compass component.
Linked Issues check ✅ Passed The PR addresses the core objective from linked issue #8003 by reviewing and updating Generative UI documentation, specifically the Compass component documentation.
Out of Scope Changes check ✅ Passed All changes are directly related to documentation updates for the Compass component, including example descriptions, public selectors, and modifiers documentation.

✏️ 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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot requested a review from kmcfaul January 5, 2026 18:59

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 2854906 and ce581f7.

📒 Files selected for processing (2)
  • src/patternfly/components/Compass/examples/Compass.md
  • src/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.

Comment thread src/patternfly/components/Compass/examples/Compass.md Outdated
Comment thread src/patternfly/demos/Compass/examples/Compass.md
Comment thread src/patternfly/demos/Compass/examples/Compass.md Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between ce581f7 and 2480439.

📒 Files selected for processing (2)
  • src/patternfly/components/Compass/examples/Compass.md
  • src/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.

Comment thread src/patternfly/components/Compass/examples/Compass.md Outdated
Comment on lines +87 to +108
| `.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. |

@coderabbitai coderabbitai Bot Jan 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

# First, check if the file exists and get its total line count
wc -l src/patternfly/components/Compass/examples/Compass.md

Repository: 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 -n

Repository: 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.md

Repository: 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 -20

Repository: 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 2

Repository: 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 -20

Repository: 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 -50

Repository: patternfly/patternfly

Length of output: 2780


🏁 Script executed:

# Check the structure of compass component directory
find . -path "*/compass/*" -type f | head -30

Repository: 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.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

Comment thread src/patternfly/demos/Compass/examples/Compass.md
Comment thread src/patternfly/demos/Compass/examples/Compass.md
Comment thread src/patternfly/demos/Compass/examples/Compass.md

@mcoker mcoker left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a few bits, lemme know if any of it is unclear

Comment thread src/patternfly/components/Compass/examples/Compass.md Outdated
Comment thread src/patternfly/components/Compass/examples/Compass.md Outdated
Comment thread src/patternfly/components/Compass/examples/Compass.md Outdated
Comment thread src/patternfly/components/Compass/examples/Compass.md Outdated
Comment thread src/patternfly/components/Compass/examples/Compass.md
### 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.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"

Comment thread src/patternfly/demos/Compass/examples/Compass.md Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 2480439 and 19effe8.

📒 Files selected for processing (2)
  • src/patternfly/components/Compass/examples/Compass.md
  • src/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.

Comment on lines +20 to +25

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.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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.

Suggested change
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".

Comment on lines +205 to +209

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.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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.

Suggested change
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".

@edonehoo edonehoo requested a review from mcoker January 12, 2026 18:23

@mcoker mcoker left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a small case thing, otherwise LGTM!

Comment thread src/patternfly/components/Compass/examples/Compass.md Outdated
Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 19effe8 and 141ff26.

📒 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.

Comment on lines +14 to +19
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`).

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 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.md

Repository: 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 -100

Repository: 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.md

Repository: 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 -20

Repository: 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 f

Repository: 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 -20

Repository: 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.

Comment on lines +87 to +117
| `.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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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__header marked as required, but absent in the "Docked" example
  • Line 92: .pf-v6-c-compass__sidebar marked as required, but absent in the "Docked" example
  • Line 99: .pf-v6-c-compass__main-footer marked as required, but absent in the "Docked" example

These elements appear to be optional based on the layout variant. Consider either:

  1. Removing the Required markers from these optional elements, or
  2. 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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.

Suggested change
| `.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.

@mcoker mcoker merged commit f250314 into patternfly:main Jan 13, 2026
5 checks passed
@patternfly-build

Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 6.5.0-prerelease.35 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Docs: Review and update Generative UI docs

3 participants