@patternfly/patternfly 4.213.0 → 4.215.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 (28) hide show
  1. package/components/Banner/banner.css +6 -6
  2. package/components/Banner/banner.scss +8 -4
  3. package/components/Banner/themes/dark/banner.scss +5 -1
  4. package/components/FormControl/form-control.css +7 -0
  5. package/components/FormControl/form-control.scss +11 -0
  6. package/components/ProgressStepper/progress-stepper.css +7 -4
  7. package/components/ProgressStepper/progress-stepper.scss +7 -4
  8. package/docs/components/Banner/examples/Banner.md +91 -19
  9. package/docs/components/FileUpload/examples/FileUpload.md +1 -1
  10. package/docs/components/Form/examples/Form.md +52 -50
  11. package/docs/components/FormControl/examples/FormControl.md +34 -13
  12. package/docs/components/Login/examples/Login.md +5 -5
  13. package/docs/components/SearchInput/examples/SearchInput.md +2 -2
  14. package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -2
  15. package/docs/components/Wizard/examples/Wizard.md +5 -5
  16. package/docs/demos/Alert/examples/Alert.md +2 -2
  17. package/docs/demos/Button/examples/Button.md +3 -3
  18. package/docs/demos/Form/examples/BasicForms.md +5 -5
  19. package/docs/demos/HelperText/examples/HelperText.md +1 -1
  20. package/docs/demos/Modal/examples/Modal.md +1 -1
  21. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  22. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  23. package/docs/demos/Wizard/examples/Wizard.md +1960 -748
  24. package/package.json +1 -1
  25. package/patternfly-no-reset.css +20 -10
  26. package/patternfly.css +20 -10
  27. package/patternfly.min.css +1 -1
  28. 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.213.0",
4
+ "version": "4.215.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @charset "UTF-8";
2
- .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info, .pf-c-alert, .pf-c-accordion, .pf-t-light {
2
+ .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
3
3
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
4
4
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
5
5
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -7067,17 +7067,17 @@ html {
7067
7067
  --pf-c-banner--PaddingLeft: var(--pf-c-banner--md--PaddingLeft);
7068
7068
  }
7069
7069
  }
7070
- .pf-c-banner.pf-m-info {
7070
+ .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
7071
7071
  color: var(--pf-global--Color--100);
7072
7072
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor);
7073
7073
  }
7074
- .pf-c-banner.pf-m-danger {
7074
+ .pf-c-banner.pf-m-danger, .pf-c-banner.pf-m-red {
7075
7075
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor);
7076
7076
  }
7077
- .pf-c-banner.pf-m-success {
7077
+ .pf-c-banner.pf-m-success, .pf-c-banner.pf-m-green {
7078
7078
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor);
7079
7079
  }
7080
- .pf-c-banner.pf-m-warning {
7080
+ .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold {
7081
7081
  color: var(--pf-global--Color--100);
7082
7082
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor);
7083
7083
  }
@@ -7154,7 +7154,7 @@ html {
7154
7154
  :where(.pf-theme-dark) .pf-c-banner {
7155
7155
  color: var(--pf-global--Color--100);
7156
7156
  }
7157
- :where(.pf-theme-dark) .pf-c-banner.pf-m-info, :where(.pf-theme-dark) .pf-c-banner.pf-m-danger, :where(.pf-theme-dark) .pf-c-banner.pf-m-success, :where(.pf-theme-dark) .pf-c-banner.pf-m-warning {
7157
+ :where(.pf-theme-dark) .pf-c-banner.pf-m-info, :where(.pf-theme-dark) .pf-c-banner.pf-m-blue, :where(.pf-theme-dark) .pf-c-banner.pf-m-danger, :where(.pf-theme-dark) .pf-c-banner.pf-m-red, :where(.pf-theme-dark) .pf-c-banner.pf-m-success, :where(.pf-theme-dark) .pf-c-banner.pf-m-green, :where(.pf-theme-dark) .pf-c-banner.pf-m-warning, :where(.pf-theme-dark) .pf-c-banner.pf-m-gold {
7158
7158
  color: var(--pf-global--palette--black-900);
7159
7159
  }
7160
7160
 
@@ -15299,6 +15299,8 @@ label.pf-c-check, .pf-c-check__label,
15299
15299
  --pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm));
15300
15300
  --pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
15301
15301
  --pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200);
15302
+ --pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
15303
+ --pf-c-form-control--readonly--m-plain--inset--base: 0;
15302
15304
  --pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md);
