@patternfly/patternfly 4.216.3 → 4.217.0

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 (23) hide show
  1. package/components/Button/button.css +11 -1
  2. package/components/Button/button.scss +10 -1
  3. package/components/Spinner/spinner.css +4 -0
  4. package/components/Spinner/spinner.scss +7 -0
  5. package/components/TextInputGroup/text-input-group.css +11 -12
  6. package/components/TextInputGroup/text-input-group.scss +13 -18
  7. package/docs/components/Button/examples/Button.md +26 -6
  8. package/docs/components/LogViewer/examples/LogViewer.md +268 -268
  9. package/docs/components/Spinner/examples/Spinner.md +23 -6
  10. package/docs/components/TextInputGroup/examples/TextInputGroup.md +5 -21
  11. package/docs/components/Toolbar/examples/Toolbar.md +40 -35
  12. package/docs/demos/DataList/examples/DataList.md +16 -14
  13. package/docs/demos/Drawer/examples/Drawer.md +168 -144
  14. package/docs/demos/JumpLinks/examples/JumpLinks.md +168 -144
  15. package/docs/demos/Masthead/examples/Masthead.md +24 -21
  16. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +24 -27
  17. package/docs/demos/Table/examples/Table.md +88 -77
  18. package/docs/demos/Toolbar/examples/Toolbar.md +229 -231
  19. package/package.json +2 -2
  20. package/patternfly-no-reset.css +26 -13
  21. package/patternfly.css +26 -13
  22. package/patternfly.min.css +1 -1
  23. package/patternfly.min.css.map +1 -1
package/docs/components/Spinner/examples/Spinner.md CHANGED
@@ -59,6 +59,22 @@ cssPrefix: pf-c-spinner
59
59
 
60
60
  ```
61
61
 
62
+ ### Inline
63
+
64
+ An inline spinner inherits its font-size, so its size will match the content around it.
65
+
66
+ ```html isBeta
67
+ <svg
68
+ class="pf-c-spinner pf-m-inline"
69
+ role="progressbar"
70
+ viewBox="0 0 100 100"
71
+ aria-label="Loading..."
72
+ >
73
+ <circle class="pf-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
74
+ </svg>
75
+
76
+ ```
77
+
62
78
  ### Custom size
63
79
 
64
80
  ```html
@@ -148,9 +164,10 @@ Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility
148
164
 
149
165
  ### Modifiers
150
166
 
151
- | Class | Applied to | Outcome |
152
- | ---------- | --------------- | ------------------------------- |
153
- | `.pf-m-sm` | `.pf-c-spinner` | Creates a small spinner. |
154
- | `.pf-m-md` | `.pf-c-spinner` | Creates a medium spinner. |
155
- | `.pf-m-lg` | `.pf-c-spinner` | Creates a large spinner. |
156
- | `.pf-m-xl` | `.pf-c-spinner` | Creates an extra-large spinner. |
167
+ | Class | Applied to | Outcome |
168
+ | -------------- | --------------- | ------------------------------- |
169
+ | `.pf-m-sm` | `.pf-c-spinner` | Creates a small spinner. |
170
+ | `.pf-m-md` | `.pf-c-spinner` | Creates a medium spinner. |
171
+ | `.pf-m-lg` | `.pf-c-spinner` | Creates a large spinner. |
172
+ | `.pf-m-xl` | `.pf-c-spinner` | Creates an extra-large spinner. |
173
+ | `.pf-m-inline` | `.pf-c-spinner` | Creates an inline spinner. |
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -532,8 +532,8 @@ cssPrefix: pf-c-text-input-group
532
532
  class="pf-c-text-input-group__text-input"
533
533
  type="text"
534
534
  value
535
- aria-label="Type to filter"
536
535
  placeholder="Find by name"
536
+ aria-label="Type to filter"
537
537
  />
538
538
  </span>
539
539
  </div>
@@ -554,6 +554,7 @@ cssPrefix: pf-c-text-input-group
554
554
  class="pf-c-text-input-group__text-input"
555
555
  type="text"
556
556
  value="Joh"
557
+ placeholder="Find by name"
557
558
  aria-label="Type to filter"
558
559
  />
559
560
  </span>
@@ -584,6 +585,7 @@ cssPrefix: pf-c-text-input-group
584
585
  class="pf-c-text-input-group__text-input"
585
586
  type="text"
586
587
  value="John Doe"
588
+ placeholder="Find by name"
587
589
  aria-label="Type to filter"
588
590
  />
589
591
  </span>
