Skip to content

Compass: Design guidelines and demo updates - #5051

Merged
andrew-ronaldson merged 7 commits into
patternfly:mainfrom
andrew-ronaldson:compass
Aug 4, 2026
Merged

Compass: Design guidelines and demo updates#5051
andrew-ronaldson merged 7 commits into
patternfly:mainfrom
andrew-ronaldson:compass

Conversation

@andrew-ronaldson

Copy link
Copy Markdown
Contributor

Closes #5050

@dlabaj dlabaj 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.

Undo the changes to webpack.base.config.js. They are not needed and are causing the build of the documentatoin site to fail.

Comment thread packages/documentation-framework/scripts/webpack/webpack.base.config.js Outdated
Comment thread packages/documentation-framework/scripts/webpack/webpack.base.config.js Outdated
Removed symlink path for workspace builds and disabled symlinks in the Webpack configuration.
@patternfly-build

patternfly-build commented Jul 8, 2026

Copy link
Copy Markdown
Collaborator

Preview: https://pf-org--pr-5051-site.surge.sh

@andrew-ronaldson
andrew-ronaldson requested review from dlabaj and phcox July 8, 2026 20:01

@dlabaj dlabaj 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.

LGTM!


The main content region fills the center of the viewport. It typically contains:

- **Main header:** A title area or hero section that contextualizes the current view.

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 suggest using the same names in this list as the ones that are used in the image above. That said, using "Main header" or "Header content" runs a risk of creating confusion with the distinct Header section. "Hero area" or "Hero section" might work.

- The glass theme is typically applied globally to the `html` element, similar to enabling dark mode.
- Glass mode works best with a full-page background image.
- Wrap glass-styled containers in a `Panel` with the `isGlass` modifier.
- Do not nest glass-styled `Panel` stacks, as this can cause unintended visual artifacts.

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.

Would "unintended visual artifacts" mean legibility and accessibility issues? If so, I would go ahead and just say that, or just add ", such as legibility and accessibility issues."

@andrew-ronaldson
andrew-ronaldson requested a review from dlabaj July 9, 2026 12:11
@thatblindgeye
thatblindgeye requested a review from phcox August 3, 2026 13:39

@phcox phcox 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.

LGTM

@andrew-ronaldson
andrew-ronaldson merged commit 102abd7 into patternfly:main Aug 4, 2026
5 of 6 checks passed
@patternfly-build

Copy link
Copy Markdown
Collaborator

Your changes have been released in:

  • @patternfly/ast-helpers@1.4.0-alpha.402
  • @patternfly/documentation-framework@6.51.1

Thanks for your contribution! 🎉

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Design Guidelines for Compass

5 participants