@patternfly/patternfly 5.0.0-alpha.6 → 5.0.0-alpha.8

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/base/_common.scss +0 -22
  2. package/base/patternfly-common.css +0 -10
  3. package/components/Card/card.css +9 -12
  4. package/components/Card/card.scss +11 -17
  5. package/components/ChipGroup/chip-group.css +29 -17
  6. package/components/ChipGroup/chip-group.scss +39 -22
  7. package/components/EmptyState/empty-state.css +46 -52
  8. package/components/EmptyState/empty-state.scss +58 -57
  9. package/docs/components/Card/examples/Card.md +61 -44
  10. package/docs/components/CodeEditor/examples/CodeEditor.md +2 -6
  11. package/docs/components/EmptyState/examples/EmptyState.md +127 -79
  12. package/docs/components/Wizard/examples/Wizard.md +4 -7
  13. package/docs/demos/Card/examples/Card.md +141 -106
  14. package/docs/demos/CardView/examples/CardView.md +1 -3
  15. package/docs/demos/Table/examples/Table.md +7 -10
  16. package/package.json +1 -1
  17. package/patternfly-base-no-reset.css +0 -10
  18. package/patternfly-base.css +0 -10
  19. package/patternfly-no-reset.css +84 -91
  20. package/patternfly.css +84 -91
  21. package/patternfly.min.css +1 -1
  22. package/patternfly.min.css.map +1 -1
  23. package/sass-utilities/scss-variables.scss +0 -1
package/docs/demos/Card/examples/Card.md CHANGED
@@ -68,57 +68,59 @@ wrapperTag: div
68
68
  </ul>
69
69
  </div>
70
70
  </div>
71
- <div class="pf-l-level pf-m-gutter">
72
- <div
73
- class="pf-c-card__title"
74
- id="card-demo-horizontal-grid-collapsed-example-title"
75
- >Getting started</div>
76
- <div class="pf-c-label-group">
77
- <div class="pf-c-label-group__main">
78
- <ul
79
- class="pf-c-label-group__list"
80
- role="list"
81
- aria-label="Group of labels"
82
- >
83
- <li class="pf-c-label-group__list-item">
84
- <span class="pf-c-label pf-m-blue pf-m-compact">
85
- <span class="pf-c-label__content">
86
- <span class="pf-c-label__icon">
87
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
71
+ <div class="pf-c-card__header-main">
72
+ <div class="pf-l-split pf-m-gutter pf-m-wrap">
73
+ <div
74
+ class="pf-c-card__title"
75
+ id="card-demo-horizontal-grid-collapsed-example-title"
76
+ >Getting started</div>
77
+ <div class="pf-c-label-group">
78
+ <div class="pf-c-label-group__main">
79
+ <ul
80
+ class="pf-c-label-group__list"
81
+ role="list"
82
+ aria-label="Group of labels"
83
+ >
84
+ <li class="pf-c-label-group__list-item">
85
+ <span class="pf-c-label pf-m-blue pf-m-compact">
86
+ <span class="pf-c-label__content">
87
+ <span class="pf-c-label__icon">
88
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
89
+ </span>
90
+ Set up your cluster
88
91
  </span>
89
- Set up your cluster
90
92
  </span>
91
- </span>
92
- </li>
93
- <li class="pf-c-label-group__list-item">
94
- <span class="pf-c-label pf-m-purple pf-m-compact">
95
- <span class="pf-c-label__content">
96
- <span class="pf-c-label__icon">
97
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
93
+ </li>
94
+ <li class="pf-c-label-group__list-item">
95
+ <span class="pf-c-label pf-m-purple pf-m-compact">
96
+ <span class="pf-c-label__content">
97
+ <span class="pf-c-label__icon">
98
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
99
+ </span>
100
+ Guided tours
98
101
  </span>
99
- Guided tours
100
102
  </span>
