@patternfly/patternfly 4.186.1 → 4.187.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 (17) hide show
  1. package/components/Card/card.css +2 -0
  2. package/components/Card/card.scss +2 -0
  3. package/components/FormControl/form-control.css +7 -0
  4. package/components/FormControl/form-control.scss +11 -0
  5. package/components/Page/themes/dark/page.scss +1 -0
  6. package/components/Tabs/tabs.css +4 -0
  7. package/components/Tabs/tabs.scss +5 -0
  8. package/docs/components/FormControl/examples/FormControl.md +16 -0
  9. package/docs/components/TabContent/examples/TabContent.md +8 -13
  10. package/docs/components/Tabs/examples/Tabs.md +1 -0
  11. package/docs/demos/Tabs/examples/Tabs.md +183 -191
  12. package/package.json +1 -1
  13. package/patternfly-no-reset.css +13 -0
  14. package/patternfly-theme-dark.css +1 -0
  15. package/patternfly.css +13 -0
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/patternfly-no-reset.css CHANGED
@@ -7639,6 +7639,7 @@ button.pf-c-breadcrumb__link {
7639
7639
  --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
7640
7640
  --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
7641
7641
  --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
7642
+ --pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs);
7642
7643
  --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
7643
7644
  --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
7644
7645
  --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
@@ -7743,6 +7744,7 @@ button.pf-c-breadcrumb__link {
7743
7744
  --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
7744
7745
  --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
7745
7746
  --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
7747
+ z-index: var(--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex);
7746
7748
  box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
7747
7749
  transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
7748
7750
  transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
@@ -13976,6 +13978,7 @@ label.pf-c-check, .pf-c-check__label,
13976
13978
  --pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--focus--BorderBottomWidth));
13977
13979
  --pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100);
13978
13980
  --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200);
13981
+ --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100);
13979
13982
  --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100);
13980
13983
  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
13981
13984
  --pf-c-form-control--disabled--BorderColor: transparent;
@@ -14236,6 +14239,12 @@ select.pf-c-form-control.pf-m-warning {
14236
14239
  select.pf-c-form-control.pf-m-placeholder {
14237
14240
  color: var(--pf-c-form-control--placeholder--Color);
14238
14241
  }
14242
+ select.pf-c-form-control.pf-m-placeholder * {
14243
+ color: var(--pf-c-form-control--placeholder--child--Color);
14244
+ }
14245
+ select.pf-c-form-control.pf-m-placeholder *:disabled {
14246
+ color: revert;
14247
+ }
14239
14248
 
14240
14249
  textarea.pf-c-form-control {
14241
14250
  --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
@@ -26652,6 +26661,10 @@ svg.pf-c-spinner.pf-m-xl {
26652
26661
  --pf-c-tabs--before--BorderBottomWidth: 0;
26653
26662
  --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0;
26654
26663
  }
26664
+ .pf-c-tabs.pf-m-border-bottom {
26665
+ --pf-c-tabs--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
26666
+ --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
26667
+ }
26655
26668
  .pf-c-tabs.pf-m-box .pf-c-tabs__link, .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
26656
26669
  --pf-c-tabs__link--after--BorderBottomWidth: 0;
26657
26670
  }
package/patternfly-theme-dark.css CHANGED
@@ -493,6 +493,7 @@
493
493
  background: transparent;
494
494
  }
495
495
  :where(.pf-theme-dark) .pf-c-page {
496
+ --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--200);
496
497
  --pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-global--BackgroundColor--300);
497
498
  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
498
499
  --pf-c-page__header--BackgroundColor: var(--pf-global--palette--black-1000);
package/patternfly.css CHANGED
@@ -7766,6 +7766,7 @@ button.pf-c-breadcrumb__link {
7766
7766
  --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
7767
7767
  --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
7768
7768
  --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
7769
+ --pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs);
7769
7770
  --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
7770
7771
  --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
7771
7772
  --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
@@ -7870,6 +7871,7 @@ button.pf-c-breadcrumb__link {
7870
7871
  --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
7871
7872
  --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
7872
7873
  --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
7874
+ z-index: var(--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex);
7873
7875
  box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
7874
7876
  transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
7875
7877
  transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
@@ -14103,6 +14105,7 @@ label.pf-c-check, .pf-c-check__label,
14103
14105
  --pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--focus--BorderBottomWidth));
14104
14106
  --pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100);
14105
14107
  --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200);
14108
+ --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100);
14106
14109
  --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100);
14107
14110
  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
14108
14111
  --pf-c-form-control--disabled--BorderColor: transparent;
@@ -14363,6 +14366,12 @@ select.pf-c-form-control.pf-m-warning {
14363
14366
  select.pf-c-form-control.pf-m-placeholder {
14364
14367
  color: var(--pf-c-form-control--placeholder--Color);
14365
14368
  }
14369
+ select.pf-c-form-control.pf-m-placeholder * {
14370
+ color: var(--pf-c-form-control--placeholder--child--Color);
14371
+ }
14372
+ select.pf-c-form-control.pf-m-placeholder *:disabled {
14373
+ color: revert;
14374
+ }
14366
14375
 
14367
14376
  textarea.pf-c-form-control {
14368
14377
  --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
@@ -26779,6 +26788,10 @@ svg.pf-c-spinner.pf-m-xl {
26779
26788
  --pf-c-tabs--before--BorderBottomWidth: 0;
26780
26789
  --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0;
26781
26790
  }
26791
+ .pf-c-tabs.pf-m-border-bottom {
26792
+ --pf-c-tabs--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
26793
+ --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
26794
+ }
26782
26795
  .pf-c-tabs.pf-m-box .pf-c-tabs__link, .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
26783
26796
  --pf-c-tabs__link--after--BorderBottomWidth: 0;
26784
26797
  }