@patternfly/patternfly 4.166.5 → 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 (10) hide show
  1. package/components/DescriptionList/description-list.css +18 -0
  2. package/components/DescriptionList/description-list.scss +19 -0
  3. package/docs/components/DescriptionList/examples/DescriptionList.md +82 -30
  4. package/docs/demos/Card/examples/Card.md +95 -139
  5. package/docs/demos/Tabs/examples/Tabs.md +25 -67
  6. package/package.json +1 -1
  7. package/patternfly-no-reset.css +18 -0
  8. package/patternfly.css +18 -0
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -340,9 +340,7 @@ section: components
340
340
  aria-labelledby="open-tabs-example-tabs-list-details-title"
341
341
  >
342
342
  <div class="pf-c-description-list__group">
343
- <dt class="pf-c-description-list__term">
344
- <span class="pf-c-description-list__text">Name</span>
345
- </dt>
343
+ <dt class="pf-c-description-list__term">Name</dt>
346
344
  <dd class="pf-c-description-list__description">
347
345
  <div
348
346
  class="pf-c-description-list__text"
@@ -350,9 +348,7 @@ section: components
350
348
  </dd>
351
349
  </div>
352
350
  <div class="pf-c-description-list__group">
353
- <dt class="pf-c-description-list__term">
354
- <span class="pf-c-description-list__text">Status</span>
355
- </dt>
351
+ <dt class="pf-c-description-list__term">Status</dt>
356
352
  <dd class="pf-c-description-list__description">
357
353
  <div class="pf-c-description-list__text">
358
354
  <div class="pf-l-flex pf-m-space-items-sm">
@@ -368,9 +364,7 @@ section: components
368
364
  </dd>
369
365
  </div>
370
366
  <div class="pf-c-description-list__group">
371
- <dt class="pf-c-description-list__term">
372
- <span class="pf-c-description-list__text">Namespace</span>
373
- </dt>
367
+ <dt class="pf-c-description-list__term">Namespace</dt>
374
368
  <dd class="pf-c-description-list__description">
375
369
  <div class="pf-c-description-list__text">
376
370
  <div class="pf-l-flex pf-m-space-items-sm">
@@ -387,17 +381,13 @@ section: components
387
381
  </dd>
388
382
  </div>
389
383
  <div class="pf-c-description-list__group">
390
- <dt class="pf-c-description-list__term">
391
- <span class="pf-c-description-list__text">Restart policy</span>
392
- </dt>
384
+ <dt class="pf-c-description-list__term">Restart policy</dt>
393
385
  <dd class="pf-c-description-list__description">
394
386
  <div class="pf-c-description-list__text">Always restart</div>
395
387
  </dd>
396
388
  </div>
397
389
  <div class="pf-c-description-list__group">
398
- <dt class="pf-c-description-list__term">
399
- <span class="pf-c-description-list__text">Labels</span>
400
- </dt>
390
+ <dt class="pf-c-description-list__term">Labels</dt>
401
391
  <dd class="pf-c-description-list__description">
402
392
  <div class="pf-c-description-list__text">
403
393
  <div class="pf-c-label-group">
@@ -428,43 +418,33 @@ section: components
428
418
  </dd>
429
419
  </div>
430
420
  <div class="pf-c-description-list__group">
431
- <dt class="pf-c-description-list__term">
432
- <span
433
- class="pf-c-description-list__text"
434
- >Active deadline seconds</span>
435
- </dt>
421
+ <dt
422
+ class="pf-c-description-list__term"
423
+ >Active deadline seconds</dt>
436
424
  <dd class="pf-c-description-list__description">
437
425
  <div class="pf-c-description-list__text">Not configured</div>
438
426
  </dd>
439
427
  </div>
440
428
  <div class="pf-c-description-list__group">
441
- <dt class="pf-c-description-list__term">
442
- <span class="pf-c-description-list__text">Tolerations</span>
443
- </dt>
429
+ <dt class="pf-c-description-list__term">Tolerations</dt>
444
430
  <dd class="pf-c-description-list__description">
445
431
  <div class="pf-c-description-list__text">stuff</div>
446
432
  </dd>
447
433
  </div>
448
434
  <div class="pf-c-description-list__group">
449
- <dt class="pf-c-description-list__term">
450
- <span class="pf-c-description-list__text">Pod IP</span>
451
- </dt>
435
+ <dt class="pf-c-description-list__term">Pod IP</dt>
452
436
  <dd class="pf-c-description-list__description">
453
437
  <div class="pf-c-description-list__text">10..345.2.197</div>
454
438
  </dd>
455
439
  </div>
456
440
  <div class="pf-c-description-list__group">
457
- <dt class="pf-c-description-list__term">
458
- <span class="pf-c-description-list__text">Annotations</span>
459
- </dt>
441
+ <dt class="pf-c-description-list__term">Annotations</dt>
460
442
  <dd class="pf-c-description-list__description">
461
443
  <div class="pf-c-description-list__text">stuff</div>
462
444
  </dd>
463
445
  </div>
464
446
  <div class="pf-c-description-list__group">
