@patternfly/patternfly 4.196.4 → 4.196.7

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 (19) hide show
  1. package/RELEASE-NOTES.md +24 -0
  2. package/base/themes/dark/_chart-globals.scss +39 -0
  3. package/base/themes/dark/_globals.scss +5 -0
  4. package/base/themes/dark/_variables.scss +95 -0
  5. package/components/ChipGroup/chip-group.css +1 -1
  6. package/components/ChipGroup/chip-group.scss +2 -1
  7. package/components/LabelGroup/label-group.css +1 -0
  8. package/components/LabelGroup/label-group.scss +1 -0
  9. package/docs/components/Form/examples/Form.md +56 -511
  10. package/docs/demos/Form/examples/BasicForms.md +781 -0
  11. package/package.json +1 -1
  12. package/patternfly-no-reset.css +2 -1
  13. package/patternfly.css +2 -1
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
  16. package/sass-utilities/themes/dark/colors.scss +16 -0
  17. package/sass-utilities/themes/dark/mixins.scss +5 -0
  18. package/sass-utilities/themes/dark/placeholders.scss +28 -0
  19. package/sass-utilities/themes/dark/scss-variables.scss +86 -0
package/RELEASE-NOTES.md CHANGED
@@ -3,6 +3,30 @@ id: Release notes
3
3
  section: developer-resources
4
4
  releaseNoteTOC: true
5
5
  ---
