@patternfly/patternfly 6.5.0-prerelease.34 → 6.5.0-prerelease.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/base/patternfly-variables.css +340 -14
  2. package/base/patternfly-variables.scss +40 -0
  3. package/base/tokens/tokens-dark.scss +49 -3
  4. package/base/tokens/tokens-default.scss +65 -13
  5. package/base/tokens/tokens-glass-dark.scss +11 -0
  6. package/base/tokens/tokens-glass.scss +11 -0
  7. package/base/tokens/tokens-redhat-dark.scss +14 -0
  8. package/base/tokens/tokens-redhat-glass-dark.scss +18 -0
  9. package/base/tokens/tokens-redhat-glass.scss +17 -0
  10. package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
  11. package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
  12. package/base/tokens/tokens-redhat.scss +15 -0
  13. package/docs/components/Compass/examples/Compass.md +38 -32
  14. package/docs/components/ModalBox/examples/ModalBox.md +1 -1
  15. package/docs/demos/Compass/examples/Compass.md +16 -0
  16. package/package.json +2 -2
  17. package/patternfly-base-no-globals.css +340 -14
  18. package/patternfly-base.css +340 -14
  19. package/patternfly-no-globals.css +340 -14
  20. package/patternfly.css +340 -14
  21. package/patternfly.min.css +1 -1
  22. package/patternfly.min.css.map +1 -1
package/docs/components/Compass/examples/Compass.md CHANGED
@@ -8,7 +8,15 @@ cssPrefix: pf-v6-c-compass
8
8
 
9
9
  ## Examples
10
10
 
11
- ### Default
11
+ ### Basic
12
+
13
+ In a basic Compass layout, the page structure is defined by the order of elements nested within the main `.pf-v6-c-compass` container:
14
+
15
+ * **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`).
16
+ * **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.
17
+ * **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.
18
+ * **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.
19
+ * **Footer:** Content rendered at the bottom of the page (`.pf-v6-c-compass__footer`).
12
20
 
13
21
  ```html isBeta
14
22
  <div class="pf-v6-c-compass pf-m-animate-smoothly">
@@ -77,36 +85,34 @@ cssPrefix: pf-v6-c-compass
77
85
 
78
86
  | Class | Applied to | Outcome |
79
87
  | -- | -- | -- |
