@patternfly/patternfly 6.0.0-alpha.183 → 6.0.0-alpha.185

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 (17) hide show
  1. package/base/patternfly-fonts.css +6 -6
  2. package/base/patternfly-fonts.scss +6 -6
  3. package/base/patternfly-variables.css +2 -18
  4. package/base/tokens/tokens-local.scss +4 -25
  5. package/components/Icon/icon.css +4 -4
  6. package/components/Icon/icon.scss +4 -4
  7. package/components/TextInputGroup/text-input-group.css +67 -15
  8. package/components/TextInputGroup/text-input-group.scss +78 -21
  9. package/components/_index.css +71 -19
  10. package/docs/components/TextInputGroup/examples/TextInputGroup.md +80 -0
  11. package/package.json +1 -1
  12. package/patternfly-base-no-globals.css +8 -24
  13. package/patternfly-base.css +8 -24
  14. package/patternfly-no-globals.css +79 -43
  15. package/patternfly.css +79 -43
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/base/patternfly-fonts.css CHANGED
@@ -1,40 +1,40 @@
1
1
  @font-face {
2
- font-family: RedHatTextVF;
2
+ font-family: "Red Hat Text";
3
3
  font-style: normal;
4
4
  font-weight: 400 500;
5
5
  src: url("./assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
6
6
  font-display: fallback;
7
7
  }
8
8
  @font-face {
9
- font-family: RedHatTextVF;
9
+ font-family: "Red Hat Text";
10
10
  font-style: italic;
11
11
  font-weight: 400 500;
12
12
  src: url("./assets/fonts/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
13
13
  font-display: fallback;
14
14
  }
15
15
  @font-face {
16
- font-family: RedHatDisplayVF;
16
+ font-family: "Red Hat Display";
17
17
  font-style: normal;
18
18
  font-weight: 400 700;
19
19
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
20
20
  font-display: fallback;
21
21
  }
22
22
  @font-face {
23
- font-family: RedHatDisplayVF;
23
+ font-family: "Red Hat Display";
24
24
  font-style: italic;
25
25
  font-weight: 400 700;
26
26
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
27
27
  font-display: fallback;
28
28
  }
29
29
  @font-face {
30
- font-family: RedHatMonoVF;
30
+ font-family: "Red Hat Mono";
31
31
  font-style: normal;
32
32
  font-weight: 400;
33
33
  src: url("./assets/fonts/RedHatMono/RedHatMonoVF.woff2") format("woff2-variations");
34
34
  font-display: fallback;
35
35
  }
36
36
  @font-face {
37
- font-family: RedHatMonoVF;
37
+ font-family: "Red Hat Mono";
38
38
  font-style: italic;
39
39
  font-weight: 400;
40
40
  src: url("./assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2") format("woff2-variations");
package/base/patternfly-fonts.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use '../sass-utilities' as *;
2
2
 
3
3
  @font-face {
4
- font-family: RedHatTextVF;
4
+ font-family: "Red Hat Text";
5
5
  font-style: normal;
6
6
  font-weight: 400 500;
7
7
  src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  @font-face {
12
- font-family: RedHatTextVF;
12
+ font-family: "Red Hat Text";
13
13
  font-style: italic;
14
14
  font-weight: 400 500;
15
15
  src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  @font-face {
20
- font-family: RedHatDisplayVF;
20
+ font-family: "Red Hat Display";
21
21
  font-style: normal;
22
22
  font-weight: 400 700;
23
23
  src: url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
@@ -25,7 +25,7 @@
25
25
  }
26
26
 
27
27
  @font-face {
28
- font-family: RedHatDisplayVF;
28
+ font-family: "Red Hat Display";
29
29
  font-style: italic;
30
30
  font-weight: 400 700;
31
31
  src: url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
@@ -33,7 +33,7 @@
33
33
  }
34
34
 
35
35
  @font-face {
36
- font-family: RedHatMonoVF;
36
+ font-family: "Red Hat Mono";
37
37
  font-style: normal;
38
38
  font-weight: 400;
39
39
  src: url("#{$pf-v6-global--font-path}/RedHatMono/RedHatMonoVF.woff2") format("woff2-variations");
@@ -41,7 +41,7 @@
41
41
  }
42
42
 
43
43
  @font-face {
44
- font-family: RedHatMonoVF;
44
+ font-family: "Red Hat Mono";
45
45
  font-style: italic;
46
46
  font-weight: 400;
47
47
  src: url("#{$pf-v6-global--font-path}/RedHatMono/RedHatMonoVF-Italic.woff2") format("woff2-variations");
package/base/patternfly-variables.css CHANGED
@@ -722,24 +722,8 @@
722
722
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
723
723
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
724
724
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
725
- --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
726
- --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
727
- --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
728
- --pf-t--global--font--line-height--100: 1.3;
729
- --pf-t--global--font--line-height--200: 1.5;
730
- --pf-t--global--font--weight--body--100: 400;
731
- --pf-t--global--font--weight--body--200: 500;
732
- --pf-t--global--font--weight--heading--100: 700;
733
- --pf-t--global--font--weight--heading--200: 700;
734
- --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
735
- --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
736
- --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
737
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
738
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
739
- --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
740
- --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
741
- --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
742
- --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--200);
725
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
726
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
743
727
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
744
728
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
745
729
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
package/base/tokens/tokens-local.scss CHANGED
@@ -1,30 +1,9 @@
1
- // FONT TOKENS
2
- // Manually added from hackathon values
3
- // Currently not being exported from Figma because they are styles rather than variables
4
- // The ability to make font variables is reportedly coming by the end of the year
1
+ // LOCAL TOKENS
5
2
 
6
3
  @mixin pf-v6-tokens {
7
- // Base tokens for fonts
8
- --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
9
- --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
10
- --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
11
- --pf-t--global--font--line-height--100: 1.3;
12
- --pf-t--global--font--line-height--200: 1.5;
13
- --pf-t--global--font--weight--body--100: 400;
14
- --pf-t--global--font--weight--body--200: 500;
15
- --pf-t--global--font--weight--heading--100: 700;
16
- --pf-t--global--font--weight--heading--200: 700;
17
-
18
- // Semantic tokens for fonts
19
- --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
20
- --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
21
- --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
22
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
23
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
24
- --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
25
- --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
26
- --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
27
- --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--200);
4
+ // TODO Missing semantic font tokens not getting exported from Figma properly
5
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
6
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
28
7
 
29
8
  // TODO Maintaining these in addition to the h1-h6 sizes
30
9
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
package/components/Icon/icon.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :where(:root, .pf-v6-c-icon) {
2
- --pf-v6-c-icon--Width: 1em;
3
- --pf-v6-c-icon--Height: 1em;
2
+ --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
3
+ --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
4
4
  --pf-v6-c-icon--m-sm--Width: var(--pf-t--global--icon--size--sm);
5
5
  --pf-v6-c-icon--m-sm--Height: var(--pf-t--global--icon--size--sm);
6
6
  --pf-v6-c-icon--m-md--Width: var(--pf-t--global--icon--size--md);
@@ -34,14 +34,14 @@
34
34
  --pf-v6-c-icon--m-inline--Width: 1em;
35
35
  --pf-v6-c-icon--m-inline--Height: 1em;
36
36
  --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
37
- --pf-v6-c-icon__content--Color: initial;
37
+ --pf-v6-c-icon__content--Color: var(--pf-t--global--icon--color--regular);
38
38
  --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
39
39
  --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
40
40
  --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
41
41
  --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
42
42
  --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
43
43
  --pf-v6-c-icon--m-inline__content--Color: initial;
44
- --pf-v6-c-icon__content--FontSize: 1em;
44
+ --pf-v6-c-icon__content--FontSize: var(--pf-t--global--icon--size--font--body--default);
45
45
  --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
46
46
  --pf-v6-c-icon--m-md__content--FontSize: var(--pf-t--global--icon--size--md);
47
47
  --pf-v6-c-icon--m-lg__content--FontSize: var(--pf-t--global--icon--size--lg);
package/components/Icon/icon.scss CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  :where(:root, .#{$icon}) {
4
4
  // Sizes
5
- --#{$icon}--Width: 1em;
6
- --#{$icon}--Height: 1em;
5
+ --#{$icon}--Width: var(--pf-t--global--icon--size--font--body--default);
6
+ --#{$icon}--Height: var(--pf-t--global--icon--size--font--body--default);
7
7
 
8
8
  // Standalone icon sizes
9
9
  --#{$icon}--m-sm--Width: var(--pf-t--global--icon--size--sm);
@@ -49,7 +49,7 @@
49
49
  --#{$icon}__content--svg--VerticalAlign: -.125em;
50
50
 
51
51
  // Content color
52
- --#{$icon}__content--Color: initial;
52
+ --#{$icon}__content--Color: var(--pf-t--global--icon--color--regular);
53
53
  --#{$icon}__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
54
54
  --#{$icon}__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
55
55
  --#{$icon}__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -58,7 +58,7 @@
58
58
  --#{$icon}--m-inline__content--Color: initial;
59
59
 
60
60
  // Content sizes
61
- --#{$icon}__content--FontSize: 1em;
61
+ --#{$icon}__content--FontSize: var(--pf-t--global--icon--size--font--body--default);;
62
62
 
63
63
  // Standalone content sizes
64
64
  --#{$icon}--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -1,10 +1,19 @@
1
1
  :where(:root, .pf-v6-c-text-input-group) {
2
2
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
3
3
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
4
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
5
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
6
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
4
7
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
8
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
9
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
5
10
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
11
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
12
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
13
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
6
14
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
7
15
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
16
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
8
17
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
9
18
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
10
19
  --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
@@ -25,7 +34,14 @@
25
34
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
26
35
  --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
27
36
  --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
37
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
28
38
  --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
39
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
40
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
41
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--disabled);
42
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
43
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
44
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
29
45
  --pf-v6-c-text-input-group__icon--TranslateY: -50%;
30
46
  --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
31
47
  --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -38,24 +54,60 @@
38
54
  position: relative;
39
55
  display: flex;
40
56
  width: 100%;
57
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
58
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
41
59
  color: var(--pf-v6-c-text-input-group--Color, inherit);
42
60
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
61
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
62
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
63
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
64
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
43
65
  }
44
- .pf-v6-c-text-input-group:hover {
45
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
66
+ .pf-v6-c-text-input-group::before {
67
+ position: absolute;
68
+ inset: 0;
69
+ pointer-events: none;
70
+ content: "";
71
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
72
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
73
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
74
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
75
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
46
76
  }
47
77
  .pf-v6-c-text-input-group.pf-m-disabled {
48
78
  --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
49
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
79
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
80
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
50
81
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
51
82
  pointer-events: none;
52
83
  }
53
84
  .pf-v6-c-text-input-group.pf-m-plain {
54
85
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
55
86
  }
56
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
87
+ .pf-v6-c-text-input-group.pf-m-plain::before {
57
88
  border: 0;
58
89
  }
90
+ .pf-v6-c-text-input-group.pf-m-success {
91
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
92
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
93
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
94
+ }
95
+ .pf-v6-c-text-input-group.pf-m-warning {
96
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
97
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
98
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
99
+ }
100
+ .pf-v6-c-text-input-group.pf-m-error {
101
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
102
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
103
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
104
+ }
105
+ .pf-v6-c-text-input-group:hover {
106
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
107
+ }
108
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
109
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
110
+ }
59
111
 
60
112
  .pf-v6-c-text-input-group__main {
61
113
  display: flex;
@@ -65,7 +117,12 @@
65
117
  min-width: 0;
66
118
  }
67
119
  .pf-v6-c-text-input-group__main.pf-m-icon {
120
+ --pf-v6-c-text-input-group__text--Position: relative;
68
121
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
122
+ display: inline-flex;
123
+ align-items: center;
124
+ justify-content: center;
125
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
69
126
  }
70
127
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
71
128
  padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
@@ -79,22 +136,12 @@
79
136
  }
80
137
 
81
138
  .pf-v6-c-text-input-group__text {
139
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
82
140
  display: inline-grid;
83
141
  flex: 1;
84
142
  grid-template-areas: "text-input";
85
143
  grid-template-columns: 1fr;
86
144
  }
87
- .pf-v6-c-text-input-group__text::before {
88
- position: absolute;
89
- inset: 0;
90
- pointer-events: none;
91
- content: "";
92
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
93
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
94
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
95
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
96
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
97
- }
98
145
 
99
146
  .pf-v6-c-text-input-group__icon {
100
147
  position: absolute;
@@ -103,6 +150,11 @@
103
150
  color: var(--pf-v6-c-text-input-group__icon--Color);
104
151
  transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
105
152
  }
153
+ .pf-v6-c-text-input-group__icon.pf-m-status {
154
+ inset-inline-start: auto;
155
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
156
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
157
+ }
106
158
 
107
159
  .pf-v6-c-text-input-group__text-input {
108
160
  overflow: hidden;
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -3,14 +3,24 @@
3
3
  :where(:root, .#{$text-input-group}) {
4
4
  --#{$text-input-group}--BackgroundColor: var(--pf-t--global--background--color--control--default);
5
5
  --#{$text-input-group}--BorderColor: var(--pf-t--global--border--color--default);
6
+ --#{$text-input-group}--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
7
+ --#{$text-input-group}--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
8
+ --#{$text-input-group}--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
6
9
  --#{$text-input-group}--BorderWidth: var(--pf-t--global--border--width--control--default);
10
+ --#{$text-input-group}__LineHeight: var(--pf-t--global--font--line-height--body);
11
+ --#{$text-input-group}__FontSize: var(--pf-t--global--font--size--body--default);
7
12
 
8
13
  // Border hover
9
14
  --#{$text-input-group}--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
15
+ --#{$text-input-group}--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
16
+ --#{$text-input-group}--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
17
+ --#{$text-input-group}--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
18
+
10
19
 
11
20
  // Main
12
21
  --#{$text-input-group}__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
13
22
  --#{$text-input-group}__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
23
+ --#{$text-input-group}--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
14
24
  --#{$text-input-group}__main--RowGap: var(--pf-t--global--spacer--xs);
15
25
  --#{$text-input-group}__main--ColumnGap: var(--pf-t--global--spacer--xs);
16
26
 
@@ -39,7 +49,14 @@
39
49
 
40
50
  // Icon
41
51
  --#{$text-input-group}__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
52
+ --#{$text-input-group}__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
42
53
  --#{$text-input-group}__icon--Color: var(--pf-t--global--icon--color--regular);
54
+ --#{$text-input-group}--m-disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
55
+ --#{$text-input-group}__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
56
+ --#{$text-input-group}--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--disabled);
57
+ --#{$text-input-group}__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
58
+ --#{$text-input-group}__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
59
+ --#{$text-input-group}__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
43
60
  --#{$text-input-group}__icon--TranslateY: -50%;
44
61
 
45
62
  // Utilities
@@ -56,16 +73,31 @@
56
73
  position: relative;
57
74
  display: flex;
58
75
  width: 100%; // when child of flex layout, take up space
76
+ font-size: var(--#{$text-input-group}__FontSize);
77
+ line-height: var(--#{$text-input-group}__LineHeight);
59
78
  color: var(--#{$text-input-group}--Color, inherit);
60
79
  background-color: var(--#{$text-input-group}--BackgroundColor);
80
+ border-start-start-radius: var(--#{$text-input-group}__text--BorderStartStartRadius);
81
+ border-start-end-radius: var(--#{$text-input-group}__text--BorderStartEndRadius);
82
+ border-end-start-radius: var(--#{$text-input-group}__text--BorderEndStartRadius);
83
+ border-end-end-radius: var(--#{$text-input-group}__text--BorderEndEndRadius);
61
84
 
62
- &:hover {
63
- --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-hover--BorderColor);
85
+ &::before {
86
+ position: absolute;
87
+ inset: 0;
88
+ pointer-events: none;
89
+ content: "";
90
+ border: var(--#{$text-input-group}--BorderWidth) solid var(--#{$text-input-group}--BorderColor);
91
+ border-start-start-radius: var(--#{$text-input-group}__text--BorderStartStartRadius);
92
+ border-start-end-radius: var(--#{$text-input-group}__text--BorderStartEndRadius);
93
+ border-end-start-radius: var(--#{$text-input-group}__text--BorderEndStartRadius);
94
+ border-end-end-radius: var(--#{$text-input-group}__text--BorderEndEndRadius);
64
95
  }
65
96
 
66
97
  &.pf-m-disabled {
67
98
  --#{$text-input-group}--Color: var(--#{$text-input-group}--m-disabled--Color);
68
- --#{$text-input-group}__icon--Color: var(--#{$text-input-group}--m-disabled--Color);
99
+ --#{$text-input-group}__icon--Color: var(--#{$text-input-group}--m-disabled__icon--Color);
100
+ --#{$text-input-group}__icon--m-status--Color: var(--#{$text-input-group}--m-disabled__icon--m-status--Color);
69
101
  --#{$text-input-group}--BackgroundColor: var(--#{$text-input-group}--m-disabled--BackgroundColor);
70
102
 
71
103
  pointer-events: none;
@@ -74,11 +106,35 @@
74
106
  &.pf-m-plain {
75
107
  --#{$text-input-group}--BackgroundColor: transparent;
76
108
 
77
- .#{$text-input-group}__text {
78
- &::before {
79
- border: 0;
80
- }
81
- }
109
+ &::before {
110
+ border: 0;
111
+ }
112
+ }
113
+
114
+ &.pf-m-success {
115
+ --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-success--BorderColor);
116
+ --#{$text-input-group}--m-hover--BorderColor: var(--#{$text-input-group}--m-hover--m-success--BorderColor);
117
+ --#{$text-input-group}__icon--m-status--Color: var(--#{$text-input-group}__main--m-success__icon--m-status--Color);
118
+ }
119
+
120
+ &.pf-m-warning {
121
+ --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-warning--BorderColor);
122
+ --#{$text-input-group}--m-hover--BorderColor: var(--#{$text-input-group}--m-hover--m-warning--BorderColor);
123
+ --#{$text-input-group}__icon--m-status--Color: var(--#{$text-input-group}__main--m-warning__icon--m-status--Color);
124
+ }
125
+
126
+ &.pf-m-error {
127
+ --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-error--BorderColor);
128
+ --#{$text-input-group}--m-hover--BorderColor: var(--#{$text-input-group}--m-hover--m-error--BorderColor);
129
+ --#{$text-input-group}__icon--m-status--Color: var(--#{$text-input-group}__main--m-error__icon--m-status--Color);
130
+ }
131
+
132
+ &:hover {
133
+ --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-hover--BorderColor);
134
+ }
135
+
136
+ &:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
137
+ --#{$text-input-group}__text-input--PaddingInlineEnd: var(--#{$text-input-group}--status__text-input--PaddingInlineEnd);
82
138
  }
83
139
  }
84
140
 
@@ -88,9 +144,15 @@
88
144
  flex-wrap: wrap;
89
145
  gap: var(--#{$text-input-group}__main--RowGap) var(--#{$text-input-group}__main--ColumnGap);
90
146
  min-width: 0;
91
-
147
+
92
148
  &.pf-m-icon {
149
+ --#{$text-input-group}__text--Position: relative;
93
150
  --#{$text-input-group}__text-input--PaddingInlineStart: var(--#{$text-input-group}__main--m-icon__text-input--PaddingInlineStart);
151
+
152
+ display: inline-flex;
153
+ align-items: center;
154
+ justify-content: center;
155
+ min-width: calc(var(--#{$text-input-group}__LineHeight) * var(--#{$text-input-group}__FontSize));
94
156
  }
95
157
 
96
158
  > :first-child:not(.#{$text-input-group}__text) {
@@ -107,22 +169,11 @@
107
169
  }
108
170
 
109
171
  .#{$text-input-group}__text {
172
+ position: var(--#{$text-input-group}__text--Position, revert);
110
173
  display: inline-grid;
111
174
  flex: 1;
112
175
  grid-template-areas: "text-input";
113
176
  grid-template-columns: 1fr;
114
-
115
- &::before {
116
- position: absolute;
117
- inset: 0;
118
- pointer-events: none;
119
- content: "";
120
- border: var(--#{$text-input-group}--BorderWidth) solid var(--#{$text-input-group}--BorderColor);
121
- border-start-start-radius: var(--#{$text-input-group}__text--BorderStartStartRadius);
122
- border-start-end-radius: var(--#{$text-input-group}__text--BorderStartEndRadius);
123
- border-end-start-radius: var(--#{$text-input-group}__text--BorderEndStartRadius);
124
- border-end-end-radius: var(--#{$text-input-group}__text--BorderEndEndRadius);
125
- }
126
177
  }
127
178
 
128
179
  .#{$text-input-group}__icon {
@@ -131,6 +182,12 @@
131
182
  inset-inline-start: var(--#{$text-input-group}__icon--InsetInlineStart);
132
183
  color: var(--#{$text-input-group}__icon--Color);
133
184
  transform: translateY(var(--#{$text-input-group}__icon--TranslateY));
185
+
186
+ &.pf-m-status {
187
+ inset-inline-start: auto;
188
+ inset-inline-end: var(--#{$text-input-group}__icon--m-status--InsetInlineEnd);
189
+ color: var(--#{$text-input-group}__icon--m-status--Color);
190
+ }
134
191
  }
135
192
 
136
193
  .#{$text-input-group}__text-input {