@patternfly/patternfly 5.2.0-prerelease.2 → 5.2.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 (26) hide show
  1. package/components/Accordion/accordion.css +10 -1
  2. package/components/Accordion/accordion.scss +13 -1
  3. package/components/Switch/switch.css +1 -1
  4. package/components/Switch/switch.scss +1 -1
  5. package/docs/components/Accordion/examples/Accordion.md +95 -0
  6. package/docs/components/LogViewer/examples/LogViewer.md +130 -130
  7. package/docs/components/Menu/examples/Menu.md +507 -473
  8. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  9. package/docs/components/Nav/examples/Navigation.md +140 -113
  10. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  11. package/docs/components/Toolbar/examples/Toolbar.md +462 -2791
  12. package/docs/demos/CardView/examples/CardView.md +32 -51
  13. package/docs/demos/DataList/examples/DataList.md +182 -318
  14. package/docs/demos/Masthead/examples/Masthead.md +48 -207
  15. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
  16. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +80 -268
  17. package/docs/demos/Table/examples/Table.md +1004 -1787
  18. package/docs/demos/Tabs/examples/Tabs.md +2 -2
  19. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  20. package/docs/demos/Toolbar/examples/Toolbar.md +691 -1015
  21. package/package.json +2 -2
  22. package/patternfly-no-globals.css +11 -2
  23. package/patternfly-theme-dark-unversioned.css +11 -2
  24. package/patternfly.css +11 -2
  25. package/patternfly.min.css +1 -1
  26. package/patternfly.min.css.map +1 -1
package/components/Accordion/accordion.css CHANGED
@@ -26,6 +26,10 @@
26
26
  --pf-v5-c-accordion__toggle--after--Width: var(--pf-v5-global--BorderWidth--lg);
27
27
  --pf-v5-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
28
28
  --pf-v5-c-accordion__toggle--BackgroundColor: transparent;
29
+ --pf-v5-c-accordion__toggle--JustifyContent: space-between;
30
+ --pf-v5-c-accordion__toggle--ColumnGap: 0;
31
+ --pf-v5-c-accordion--m-toggle-start__toggle--JustifyContent: start;
32
+ --pf-v5-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-v5-global--spacer--md);
29
33
  --pf-v5-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-v5-global--spacer--lg));
30
34
  --pf-v5-c-accordion__toggle--hover__toggle-text--Color: var(--pf-v5-global--link--Color);
31
35
  --pf-v5-c-accordion__toggle--active__toggle-text--Color: var(--pf-v5-global--link--Color);
@@ -79,6 +83,10 @@
79
83
  color: var(--pf-v5-global--Color--100);
80
84
  background-color: var(--pf-v5-c-accordion--BackgroundColor);
81
85
  }
