@atlaskit/textfield 8.0.11 → 8.0.12
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/CHANGELOG.md +7 -0
- package/dist/cjs/text-field.compiled.css +5 -3
- package/dist/cjs/text-field.js +5 -6
- package/dist/es2019/text-field.compiled.css +5 -3
- package/dist/es2019/text-field.js +2 -2
- package/dist/esm/text-field.compiled.css +5 -3
- package/dist/esm/text-field.js +5 -6
- package/offerings.json +37 -0
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/textfield
|
|
2
2
|
|
|
3
|
+
## 8.0.12
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`f3494b0a49dbc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f3494b0a49dbc) -
|
|
8
|
+
Internal changes to use new shape tokens. No visual changes.
|
|
9
|
+
|
|
3
10
|
## 8.0.11
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
3
|
._19itidpf{border:0}
|
|
4
|
-
.
|
|
4
|
+
._1tnqfajl._1tnqfajl{border-radius:var(--ds-radius-small,3px)}
|
|
5
5
|
._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
|
|
6
6
|
._189ee4h9{border-width:var(--ds-border-width,1px)}
|
|
7
7
|
._1dqoglyw{border-style:none}
|
|
8
8
|
._1dqonqa1{border-style:solid}
|
|
9
|
-
._1h6d1bqt
|
|
9
|
+
._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
|
|
10
10
|
._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
|
|
11
11
|
._1h6d1j28{border-color:transparent}
|
|
12
12
|
._1h6dsyzs{border-color:var(--ds-background-disabled,#091e4208)}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
._14jiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}
|
|
22
22
|
._16hg1j28._16hg1j28{background-color:transparent}
|
|
23
23
|
._16jlkb7n{flex-grow:1}
|
|
24
|
-
.
|
|
24
|
+
._16qsizbr{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
|
|
25
25
|
._18m915vq{overflow-y:hidden}
|
|
26
26
|
._1bah1yb4{justify-content:space-between}
|
|
27
27
|
._1bsb1osq{width:100%}
|
|
@@ -71,8 +71,10 @@
|
|
|
71
71
|
._vchhusvi{box-sizing:border-box}
|
|
72
72
|
._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
|
|
73
73
|
._y4tiidpf{padding-inline-end:0}
|
|
74
|
+
._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
|
|
74
75
|
._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
|
|
75
76
|
._4cvx1j28:hover{border-color:transparent}
|
|
77
|
+
._1dbzizbr:hover{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
|
|
76
78
|
._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
|
|
77
79
|
._irr31j28:hover{background-color:transparent}
|
|
78
80
|
@media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._msj6gir2:has(input:focus){border-color:Highlight}}
|
package/dist/cjs/text-field.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* text-field.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* text-field.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -156,12 +156,11 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
156
156
|
"data-ds--text-field--container": true,
|
|
157
157
|
"data-testid": testId && "".concat(testId, "-container"),
|
|
158
158
|
onMouseDown: handleOnMouseDown,
|
|
159
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
160
|
-
className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnq1l7b", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qs13x5 _1dbz13x5 _uk1sr01l", className]),
|
|
161
159
|
style: {
|
|
162
|
-
maxWidth: "".concat(getMaxWidth(width))
|
|
163
|
-
|
|
164
|
-
|
|
160
|
+
maxWidth: "".concat(getMaxWidth(width))
|
|
161
|
+
},
|
|
162
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
163
|
+
className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnqfajl", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qsizbr _1dbzizbr _uk1sr01l", className])
|
|
165
164
|
}, elemBeforeInput, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, spreadProps, {
|
|
166
165
|
"aria-invalid": isInvalid ? isInvalid : undefined
|
|
167
166
|
// TODO: When removing legacy theming fix this.
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
3
|
._19itidpf{border:0}
|
|
4
|
-
.
|
|
4
|
+
._1tnqfajl._1tnqfajl{border-radius:var(--ds-radius-small,3px)}
|
|
5
5
|
._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
|
|
6
6
|
._189ee4h9{border-width:var(--ds-border-width,1px)}
|
|
7
7
|
._1dqoglyw{border-style:none}
|
|
8
8
|
._1dqonqa1{border-style:solid}
|
|
9
|
-
._1h6d1bqt
|
|
9
|
+
._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
|
|
10
10
|
._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
|
|
11
11
|
._1h6d1j28{border-color:transparent}
|
|
12
12
|
._1h6dsyzs{border-color:var(--ds-background-disabled,#091e4208)}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
._14jiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}
|
|
22
22
|
._16hg1j28._16hg1j28{background-color:transparent}
|
|
23
23
|
._16jlkb7n{flex-grow:1}
|
|
24
|
-
._16qsizbr
|
|
24
|
+
._16qsizbr{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
|
|
25
25
|
._18m915vq{overflow-y:hidden}
|
|
26
26
|
._1bah1yb4{justify-content:space-between}
|
|
27
27
|
._1bsb1osq{width:100%}
|
|
@@ -71,8 +71,10 @@
|
|
|
71
71
|
._vchhusvi{box-sizing:border-box}
|
|
72
72
|
._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
|
|
73
73
|
._y4tiidpf{padding-inline-end:0}
|
|
74
|
+
._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
|
|
74
75
|
._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
|
|
75
76
|
._4cvx1j28:hover{border-color:transparent}
|
|
77
|
+
._1dbzizbr:hover{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
|
|
76
78
|
._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
|
|
77
79
|
._irr31j28:hover{background-color:transparent}
|
|
78
80
|
@media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._msj6gir2:has(input:focus){border-color:Highlight}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* text-field.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* text-field.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import "./text-field.compiled.css";
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -140,7 +140,7 @@ const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
140
140
|
maxWidth: `${getMaxWidth(width)}`
|
|
141
141
|
},
|
|
142
142
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
143
|
-
className: ax(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna
|
|
143
|
+
className: ax(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnqfajl", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qsizbr _1dbzizbr _uk1sr01l", className])
|
|
144
144
|
}, elemBeforeInput, /*#__PURE__*/React.createElement("input", _extends({}, spreadProps, {
|
|
145
145
|
"aria-invalid": isInvalid ? isInvalid : undefined
|
|
146
146
|
// TODO: When removing legacy theming fix this.
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
3
|
._19itidpf{border:0}
|
|
4
|
-
.
|
|
4
|
+
._1tnqfajl._1tnqfajl{border-radius:var(--ds-radius-small,3px)}
|
|
5
5
|
._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
|
|
6
6
|
._189ee4h9{border-width:var(--ds-border-width,1px)}
|
|
7
7
|
._1dqoglyw{border-style:none}
|
|
8
8
|
._1dqonqa1{border-style:solid}
|
|
9
|
-
._1h6d1bqt
|
|
9
|
+
._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
|
|
10
10
|
._1h6d1elr{border-color:var(--ds-border-input,#8590a2)}
|
|
11
11
|
._1h6d1j28{border-color:transparent}
|
|
12
12
|
._1h6dsyzs{border-color:var(--ds-background-disabled,#091e4208)}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
._14jiu2gc:not([data-compact]){padding-block-end:var(--ds-space-100,8px)}
|
|
22
22
|
._16hg1j28._16hg1j28{background-color:transparent}
|
|
23
23
|
._16jlkb7n{flex-grow:1}
|
|
24
|
-
.
|
|
24
|
+
._16qsizbr{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
|
|
25
25
|
._18m915vq{overflow-y:hidden}
|
|
26
26
|
._1bah1yb4{justify-content:space-between}
|
|
27
27
|
._1bsb1osq{width:100%}
|
|
@@ -71,8 +71,10 @@
|
|
|
71
71
|
._vchhusvi{box-sizing:border-box}
|
|
72
72
|
._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
|
|
73
73
|
._y4tiidpf{padding-inline-end:0}
|
|
74
|
+
._4cvx1bqt:hover{border-color:var(--ds-border-danger,#e2483d)}
|
|
74
75
|
._4cvx1elr:hover{border-color:var(--ds-border-input,#8590a2)}
|
|
75
76
|
._4cvx1j28:hover{border-color:transparent}
|
|
77
|
+
._1dbzizbr:hover{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
|
|
76
78
|
._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
|
|
77
79
|
._irr31j28:hover{background-color:transparent}
|
|
78
80
|
@media screen and (-ms-high-contrast:active){._1fnx18qt{color:GrayText}._6up518qt{border-color:GrayText}._msj6gir2:has(input:focus){border-color:Highlight}}
|
package/dist/esm/text-field.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* text-field.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* text-field.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import _typeof from "@babel/runtime/helpers/typeof";
|
|
4
4
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
@@ -147,12 +147,11 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
147
147
|
"data-ds--text-field--container": true,
|
|
148
148
|
"data-testid": testId && "".concat(testId, "-container"),
|
|
149
149
|
onMouseDown: handleOnMouseDown,
|
|
150
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
151
|
-
className: ax(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnq1l7b", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qs13x5 _1dbz13x5 _uk1sr01l", className]),
|
|
152
150
|
style: {
|
|
153
|
-
maxWidth: "".concat(getMaxWidth(width))
|
|
154
|
-
|
|
155
|
-
|
|
151
|
+
maxWidth: "".concat(getMaxWidth(width))
|
|
152
|
+
},
|
|
153
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
154
|
+
className: ax(["_16jlkb7n _1o9zkb7n _i0dl1osq _11c82smr _1reo15vq _18m915vq _v564r5cv _189ee4h9 _1e0c1txw _vchhusvi _4cvr1h6o _1bah1yb4 _lcxv1wug _s7n4jp4b _slp31hna _1tnqfajl", getContainerTextBgAndBorderColor[appearance], containerStyleAppearance[appearance], !isDisabled && focusWithinStyle[appearance], !isDisabled && hoverStyle[appearance], isDisabled && containerMedia.disabled, isDisabled && disabledStyle[appearance], isInvalid && containerMedia.invalid, isInvalid && "_1h6d1bqt _4cvx1bqt _16qsizbr _1dbzizbr _uk1sr01l", className])
|
|
156
155
|
}, elemBeforeInput, /*#__PURE__*/React.createElement("input", _extends({}, spreadProps, {
|
|
157
156
|
"aria-invalid": isInvalid ? isInvalid : undefined
|
|
158
157
|
// TODO: When removing legacy theming fix this.
|
package/offerings.json
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"name": "TextField",
|
|
4
|
+
"package": "@atlaskit/textfield",
|
|
5
|
+
"import": {
|
|
6
|
+
"name": "TextField",
|
|
7
|
+
"package": "@atlaskit/textfield",
|
|
8
|
+
"type": "default"
|
|
9
|
+
},
|
|
10
|
+
"keywords": ["textfield", "input", "form", "text", "field", "single-line"],
|
|
11
|
+
"categories": ["form"],
|
|
12
|
+
"shortDescription": "A single-line text input component.",
|
|
13
|
+
"status": "general-availability",
|
|
14
|
+
"accessibilityGuidelines": [
|
|
15
|
+
"Provide clear labels for all textfields",
|
|
16
|
+
"Use appropriate placeholder text that doesn't replace labels",
|
|
17
|
+
"Provide keyboard navigation support",
|
|
18
|
+
"Indicate required fields clearly",
|
|
19
|
+
"Use appropriate error states and messaging"
|
|
20
|
+
],
|
|
21
|
+
"usageGuidelines": [
|
|
22
|
+
"Use for single-line text input needs",
|
|
23
|
+
"Provide appropriate sizing for content type",
|
|
24
|
+
"Use clear, descriptive labels",
|
|
25
|
+
"Consider character limits and validation",
|
|
26
|
+
"Use appropriate placeholder text"
|
|
27
|
+
],
|
|
28
|
+
"contentGuidelines": [
|
|
29
|
+
"Write clear, descriptive labels",
|
|
30
|
+
"Use helpful placeholder text",
|
|
31
|
+
"Provide appropriate error messages",
|
|
32
|
+
"Consider content length and formatting"
|
|
33
|
+
],
|
|
34
|
+
"generativeInstructions": "./docs/ai/textfield-instructions.md",
|
|
35
|
+
"examples": ["./examples/ai/textfield.tsx"]
|
|
36
|
+
}
|
|
37
|
+
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/textfield",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.12",
|
|
4
4
|
"description": "A text field is an input that allows a user to write or edit text.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"@atlaskit/analytics-next": "^11.1.0",
|
|
28
28
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
29
29
|
"@atlaskit/theme": "^21.0.0",
|
|
30
|
-
"@atlaskit/tokens": "^6.
|
|
30
|
+
"@atlaskit/tokens": "^6.4.0",
|
|
31
31
|
"@babel/runtime": "^7.0.0",
|
|
32
32
|
"@compiled/react": "^0.18.3"
|
|
33
33
|
},
|
|
@@ -38,14 +38,14 @@
|
|
|
38
38
|
"@af/accessibility-testing": "workspace:^",
|
|
39
39
|
"@af/integration-testing": "workspace:^",
|
|
40
40
|
"@af/visual-regression": "workspace:^",
|
|
41
|
-
"@atlaskit/avatar": "^25.
|
|
41
|
+
"@atlaskit/avatar": "^25.2.0",
|
|
42
42
|
"@atlaskit/button": "^23.4.0",
|
|
43
|
-
"@atlaskit/docs": "^11.
|
|
44
|
-
"@atlaskit/ds-lib": "^5.
|
|
45
|
-
"@atlaskit/form": "^
|
|
46
|
-
"@atlaskit/icon": "^28.
|
|
43
|
+
"@atlaskit/docs": "^11.1.0",
|
|
44
|
+
"@atlaskit/ds-lib": "^5.1.0",
|
|
45
|
+
"@atlaskit/form": "^14.2.0",
|
|
46
|
+
"@atlaskit/icon": "^28.3.0",
|
|
47
47
|
"@atlaskit/link": "^3.2.0",
|
|
48
|
-
"@atlaskit/primitives": "^14.
|
|
48
|
+
"@atlaskit/primitives": "^14.15.0",
|
|
49
49
|
"@atlaskit/section-message": "^8.7.0",
|
|
50
50
|
"@atlaskit/ssr": "workspace:^",
|
|
51
51
|
"@atlassian/ssr-tests": "^0.3.0",
|