@patternfly/patternfly 5.0.0-prerelease.4 → 5.0.0-prerelease.6

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 (13) hide show
  1. package/components/Switch/switch.css +3 -0
  2. package/components/Switch/switch.scss +3 -0
  3. package/components/Switch/themes/dark/switch.scss +1 -0
  4. package/docs/components/Drawer/examples/Drawer.md +2 -2
  5. package/docs/components/Nav/examples/Navigation.md +2 -2
  6. package/docs/components/Switch/examples/Switch.md +36 -0
  7. package/docs/demos/Nav/examples/Nav.md +1 -1
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +3 -0
  10. package/patternfly-theme-dark-unversioned.css +3 -0
  11. package/patternfly.css +3 -0
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/Switch/switch.css CHANGED
@@ -6,6 +6,7 @@
6
6
  --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
7
7
  --pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
8
8
  --pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
9
+ --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
9
10
  --pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
10
11
  --pf-v5-c-switch--Height: auto;
11
12
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
@@ -88,6 +89,7 @@
88
89
  cursor: not-allowed;
89
90
  }
90
91
  .pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle {
92
+ --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-c-switch__input--disabled__toggle-icon--Color);
91
93
  cursor: not-allowed;
92
94
  background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor);
93
95
  }
@@ -140,4 +142,5 @@
140
142
  --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
141
143
  --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
142
144
  --pf-v5-c-switch__toggle--before--BoxShadow: none;
145
+ --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
143
146
  }
package/components/Switch/switch.scss CHANGED
@@ -11,6 +11,7 @@
11
11
  --#{$switch}__toggle-icon--Color: var(--#{$pf-global}--Color--light-100);
12
12
  --#{$switch}__toggle-icon--Left: calc(var(--#{$switch}--FontSize) * .4);
13
13
  --#{$switch}__toggle-icon--Offset: #{pf-size-prem(2px)}; // this value is created to handle sizing of the toggle and therefore the width of the toggle and its transform value.
14
+ --#{$switch}__input--disabled__toggle-icon--Color: var(--#{$pf-global}--palette--black-150);
14
15
 
15
16
  // Switch
16
17
  --#{$switch}--LineHeight: var(--#{$pf-global}--LineHeight--md);
@@ -121,6 +122,8 @@
121
122
  }
122
123
 
123
124
  ~ .#{$switch}__toggle {
125
+ --#{$switch}__toggle-icon--Color: var(--#{$switch}__input--disabled__toggle-icon--Color);
126
+
124
127
  cursor: not-allowed;
125
128
  background-color: var(--#{$switch}__input--disabled__toggle--BackgroundColor);
126
129
 
package/components/Switch/themes/dark/switch.scss CHANGED
@@ -6,5 +6,6 @@
6
6
  --#{$switch}__input--not-checked__label--Color: var(--#{$pf-global}--Color--100);
7
7
  --#{$switch}__input--disabled__toggle--before--BackgroundColor: var(--#{$pf-global}--disabled-color--100);
8
8
  --#{$switch}__toggle--before--BoxShadow: none;
9
+ --#{$switch}__input--disabled__toggle-icon--Color: var(--#{$pf-global}--disabled-color--100);
9
10
  }
10
11
  }
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/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/Switch/examples/Switch.md CHANGED
@@ -261,6 +261,42 @@ cssPrefix: pf-v5-c-switch
261
261
  >Message when off</span>
262
262
  </label>
263
263
 
264
+ <br />
265
+ <br />
266
+ <label class="pf-v5-c-switch" for="switch-with-icon-disabled-1">
267
+ <input
268
+ class="pf-v5-c-switch__input"
269
+ type="checkbox"
270
+ id="switch-with-icon-disabled-1"
271
+ aria-label="switch is off"
272
+ disabled
273
+ checked
274
+ />
275
+
276
+ <span class="pf-v5-c-switch__toggle">
277
+ <span class="pf-v5-c-switch__toggle-icon">
278
+ <i class="fas fa-check" aria-hidden="true"></i>
279
+ </span>
280
+ </span>
281
+ </label>
282
+
283
+ <br />
284
+ <br />
285
+ <label class="pf-v5-c-switch" for="switch-with-icon-disabled-2">
286
+ <input
287
+ class="pf-v5-c-switch__input"
288
+ type="checkbox"
289
+ id="switch-with-icon-disabled-2"
290
+ aria-label="switch is off"
291
+ disabled
292
+ />
293
+ <span class="pf-v5-c-switch__toggle">
294
+ <span class="pf-v5-c-switch__toggle-icon">
295
+ <i class="fas fa-check" aria-hidden="true"></i>
296
+ </span>
297
+ </span>
298
+ </label>
299
+
264
300
  ```
265
301
 
266
302
  ## Documentation
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.4",
4
+ "version": "5.0.0-prerelease.6",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -25041,6 +25041,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25041
25041
  --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
25042
25042
  --pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
25043
25043
  --pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
25044
+ --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
25044
25045
  --pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
25045
25046
  --pf-v5-c-switch--Height: auto;
25046
25047
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
@@ -25123,6 +25124,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25123
25124
  cursor: not-allowed;
25124
25125
  }
25125
25126
  .pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle {
25127
+ --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-c-switch__input--disabled__toggle-icon--Color);
25126
25128
  cursor: not-allowed;
25127
25129
  background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor);
25128
25130
  }
@@ -25194,6 +25196,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25194
25196
  --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
25195
25197
  --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
25196
25198
  --pf-v5-c-switch__toggle--before--BoxShadow: none;
25199
+ --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
25197
25200
  }
25198
25201
 
25199
25202
  .pf-v5-c-tab-content {
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -25158,6 +25158,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25158
25158
  --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
25159
25159
  --pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
25160
25160
  --pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
25161
+ --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
25161
25162
  --pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
25162
25163
  --pf-v5-c-switch--Height: auto;
25163
25164
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
@@ -25240,6 +25241,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25240
25241
  cursor: not-allowed;
25241
25242
  }
25242
25243
  .pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle {
25244
+ --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-c-switch__input--disabled__toggle-icon--Color);
25243
25245
  cursor: not-allowed;
25244
25246
  background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor);
25245
25247
  }
@@ -25311,6 +25313,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25311
25313
  --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
25312
25314
  --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
25313
25315
  --pf-v5-c-switch__toggle--before--BoxShadow: none;
25316
+ --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
25314
25317
  }
25315
25318
 
25316
25319
  .pf-v5-c-tab-content {
package/patternfly.css CHANGED
@@ -25158,6 +25158,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25158
25158
  --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
25159
25159
  --pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
25160
25160
  --pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
25161
+ --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
25161
25162
  --pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
25162
25163
  --pf-v5-c-switch--Height: auto;
25163
25164
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
@@ -25240,6 +25241,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25240
25241
  cursor: not-allowed;
25241
25242
  }
25242
25243
  .pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle {
25244
+ --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-c-switch__input--disabled__toggle-icon--Color);
25243
25245
  cursor: not-allowed;
25244
25246
  background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor);
25245
25247
  }
@@ -25311,6 +25313,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25311
25313
  --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
25312
25314
  --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
25313
25315
  --pf-v5-c-switch__toggle--before--BoxShadow: none;
25316
+ --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
25314
25317
  }
25315
25318
 
25316
25319
  .pf-v5-c-tab-content {