@patternfly/patternfly 5.0.0-prerelease.5 → 5.0.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 (17) hide show
  1. package/components/Card/card.css +4 -0
  2. package/components/Card/themes/dark/card.scss +7 -1
  3. package/docs/components/Drawer/examples/Drawer.md +2 -2
  4. package/docs/components/Dropdown/deprecated/Dropdown.css +64 -0
  5. package/docs/components/Dropdown/{examples → deprecated}/Dropdown.md +1 -0
  6. package/docs/components/Nav/examples/Navigation.md +2 -2
  7. package/docs/components/Select/deprecated/Select.css +56 -0
  8. package/docs/components/Select/{examples → deprecated}/Select.md +1 -0
  9. package/docs/demos/Nav/examples/Nav.md +1 -1
  10. package/package.json +1 -1
  11. package/patternfly-no-globals.css +4 -0
  12. package/patternfly-theme-dark-unversioned.css +4 -0
  13. package/patternfly.css +4 -0
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
  16. package/docs/components/Dropdown/examples/Dropdown.css +0 -64
  17. package/docs/components/Select/examples/Select.css +0 -55
package/components/Card/card.css CHANGED
@@ -391,6 +391,10 @@
391
391
  :where(.pf-v5-theme-dark) .pf-v5-c-card,
392
392
  :where(.pf-v5-theme-dark) .pf-v5-c-card.pf-m-non-selectable-raised {
393
393
  --pf-v5-c-card--BoxShadow: var(--pf-v5-global--BoxShadow--md);
394
+ --pf-v5-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-v5-global--palette--black-700);
395
+ --pf-v5-c-card--m-selectable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
396
+ --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
397
+ --pf-v5-c-card--m-selectable--focus--BackgroundColor: var(--pf-v5-global--palette--blue-600);
394
398
  --pf-v5-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
395
399
  --pf-v5-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
396
400
  --pf-v5-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
package/components/Card/themes/dark/card.scss CHANGED
@@ -5,7 +5,13 @@
5
5
  .#{$card}.pf-m-non-selectable-raised {
6
6
  --#{$card}--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
7
7
 
8
- // Hoverable/selectable raised
8
+ // Selectable
9
+ --#{$card}--m-selectable--m-disabled--BackgroundColor: var(--#{$pf-global}--palette--black-700);
10
+ --#{$card}--m-selectable--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--150);
11
+ --#{$card}--m-selectable--m-clickable--m-current--BackgroundColor: var(--#{$pf-global}--BackgroundColor--150);
12
+ --#{$card}--m-selectable--focus--BackgroundColor: var(--#{$pf-global}--palette--blue-600);
13
+
14
+ // Hoverable/selectable raised - deprecated
9
15
  --#{$card}--m-hoverable-raised--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
10
16
  --#{$card}--m-selectable-raised--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
11
17
  --#{$card}--m-selectable-raised--focus--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
package/docs/components/Drawer/examples/Drawer.md CHANGED
@@ -655,7 +655,7 @@ cssPrefix: pf-v5-c-drawer
655
655
 
656
656
  ```
657
657
 
658
- ### Panel with light-200 background
658
+ ### Panel with secondary background
659
659
 
660
660
  ```html
661
661
  <div class="pf-v5-c-drawer pf-m-expanded">
@@ -738,7 +738,7 @@ cssPrefix: pf-v5-c-drawer
738
738
  | `.pf-m-padding` | `.pf-v5-c-drawer__body` | Modifies the element to add padding. |
739
739
  | `.pf-m-no-padding` | `.pf-v5-c-drawer__body` | Modifies the element to remove padding. |
740
740
  | `.pf-m-no-background` | `.pf-v5-c-drawer__section`, `.pf-v5-c-drawer__content`, `.pf-v5-c-drawer__panel` | Modifies the drawer body/panel background color to transparent. |