101
- </span>
102
- </li>
103
- <li class="pf-c-label-group__list-item">
104
- <span class="pf-c-label pf-m-green pf-m-compact">
105
- <span class="pf-c-label__content">
106
- <span class="pf-c-label__icon">
107
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
103
+ </li>
104
+ <li class="pf-c-label-group__list-item">
105
+ <span class="pf-c-label pf-m-green pf-m-compact">
106
+ <span class="pf-c-label__content">
107
+ <span class="pf-c-label__icon">
108
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
109
+ </span>
110
+ Quick starts
108
111
  </span>
109
- Quick starts
110
112
  </span>
111
- </span>
112
- </li>
113
- <li class="pf-c-label-group__list-item">
114
- <button
115
- class="pf-c-label pf-m-overflow pf-m-compact"
116
- type="button"
117
- >
118
- <span class="pf-c-label__content">1 more</span>
119
- </button>
120
- </li>
121
- </ul>
113
+ </li>
114
+ <li class="pf-c-label-group__list-item">
115
+ <button
116
+ class="pf-c-label pf-m-overflow pf-m-compact"
117
+ type="button"
118
+ >
119
+ <span class="pf-c-label__content">1 more</span>
120
+ </button>
121
+ </li>
122
+ </ul>
123
+ </div>
122
124
  </div>
123
125
  </div>
124
126
  </div>
@@ -192,10 +194,12 @@ wrapperTag: div
192
194
  </ul>
193
195
  </div>
194
196
  </div>
195
- <div
196
- class="pf-c-card__title"
197
- id="card-demo-horizontal-grid-expanded-example-title"
198
- >Getting started</div>
197
+ <div class="pf-c-card__header-main">
198
+ <div
199
+ class="pf-c-card__title"
200
+ id="card-demo-horizontal-grid-expanded-example-title"
201
+ >Getting started</div>
202
+ </div>
199
203
  </div>
200
204
  <div class="pf-c-card__expandable-content">
201
205
  <div class="pf-c-card__body">
@@ -713,7 +717,9 @@ wrapperTag: div
713
717
  ```html
714
718
  <div class="pf-c-card">
715
719
  <div class="pf-c-card__header">
716
- <h2 class="pf-c-title pf-m-lg">Status</h2>
720
+ <div class="pf-c-card__header-main">
721
+ <h2 class="pf-c-title pf-m-lg">Status</h2>
722
+ </div>
717
723
  </div>
718
724
  <div class="pf-c-card__body">
719
725
  <div class="pf-c-tabs pf-m-fill" id="status-tabs">
@@ -1819,12 +1825,14 @@ wrapperTag: div
1819
1825
  >
1820
1826
  <div class="pf-c-card" id="utilization-card-3-example">
1821
1827
  <div class="pf-c-card__header pf-u-align-items-flex-start">
1822
- <div
1823
- class="pf-c-card__title"
1824
- id="utilization-card-3-example-title1"
1825
- style="padding-top: 3px;"
1826
- >
1827
- <h2 class="pf-c-title pf-m-lg">Recommendations</h2>
1828
+ <div class="pf-c-card__header-main">
1829
+ <div
1830
+ class="pf-c-card__title"
1831
+ id="utilization-card-3-example-title1"
1832
+ style="padding-top: 3px;"
1833
+ >
1834
+ <h2 class="pf-c-title pf-m-lg">Recommendations</h2>
1835
+ </div>
1828
1836
  </div>
1829
1837
  <div class="pf-c-card__actions pf-m-no-offset">
1830
1838
  <div class="pf-c-select">
@@ -1938,8 +1946,13 @@ wrapperTag: div
1938
1946
  ```html
1939
1947
  <div class="pf-c-card" id="nested-cards-toggle-right-example">
1940
1948
  <div class="pf-c-card__header">
1941
- <div class="pf-c-card__title" id="nested-cards-toggle-right-example-title">
1942
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
1949
+ <div class="pf-c-card__header-main">
1950
+ <div
1951
+ class="pf-c-card__title"
1952
+ id="nested-cards-toggle-right-example-title"
1953
+ >
1954
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
1955
+ </div>
1943
1956
  </div>
1944
1957
  </div>
1945
1958
  <div
@@ -1960,11 +1973,13 @@ wrapperTag: div
1960
1973
  </span>
1961
1974
  </button>