86
+ .pf-v5-c-accordion.pf-m-toggle-start {
87
+ --pf-v5-c-accordion__toggle--JustifyContent: var(--pf-v5-c-accordion--m-toggle-start__toggle--JustifyContent);
88
+ --pf-v5-c-accordion__toggle--ColumnGap: var(--pf-v5-c-accordion--m-toggle-start__toggle--ColumnGap);
89
+ }
82
90
  .pf-v5-c-accordion.pf-m-display-lg {
83
91
  --pf-v5-c-accordion__toggle--PaddingTop: var(--pf-v5-c-accordion--m-display-lg__toggle--PaddingTop);
84
92
  --pf-v5-c-accordion__toggle--PaddingRight: var(--pf-v5-c-accordion--m-display-lg__toggle--PaddingRight);
@@ -138,8 +146,9 @@
138
146
  .pf-v5-c-accordion__toggle {
139
147
  position: relative;
140
148
  display: flex;
149
+ column-gap: var(--pf-v5-c-accordion__toggle--ColumnGap);
141
150
  align-items: center;
142
- justify-content: space-between;
151
+ justify-content: var(--pf-v5-c-accordion__toggle--JustifyContent);
143
152
  width: 100%;
144
153
  padding-block-start: var(--pf-v5-c-accordion__toggle--PaddingTop);
145
154
  padding-block-end: var(--pf-v5-c-accordion__toggle--PaddingBottom);
package/components/Accordion/accordion.scss CHANGED
@@ -19,6 +19,12 @@
19
19
  --#{$accordion}__toggle--after--Width: var(--#{$pf-global}--BorderWidth--lg);
20
20
  --#{$accordion}__toggle--m-expanded--after--BackgroundColor: var(--#{$pf-global}--primary-color--100);
21
21
  --#{$accordion}__toggle--BackgroundColor: transparent;
22
+ --#{$accordion}__toggle--JustifyContent: space-between;
23
+ --#{$accordion}__toggle--ColumnGap: 0;
24
+
25
+ // Accordion toggle toggle-start modifier
26
+ --#{$accordion}--m-toggle-start__toggle--JustifyContent: start;
27
+ --#{$accordion}--m-toggle-start__toggle--ColumnGap: var(--#{$pf-global}--spacer--md);
22
28
 
23
29
  // accordion toggle text
24
30
  --#{$accordion}__toggle-text--MaxWidth: calc(100% - var(--#{$pf-global}--spacer--lg));
@@ -85,6 +91,11 @@
85
91
 
86
92
  background-color: var(--#{$accordion}--BackgroundColor);
87
93
 
94
+ &.pf-m-toggle-start {
95
+ --#{$accordion}__toggle--JustifyContent: var(--#{$accordion}--m-toggle-start__toggle--JustifyContent);
96
+ --#{$accordion}__toggle--ColumnGap: var(--#{$accordion}--m-toggle-start__toggle--ColumnGap);
97
+ }
98
+
88
99
  &.pf-m-display-lg {
89
100
  --#{$accordion}__toggle--PaddingTop: var(--#{$accordion}--m-display-lg__toggle--PaddingTop);
90
101
  --#{$accordion}__toggle--PaddingRight: var(--#{$accordion}--m-display-lg__toggle--PaddingRight);
@@ -161,8 +172,9 @@
161
172
  .#{$accordion}__toggle {
162
173
  position: relative;
163
174
  display: flex;
175
+ column-gap: var(--#{$accordion}__toggle--ColumnGap);
164
176
  align-items: center;
165
- justify-content: space-between;
177
+ justify-content: var(--#{$accordion}__toggle--JustifyContent);
166
178
  width: 100%;
167
179
  padding-block-start: var(--#{$accordion}__toggle--PaddingTop);
168
180
  padding-block-end: var(--#{$accordion}__toggle--PaddingBottom);
package/components/Switch/switch.css CHANGED
@@ -56,7 +56,7 @@
56
56
  cursor: pointer;
57
57
  opacity: 0;
58
58
  }
59
- .pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle {
59
+ .pf-v5-c-switch__input:focus-visible ~ .pf-v5-c-switch__toggle {
60
60
  outline: var(--pf-v5-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-v5-c-switch__input--focus__toggle--OutlineColor);
61
61
  outline-offset: var(--pf-v5-c-switch__input--focus__toggle--OutlineOffset);
62
62
  }
package/components/Switch/switch.scss CHANGED
@@ -74,7 +74,7 @@
74
74
  cursor: pointer;
75
75
  opacity: 0;
76
76
 
77
- &:focus ~ .#{$switch}__toggle {
77
+ &:focus-visible ~ .#{$switch}__toggle {
78
78
  outline: var(--#{$switch}__input--focus__toggle--OutlineWidth) solid var(--#{$switch}__input--focus__toggle--OutlineColor);
79
79
  outline-offset: var(--#{$switch}__input--focus__toggle--OutlineOffset);
80
80
  }
package/docs/components/Accordion/examples/Accordion.md CHANGED
@@ -499,6 +499,100 @@ cssPrefix: pf-v5-c-accordion
499
499
 
500
500
  ```
501
501
 
502
+ ### Toggle icon at start
503
+
504
+ ```html isBeta
505
+ <div class="pf-v5-c-accordion pf-m-toggle-start">
506
+ <h3>
507
+ <button
508
+ class="pf-v5-c-accordion__toggle"
509
+ type="button"
510
+ aria-expanded="false"
511
+ >
512
+ <span class="pf-v5-c-accordion__toggle-icon">
513
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
514
+ </span>
515
+
516
+ <span class="pf-v5-c-accordion__toggle-text">Item one</span>
517
+ </button>
518
+ </h3>
519
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
520
+ <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
521
+ </div>
522
+
523
+ <h3>
524
+ <button
525
+ class="pf-v5-c-accordion__toggle"
526
+ type="button"
527
+ aria-expanded="false"
528
+ >
529
+ <span class="pf-v5-c-accordion__toggle-icon">
530
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
531
+ </span>
532
+
533
+ <span class="pf-v5-c-accordion__toggle-text">Item two</span>
534
+ </button>
535
+ </h3>
536
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
537
+ <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
538
+ </div>
539
+
540
+ <h3>
541
+ <button
542
+ class="pf-v5-c-accordion__toggle"
543
+ type="button"
544
+ aria-expanded="false"
545
+ >
546
+ <span class="pf-v5-c-accordion__toggle-icon">
547
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
548
+ </span>
549
+
550
+ <span class="pf-v5-c-accordion__toggle-text">Item three</span>
551
+ </button>
552
+ </h3>
553
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
554
+ <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
555
+ </div>
556
+
557
+ <h3>
558
+ <button
559
+ class="pf-v5-c-accordion__toggle pf-m-expanded"
560
+ type="button"
561
+ aria-expanded="true"
562
+ >
563
+ <span class="pf-v5-c-accordion__toggle-icon">
564
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
565
+ </span>
566
+
567
+ <span class="pf-v5-c-accordion__toggle-text">Item four</span>
568
+ </button>
569
+ </h3>
570
+ <div class="pf-v5-c-accordion__expandable-content pf-m-expanded">
571
+ <div
572
+ class="pf-v5-c-accordion__expandable-content-body"
573
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie lorem lacinia dolor aliquet faucibus. Suspendisse gravida imperdiet accumsan. Aenean auctor lorem justo, vitae tincidunt enim blandit vel. Aenean quis tempus dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
574
+ </div>
575
+
576
+ <h3>
577
+ <button
578
+ class="pf-v5-c-accordion__toggle"
579
+ type="button"
580
+ aria-expanded="false"
581
+ >
582
+ <span class="pf-v5-c-accordion__toggle-icon">
583
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
584
+ </span>
585
+
586
+ <span class="pf-v5-c-accordion__toggle-text">Item five</span>
587
+ </button>
588
+ </h3>
589
+ <div class="pf-v5-c-accordion__expandable-content" hidden>
590
+ <div class="pf-v5-c-accordion__expandable-content-body">This text is hidden</div>
591
+ </div>
592
+ </div>
593
+
594
+ ```
595
+
502
596
  ## Documentation
503
597
 
504
598
  ### Overview
@@ -522,5 +616,6 @@ In these examples `.pf-v5-c-accordion` uses `<dl>`, `.pf-v5-c-accordion__toggle`
522
616
  | `.pf-v5-c-accordion__expandable-content-body` | `<div>` | Initiates expandable content body. **Required** |
523
617
  | `.pf-m-bordered` | `.pf-v5-c-accordion` | Modifies the accordion to add borders between items. |
524
618
  | `.pf-m-display-lg` | `.pf-v5-c-accordion` | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
619
+ | `.pf-m-toggle-start` | `.pf-v5-c-accordion` | Modifies accordion styling when accordion toggle icons are rendered at the start of the toggle, before the toggle text. |
525
620
  | `.pf-m-expanded` | `.pf-v5-c-accordion__toggle`, `.pf-v5-c-accordion__expandable-content` | Modifies the accordion button and expandable content for the expanded state. |
526
621
  | `.pf-m-fixed` | `.pf-v5-c-accordion__expandable-content` | Modifies the expandable content for the fixed state. |