@atlaskit/textarea 8.2.4 → 8.2.5

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 (9) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/text-area.compiled.css +16 -16
  3. package/dist/cjs/text-area.js +3 -15
  4. package/dist/es2019/text-area.compiled.css +15 -15
  5. package/dist/es2019/text-area.js +3 -4
  6. package/dist/esm/text-area.compiled.css +16 -16
  7. package/dist/esm/text-area.js +3 -15
  8. package/package.json +9 -8
  9. package/textarea.docs.tsx +49 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/textarea
2
2
 
3
+ ## 8.2.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`7aef1e49e90ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7aef1e49e90ea) -
8
+ Removes redundant fallback color values via @atlaskit/theme
9
+ - Updated dependencies
10
+
3
11
  ## 8.2.4
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/text-area.compiled.css CHANGED
@@ -3,14 +3,14 @@
3
3
  ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
4
4
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
5
5
  ._v5641gs0{transition:var(--_19uzta9)}
6
- ._153gksl0[data-invalid]:not(:focus){border-color:var(--_1u9fbts)}
6
+ ._153g1bqt[data-invalid]:not(:focus){border-color:var(--ds-border-danger,#e2483d)}
7
7
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
8
8
  ._19wt1j28:hover:not(:read-only):not(:focus){border-color:transparent}
9
9
  ._19wtrsbi:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8c8f97)}
10
10
  ._1bqsbk0g:disabled:not(:focus){border-color:var(--ds-border-disabled,#0515240f)}
11
11
  ._1dqoglyw{border-style:none}
12
12
  ._1dqonqa1{border-style:solid}
13
- ._1fraksl0:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--_1u9fbts)}
13
+ ._1fra1bqt:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--ds-border-danger,#e2483d)}
14
14
  ._kp821j28:not(:focus){border-color:transparent}
