@patternfly/patternfly 5.0.0-alpha.31 → 5.0.0-alpha.32

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 (27) hide show
  1. package/components/InputGroup/input-group.css +61 -85
  2. package/components/InputGroup/input-group.scss +55 -61
  3. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  4. package/components/OptionsMenu/options-menu.css +0 -5
  5. package/components/OptionsMenu/options-menu.scss +0 -6
  6. package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  7. package/docs/components/DatePicker/examples/DatePicker.md +115 -91
  8. package/docs/components/FileUpload/examples/FileUpload.md +127 -91
  9. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  10. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  11. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  12. package/docs/components/Slider/examples/Slider.md +60 -38
  13. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  14. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  15. package/docs/demos/DataList/examples/DataList.md +158 -150
  16. package/docs/demos/Form/examples/BasicForms.md +77 -66
  17. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  18. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  19. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +103 -121
  20. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -232
  21. package/docs/demos/Table/examples/Table.md +950 -902
  22. package/docs/demos/Toolbar/examples/Toolbar.md +313 -294
  23. package/package.json +1 -1
  24. package/patternfly-no-reset.css +60 -79
  25. package/patternfly.css +60 -79
  26. package/patternfly.min.css +1 -1
  27. package/patternfly.min.css.map +1 -1
package/components/InputGroup/input-group.css CHANGED
@@ -1,109 +1,85 @@
1
1
  .pf-c-input-group {
2
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
3
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
4
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
5
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
6
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
7
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
8
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9
- }
10
-
11
- .pf-c-input-group {
12
- --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
13
2
  --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
3
+ --pf-c-input-group__item--offset: var(--pf-global--BorderWidth--sm);
4
+ --pf-c-input-group__item--MarginLeft: calc(var(--pf-c-input-group__item--offset) * -1);
5
+ --pf-c-input-group__item--BorderWidth--base: var(--pf-c-input-group__item--offset);
6
+ --pf-c-input-group__item--BorderColor--base: var(--pf-global--BorderColor--300);
7
+ --pf-c-input-group__item--BorderColor--accent: var(--pf-global--BorderColor--200);
8
+ --pf-c-input-group__item--BackgroundColor: transparent;
9
+ --pf-c-input-group__item--m-box--PaddingRight: var(--pf-global--spacer--sm);
10
+ --pf-c-input-group__item--m-box--PaddingLeft: var(--pf-global--spacer--sm);
11
+ --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
12
+ --pf-c-input-group__item--m-box--BorderWidth: var(--pf-c-input-group__item--offset);
13
+ --pf-c-input-group__item--m-box--BorderTopColor: var(--pf-c-input-group__item--BorderColor--base);
14
+ --pf-c-input-group__item--m-box--BorderRightColor: var(--pf-c-input-group__item--BorderColor--base);
15
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--BorderColor--accent);
16
+ --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderColor--base);
17
+ --pf-c-input-group__item--m-plain--BackgroundColor: transparent;
14
18
  --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
15
- --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
16
- --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
17
19
  --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
18
- --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
19
- --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
20
- --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
21
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
22
- --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
23
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
24
- --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
25
- --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
26
- --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
27
- --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
20
+ --pf-c-input-group__item--m-disabled__text--Color: var(--pf-global--disabled-color--100);
21
+ --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
22
+ --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
28
23
  --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
29
24
  --pf-c-input-group--c-form-control--MarginRight: 0;
30
- color: var(--pf-global--Color--100);
31
25
  display: flex;
32
26
  width: 100%;
33
- background-color: var(--pf-c-input-group--BackgroundColor);
34
- }
35
- .pf-c-input-group.pf-m-plain {
36
- --pf-c-input-group--BackgroundColor: transparent;
37
- }
38
- .pf-c-input-group > * + * {
39
- margin-left: -1px;
40
27
  }
