@patternfly/patternfly 4.164.0 → 4.164.4

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 (15) hide show
  1. package/RELEASE-NOTES.md +31 -0
  2. package/components/Label/label.css +37 -0
  3. package/components/Label/label.scss +43 -0
  4. package/components/Truncate/truncate.css +1 -1
  5. package/components/Truncate/truncate.scss +1 -1
  6. package/docs/components/Label/examples/Label.md +102 -41
  7. package/docs/components/LabelGroup/examples/LabelGroup.md +98 -73
  8. package/docs/demos/Card/examples/Card.md +22 -0
  9. package/docs/demos/Tabs/examples/Tabs.md +2 -0
  10. package/docs/pages/contribution.md +1 -1
  11. package/package.json +1 -1
  12. package/patternfly-no-reset.css +38 -1
  13. package/patternfly.css +38 -1
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/patternfly-no-reset.css CHANGED
@@ -14565,6 +14565,7 @@ label.pf-c-input-group__text {
14565
14565
  --pf-c-label--m-compact--PaddingBottom: 0;
14566
14566
  --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
14567
14567
  --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
14568
+ --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
14568
14569
  --pf-c-label__content--Color: var(--pf-global--Color--100);
14569
14570
  --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
14570
14571
  --pf-c-label__text--MaxWidth: 16ch;
@@ -14579,6 +14580,18 @@ label.pf-c-input-group__text {
14579
14580
  --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
14580
14581
  --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
14581
14582
  --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
14583
+ --pf-c-label__editable-text--MaxWidth: 16ch;
14584
+ --pf-c-label__editable-text--BorderWidth: 0;
14585
+ --pf-c-label--m-editable--Cursor: pointer;
14586
+ --pf-c-label--m-editable--TextDecoration: underline;
14587
+ --pf-c-label--m-editable--TextDecorationStyle: dashed;
14588
+ --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
14589
+ --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
14590
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
14591
+ --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
14592
+ --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
14593
+ --pf-c-label--m-editable--m-editable-active--Cursor: auto;
14594
+ --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
14582
14595
  --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
14583
14596
  --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
14584
14597
  --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
@@ -14597,6 +14610,7 @@ label.pf-c-input-group__text {
14597
14610
  --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
14598
14611
  --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
14599
14612
  --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
14613
+ --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
14600
14614
  }
14601
14615
  .pf-c-label.pf-m-blue {
14602
14616
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
@@ -14687,7 +14701,23 @@ label.pf-c-input-group__text {
14687
14701
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
14688
14702
  }
14689
14703
 
14704
+ .pf-c-label.pf-m-editable {
14705
+ text-decoration: var(--pf-c-label--m-editable--TextDecoration);
14706
+ cursor: var(--pf-c-label--m-editable--Cursor);
14707
+ text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
14708
+ text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
14709
+ text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
14710
+ text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
14711
+ }
14712
+ .pf-c-label.pf-m-editable:hover {
14713
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
14714
+ }
14715
+ .pf-c-label.pf-m-editable:focus {
14716
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
14717
+ }
14690
14718
  .pf-c-label.pf-m-editable-active {
14719
+ --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
14720
+ --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
14691
14721
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
14692
14722
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
14693
14723
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
@@ -14695,6 +14725,13 @@ label.pf-c-input-group__text {
14695
14725
  .pf-c-label.pf-m-editable-active .pf-c-button {
14696
14726
  visibility: hidden;
14697
14727
  }
14728
+ .pf-c-label .pf-c-label__editable-text {
14729
+ overflow: hidden;
14730
+ text-overflow: ellipsis;
14731
+ white-space: nowrap;
14732
+ max-width: var(--pf-c-label__editable-text--MaxWidth);
14733
+ border-width: var(--pf-c-label__editable-text--BorderWidth);
14734
+ }
14698
14735
  .pf-c-label .pf-c-button {
14699
14736
  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
14700
14737
  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
@@ -27076,7 +27113,7 @@ svg.pf-c-spinner.pf-m-xl {
27076
27113
  }
27077
27114
 
27078
27115
  .pf-c-truncate {
27079
- --pf-c-truncate--FontSize: var(--pf-c-truncate--FontSize, 1rem);
27116
+ --pf-c-truncate--FontSize: 1rem;
27080
27117
  display: inline-flex;
27081
27118
  flex-wrap: nowrap;
27082
27119
  max-width: 100%;
package/patternfly.css CHANGED
@@ -14687,6 +14687,7 @@ label.pf-c-input-group__text {
14687
14687
  --pf-c-label--m-compact--PaddingBottom: 0;
14688
14688
  --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
14689
14689
  --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
14690
+ --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
14690
14691
  --pf-c-label__content--Color: var(--pf-global--Color--100);
14691
14692
  --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
14692
14693
  --pf-c-label__text--MaxWidth: 16ch;
@@ -14701,6 +14702,18 @@ label.pf-c-input-group__text {
14701
14702
  --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
14702
14703
  --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
14703
14704
  --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
14705
+ --pf-c-label__editable-text--MaxWidth: 16ch;
14706
+ --pf-c-label__editable-text--BorderWidth: 0;
14707
+ --pf-c-label--m-editable--Cursor: pointer;
14708
+ --pf-c-label--m-editable--TextDecoration: underline;
14709
+ --pf-c-label--m-editable--TextDecorationStyle: dashed;
14710
+ --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
14711
+ --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
14712
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
14713
+ --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
14714
+ --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
14715
+ --pf-c-label--m-editable--m-editable-active--Cursor: auto;
14716
+ --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
14704
14717
  --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
14705
14718
  --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
14706
14719
  --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
@@ -14719,6 +14732,7 @@ label.pf-c-input-group__text {
14719
14732
  --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
14720
14733
  --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
14721
14734
  --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
14735
+ --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
14722
14736
  }
14723
14737
  .pf-c-label.pf-m-blue {
14724
14738
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
@@ -14809,7 +14823,23 @@ label.pf-c-input-group__text {
14809
14823
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
14810
14824
  }
14811
14825
 
14826
+ .pf-c-label.pf-m-editable {
14827
+ text-decoration: var(--pf-c-label--m-editable--TextDecoration);
14828
+ cursor: var(--pf-c-label--m-editable--Cursor);
14829
+ text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
14830
+ text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
14831
+ text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
14832
+ text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
14833
+ }
14834
+ .pf-c-label.pf-m-editable:hover {
14835
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
14836
+ }
14837
+ .pf-c-label.pf-m-editable:focus {
14838
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
14839
+ }
14812
14840
  .pf-c-label.pf-m-editable-active {
14841
+ --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
14842
+ --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
14813
14843
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
14814
14844
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
14815
14845
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
@@ -14817,6 +14847,13 @@ label.pf-c-input-group__text {
14817
14847
  .pf-c-label.pf-m-editable-active .pf-c-button {
14818
14848
  visibility: hidden;
14819
14849
  }
14850
+ .pf-c-label .pf-c-label__editable-text {
14851
+ overflow: hidden;
14852
+ text-overflow: ellipsis;
14853
+ white-space: nowrap;
14854
+ max-width: var(--pf-c-label__editable-text--MaxWidth);
14855
+ border-width: var(--pf-c-label__editable-text--BorderWidth);
14856
+ }
14820
14857
  .pf-c-label .pf-c-button {
14821
14858
  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
14822
14859
  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
@@ -27198,7 +27235,7 @@ svg.pf-c-spinner.pf-m-xl {
27198
27235
  }
27199
27236
 
27200
27237
  .pf-c-truncate {
27201
- --pf-c-truncate--FontSize: var(--pf-c-truncate--FontSize, 1rem);
27238
+ --pf-c-truncate--FontSize: 1rem;
27202
27239
  display: inline-flex;
27203
27240
  flex-wrap: nowrap;
27204
27241
  max-width: 100%;