@patternfly/patternfly 5.0.0-prerelease.10 → 5.0.0-prerelease.12

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 (13) hide show
  1. package/components/Select/select.css +2 -11
  2. package/components/Select/select.scss +3 -16
  3. package/docs/components/DescriptionList/examples/DescriptionList.md +1 -1
  4. package/docs/components/FormControl/examples/FormControl.md +1 -1
  5. package/docs/components/Icon/examples/Icon.md +1 -1
  6. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +2 -2
  7. package/docs/utilities/Text/examples/Text.md +1 -1
  8. package/package.json +2 -2
  9. package/patternfly-no-globals.css +2 -11
  10. package/patternfly-theme-dark-unversioned.css +2 -11
  11. package/patternfly.css +2 -11
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/Select/select.css CHANGED
@@ -72,7 +72,6 @@
72
72
  --pf-v5-c-select__toggle-typeahead--BorderRight: none;
73
73
  --pf-v5-c-select__toggle-typeahead--BorderLeft: none;
74
74
  --pf-v5-c-select__toggle-typeahead--MinWidth: 7.5rem;
75
- --pf-v5-c-select__toggle-typeahead--focus--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--md));
76
75
  --pf-v5-c-select__toggle--m-placeholder__toggle-text--Color: var(--pf-v5-global--Color--dark-200);
77
76
  --pf-v5-c-select__toggle-icon--toggle-text--MarginLeft: var(--pf-v5-global--spacer--xs);
78
77
  --pf-v5-c-select__toggle-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
@@ -282,7 +281,6 @@
282
281
  white-space: nowrap;
283
282
  --pf-v5-c-form-control--invalid--BackgroundUrl: none;
284
283
  position: relative;
285
- height: auto;
286
284
  }
287
285
  .pf-v5-c-select__toggle .pf-v5-c-select__toggle-clear {
288
286
  padding-right: var(--pf-v5-c-select__toggle-clear--PaddingRight);
@@ -330,9 +328,6 @@
330
328
  .pf-v5-c-select__toggle-wrapper > :not(:last-child) {
331
329
  margin-right: var(--pf-v5-c-select__toggle-wrapper--not-last-child--MarginRight);
332
330
  }
333
- .pf-v5-c-select__toggle-wrapper > .pf-v5-c-form-control {
334
- margin-top: calc(-1 * var(--pf-v5-c-select__toggle-wrapper--m-typeahead--PaddingTop));
335
- }
336
331
  .pf-v5-c-select__toggle-wrapper .pf-v5-c-chip-group {
337
332
  margin-top: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginTop);
338
333
  margin-bottom: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginBottom);
@@ -363,13 +358,9 @@
363
358
  }
364
359
  .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control {
365
360
  background-color: var(--pf-v5-c-select__toggle-typeahead--BackgroundColor);
366
- border-top: var(--pf-v5-c-select__toggle-typeahead--BorderTop);
367
- border-right: var(--pf-v5-c-select__toggle-typeahead--BorderRight);
368
- border-bottom-color: transparent;
369
- border-left: var(--pf-v5-c-select__toggle-typeahead--BorderLeft);
370
361
  }
371
- .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control:focus {
372
- padding-bottom: var(--pf-v5-c-select__toggle-typeahead--focus--PaddingBottom);
362
+ .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control::before, .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control::after {
363
+ border: 0;
373
364
  }
374
365
 
375
366
  .pf-v5-c-select__menu {
package/components/Select/select.scss CHANGED
@@ -76,9 +76,6 @@
76
76
  // Typeahead form
77
77
  --#{$select}__toggle-typeahead--MinWidth: #{pf-size-prem(120px)};
78
78
 
79
- // This is really var(--#{$form-control}--PaddingBottom) but has to be recalculated instead of reusing another component's variable
80
- --#{$select}__toggle-typeahead--focus--PaddingBottom: calc(var(--#{$pf-global}--spacer--form-element) - var(--#{$pf-global}--BorderWidth--md));
81
-
82
79
  // Toggle text
83
80
  --#{$select}__toggle--m-placeholder__toggle-text--Color: var(--#{$pf-global}--Color--dark-200);
84
81
 
@@ -355,7 +352,6 @@
355
352
  --#{$form-control}--invalid--BackgroundUrl: none;
356
353
 
357
354
  position: relative;
358
- height: auto;
359
355
  }
360
356
  }
361
357
 
@@ -415,12 +411,6 @@
415
411
  margin-right: var(--#{$select}__toggle-wrapper--not-last-child--MarginRight);
416
412
  }
417
413
 
