@patternfly/react-styles 6.0.0-alpha.16 → 6.0.0-alpha.17

Sign up to get free protection for your applications and to get access to all the features.
Files changed (8) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/components/FormControl/form-control.css +2 -1
  3. package/css/components/TextInputGroup/text-input-group.css +42 -42
  4. package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -3
  5. package/css/docs/components/TextInputGroup/examples/TextInputGroup.d.ts +2 -2
  6. package/css/docs/components/TextInputGroup/examples/TextInputGroup.js +2 -2
  7. package/css/docs/components/TextInputGroup/examples/TextInputGroup.mjs +2 -2
  8. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.0.0-alpha.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.16...@patternfly/react-styles@6.0.0-alpha.17) (2024-03-22)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
6
10
  # 6.0.0-alpha.16 (2024-03-18)
7
11
 
8
12
  **Note:** Version bump only for package @patternfly/react-styles
package/css/components/FormControl/form-control.css CHANGED
@@ -200,6 +200,7 @@
200
200
  .pf-v6-c-form-control > select {
201
201
  --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control__select--PaddingRight);
202
202
  --pf-v6-c-form-control--PaddingLeft: var(--pf-v6-c-form-control__select--PaddingLeft);
203
+ background-color: var(--pf-v6-c-form-control--BackgroundColor);
203
204
  }
204
205
  @-moz-document url-prefix() {
205
206
  .pf-v6-c-form-control > select {
@@ -211,7 +212,7 @@
211
212
  --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--Color);
212
213
  }
213
214
  .pf-v6-c-form-control.pf-m-placeholder > select * {
214
- --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-placeholder--child--Color);
215
+ color: var(--pf-v6-c-form-control--m-placeholder--child--Color);
215
216
  }
216
217
  .pf-v6-c-form-control.pf-m-placeholder > select *:disabled {
217
218
  color: revert;
package/css/components/TextInputGroup/text-input-group.css CHANGED
@@ -1,47 +1,56 @@
1
- .pf-v6-c-text-input-group {
2
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-global--BackgroundColor--100);
3
- --pf-v6-c-text-input-group__text--before--BorderWidth: var(--pf-v6-global--BorderWidth--sm);
4
- --pf-v6-c-text-input-group__text--before--BorderColor: var(--pf-v6-global--BorderColor--300);
5
- --pf-v6-c-text-input-group__text--after--BorderBottomWidth: var(--pf-v6-global--BorderWidth--sm);
6
- --pf-v6-c-text-input-group__text--after--BorderBottomColor: var(--pf-v6-global--BorderColor--200);
7
- --pf-v6-c-text-input-group--hover__text--after--BorderBottomColor: var(--pf-v6-global--primary-color--100);
8
- --pf-v6-c-text-input-group__text--focus-within--after--BorderBottomWidth: var(--pf-v6-global--BorderWidth--md);
9
- --pf-v6-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-v6-global--primary-color--100);
10
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-v6-global--spacer--sm);
11
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-v6-global--spacer--xl);
12
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-v6-global--spacer--xs);
13
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-v6-global--spacer--sm);
14
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingTop: var(--pf-v6-global--spacer--xs);
15
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingRight: var(--pf-v6-global--spacer--xs);
16
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBottom: var(--pf-v6-global--spacer--xs);
17
- --pf-v6-c-text-input-group__text-input--PaddingTop: var(--pf-v6-global--spacer--form-element);
18
- --pf-v6-c-text-input-group__text-input--PaddingRight: var(--pf-v6-global--spacer--sm);
19
- --pf-v6-c-text-input-group__text-input--PaddingBottom: var(--pf-v6-global--spacer--form-element);
20
- --pf-v6-c-text-input-group__text-input--PaddingLeft: var(--pf-v6-global--spacer--sm);
1
+ :where(:root),
2
+ :where(.pf-v6-c-text-input-group) {
3
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
4
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
5
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
6
+ --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
7
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
8
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-t--global--spacer--xs);
9
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-t--global--spacer--xl);
10
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
11
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
12
+ --pf-v6-c-text-input-group--c-chip-group__main--PaddingTop: var(--pf-t--global--spacer--xs);
13
+ --pf-v6-c-text-input-group--c-chip-group__main--PaddingRight: var(--pf-t--global--spacer--xs);
14
+ --pf-v6-c-text-input-group--c-chip-group__main--PaddingBottom: var(--pf-t--global--spacer--xs);
15
+ --pf-v6-c-text-input-group__text-input--PaddingTop: var(--pf-t--global--spacer--sm);
16
+ --pf-v6-c-text-input-group__text-input--PaddingRight: var(--pf-t--global--spacer--sm);
17
+ --pf-v6-c-text-input-group__text-input--PaddingBottom: var(--pf-t--global--spacer--sm);
18
+ --pf-v6-c-text-input-group__text-input--PaddingLeft: var(--pf-t--global--spacer--sm);
21
19
  --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
22
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-v6-global--Color--200);
23
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-global--Color--200);
20
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
21
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
24
22
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
25
- --pf-v6-c-text-input-group__icon--Left: var(--pf-v6-global--spacer--sm);
26
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-global--icon--Color--dark);
23
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
24
+ --pf-v6-c-text-input-group__icon--Left: var(--pf-t--global--spacer--sm);
25
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
27
26
  --pf-v6-c-text-input-group__icon--TranslateY: -50%;
