@patternfly/patternfly 4.174.0 → 4.175.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.
- package/components/TextInputGroup/text-input-group.css +4 -0
- package/components/TextInputGroup/text-input-group.scss +5 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -1
- package/package.json +1 -1
- package/patternfly-no-reset.css +4 -0
- package/patternfly.css +4 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
--pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
|
|
16
16
|
--pf-c-text-input-group__text-input--MinWidth: 12ch;
|
|
17
17
|
--pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
|
|
18
|
+
--pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
|
|
18
19
|
--pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
|
|
19
20
|
--pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
|
|
20
21
|
--pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
|
|
@@ -121,6 +122,9 @@
|
|
|
121
122
|
.pf-c-text-input-group__text-input.pf-m-hint {
|
|
122
123
|
color: var(--pf-c-text-input-group__text-input--m-hint--Color);
|
|
123
124
|
}
|
|
125
|
+
.pf-c-text-input-group__text-input::placeholder {
|
|
126
|
+
color: var(--pf-c-text-input-group--placeholder--Color);
|
|
127
|
+
}
|
|
124
128
|
|
|
125
129
|
.pf-c-text-input-group__utilities {
|
|
126
130
|
display: flex;
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
--pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
|
|
25
25
|
--pf-c-text-input-group__text-input--MinWidth: 12ch;
|
|
26
26
|
--pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200); // matches placeholder text color
|
|
27
|
+
--pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
|
|
27
28
|
|
|
28
29
|
// Icon
|
|
29
30
|
--pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
|
|
@@ -157,6 +158,10 @@
|
|
|
157
158
|
&.pf-m-hint {
|
|
158
159
|
color: var(--pf-c-text-input-group__text-input--m-hint--Color);
|
|
159
160
|
}
|
|
161
|
+
|
|
162
|
+
&::placeholder {
|
|
163
|
+
color: var(--pf-c-text-input-group--placeholder--Color);
|
|
164
|
+
}
|
|
160
165
|
}
|
|
161
166
|
|
|
162
167
|
.pf-c-text-input-group__utilities {
|
|
@@ -42,7 +42,7 @@ cssPrefix: pf-c-text-input-group
|
|
|
42
42
|
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
### Utilities and icon
|
|
45
|
+
### Utilities and icon with placeholder text
|
|
46
46
|
|
|
47
47
|
```html
|
|
48
48
|
<div class="pf-c-text-input-group">
|
|
@@ -56,6 +56,7 @@ cssPrefix: pf-c-text-input-group
|
|
|
56
56
|
type="text"
|
|
57
57
|
value
|
|
58
58
|
aria-label="Type to filter"
|
|
59
|
+
placeholder="placeholder"
|
|
59
60
|
/>
|
|
60
61
|
</span>
|
|
61
62
|
</div>
|
package/package.json
CHANGED
package/patternfly-no-reset.css
CHANGED
|
@@ -26743,6 +26743,7 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26743
26743
|
--pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
|
|
26744
26744
|
--pf-c-text-input-group__text-input--MinWidth: 12ch;
|
|
26745
26745
|
--pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
|
|
26746
|
+
--pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
|
|
26746
26747
|
--pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
|
|
26747
26748
|
--pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
|
|
26748
26749
|
--pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
|
|
@@ -26849,6 +26850,9 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26849
26850
|
.pf-c-text-input-group__text-input.pf-m-hint {
|
|
26850
26851
|
color: var(--pf-c-text-input-group__text-input--m-hint--Color);
|
|
26851
26852
|
}
|
|
26853
|
+
.pf-c-text-input-group__text-input::placeholder {
|
|
26854
|
+
color: var(--pf-c-text-input-group--placeholder--Color);
|
|
26855
|
+
}
|
|
26852
26856
|
|
|
26853
26857
|
.pf-c-text-input-group__utilities {
|
|
26854
26858
|
display: flex;
|
package/patternfly.css
CHANGED
|
@@ -26865,6 +26865,7 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26865
26865
|
--pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
|
|
26866
26866
|
--pf-c-text-input-group__text-input--MinWidth: 12ch;
|
|
26867
26867
|
--pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
|
|
26868
|
+
--pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
|
|
26868
26869
|
--pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
|
|
26869
26870
|
--pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
|
|
26870
26871
|
--pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
|
|
@@ -26971,6 +26972,9 @@ svg.pf-c-spinner.pf-m-xl {
|
|
|
26971
26972
|
.pf-c-text-input-group__text-input.pf-m-hint {
|
|
26972
26973
|
color: var(--pf-c-text-input-group__text-input--m-hint--Color);
|
|
26973
26974
|
}
|
|
26975
|
+
.pf-c-text-input-group__text-input::placeholder {
|
|
26976
|
+
color: var(--pf-c-text-input-group--placeholder--Color);
|
|
26977
|
+
}
|
|
26974
26978
|
|
|
26975
26979
|
.pf-c-text-input-group__utilities {
|
|
26976
26980
|
display: flex;
|