741
- | `.pf-m-light-200` | `.pf-v5-c-drawer__section`, `.pf-v5-c-drawer__content`, `.pf-v5-c-drawer__panel` | Modifies the drawer body/panel background color to light grey. |
741
+ | `.pf-m-light-200` | `.pf-v5-c-drawer__section`, `.pf-v5-c-drawer__content`, `.pf-v5-c-drawer__panel` | Modifies the body/panel to use the secondary background color. |
742
742
  | `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v5-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
743
743
  | `.pf-m-resizable` | `.pf-v5-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-v5-c-drawer__splitter` element. |
744
744
  | `--pf-v5-c-drawer__panel--md--FlexBasis--min` | `.pf-v5-c-drawer__panel` | Defines the drawer panel minimum size. |
package/docs/components/Dropdown/deprecated/Dropdown.css ADDED
@@ -0,0 +1,64 @@
1
+ #ws-html-deprecated-c-dropdown-badge-toggle,
2
+ #ws-html-deprecated-c-dropdown-badge-drillup-toggle,
3
+ #ws-html-deprecated-c-dropdown-expanded,
4
+ #ws-html-deprecated-c-dropdown-kebab,
5
+ #ws-html-deprecated-c-dropdown-kebab-align-right,
6
+ #ws-html-deprecated-c-dropdown-align-right,
7
+ #ws-html-deprecated-c-dropdown-align-on-different-breakpoint,
8
+ #ws-html-deprecated-c-dropdown-align-top,
9
+ #ws-html-deprecated-c-dropdown-primary-toggle,
10
+ #ws-html-deprecated-c-dropdown-secondary-toggle,
11
+ #ws-html-deprecated-c-dropdown-menu-item-icons,
12
+ #ws-html-deprecated-c-dropdown-aria-disabled-items,
13
+ #ws-html-deprecated-c-dropdown-plain-with-text {
14
+ min-height: 310px;
15
+ }
16
+
17
+ #ws-html-deprecated-c-dropdown-kebab-align-right,
18
+ #ws-html-deprecated-c-dropdown-align-right {
19
+ display: flex;
20
+ justify-content: flex-end;
21
+ }
22
+
23
+ #ws-html-deprecated-c-dropdown-align-on-different-breakpoint {
24
+ display: flex;
25
+ justify-content: center;
26
+ }
27
+
28
+ #ws-html-deprecated-c-dropdown-align-top {
29
+ display: flex;
30
+ align-items: flex-end;
31
+ }
32
+
33
+ #ws-html-deprecated-c-dropdown-with-groups,
34
+ #ws-html-deprecated-c-dropdown-with-groups-and-dividers-between-groups {
35
+ min-height: 440px;
36
+ }
37
+
38
+ #ws-html-deprecated-c-dropdown-with-groups-and-dividers-between-items {
39
+ min-height: 460px;
40
+ }
41
+
42
+ #ws-html-deprecated-c-dropdown-dropdown-with-image-and-text .ws-preview-html {
43
+ min-height: 19rem;
44
+ }
45
+
46
+ #ws-html-deprecated-c-dropdown-split-button-checkbox,
47
+ #ws-html-deprecated-c-dropdown-split-button-action,
48
+ #ws-html-deprecated-c-dropdown-split-button-primary-checkbox,
49
+ #ws-html-deprecated-c-dropdown-split-button-primary-action,
50
+ #ws-html-deprecated-c-dropdown-split-button-secondary-action {
51
+ min-height: 210px;
52
+ }
53
+
54
+ [id^="ws-html-deprecated-c-dropdown-split-button"] .pf-v5-c-dropdown:not(:last-child) {
55
+ margin-right: 4px;
56
+ }
57
+
58
+ #ws-html-deprecated-c-dropdown-panel {
59
+ min-height: 130px;
60
+ }
61
+
62
+ #ws-html-deprecated-c-dropdown-dropdown-with-description {
63
+ min-height: 400px;
64
+ }
package/docs/components/Dropdown/{examples → deprecated}/Dropdown.md RENAMED
@@ -3,6 +3,7 @@ id: Dropdown
3
3
  section: components
4
4
  subsection: menus
5
5
  cssPrefix: pf-v5-c-dropdown
6
+ deprecated: true
6
7
  ---import './Dropdown.css'
7
8
 
8
9
  ## Examples
package/docs/components/Nav/examples/Navigation.md CHANGED
@@ -658,7 +658,7 @@ cssPrefix: pf-v5-c-nav
658
658
 
659
659
  ### Default in light mode
660
660
 
661
- ```html
661
+ ```html isDeprecated
662
662
  <nav class="pf-v5-c-nav pf-m-light" aria-label="Global">
663
663
  <ul class="pf-v5-c-nav__list" role="list">
664
664
  <li class="pf-v5-c-nav__item">
@@ -684,7 +684,7 @@ cssPrefix: pf-v5-c-nav
684
684
 
685
685
  ### Expanded in light mode
686
686
 
687
- ```html
687
+ ```html isDeprecated
688
688
  <nav class="pf-v5-c-nav pf-m-light" aria-label="Global">
689
689
  <ul class="pf-v5-c-nav__list" role="list">
690
690
  <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
package/docs/components/Select/deprecated/Select.css ADDED
@@ -0,0 +1,56 @@
1
+ #ws-html-deprecated-c-select-single-with-top-expanded,
2
+ #ws-html-deprecated-c-select-single-expanded,
3
+ #ws-html-deprecated-c-select-single-expanded-and-selected,
4
+ #ws-html-deprecated-c-select-single-with-typeahead-expanded-and-selected,
5
+ #ws-html-deprecated-c-select-plain-toggle-expanded,
6
+ #ws-html-deprecated-c-select-view-more-menu-item,
7
+ #ws-html-deprecated-c-select-loading-menu-item,
8
+ #ws-html-deprecated-c-select-placeholder-expanded,
9
+ #ws-html-deprecated-c-select-placeholder-item-disabled,
10
+ #ws-html-deprecated-c-select-placeholder-item-enabled,
11
+ #ws-html-deprecated-c-select-multi-with-typeahead-invalid {
12
+ min-height: 330px;
13
+ }
14
+
15
+ #ws-html-deprecated-c-select-single-with-top-expanded {
16
+ display: flex;
17
+ align-items: flex-end;
18
+ width: 100%;
19
+ }
20
+
21
+ #ws-html-deprecated-c-select-single-with-typeahead-expanded,
22
+ #ws-html-deprecated-c-select-multi-with-typeahead-chip-group-collapsed {
23
+ min-height: 210px;
24
+ }
25
+
26
+ #ws-html-deprecated-c-select-checkbox-expanded,
27
+ #ws-html-deprecated-c-select-checkbox-expanded-without-badge,
28
+ #ws-html-deprecated-c-select-checkbox-with-counts {
29
+ min-height: 270px;
30
+ }
31
+
32
+ #ws-html-deprecated-c-select-multi-with-typeahead-chip-group-expanded,
33
+ #ws-html-deprecated-c-select-menu-footer {
34
+ min-height: 365px;
35
+ }
36
+
37
+ #ws-html-deprecated-c-select-checkbox-expanded-and-selected-with-groups {
38
+ min-height: 460px;
39
+ }
40
+
41
+ #ws-html-deprecated-c-select-checkbox-expanded-and-selected-with-groups-and-filter {
42
+ min-height: 530px;
43
+ }
44
+
45
+ #ws-html-deprecated-c-select-panel-menu {
46
+ min-height: 120px;
47
+ }
48
+
49
+ #ws-html-deprecated-c-select-item-description,
50
+ #ws-html-deprecated-c-select-checkbox-item-description {
51
+ min-height: 400px;
52
+ }
53
+
54
+ #ws-html-deprecated-c-select-menu-item-favorites {
55
+ min-height: 650px;
56
+ }
package/docs/components/Select/{examples → deprecated}/Select.md RENAMED
@@ -3,6 +3,7 @@ id: Select
3
3
  section: components
4
4
  subsection: menus
5
5
  cssPrefix: pf-v5-c-select
6
+ deprecated: true
6
7
  ---import './Select.css'
7
8
 
8
9
  ## Single
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -2062,7 +2062,7 @@ section: components
2062
2062
 
2063
2063
  ### Light theme sidebar and nav
2064
2064
 
2065
- ```html isFullscreen
2065
+ ```html isFullscreen isDeprecated
2066
2066
  <div class="pf-v5-c-page" id="nav-light-theme-example">
2067
2067
  <div class="pf-v5-c-skip-to-content">
2068
2068
  <a
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": "5.0.0-prerelease.5",
4
+ "version": "5.0.0-prerelease.7",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -8199,6 +8199,10 @@ button.pf-v5-c-breadcrumb__link {
8199
8199
  :where(.pf-v5-theme-dark) .pf-v5-c-card,
8200
8200
  :where(.pf-v5-theme-dark) .pf-v5-c-card.pf-m-non-selectable-raised {
8201
8201
  --pf-v5-c-card--BoxShadow: var(--pf-v5-global--BoxShadow--md);
8202
+ --pf-v5-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-v5-global--palette--black-700);
8203
+ --pf-v5-c-card--m-selectable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
8204
+ --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
8205
+ --pf-v5-c-card--m-selectable--focus--BackgroundColor: var(--pf-v5-global--palette--blue-600);
8202
8206
  --pf-v5-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
8203
8207
  --pf-v5-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
8204
8208
  --pf-v5-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -8316,6 +8316,10 @@ button.pf-v5-c-breadcrumb__link {
8316
8316
  :where(.pf-theme-dark) .pf-v5-c-card,
8317
8317
  :where(.pf-theme-dark) .pf-v5-c-card.pf-m-non-selectable-raised {
8318
8318
  --pf-v5-c-card--BoxShadow: var(--pf-v5-global--BoxShadow--md);
8319
+ --pf-v5-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-v5-global--palette--black-700);
8320
+ --pf-v5-c-card--m-selectable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
8321
+ --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
8322
+ --pf-v5-c-card--m-selectable--focus--BackgroundColor: var(--pf-v5-global--palette--blue-600);
8319
8323
  --pf-v5-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
8320
8324
  --pf-v5-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
8321
8325
  --pf-v5-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
package/patternfly.css CHANGED
@@ -8316,6 +8316,10 @@ button.pf-v5-c-breadcrumb__link {
8316
8316
  :where(.pf-v5-theme-dark) .pf-v5-c-card,
8317
8317
  :where(.pf-v5-theme-dark) .pf-v5-c-card.pf-m-non-selectable-raised {
8318
8318
  --pf-v5-c-card--BoxShadow: var(--pf-v5-global--BoxShadow--md);
8319
+ --pf-v5-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-v5-global--palette--black-700);
8320
+ --pf-v5-c-card--m-selectable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
8321
+ --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
8322
+ --pf-v5-c-card--m-selectable--focus--BackgroundColor: var(--pf-v5-global--palette--blue-600);
8319
8323
  --pf-v5-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
8320
8324
  --pf-v5-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
8321
8325
  --pf-v5-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-v5-global--BoxShadow--lg);