15
15
  ._kp82rsbi:not(:focus){border-color:var(--ds-border-input,#8c8f97)}
16
16
  ._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
@@ -30,19 +30,19 @@
30
30
  ._16lw1cn1:not([data-compact]){min-height:var(--_n9nqvh)}
31
31
  ._18m91wug{overflow-y:auto}
32
32
  ._18u0idpf{margin-left:0}
33
- ._19k01ouc:hover:not(:read-only):not(:focus):disabled{background-color:var(--_r5pknd)}
33
+ ._19k0by5v:hover:not(:read-only):not(:focus):disabled{background-color:var(--ds-background-disabled,#17171708)}
34
34
  ._19pkidpf{margin-top:0}
35
- ._1a2sh9qi[data-invalid]:not(:focus){box-shadow:var(--_1l1juom)}
35
+ ._1a2sizbr[data-invalid]:not(:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
36
36
  ._1bsb1osq{width:100%}
37
37
  ._1e0c1ule{display:block}
38
38
  ._1goxglyw::-ms-clear{display:none}
39
- ._1idrpsu8::-ms-input-placeholder{color:var(--_vrm7dk)}
40
- ._1idrpsu8::placeholder{color:var(--_vrm7dk)}
39
+ ._1idr1rpy::-ms-input-placeholder{color:var(--ds-text-subtlest,#6b6e76)}
40
+ ._1idr1rpy::placeholder{color:var(--ds-text-subtlest,#6b6e76)}
41
41
  ._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
42
42
  ._1kod1v6z:not([data-compact]){padding-inline-end:7px}
43
43
  ._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
44
- ._1lephxcb:disabled::-ms-input-placeholder{color:var(--_dnrmjm)}
45
- ._1lephxcb:disabled::placeholder{color:var(--_dnrmjm)}
44
+ ._1lep1gmx:disabled::-ms-input-placeholder{color:var(--ds-text-disabled,#080f214a)}
45
+ ._1lep1gmx:disabled::placeholder{color:var(--ds-text-disabled,#080f214a)}
46
46
  ._1ltx1j28:not(:focus){background-color:transparent}
47
47
  ._1ltx1j9a:not(:focus){background-color:var(--ds-background-input,#fff)}
48
48
  ._1n388sxn:not([data-compact]){line-height:1.4285714285714286}
@@ -51,7 +51,7 @@
51
51
  ._1reo1wug{overflow-x:auto}
52
52
  ._1ul9idpf{min-width:0}
53
53
  ._2hwxidpf{margin-right:0}
54
- ._6zpvh9qi:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:var(--_1l1juom)}
54
+ ._6zpvizbr:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
55
55
  ._7ba012x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}
56
56
  ._7ba01v6z:not([data-compact]){padding-inline-start:7px}
57
57
  ._cfjqkb7n:disabled{-webkit-opacity:1}
@@ -59,7 +59,7 @@
59
59
  ._daj71v6z[data-compact]{padding-inline-end:7px}
60
60
  ._ect4zzfg{font-family:var(--ds-font-family-code,"Atlassian Mono",ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
61
61
  ._i0dl1osq{flex-basis:100%}
62
- ._ibjd12ci:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--_1z08gfx)}
62
+ ._ibjdl4ek:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--ds-background-input-hovered,#f8f8f8)}
63
63
  ._j5dh13gf:disabled{cursor:not-allowed}
64
64
  ._k3o7n7od:disabled{-webkit-text-fill-color:unset}
65
65
  ._kqswh2mm{position:relative}
@@ -68,21 +68,21 @@
68
68
  ._otyridpf{margin-bottom:0}
69
69
  ._p12f1osq{max-width:100%}
70
70
  ._slp31hna{word-wrap:break-word}
71
- ._syazovqm{color:var(--_5xk3r4)}
72
- ._usy41kd8[data-invalid]:not(:focus){background-color:var(--_4mkb4g)}
71
+ ._syazi7uo{color:var(--ds-text,#292a2e)}
72
+ ._usy41j9a[data-invalid]:not(:focus){background-color:var(--ds-background-input,#fff)}
73
73
  ._uzq71d1b[data-compact]{min-height:var(--_dqsusn)}
74
- ._vbqbhxcb:disabled{color:var(--_dnrmjm)}
74
+ ._vbqb1gmx:disabled{color:var(--ds-text-disabled,#080f214a)}
75
75
  ._vchhusvi{box-sizing:border-box}
76
76
  ._z1pvby5v:disabled:not(:focus){background-color:var(--ds-background-disabled,#17171708)}
77
77
  ._186j1v1w:disabled:focus{border-color:var(--ds-border-focused,#4688ec)}
78
- ._1luh3zdg[data-invalid]:focus{border-color:var(--_xjqa3d)}
78
+ ._1luh1v1w[data-invalid]:focus{border-color:var(--ds-border-focused,#4688ec)}
79
79
  ._858u1j28:focus{border-color:transparent}
80
80
  ._858u1v1w:focus{border-color:var(--ds-border-focused,#4688ec)}
81
- ._1vj0119y[data-invalid]:focus{box-shadow:var(--_1n75f5r)}
81
+ ._1vj0vyy1[data-invalid]:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
82
82
  ._7ehi3sij:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
83
83
  ._7ehivyy1:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
84
84
  ._jomr1j28:focus{background-color:transparent}
85
85
  ._jomrr01l:focus{background-color:var(--ds-background-input-pressed,#fff)}
86
- ._ndzbkwt5[data-invalid]:focus{background-color:var(--_t0vtv2)}
86
+ ._ndzbr01l[data-invalid]:focus{background-color:var(--ds-background-input-pressed,#fff)}
87
87
  ._qu18by5v:disabled:focus{background-color:var(--ds-background-disabled,#17171708)}
88
88
  @media (min-width:30rem){._1tn2fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._14md1vhz{font-family:var(--ds-font-family-code,"Atlassian Mono",ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)!important}}
package/dist/cjs/text-area.js CHANGED
@@ -1,4 +1,4 @@
1
- /* text-area.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* text-area.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -16,13 +16,12 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
16
16
  var _react = _interopRequireWildcard(require("react"));
17
17
  var _analyticsNext = require("@atlaskit/analytics-next");
18
18
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
- var _colors = require("@atlaskit/theme/colors");
20
19
  var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "value", "style"];
21
20
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
22
21
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
23
22
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
24
23
  var packageName = "@atlaskit/textarea";
25
- var packageVersion = "0.0.0-development";
24
+ var packageVersion = "8.2.5";
26
25
  var analyticsParams = {
27
26
  componentName: 'textArea',
28
27
  packageName: packageName,
@@ -150,21 +149,10 @@ var InnerTextArea = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
150
149
  onFocus: onFocusWithAnalytics,
151
150
  rows: minimumRows
152
151
  }, rest, {
153
- className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazovqm _slp31hna _153gksl0 _usy41kd8 _1a2sh9qi _vbqbhxcb _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fraksl0 _ibjd12ci _6zpvh9qi _19k01ouc _1idrpsu8 _1lephxcb _nmhq1fiz _1n388sxn _1luh3zdg _ndzbkwt5 _1vj0119y", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1qi0", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
152
+ className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazi7uo _slp31hna _153g1bqt _usy41j9a _1a2sizbr _vbqb1gmx _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fra1bqt _ibjdl4ek _6zpvizbr _19k0by5v _1idr1rpy _1lep1gmx _nmhq1fiz _1n388sxn _1luh1v1w _ndzbr01l _1vj0vyy1", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1qi0", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
154
153
  style: _objectSpread(_objectSpread({}, style), {}, {
155
154
  maxHeight: maxHeight,
156
- "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
157
155
  "--_19uzta9": (0, _runtime.ix)("background-color ".concat(transitionDuration, " ease-in-out,\n border-color ").concat(transitionDuration, " ease-in-out")),
158
- "--_dnrmjm": (0, _runtime.ix)("var(--ds-text-disabled, ".concat(_colors.N70, ")")),
159
- "--_t0vtv2": (0, _runtime.ix)("var(--ds-background-input-pressed, ".concat(_colors.N0, ")")),
160
- "--_xjqa3d": (0, _runtime.ix)("var(--ds-border-focused, ".concat(_colors.B200, ")")),
161
- "--_1n75f5r": (0, _runtime.ix)("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")"))),
162
- "--_4mkb4g": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N10, ")")),
163
- "--_1u9fbts": (0, _runtime.ix)("var(--ds-border-danger, ".concat(_colors.R400, ")")),
164
- "--_1l1juom": (0, _runtime.ix)("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")"))),
165
- "--_r5pknd": (0, _runtime.ix)("var(--ds-background-disabled, ".concat(_colors.N20, ")")),
166
- "--_1z08gfx": (0, _runtime.ix)("var(--ds-background-input-hovered, ".concat(_colors.N30, ")")),
167
- "--_vrm7dk": (0, _runtime.ix)("var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
168
156
  "--_dqsusn": (0, _runtime.ix)("".concat(lineHeightCompact * minimumRows + compactVerticalPadding * 2 + borderHeight * 2, "px")),
169
157
  "--_n9nqvh": (0, _runtime.ix)("".concat(lineHeightBase * minimumRows + verticalPadding * 2 + borderHeight * 2, "px"))
170
158
  })
package/dist/es2019/text-area.compiled.css CHANGED
@@ -3,14 +3,14 @@
3
3
  ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
4
4
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
5
5
  ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
6
- ._153g78r2[data-invalid]:not(:focus){border-color:var(--ds-border-danger,#de350b)}
6
+ ._153g1bqt[data-invalid]:not(:focus){border-color:var(--ds-border-danger,#e2483d)}
7
7
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
8
8
  ._19wt1j28:hover:not(:read-only):not(:focus){border-color:transparent}
9
9
  ._19wtrsbi:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8c8f97)}
10
10
  ._1bqsbk0g:disabled:not(:focus){border-color:var(--ds-border-disabled,#0515240f)}
11
11
  ._1dqoglyw{border-style:none}
12
12
  ._1dqonqa1{border-style:solid}
13
- ._1fra78r2:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--ds-border-danger,#de350b)}
13
+ ._1fra1bqt:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--ds-border-danger,#e2483d)}
14
14
  ._kp821j28:not(:focus){border-color:transparent}
15
15
  ._kp82rsbi:not(:focus){border-color:var(--ds-border-input,#8c8f97)}
16
16
  ._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
@@ -30,19 +30,19 @@
30
30
  ._16lwuel1:not([data-compact]){min-height:var(--_eorxnz)}
31
31
  ._18m91wug{overflow-y:auto}
32
32
  ._18u0idpf{margin-left:0}
33
- ._19k01y1w:hover:not(:read-only):not(:focus):disabled{background-color:var(--ds-background-disabled,#f4f5f7)}
33
+ ._19k0by5v:hover:not(:read-only):not(:focus):disabled{background-color:var(--ds-background-disabled,#17171708)}
34
34
  ._19pkidpf{margin-top:0}
35
- ._1a2sr6rt[data-invalid]:not(:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#de350b)}
35
+ ._1a2sizbr[data-invalid]:not(:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
36
36
  ._1bsb1osq{width:100%}
37
37
  ._1e0c1ule{display:block}
38
38
  ._1goxglyw::-ms-clear{display:none}
39
- ._1idr1wmz::-ms-input-placeholder{color:var(--ds-text-subtlest,#6b778c)}
40
- ._1idr1wmz::placeholder{color:var(--ds-text-subtlest,#6b778c)}
39
+ ._1idr1rpy::-ms-input-placeholder{color:var(--ds-text-subtlest,#6b6e76)}
40
+ ._1idr1rpy::placeholder{color:var(--ds-text-subtlest,#6b6e76)}
41
41
  ._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
42
42
  ._1kod1v6z:not([data-compact]){padding-inline-end:7px}
43
43
  ._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
44
- ._1lep9jg2:disabled::-ms-input-placeholder{color:var(--ds-text-disabled,#a5adba)}
45
- ._1lep9jg2:disabled::placeholder{color:var(--ds-text-disabled,#a5adba)}
44
+ ._1lep1gmx:disabled::-ms-input-placeholder{color:var(--ds-text-disabled,#080f214a)}
45
+ ._1lep1gmx:disabled::placeholder{color:var(--ds-text-disabled,#080f214a)}
46
46
  ._1ltx1j28:not(:focus){background-color:transparent}
47
47
  ._1ltx1j9a:not(:focus){background-color:var(--ds-background-input,#fff)}
48
48
  ._1n388sxn:not([data-compact]){line-height:1.4285714285714286}
@@ -51,7 +51,7 @@
51
51
  ._1reo1wug{overflow-x:auto}
52
52
  ._1ul9idpf{min-width:0}
53
53
  ._2hwxidpf{margin-right:0}
54
- ._6zpvr6rt:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#de350b)}
54
+ ._6zpvizbr:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
55
55
  ._7ba012x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}
56
56
  ._7ba01v6z:not([data-compact]){padding-inline-start:7px}
57
57
  ._cfjqkb7n:disabled{-webkit-opacity:1}
@@ -59,7 +59,7 @@
59
59
  ._daj71v6z[data-compact]{padding-inline-end:7px}
60
60
  ._ect4zzfg{font-family:var(--ds-font-family-code,"Atlassian Mono",ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
61
61
  ._i0dl1osq{flex-basis:100%}
62
- ._ibjd10ko:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--ds-background-input-hovered,#ebecf0)}
62
+ ._ibjdl4ek:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--ds-background-input-hovered,#f8f8f8)}
63
63
  ._j5dh13gf:disabled{cursor:not-allowed}
64
64
  ._k3o7n7od:disabled{-webkit-text-fill-color:unset}
65
65
  ._kqswh2mm{position:relative}
@@ -68,17 +68,17 @@
68
68
  ._otyridpf{margin-bottom:0}
69
69
  ._p12f1osq{max-width:100%}
70
70
  ._slp31hna{word-wrap:break-word}
71
- ._syazj3m3{color:var(--ds-text,#091e42)}
72
- ._usy4mag2[data-invalid]:not(:focus){background-color:var(--ds-background-input,#fafbfc)}
71
+ ._syazi7uo{color:var(--ds-text,#292a2e)}
72
+ ._usy41j9a[data-invalid]:not(:focus){background-color:var(--ds-background-input,#fff)}
73
73
  ._uzq71i7i[data-compact]{min-height:var(--_6ny3x7)}
74
- ._vbqb9jg2:disabled{color:var(--ds-text-disabled,#a5adba)}
74
+ ._vbqb1gmx:disabled{color:var(--ds-text-disabled,#080f214a)}
75
75
  ._vchhusvi{box-sizing:border-box}
76
76
  ._z1pvby5v:disabled:not(:focus){background-color:var(--ds-background-disabled,#17171708)}
77
77
  ._186j1v1w:disabled:focus{border-color:var(--ds-border-focused,#4688ec)}
78
- ._1luh194a[data-invalid]:focus{border-color:var(--ds-border-focused,#2684ff)}
78
+ ._1luh1v1w[data-invalid]:focus{border-color:var(--ds-border-focused,#4688ec)}
79
79
  ._858u1j28:focus{border-color:transparent}
80
80
  ._858u1v1w:focus{border-color:var(--ds-border-focused,#4688ec)}
81
- ._1vj01cu8[data-invalid]:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#2684ff)}
81
+ ._1vj0vyy1[data-invalid]:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
82
82
  ._7ehi3sij:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
83
83
  ._7ehivyy1:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
84
84
  ._jomr1j28:focus{background-color:transparent}
package/dist/es2019/text-area.js CHANGED
@@ -1,13 +1,12 @@
1
- /* text-area.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* text-area.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import "./text-area.compiled.css";
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
6
6
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
7
7
  import { fg } from '@atlaskit/platform-feature-flags';
8
- import { B200, N0, N10, N20, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
9
8
  const packageName = "@atlaskit/textarea";
10
- const packageVersion = "0.0.0-development";
9
+ const packageVersion = "8.2.5";
11
10
  const analyticsParams = {
12
11
  componentName: 'textArea',
13
12
  packageName,
@@ -127,7 +126,7 @@ const InnerTextArea = /*#__PURE__*/forwardRef((props, ref) => {
127
126
  onFocus: onFocusWithAnalytics,
128
127
  rows: minimumRows
129
128
  }, rest, {
130
- className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v564r5cv _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazj3m3 _slp31hna _153g78r2 _usy4mag2 _1a2sr6rt _vbqb9jg2 _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fra78r2 _ibjd10ko _6zpvr6rt _19k01y1w _1idr1wmz _1lep9jg2 _nmhq1fiz _1n388sxn _1luh194a _ndzbr01l _1vj01cu8", fg('platform-dst-shape-theme-default') && "_2rko1qi0", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71i7i _16lwuel1"]),
129
+ className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v564r5cv _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazi7uo _slp31hna _153g1bqt _usy41j9a _1a2sizbr _vbqb1gmx _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fra1bqt _ibjdl4ek _6zpvizbr _19k0by5v _1idr1rpy _1lep1gmx _nmhq1fiz _1n388sxn _1luh1v1w _ndzbr01l _1vj0vyy1", fg('platform-dst-shape-theme-default') && "_2rko1qi0", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71i7i _16lwuel1"]),
131
130
  style: {
132
131
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
133
132
  ...style,
package/dist/esm/text-area.compiled.css CHANGED
@@ -3,14 +3,14 @@
3
3
  ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
4
4
  ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
5
5
  ._v5641gs0{transition:var(--_19uzta9)}
6
- ._153gksl0[data-invalid]:not(:focus){border-color:var(--_1u9fbts)}
6
+ ._153g1bqt[data-invalid]:not(:focus){border-color:var(--ds-border-danger,#e2483d)}
7
7
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
8
8
  ._19wt1j28:hover:not(:read-only):not(:focus){border-color:transparent}
9
9
  ._19wtrsbi:hover:not(:read-only):not(:focus){border-color:var(--ds-border-input,#8c8f97)}
10
10
  ._1bqsbk0g:disabled:not(:focus){border-color:var(--ds-border-disabled,#0515240f)}
11
11
  ._1dqoglyw{border-style:none}
12
12
  ._1dqonqa1{border-style:solid}
13
- ._1fraksl0:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--_1u9fbts)}
13
+ ._1fra1bqt:hover:not(:read-only):not(:focus)[data-invalid]{border-color:var(--ds-border-danger,#e2483d)}
14
14
  ._kp821j28:not(:focus){border-color:transparent}
15
15
  ._kp82rsbi:not(:focus){border-color:var(--ds-border-input,#8c8f97)}
16
16
  ._11zpv77o[data-compact]{padding-block-end:var(--ds-space-025,2px)}
@@ -30,19 +30,19 @@
30
30
  ._16lw1cn1:not([data-compact]){min-height:var(--_n9nqvh)}
31
31
  ._18m91wug{overflow-y:auto}
32
32
  ._18u0idpf{margin-left:0}
33
- ._19k01ouc:hover:not(:read-only):not(:focus):disabled{background-color:var(--_r5pknd)}
33
+ ._19k0by5v:hover:not(:read-only):not(:focus):disabled{background-color:var(--ds-background-disabled,#17171708)}
34
34
  ._19pkidpf{margin-top:0}
35
- ._1a2sh9qi[data-invalid]:not(:focus){box-shadow:var(--_1l1juom)}
35
+ ._1a2sizbr[data-invalid]:not(:focus){box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
36
36
  ._1bsb1osq{width:100%}
37
37
  ._1e0c1ule{display:block}
38
38
  ._1goxglyw::-ms-clear{display:none}
39
- ._1idrpsu8::-ms-input-placeholder{color:var(--_vrm7dk)}
40
- ._1idrpsu8::placeholder{color:var(--_vrm7dk)}
39
+ ._1idr1rpy::-ms-input-placeholder{color:var(--ds-text-subtlest,#6b6e76)}
40
+ ._1idr1rpy::placeholder{color:var(--ds-text-subtlest,#6b6e76)}
41
41
  ._1kod12x7:not([data-compact]){padding-inline-end:var(--ds-space-075,6px)}
42
42
  ._1kod1v6z:not([data-compact]){padding-inline-end:7px}
43
43
  ._1l02v77o[data-compact]{padding-block-start:var(--ds-space-025,2px)}
44
- ._1lephxcb:disabled::-ms-input-placeholder{color:var(--_dnrmjm)}
45
- ._1lephxcb:disabled::placeholder{color:var(--_dnrmjm)}
44
+ ._1lep1gmx:disabled::-ms-input-placeholder{color:var(--ds-text-disabled,#080f214a)}
45
+ ._1lep1gmx:disabled::placeholder{color:var(--ds-text-disabled,#080f214a)}
46
46
  ._1ltx1j28:not(:focus){background-color:transparent}
47
47
  ._1ltx1j9a:not(:focus){background-color:var(--ds-background-input,#fff)}
48
48
  ._1n388sxn:not([data-compact]){line-height:1.4285714285714286}
@@ -51,7 +51,7 @@
51
51
  ._1reo1wug{overflow-x:auto}
52
52
  ._1ul9idpf{min-width:0}
53
53
  ._2hwxidpf{margin-right:0}
54
- ._6zpvh9qi:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:var(--_1l1juom)}
54
+ ._6zpvizbr:hover:not(:read-only):not(:focus)[data-invalid]{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
55
55
  ._7ba012x7:not([data-compact]){padding-inline-start:var(--ds-space-075,6px)}
56
56
  ._7ba01v6z:not([data-compact]){padding-inline-start:7px}
57
57
  ._cfjqkb7n:disabled{-webkit-opacity:1}
@@ -59,7 +59,7 @@
59
59
  ._daj71v6z[data-compact]{padding-inline-end:7px}
60
60
  ._ect4zzfg{font-family:var(--ds-font-family-code,"Atlassian Mono",ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
61
61
  ._i0dl1osq{flex-basis:100%}
62
- ._ibjd12ci:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--_1z08gfx)}
62
+ ._ibjdl4ek:hover:not(:read-only):not(:focus)[data-invalid]{background-color:var(--ds-background-input-hovered,#f8f8f8)}
63
63
  ._j5dh13gf:disabled{cursor:not-allowed}
64
64
  ._k3o7n7od:disabled{-webkit-text-fill-color:unset}
65
65
  ._kqswh2mm{position:relative}
@@ -68,21 +68,21 @@
68
68
  ._otyridpf{margin-bottom:0}
69
69
  ._p12f1osq{max-width:100%}
70
70
  ._slp31hna{word-wrap:break-word}
71
- ._syazovqm{color:var(--_5xk3r4)}
72
- ._usy41kd8[data-invalid]:not(:focus){background-color:var(--_4mkb4g)}
71
+ ._syazi7uo{color:var(--ds-text,#292a2e)}
72
+ ._usy41j9a[data-invalid]:not(:focus){background-color:var(--ds-background-input,#fff)}
73
73
  ._uzq71d1b[data-compact]{min-height:var(--_dqsusn)}
74
- ._vbqbhxcb:disabled{color:var(--_dnrmjm)}
74
+ ._vbqb1gmx:disabled{color:var(--ds-text-disabled,#080f214a)}
75
75
  ._vchhusvi{box-sizing:border-box}
76
76
  ._z1pvby5v:disabled:not(:focus){background-color:var(--ds-background-disabled,#17171708)}
77
77
  ._186j1v1w:disabled:focus{border-color:var(--ds-border-focused,#4688ec)}
78
- ._1luh3zdg[data-invalid]:focus{border-color:var(--_xjqa3d)}
78
+ ._1luh1v1w[data-invalid]:focus{border-color:var(--ds-border-focused,#4688ec)}
79
79
  ._858u1j28:focus{border-color:transparent}
80
80
  ._858u1v1w:focus{border-color:var(--ds-border-focused,#4688ec)}
81
- ._1vj0119y[data-invalid]:focus{box-shadow:var(--_1n75f5r)}
81
+ ._1vj0vyy1[data-invalid]:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
82
82
  ._7ehi3sij:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
83
83
  ._7ehivyy1:focus{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}
84
84
  ._jomr1j28:focus{background-color:transparent}
85
85
  ._jomrr01l:focus{background-color:var(--ds-background-input-pressed,#fff)}
86
- ._ndzbkwt5[data-invalid]:focus{background-color:var(--_t0vtv2)}
86
+ ._ndzbr01l[data-invalid]:focus{background-color:var(--ds-background-input-pressed,#fff)}
87
87
  ._qu18by5v:disabled:focus{background-color:var(--ds-background-disabled,#17171708)}
88
88
  @media (min-width:30rem){._1tn2fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}._14md1vhz{font-family:var(--ds-font-family-code,"Atlassian Mono",ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)!important}}
package/dist/esm/text-area.js CHANGED
@@ -1,4 +1,4 @@
1
- /* text-area.tsx generated by @compiled/babel-plugin v0.38.1 */
1
+ /* text-area.tsx generated by @compiled/babel-plugin v0.39.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";
@@ -11,9 +11,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
11
11
  import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
12
12
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
13
13
  import { fg } from '@atlaskit/platform-feature-flags';
14
- import { B200, N0, N10, N20, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
15
14
  var packageName = "@atlaskit/textarea";
16
- var packageVersion = "0.0.0-development";
15
+ var packageVersion = "8.2.5";
17
16
  var analyticsParams = {
18
17
  componentName: 'textArea',
19
18
  packageName: packageName,
@@ -141,21 +140,10 @@ var InnerTextArea = /*#__PURE__*/forwardRef(function (props, ref) {
141
140
  onFocus: onFocusWithAnalytics,
142
141
  rows: minimumRows
143
142
  }, rest, {
144
- className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazovqm _slp31hna _153gksl0 _usy41kd8 _1a2sh9qi _vbqbhxcb _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fraksl0 _ibjd12ci _6zpvh9qi _19k01ouc _1idrpsu8 _1lephxcb _nmhq1fiz _1n388sxn _1luh3zdg _ndzbkwt5 _1vj0119y", fg('platform-dst-shape-theme-default') && "_2rko1qi0", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
143
+ className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _16jlkb7n _1o9zkb7n _i0dl1osq _2rkofajl _11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _1reo1wug _18m91wug _v5641gs0 _189ee4h9 _1e0c1ule _vchhusvi _1bsb1osq _1ul9idpf _p12f1osq _kqswh2mm _syazi7uo _slp31hna _153g1bqt _usy41j9a _1a2sizbr _vbqb1gmx _j5dh13gf _cfjqkb7n _k3o7n7od _1goxglyw _13xeglyw _1fra1bqt _ibjdl4ek _6zpvizbr _19k0by5v _1idr1rpy _1lep1gmx _nmhq1fiz _1n388sxn _1luh1v1w _ndzbr01l _1vj0vyy1", fg('platform-dst-shape-theme-default') && "_2rko1qi0", appearanceStyles[appearance], fontStyles[isMonospaced ? 'monospace' : 'default'], resizeStyles[resize], "_uzq71d1b _16lw1cn1"]),
145
144
  style: _objectSpread(_objectSpread({}, style), {}, {
146
145
  maxHeight: maxHeight,
147
- "--_5xk3r4": ix("var(--ds-text, ".concat(N900, ")")),
148
146
  "--_19uzta9": ix("background-color ".concat(transitionDuration, " ease-in-out,\n border-color ").concat(transitionDuration, " ease-in-out")),
149
- "--_dnrmjm": ix("var(--ds-text-disabled, ".concat(N70, ")")),
150
- "--_t0vtv2": ix("var(--ds-background-input-pressed, ".concat(N0, ")")),
151
- "--_xjqa3d": ix("var(--ds-border-focused, ".concat(B200, ")")),
152
- "--_1n75f5r": ix("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")"))),
153
- "--_4mkb4g": ix("var(--ds-background-input, ".concat(N10, ")")),
154
- "--_1u9fbts": ix("var(--ds-border-danger, ".concat(R400, ")")),
155
- "--_1l1juom": ix("inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")"))),
156
- "--_r5pknd": ix("var(--ds-background-disabled, ".concat(N20, ")")),
157
- "--_1z08gfx": ix("var(--ds-background-input-hovered, ".concat(N30, ")")),
158
- "--_vrm7dk": ix("var(--ds-text-subtlest, ".concat(N200, ")")),
159
147
  "--_dqsusn": ix("".concat(lineHeightCompact * minimumRows + compactVerticalPadding * 2 + borderHeight * 2, "px")),
160
148
  "--_n9nqvh": ix("".concat(lineHeightBase * minimumRows + verticalPadding * 2 + borderHeight * 2, "px"))
161
149
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textarea",
3
- "version": "8.2.4",
3
+ "version": "8.2.5",
4
4
  "description": "A text area lets users enter long form text which spans over multiple lines.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -33,13 +33,13 @@
33
33
  }
34
34
  },
35
35
  "dependencies": {
36
- "@atlaskit/analytics-next": "^11.1.0",
36
+ "@atlaskit/analytics-next": "^11.2.0",
37
37
  "@atlaskit/platform-feature-flags": "^1.1.0",
38
- "@atlaskit/primitives": "^18.0.0",
38
+ "@atlaskit/primitives": "^18.1.0",
39
39
  "@atlaskit/theme": "^22.0.0",
40
- "@atlaskit/tokens": "^11.0.0",
40
+ "@atlaskit/tokens": "^11.4.0",
41
41
  "@babel/runtime": "^7.0.0",
42
- "@compiled/react": "^0.18.6"
42
+ "@compiled/react": "^0.20.0"
43
43
  },
44
44
  "peerDependencies": {
45
45
  "react": "^18.2.0"
@@ -50,12 +50,13 @@
50
50
  "@af/visual-regression": "workspace:^",
51
51
  "@atlaskit/button": "^23.10.0",
52
52
  "@atlaskit/css": "^0.19.0",
53
- "@atlaskit/docs": "^11.5.0",
54
- "@atlaskit/ds-lib": "^5.3.0",
55
- "@atlaskit/form": "^15.3.0",
53
+ "@atlaskit/docs": "^11.7.0",
54
+ "@atlaskit/ds-lib": "^6.0.0",
55
+ "@atlaskit/form": "^15.5.0",
56
56
  "@atlaskit/link": "^3.3.0",
57
57
  "@atlaskit/section-message": "^8.12.0",
58
58
  "@atlassian/ssr-tests": "workspace:^",
59
+ "@atlassian/structured-docs-types": "workspace:^",
59
60
  "@testing-library/react": "^16.3.0",
60
61
  "@testing-library/user-event": "^14.4.3",
61
62
  "jest-in-case": "^1.0.2",
package/textarea.docs.tsx ADDED
@@ -0,0 +1,49 @@
1
+ import path from 'path';
2
+
3
+ import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
4
+
5
+ const documentation: ComponentStructuredContentSource[] = [
6
+ {
7
+ name: 'Textarea',
8
+ description: 'A textarea is a multiline text input control for longer text content.',
9
+ status: 'general-availability',
10
+ import: {
11
+ name: 'Textarea',
12
+ package: '@atlaskit/textarea',
13
+ type: 'default',
14
+ packagePath: path.resolve(__dirname),
15
+ packageJson: require('./package.json'),
16
+ },
17
+ usageGuidelines: [
18
+ 'Use for long-form, multi-line text in forms',
19
+ 'Expandable height; label and optional helper text',
20
+ 'Do not use placeholder for critical info—use label or helper text',
21
+ 'Use TextField for short, single-line input',
22
+ ],
23
+ contentGuidelines: [
24
+ 'Label as noun string (e.g. "Description" not "Modal title + Description")',
25
+ 'Use helper text to clarify; do not put critical info in placeholder',
26
+ 'Provide appropriate error messages',
27
+ 'Consider content length and formatting',
28
+ ],
29
+ accessibilityGuidelines: [
30
+ 'Ensure label is associated with the textarea',
31
+ 'Do not use placeholder for critical info—use label or helper (search exception only with icon + accessible label)',
32
+ 'Provide clear labels for all textareas',
33
+ 'Provide keyboard navigation support',
34
+ 'Indicate required fields clearly',
35
+ 'Use appropriate error states and messaging',
36
+ ],
37
+ examples: [
38
+ {
39
+ name: 'Textarea',
40
+ description: 'Textarea example',
41
+ source: path.resolve(__dirname, './examples/ai/textarea.tsx'),
42
+ },
43
+ ],
44
+ keywords: ['textarea', 'input', 'form', 'text', 'multiline', 'input', 'field'],
45
+ categories: ['forms-and-input'],
46
+ },
47
+ ];
48
+
49
+ export default documentation;