@patternfly/patternfly 5.4.0-prerelease.3 → 5.4.0-prerelease.5

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 (11) hide show
  1. package/components/MenuToggle/menu-toggle.css +7 -0
  2. package/components/MenuToggle/menu-toggle.scss +9 -0
  3. package/components/ProgressStepper/progress-stepper.css +1 -0
  4. package/components/ProgressStepper/progress-stepper.scss +1 -0
  5. package/docs/components/MenuToggle/examples/MenuToggle.md +96 -1
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +8 -0
  8. package/patternfly-theme-dark-unversioned.css +8 -0
  9. package/patternfly.css +8 -0
  10. package/patternfly.min.css +1 -1
  11. 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/components/ProgressStepper/progress-stepper.css CHANGED
@@ -308,6 +308,7 @@
308
308
  border: 0;
309
309
  }
310
310
  .pf-v5-c-progress-stepper__step-title.pf-m-help-text {
311
+ padding: 0;
311
312
  text-decoration: underline;
312
313
  text-decoration-thickness: var(--pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
313
314
  text-decoration-style: dashed;
package/components/ProgressStepper/progress-stepper.scss CHANGED
@@ -399,6 +399,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
399
399
  border: 0;
400
400
 
401
401
  &.pf-m-help-text {
402
+ padding: 0;
402
403
  text-decoration: underline;
403
404
  text-decoration-thickness: var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationThickness);
404
405
  text-decoration-style: dashed;
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.5",
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.9",
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;
@@ -23229,6 +23236,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
23229
23236
  border: 0;
23230
23237
  }
23231
23238
  .pf-v5-c-progress-stepper__step-title.pf-m-help-text {
23239
+ padding: 0;
23232
23240
  text-decoration: underline;
23233
23241
  text-decoration-thickness: var(--pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
23234
23242
  text-decoration-style: dashed;
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;
@@ -23346,6 +23353,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
23346
23353
  border: 0;
23347
23354
  }
23348
23355
  .pf-v5-c-progress-stepper__step-title.pf-m-help-text {
23356
+ padding: 0;
23349
23357
  text-decoration: underline;
23350
23358
  text-decoration-thickness: var(--pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
23351
23359
  text-decoration-style: dashed;
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;
@@ -23346,6 +23353,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
23346
23353
  border: 0;
23347
23354
  }
23348
23355
  .pf-v5-c-progress-stepper__step-title.pf-m-help-text {
23356
+ padding: 0;
23349
23357
  text-decoration: underline;
23350
23358
  text-decoration-thickness: var(--pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
23351
23359
  text-decoration-style: dashed;