@patternfly/patternfly 4.179.3 → 4.181.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 (45) hide show
  1. package/assets/images/status-icon-sprite.svg +38 -0
  2. package/components/Dropdown/dropdown.css +4 -2
  3. package/components/Dropdown/dropdown.scss +4 -2
  4. package/components/FormControl/form-control.css +26 -0
  5. package/components/FormControl/form-control.scss +33 -1
  6. package/components/Menu/menu.css +10 -0
  7. package/components/Menu/menu.scss +14 -0
  8. package/components/MenuToggle/menu-toggle.css +10 -7
  9. package/components/MenuToggle/menu-toggle.scss +11 -9
  10. package/components/SearchInput/search-input.css +1 -0
  11. package/components/SearchInput/search-input.scss +1 -0
  12. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  13. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  14. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  15. package/docs/components/FormControl/examples/FormControl.md +151 -11
  16. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  17. package/docs/components/Menu/examples/Menu.md +127 -30
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  19. package/docs/components/Page/examples/Page.md +11 -2
  20. package/docs/components/Select/examples/Select.md +30 -14
  21. package/docs/components/Table/examples/Table.md +8 -0
  22. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  23. package/docs/components/TreeView/examples/TreeView.md +15 -7
  24. package/docs/components/Wizard/examples/Wizard.md +6 -6
  25. package/docs/demos/Alert/examples/Alert.md +20 -40
  26. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  27. package/docs/demos/ContextSelector/examples/ContextSelector.md +247 -276
  28. package/docs/demos/DataList/examples/DataList.md +159 -114
  29. package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
  30. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  31. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  32. package/docs/demos/Masthead/examples/Masthead.md +426 -449
  33. package/docs/demos/Nav/examples/Nav.md +203 -343
  34. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  35. package/docs/demos/Page/examples/Page.md +834 -1235
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  37. package/docs/demos/Table/examples/Table.md +1189 -652
  38. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  39. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  40. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  41. package/package.json +1 -1
  42. package/patternfly-no-reset.css +51 -9
  43. package/patternfly.css +51 -9
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -271,55 +271,35 @@ section: components
271
271
  <section class="pf-c-page__main-section pf-m-limit-width">
272
272
  <div class="pf-c-page__main-body">
273
273
  <div class="pf-l-gallery pf-m-gutter">
274
- <div class="pf-l-gallery__item">
275
- <div class="pf-c-card">
276
- <div class="pf-c-card__body">This is a card</div>
277
- </div>
274
+ <div class="pf-c-card">
275
+ <div class="pf-c-card__body">This is a card</div>
278
276
  </div>
279
- <div class="pf-l-gallery__item">
280
- <div class="pf-c-card">
281
- <div class="pf-c-card__body">This is a card</div>
282
- </div>
277
+ <div class="pf-c-card">
278
+ <div class="pf-c-card__body">This is a card</div>
283
279
  </div>
284
- <div class="pf-l-gallery__item">
285
- <div class="pf-c-card">
286
- <div class="pf-c-card__body">This is a card</div>
287
- </div>
280
+ <div class="pf-c-card">
281
+ <div class="pf-c-card__body">This is a card</div>
288
282
  </div>
289
- <div class="pf-l-gallery__item">
290
- <div class="pf-c-card">
291
- <div class="pf-c-card__body">This is a card</div>
292
- </div>
283
+ <div class="pf-c-card">
284
+ <div class="pf-c-card__body">This is a card</div>
293
285
  </div>
294
- <div class="pf-l-gallery__item">
295
- <div class="pf-c-card">
296
- <div class="pf-c-card__body">This is a card</div>
297
- </div>
286
+ <div class="pf-c-card">
287
+ <div class="pf-c-card__body">This is a card</div>
298
288
  </div>
299
- <div class="pf-l-gallery__item">
300
- <div class="pf-c-card">
301
- <div class="pf-c-card__body">This is a card</div>
302
- </div>
289
+ <div class="pf-c-card">
290
+ <div class="pf-c-card__body">This is a card</div>
303
291
  </div>
304
- <div class="pf-l-gallery__item">
305
- <div class="pf-c-card">
306
- <div class="pf-c-card__body">This is a card</div>
307
- </div>
292
+ <div class="pf-c-card">
293
+ <div class="pf-c-card__body">This is a card</div>
308
294
  </div>
309
- <div class="pf-l-gallery__item">
310
- <div class="pf-c-card">
311
- <div class="pf-c-card__body">This is a card</div>
312
- </div>
295
+ <div class="pf-c-card">
296
+ <div class="pf-c-card__body">This is a card</div>
313
297
  </div>
