@patternfly/patternfly 6.5.0-prerelease.71 → 6.5.0-prerelease.72

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 (16) hide show
  1. package/components/Compass/compass.css +13 -78
  2. package/components/Compass/compass.scss +12 -88
  3. package/components/Panel/panel.css +28 -4
  4. package/components/Panel/panel.scss +45 -10
  5. package/components/_index.css +40 -80
  6. package/docs/components/Compass/examples/Compass.css +2 -2
  7. package/docs/components/Compass/examples/Compass.md +9 -26
  8. package/docs/components/Panel/examples/Panel.css +3 -0
  9. package/docs/components/Panel/examples/Panel.md +59 -4
  10. package/docs/demos/Compass/examples/Compass.md +5367 -5182
  11. package/package.json +1 -1
  12. package/patternfly-no-globals.css +40 -86
  13. package/patternfly.css +40 -86
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
  16. package/patternfly.scss +0 -10
package/docs/components/Compass/examples/Compass.css CHANGED
@@ -2,12 +2,12 @@
2
2
  height: 600px;
3
3
  }
4
4
 
5
- #ws-core-a-compass-default [class*="pf-v6-c-compass"],
5
+ #ws-core-a-compass-basic [class*="pf-v6-c-compass"],
6
6
  #ws-core-a-compass-docked [class*="pf-v6-c-compass"] {
7
7
  position: relative;
8
8
  }
9
9
 
10
- #ws-core-a-compass-default [class*="pf-v6-c-compass"]::after,
10
+ #ws-core-a-compass-basic [class*="pf-v6-c-compass"]::after,
11
11
  #ws-core-a-compass-docked [class*="pf-v6-c-compass"]::after {
12
12
  position: absolute;
13
13
  inset: 0;
package/docs/components/Compass/examples/Compass.md CHANGED
@@ -24,14 +24,12 @@ In a basic Compass layout, the page structure is defined by the order of element
24
24
  <div class="pf-v6-c-compass__logo">logo</div>
25
25
 
26
26
  <div class="pf-v6-c-compass__nav">
27
- <div class="pf-v6-c-compass__panel">
28
- <div class="pf-v6-c-compass__nav-content">
29
- <div class="pf-v6-c-compass__nav-home">home</div>
27
+ <div class="pf-v6-c-compass__nav-content">
28
+ <div class="pf-v6-c-compass__nav-home">home</div>
30
29
 
31
- <div class="pf-v6-c-compass__nav-main">main</div>
30
+ <div class="pf-v6-c-compass__nav-main">main</div>
32
31
 
33
- <div class="pf-v6-c-compass__nav-search">search</div>
34
- </div>
32
+ <div class="pf-v6-c-compass__nav-search">search</div>
35
33
  </div>
36
34
  </div>
37
35
  <div class="pf-v6-c-compass__profile">profile</div>
@@ -39,13 +37,9 @@ In a basic Compass layout, the page structure is defined by the order of element
39
37
  <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-start">sidebar (start)</div>
40
38
 
41
39
  <div class="pf-v6-c-compass__main">
42
- <div class="pf-v6-c-compass__hero">
43
- <div class="pf-v6-c-hero">hero</div>
44
- </div>
40
+ <div class="pf-v6-c-compass__hero">hero</div>
45
41
  <div class="pf-v6-c-compass__main-header">
46
- <div class="pf-v6-c-compass__panel">
47
- <div class="pf-v6-c-compass__main-header-content">main header</div>
48
- </div>
42
+ <div class="pf-v6-c-compass__main-header-content">main header</div>
49
43
  </div>
50
44
  <div class="pf-v6-c-compass__content">content</div>
51
45
 
@@ -67,13 +61,9 @@ In a basic Compass layout, the page structure is defined by the order of element
67
61
  <div class="pf-v6-c-compass__dock">dock</div>
68
62
  <div class="pf-v6-c-compass__main">
69
63
  <div class="pf-v6-c-compass__main-header">
70
- <div class="pf-v6-c-compass__panel">
71
- <div class="pf-v6-c-compass__main-header-content">main header</div>
72
- </div>
73
- </div>
74
- <div class="pf-v6-c-compass__content">
75
- <div class="pf-v6-c-compass__panel pf-m-scrollable">content</div>
64
+ <div class="pf-v6-c-compass__main-header-content">main header</div>
76
65
  </div>
66
+ <div class="pf-v6-c-compass__content">content</div>
77
67
  </div>
78
68
  </div>
79
69
 
@@ -93,12 +83,11 @@ In a basic Compass layout, the page structure is defined by the order of element
93
83
  | `.pf-v6-c-compass__sidebar` | `<div>` | Initiates a Compass sidebar. **Required** |
94
84
  | `.pf-v6-c-compass__main` | `<div>` | Initiates the Compass main wrapper. **Required** |
95
85
  | `.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. |
86
+ | `.pf-v6-c-compass__main-header-content` | `<div>` | Initiates the Compass main header content. This should be passed into a glass panel component. |
97
87
  | `.pf-v6-c-compass__main-header-title` | `<div>` | Initiates a title within the Compass main header content. |
98
88
  | `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the Compass main header content. |
99
89
  | `.pf-v6-c-compass__content` | `<div>` | Initiates the Compass content. **Required** |