41
- .pf-c-input-group > :focus,
42
- .pf-c-input-group > :focus-within {
43
- z-index: var(--pf-c-input-group--child--ZIndex);
44
- }
45
- .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
46
- margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
47
- }
48
- .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
49
- .pf-c-input-group textarea {
50
- flex: 2;
51
- min-width: 0;
52
- }
53
- .pf-c-input-group textarea {
54
- min-height: var(--pf-c-input-group__textarea--MinHeight);
28
+
29
+ .pf-c-input-group__item {
30
+ position: relative;
31
+ display: flex;
32
+ min-width: var(--pf-c-input-group__item--MinWidth, revert);
33
+ max-width: var(--pf-c-input-group__item--MaxWidth, revert);
34
+ background-color: var(--pf-c-input-group__item--BackgroundColor);
35
+ border-color: var(--pf-c-input-group__item--m-box--BorderTopColor) var(--pf-c-input-group__item--m-box--BorderRightColor) var(--pf-c-input-group__item--m-box--BorderBottomColor) var(--pf-c-input-group__item--m-box--BorderLeftColor);
36
+ }
37
+ .pf-c-input-group__item:where(:not(:first-child)) {
38
+ margin-left: var(--pf-c-input-group__item--MarginLeft);
39
+ }
40
+ .pf-c-input-group__item.pf-m-box {
41
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-box--BackgroundColor);
42
+ padding-right: var(--pf-c-input-group__item--m-box--PaddingRight);
43
+ padding-left: var(--pf-c-input-group__item--m-box--PaddingLeft);
44
+ border: var(--pf-c-input-group__item--m-box--BorderWidth) solid;
45
+ border-color: var(--pf-c-input-group__item--m-box--BorderTopColor) var(--pf-c-input-group__item--m-box--BorderRightColor) var(--pf-c-input-group__item--m-box--BorderBottomColor) var(--pf-c-input-group__item--m-box--BorderLeftColor);
46
+ }
47
+ .pf-c-input-group__item.pf-m-plain {
48
+ --pf-c-input-group__item--MarginLeft: 0;
49
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-plain--BackgroundColor);
50
+ border: none;
51
+ }
52
+ .pf-c-input-group__item.pf-m-disabled {
53
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-disabled--BackgroundColor);
54
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--m-disabled--BorderBottomColor);
55
+ --pf-c-input-group__text--Color: var(--pf-c-input-group__item--m-disabled__text--Color);
56
+ }
57
+ .pf-c-input-group__item.pf-m-fill {
58
+ flex-grow: 1;
55
59
  }
56
60
 
57
61
  .pf-c-input-group__text {
58
- display: flex;
59
- align-items: center;
60
- padding-right: var(--pf-c-input-group__text--PaddingRight);
61
- padding-left: var(--pf-c-input-group__text--PaddingLeft);
62
+ align-self: center;
62
63
  font-size: var(--pf-c-input-group__text--FontSize);
63
64
  color: var(--pf-c-input-group__text--Color);
64
- text-align: center;
65
- background-color: var(--pf-c-input-group__text--BackgroundColor);
66
- border: var(--pf-c-input-group__text--BorderWidth) solid;
67
- border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
68
65
  }
69
66
  label.pf-c-input-group__text {
70
67
  cursor: pointer;
71
68
  }
72
69
 
73
- .pf-c-input-group__text.pf-m-plain {
74
- --pf-c-input-group__text--BorderWidth: 0;
75
- margin-left: 0;
76
- }
77
- .pf-c-input-group__text.pf-m-disabled {
78
- --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
79
- --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
80
- --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
81
- }
82
-
83
70
  :where(.pf-theme-dark) .pf-c-input-group {
84
- --pf-c-input-group--BackgroundColor: transparent;
85
- --pf-c-input-group__text--BorderTopColor: transparent;
86
- --pf-c-input-group__text--BorderRightColor: transparent;
87
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
88
- --pf-c-input-group__text--BorderLeftColor: transparent;
89
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
71
+ --pf-c-input-group__item--BorderLeftWidth: var(--pf-c-input-group__item--BorderWidth--base);
72
+ --pf-c-input-group__item--BorderLeftColor: var(--pf-global--palette--black-700);
73
+ --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--400);
74
+ --pf-c-input-group__item--m-box--BorderTopColor: transparent;
75
+ --pf-c-input-group__item--m-box--BorderRightColor: transparent;
76
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-global--BorderColor--400);
77
+ --pf-c-input-group__item--m-box--BorderLeftColor: transparent;
78
+ --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
79
+ --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
90
80
  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