465
- <dt class="pf-c-description-list__term">
466
- <span class="pf-c-description-list__text">Node</span>
467
- </dt>
447
+ <dt class="pf-c-description-list__term">Node</dt>
468
448
  <dd class="pf-c-description-list__description">
469
449
  <div class="pf-c-description-list__text">
470
450
  <div class="pf-l-flex pf-m-space-items-sm">
@@ -481,9 +461,7 @@ section: components
481
461
  </dd>
482
462
  </div>
483
463
  <div class="pf-c-description-list__group">
484
- <dt class="pf-c-description-list__term">
485
- <span class="pf-c-description-list__text">Created at</span>
486
- </dt>
464
+ <dt class="pf-c-description-list__term">Created at</dt>
487
465
  <dd class="pf-c-description-list__description">
488
466
  <div class="pf-c-description-list__text">
489
467
  <time>Oct 15, 1:51 pm</time>
@@ -920,9 +898,7 @@ section: components
920
898
  aria-label="Pod information list"
921
899
  >
922
900
  <div class="pf-c-description-list__group">
923
- <dt class="pf-c-description-list__term">
924
- <span class="pf-c-description-list__text">Name</span>
925
- </dt>
901
+ <dt class="pf-c-description-list__term">Name</dt>
926
902
  <dd class="pf-c-description-list__description">
927
903
  <div
928
904
  class="pf-c-description-list__text"
@@ -930,9 +906,7 @@ section: components
930
906
  </dd>
931
907
  </div>
932
908
  <div class="pf-c-description-list__group">
933
- <dt class="pf-c-description-list__term">
934
- <span class="pf-c-description-list__text">Status</span>
935
- </dt>
909
+ <dt class="pf-c-description-list__term">Status</dt>
936
910
  <dd class="pf-c-description-list__description">
937
911
  <div class="pf-c-description-list__text">
938
912
  <div class="pf-l-flex pf-m-space-items-sm">
@@ -948,11 +922,7 @@ section: components
948
922
  </dd>
949
923
  </div>
950
924
  <div class="pf-c-description-list__group">
951
- <dt class="pf-c-description-list__term">
952
- <span
953
- class="pf-c-description-list__text"
954
- >Namespace</span>
955
- </dt>
925
+ <dt class="pf-c-description-list__term">Namespace</dt>
956
926
  <dd class="pf-c-description-list__description">
957
927
  <div class="pf-c-description-list__text">
958
928
  <div class="pf-l-flex pf-m-space-items-sm">
@@ -969,11 +939,9 @@ section: components
969
939
  </dd>
970
940
  </div>
971
941
  <div class="pf-c-description-list__group">
972
- <dt class="pf-c-description-list__term">
973
- <span
974
- class="pf-c-description-list__text"
975
- >Restart policy</span>
976
- </dt>
942
+ <dt
943
+ class="pf-c-description-list__term"
944
+ >Restart policy</dt>
977
945
  <dd class="pf-c-description-list__description">
978
946
  <div
979
947
  class="pf-c-description-list__text"
@@ -981,9 +949,7 @@ section: components
981
949
  </dd>
982
950
  </div>
983
951
  <div class="pf-c-description-list__group">
984
- <dt class="pf-c-description-list__term">
985
- <span class="pf-c-description-list__text">Pod IP</span>
986
- </dt>
952
+ <dt class="pf-c-description-list__term">Pod IP</dt>
987
953
  <dd class="pf-c-description-list__description">
988
954
  <div
989
955
  class="pf-c-description-list__text"
@@ -991,11 +957,9 @@ section: components
991
957
  </dd>
992
958
  </div>
993
959
  <div class="pf-c-description-list__group">
994
- <dt class="pf-c-description-list__term">
995
- <span
996
- class="pf-c-description-list__text"
997
- >Active deadline seconds</span>
998
- </dt>
960
+ <dt
961
+ class="pf-c-description-list__term"
962
+ >Active deadline seconds</dt>
999
963
  <dd class="pf-c-description-list__description">
1000
964
  <div
1001
965
  class="pf-c-description-list__text"
@@ -1003,11 +967,7 @@ section: components
1003
967
  </dd>
1004
968
  </div>
1005
969
  <div class="pf-c-description-list__group">
1006
- <dt class="pf-c-description-list__term">
1007
- <span
1008
- class="pf-c-description-list__text"
1009
- >Created at</span>
1010
- </dt>
970
+ <dt class="pf-c-description-list__term">Created at</dt>
1011
971
  <dd class="pf-c-description-list__description">
1012
972
  <div class="pf-c-description-list__text">
1013
973
  <time>Oct 15, 1:51 pm</time>
@@ -1015,9 +975,7 @@ section: components
1015
975
  </dd>
1016
976
  </div>
1017
977
  <div class="pf-c-description-list__group">
1018
- <dt class="pf-c-description-list__term">
1019
- <span class="pf-c-description-list__text">Node</span>
1020
- </dt>
978
+ <dt class="pf-c-description-list__term">Node</dt>
1021
979
  <dd class="pf-c-description-list__description">
1022
980
  <div class="pf-c-description-list__text">
1023
981
  <div class="pf-l-flex pf-m-space-items-sm">
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.5",
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;
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;