@patternfly/patternfly 4.166.2 → 4.167.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 (21) hide show
  1. package/components/DescriptionList/description-list.css +18 -0
  2. package/components/DescriptionList/description-list.scss +19 -0
  3. package/components/Truncate/truncate.css +14 -26
  4. package/components/Truncate/truncate.scss +13 -32
  5. package/docs/components/DescriptionList/examples/DescriptionList.md +73 -131
  6. package/docs/components/Table/examples/Table.md +25 -14
  7. package/docs/components/Toolbar/examples/Toolbar.md +0 -2
  8. package/docs/components/Truncate/examples/Truncate.css +9 -0
  9. package/docs/components/Truncate/examples/Truncate.md +16 -25
  10. package/docs/demos/Card/examples/Card.md +95 -139
  11. package/docs/demos/CardView/examples/CardView.md +0 -1
  12. package/docs/demos/DataList/examples/DataList.md +0 -2
  13. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -1
  14. package/docs/demos/Table/examples/Table.md +11 -23
  15. package/docs/demos/Tabs/examples/Tabs.md +25 -68
  16. package/docs/demos/Toolbar/examples/Toolbar.md +0 -1827
  17. package/package.json +1 -1
  18. package/patternfly-no-reset.css +32 -26
  19. package/patternfly.css +32 -26
  20. package/patternfly.min.css +1 -1
  21. package/patternfly.min.css.map +1 -1
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": "4.166.2",
4
+ "version": "4.167.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -9480,9 +9480,14 @@ label.pf-c-check, .pf-c-check__label,
9480
9480
  --pf-c-description-list__group--GridColumn: auto;
9481
9481
  --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
9482
9482
  --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
9483
+ --pf-c-description-list__term--Display: inline;
9484
+ --pf-c-description-list__term--sm--Display: flex;
9483
9485
  --pf-c-description-list__term--FontWeight: var(--pf-global--FontWeight--bold);
9484
9486
  --pf-c-description-list__term--FontSize: var(--pf-global--FontSize--sm);
9485
9487
  --pf-c-description-list__term--LineHeight: var(--pf-global--LineHeight--sm);
9488
+ --pf-c-description-list__term-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
9489
+ --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
9490
+ --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
9486
9491
  --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
9487
9492
  --pf-c-description-list--m-horizontal__term--width: 12ch;
9488
9493
  --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
@@ -9503,6 +9508,11 @@ label.pf-c-check, .pf-c-check__label,
9503
9508
  column-gap: var(--pf-c-description-list--ColumnGap);
9504
9509
  grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
9505
9510
  }
9511
+ @media screen and (min-width: 576px) {
9512
+ .pf-c-description-list {
9513
+ --pf-c-description-list__term--Display: var(--pf-c-description-list__term--sm--Display);
9514
+ }
9515
+ }
9506
9516
  .pf-c-description-list[class*=pf-m-horizontal] {
9507
9517
  --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
9508
9518
  }
@@ -9605,6 +9615,7 @@ label.pf-c-check, .pf-c-check__label,
9605
9615
  }
9606
9616
 
9607
9617
  .pf-c-description-list__term {
9618
+ display: var(--pf-c-description-list__term--Display);
9608
9619
  font-size: var(--pf-c-description-list__term--FontSize);
9609
9620
  font-weight: var(--pf-c-description-list__term--FontWeight);
9610
9621
  line-height: var(--pf-c-description-list__term--LineHeight);
@@ -9613,6 +9624,13 @@ label.pf-c-check, .pf-c-check__label,
9613
9624
  display: inline;
9614
9625
  }
9615
9626
 
