Compass: Design guidelines and demo updates#5051
Conversation
dlabaj
left a comment
dlabaj
left a comment
There was a problem hiding this comment.
Undo the changes to webpack.base.config.js. They are not needed and are causing the build of the documentatoin site to fail.
Removed symlink path for workspace builds and disabled symlinks in the Webpack configuration.
|
|
||
| ### Sidebars | ||
|
|
||
| Compass gives you 2 vertical sidebars — one at the start (left) and one at the end (right) of the page. Use them for contextual actions, secondary navigation, or persistent tooling that doesn't belong in the main content flow. Actions in the sidebars can trigger menus and drawers. |
There was a problem hiding this comment.
"Start" and "end" seem odd to use in this context. They could be interpreted as "top" and bottom" of the page. I suggest omitting them and just using left and right without parentheses.
There was a problem hiding this comment.
start/end also refers to RTL behaviour. For things like padding & margin we use start/end variables so they can flip when RTL is enabled. With the header & footer areas also defined my thought was that they would read as top/bottom.
|
|
||
| - **Main header:** A title area or hero section that contextualizes the current view. | ||
| - **Content area:** The primary body of generated content or interactive data. | ||
| - **Footer:** A persistent input area, typically housing a `MessageBar` for conversational AI interactions. |
There was a problem hiding this comment.
It doesn't seem like "Footer" belongs here, given that it's called out in the image and the supporting text beneath it as its own distinct section, and not in Main Content.
|
|
||
| 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. |
There was a problem hiding this comment.
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.
| ### When not to use Compass | ||
|
|
||
| - **Standard application pages:** For typical create, read, update, and delete (CRUD) pages, data tables, or form-driven workflows that don't involve generative or AI-driven content, use PatternFly's standard [Page](/components/page) component instead. | ||
| - **Embedded content:** Use Compass for top-level, full-page layouts only — not as a nested layout within another page. |
There was a problem hiding this comment.
Kind of a nit, but with the established flow of "Use Compass..." in the previous section, repeating that statement in the Do not use Compass section feels strange. Suggest "Do not use Compass as a nested layout within another page - it is to be used for top-level, full-page layouts only."
| - 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. |
There was a problem hiding this comment.
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."
|
|
||
| ## Content considerations | ||
|
|
||
| - **Main header text:** Keep the main header or hero title concise and action-oriented. For generative UI, this area often reflects the user's current query or context. |
There was a problem hiding this comment.
Again, I suggest using a consistent label for "main header" or "hero title"
4 participants
Closes #5050