@patternfly/patternfly 5.4.0-prerelease.3 → 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 (9) 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/package.json +2 -2
  5. package/patternfly-no-globals.css +7 -0
  6. package/patternfly-theme-dark-unversioned.css +7 -0
  7. package/patternfly.css +7 -0
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -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/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.4.0-prerelease.3",
4
+ "version": "5.4.0-prerelease.4",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -46,7 +46,7 @@
46
46
  "@commitlint/config-conventional": "^18.4.3",
47
47
  "@fortawesome/fontawesome": "^1.1.8",
48
48
  "@octokit/rest": "^20.0.2",
49
- "@patternfly/documentation-framework": "5.15.2",
49
+ "@patternfly/documentation-framework": "5.16.7",
50
50
  "@patternfly/patternfly-a11y": "4.3.1",
51
51
  "@patternfly/react-code-editor": "5.3.3",
52
52
  "@patternfly/react-core": "5.3.3",
package/patternfly-no-globals.css CHANGED
@@ -18485,6 +18485,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18485
18485
  --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
18486
18486
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
18487
18487
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18488
+ --pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-v5-global--spacer--xs);
18488
18489
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
18489
18490
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18490
18491
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
@@ -18787,6 +18788,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18787
18788
  background-color: var(--pf-v5-c-menu-toggle__button--BackgroundColor);
18788
18789
  border: 0;
18789
18790
  }
18791
+ .pf-v5-c-menu-toggle__button.pf-m-text {
18792
+ --pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft: var(--pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart);
18793
+ display: inline-flex;
18794
+ align-items: baseline;
18795
+ padding-inline-start: var(--pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart);
18796
+ }
18790
18797
 
18791
18798
  .pf-v5-c-menu-toggle__icon {
18792
18799
  flex-shrink: 0;
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -18602,6 +18602,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18602
18602
  --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
18603
18603
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
18604
18604
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18605
+ --pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-v5-global--spacer--xs);
18605
18606
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
18606
18607
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18607
18608
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
@@ -18904,6 +18905,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18904
18905
  background-color: var(--pf-v5-c-menu-toggle__button--BackgroundColor);
18905
18906
  border: 0;
18906
18907
  }
18908
+ .pf-v5-c-menu-toggle__button.pf-m-text {
18909
+ --pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft: var(--pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart);
18910
+ display: inline-flex;
18911
+ align-items: baseline;
18912
+ padding-inline-start: var(--pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart);
18913
+ }
18907
18914
 
18908
18915
  .pf-v5-c-menu-toggle__icon {
18909
18916
  flex-shrink: 0;
package/patternfly.css CHANGED
@@ -18602,6 +18602,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18602
18602
  --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
18603
18603
  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
18604
18604
  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18605
+ --pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-v5-global--spacer--xs);
18605
18606
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
18606
18607
  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
18607
18608
  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
@@ -18904,6 +18905,12 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18904
18905
  background-color: var(--pf-v5-c-menu-toggle__button--BackgroundColor);
18905
18906
  border: 0;
18906
18907
  }
18908
+ .pf-v5-c-menu-toggle__button.pf-m-text {
18909
+ --pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft: var(--pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart);
18910
+ display: inline-flex;
18911
+ align-items: baseline;
18912
+ padding-inline-start: var(--pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart);
18913
+ }
18907
18914
 
18908
18915
  .pf-v5-c-menu-toggle__icon {
18909
18916
  flex-shrink: 0;