80
- | `.pf-v6-c-compass` | `<div>` | Initiates the compass component. **Required** |
81
- | `.pf-v6-c-compass__header` | `<div>` | Initiates the compass header. **Required** |
82
- | `.pf-v6-c-compass__logo` | `<div>` | Initiates the compass logo header. |
83
- | `.pf-v6-c-compass__nav` | `<div>` | Initiates the compass nav. |
84
- | `.pf-v6-c-compass__dock` | `<div>` | Initiates the compass dock. |
85
- | `.pf-v6-c-compass__profile` | `<div>` | Initiates the compass profile. |
86
- | `.pf-v6-c-compass__sidebar` | `<div>` | Initiates a compass sidebar. **Required** |
87
- | `.pf-v6-c-compass__main` | `<div>` | Initiates the compass main wrapper. **Required** |
88
- | `.pf-v6-c-compass__main-header` | `<div>` | Initiates the compass main header. |
89
- | `.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. |
90
- | `.pf-v6-c-compass__main-header-title` | `<div>` | Initiates a title within the compass main header content. |
91
- | `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the compass main header content. |
92
- | `.pf-v6-c-compass__content` | `<div>` | Initiates the compass content. **Required** |
93
- | `.pf-v6-c-compass__main-footer` | `<div>` | Initiates the compass main footer. **Required** |
94
- | `.pf-v6-c-compass__panel` | `<div>` | Initiates a compass panel. |
95
- | `.pf-v6-c-compass__nav` | `<div>` | Initiates a compass container for site navigation. |
96
- | `.pf-v6-c-compass__nav-content` | `<div>` | Initiates a compass container for navigation content. |
97
- | `.pf-v6-c-compass__nav-home` | `<div>` | Initiates a container for compass home button. |
98
- | `.pf-v6-c-compass__nav-main` | `<div>` | Initiates a container for compass navigation main content. |
99
- | `.pf-v6-c-compass__nav-search` | `<div>` | Initiates a container for compass search button. |
100
- | `.pf-v6-c-compass__hero` | `<div>` | Initiates a compass hero. |
101
- | `.pf-v6-c-compass__footer` | `<div>` | Initiates the compass footer. |
102
- | `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the compass message bar. |
88
+ | `.pf-v6-c-compass` | `<div>` | Initiates the Compass component. **Required** |
89
+ | `.pf-v6-c-compass__header` | `<div>` | Initiates the Compass header. **Required** |
90
+ | `.pf-v6-c-compass__logo` | `<div>` | Initiates the Compass logo header. |
91
+ | `.pf-v6-c-compass__dock` | `<div>` | Initiates the Compass dock. |
92
+ | `.pf-v6-c-compass__profile` | `<div>` | Initiates the Compass profile. |
93
+ | `.pf-v6-c-compass__sidebar` | `<div>` | Initiates a Compass sidebar. **Required** |
94
+ | `.pf-v6-c-compass__main` | `<div>` | Initiates the Compass main wrapper. **Required** |
95
+ | `.pf-v6-c-compass__main-header` | `<div>` | Initiates the Compass main header. |
96
+ | `.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. |
97
+ | `.pf-v6-c-compass__main-header-title` | `<div>` | Initiates a title within the Compass main header content. |
98
+ | `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the Compass main header content. |
99
+ | `.pf-v6-c-compass__content` | `<div>` | Initiates the Compass content. **Required** |
100
+ | `.pf-v6-c-compass__main-footer` | `<div>` | Initiates the Compass main footer. **Required** |
101
+ | `.pf-v6-c-compass__panel` | `<div>` | Initiates a Compass panel. |
102
+ | `.pf-v6-c-compass__nav` | `<div>` | Initiates a Compass container for site navigation. |
103
+ | `.pf-v6-c-compass__nav-content` | `<div>` | Initiates a Compass container for navigation content. |
104
+ | `.pf-v6-c-compass__nav-home` | `<div>` | Initiates a container for Compass home button. |
105
+ | `.pf-v6-c-compass__nav-main` | `<div>` | Initiates a container for Compass navigation main content. |
106
+ | `.pf-v6-c-compass__nav-search` | `<div>` | Initiates a container for Compass search button. |
107
+ | `.pf-v6-c-compass__footer` | `<div>` | Initiates the Compass footer. |
108
+ | `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the Compass message bar. |
103
109
  | `.pf-m-dock` | `.pf-v6-c-compass` | Modifies for dock layout. |
104
110
  | `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. |
105
- | `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a compass sidebar for start styles. **Required** |
106
- | `.pf-m-end` | `.pf-v6-c-compass__sidebar` | Modifies a compass sidebar for end styles. **Required** |
107
- | `.pf-m-no-border` | `.pf-v6-c-compass__panel` | Modifies a compass panel to remove the border. |
108
- | `.pf-m-no-padding` | `.pf-v6-c-compass__panel` | Modifies a compass panel to remove the padding. |
109
- | `.pf-m-full-height` | `.pf-v6-c-compass__panel` | Modifies a compass panel to be full height. |
110
- | `.pf-m-pill` | `.pf-v6-c-compass__panel` | Modifies a compass panel to have a pill shaped border radius. |
111
- | `.pf-m-scrollable` | `.pf-v6-c-compass__panel` | Modifies a compass panel to scroll its overflow. |
112
- | `.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. |
111
+ | `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a Compass sidebar for start styles. **Required** |
112
+ | `.pf-m-end` | `.pf-v6-c-compass__sidebar` | Modifies a Compass sidebar for end styles. **Required** |
113
+ | `.pf-m-no-border` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to remove the border. |
114
+ | `.pf-m-no-padding` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to remove the padding. |
115
+ | `.pf-m-full-height` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to be full height. |
116
+ | `.pf-m-pill` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to have a pill-shaped border radius. |
117
+ | `.pf-m-scrollable` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to scroll its overflow. |
118
+ | `.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. |
package/docs/components/ModalBox/examples/ModalBox.md CHANGED
@@ -597,7 +597,7 @@ A modal box is a generic rectangular container that can be used to build modals.
597
597
  | `aria-describedby="[id value of applicable content]"` | `.pf-v6-c-modal-box` | Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal. |
598
598
  | `aria-modal="true"` | `.pf-v6-c-modal-box` | Tells assistive technologies that the windows underneath the current modal are not available for interaction. **Required**|
599
599
  | `aria-label="Close"` | `.pf-v6-c-modal-box__close .pf-v6-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required**|
