@patternfly/patternfly 6.0.0-alpha.197 → 6.0.0-alpha.198

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 +6 -0
  2. package/components/MenuToggle/menu-toggle.scss +7 -0
  3. package/components/_index.css +6 -0
  4. package/docs/components/MenuToggle/examples/MenuToggle.md +94 -1
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +6 -0
  7. package/patternfly.css +6 -0
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -87,6 +87,7 @@
87
87
  --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
88
88
  --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
89
89
  --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
90
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
90
91
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
91
92
  --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
92
93
  --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
@@ -350,6 +351,11 @@
350
351
  .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__controls) {
351
352
  padding-inline-start: 0;
352
353
  }
354
+ .pf-v6-c-menu-toggle__button.pf-m-text {
355
+ display: inline-flex;
356
+ align-items: baseline;
357
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart);
358
+ }
353
359
 
354
360
  .pf-v6-c-menu-toggle__text {
355
361
  overflow: hidden;
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -135,6 +135,7 @@
135
135
  --#{$menu-toggle}__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
136
136
  --#{$menu-toggle}__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
137
137
  --#{$menu-toggle}__button--MinWidth: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight) + var(--#{$menu-toggle}--PaddingBlockStart) + var(--#{$menu-toggle}--PaddingBlockEnd));
138
+ --#{$menu-toggle}__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
138
139
 
139
140
  // Menu toggle plain
140
141
  --#{$menu-toggle}--m-plain--Color: var(--pf-t--global--icon--color--regular);
@@ -476,6 +477,12 @@
476
477
  &:has(.#{$menu-toggle}__controls) {
477
478
  padding-inline-start: 0;
478
479
  }
480
+
481
+ &.pf-m-text {
482
+ display: inline-flex;
483
+ align-items: baseline;
484
+ padding-inline-start: var(--#{$menu-toggle}__button--m-text--PaddingInlineStart);
485
+ }
479
486
  }
480
487
 
481
488
  .#{$menu-toggle}__text {
package/components/_index.css CHANGED
@@ -9929,6 +9929,7 @@ ul.pf-v6-c-list {
9929
9929
  --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9930
9930
  --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
9931
9931
  --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
9932
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9932
9933
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
9933
9934
  --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
9934
9935
  --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
@@ -10192,6 +10193,11 @@ ul.pf-v6-c-list {
10192
10193
  .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__controls) {
10193
10194
  padding-inline-start: 0;
10194
10195
  }
10196
+ .pf-v6-c-menu-toggle__button.pf-m-text {
10197
+ display: inline-flex;
10198
+ align-items: baseline;
10199
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart);
10200
+ }
10195
10201
 
10196
10202
  .pf-v6-c-menu-toggle__text {
10197
10203
  overflow: hidden;
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -406,7 +406,7 @@ cssPrefix: pf-v6-c-menu-toggle
406
406
 
407
407
  ```
408
408
 
409
- ### Split button (checkbox with toggle text)
409
+ ### Split button (checkbox with label)
410
410
 
411
411
  ```html
412
412
  <div
@@ -490,6 +490,98 @@ cssPrefix: pf-v6-c-menu-toggle
490
490
 
491
491
  ```
492
492
 
493
+ ### Split button (checkbox with toggle button text)
494
+
495
+ ```html
496
+ <div
497
+ class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
498
+ id="split-button-checkbox-with-toggle-button-text-disabled-example"
499
+ >
500
+ <label class="pf-v6-c-check pf-m-standalone">
501
+ <input
502
+ class="pf-v6-c-check__input"
503
+ type="checkbox"
504
+ disabled
505
+ id="split-button-checkbox-with-toggle-button-text-disabled-example-input"
506
+ name="split-button-checkbox-with-toggle-button-text-disabled-example-input"
507
+ aria-label="Standalone input"
508
+ />
509
+ </label>
510
+ <button
511
+ class="pf-v6-c-menu-toggle__button pf-m-text"
512
+ type="button"
513
+ aria-expanded="false"
514
+ id="split-button-checkbox-with-toggle-button-text-disabled-example-toggle-button"
515
+ aria-label="Menu toggle"
516
+ disabled
517
+ >
518
+ <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
519
+ <span class="pf-v6-c-menu-toggle__controls">
520
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
521
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
522
+ </span>
523
+ </span>
524
+ </button>
525
+ </div>&nbsp;
526
+ <div
527
+ class="pf-v6-c-menu-toggle pf-m-split-button"
528
+ id="split-button-checkbox-with-toggle-button-text-example"
529
+ >
530
+ <label class="pf-v6-c-check pf-m-standalone">
531
+ <input
532
+ class="pf-v6-c-check__input"
533
+ type="checkbox"
534
+ id="split-button-checkbox-with-toggle-button-text-example-input"
535
+ name="split-button-checkbox-with-toggle-button-text-example-input"
536
+ aria-label="Standalone input"
537
+ />
538
+ </label>
539
+ <button
540
+ class="pf-v6-c-menu-toggle__button pf-m-text"
541
+ type="button"
542
+ aria-expanded="false"
543
+ id="split-button-checkbox-with-toggle-button-text-example-toggle-button"
544
+ aria-label="Menu toggle"
545
+ >
546
+ <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
547
+ <span class="pf-v6-c-menu-toggle__controls">
548
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
549
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
550
+ </span>
551
+ </span>
552
+ </button>
553
+ </div>&nbsp;
554
+ <div
555
+ class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
556
+ id="split-button-checkbox-with-toggle-button-text-expanded-example"
557
+ >
558
+ <label class="pf-v6-c-check pf-m-standalone">
559
+ <input
560
+ class="pf-v6-c-check__input"
561
+ type="checkbox"
562
+ id="split-button-checkbox-with-toggle-button-text-expanded-example-input"
563
+ name="split-button-checkbox-with-toggle-button-text-expanded-example-input"
564
+ aria-label="Standalone input"
565
+ />
566
+ </label>
567
+ <button
568
+ class="pf-v6-c-menu-toggle__button pf-m-text"
569
+ type="button"
570
+ aria-expanded="true"
571
+ id="split-button-checkbox-with-toggle-button-text-expanded-example-toggle-button"
572
+ aria-label="Menu toggle"
573
+ >
574
+ <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
575
+ <span class="pf-v6-c-menu-toggle__controls">
576
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
577
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
578
+ </span>
579
+ </span>
580
+ </button>
581
+ </div>
582
+
583
+ ```
584
+
493
585
  ### Small
494
586
 
495
587
  ```html
@@ -1209,6 +1301,7 @@ cssPrefix: pf-v6-c-menu-toggle
1209
1301
  | `.pf-v6-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
1210
1302
  | `.pf-m-split-button` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
1211
1303
  | `.pf-m-action` | `.pf-v6-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
1304
+ | `.pf-m-text` | `.pf-v6-c-menu-toggle__button` | Modifies the menu toggle component split button variation with text. |
1212
1305
  | `.pf-m-disabled` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
1213
1306
  | `.pf-m-primary` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
1214
1307
  | `.pf-m-secondary` | `.pf-v6-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": "6.0.0-alpha.197",
4
+ "version": "6.0.0-alpha.198",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -15996,6 +15996,7 @@ ul.pf-v6-c-list {
15996
15996
  --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
15997
15997
  --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
15998
15998
  --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
15999
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
15999
16000
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
16000
16001
  --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
16001
16002
  --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
@@ -16259,6 +16260,11 @@ ul.pf-v6-c-list {
16259
16260
  .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__controls) {
16260
16261
  padding-inline-start: 0;
16261
16262
  }
16263
+ .pf-v6-c-menu-toggle__button.pf-m-text {
16264
+ display: inline-flex;
16265
+ align-items: baseline;
16266
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart);
16267
+ }
16262
16268
 
16263
16269
  .pf-v6-c-menu-toggle__text {
16264
16270
  overflow: hidden;
package/patternfly.css CHANGED
@@ -16117,6 +16117,7 @@ ul.pf-v6-c-list {
16117
16117
  --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
16118
16118
  --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16119
16119
  --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
16120
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
16120
16121
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
16121
16122
  --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
16122
16123
  --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
@@ -16380,6 +16381,11 @@ ul.pf-v6-c-list {
16380
16381
  .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__controls) {
16381
16382
  padding-inline-start: 0;
16382
16383
  }
16384
+ .pf-v6-c-menu-toggle__button.pf-m-text {
16385
+ display: inline-flex;
16386
+ align-items: baseline;
16387
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart);
16388
+ }
16383
16389
 
16384
16390
  .pf-v6-c-menu-toggle__text {
16385
16391
  overflow: hidden;