15303
15305
  --pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--success--BorderBottomWidth));
15304
15306
  --pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100);
@@ -15419,6 +15421,11 @@ label.pf-c-check, .pf-c-check__label,
15419
15421
  --pf-c-form-control--focus--BorderBottomWidth: var(--pf-c-form-control--readonly--focus--BorderBottomWidth);
15420
15422
  --pf-c-form-control--focus--BorderBottomColor: var(--pf-c-form-control--readonly--focus--BorderBottomColor);
15421
15423
  }
15424
+ .pf-c-form-control[readonly].pf-m-plain {
15425
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);
15426
+ --pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);
15427
+ border-color: transparent;
15428
+ }
15422
15429
  .pf-c-form-control:hover {
15423
15430
  --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
15424
15431
  }
@@ -23486,8 +23493,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23486
23493
  --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
23487
23494
  --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs);
23488
23495
  --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs);
23489
- --pf-c-progress-stepper--m-center__step-title--TextAlign: center;
23490
- --pf-c-progress-stepper--m-center__step-description--TextAlign: center;
23496
+ --pf-c-progress-stepper--m-center__step-main--TextAlign: center;
23491
23497
  --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
23492
23498
  --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
23493
23499
  --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
@@ -23581,10 +23587,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23581
23587
  --pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);
23582
23588
  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);
23583
23589
  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);
23584
- --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign);
23590
+ --pf-c-progress-stepper--step-main--TextAlign: var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);
23591
+ --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);
23585
23592
  --pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);
23586
23593
  --pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);
23587
- --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign);
23594
+ --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);
23588
23595
  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);
23589
23596
  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);
23590
23597
  grid-template-columns: var(--pf-c-progress-stepper--m-center--GridTemplateColumns);
@@ -23712,7 +23719,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23712
23719
  }
23713
23720
 
23714
23721
  .pf-c-progress-stepper__step-main {
23722
+ min-width: 0;
23715
23723
  margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);
23724
+ text-align: var(--pf-c-progress-stepper--step-main--TextAlign, auto);
23725
+ overflow-wrap: anywhere;
23716
23726
  }
23717
23727
  .pf-c-progress-stepper__step:not(:last-of-type) > .pf-c-progress-stepper__step-main::before {
23718
23728
  position: absolute;
package/patternfly.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @charset "UTF-8";
2
- .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-info, .pf-c-alert, .pf-c-accordion, .pf-t-light {
2
+ .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
3
3
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
4
4
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
5
5
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -7194,17 +7194,17 @@ a {
7194
7194
  --pf-c-banner--PaddingLeft: var(--pf-c-banner--md--PaddingLeft);
7195
7195
  }
7196
7196
  }
7197
- .pf-c-banner.pf-m-info {
7197
+ .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
7198
7198
  color: var(--pf-global--Color--100);
7199
7199
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor);
7200
7200
  }
7201
- .pf-c-banner.pf-m-danger {
7201
+ .pf-c-banner.pf-m-danger, .pf-c-banner.pf-m-red {
7202
7202
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor);
7203
7203
  }
7204
- .pf-c-banner.pf-m-success {
7204
+ .pf-c-banner.pf-m-success, .pf-c-banner.pf-m-green {
7205
7205
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor);
7206
7206
  }
7207
- .pf-c-banner.pf-m-warning {
7207
+ .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold {
7208
7208
  color: var(--pf-global--Color--100);
7209
7209
  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor);
7210
7210
  }
@@ -7281,7 +7281,7 @@ a {
7281
7281
  :where(.pf-theme-dark) .pf-c-banner {
7282
7282
  color: var(--pf-global--Color--100);
7283
7283
  }
7284
- :where(.pf-theme-dark) .pf-c-banner.pf-m-info, :where(.pf-theme-dark) .pf-c-banner.pf-m-danger, :where(.pf-theme-dark) .pf-c-banner.pf-m-success, :where(.pf-theme-dark) .pf-c-banner.pf-m-warning {
7284
+ :where(.pf-theme-dark) .pf-c-banner.pf-m-info, :where(.pf-theme-dark) .pf-c-banner.pf-m-blue, :where(.pf-theme-dark) .pf-c-banner.pf-m-danger, :where(.pf-theme-dark) .pf-c-banner.pf-m-red, :where(.pf-theme-dark) .pf-c-banner.pf-m-success, :where(.pf-theme-dark) .pf-c-banner.pf-m-green, :where(.pf-theme-dark) .pf-c-banner.pf-m-warning, :where(.pf-theme-dark) .pf-c-banner.pf-m-gold {
7285
7285
  color: var(--pf-global--palette--black-900);
7286
7286
  }
7287
7287
 
@@ -15426,6 +15426,8 @@ label.pf-c-check, .pf-c-check__label,
15426
15426
  --pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm));