314
- <div class="pf-l-gallery__item">
315
- <div class="pf-c-card">
316
- <div class="pf-c-card__body">This is a card</div>
317
- </div>
298
+ <div class="pf-c-card">
299
+ <div class="pf-c-card__body">This is a card</div>
318
300
  </div>
319
- <div class="pf-l-gallery__item">
320
- <div class="pf-c-card">
321
- <div class="pf-c-card__body">This is a card</div>
322
- </div>
301
+ <div class="pf-c-card">
302
+ <div class="pf-c-card__body">This is a card</div>
323
303
  </div>
324
304
  </div>
325
305
  </div>
@@ -1191,55 +1171,35 @@ section: components
1191
1171
  <section class="pf-c-page__main-section pf-m-limit-width">
1192
1172
  <div class="pf-c-page__main-body">
1193
1173
  <div class="pf-l-gallery pf-m-gutter">
1194
- <div class="pf-l-gallery__item">
1195
- <div class="pf-c-card">
1196
- <div class="pf-c-card__body">This is a card</div>
1197
- </div>
1174
+ <div class="pf-c-card">
1175
+ <div class="pf-c-card__body">This is a card</div>
1198
1176
  </div>
1199
- <div class="pf-l-gallery__item">
1200
- <div class="pf-c-card">
1201
- <div class="pf-c-card__body">This is a card</div>
1202
- </div>
1177
+ <div class="pf-c-card">
1178
+ <div class="pf-c-card__body">This is a card</div>
1203
1179
  </div>
1204
- <div class="pf-l-gallery__item">
1205
- <div class="pf-c-card">
1206
- <div class="pf-c-card__body">This is a card</div>
1207
- </div>
1180
+ <div class="pf-c-card">
1181
+ <div class="pf-c-card__body">This is a card</div>
1208
1182
  </div>
1209
- <div class="pf-l-gallery__item">
1210
- <div class="pf-c-card">
1211
- <div class="pf-c-card__body">This is a card</div>
1212
- </div>
1183
+ <div class="pf-c-card">
1184
+ <div class="pf-c-card__body">This is a card</div>
1213
1185
  </div>
1214
- <div class="pf-l-gallery__item">
1215
- <div class="pf-c-card">
1216
- <div class="pf-c-card__body">This is a card</div>
1217
- </div>
1186
+ <div class="pf-c-card">
1187
+ <div class="pf-c-card__body">This is a card</div>
1218
1188
  </div>
1219
- <div class="pf-l-gallery__item">
1220
- <div class="pf-c-card">
1221
- <div class="pf-c-card__body">This is a card</div>
1222
- </div>
1189
+ <div class="pf-c-card">
1190
+ <div class="pf-c-card__body">This is a card</div>
1223
1191
  </div>
1224
- <div class="pf-l-gallery__item">
1225
- <div class="pf-c-card">
1226
- <div class="pf-c-card__body">This is a card</div>
1227
- </div>
1192
+ <div class="pf-c-card">
1193
+ <div class="pf-c-card__body">This is a card</div>
1228
1194
  </div>
1229
- <div class="pf-l-gallery__item">
1230
- <div class="pf-c-card">
1231
- <div class="pf-c-card__body">This is a card</div>
1232
- </div>
1195
+ <div class="pf-c-card">
1196
+ <div class="pf-c-card__body">This is a card</div>
1233
1197
  </div>
1234
- <div class="pf-l-gallery__item">
1235
- <div class="pf-c-card">
1236
- <div class="pf-c-card__body">This is a card</div>
1237
- </div>
1198
+ <div class="pf-c-card">
1199
+ <div class="pf-c-card__body">This is a card</div>
1238
1200
  </div>
1239
- <div class="pf-l-gallery__item">
1240
- <div class="pf-c-card">
1241
- <div class="pf-c-card__body">This is a card</div>
1242
- </div>
1201
+ <div class="pf-c-card">
1202
+ <div class="pf-c-card__body">This is a card</div>
1243
1203
  </div>
1244
1204
  </div>
1245
1205
  </div>
@@ -2108,55 +2068,35 @@ section: components
2108
2068
  <section class="pf-c-page__main-section pf-m-limit-width">
2109
2069
  <div class="pf-c-page__main-body">
2110
2070
  <div class="pf-l-gallery pf-m-gutter">
2111
- <div class="pf-l-gallery__item">
2112
- <div class="pf-c-card">
2113
- <div class="pf-c-card__body">This is a card</div>
2114
- </div>
2071
+ <div class="pf-c-card">
2072
+ <div class="pf-c-card__body">This is a card</div>
2115
2073
  </div>
2116
- <div class="pf-l-gallery__item">
2117
- <div class="pf-c-card">
2118
- <div class="pf-c-card__body">This is a card</div>
2119
- </div>
2074
+ <div class="pf-c-card">
2075
+ <div class="pf-c-card__body">This is a card</div>
2120
2076
  </div>