@@ -615,25 +617,13 @@ cssPrefix: pf-c-text-input-group
615
617
  class="pf-c-text-input-group__text-input"
616
618
  type="text"
617
619
  value="John Doe"
620
+ placeholder="Find by name"
618
621
  aria-label="Type to filter"
619
622
  />
620
623
  </span>
621
624
  </div>
622
625
  <div class="pf-c-text-input-group__utilities">
623
626
  <span class="pf-c-badge pf-m-read">1 / 3</span>
624
- <div class="pf-c-text-input-group__group">
625
- <button
626
- class="pf-c-button pf-m-plain"
627
- type="button"
628
- disabled
629
- aria-label="Next"
630
- >
631
- <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
632
- </button>
633
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Next">
634
- <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
635
- </button>
636
- </div>
637
627
  <button
638
628
  class="pf-c-button pf-m-plain"
639
629
  type="button"
@@ -671,8 +661,8 @@ cssPrefix: pf-c-text-input-group
671
661
  class="pf-c-text-input-group__text-input"
672
662
  type="text"
673
663
  value
674
- aria-label="Type to filter"
675
664
  placeholder="Search"
665
+ aria-label="Type to filter"
676
666
  />
677
667
  </span>
678
668
  </div>
@@ -959,12 +949,6 @@ cssPrefix: pf-c-text-input-group
959
949
  disabled
960
950
  aria-hidden="true"
961
951
  />
962
- <input
963
- class="pf-c-text-input-group__text-input"
964
- type="text"
965
- value="apples"
966
- aria-label="Type to filter"
967
- />
968
952
  </span>
969
953
  </div>
970
954
  <div class="pf-c-text-input-group__utilities">
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -520,17 +520,18 @@ In some instances, it may be necessary to adjust spacing explicitly where items
520
520
  </li>
521
521
  </ul>
522
522
  </div>
523
- <div class="pf-c-search-input">
524
- <div class="pf-c-search-input__bar">
525
- <span class="pf-c-search-input__text">
526
- <span class="pf-c-search-input__icon">
527
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
523
+ <div class="pf-c-text-input-group">
524
+ <div class="pf-c-text-input-group__main pf-m-icon">
525
+ <span class="pf-c-text-input-group__text">
526
+ <span class="pf-c-text-input-group__icon">
527
+ <i class="fas fa-fw fa-search"></i>
528
528
  </span>
529
529
  <input
530
- class="pf-c-search-input__text-input"
530
+ class="pf-c-text-input-group__text-input"
531
531
  type="text"
532
+ value
532
533
  placeholder="Filter by name"
533
- aria-label="Filter by name"
534
+ aria-label="Type to filter"
534
535
  />
535
536
  </span>
536
537
  </div>
@@ -840,17 +841,18 @@ In some instances, it may be necessary to adjust spacing explicitly where items
840
841
  </li>
841
842
  </ul>
842
843
  </div>
843
- <div class="pf-c-search-input">
844
- <div class="pf-c-search-input__bar">
845
- <span class="pf-c-search-input__text">
846
- <span class="pf-c-search-input__icon">
847
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
844
+ <div class="pf-c-text-input-group">
845
+ <div class="pf-c-text-input-group__main pf-m-icon">
846
+ <span class="pf-c-text-input-group__text">
847
+ <span class="pf-c-text-input-group__icon">
848
+ <i class="fas fa-fw fa-search"></i>
848
849
  </span>
849
850
  <input
850
- class="pf-c-search-input__text-input"
851
+ class="pf-c-text-input-group__text-input"
851
852
  type="text"
853
+ value
852
854
  placeholder="Filter by name"
853
- aria-label="Filter by name"
855
+ aria-label="Type to filter"
854
856
  />
855
857
  </span>
856
858
  </div>
@@ -1221,17 +1223,18 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1221
1223
  </li>
1222
1224
  </ul>
1223
1225
  </div>
1224
- <div class="pf-c-search-input">
1225
- <div class="pf-c-search-input__bar">
1226
- <span class="pf-c-search-input__text">
1227
- <span class="pf-c-search-input__icon">
1228
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1226
+ <div class="pf-c-text-input-group">
1227
+ <div class="pf-c-text-input-group__main pf-m-icon">
1228
+ <span class="pf-c-text-input-group__text">
1229
+ <span class="pf-c-text-input-group__icon">
1230
+ <i class="fas fa-fw fa-search"></i>
1229
1231
  </span>
1230
1232
  <input
1231
- class="pf-c-search-input__text-input"
1233
+ class="pf-c-text-input-group__text-input"
1232
1234
  type="text"