15427
15427
  --pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
15428
15428
  --pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200);
15429
+ --pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
15430
+ --pf-c-form-control--readonly--m-plain--inset--base: 0;
15429
15431
  --pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md);
15430
15432
  --pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--success--BorderBottomWidth));
15431
15433
  --pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100);
@@ -15546,6 +15548,11 @@ label.pf-c-check, .pf-c-check__label,
15546
15548
  --pf-c-form-control--focus--BorderBottomWidth: var(--pf-c-form-control--readonly--focus--BorderBottomWidth);
15547
15549
  --pf-c-form-control--focus--BorderBottomColor: var(--pf-c-form-control--readonly--focus--BorderBottomColor);
15548
15550
  }
15551
+ .pf-c-form-control[readonly].pf-m-plain {
15552
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);
15553
+ --pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);
15554
+ border-color: transparent;
15555
+ }
15549
15556
  .pf-c-form-control:hover {
15550
15557
  --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
15551
15558
  }
@@ -23613,8 +23620,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23613
23620
  --pf-c-progress-stepper--m-center__step-connector--JustifyContent: center;
23614
23621
  --pf-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs);
23615
23622
  --pf-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs);
23616
- --pf-c-progress-stepper--m-center__step-title--TextAlign: center;
23617
- --pf-c-progress-stepper--m-center__step-description--TextAlign: center;
23623
+ --pf-c-progress-stepper--m-center__step-main--TextAlign: center;
23618
23624
  --pf-c-progress-stepper--m-center__step-description--MarginRight: 0;
23619
23625
  --pf-c-progress-stepper--m-center__step-description--MarginLeft: 0;
23620
23626
  --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
@@ -23708,10 +23714,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23708
23714
  --pf-c-progress-stepper__step-connector--JustifyContent: var(--pf-c-progress-stepper--m-center__step-connector--JustifyContent);
23709
23715
  --pf-c-progress-stepper__step-main--MarginRight: var(--pf-c-progress-stepper--m-center__step-main--MarginRight);
23710
23716
  --pf-c-progress-stepper__step-main--MarginLeft: var(--pf-c-progress-stepper--m-center__step-main--MarginLeft);
23711
- --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign);
23717
+ --pf-c-progress-stepper--step-main--TextAlign: var(--pf-c-progress-stepper--m-center__step-main--TextAlign, auto);
23718
+ --pf-c-progress-stepper__step-title--TextAlign: var(--pf-c-progress-stepper--m-center__step-title--TextAlign, auto);
23712
23719
  --pf-c-progress-stepper__step-description--MarginRight: var(--pf-c-progress-stepper--m-center__step-description--MarginRight);
23713
23720
  --pf-c-progress-stepper__step-description--MarginLeft: var(--pf-c-progress-stepper--m-center__step-description--MarginLeft);
23714
- --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign);
23721
+ --pf-c-progress-stepper__step-description--TextAlign: var(--pf-c-progress-stepper--m-center__step-description--TextAlign, auto);
23715
23722
  --pf-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight);
23716
23723
  --pf-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft);
23717
23724
  grid-template-columns: var(--pf-c-progress-stepper--m-center--GridTemplateColumns);
@@ -23839,7 +23846,10 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23839
23846
  }
23840
23847
 
23841
23848
  .pf-c-progress-stepper__step-main {
23849
+ min-width: 0;
23842
23850
  margin: var(--pf-c-progress-stepper__step-main--MarginTop) var(--pf-c-progress-stepper__step-main--MarginRight) var(--pf-c-progress-stepper__step-main--MarginBottom) var(--pf-c-progress-stepper__step-main--MarginLeft);
23851
+ text-align: var(--pf-c-progress-stepper--step-main--TextAlign, auto);
23852
+ overflow-wrap: anywhere;
23843
23853
  }
23844
23854
  .pf-c-progress-stepper__step:not(:last-of-type) > .pf-c-progress-stepper__step-main::before {
23845
23855
  position: absolute;