91
- --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
92
81
  }
93
82
  :where(.pf-theme-dark) .pf-c-input-group > * + * {
94
- margin-left: 0;
95
- border-left: 1px solid var(--pf-global--palette--black-700);
96
- }
97
- :where(.pf-theme-dark) .pf-c-input-group__text {
98
- --pf-c-input-group__text--BorderTopColor: transparent;
99
- --pf-c-input-group__text--BorderRightColor: transparent;
100
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
101
- --pf-c-input-group__text--BorderLeftColor: transparent;
102
- }
103
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
104
- --pf-c-input-group__text--BackgroundColor: transparent;
105
- }
106
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-disabled {
107
- --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
108
- color: var(--pf-c-input-group__text--m-disabled--Color);
83
+ --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderLeftColor);
84
+ border-left: var(--pf-c-input-group__item--BorderLeftWidth) solid var(--pf-c-input-group__item--BorderLeftColor);
109
85
  }
package/components/InputGroup/input-group.scss CHANGED
@@ -1,98 +1,92 @@
1
1
  .pf-c-input-group {
2
2
  // Input group
3
- --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
4
3
  --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
5
4
 
5
+ // Input group item
6
+ --pf-c-input-group__item--offset: var(--pf-global--BorderWidth--sm);
7
+ --pf-c-input-group__item--MarginLeft: calc(var(--pf-c-input-group__item--offset) * -1);
8
+ --pf-c-input-group__item--BorderWidth--base: var(--pf-c-input-group__item--offset);
9
+ --pf-c-input-group__item--BorderColor--base: var(--pf-global--BorderColor--300);
10
+ --pf-c-input-group__item--BorderColor--accent: var(--pf-global--BorderColor--200);
11
+ --pf-c-input-group__item--BackgroundColor: transparent;
12
+
13
+ // Input group item, box variant
14
+ --pf-c-input-group__item--m-box--PaddingRight: var(--pf-global--spacer--sm);
15
+ --pf-c-input-group__item--m-box--PaddingLeft: var(--pf-global--spacer--sm);
16
+ --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
17
+ --pf-c-input-group__item--m-box--BorderWidth: var(--pf-c-input-group__item--offset);
18
+ --pf-c-input-group__item--m-box--BorderTopColor: var(--pf-c-input-group__item--BorderColor--base);
19
+ --pf-c-input-group__item--m-box--BorderRightColor: var(--pf-c-input-group__item--BorderColor--base);
20
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--BorderColor--accent);
21
+ --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderColor--base);
22
+
23
+ // Input group item, plain variant
24
+ --pf-c-input-group__item--m-plain--BackgroundColor: transparent;
25
+
6
26
  // Input group text
7
27
  --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
8
- --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
9
- --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
10
28
  --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
11
- --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
12
- --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
13
- --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
14
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
15
- --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
16
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
17
- --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
18
- --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
19
- --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
20
- --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
29
+
30
+ // Input group text, disabled variant
31
+ --pf-c-input-group__item--m-disabled__text--Color: var(--pf-global--disabled-color--100);
32
+ --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
33
+ --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
21
34
 
22
35
  // Form control
23
36
  --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
24
37
  --pf-c-input-group--c-form-control--MarginRight: 0;
25
38
 
26
- // This component always needs to be light
27
- @include pf-t-light;
28
-
29
39
  display: flex;
30
40
  width: 100%;
31
- background-color: var(--pf-c-input-group--BackgroundColor);
41
+ }
32
42
 
