@patternfly/patternfly 6.1.0-prerelease.6 → 6.1.0-prerelease.7

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 (10) hide show
  1. package/components/Page/page.css +4 -1
  2. package/components/Page/page.scss +3 -2
  3. package/components/_index.css +4 -1
  4. package/docs/components/Page/examples/Page.css +1 -1
  5. package/docs/components/Page/examples/Page.md +10 -7
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +4 -1
  8. package/patternfly.css +4 -1
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/Page/page.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
5
5
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
6
6
  --pf-v6-c-page__sidebar--Width: 18.125rem;
7
- --pf-v6-c-page__sidebar--xl--Width: auto;
7
+ --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
8
8
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
9
9
  --pf-v6-c-page__sidebar--BoxShadow: none;
10
10
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -193,18 +193,21 @@
193
193
  flex-grow: 0;
194
194
  }
195
195
 
196
+ .pf-v6-c-page__main-subnav.pf-m-limit-width > .pf-v6-c-page__main-body,
196
197
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
197
198
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
198
199
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
199
200
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
200
201
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
201
202
  }
203
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center,
202
204
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
203
205
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
204
206
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
205
207
  .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
206
208
  align-items: center;
207
209
  }
210
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
208
211
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
209
212
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
210
213
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
package/components/Page/page.scss CHANGED
@@ -15,7 +15,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
15
15
  // Sidebar
16
16
  --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
17
17
  --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
18
- --#{$page}__sidebar--xl--Width: auto;
18
+ --#{$page}__sidebar--xl--Width: #{pf-size-prem(290px)}; // TODO Can remove at breaking change
19
19
  --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
20
20
  --#{$page}__sidebar--BoxShadow: none;
21
21
 
@@ -136,7 +136,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
136
136
  background-color: var(--#{$page}--BackgroundColor);
137
137
 
138
138
  @media (min-width: $pf-v6-global--breakpoint--xl) {
139
- --#{$page}__sidebar--Width: var(--#{$page}__sidebar--xl--Width);
139
+ --#{$page}__sidebar--Width: var(--#{$page}__sidebar--xl--Width); // TODO can remove at breaking change
140
140
 
141
141
  grid-template-areas:
142
142
  "header header"
@@ -247,6 +247,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
247
247
  }
248
248
  }
249
249
 
250
+ .#{$page}__main-subnav,
250
251
  .#{$page}__main-breadcrumb,
251
252
  .#{$page}__main-tabs,
252
253
  .#{$page}__main-section,
package/components/_index.css CHANGED
@@ -11395,7 +11395,7 @@ ul.pf-v6-c-list {
11395
11395
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
11396
11396
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
11397
11397
  --pf-v6-c-page__sidebar--Width: 18.125rem;
11398
- --pf-v6-c-page__sidebar--xl--Width: auto;
11398
+ --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
11399
11399
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11400
11400
  --pf-v6-c-page__sidebar--BoxShadow: none;
11401
11401
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -11584,18 +11584,21 @@ ul.pf-v6-c-list {
11584
11584
  flex-grow: 0;
11585
11585
  }
11586
11586
 
11587
+ .pf-v6-c-page__main-subnav.pf-m-limit-width > .pf-v6-c-page__main-body,
11587
11588
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
11588
11589
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
11589
11590
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
11590
11591
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
11591
11592
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
11592
11593
  }
11594
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center,
11593
11595
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
11594
11596
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
11595
11597
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
11596
11598
  .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
11597
11599
  align-items: center;
11598
11600
  }
11601
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
11599
11602
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
11600
11603
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
11601
11604
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
package/docs/components/Page/examples/Page.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* Because the page component has height:100dvh, override it just for the embedded examples */
2
- .ws-mdx-content-content [id^=ws-core-c-page-] .pf-v6-c-page {
2
+ #ws-page-main [id^=ws-core-c-page-] .pf-v6-c-page {
3
3
  height: min-content;
4
4
  min-height: 30em;
5
5
  }
package/docs/components/Page/examples/Page.md CHANGED
@@ -152,10 +152,11 @@ wrapperTag: div
152
152
  </header>
153
153
  <div class="pf-v6-c-page__sidebar">
154
154
  <div class="pf-v6-c-page__sidebar-body">Navigation</div>
155
+ <div class="pf-v6-c-page__sidebar-body pf-m-fill">inset content</div>
155
156
  <div
156
- class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-page-insets"
157
- >inset content</div>
158
- <div class="pf-v6-c-page__sidebar-body pf-m-page-insets">footer content</div>
157
+ class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-inset-none"
158
+ >content that is not inset</div>
159
+ <div class="pf-v6-c-page__sidebar-body pf-m-no-fill">footer content</div>
159
160
  </div>
160
161
  <div class="pf-v6-c-page__main-container" tabindex="-1">
161
162
  <main class="pf-v6-c-page__main" tabindex="-1">
@@ -193,7 +194,7 @@ wrapperTag: div
193
194
  <span>Content</span>
194
195
  </div>
195
196
  </header>