418
- // Remove during breaking change
419
- // if there is an input in the toggle-wrapper, then give it a negative top margin to match the typeahead top padding
420
- > .#{$form-control} {
421
- margin-top: calc(-1 * var(--#{$select}__toggle-wrapper--m-typeahead--PaddingTop));
422
- }
423
-
424
414
  // a chip group needs a bottom margin to make some space between the chip group and typeahead input box if it wraps
425
415
  .#{$chip}-group {
426
416
  margin-top: var(--#{$select}__toggle-wrapper--c-chip-group--MarginTop);
@@ -455,13 +445,10 @@
455
445
 
456
446
  &.#{$form-control} {
457
447
  background-color: var(--#{$select}__toggle-typeahead--BackgroundColor);
458
- border-top: var(--#{$select}__toggle-typeahead--BorderTop); // remove and define border-top-color w/ &.#{$form-control} at breaking change
459
- border-right: var(--#{$select}__toggle-typeahead--BorderRight);
460
- border-bottom-color: transparent;
461
- border-left: var(--#{$select}__toggle-typeahead--BorderLeft);
462
448
 
463
- &:focus {
464
- padding-bottom: var(--#{$select}__toggle-typeahead--focus--PaddingBottom); // remove at breaking change
449
+ &::before,
450
+ &::after {
451
+ border: 0;
465
452
  }
466
453
  }
467
454
  }
package/docs/components/DescriptionList/examples/DescriptionList.md CHANGED
@@ -1231,7 +1231,7 @@ Column fill will modify the default placement of description list groups to fill
1231
1231
 
1232
1232
  ## Card variants
1233
1233
 
1234
- Cards can be used as [description list group wrappers](../card#description-list-group-wrapper-card-variant). Using cards in this way applies the card body padding directly to the card and enables the use of card modifiers within description list groups.
1234
+ Cards can be used as description list group wrappers. Using cards in this way applies the card body padding directly to the card and enables the use of card modifiers within description list groups.
1235
1235
 
1236
1236
  ### Description list group wrapper as card
1237
1237
 
package/docs/components/FormControl/examples/FormControl.md CHANGED
@@ -469,7 +469,7 @@ cssPrefix: pf-v5-c-form-control
469
469
 
470
470
  | Class | Applied to | Outcome |
471
471
  | -- | -- | -- |
472
- | `.pf-v5-c-form-control` | `<div>` | Initiates a container for an input, text area or select. For styling of checkboxes or radios see the [checkbox component](/components/checkbox) or [radio component](/components/radio). **Required** |
472
+ | `.pf-v5-c-form-control` | `<div>` | Initiates a container for an input, text area or select. For styling of checkboxes or radios see the [checkbox component](/components/forms/checkbox) or [radio component](/components/forms/radio). **Required** |
473
473
  | `.pf-v5-c-form-control__utilities` | `<div>` | Initiates a container for elements like icons to be associated with the form control. |
474
474
  | `.pf-v5-c-form-control__icon` | `<div>` | Creates a container for an icon associated with a form control. |
475
475
  | `.pf-v5-c-form-control__toggle-icon` | `<div>` | Initiates a toggle icon for a form select. |
package/docs/components/Icon/examples/Icon.md CHANGED
@@ -238,7 +238,7 @@ extra large
238
238
 
239
239
  The icon element is a container used to maintain a stable space for an icon or spinner, regardless of size or aspect ratio of the contents.
240
240
 
241
- Refer to the [icons](/guidelines/icons) page for information about the PatternFly icon set and guidelines for use.
241
+ Refer to the [icons](/design-foundations/icons) page for information about the PatternFly icon set and guidelines for use.
242
242
 
243
243
  ### Usage
244
244
 
package/docs/utilities/BackgroundColor/examples/BackgroundColor.md CHANGED
@@ -75,9 +75,9 @@ section: utility-classes
75
75
 
76
76
  These background color utilities can be used to modify the background color of an element. In most cases, using the components with available modifiers should be sufficient to implement most designs, and should be preferred over customizations using these utilities.
77
77
 
78
- Care should be taken especially when applying background colors, as this can have a negative effect on the readability and accessibility of text. Refer to [contrast ratios](/guidelines/colors/#contrast-ratios) for more information.
78
+ Care should be taken especially when applying background colors, as this can have a negative effect on the readability and accessibility of text. Refer to [contrast ratios](/design-foundations/colors#contrast-ratios) for more information.
79
79
 
80
- Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/utilities/text#inverse-colors).
80
+ Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/utility-classes/text#inverse-colors).
81
81
 
82
82
  [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v5-u-background-color-200-on-lg**
83
83
 
package/docs/utilities/Text/examples/Text.md CHANGED
@@ -55,7 +55,7 @@ section: utility-classes
55
55
 
56
56
  ### Inverse colors
57
57
 
58
- These colors are best used with the ["inverse" background colors](/utilities/background-color#inverse-background-colors).
58
+ These colors are best used with the ["inverse" background colors](/utility-classes/background-color#inverse-background-colors).
59
59
 
60
60
  ```html
61
61
  <div class="pf-v5-u-background-color-dark-400">
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": "5.0.0-prerelease.10",
4
+ "version": "5.0.0-prerelease.12",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -42,7 +42,7 @@
42
42
  "@commitlint/config-conventional": "^17.4.2",
43
43
  "@fortawesome/fontawesome": "^1.1.8",
44
44
  "@octokit/rest": "^19.0.7",
45
- "@patternfly/documentation-framework": "2.0.0-alpha.50",
45
+ "@patternfly/documentation-framework": "5.0.7",
46
46
  "@patternfly/patternfly-a11y": "4.3.1",
47
47
  "@patternfly/react-code-editor": "5.0.0-alpha.116",
48
48
  "@patternfly/react-core": "5.0.0-alpha.115",
package/patternfly-no-globals.css CHANGED
@@ -23090,7 +23090,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
23090
23090
  --pf-v5-c-select__toggle-typeahead--BorderRight: none;
23091
23091
  --pf-v5-c-select__toggle-typeahead--BorderLeft: none;
23092
23092
  --pf-v5-c-select__toggle-typeahead--MinWidth: 7.5rem;
23093
- --pf-v5-c-select__toggle-typeahead--focus--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--md));
23094
23093
  --pf-v5-c-select__toggle--m-placeholder__toggle-text--Color: var(--pf-v5-global--Color--dark-200);
23095
23094
  --pf-v5-c-select__toggle-icon--toggle-text--MarginLeft: var(--pf-v5-global--spacer--xs);
23096
23095
  --pf-v5-c-select__toggle-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
@@ -23300,7 +23299,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
23300
23299
  white-space: nowrap;
23301
23300
  --pf-v5-c-form-control--invalid--BackgroundUrl: none;
23302
23301
  position: relative;
23303
- height: auto;
23304
23302
  }
23305
23303
  .pf-v5-c-select__toggle .pf-v5-c-select__toggle-clear {
23306
23304
  padding-right: var(--pf-v5-c-select__toggle-clear--PaddingRight);
@@ -23348,9 +23346,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
23348
23346
  .pf-v5-c-select__toggle-wrapper > :not(:last-child) {
23349
23347
  margin-right: var(--pf-v5-c-select__toggle-wrapper--not-last-child--MarginRight);
23350
23348
  }
23351
- .pf-v5-c-select__toggle-wrapper > .pf-v5-c-form-control {
23352
- margin-top: calc(-1 * var(--pf-v5-c-select__toggle-wrapper--m-typeahead--PaddingTop));
23353
- }
23354
23349
  .pf-v5-c-select__toggle-wrapper .pf-v5-c-chip-group {
23355
23350
  margin-top: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginTop);
23356
23351
  margin-bottom: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginBottom);
@@ -23381,13 +23376,9 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
23381
23376
  }
23382
23377
  .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control {
23383
23378
  background-color: var(--pf-v5-c-select__toggle-typeahead--BackgroundColor);
23384
- border-top: var(--pf-v5-c-select__toggle-typeahead--BorderTop);
23385
- border-right: var(--pf-v5-c-select__toggle-typeahead--BorderRight);
23386
- border-bottom-color: transparent;
23387
- border-left: var(--pf-v5-c-select__toggle-typeahead--BorderLeft);
23388
23379
  }
23389
- .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control:focus {
23390
- padding-bottom: var(--pf-v5-c-select__toggle-typeahead--focus--PaddingBottom);
23380
+ .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control::before, .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control::after {
23381
+ border: 0;
23391
23382
  }
23392
23383
 
23393
23384
  .pf-v5-c-select__menu {
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -23207,7 +23207,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
23207
23207
  --pf-v5-c-select__toggle-typeahead--BorderRight: none;
23208
23208
  --pf-v5-c-select__toggle-typeahead--BorderLeft: none;
23209
23209
  --pf-v5-c-select__toggle-typeahead--MinWidth: 7.5rem;
23210
- --pf-v5-c-select__toggle-typeahead--focus--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--md));
23211
23210
  --pf-v5-c-select__toggle--m-placeholder__toggle-text--Color: var(--pf-v5-global--Color--dark-200);
23212
23211
  --pf-v5-c-select__toggle-icon--toggle-text--MarginLeft: var(--pf-v5-global--spacer--xs);
23213
23212
  --pf-v5-c-select__toggle-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
@@ -23417,7 +23416,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
23417
23416
  white-space: nowrap;
23418
23417
  --pf-v5-c-form-control--invalid--BackgroundUrl: none;
23419
23418
  position: relative;
23420
- height: auto;
23421
23419
  }
23422
23420
  .pf-v5-c-select__toggle .pf-v5-c-select__toggle-clear {
23423
23421
  padding-right: var(--pf-v5-c-select__toggle-clear--PaddingRight);
@@ -23465,9 +23463,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
23465
23463
  .pf-v5-c-select__toggle-wrapper > :not(:last-child) {
23466
23464
  margin-right: var(--pf-v5-c-select__toggle-wrapper--not-last-child--MarginRight);
23467
23465
  }
23468
- .pf-v5-c-select__toggle-wrapper > .pf-v5-c-form-control {
23469
- margin-top: calc(-1 * var(--pf-v5-c-select__toggle-wrapper--m-typeahead--PaddingTop));
23470
- }
23471
23466
  .pf-v5-c-select__toggle-wrapper .pf-v5-c-chip-group {
23472
23467
  margin-top: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginTop);
23473
23468
  margin-bottom: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginBottom);
@@ -23498,13 +23493,9 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
23498
23493
  }
23499
23494
  .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control {
23500
23495
  background-color: var(--pf-v5-c-select__toggle-typeahead--BackgroundColor);
23501
- border-top: var(--pf-v5-c-select__toggle-typeahead--BorderTop);
23502
- border-right: var(--pf-v5-c-select__toggle-typeahead--BorderRight);
23503
- border-bottom-color: transparent;
23504
- border-left: var(--pf-v5-c-select__toggle-typeahead--BorderLeft);
23505
23496
  }
23506
- .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control:focus {
23507
- padding-bottom: var(--pf-v5-c-select__toggle-typeahead--focus--PaddingBottom);
23497
+ .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control::before, .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control::after {
23498
+ border: 0;
23508
23499
  }
23509
23500
 
23510
23501
  .pf-v5-c-select__menu {
package/patternfly.css CHANGED
@@ -23207,7 +23207,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
23207
23207
  --pf-v5-c-select__toggle-typeahead--BorderRight: none;
23208
23208
  --pf-v5-c-select__toggle-typeahead--BorderLeft: none;
23209
23209
  --pf-v5-c-select__toggle-typeahead--MinWidth: 7.5rem;
23210
- --pf-v5-c-select__toggle-typeahead--focus--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--md));
23211
23210
  --pf-v5-c-select__toggle--m-placeholder__toggle-text--Color: var(--pf-v5-global--Color--dark-200);
23212
23211
  --pf-v5-c-select__toggle-icon--toggle-text--MarginLeft: var(--pf-v5-global--spacer--xs);
23213
23212
  --pf-v5-c-select__toggle-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
@@ -23417,7 +23416,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
23417
23416
  white-space: nowrap;
23418
23417
  --pf-v5-c-form-control--invalid--BackgroundUrl: none;
23419
23418
  position: relative;
23420
- height: auto;
23421
23419
  }
23422
23420
  .pf-v5-c-select__toggle .pf-v5-c-select__toggle-clear {
23423
23421
  padding-right: var(--pf-v5-c-select__toggle-clear--PaddingRight);
@@ -23465,9 +23463,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
23465
23463
  .pf-v5-c-select__toggle-wrapper > :not(:last-child) {
23466
23464
  margin-right: var(--pf-v5-c-select__toggle-wrapper--not-last-child--MarginRight);
23467
23465
  }
23468
- .pf-v5-c-select__toggle-wrapper > .pf-v5-c-form-control {
23469
- margin-top: calc(-1 * var(--pf-v5-c-select__toggle-wrapper--m-typeahead--PaddingTop));
23470
- }
23471
23466
  .pf-v5-c-select__toggle-wrapper .pf-v5-c-chip-group {
23472
23467
  margin-top: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginTop);
23473
23468
  margin-bottom: var(--pf-v5-c-select__toggle-wrapper--c-chip-group--MarginBottom);
@@ -23498,13 +23493,9 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
23498
23493
  }
23499
23494
  .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control {
23500
23495
  background-color: var(--pf-v5-c-select__toggle-typeahead--BackgroundColor);
23501
- border-top: var(--pf-v5-c-select__toggle-typeahead--BorderTop);
23502
- border-right: var(--pf-v5-c-select__toggle-typeahead--BorderRight);
23503
- border-bottom-color: transparent;
23504
- border-left: var(--pf-v5-c-select__toggle-typeahead--BorderLeft);
23505
23496
  }
23506
- .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control:focus {
23507
- padding-bottom: var(--pf-v5-c-select__toggle-typeahead--focus--PaddingBottom);
23497
+ .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control::before, .pf-v5-c-select__toggle-typeahead.pf-v5-c-form-control::after {
23498
+ border: 0;
23508
23499
  }
23509
23500
 
23510
23501
  .pf-v5-c-select__menu {