2121
- <div class="pf-l-gallery__item">
2122
- <div class="pf-c-card">
2123
- <div class="pf-c-card__body">This is a card</div>
2124
- </div>
2077
+ <div class="pf-c-card">
2078
+ <div class="pf-c-card__body">This is a card</div>
2125
2079
  </div>
2126
- <div class="pf-l-gallery__item">
2127
- <div class="pf-c-card">
2128
- <div class="pf-c-card__body">This is a card</div>
2129
- </div>
2080
+ <div class="pf-c-card">
2081
+ <div class="pf-c-card__body">This is a card</div>
2130
2082
  </div>
2131
- <div class="pf-l-gallery__item">
2132
- <div class="pf-c-card">
2133
- <div class="pf-c-card__body">This is a card</div>
2134
- </div>
2083
+ <div class="pf-c-card">
2084
+ <div class="pf-c-card__body">This is a card</div>
2135
2085
  </div>
2136
- <div class="pf-l-gallery__item">
2137
- <div class="pf-c-card">
2138
- <div class="pf-c-card__body">This is a card</div>
2139
- </div>
2086
+ <div class="pf-c-card">
2087
+ <div class="pf-c-card__body">This is a card</div>
2140
2088
  </div>
2141
- <div class="pf-l-gallery__item">
2142
- <div class="pf-c-card">
2143
- <div class="pf-c-card__body">This is a card</div>
2144
- </div>
2089
+ <div class="pf-c-card">
2090
+ <div class="pf-c-card__body">This is a card</div>
2145
2091
  </div>
2146
- <div class="pf-l-gallery__item">
2147
- <div class="pf-c-card">
2148
- <div class="pf-c-card__body">This is a card</div>
2149
- </div>
2092
+ <div class="pf-c-card">
2093
+ <div class="pf-c-card__body">This is a card</div>
2150
2094
  </div>
2151
- <div class="pf-l-gallery__item">
2152
- <div class="pf-c-card">
2153
- <div class="pf-c-card__body">This is a card</div>
2154
- </div>
2095
+ <div class="pf-c-card">
2096
+ <div class="pf-c-card__body">This is a card</div>
2155
2097
  </div>
2156
- <div class="pf-l-gallery__item">
2157
- <div class="pf-c-card">
2158
- <div class="pf-c-card__body">This is a card</div>
2159
- </div>
2098
+ <div class="pf-c-card">
2099
+ <div class="pf-c-card__body">This is a card</div>
2160
2100
  </div>
2161
2101
  </div>
2162
2102
  </div>
@@ -3028,55 +2968,35 @@ section: components
3028
2968
  <section class="pf-c-page__main-section pf-m-limit-width">
3029
2969
  <div class="pf-c-page__main-body">
3030
2970
  <div class="pf-l-gallery pf-m-gutter">
3031
- <div class="pf-l-gallery__item">
3032
- <div class="pf-c-card">
3033
- <div class="pf-c-card__body">This is a card</div>
3034
- </div>
2971
+ <div class="pf-c-card">
2972
+ <div class="pf-c-card__body">This is a card</div>
3035
2973
  </div>
3036
- <div class="pf-l-gallery__item">
3037
- <div class="pf-c-card">
3038
- <div class="pf-c-card__body">This is a card</div>
3039
- </div>
2974
+ <div class="pf-c-card">
2975
+ <div class="pf-c-card__body">This is a card</div>
3040
2976
  </div>
3041
- <div class="pf-l-gallery__item">
3042
- <div class="pf-c-card">
3043
- <div class="pf-c-card__body">This is a card</div>
3044
- </div>
2977
+ <div class="pf-c-card">
2978
+ <div class="pf-c-card__body">This is a card</div>
3045
2979
  </div>
3046
- <div class="pf-l-gallery__item">
3047
- <div class="pf-c-card">
3048
- <div class="pf-c-card__body">This is a card</div>
3049
- </div>
2980
+ <div class="pf-c-card">
2981
+ <div class="pf-c-card__body">This is a card</div>
3050
2982
  </div>
3051
- <div class="pf-l-gallery__item">
3052
- <div class="pf-c-card">
3053
- <div class="pf-c-card__body">This is a card</div>
3054
- </div>
2983
+ <div class="pf-c-card">
2984
+ <div class="pf-c-card__body">This is a card</div>
3055
2985
  </div>
3056
- <div class="pf-l-gallery__item">
3057
- <div class="pf-c-card">
3058
- <div class="pf-c-card__body">This is a card</div>
3059
- </div>
2986
+ <div class="pf-c-card">
2987
+ <div class="pf-c-card__body">This is a card</div>
3060
2988
  </div>