1962
1975
  </div>
1963
- <div
1964
- class="pf-c-card__title"
1965
- id="nested-cards-toggle-right-example-group-1-title"
1966
- >
1967
- <span class="pf-u-font-weight-light">CPU 1</span>
1976
+ <div class="pf-c-card__header-main">
1977
+ <div
1978
+ class="pf-c-card__title"
1979
+ id="nested-cards-toggle-right-example-group-1-title"
1980
+ >
1981
+ <span class="pf-u-font-weight-light">CPU 1</span>
1982
+ </div>
1968
1983
  </div>
1969
1984
  </div>
1970
1985
  <div class="pf-c-card__expandable-content">
@@ -2069,11 +2084,13 @@ wrapperTag: div
2069
2084
  </span>
2070
2085
  </button>
2071
2086
  </div>
2072
- <div
2073
- class="pf-c-card__title"
2074
- id="nested-cards-toggle-right-example-group-2-title"
2075
- >
2076
- <span class="pf-u-font-weight-light">CPU 2</span>
2087
+ <div class="pf-c-card__header-main">
2088
+ <div
2089
+ class="pf-c-card__title"
2090
+ id="nested-cards-toggle-right-example-group-2-title"
2091
+ >
2092
+ <span class="pf-u-font-weight-light">CPU 2</span>
2093
+ </div>
2077
2094
  </div>
2078
2095
  </div>
2079
2096
  </div>
@@ -2095,11 +2112,13 @@ wrapperTag: div
2095
2112
  </span>
2096
2113
  </button>
2097
2114
  </div>
2098
- <div
2099
- class="pf-c-card__title"
2100
- id="nested-cards-toggle-right-example-group-3-title"
2101
- >
2102
- <span class="pf-u-font-weight-light">CPU 3</span>
2115
+ <div class="pf-c-card__header-main">
2116
+ <div
2117
+ class="pf-c-card__title"
2118
+ id="nested-cards-toggle-right-example-group-3-title"
2119
+ >
2120
+ <span class="pf-u-font-weight-light">CPU 3</span>
2121
+ </div>
2103
2122
  </div>
2104
2123
  </div>
2105
2124
  </div>
@@ -2112,8 +2131,10 @@ wrapperTag: div
2112
2131
  ```html
2113
2132
  <div class="pf-c-card" id="nested-cards-example">
2114
2133
  <div class="pf-c-card__header">
2115
- <div class="pf-c-card__title" id="nested-cards-example-title">
2116
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2134
+ <div class="pf-c-card__header-main">
2135
+ <div class="pf-c-card__title" id="nested-cards-example-title">
2136
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2137
+ </div>
2117
2138
  </div>
2118
2139
  </div>
2119
2140
  <div
@@ -2134,8 +2155,10 @@ wrapperTag: div
2134
2155
  </span>
2135
2156
  </button>
2136
2157
  </div>
2137
- <div class="pf-c-card__title" id="nested-cards-example-group-1-title">
2138
- <span class="pf-u-font-weight-light">CPU 1</span>
2158
+ <div class="pf-c-card__header-main">
2159
+ <div class="pf-c-card__title" id="nested-cards-example-group-1-title">
2160
+ <span class="pf-u-font-weight-light">CPU 1</span>
2161
+ </div>
2139
2162
  </div>
2140
2163
  </div>
2141
2164
  <div class="pf-c-card__expandable-content">
@@ -2237,8 +2260,10 @@ wrapperTag: div
2237
2260
  </span>
2238
2261
  </button>
2239
2262
  </div>
2240
- <div class="pf-c-card__title" id="nested-cards-example-group-2-title">
2241
- <span class="pf-u-font-weight-light">CPU 2</span>
2263
+ <div class="pf-c-card__header-main">
2264
+ <div class="pf-c-card__title" id="nested-cards-example-group-2-title">
2265
+ <span class="pf-u-font-weight-light">CPU 2</span>
2266
+ </div>
2242
2267
  </div>
2243
2268
  </div>
2244
2269
  </div>
@@ -2257,8 +2282,10 @@ wrapperTag: div
2257
2282
  </span>
2258
2283
  </button>
2259
2284
  </div>
2260
- <div class="pf-c-card__title" id="nested-cards-example-group-3-title">
2261
- <span class="pf-u-font-weight-light">CPU 3</span>
2285
+ <div class="pf-c-card__header-main">
2286
+ <div class="pf-c-card__title" id="nested-cards-example-group-3-title">
2287
+ <span class="pf-u-font-weight-light">CPU 3</span>
2288
+ </div>
2262
2289
  </div>
2263
2290
  </div>
2264
2291
  </div>
@@ -2271,8 +2298,10 @@ wrapperTag: div
2271
2298
  ```html