1235
+ value
1233
1236
  placeholder="Filter by name"
1234
- aria-label="Filter by name"
1237
+ aria-label="Type to filter"
1235
1238
  />
1236
1239
  </span>
1237
1240
  </div>
@@ -1802,17 +1805,18 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
1802
1805
  </li>
1803
1806
  </ul>
1804
1807
  </div>
1805
- <div class="pf-c-search-input">
1806
- <div class="pf-c-search-input__bar">
1807
- <span class="pf-c-search-input__text">
1808
- <span class="pf-c-search-input__icon">
1809
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
1808
+ <div class="pf-c-text-input-group">
1809
+ <div class="pf-c-text-input-group__main pf-m-icon">
1810
+ <span class="pf-c-text-input-group__text">
1811
+ <span class="pf-c-text-input-group__icon">
1812
+ <i class="fas fa-fw fa-search"></i>
1810
1813
  </span>
1811
1814
  <input
1812
- class="pf-c-search-input__text-input"
1815
+ class="pf-c-text-input-group__text-input"
1813
1816
  type="text"
1817
+ value
1814
1818
  placeholder="Filter by name"
1815
- aria-label="Filter by name"
1819
+ aria-label="Type to filter"
1816
1820
  />
1817
1821
  </span>
1818
1822
  </div>
@@ -3869,17 +3873,18 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
3869
3873
  </li>
3870
3874
  </ul>
3871
3875
  </div>
3872
- <div class="pf-c-search-input">
3873
- <div class="pf-c-search-input__bar">
3874
- <span class="pf-c-search-input__text">
3875
- <span class="pf-c-search-input__icon">
3876
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3876
+ <div class="pf-c-text-input-group">
3877
+ <div class="pf-c-text-input-group__main pf-m-icon">
3878
+ <span class="pf-c-text-input-group__text">
3879
+ <span class="pf-c-text-input-group__icon">
3880
+ <i class="fas fa-fw fa-search"></i>
3877
3881
  </span>
3878
3882
  <input
3879
- class="pf-c-search-input__text-input"
3883
+ class="pf-c-text-input-group__text-input"
3880
3884
  type="text"
3885
+ value
3881
3886
  placeholder="Filter by name"
3882
- aria-label="Filter by name"
3887
+ aria-label="Type to filter"
3883
3888
  />
3884
3889
  </span>
3885
3890
  </div>
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -4029,17 +4029,18 @@ wrapperTag: div
4029
4029
  </li>
4030
4030
  </ul>
4031
4031
  </div>
4032
- <div class="pf-c-search-input">
4033
- <div class="pf-c-search-input__bar">
4034
- <span class="pf-c-search-input__text">
4035
- <span class="pf-c-search-input__icon">
4036
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
4032
+ <div class="pf-c-text-input-group">
4033
+ <div class="pf-c-text-input-group__main pf-m-icon">
4034
+ <span class="pf-c-text-input-group__text">
4035
+ <span class="pf-c-text-input-group__icon">
4036
+ <i class="fas fa-fw fa-search"></i>
4037
4037
  </span>
4038
4038
  <input
4039
- class="pf-c-search-input__text-input"
4039
+ class="pf-c-text-input-group__text-input"
4040
4040
  type="text"
4041
+ value
4041
4042
  placeholder="Filter by name"
4042
- aria-label="Filter by name"
4043
+ aria-label="Type to filter"
4043
4044
  />
4044
4045
  </span>
4045
4046
  </div>
@@ -6070,17 +6071,18 @@ wrapperTag: div
6070
6071
  </li>
6071
6072
  </ul>
6072
6073
  </div>
6073
- <div class="pf-c-search-input">
6074
- <div class="pf-c-search-input__bar">
6075
- <span class="pf-c-search-input__text">
6076
- <span class="pf-c-search-input__icon">
6077
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
6074
+ <div class="pf-c-text-input-group">
6075
+ <div class="pf-c-text-input-group__main pf-m-icon">
6076
+ <span class="pf-c-text-input-group__text">
6077
+ <span class="pf-c-text-input-group__icon">
6078
+ <i class="fas fa-fw fa-search"></i>
6078
6079
  </span>
6079
6080
  <input
6080
- class="pf-c-search-input__text-input"
6081
+ class="pf-c-text-input-group__text-input"
6081
6082
  type="text"
6083
+ value
6082
6084
  placeholder="Filter by name"
6083
- aria-label="Filter by name"
6085
+ aria-label="Type to filter"
6084
6086
  />
6085
6087
  </span>
6086
6088
  </div>