33
- &.pf-m-plain {
34
- --pf-c-input-group--BackgroundColor: transparent; // make default at breaking change
35
- }
43
+ .pf-c-input-group__item {
44
+ position: relative; // stack items without explicit z-index
45
+ display: flex;
46
+ min-width: var(--pf-c-input-group__item--MinWidth, revert);
47
+ max-width: var(--pf-c-input-group__item--MaxWidth, revert);
48
+ background-color: var(--pf-c-input-group__item--BackgroundColor);
49
+ border-color: var(--pf-c-input-group__item--m-box--BorderTopColor) var(--pf-c-input-group__item--m-box--BorderRightColor) var(--pf-c-input-group__item--m-box--BorderBottomColor) var(--pf-c-input-group__item--m-box--BorderLeftColor);
36
50
 
37
- // stylelint-disable
38
- > * + * {
39
- margin-left: -1px;
51
+ &:where(:not(:first-child)) {
52
+ margin-left: var(--pf-c-input-group__item--MarginLeft);
40
53
  }
41
- // stylelint-enable
42
54
 
43
- > :focus,
44
- > :focus-within {
45
- z-index: var(--pf-c-input-group--child--ZIndex);
55
+ &.pf-m-box {
56
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-box--BackgroundColor);
57
+
58
+ padding-right: var(--pf-c-input-group__item--m-box--PaddingRight);
59
+ padding-left: var(--pf-c-input-group__item--m-box--PaddingLeft);
60
+ border: var(--pf-c-input-group__item--m-box--BorderWidth) solid;
61
+ border-color: var(--pf-c-input-group__item--m-box--BorderTopColor) var(--pf-c-input-group__item--m-box--BorderRightColor) var(--pf-c-input-group__item--m-box--BorderBottomColor) var(--pf-c-input-group__item--m-box--BorderLeftColor);
46
62
  }
47
63
 
48
- .pf-c-form-control {
49
- &[aria-invalid="true"] {
50
- &:not(:last-child) {
51
- margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
52
- }
53
- }
64
+ &.pf-m-plain {
65
+ --pf-c-input-group__item--MarginLeft: 0;
66
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-plain--BackgroundColor);
67
+
68
+ border: none;
54
69
  }
55
70
 
56
- // stylelint-disable selector-not-notation
57
- // update to single :not() in breaking change
58
- input:not([type="checkbox"]):not([type="radio"]),
59
- textarea {
60
- flex: 2;
61
- min-width: 0;
71
+ &.pf-m-disabled {
72
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-disabled--BackgroundColor);
73
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--m-disabled--BorderBottomColor);
74
+ --pf-c-input-group__text--Color: var(--pf-c-input-group__item--m-disabled__text--Color);
62
75
  }
63
76
 
64
- textarea {
65
- min-height: var(--pf-c-input-group__textarea--MinHeight);
77
+ &.pf-m-fill {
78
+ flex-grow: 1;
66
79
  }
67
80
  }
68
81
 
69
82
  .pf-c-input-group__text {
70
- display: flex;
71
- align-items: center;
72
- padding-right: var(--pf-c-input-group__text--PaddingRight);
73
- padding-left: var(--pf-c-input-group__text--PaddingLeft);
83
+ align-self: center;
74
84
  font-size: var(--pf-c-input-group__text--FontSize);
75
85
  color: var(--pf-c-input-group__text--Color);
76
- text-align: center;
77
- background-color: var(--pf-c-input-group__text--BackgroundColor);
78
- border: var(--pf-c-input-group__text--BorderWidth) solid;
79
- border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
80
86
 
81
87
  @at-root label#{&} {
82
88
  cursor: pointer;
83
89
  }
84
-
85
- &.pf-m-plain {
86
- --pf-c-input-group__text--BorderWidth: 0;
87
-
88
- margin-left: 0;
89
- }
90
-
91
- &.pf-m-disabled {
92
- --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
93
- --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
94
- --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
95
- }
96
90
  }
97
91
 
98
92
  // stylelint-disable no-invalid-position-at-import-rule