2272
2299
  <div class="pf-c-card" id="with-accordion-example">
2273
2300
  <div class="pf-c-card__header">
2274
- <div class="pf-c-card__title" id="with-accordion-example-title">
2275
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2301
+ <div class="pf-c-card__header-main">
2302
+ <div class="pf-c-card__title" id="with-accordion-example-title">
2303
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2304
+ </div>
2276
2305
  </div>
2277
2306
  </div>
2278
2307
  <div class="pf-c-card__body">
@@ -2585,7 +2614,7 @@ wrapperTag: div
2585
2614
  >
2586
2615
  <div class="pf-c-card" id="trend-card-1-example">
2587
2616
  <div class="pf-c-card__header">
2588
- <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2617
+ <div class="pf-c-card__header-main">
2589
2618
  <div class="pf-c-card__title" id="trend-card-1-example-title">
2590
2619
  <h1 class="pf-c-title pf-m-2xl">1,050,765 IOPS</h1>
2591
2620
  </div>
@@ -2670,18 +2699,20 @@ wrapperTag: div
2670
2699
  >
2671
2700
  <div class="pf-c-card" id="trend-card-2-example">
2672
2701
  <div class="pf-c-card__header">
2673
- <div class="pf-l-flex pf-m-align-items-center">
2674
- <div class="pf-l-flex__item pf-m-flex-none">
2675
- <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2676
- <div class="pf-c-card__title" id="trend-card-2-example-title">
2677
- <h1 class="pf-c-title pf-m-2xl">842 TB</h1>
2702
+ <div class="pf-c-card__header-main">
2703
+ <div class="pf-l-flex pf-m-align-items-center">
2704
+ <div class="pf-l-flex__item pf-m-flex-none">
2705
+ <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2706
+ <div class="pf-c-card__title" id="trend-card-2-example-title">
2707
+ <h1 class="pf-c-title pf-m-2xl">842 TB</h1>
2708
+ </div>
2709
+ <span class="pf-u-color-200">Storage capacity</span>
2678
2710
  </div>
2679
- <span class="pf-u-color-200">Storage capacity</span>
2680
2711
  </div>
2681
- </div>
2682
- <div class="pf-l-flex__item pf-m-flex-1">
2683
- <div class="ws-chart">
2684
- <img src="/assets/images/img_line-chart-1.png" alt="Line Chart" />
2712
+ <div class="pf-l-flex__item pf-m-flex-1">
2713
+ <div class="ws-chart">
2714
+ <img src="/assets/images/img_line-chart-1.png" alt="Line Chart" />
2715
+ </div>
2685
2716
  </div>
2686
2717
  </div>
2687
2718
  </div>
@@ -2769,12 +2800,14 @@ wrapperTag: div
2769
2800
  </ul>
2770
2801
  </div>
2771
2802
  </div>
2772
- <div
2773
- class="pf-c-card__title"
2774
- id="card-log-view-example-title1"
2775
- style="padding-top: 3px;"
2776
- >
2777
- <h2 class="pf-c-title pf-m-lg">Activity</h2>
2803
+ <div class="pf-c-card__header-main">
2804
+ <div
2805
+ class="pf-c-card__title"
2806
+ id="card-log-view-example-title1"
2807
+ style="padding-top: 3px;"
2808
+ >
2809
+ <h2 class="pf-c-title pf-m-lg">Activity</h2>
2810
+ </div>
2778
2811
  </div>
2779
2812
  </div>