3061
- <div class="pf-l-gallery__item">
3062
- <div class="pf-c-card">
3063
- <div class="pf-c-card__body">This is a card</div>
3064
- </div>
2989
+ <div class="pf-c-card">
2990
+ <div class="pf-c-card__body">This is a card</div>
3065
2991
  </div>
3066
- <div class="pf-l-gallery__item">
3067
- <div class="pf-c-card">
3068
- <div class="pf-c-card__body">This is a card</div>
3069
- </div>
2992
+ <div class="pf-c-card">
2993
+ <div class="pf-c-card__body">This is a card</div>
3070
2994
  </div>
3071
- <div class="pf-l-gallery__item">
3072
- <div class="pf-c-card">
3073
- <div class="pf-c-card__body">This is a card</div>
3074
- </div>
2995
+ <div class="pf-c-card">
2996
+ <div class="pf-c-card__body">This is a card</div>
3075
2997
  </div>
3076
- <div class="pf-l-gallery__item">
3077
- <div class="pf-c-card">
3078
- <div class="pf-c-card__body">This is a card</div>
3079
- </div>
2998
+ <div class="pf-c-card">
2999
+ <div class="pf-c-card__body">This is a card</div>
3080
3000
  </div>
3081
3001
  </div>
3082
3002
  </div>
@@ -3947,55 +3867,35 @@ section: components
3947
3867
  <section class="pf-c-page__main-section pf-m-limit-width">
3948
3868
  <div class="pf-c-page__main-body">
3949
3869
  <div class="pf-l-gallery pf-m-gutter">
3950
- <div class="pf-l-gallery__item">
3951
- <div class="pf-c-card">
3952
- <div class="pf-c-card__body">This is a card</div>
3953
- </div>
3870
+ <div class="pf-c-card">
3871
+ <div class="pf-c-card__body">This is a card</div>
3954
3872
  </div>
3955
- <div class="pf-l-gallery__item">
3956
- <div class="pf-c-card">
3957
- <div class="pf-c-card__body">This is a card</div>
3958
- </div>
3873
+ <div class="pf-c-card">
3874
+ <div class="pf-c-card__body">This is a card</div>
3959
3875
  </div>
3960
- <div class="pf-l-gallery__item">
3961
- <div class="pf-c-card">
3962
- <div class="pf-c-card__body">This is a card</div>
3963
- </div>
3876
+ <div class="pf-c-card">
3877
+ <div class="pf-c-card__body">This is a card</div>
3964
3878
  </div>
3965
- <div class="pf-l-gallery__item">
3966
- <div class="pf-c-card">
3967
- <div class="pf-c-card__body">This is a card</div>
3968
- </div>
3879
+ <div class="pf-c-card">
3880
+ <div class="pf-c-card__body">This is a card</div>
3969
3881
  </div>
3970
- <div class="pf-l-gallery__item">
3971
- <div class="pf-c-card">
3972
- <div class="pf-c-card__body">This is a card</div>
3973
- </div>
3882
+ <div class="pf-c-card">
3883
+ <div class="pf-c-card__body">This is a card</div>
3974
3884
  </div>
3975
- <div class="pf-l-gallery__item">
3976
- <div class="pf-c-card">
3977
- <div class="pf-c-card__body">This is a card</div>
3978
- </div>
3885
+ <div class="pf-c-card">
3886
+ <div class="pf-c-card__body">This is a card</div>
3979
3887
  </div>
3980
- <div class="pf-l-gallery__item">
3981
- <div class="pf-c-card">
3982
- <div class="pf-c-card__body">This is a card</div>
3983
- </div>
3888
+ <div class="pf-c-card">
3889
+ <div class="pf-c-card__body">This is a card</div>
3984
3890
  </div>
3985
- <div class="pf-l-gallery__item">
3986
- <div class="pf-c-card">
3987
- <div class="pf-c-card__body">This is a card</div>
3988
- </div>
3891
+ <div class="pf-c-card">
3892
+ <div class="pf-c-card__body">This is a card</div>
3989
3893
  </div>
3990
- <div class="pf-l-gallery__item">
3991
- <div class="pf-c-card">
3992
- <div class="pf-c-card__body">This is a card</div>
3993
- </div>
3894
+ <div class="pf-c-card">
3895
+ <div class="pf-c-card__body">This is a card</div>
3994
3896
  </div>
3995
- <div class="pf-l-gallery__item">
3996
- <div class="pf-c-card">
3997
- <div class="pf-c-card__body">This is a card</div>
3998
- </div>
3897
+ <div class="pf-c-card">
3898
+ <div class="pf-c-card__body">This is a card</div>
3999
3899
  </div>
4000
3900
  </div>
4001
3901
  </div>