Skip to content

Commit 05db857

Browse files
mcokermcoker
authored
feat: add compass panel features to panel component (#8303)
1 parent 629b06d commit 05db857

15 files changed

Lines changed: 389 additions & 374 deletions

File tree

‎src/patternfly/components/Compass/compass-panel.hbs‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/patternfly/components/Compass/compass.scss‎

Lines changed: 12 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,6 @@
2121
--#{$compass}__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
2222
--#{$compass}__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
2323
--#{$compass}__main-footer--MarginBlockStart: calc(var(--#{$compass}__main--RowGap) * -1 + var(--#{$compass}--Gap)); // Creates same gap as parent compass grid, mimicking the compass footer
24-
--#{$compass}__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
25-
--#{$compass}__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
26-
--#{$compass}__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
27-
--#{$compass}__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
28-
--#{$compass}__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
29-
--#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
30-
--#{$compass}__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
31-
--#{$compass}__panel--BorderColor: var(--pf-t--global--border--color--glass--default, transparent);
32-
--#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--glass--default, var(--pf-t--global--border--radius--medium));
33-
--#{$compass}__panel--BorderWidth: var(--pf-t--global--border--width--glass--default, 0);
34-
--#{$compass}__panel--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
3524
--#{$compass}__message-bar--Width: 450px;
3625
--#{$compass}__message-bar--MinWidth: 300px;
3726
--#{$compass}__message-bar--MaxWidth: 600px;
@@ -101,13 +90,6 @@
10190
:root:where(.#{$pf-prefix}theme-dark) & {
10291
--#{$compass}--BackgroundImage: var(--#{$compass}--BackgroundImage--dark);
10392
}
104-
105-
@at-root .#{$compass}__panel,
106-
& {
107-
&.pf-m-no-glass {
108-
--#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
109-
}
110-
}
11193
}
11294

11395
.#{$compass}__header,
@@ -164,10 +146,12 @@
164146
}
165147

166148
.#{$compass}__nav {
167-
--#{$compass}__panel--PaddingBlockStart: var(--#{$compass}__nav--PaddingBlockStart);
168-
--#{$compass}__panel--PaddingBlockEnd: var(--#{$compass}__nav--PaddingBlockEnd);
169-
--#{$compass}__panel--PaddingInlineStart: var(--#{$compass}__nav--PaddingInlineStart);
170-
--#{$compass}__panel--PaddingInlineEnd: var(--#{$compass}__nav--PaddingInlineEnd);
149+
.#{$panel} {
150+
--#{$panel}__main-body--PaddingBlockStart: var(--#{$compass}__nav--PaddingBlockStart);
151+
--#{$panel}__main-body--PaddingBlockEnd: var(--#{$compass}__nav--PaddingBlockEnd);
152+
--#{$panel}__main-body--PaddingInlineStart: var(--#{$compass}__nav--PaddingInlineStart);
153+
--#{$panel}__main-body--PaddingInlineEnd: var(--#{$compass}__nav--PaddingInlineEnd);
154+
}
171155

172156
display: flex;
173157
flex-direction: column;
@@ -187,10 +171,12 @@
187171
}
188172

189173
.#{$compass}__sidebar {
190-
--#{$compass}__panel--PaddingBlockStart: var(--#{$compass}__sidebar--PaddingBlockStart);
191-
--#{$compass}__panel--PaddingBlockEnd: var(--#{$compass}__sidebar--PaddingBlockEnd);
192-
--#{$compass}__panel--PaddingInlineStart: var(--#{$compass}__sidebar--PaddingInlineStart);
193-
--#{$compass}__panel--PaddingInlineEnd: var(--#{$compass}__sidebar--PaddingInlineEnd);
174+
.#{$panel} {
175+
--#{$panel}__main-body--PaddingBlockStart: var(--#{$compass}__sidebar--PaddingBlockStart);
176+
--#{$panel}__main-body--PaddingBlockEnd: var(--#{$compass}__sidebar--PaddingBlockEnd);
177+
--#{$panel}__main-body--PaddingInlineStart: var(--#{$compass}__sidebar--PaddingInlineStart);
178+
--#{$panel}__main-body--PaddingInlineEnd: var(--#{$compass}__sidebar--PaddingInlineEnd);
179+
}
194180