600
- | `aria-hidden="true"` | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-v6-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
600
+ | `aria-hidden="true"` | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-v6-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/develop#trapping-focus). **Required** |
601
601
  | `form="[id of form in modal body]"` | `.pf-v6-c-modal-box__footer .pf-v6-c-button` | Associates a submit button in the modal footer with a form in the modal body. For use when the submit button is outside of the `<form>` that the button submits. |
602
602
  | `tabindex="0"` | `.pf-v6-c-modal-box__body` | If a modal box body has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the body must include either a focusable element within the scrollable region or the body itself must be focusable by adding `tabindex="0"`. |
603
603
 
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -7,6 +7,11 @@ wrapperTag: div
7
7
 
8
8
  ### Card view
9
9
 
10
+ 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:
11
+
12
+ * A `.pf-v6-c-compass__main-header` that contains the page title and toolbar with action items.
13
+ * A `.pf-v6-c-compass__content`, which contains a `.pf-v6-c-compass__panel` to create a rounded-rectangle container that serves as the main content background.
14
+
10
15
  ```html isFullscreen isBeta
11
16
  <div
12
17
  class="pf-v6-c-compass pf-m-animate-smoothly"
@@ -1321,6 +1326,11 @@ wrapperTag: div
1321
1326
 
1322
1327
  ### Dashboard
1323
1328
 
1329
+ 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:
1330
+
1331
+ * A `.pf-v6-c-hero` component positioned between the top navigation and the main page content, containing promotional or introductory content with important CTAs.
1332
+ * 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.
1333
+
1324
1334
  ```html isFullscreen isBeta
1325
1335
  <div
1326
1336
  class="pf-v6-c-compass pf-m-animate-smoothly"
@@ -2857,6 +2867,10 @@ wrapperTag: div
2857
2867
 
2858
2868
  ### Multiple sections
2859
2869
 
2870
+ This demo places multiple sections within the main Compass section, with each section containing a card view.
2871
+
2872
+ 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.
2873
+
2860
2874
  ```html isFullscreen isBeta
2861
2875
  <div
2862
2876
  class="pf-v6-c-compass pf-m-animate-smoothly"
@@ -4844,6 +4858,8 @@ wrapperTag: div
4844
4858
 
4845
4859
  ### With drawer
4846
4860
 
4861
+ This demo showcases how you can position a side-panel drawer on top of the other Compass elements.
4862
+
4847
4863
  ```html isFullscreen isBeta
4848
4864
  <div class="pf-v6-c-drawer pf-m-expanded pf-m-pill">
4849
4865
  <div class="pf-v6-c-drawer__main">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.34",
4
+ "version": "6.5.0-prerelease.35",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -49,7 +49,7 @@
49
49
  "@commitlint/config-conventional": "^19.1.0",
50
50
  "@fortawesome/fontawesome": "^1.1.8",
51
51
  "@octokit/rest": "^20.1.0",
52
- "@patternfly/documentation-framework": "6.33.3",
52
+ "@patternfly/documentation-framework": "6.33.5",
53
53
  "@patternfly/patternfly-a11y": "5.1.0",
54
54
  "@patternfly/react-code-editor": "6.4.0",
55
55
  "@patternfly/react-core": "6.4.0",