28
- --pf-v6-c-text-input-group__utilities--child--MarginLeft: var(--pf-v6-global--spacer--xs);
29
- --pf-v6-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v6-global--spacer--xs);
30
- --pf-v6-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-v6-global--spacer--xs);
31
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-v6-global--disabled-color--100);
32
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v6-global--disabled-color--300);
27
+ --pf-v6-c-text-input-group__utilities--child--MarginLeft: var(--pf-t--global--spacer--xs);
28
+ --pf-v6-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--xs);
29
+ --pf-v6-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-t--global--spacer--xs);
30
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
31
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
32
+ }
33
+
34
+ .pf-v6-c-text-input-group {
33
35
  position: relative;
34
36
  display: flex;
35
37
  width: 100%;
36
38
  color: var(--pf-v6-c-text-input-group--Color, inherit);
37
39
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
40
+ border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
41
+ }
42
+ .pf-v6-c-text-input-group::before {
43
+ position: absolute;
44
+ inset: 0;
45
+ pointer-events: none;
46
+ content: "";
47
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
48
+ border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
38
49
  }
39
50
  .pf-v6-c-text-input-group:hover {
40
- --pf-v6-c-text-input-group__text--after--BorderBottomColor: var(--pf-v6-c-text-input-group--hover__text--after--BorderBottomColor);
51
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
41
52
  }
42
53
  .pf-v6-c-text-input-group.pf-m-disabled {
43
- --pf-v6-c-text-input-group__text--before--BorderWidth: 0;
44
- --pf-v6-c-text-input-group__text--after--BorderBottomWidth: 0;
45
54
  --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
46
55
  --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
47
56
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
@@ -85,16 +94,6 @@
85
94
  pointer-events: none;
86
95
  content: "";
87
96
  }
88
- .pf-v6-c-text-input-group__text::before {
89
- border: var(--pf-v6-c-text-input-group__text--before--BorderWidth) solid var(--pf-v6-c-text-input-group__text--before--BorderColor);
90
- }
91
- .pf-v6-c-text-input-group__text::after {
92
- border-block-end: var(--pf-v6-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-v6-c-text-input-group__text--after--BorderBottomColor);
93
- }
94
- .pf-v6-c-text-input-group__text:focus-within {
95
- --pf-v6-c-text-input-group__text--after--BorderBottomWidth: var(--pf-v6-c-text-input-group__text--focus-within--after--BorderBottomWidth);
96
- --pf-v6-c-text-input-group__text--after--BorderBottomColor: var(--pf-v6-c-text-input-group__text--focus-within--after--BorderBottomColor);
97
- }
98
97
 
99
98
  .pf-v6-c-text-input-group__icon {
100
99
  position: absolute;
@@ -117,6 +116,7 @@
117
116
  padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingRight);
118
117
  background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
119
118
  border: 0;
119
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
120
120
  }
121
121
  .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
122
122
  grid-area: text-input;
package/css/docs/components/TextInputGroup/examples/TextInputGroup.css CHANGED
@@ -2,11 +2,12 @@
2
2
  position: relative;
3
3
  }
4
4
 
5
- .ws-example-wrapper .pf-v5-c-menu,
6
- .ws-example-wrapper .pf-v5-c-panel {
5
+ .ws-example-wrapper .pf-v6-c-menu,
6
+ .ws-example-wrapper .pf-v6-c-panel {
7
7
  position: absolute;
8
- inset-block-start: 40px;
8
+ inset-block-start: 40px;
9
9
  width: 100%;
10
+ z-index: var(--pf-t--global--Zindex--2xl);
10
11
  }
11
12
 
12
13
  #ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete {
package/css/docs/components/TextInputGroup/examples/TextInputGroup.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import './TextInputGroup.css';
2
2
  declare const _default: {
3
- "v5CMenu": "pf-v5-c-menu",
4
- "v5CPanel": "pf-v5-c-panel",
3
+ "menu": "pf-v6-c-menu",
4
+ "panel": "pf-v6-c-panel",
5
5
  "wsExampleWrapper": "ws-example-wrapper"
6
6
  };
7
7
  export default _default;
package/css/docs/components/TextInputGroup/examples/TextInputGroup.js CHANGED
@@ -2,7 +2,7 @@
2
2
  exports.__esModule = true;
3
3
  require('./TextInputGroup.css');
4
4
  exports.default = {
5
- "v5CMenu": "pf-v5-c-menu",
6
- "v5CPanel": "pf-v5-c-panel",
5
+ "menu": "pf-v6-c-menu",
6
+ "panel": "pf-v6-c-panel",
7
7
  "wsExampleWrapper": "ws-example-wrapper"
8
8
  };
package/css/docs/components/TextInputGroup/examples/TextInputGroup.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import './TextInputGroup.css';
2
2
  export default {
3
- "v5CMenu": "pf-v5-c-menu",
4
- "v5CPanel": "pf-v5-c-panel",
3
+ "menu": "pf-v6-c-menu",
4
+ "panel": "pf-v6-c-panel",
5
5
  "wsExampleWrapper": "ws-example-wrapper"
6
6
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.0.0-alpha.16",
3
+ "version": "6.0.0-alpha.17",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.0.0-alpha.99",
22
+ "@patternfly/patternfly": "6.0.0-alpha.100",
23
23
  "camel-case": "^3.0.0",
24
24
  "css": "^2.2.3",
25
25
  "fs-extra": "^11.1.1",
@@ -29,5 +29,5 @@
29
29
  "typescript": "^4.7.4"
30
30
  },
31
31
  "license": "MIT",
32
- "gitHead": "9b2ae9f766c98ac901ad1344780bf0a560a3f848"
32
+ "gitHead": "3214a349e6c5cced83a174611ce316a2c93b6d57"
33
33
  }