195181
display: flex;
196182
width: 0;
@@ -286,65 +272,3 @@
286272
min-width: var(--#{$compass}__message-bar--MinWidth);
287273
max-width: var(--#{$compass}__message-bar--MaxWidth);
288274
}
289-
290-
.#{$compass}__panel {
291-
padding-block-start: var(--#{$compass}__panel--PaddingBlockStart);
292-
padding-block-end: var(--#{$compass}__panel--PaddingBlockEnd);
293-
padding-inline-start: var(--#{$compass}__panel--PaddingInlineStart);
294-
padding-inline-end: var(--#{$compass}__panel--PaddingInlineEnd);
295-
background-color: var(--#{$compass}__panel--BackgroundColor);
296-
backdrop-filter: var(--#{$compass}__panel--BackdropFilter);
297-
border: var(--#{$compass}__panel--BorderWidth) solid var(--#{$compass}__panel--BorderColor);
298-
border-radius: var(--#{$compass}__panel--BorderRadius);
299-
box-shadow: var(--#{$compass}__panel--BoxShadow);
300-
301-
&.pf-m-no-border {
302-
border-width: 0;
303-
}
304-
305-
&.pf-m-no-padding {
306-
padding: 0;
307-
}
308-
309-
&.pf-m-full-height {
310-
height: 100%;
311-
}
312-
313-
&.pf-m-pill {
314-
border-radius: var(--#{$compass}__panel--m-pill--BorderRadius);
315-
}
316-
317-
&.pf-m-scrollable {
318-
overflow: auto;
319-
}
320-
}
321-
322-
/* stylelint-disable */
323-
@media (max-width: 1200px) {
324-
.#{$compass}:not(.pf-m-no-screen-warning) {
325-
position: relative;
326-
display: grid;
327-
grid-template-columns: auto;
328-
grid-template-rows: auto;
329-
place-content: center;
330-
gap: 0;
331-
332-
&::after {
333-
padding: 1em;
334-
border-radius: var(--pf-t--global--border--radius--large);
335-
background: var(--pf-t--global--background--color--primary--default);
336-
content: "This page is optimized for wide screens.\a\a Please view on a larger display and/or make your browser window wider.";
337-
width: 80%;
338-
width: 300px;
339-
border: 1px solid var(--pf-t--global--border--color--default);
340-
box-shadow: var(--pf-t--global--box-shadow--md);
341-
white-space: pre-wrap;
342-
text-align: center;
343-
}
344-
345-
* {
346-
display: none;
347-
}
348-
}
349-
}
350-
/* stylelint-enable */

‎src/patternfly/components/Compass/examples/Compass.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
height: 600px;
33
}
44

5-
#ws-core-a-compass-default [class*="pf-v6-c-compass"],
5+
#ws-core-a-compass-basic [class*="pf-v6-c-compass"],
66
#ws-core-a-compass-docked [class*="pf-v6-c-compass"] {
77
position: relative;
88
}
99

10-
#ws-core-a-compass-default [class*="pf-v6-c-compass"]::after,
10+
#ws-core-a-compass-basic [class*="pf-v6-c-compass"]::after,
1111
#ws-core-a-compass-docked [class*="pf-v6-c-compass"]::after {
1212
position: absolute;
1313
inset: 0;

‎src/patternfly/components/Compass/examples/Compass.md‎

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -23,27 +23,23 @@ In a basic Compass layout, the page structure is defined by the order of element
2323
{{#> compass-header}}
2424
{{#> compass-logo}}logo{{/compass-logo}}
2525
{{#> compass-nav}}
26-
{{#> compass-panel}}
27-
{{#> compass-nav-content}}
28-
{{#> compass-nav-home}}home{{/compass-nav-home}}
29-
{{#> compass-nav-main}}main{{/compass-nav-main}}
30-
{{#> compass-nav-search}}search{{/compass-nav-search}}
31-
{{/compass-nav-content}}
32-
{{/compass-panel}}
26+
{{#> compass-nav-content}}
27+
{{#> compass-nav-home}}home{{/compass-nav-home}}
28+
{{#> compass-nav-main}}main{{/compass-nav-main}}
29+
{{#> compass-nav-search}}search{{/compass-nav-search}}
30+
{{/compass-nav-content}}
3331
{{/compass-nav}}
3432
{{#> compass-profile}}profile{{/compass-profile}}
3533
{{/compass-header}}
3634
{{#> compass-sidebar compass-sidebar--IsStart=true}}sidebar (start){{/compass-sidebar}}
3735
{{#> compass-main}}
3836
{{#> compass-hero}}
39-
{{#> hero}}hero{{/hero}}
37+
hero
4038
{{/compass-hero}}
4139
{{#> compass-main-header}}
42-
{{#> compass-panel}}
43-
{{#> compass-main-header-content}}
44-
main header
45-
{{/compass-main-header-content}}
46-
{{/compass-panel}}
40+
{{#> compass-main-header-content}}
41+
main header
42+
{{/compass-main-header-content}}
4743
{{/compass-main-header}}
4844
{{#> compass-content}}content{{/compass-content}}
4945
{{#> compass-main-footer}}
@@ -65,16 +61,12 @@ In a basic Compass layout, the page structure is defined by the order of element
6561
{{/compass-dock}}
6662
{{#> compass-main}}
6763
{{#> compass-main-header}}
68-
{{#> compass-panel}}
69-
{{#> compass-main-header-content}}
70-
main header
71-
{{/compass-main-header-content}}
72-
{{/compass-panel}}
64+
{{#> compass-main-header-content}}
65+
main header
66+
{{/compass-main-header-content}}
7367
{{/compass-main-header}}
7468
{{#> compass-content}}
75-
{{#> compass-panel compass-panel--IsScrollable=true}}
76-
content
77-
{{/compass-panel}}
69+
content
7870
{{/compass-content}}
7971
{{/compass-main}}
8072
{{/compass}}
@@ -92,12 +84,11 @@ In a basic Compass layout, the page structure is defined by the order of element
9284
| `.pf-v6-c-compass__sidebar` | `<div>` | Initiates a Compass sidebar. **Required** |
9385
| `.pf-v6-c-compass__main` | `<div>` | Initiates the Compass main wrapper. **Required** |
9486
| `.pf-v6-c-compass__main-header` | `<div>` | Initiates the Compass main header. |
95-
| `.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. |
87+
| `.pf-v6-c-compass__main-header-content` | `<div>` | Initiates the Compass main header content. This should be passed into a glass panel component. |
9688
| `.pf-v6-c-compass__main-header-title` | `<div>` | Initiates a title within the Compass main header content. |
9789
| `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the Compass main header content. |
9890
| `.pf-v6-c-compass__content` | `<div>` | Initiates the Compass content. **Required** |
9991
| `.pf-v6-c-compass__main-footer` | `<div>` | Initiates the Compass main footer. **Required** |
100-
| `.pf-v6-c-compass__panel` | `<div>` | Initiates a Compass panel. |
10192
| `.pf-v6-c-compass__nav` | `<div>` | Initiates a Compass container for site navigation. |
10293
| `.pf-v6-c-compass__nav-content` | `<div>` | Initiates a Compass container for navigation content. |
10394
| `.pf-v6-c-compass__nav-home` | `<div>` | Initiates a container for Compass home button. |
@@ -106,13 +97,7 @@ In a basic Compass layout, the page structure is defined by the order of element
10697
| `.pf-v6-c-compass__footer` | `<div>` | Initiates the Compass footer. |
10798
| `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the Compass message bar. |
10899
| `.pf-m-docked` | `.pf-v6-c-compass` | Modifies for dock layout. |
109-
| `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. |
110100
| `.pf-m-no-screen-warning` | `.pf-v6-c-compass` | Disables the screen warning that shows on smaller viewports. |
111101
| `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a Compass sidebar for start styles. **Required** |
112102
| `.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. |
118103
| `.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. |

‎src/patternfly/components/Panel/examples/Panel.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#ws-core-c-panel-scrollable-with-auto-height .ws-preview-html {
2+
height: 450px;
3+
}

‎src/patternfly/components/Panel/examples/Panel.md‎

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ section: components
44
cssPrefix: pf-v6-c-panel
55
---
66

7+
import './Panel.css'
8+
79
## Examples
810
### Basic
911
```hbs
@@ -18,7 +20,7 @@ cssPrefix: pf-v6-c-panel
1820

1921
### Secondary
2022
```hbs
21-
{{#> panel panel--modifier="pf-m-secondary"}}
23+
{{#> panel panel--IsSecondary=true}}
2224
{{#> panel-main}}
2325
{{#> panel-main-body}}
2426
Main content with secondary styling
@@ -83,7 +85,7 @@ cssPrefix: pf-v6-c-panel
8385

8486
### Raised
8587
```hbs
86-
{{#> panel panel--modifier="pf-m-raised"}}
88+
{{#> panel panel--IsRaised=true}}
8789
{{#> panel-main}}
8890
{{#> panel-main-body}}
8991
Main content
@@ -94,7 +96,7 @@ cssPrefix: pf-v6-c-panel
9496

9597
### Bordered
9698
```hbs
97-
{{#> panel panel--modifier="pf-m-bordered"}}
99+
{{#> panel panel--IsBordered=true}}
98100
{{#> panel-main}}
99101
{{#> panel-main-body}}
100102
Main content
@@ -105,7 +107,26 @@ cssPrefix: pf-v6-c-panel
105107

106108
### Scrollable
107109
```hbs
108-
{{#> panel panel--modifier="pf-m-scrollable"}}
110+
{{#> panel panel--IsScrollable=true}}
111+
{{#> panel-main panel-main--attribute="tabindex=0"}}
112+
{{#> panel-main-body}}
113+
Main content<br><br>
114+
Main content<br><br>
115+
Main content<br><br>
116+
Main content<br><br>
117+
Main content<br><br>
118+
Main content<br><br>
119+
Main content<br><br>
120+
Main content<br><br>
121+
Main content
122+
{{/panel-main-body}}
123+
{{/panel-main}}
124+
{{/panel}}
125+
```
126+
127+
### Scrollable with auto height
128+
```hbs
129+
{{#> panel panel--IsScrollable=true panel--IsScrollableAutoHeight=true}}
109130
{{#> panel-main panel-main--attribute="tabindex=0"}}
110131
{{#> panel-main-body}}
111132
Main content<br><br>
@@ -116,6 +137,11 @@ cssPrefix: pf-v6-c-panel
116137
Main content<br><br>
117138
Main content<br><br>
118139
Main content<br><br>
140+
Main content<br><br>
141+
Main content<br><br>
142+
Main content<br><br>
143+
Main content<br><br>
144+
Main content<br><br>
119145
Main content
120146
{{/panel-main-body}}
121147
{{/panel-main}}
@@ -124,7 +150,7 @@ cssPrefix: pf-v6-c-panel
124150

125151
### Scrollable with header and footer
126152
```hbs
127-
{{#> panel panel--modifier="pf-m-scrollable"}}
153+
{{#> panel panel--IsScrollable=true}}
128154
{{#> panel-header}}
129155
Header content
130156
{{/panel-header}}
@@ -138,6 +164,11 @@ cssPrefix: pf-v6-c-panel
138164
Main content<br><br>
139165
Main content<br><br>
140166
Main content<br><br>
167+
Main content<br><br>
168+
Main content<br><br>
169+
Main content<br><br>
170+
Main content<br><br>
171+
Main content<br><br>
141172
Main content
142173
{{/panel-main-body}}
143174
{{/panel-main}}
@@ -168,8 +199,12 @@ cssPrefix: pf-v6-c-panel
168199
| `.pf-v6-c-panel__main-body` | `<div>` | Initiates a panel content body container. |
169200
| `.pf-v6-c-panel__menu` | `<div>` | Initiates a panel menu container. |
170201
| `.pf-v6-c-panel__footer` | `<div>` | Initiates the panel footer. |
171-
| `.pf-m-bordered` | `.pf-v6-c-panel` | Modifies the panel for bordered styles. |
172-
| `.pf-m-raised` | `.pf-v6-c-panel` | Modifies the panel for raised styles. |
173-
| `.pf-m-scrollable` | `.pf-v6-c-panel` | Modifies the panel for scrollable styles. |
202+
| `.pf-m-bordered` | `.pf-v6-c-panel` | Adds a border to the panel. |
203+
| `.pf-m-no-border` | `.pf-v6-c-panel` | Removes the border from a variant that has a default border. |
204+
| `.pf-m-raised` | `.pf-v6-c-panel` | Applies elevated styles for use when the panel appears on top of other elements. |
205+
| `.pf-m-scrollable` | `.pf-v6-c-panel` | Modifies the panel so the main content is scrollable. |
206+
| `.pf-m-scrollable-auto-height` | `.pf-v6-c-panel` | Modifies the panel to have an auto height when scrollable. |
174207
| `.pf-m-secondary` | `.pf-v6-c-panel` | Modifies the panel for secondary styles. |
175208
| `.pf-m-pill` | `.pf-v6-c-panel` | Modifies the panel for pill border radius. |
209+
| `.pf-m-full-height` | `.pf-v6-c-panel` | Makes the panel fill the available height. |
210+
| `.pf-m-glass` | `.pf-v6-c-panel` | Applies glass styling to the panel in glass theme. |

‎src/patternfly/components/Panel/panel.hbs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
<div class="{{pfv}}panel
22
{{setModifiers
3+
panel--IsBordered="pf-m-bordered"
4+
panel--HasNoBorder="pf-m-no-border"
5+
panel--IsSecondary="pf-m-secondary"
6+
panel--IsRaised="pf-m-raised"
7+
panel--IsScrollable="pf-m-scrollable"
8+
panel--IsScrollableAutoHeight="pf-m-scrollable-auto-height"
9+
panel--IsGlass="pf-m-glass"
310
panel--IsPill="pf-m-pill"
11+
panel--IsFullHeight="pf-m-full-height"
412
panel--modifier=panel--modifier
513
}}"
614
{{#if panel--attribute}}

0 commit comments

Comments
 (0)