6
+ ## 2022.07 release notes (2022-06-03)
7
+ Packages released:
8
+ - [@patternfly/patternfly@v4.196.7](https://www.npmjs.com/package/@patternfly/patternfly/v/4.196.7)
9
+
10
+ ### Components
11
+ - **Calendar month:** Improved layout of nav controls ([#4862](https://github.com/patternfly/patternfly/pull/4862))
12
+ - **Chip group:** Fixed premature wrapping ([#4879](https://github.com/patternfly/patternfly/pull/4879))
13
+ - **Drawer:** Added demos with jumplinks ([#4608](https://github.com/patternfly/patternfly/pull/4608))
14
+ - **Form field:** Documented autocomplete limitation ([#4856](https://github.com/patternfly/patternfly/pull/4856))
15
+ - **Form:** Added complex form demo ([#4865](https://github.com/patternfly/patternfly/pull/4865))
16
+ - **Label:** Added gold, updated orange bgcolor ([#4863](https://github.com/patternfly/patternfly/pull/4863))
17
+ - **Page:** Added masthead to header/nav/main stacking context order ([#4839](https://github.com/patternfly/patternfly/pull/4839))
18
+ - **Table:**
19
+ - Added expanded set column width example ([#4852](https://github.com/patternfly/patternfly/pull/4852))
20
+ - Added image and text demo ([#4853](https://github.com/patternfly/patternfly/pull/4853))
21
+
22
+ ### Other
23
+ - **Theme:**
24
+ * Imported dark theme per component, added new global var ([#4864](https://github.com/patternfly/patternfly/pull/4864))
25
+ * Updated dark theme default text color ([#4875](https://github.com/patternfly/patternfly/pull/4875))
26
+ * Updated build process to copy files from new SCSS location ([#4877](https://github.com/patternfly/patternfly/issues/4877))
27
+ - **Utilities:** Added font family utilities ([#4868](https://github.com/patternfly/patternfly/pull/4868))
28
+
29
+
6
30
  ## 2022.06 release notes (2022-05-13)
7
31
  Packages released:
8
32
  - [@patternfly/patternfly@v4.194.4](https://www.npmjs.com/package/@patternfly/patternfly/v/4.194.4)
package/base/themes/dark/_chart-globals.scss ADDED
@@ -0,0 +1,39 @@
1
+ @import "../../../sass-utilities/colors";
2
+ @import "../../../sass-utilities/scss-variables";
3
+
4
+ // Chart colors
5
+
6
+ // blue
7
+ $pf-chart-color-blue-100: #add6ff;
8
+ $pf-chart-color-blue-200: #85c2ff;
9
+ $pf-chart-color-blue-300: #47a3ff;
10
+ $pf-chart-color-blue-400: #0a85ff;
11
+ $pf-chart-color-blue-500: $pf-color-blue-400;
12
+
13
+ // green
14
+ $pf-chart-color-green-100: #d6eed3;
15
+ $pf-chart-color-green-200: #aedca7;
16
+ $pf-chart-color-green-300: #85cb7c;
17
+ $pf-chart-color-green-400: #5cb950;
18
+ $pf-chart-color-green-500: $pf-color-green-500;
19
+
20
+ // cyan
21
+ $pf-chart-color-cyan-100: #b9feff;
22
+ $pf-chart-color-cyan-200: #86fdff;
23
+ $pf-chart-color-cyan-300: #00b5b8;
24
+ $pf-chart-color-cyan-400: #008c8f;
25
+ $pf-chart-color-cyan-500: $pf-color-cyan-400;
26
+
27
+ // purple
28
+ $pf-chart-color-purple-100: #cec8e4;
29
+ $pf-chart-color-purple-200: #a99fd1;
30
+ $pf-chart-color-purple-300: #9183c3;
31
+ $pf-chart-color-purple-400: #7968b6;
32
+ $pf-chart-color-purple-500: $pf-color-purple-500;
33
+
34
+ // red
35
+ $pf-chart-color-red-100: #ffadad;
36
+ $pf-chart-color-red-200: #ff7070;
37
+ $pf-chart-color-red-300: #ff4747;
38
+ $pf-chart-color-red-400: #ff0a0a;
39
+ $pf-chart-color-red-500: $pf-color-red-200;
package/base/themes/dark/_globals.scss ADDED
@@ -0,0 +1,5 @@
1
+ @mixin globals() {
2
+ // stylelint-disable property-no-unknown
3
+ color-scheme: dark;
4
+ // stylelint-enable
5
+ }
package/base/themes/dark/_variables.scss ADDED
@@ -0,0 +1,95 @@
1
+ @import "../../../sass-utilities/themes/dark/all";
2
+
3
+ @mixin _variables() {
4
+ // palette changes
5
+ --pf-global--palette--black-50: #{$pf-color-black-50};
6
+ --pf-global--palette--black-100: #{$pf-color-black-100};
7
+ --pf-global--palette--black-200: #{$pf-color-black-200};
8
+ --pf-global--palette--black-300: #{$pf-color-black-300};
9
+ --pf-global--palette--black-400: #{$pf-color-black-400};
10
+ --pf-global--palette--black-500: #{$pf-color-black-500};
11
+ --pf-global--palette--black-600: #{$pf-color-black-600};
12
+ --pf-global--palette--black-700: #{$pf-color-black-700};
13
+ --pf-global--palette--black-800: #{$pf-color-black-800};
14
+ --pf-global--palette--black-900: #{$pf-color-black-900};
15
+ --pf-global--palette--red-9999: #{$pf-color-red-9999};
16
+ --pf-global--palette--red-8888: #{$pf-color-red-8888};
17
+ --pf-global--palette--blue-300: #{$pf-color-blue-300};
18
+
19
+ // background colors
20
+ --pf-global--BackgroundColor--100: #{$pf-global--BackgroundColor--100};
21
+ --pf-global--BackgroundColor--150: #{$pf-global--BackgroundColor--150};
22
+ --pf-global--BackgroundColor--200: #{$pf-global--BackgroundColor--200};
23
+ --pf-global--BackgroundColor--300: #{$pf-global--BackgroundColor--300};
24
+ --pf-global--BackgroundColor--400: #{$pf-global--BackgroundColor--400};
25
+ --pf-global--BorderColor--100: #{$pf-global--BorderColor--100};
26
+ --pf-global--BorderColor--200: #{$pf-global--BorderColor--200};
27
+ --pf-global--BorderColor--300: #{$pf-global--BorderColor--300};
28
+ --pf-global--BorderColor--400: #{$pf-global--BorderColor--400};
29
+
30
+ // text colors
31
+ --pf-global--Color--100: #{$pf-global--Color--100};
32
+ --pf-global--Color--200: #{$pf-global--Color--200};
33
+ --pf-global--active-color--100: #{$pf-global--active-color--100};
34
+ --pf-global--primary-color--100: #{$pf-global--primary-color--100};
35
+ --pf-global--primary-color--300: #{$pf-global--primary-color--300};
36
+ --pf-global--success-color--100: #{$pf-global--success-color--100};
37
+ --pf-global--warning-color--100: #{$pf-global--warning-color--100};
38
+ --pf-global--warning-color--200: #{$pf-global--warning-color--200};
39
+ --pf-global--danger-color--100: #{$pf-global--danger-color--100};
40
+ --pf-global--danger-color--200: #{$pf-global--danger-color--200};
41
+ --pf-global--link--Color: #{$pf-global--link--Color};
42
+ --pf-global--link--Color--hover: #{$pf-global--link--Color--hover};
43
+ --pf-global--disabled-color--100: #{$pf-global--disabled-color--100};
44
+ --pf-global--disabled-color--200: #{$pf-global--disabled-color--200};
45
+ --pf-global--disabled-color--300: #{$pf-global--disabled-color--300};
46
+
47
+ // icons
48
+ --pf-global--icon--Color--light: #{$pf-global--icon--Color--light};
49
+ --pf-global--icon--Color--dark: #{$pf-global--icon--Color--dark};
50
+
51
+ // theme color resets
52
+ --pf-global--Color--dark-100: #{$pf-global--Color--dark-100};
53
+ --pf-global--Color--dark-200: #{$pf-global--Color--dark-200};
54
+ --pf-global--Color--light-100: #{$pf-global--Color--light-100};
55
+ --pf-global--Color--light-200: #{$pf-global--Color--light-200};
56
+ --pf-global--Color--light-300: #{$pf-global--Color--light-300};
57
+ --pf-global--BorderColor--dark-100: #{$pf-global--BorderColor--dark-100};
58
+ --pf-global--BorderColor--light-100: #{$pf-global--BorderColor--light-100};
59
+ --pf-global--primary-color--light-100: #{$pf-global--primary-color--light-100};
60
+ --pf-global--primary-color--dark-100: #{$pf-global--primary-color--dark-100};
61
+ --pf-global--link--Color--light: #{$pf-global--link--Color--light};
62
+ --pf-global--link--Color--light--hover: #{$pf-global--link--Color--light--hover};
63
+ --pf-global--link--Color--dark: #{$pf-global--link--Color--dark};
64
+ --pf-global--link--Color--dark--hover: #{$pf-global--link--Color--dark--hover};
65
+ --pf-global--BackgroundColor--light-100: #{$pf-global--BackgroundColor--light-100};
66
+ --pf-global--BackgroundColor--light-200: #{$pf-global--BackgroundColor--light-200};
67
+ --pf-global--BackgroundColor--light-300: #{$pf-global--BackgroundColor--light-300};
68
+ --pf-global--BackgroundColor--dark-100: #{$pf-global--BackgroundColor--dark-100};
69
+ --pf-global--BackgroundColor--dark-200: #{$pf-global--BackgroundColor--dark-200};
70
+ --pf-global--BackgroundColor--dark-300: #{$pf-global--BackgroundColor--dark-300};
71
+ --pf-global--BackgroundColor--dark-400: #{$pf-global--BackgroundColor--dark-400};
72
+
73
+ // Shadows
74
+ --pf-global--BoxShadow--sm: #{$pf-global--BoxShadow--sm};
75
+ --pf-global--BoxShadow--sm-top: #{$pf-global--BoxShadow--sm-top};
76
+ --pf-global--BoxShadow--sm-right: #{$pf-global--BoxShadow--sm-right};
77
+ --pf-global--BoxShadow--sm-bottom: #{$pf-global--BoxShadow--sm-bottom};
78
+ --pf-global--BoxShadow--sm-left: #{$pf-global--BoxShadow--sm-left};
79
+ --pf-global--BoxShadow--md: #{$pf-global--BoxShadow--md};
80
+ --pf-global--BoxShadow--md-top: #{$pf-global--BoxShadow--md-top};
81
+ --pf-global--BoxShadow--md-right: #{$pf-global--BoxShadow--md-right};
82
+ --pf-global--BoxShadow--md-bottom: #{$pf-global--BoxShadow--md-bottom};
83
+ --pf-global--BoxShadow--md-left: #{$pf-global--BoxShadow--md-left};
84
+ --pf-global--BoxShadow--lg: #{$pf-global--BoxShadow--lg};
85
+ --pf-global--BoxShadow--lg-top: #{$pf-global--BoxShadow--lg-top};
86
+ --pf-global--BoxShadow--lg-right: #{$pf-global--BoxShadow--lg-right};
87
+ --pf-global--BoxShadow--lg-bottom: #{$pf-global--BoxShadow--lg-bottom};
88
+ --pf-global--BoxShadow--lg-left: #{$pf-global--BoxShadow--lg-left};
89
+ --pf-global--BoxShadow--xl: #{$pf-global--BoxShadow--xl};
90
+ --pf-global--BoxShadow--xl-top: #{$pf-global--BoxShadow--xl-top};
91
+ --pf-global--BoxShadow--xl-right: #{$pf-global--BoxShadow--xl-right};
92
+ --pf-global--BoxShadow--xl-bottom: #{$pf-global--BoxShadow--xl-bottom};
93
+ --pf-global--BoxShadow--xl-left: #{$pf-global--BoxShadow--xl-left};
94
+ --pf-global--BoxShadow--inset: #{$pf-global--BoxShadow--inset};
95
+ }
package/components/ChipGroup/chip-group.css CHANGED
@@ -25,6 +25,7 @@
25
25
  --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
26
26
  --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
27
27
  --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
28
+ max-width: 100%;
28
29
  }
29
30
  .pf-c-chip-group.pf-m-category {
30
31
  padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
@@ -54,7 +55,6 @@
54
55
  flex-wrap: wrap;
55
56
  align-items: center;
56
57
  min-width: 0;
57
- max-width: 100%;
58
58
  }
59
59
 
60
60
  .pf-c-chip-group__list-item {
package/components/ChipGroup/chip-group.scss CHANGED
@@ -26,6 +26,8 @@
26
26
  --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
27
27
  --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
28
28
 
29
+ max-width: 100%;
30
+
29
31
  &.pf-m-category {
30
32
  padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
31
33
  padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
@@ -55,7 +57,6 @@
55
57
  flex-wrap: wrap;
56
58
  align-items: center;
57
59
  min-width: 0;
58
- max-width: 100%;
59
60
  }
60
61
 
61
62
  .pf-c-chip-group__list-item {
package/components/LabelGroup/label-group.css CHANGED
@@ -30,6 +30,7 @@
30
30
  --pf-c-label-group__textarea--PaddingBottom: 0;
31
31
  --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
32
32
  display: inline-flex;
33
+ align-items: center;
33
34
  }
34
35
  .pf-c-label-group.pf-m-category {
35
36
  padding-top: var(--pf-c-label-group--m-category--PaddingTop);
package/components/LabelGroup/label-group.scss CHANGED
@@ -42,6 +42,7 @@
42
42
  --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
43
43
 
44
44
  display: inline-flex;
45
+ align-items: center;
45
46
 
46
47
  &.pf-m-category {
47
48
  padding-top: var(--pf-c-label-group--m-category--PaddingTop);