2780
2813
  <div class="pf-c-card__body">
@@ -2914,12 +2947,14 @@ wrapperTag: div
2914
2947
  </ul>
2915
2948
  </div>
2916
2949
  </div>
2917
- <div
2918
- class="pf-c-card__title"
2919
- id="card-events-view-example-title1"
2920
- style="padding-top: 3px;"
2921
- >
2922
- <h2 class="pf-c-title pf-m-lg">Events</h2>
2950
+ <div class="pf-c-card__header-main">
2951
+ <div
2952
+ class="pf-c-card__title"
2953
+ id="card-events-view-example-title1"
2954
+ style="padding-top: 3px;"
2955
+ >
2956
+ <h2 class="pf-c-title pf-m-lg">Events</h2>
2957
+ </div>
2923
2958
  </div>
2924
2959
  </div>
2925
2960
  <div class="pf-c-card__body">
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -1263,9 +1263,7 @@ section: demos
1263
1263
  <div class="pf-c-empty-state__content">
1264
1264
  <i class="fas fa-plus-circle pf-c-empty-state__icon"></i>
1265
1265
  <h2 class="pf-c-title pf-m-md">Add a new card to your page</h2>
1266
- <div class="pf-c-empty-state__secondary">
1267
- <button class="pf-c-button pf-m-link" type="button">Add card</button>
1268
- </div>
1266
+ <button class="pf-c-button pf-m-link" type="button">Add card</button>
1269
1267
  </div>
1270
1268
  </div>
1271
1269
  </div>
package/docs/demos/Table/examples/Table.md CHANGED
@@ -14184,21 +14184,18 @@ wrapperTag: div
14184
14184
  <td role="cell" colspan="8">
14185
14185
  <div class="pf-c-empty-state pf-m-sm">
14186
14186
  <div class="pf-c-empty-state__content">
14187
- <i
14188
- class="fas fa- fa-search pf-c-empty-state__icon"
14189
- aria-hidden="true"
14190
- ></i>
14187
+ <div class="pf-c-empty-state__icon">
14188
+ <i class="fas fa- fa-search" aria-hidden="true"></i>
14189
+ </div>
14191
14190
 
14192
14191
  <h2 class="pf-c-title pf-m-lg">No results found</h2>
14193
14192
  <div
14194
14193
  class="pf-c-empty-state__body"
14195
14194
  >No results match the filter criteria. Remove all filters or clear all filters to show results.</div>
14196
- <div class="pf-c-empty-state__primary">
14197
- <button
14198
- class="pf-c-button pf-m-link"
14199
- type="button"
14200
- >Clear all filters</button>
14201
- </div>
14195
+ <button
14196
+ class="pf-c-button pf-m-link"
14197
+ type="button"
14198
+ >Clear all filters</button>
14202
14199
  </div>
14203
14200
  </div>
14204
14201
  </td>
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.0.0-alpha.6",
4
+ "version": "5.0.0-alpha.8",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-reset.css CHANGED
@@ -493,16 +493,6 @@
493
493
  font-weight: 300 700;
494
494
  font-display: fallback;
495
495
  }
496
- [class*=pf-c-], [class*=pf-c-]::before, [class*=pf-c-]::after {
497
- padding: 0;
498
- margin: 0;
499
- background-color: transparent;
500
- }
501
-
502
- html {
503
- font-size: var(--pf-global--root--FontSize, unset) !important;
504
- }
505
-
506
496
  .pf-screen-reader {
507
497
  position: fixed;
508
498
  top: 0;
package/patternfly-base.css CHANGED
@@ -493,16 +493,6 @@
493
493
  font-weight: 300 700;
494
494
  font-display: fallback;
495
495
  }
496
- [class*=pf-c-], [class*=pf-c-]::before, [class*=pf-c-]::after {
497
- padding: 0;
498
- margin: 0;
499
- background-color: transparent;
500
- }
501
-
502
- html {
503
- font-size: var(--pf-global--root--FontSize, unset) !important;
504
- }
505
-
506
496
  .pf-screen-reader {
507
497
  position: fixed;
508
498
  top: 0;