@patternfly/patternfly 4.164.1 → 4.165.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 (18) hide show
  1. package/RELEASE-NOTES.md +31 -0
  2. package/components/ExpandableSection/expandable-section.css +6 -0
  3. package/components/ExpandableSection/expandable-section.scss +9 -0
  4. package/components/Label/label.css +37 -0
  5. package/components/Label/label.scss +43 -0
  6. package/docs/components/ExpandableSection/examples/ExpandableSection.md +22 -0
  7. package/docs/components/Label/examples/Label.md +102 -41
  8. package/docs/components/LabelGroup/examples/LabelGroup.md +98 -73
  9. package/docs/components/NotificationBadge/examples/NotificationBadge.css +3 -0
  10. package/docs/components/NotificationBadge/examples/NotificationBadge.md +132 -108
  11. package/docs/demos/Card/examples/Card.md +22 -0
  12. package/docs/demos/Tabs/examples/Tabs.md +2 -0
  13. package/docs/pages/contribution.md +1 -1
  14. package/package.json +1 -1
  15. package/patternfly-no-reset.css +43 -0
  16. package/patternfly.css +43 -0
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -13057,6 +13057,7 @@ label.pf-c-check, .pf-c-check__label,
13057
13057
  --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
13058
13058
  --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
13059
13059
  --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
13060
+ --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
13060
13061
  --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
13061
13062
  --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
13062
13063
  --pf-c-expandable-section__toggle-icon--Rotate: 0;
@@ -13079,6 +13080,7 @@ label.pf-c-check, .pf-c-check__label,
13079
13080
  --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
13080
13081
  --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
13081
13082
  --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
13083
+ --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
13082
13084
  }
13083
13085
  .pf-c-expandable-section.pf-m-expanded {
13084
13086
  --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -13113,6 +13115,9 @@ label.pf-c-check, .pf-c-check__label,
13113
13115
  content: "";
13114
13116
  background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
13115
13117
  }
13118
+ .pf-c-expandable-section.pf-m-indented {
13119
+ --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
13120
+ }
13116
13121
 
13117
13122
  .pf-c-expandable-section__toggle {
13118
13123
  display: flex;
@@ -13131,6 +13136,7 @@ label.pf-c-check, .pf-c-check__label,
13131
13136
  }
13132
13137
 
13133
13138
  .pf-c-expandable-section__toggle-icon {
13139
+ min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
13134
13140
  color: var(--pf-c-expandable-section__toggle-icon--Color);
13135
13141
  transition: var(--pf-c-expandable-section__toggle-icon--Transition);
13136
13142
  transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));
@@ -14687,6 +14693,7 @@ label.pf-c-input-group__text {
14687
14693
  --pf-c-label--m-compact--PaddingBottom: 0;
14688
14694
  --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
14689
14695
  --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
14696
+ --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
14690
14697
  --pf-c-label__content--Color: var(--pf-global--Color--100);
14691
14698
  --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
14692
14699
  --pf-c-label__text--MaxWidth: 16ch;
@@ -14701,6 +14708,18 @@ label.pf-c-input-group__text {
14701
14708
  --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
14702
14709
  --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
14703
14710
  --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
14711
+ --pf-c-label__editable-text--MaxWidth: 16ch;
14712
+ --pf-c-label__editable-text--BorderWidth: 0;
14713
+ --pf-c-label--m-editable--Cursor: pointer;
14714
+ --pf-c-label--m-editable--TextDecoration: underline;
14715
+ --pf-c-label--m-editable--TextDecorationStyle: dashed;
14716
+ --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
14717
+ --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
14718
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
14719
+ --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
14720
+ --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
14721
+ --pf-c-label--m-editable--m-editable-active--Cursor: auto;
14722
+ --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
14704
14723
  --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
14705
14724
  --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
14706
14725
  --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
@@ -14719,6 +14738,7 @@ label.pf-c-input-group__text {
14719
14738
  --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
14720
14739
  --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
14721
14740
  --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
14741
+ --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
14722
14742
  }
14723
14743
  .pf-c-label.pf-m-blue {
14724
14744
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
@@ -14809,7 +14829,23 @@ label.pf-c-input-group__text {
14809
14829
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
14810
14830
  }
14811
14831
 
14832
+ .pf-c-label.pf-m-editable {
14833
+ text-decoration: var(--pf-c-label--m-editable--TextDecoration);
14834
+ cursor: var(--pf-c-label--m-editable--Cursor);
14835
+ text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
14836
+ text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
14837
+ text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
14838
+ text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
14839
+ }
14840
+ .pf-c-label.pf-m-editable:hover {
14841
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
14842
+ }
14843
+ .pf-c-label.pf-m-editable:focus {
14844
+ --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
14845
+ }
14812
14846
  .pf-c-label.pf-m-editable-active {
14847
+ --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
14848
+ --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
14813
14849
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
14814
14850
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
14815
14851
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
@@ -14817,6 +14853,13 @@ label.pf-c-input-group__text {
14817
14853
  .pf-c-label.pf-m-editable-active .pf-c-button {
14818
14854
  visibility: hidden;
14819
14855
  }
14856
+ .pf-c-label .pf-c-label__editable-text {
14857
+ overflow: hidden;
14858
+ text-overflow: ellipsis;
14859
+ white-space: nowrap;
14860
+ max-width: var(--pf-c-label__editable-text--MaxWidth);
14861
+ border-width: var(--pf-c-label__editable-text--BorderWidth);
14862
+ }
14820
14863
  .pf-c-label .pf-c-button {
14821
14864
  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
14822
14865
  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);