9627
+ .pf-c-description-list__term-icon {
9628
+ flex-shrink: 0;
9629
+ min-width: var(--pf-c-description-list__term-icon--MinWidth);
9630
+ margin-right: var(--pf-c-description-list__term-icon--MarginRight);
9631
+ color: var(--pf-c-description-list__term-icon--Color);
9632
+ }
9633
+
9616
9634
  .pf-c-description-list__text.pf-m-help-text {
9617
9635
  text-decoration: underline;
9618
9636
  cursor: pointer;
@@ -27135,47 +27153,35 @@ svg.pf-c-spinner.pf-m-xl {
27135
27153
  }
27136
27154
 
27137
27155
  .pf-c-truncate {
27138
- --pf-c-truncate--FontSize: 1rem;
27139
- display: inline-flex;
27140
- flex-wrap: nowrap;
27141
- max-width: 100%;
27156
+ --pf-c-truncate--MinWidth: 12ch;
27157
+ --pf-c-truncate__start--MinWidth: 6ch;
27158
+ display: inline-grid;
27159
+ grid-auto-flow: column;
27160
+ align-items: baseline;
27161
+ min-width: var(--pf-c-truncate--MinWidth);
27142
27162
  }
27143
27163
 
27144
27164
  .pf-c-truncate__start,
27145
27165
  .pf-c-truncate__end {
27146
- flex-shrink: 1;
27147
27166
  overflow: hidden;
27148
27167
  text-overflow: ellipsis;
27149
27168
  white-space: nowrap;
27150
27169
  }
27151
27170
 
27171
+ .pf-c-truncate__start {
27172
+ min-width: var(--pf-c-truncate__start--MinWidth);
27173
+ }
27174
+
27152
27175
  .pf-c-truncate__end {
27153
27176
  direction: rtl;
27154
- text-align: left;
27155
27177
  }
27156
27178
 
27157
- @supports (text-overflow: "") {
27158
- .pf-c-truncate__start + .pf-c-truncate__end {
27159
- text-overflow: "";
27160
- }
27161
- }
27162
- @supports not (text-overflow: "") {
27163
- .pf-c-truncate__start + .pf-c-truncate__end {
27164
- font-size: 0;
27165
- }
27166
- .pf-c-truncate__start + .pf-c-truncate__end .pf-c-truncate__text {
27167
- font-size: var(--pf-c-truncate--FontSize);
27168
- }
27179
+ .pf-c-truncate__start + .pf-c-truncate__end {
27180
+ overflow: visible;
27181
+ direction: ltr;
27169
27182
  }
27170
- @supports (-webkit-hyphens: none) {
27171
- .pf-c-truncate {
27172
- display: inline-block;
27173
- max-width: 100%;
27174
- overflow: hidden;
27175
- text-overflow: ellipsis;
27176
- white-space: nowrap;
27177
- }
27178
27183
 
27184
+ @supports (-webkit-hyphens: none) {
27179
27185
  .pf-c-truncate__end {
27180
27186
  direction: ltr;
27181
27187
  }
package/patternfly.css CHANGED
@@ -9602,9 +9602,14 @@ label.pf-c-check, .pf-c-check__label,
9602
9602
  --pf-c-description-list__group--GridColumn: auto;
9603
9603
  --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
9604
9604
  --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
9605
+ --pf-c-description-list__term--Display: inline;
9606
+ --pf-c-description-list__term--sm--Display: flex;
9605
9607
  --pf-c-description-list__term--FontWeight: var(--pf-global--FontWeight--bold);
9606
9608
  --pf-c-description-list__term--FontSize: var(--pf-global--FontSize--sm);
9607
9609
  --pf-c-description-list__term--LineHeight: var(--pf-global--LineHeight--sm);
9610
+ --pf-c-description-list__term-icon--MinWidth: var(--pf-global--icon--FontSize--sm);
9611
+ --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
9612
+ --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
9608
9613
  --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
9609
9614
  --pf-c-description-list--m-horizontal__term--width: 12ch;
9610
9615
  --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
@@ -9625,6 +9630,11 @@ label.pf-c-check, .pf-c-check__label,
9625
9630
  column-gap: var(--pf-c-description-list--ColumnGap);
9626
9631
  grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
9627
9632
  }
9633
+ @media screen and (min-width: 576px) {
9634
+ .pf-c-description-list {
9635
+ --pf-c-description-list__term--Display: var(--pf-c-description-list__term--sm--Display);
9636
+ }
9637
+ }
9628
9638
  .pf-c-description-list[class*=pf-m-horizontal] {
9629
9639
  --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
9630
9640
  }
@@ -9727,6 +9737,7 @@ label.pf-c-check, .pf-c-check__label,
9727
9737
  }
9728
9738
 
9729
9739
  .pf-c-description-list__term {
9740
+ display: var(--pf-c-description-list__term--Display);
9730
9741
  font-size: var(--pf-c-description-list__term--FontSize);
9731
9742
  font-weight: var(--pf-c-description-list__term--FontWeight);
9732
9743
  line-height: var(--pf-c-description-list__term--LineHeight);
@@ -9735,6 +9746,13 @@ label.pf-c-check, .pf-c-check__label,
9735
9746
  display: inline;
9736
9747
  }
9737
9748
 
9749
+ .pf-c-description-list__term-icon {
9750
+ flex-shrink: 0;
9751
+ min-width: var(--pf-c-description-list__term-icon--MinWidth);
9752
+ margin-right: var(--pf-c-description-list__term-icon--MarginRight);
9753
+ color: var(--pf-c-description-list__term-icon--Color);
9754
+ }
9755
+
9738
9756
  .pf-c-description-list__text.pf-m-help-text {
9739
9757
  text-decoration: underline;
9740
9758
  cursor: pointer;
@@ -27257,47 +27275,35 @@ svg.pf-c-spinner.pf-m-xl {
27257
27275
  }
27258
27276
 
27259
27277
  .pf-c-truncate {
27260
- --pf-c-truncate--FontSize: 1rem;
27261
- display: inline-flex;
27262
- flex-wrap: nowrap;
27263
- max-width: 100%;
27278
+ --pf-c-truncate--MinWidth: 12ch;
27279
+ --pf-c-truncate__start--MinWidth: 6ch;
27280
+ display: inline-grid;
27281
+ grid-auto-flow: column;
27282
+ align-items: baseline;
27283
+ min-width: var(--pf-c-truncate--MinWidth);
27264
27284
  }
27265
27285
 
27266
27286
  .pf-c-truncate__start,
27267
27287
  .pf-c-truncate__end {
27268
- flex-shrink: 1;
27269
27288
  overflow: hidden;
27270
27289
  text-overflow: ellipsis;
27271
27290
  white-space: nowrap;
27272
27291
  }
27273
27292
 
27293
+ .pf-c-truncate__start {
27294
+ min-width: var(--pf-c-truncate__start--MinWidth);
27295
+ }
27296
+
27274
27297
  .pf-c-truncate__end {
27275
27298
  direction: rtl;
27276
- text-align: left;
27277
27299
  }
27278
27300
 
27279
- @supports (text-overflow: "") {
27280
- .pf-c-truncate__start + .pf-c-truncate__end {
27281
- text-overflow: "";
27282
- }
27283
- }
27284
- @supports not (text-overflow: "") {
27285
- .pf-c-truncate__start + .pf-c-truncate__end {
27286
- font-size: 0;
27287
- }
27288
- .pf-c-truncate__start + .pf-c-truncate__end .pf-c-truncate__text {
27289
- font-size: var(--pf-c-truncate--FontSize);
27290
- }
27301
+ .pf-c-truncate__start + .pf-c-truncate__end {
27302
+ overflow: visible;
27303
+ direction: ltr;
27291
27304
  }
27292
- @supports (-webkit-hyphens: none) {
27293
- .pf-c-truncate {
27294
- display: inline-block;
27295
- max-width: 100%;
27296
- overflow: hidden;
27297
- text-overflow: ellipsis;
27298
- white-space: nowrap;
27299
- }
27300
27305
 
27306
+ @supports (-webkit-hyphens: none) {
27301
27307
  .pf-c-truncate__end {
27302
27308
  direction: ltr;
27303
27309
  }