package/components/InputGroup/themes/dark/input-group.scss CHANGED
@@ -2,35 +2,21 @@
2
2
 
3
3
  @mixin pf-theme-dark-input-group() {
4
4
  .pf-c-input-group {
5
- --pf-c-input-group--BackgroundColor: transparent;
6
- --pf-c-input-group__text--BorderTopColor: transparent;
7
- --pf-c-input-group__text--BorderRightColor: transparent;
8
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9
- --pf-c-input-group__text--BorderLeftColor: transparent;
10
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
5
+ --pf-c-input-group__item--BorderLeftWidth: var(--pf-c-input-group__item--BorderWidth--base);
6
+ --pf-c-input-group__item--BorderLeftColor: var(--pf-global--palette--black-700);
7
+ --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--400);
8
+ --pf-c-input-group__item--m-box--BorderTopColor: transparent;
9
+ --pf-c-input-group__item--m-box--BorderRightColor: transparent;
10
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-global--BorderColor--400);
11
+ --pf-c-input-group__item--m-box--BorderLeftColor: transparent;
12
+ --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
13
+ --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
11
14
  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
12
- --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
13
15
 
14
16
  > * + * {
15
- margin-left: 0;
16
- border-left: 1px solid var(--pf-global--palette--black-700); // global var
17
- }
18
- }
19
-
20
- .pf-c-input-group__text {
21
- --pf-c-input-group__text--BorderTopColor: transparent;
22
- --pf-c-input-group__text--BorderRightColor: transparent;
23
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
24
- --pf-c-input-group__text--BorderLeftColor: transparent;
25
-
26
- &.pf-m-plain {
27
- --pf-c-input-group__text--BackgroundColor: transparent;
28
- }
29
-
30
- &.pf-m-disabled {
31
- --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
17
+ --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderLeftColor);
32
18
 
33
- color: var(--pf-c-input-group__text--m-disabled--Color);
19
+ border-left: var(--pf-c-input-group__item--BorderLeftWidth) solid var(--pf-c-input-group__item--BorderLeftColor);
34
20
  }
35
21
  }
36
22
  }
package/components/OptionsMenu/options-menu.css CHANGED
@@ -5,7 +5,6 @@
5
5
  --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
6
6
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
7
7
  --pf-c-options-menu__toggle--MinWidth: 0;
8
- --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
9
8
  --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
10
9
  --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
11
10
  --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -113,7 +112,6 @@
113
112
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
114
113
  max-width: 100%;
115
114
  padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
116
- line-height: var(--pf-c-options-menu__toggle--LineHeight);
117
115
  color: var(--pf-c-options-menu__toggle--Color);
118
116
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
119
117
  border: none;
@@ -131,9 +129,6 @@
131
129
  display: inline-block;
132
130
  color: var(--pf-c-options-menu__toggle--m-plain--Color);
133
131
  }
134
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
135
- line-height: var(--pf-c-options-menu__toggle--LineHeight);
136
- }
137
132
  .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
138
133
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
139
134
  --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);
package/components/OptionsMenu/options-menu.scss CHANGED
@@ -6,7 +6,6 @@
6
6
  --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
7
7
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
8
8
  --pf-c-options-menu__toggle--MinWidth: 0;
9
- --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
10
9
  --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
11
10
  --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
12
11
  --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -142,7 +141,6 @@
142
141
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
143
142
  max-width: 100%;
144
143
  padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
145
- line-height: var(--pf-c-options-menu__toggle--LineHeight);
146
144
  color: var(--pf-c-options-menu__toggle--Color);
147
145
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
148
146
  border: none;
@@ -164,10 +162,6 @@
164
162
 
165
163
  display: inline-block;
166
164
  color: var(--pf-c-options-menu__toggle--m-plain--Color);
167
-
168
- .pf-c-options-menu__toggle-button-icon {
169
- line-height: var(--pf-c-options-menu__toggle--LineHeight);
170
- }
171
165
  }
172
166
 
173
167
  &:hover,