@patternfly/patternfly 5.4.0-prerelease.2 → 5.4.0-prerelease.4

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 (19) hide show
  1. package/components/MenuToggle/menu-toggle.css +7 -0
  2. package/components/MenuToggle/menu-toggle.scss +9 -0
  3. package/docs/components/MenuToggle/examples/MenuToggle.md +96 -1
  4. package/docs/components/Panel/examples/Panel.md +2 -2
  5. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  6. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  7. package/docs/components/Table/examples/Table.md +471 -44
  8. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -32
  9. package/docs/utilities/Display/examples/Display.css +1 -8
  10. package/docs/utilities/Display/examples/Display.md +16 -7
  11. package/package.json +5 -5
  12. package/patternfly-addons.css +38 -0
  13. package/patternfly-no-globals.css +7 -0
  14. package/patternfly-theme-dark-unversioned.css +7 -0
  15. package/patternfly.css +7 -0
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
  18. package/utilities/Display/display.css +38 -0
  19. package/utilities/Display/display.scss +3 -1
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -113,6 +113,7 @@
113
113
  --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
114
114
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
115
115
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
116
+ --pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-v5-global--spacer--xs);
116
117
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
117
118
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
118
119
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
@@ -415,6 +416,12 @@
415
416
  background-color: var(--pf-v5-c-menu-toggle__button--BackgroundColor);
416
417
  border: 0;
417
418
  }
419
+ .pf-v5-c-menu-toggle__button.pf-m-text {
420
+ --pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft: var(--pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart);
421
+ display: inline-flex;
422
+ align-items: baseline;
423
+ padding-inline-start: var(--pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart);
424
+ }
418
425
 