100
90
  | `.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
91
  | `.pf-v6-c-compass__nav` | `<div>` | Initiates a Compass container for site navigation. |
103
92
  | `.pf-v6-c-compass__nav-content` | `<div>` | Initiates a Compass container for navigation content. |
104
93
  | `.pf-v6-c-compass__nav-home` | `<div>` | Initiates a container for Compass home button. |
@@ -107,13 +96,7 @@ In a basic Compass layout, the page structure is defined by the order of element
107
96
  | `.pf-v6-c-compass__footer` | `<div>` | Initiates the Compass footer. |
108
97
  | `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the Compass message bar. |
109
98
  | `.pf-m-docked` | `.pf-v6-c-compass` | Modifies for dock layout. |
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. |
111
99
  | `.pf-m-no-screen-warning` | `.pf-v6-c-compass` | Disables the screen warning that shows on smaller viewports. |
112
100
  | `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a Compass sidebar for start styles. **Required** |
113
101
  | `.pf-m-end` | `.pf-v6-c-compass__sidebar` | Modifies a Compass sidebar for end styles. **Required** |
114
- | `.pf-m-no-border` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to remove the border. |
115
- | `.pf-m-no-padding` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to remove the padding. |
116
- | `.pf-m-full-height` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to be full height. |
117
- | `.pf-m-pill` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to have a pill-shaped border radius. |
118
- | `.pf-m-scrollable` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to scroll its overflow. |
119
102
  | `.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/Panel/examples/Panel.css ADDED
@@ -0,0 +1,3 @@
1
+ #ws-core-c-panel-scrollable-with-auto-height .ws-preview-html {
2
+ height: 450px;
3
+ }
package/docs/components/Panel/examples/Panel.md CHANGED
@@ -2,7 +2,9 @@
2
2
  id: 'Panel'
3
3
  section: components
4
4
  cssPrefix: pf-v6-c-panel
5
- ---## Examples
5
+ ---import './Panel.css'
6
+
7
+ ## Examples
6
8
 
7
9
  ### Basic
8
10
 
@@ -125,6 +127,45 @@ cssPrefix: pf-v6-c-panel
125
127
 
126
128
  ```
127
129
 
130
+ ### Scrollable with auto height
131
+
132
+ ```html
133
+ <div class="pf-v6-c-panel pf-m-scrollable-auto-height pf-m-scrollable">
134
+ <div class="pf-v6-c-panel__main" tabindex="0">
135
+ <div class="pf-v6-c-panel__main-body">
136
+ Main content
137
+ <br />
138
+ <br />Main content
139
+ <br />
140
+ <br />Main content
141
+ <br />
142
+ <br />Main content
143
+ <br />
144
+ <br />Main content
145
+ <br />
146
+ <br />Main content
147
+ <br />
148
+ <br />Main content
149
+ <br />
150
+ <br />Main content
151
+ <br />
152
+ <br />Main content
153
+ <br />
154
+ <br />Main content
155
+ <br />
156
+ <br />Main content
157
+ <br />
158
+ <br />Main content
159
+ <br />
160
+ <br />Main content
161
+ <br />
162
+ <br />Main content
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ ```
168
+
128
169
  ### Scrollable with header and footer
129
170
 
130
171
  ```html
@@ -150,6 +191,16 @@ cssPrefix: pf-v6-c-panel
150
191
  <br />Main content
151
192
  <br />
152
193
  <br />Main content
194
+ <br />
195
+ <br />Main content
196
+ <br />
197
+ <br />Main content
198
+ <br />
199
+ <br />Main content
200
+ <br />
201
+ <br />Main content
202
+ <br />
203
+ <br />Main content
153
204
  </div>
154
205
  </div>
155
206
  <div class="pf-v6-c-panel__footer">Footer content</div>
@@ -180,8 +231,12 @@ cssPrefix: pf-v6-c-panel
180
231
  | `.pf-v6-c-panel__main-body` | `<div>` | Initiates a panel content body container. |
181
232
  | `.pf-v6-c-panel__menu` | `<div>` | Initiates a panel menu container. |
182
233
  | `.pf-v6-c-panel__footer` | `<div>` | Initiates the panel footer. |
183
- | `.pf-m-bordered` | `.pf-v6-c-panel` | Modifies the panel for bordered styles. |
184
- | `.pf-m-raised` | `.pf-v6-c-panel` | Modifies the panel for raised styles. |
185
- | `.pf-m-scrollable` | `.pf-v6-c-panel` | Modifies the panel for scrollable styles. |
234
+ | `.pf-m-bordered` | `.pf-v6-c-panel` | Adds a border to the panel. |
235
+ | `.pf-m-no-border` | `.pf-v6-c-panel` | Removes the border from a variant that has a default border. |
236
+ | `.pf-m-raised` | `.pf-v6-c-panel` | Applies elevated styles for use when the panel appears on top of other elements. |
237
+ | `.pf-m-scrollable` | `.pf-v6-c-panel` | Modifies the panel so the main content is scrollable. |
238
+ | `.pf-m-scrollable-auto-height` | `.pf-v6-c-panel` | Modifies the panel to have an auto height when scrollable. |
186
239
  | `.pf-m-secondary` | `.pf-v6-c-panel` | Modifies the panel for secondary styles. |
187
240
  | `.pf-m-pill` | `.pf-v6-c-panel` | Modifies the panel for pill border radius. |
241
+ | `.pf-m-full-height` | `.pf-v6-c-panel` | Makes the panel fill the available height. |
242
+ | `.pf-m-glass` | `.pf-v6-c-panel` | Applies glass styling to the panel in glass theme. |