196
- <div class="pf-v6-c-page__main-container" tabindex="-1">
197
+ <div class="pf-v6-c-page__main-container pf-m-fill" tabindex="-1">
197
198
  <main class="pf-v6-c-page__main" tabindex="-1">
198
199
  <section class="pf-v6-c-page__main-section">
199
200
  <div class="pf-v6-c-page__main-body">A regular page section.</div>
@@ -201,13 +202,15 @@ wrapperTag: div
201
202
  <section class="pf-v6-c-page__main-section pf-m-fill">
202
203
  <div class="pf-v6-c-page__main-body">
203
204
  This section uses
204
- <code>.pf-m-fill</code> to fill the available space.
205
+ <code>.pf-m-fill</code> to fill the available space. The
206
+ <code>.pf-v6-c-page__main-container</code> must also have
207
+ <code>.pf-m-fill</code> in order for the section to have space to stretch to full height.
205
208
  </div>
206
209
  </section>
207
210
  <section class="pf-v6-c-page__main-section pf-m-no-fill">
208
211
  <div class="pf-v6-c-page__main-body">
209
212
  This section uses
210
- <code>.pf-m-no-fill</code> not to fill the available space.
213
+ <code>.pf-m-no-fill</code> and will not fill the available space.
211
214
  </div>
212
215
  </section>
213
216
  </main>
@@ -416,7 +419,7 @@ This component provides the basic chrome for a page, including sidebar and main
416
419
  | `.pf-m-inset-none` | `.pf-v6-c-page__sidebar-body` | Removes a sidebar body left/right inset. |
417
420
  | `.pf-m-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
418
421
  | `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
419
- | `.pf-m-fill` | `.pf-v6-c-page__main-container`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element to grow to fill the available space. |
422
+ | `.pf-m-fill` | `.pf-v6-c-page__main-container`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element to grow to fill the available space. Note that `.pf-v6-c-page__main-container` must also have `.pf-m-fill` applied in order for the section to have space to stretch to full height.|
420
423
  | `.pf-m-no-fill` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element not to grow to fill the available vertical space. |
421
424
  | `.pf-m-limit-width` | `.pf-v6-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
422
425
  | `.pf-m-align-center` | `.pf-v6-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
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.1.0-prerelease.6",
4
+ "version": "6.1.0-prerelease.7",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,7 +47,7 @@
47
47
  "@commitlint/config-conventional": "^19.1.0",
48
48
  "@fortawesome/fontawesome": "^1.1.8",
49
49
  "@octokit/rest": "^20.1.0",
50
- "@patternfly/documentation-framework": "6.0.10",
50
+ "@patternfly/documentation-framework": "6.0.12",
51
51
  "@patternfly/patternfly-a11y": "5.0.0",
52
52
  "@patternfly/react-code-editor": "6.0.0",
53
53
  "@patternfly/react-core": "6.0.0",
package/patternfly-no-globals.css CHANGED
@@ -18857,7 +18857,7 @@ ul.pf-v6-c-list {
18857
18857
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
18858
18858
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
18859
18859
  --pf-v6-c-page__sidebar--Width: 18.125rem;
18860
- --pf-v6-c-page__sidebar--xl--Width: auto;
18860
+ --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
18861
18861
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
18862
18862
  --pf-v6-c-page__sidebar--BoxShadow: none;
18863
18863
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -19046,18 +19046,21 @@ ul.pf-v6-c-list {
19046
19046
  flex-grow: 0;
19047
19047
  }
19048
19048
 
19049
+ .pf-v6-c-page__main-subnav.pf-m-limit-width > .pf-v6-c-page__main-body,
19049
19050
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
19050
19051
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
19051
19052
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
19052
19053
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
19053
19054
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
19054
19055
  }
19056
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center,
19055
19057
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
19056
19058
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
19057
19059
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
19058
19060
  .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
19059
19061
  align-items: center;
19060
19062
  }
19063
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
19061
19064
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
19062
19065
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
19063
19066
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
package/patternfly.css CHANGED
@@ -18993,7 +18993,7 @@ ul.pf-v6-c-list {
18993
18993
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
18994
18994
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
18995
18995
  --pf-v6-c-page__sidebar--Width: 18.125rem;
18996
- --pf-v6-c-page__sidebar--xl--Width: auto;
18996
+ --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
18997
18997
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
18998
18998
  --pf-v6-c-page__sidebar--BoxShadow: none;
18999
18999
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -19182,18 +19182,21 @@ ul.pf-v6-c-list {
19182
19182
  flex-grow: 0;
19183
19183
  }
19184
19184
 
19185
+ .pf-v6-c-page__main-subnav.pf-m-limit-width > .pf-v6-c-page__main-body,
19185
19186
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
19186
19187
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
19187
19188
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
19188
19189
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
19189
19190
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
19190
19191
  }
19192
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center,
19191
19193
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
19192
19194
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
19193
19195
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
19194
19196
  .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
19195
19197
  align-items: center;
19196
19198
  }
19199
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
19197
19200
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
19198
19201
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
19199
19202
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,