419
426
  .pf-v5-c-menu-toggle__icon {
420
427
  flex-shrink: 0;
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -158,6 +158,7 @@
158
158
  --#{$menu-toggle}__button--PaddingRight: var(--#{$pf-global}--spacer--sm);
159
159
  --#{$menu-toggle}__button__controls--MarginRight: var(--#{$pf-global}--spacer--sm);
160
160
  --#{$menu-toggle}__button__controls--MarginLeft: var(--#{$pf-global}--spacer--sm);
161
+ --#{$menu-toggle}__button--m-text--PaddingInlineStart: var(--#{$pf-global}--spacer--xs);
161
162
 
162
163
  // Typeahead
163
164
  --#{$menu-toggle}--m-typeahead__controls--MarginRight: var(--#{$pf-global}--spacer--sm);
@@ -570,6 +571,14 @@
570
571
  color: inherit;
571
572
  background-color: var(--#{$menu-toggle}__button--BackgroundColor);
572
573
  border: 0;
574
+
575
+ &.pf-m-text {
576
+ --#{$menu-toggle}--m-split-button--last-child--PaddingLeft: var(--#{$menu-toggle}__button--m-text--PaddingInlineStart);
577
+
578
+ display: inline-flex;
579
+ align-items: baseline;
580
+ padding-inline-start: var(--#{$menu-toggle}__button--m-text--PaddingInlineStart);
581
+ }
573
582
  }
574
583
 
575
584
  .#{$menu-toggle}__icon {
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -365,7 +365,7 @@ cssPrefix: pf-v5-c-menu-toggle
365
365
 
366
366
  ```
367
367
 
368
- ### Split button (checkbox with toggle text)
368
+ ### Split button (checkbox with label)
369
369
 
370
370
  ```html
371
371
  <div
@@ -445,6 +445,100 @@ cssPrefix: pf-v5-c-menu-toggle
445
445
  </span>
446
446
  </span>
447
447
  </button>
448
+ </div>&nbsp;
449
+
450
+ ```
451
+
452
+ ### Split button (checkbox with toggle button text)
453
+
454
+ ```html
455
+ <div
456
+ class="pf-v5-c-menu-toggle pf-m-split-button pf-m-disabled"
457
+ id="split-button-checkbox-with-toggle-button-text-disabled-example"
458
+ >
459
+ <label class="pf-v5-c-check pf-m-standalone">
460
+ <input
461
+ class="pf-v5-c-check__input"
462
+ type="checkbox"
463
+ disabled
464
+ id="split-button-checkbox-with-toggle-button-text-disabled-example-input"
465
+ name="split-button-checkbox-with-toggle-button-text-disabled-example-input"
466
+ aria-label="Standalone input"
467
+ />
468
+ </label>
469
+ <button
470
+ class="pf-v5-c-menu-toggle__button pf-m-text"
471
+ type="button"
472
+ aria-expanded="false"
473
+ id="split-button-checkbox-with-toggle-button-text-disabled-example-toggle-button"
474
+ aria-label="Menu toggle"
475
+ disabled
476
+ >
477
+ <span class="pf-v5-c-menu-toggle__text">Toggle button text</span>
478
+ <span class="pf-v5-c-menu-toggle__controls">
479
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
480
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
481
+ </span>
482
+ </span>
483
+ </button>
484
+ </div>
485
+ &nbsp;
486
+ <div
487
+ class="pf-v5-c-menu-toggle pf-m-split-button"
488
+ id="split-button-checkbox-with-toggle-button-text-example"
489
+ >
490
+ <label class="pf-v5-c-check pf-m-standalone">
491
+ <input
492
+ class="pf-v5-c-check__input"
493
+ type="checkbox"
494
+ id="split-button-checkbox-with-toggle-button-text-example-input"
495
+ name="split-button-checkbox-with-toggle-button-text-example-input"
496
+ aria-label="Standalone input"
497
+ />
498
+ </label>
499
+ <button
500
+ class="pf-v5-c-menu-toggle__button pf-m-text"
501
+ type="button"
502
+ aria-expanded="false"
503
+ id="split-button-checkbox-with-toggle-button-text-example-toggle-button"
504
+ aria-label="Menu toggle"
505
+ >
506
+ <span class="pf-v5-c-menu-toggle__text">Toggle button text</span>
507
+ <span class="pf-v5-c-menu-toggle__controls">
508
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
509
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
510
+ </span>
511
+ </span>
512
+ </button>
513
+ </div>
514
+ &nbsp;
515
+ <div
516
+ class="pf-v5-c-menu-toggle pf-m-expanded pf-m-split-button"
517
+ id="split-button-checkbox-with-toggle-button-text-expanded-example"
518
+ >
519
+ <label class="pf-v5-c-check pf-m-standalone">
520
+ <input
521
+ class="pf-v5-c-check__input"
522
+ type="checkbox"
523
+ id="split-button-checkbox-with-toggle-button-text-expanded-example-input"
524
+ name="split-button-checkbox-with-toggle-button-text-expanded-example-input"
525
+ aria-label="Standalone input"
526
+ />
527
+ </label>
528
+ <button
529
+ class="pf-v5-c-menu-toggle__button pf-m-text"
530
+ type="button"
531
+ aria-expanded="true"
532
+ id="split-button-checkbox-with-toggle-button-text-expanded-example-toggle-button"
533
+ aria-label="Menu toggle"
534
+ >
535
+ <span class="pf-v5-c-menu-toggle__text">Toggle button text</span>
536
+ <span class="pf-v5-c-menu-toggle__controls">
537
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
538
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
539
+ </span>
540
+ </span>
541
+ </button>
448
542
  </div>
449
543
 
450
544
  ```
@@ -1064,6 +1158,7 @@ cssPrefix: pf-v5-c-menu-toggle
1064
1158
  | `.pf-v5-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
1065
1159
  | `.pf-m-split-button` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
1066
1160
  | `.pf-m-action` | `.pf-v5-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
1161
+ | `.pf-m-text` | `.pf-v5-c-menu-toggle__button` | Modifies the menu toggle component split button variation with text. |
1067
1162
  | `.pf-m-disabled` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
1068
1163
  | `.pf-m-primary` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
1069
1164
  | `.pf-m-secondary` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
package/docs/components/Panel/examples/Panel.md CHANGED
@@ -89,7 +89,7 @@ cssPrefix: pf-v5-c-panel
89
89
 
90
90
  ```html
91
91
  <div class="pf-v5-c-panel pf-m-scrollable">
92
- <div class="pf-v5-c-panel__main">
92
+ <div class="pf-v5-c-panel__main" tabindex="0">
93
93
  <div class="pf-v5-c-panel__main-body">
94
94
  Main content
95
95
  <br />
@@ -120,7 +120,7 @@ cssPrefix: pf-v5-c-panel
120
120
  <div class="pf-v5-c-panel pf-m-scrollable">
121
121
  <div class="pf-v5-c-panel__header">Header content</div>
122
122
  <hr class="pf-v5-c-divider" />
123
- <div class="pf-v5-c-panel__main">
123
+ <div class="pf-v5-c-panel__main" tabindex="0">
124
124
  <div class="pf-v5-c-panel__main-body">
125
125
  Main content
126
126
  <br />
package/docs/components/Sidebar/examples/Sidebar.css CHANGED
@@ -1,4 +1,6 @@
1
- .ws-core-c-sidebar .ws-preview-html {
2
- height: 200px;
1
+ #ws-core-c-sidebar-sticky-panel,
2
+ #ws-core-c-sidebar-static-panel,
3
+ #ws-core-c-sidebar-responsive-panel-width {
3
4
  overflow: auto;
5
+ max-height: 200px;
4
6
  }
package/docs/components/Sidebar/examples/Sidebar.md CHANGED
@@ -122,7 +122,7 @@ cssPrefix: pf-v5-c-sidebar
122
122
  ### Sticky panel
123
123
 
124
124
  ```html
125
- <div class="pf-v5-c-sidebar">
125
+ <div class="pf-v5-c-sidebar" tabindex="0">
126
126
  <div class="pf-v5-c-sidebar__main">
127
127
  <div class="pf-v5-c-sidebar__panel pf-m-sticky">Sidebar panel</div>
128
128
  <div class="pf-v5-c-sidebar__content">
@@ -140,7 +140,7 @@ cssPrefix: pf-v5-c-sidebar
140
140
  ### Static panel
141
141
 
142
142
  ```html
143
- <div class="pf-v5-c-sidebar">
143
+ <div class="pf-v5-c-sidebar" tabindex="0">
144
144
  <div class="pf-v5-c-sidebar__main">
145
145
  <div class="pf-v5-c-sidebar__panel pf-m-static">Sidebar panel</div>
146
146
  <div class="pf-v5-c-sidebar__content">
@@ -158,7 +158,7 @@ cssPrefix: pf-v5-c-sidebar
158
158
  ### Responsive panel width
159
159
 
160
160
  ```html
161
- <div class="pf-v5-c-sidebar">
161
+ <div class="pf-v5-c-sidebar" tabindex="0">
162
162
  <div class="pf-v5-c-sidebar__main">
163
163
  <div
164
164
  class="pf-v5-c-sidebar__panel pf-m-sticky pf-m-width-50 pf-m-width-33-on-lg pf-m-width-75-on-xl"