@atlaskit/textarea 5.0.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/textarea
2
2
 
3
+ ## 5.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#80805](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80805) [`427c2dd9e0d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/427c2dd9e0d6) - [ux] Update input border width from 2px to 1px with darker color to meet 3:1 color contrast
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+
13
+ ## 5.0.1
14
+
15
+ ### Patch Changes
16
+
17
+ - [#74756](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74756) [`8e66f751df96`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8e66f751df96) - Use feature flag to roll out border width update from 2px to 1px
18
+
3
19
  ## 5.0.0
4
20
 
5
21
  ### Major Changes
@@ -8,11 +8,10 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.getBaseStyles = exports.dynamicStyles = exports.borderWidth = void 0;
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
10
  var _react = require("@emotion/react");
11
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
11
  var _constants = require("@atlaskit/theme/constants");
13
12
  var componentTokens = _interopRequireWildcard(require("./component-tokens"));
14
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
13
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
14
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
16
15
  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; }
17
16
  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; } /** @jsx jsx */
18
17
  var disabledRules = {
@@ -91,7 +90,7 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(appearance) {
91
90
  '&:focus': {
92
91
  backgroundColor: backgroundColorFocus[appearance],
93
92
  borderColor: borderColorFocus[appearance],
94
- boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance]) : undefined
93
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance])
95
94
  },
96
95
  '&:not(:focus)': {
97
96
  backgroundColor: backgroundColor[appearance],
@@ -101,13 +100,13 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(appearance) {
101
100
  '&[data-invalid]:focus': {
102
101
  backgroundColor: invalidRules.backgroundColorFocus,
103
102
  borderColor: invalidRules.borderColorFocus,
104
- boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColorFocus) : undefined
103
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColorFocus)
105
104
  },
106
105
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
107
106
  '&[data-invalid]:not(:focus)': {
108
107
  backgroundColor: invalidRules.backgroundColor,
109
108
  borderColor: invalidRules.borderColor,
110
- boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColor) : undefined
109
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColor)
111
110
  }
112
111
  }, appearance === 'standard' ? {
113
112
  '&:disabled:focus': {
@@ -139,7 +138,7 @@ var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(app
139
138
  '&[data-invalid]': {
140
139
  backgroundColor: invalidRules.backgroundColorHover,
141
140
  borderColor: invalidRules.borderColor,
142
- boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColor) : undefined
141
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColor)
143
142
  }
144
143
  }
145
144
  });
@@ -172,7 +171,7 @@ var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
172
171
  var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
173
172
  var minimumRows = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
174
173
  var appearance = arguments.length > 1 ? arguments[1] : undefined;
175
- var borderWidth = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? 1 : 2;
174
+ var borderWidth = appearance !== 'none' ? 1 : 2;
176
175
  var horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
177
176
  var borderHeight = borderWidth;
178
177
  return (0, _react.css)({
@@ -202,7 +201,7 @@ var staticStyles = (0, _react.css)({
202
201
  flex: '1 1 100%',
203
202
  borderRadius: "var(--ds-border-radius, 3px)",
204
203
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
205
- borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? 1 : borderWidth,
204
+ borderWidth: 1,
206
205
  fontSize: fontSize,
207
206
  outline: 'none',
208
207
  overflow: 'auto',
@@ -16,12 +16,12 @@ var _analyticsNext = require("@atlaskit/analytics-next");
16
16
  var _styles = require("./styles");
17
17
  var _excluded = ["resize", "appearance", "isCompact", "isRequired", "isReadOnly", "isDisabled", "isInvalid", "isMonospaced", "minimumRows", "testId", "maxHeight", "onBlur", "onFocus", "onChange", "value"];
18
18
  /** @jsx jsx */
19
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
20
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
21
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; }
22
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; }
23
23
  var packageName = "@atlaskit/textarea";
24
- var packageVersion = "5.0.0";
24
+ var packageVersion = "5.1.0";
25
25
  var analyticsParams = {
26
26
  componentName: 'textArea',
27
27
  packageName: packageName,
@@ -1,6 +1,5 @@
1
1
  /** @jsx jsx */
2
2
  import { css } from '@emotion/react';
3
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
4
3
  import { codeFontFamily as getCodeFontFamily, fontFamily as getFontFamily, fontSize as getFontSize,
5
4
  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
6
5
  gridSize } from '@atlaskit/theme/constants';
@@ -80,7 +79,7 @@ const bgAndBorderColorStyles = appearance => appearance && css({
80
79
  '&:focus': {
81
80
  backgroundColor: backgroundColorFocus[appearance],
82
81
  borderColor: borderColorFocus[appearance],
83
- boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance]}` : undefined
82
+ boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance]}`
84
83
  },
85
84
  '&:not(:focus)': {
86
85
  backgroundColor: backgroundColor[appearance],
@@ -90,13 +89,13 @@ const bgAndBorderColorStyles = appearance => appearance && css({
90
89
  '&[data-invalid]:focus': {
91
90
  backgroundColor: invalidRules.backgroundColorFocus,
92
91
  borderColor: invalidRules.borderColorFocus,
93
- boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules.borderColorFocus}` : undefined
92
+ boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules.borderColorFocus}`
94
93
  },
95
94
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
96
95
  '&[data-invalid]:not(:focus)': {
97
96
  backgroundColor: invalidRules.backgroundColor,
98
97
  borderColor: invalidRules.borderColor,
99
- boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules.borderColor}` : undefined
98
+ boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules.borderColor}`
100
99
  },
101
100
  // Disabled background and border styles should not be applied to components that
102
101
  // have either no background or transparent background to begin with
@@ -127,7 +126,7 @@ const hoverBackgroundAndBorderStyles = appearance => appearance && css({
127
126
  '&[data-invalid]': {
128
127
  backgroundColor: invalidRules.backgroundColorHover,
129
128
  borderColor: invalidRules.borderColor,
130
- boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules.borderColor}` : undefined
129
+ boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules.borderColor}`
131
130
  }
132
131
  }
133
132
  });
@@ -153,7 +152,7 @@ const fontFamilyStyle = isMonospaced => css({
153
152
  fontFamily: isMonospaced ? codeFontFamily : fontFamily
154
153
  });
155
154
  const borderPaddingAndHeightStyles = (minimumRows = 1, appearance) => {
156
- const borderWidth = getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? 1 : 2;
155
+ const borderWidth = appearance !== 'none' ? 1 : 2;
157
156
  const horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
158
157
  const borderHeight = borderWidth;
159
158
  return css({
@@ -183,7 +182,7 @@ const staticStyles = css({
183
182
  flex: '1 1 100%',
184
183
  borderRadius: "var(--ds-border-radius, 3px)",
185
184
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
186
- borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : borderWidth,
185
+ borderWidth: 1,
187
186
  fontSize: fontSize,
188
187
  outline: 'none',
189
188
  overflow: 'auto',
@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/react';
5
5
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
6
6
  import { borderWidth, dynamicStyles, getBaseStyles } from './styles';
7
7
  const packageName = "@atlaskit/textarea";
8
- const packageVersion = "5.0.0";
8
+ const packageVersion = "5.1.0";
9
9
  const analyticsParams = {
10
10
  componentName: 'textArea',
11
11
  packageName,
@@ -3,7 +3,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
3
3
  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) { _defineProperty(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; }
4
4
  /** @jsx jsx */
5
5
  import { css } from '@emotion/react';
6
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
7
6
  import { codeFontFamily as getCodeFontFamily, fontFamily as getFontFamily, fontSize as getFontSize,
8
7
  // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
9
8
  gridSize } from '@atlaskit/theme/constants';
@@ -84,7 +83,7 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(appearance) {
84
83
  '&:focus': {
85
84
  backgroundColor: backgroundColorFocus[appearance],
86
85
  borderColor: borderColorFocus[appearance],
87
- boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance]) : undefined
86
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance])
88
87
  },
89
88
  '&:not(:focus)': {
90
89
  backgroundColor: backgroundColor[appearance],
@@ -94,13 +93,13 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(appearance) {
94
93
  '&[data-invalid]:focus': {
95
94
  backgroundColor: invalidRules.backgroundColorFocus,
96
95
  borderColor: invalidRules.borderColorFocus,
97
- boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColorFocus) : undefined
96
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColorFocus)
98
97
  },
99
98
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
100
99
  '&[data-invalid]:not(:focus)': {
101
100
  backgroundColor: invalidRules.backgroundColor,
102
101
  borderColor: invalidRules.borderColor,
103
- boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColor) : undefined
102
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColor)
104
103
  }
105
104
  }, appearance === 'standard' ? {
106
105
  '&:disabled:focus': {
@@ -132,7 +131,7 @@ var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(app
132
131
  '&[data-invalid]': {
133
132
  backgroundColor: invalidRules.backgroundColorHover,
134
133
  borderColor: invalidRules.borderColor,
135
- boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColor) : undefined
134
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColor)
136
135
  }
137
136
  }
138
137
  });
@@ -165,7 +164,7 @@ var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
165
164
  var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
166
165
  var minimumRows = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
167
166
  var appearance = arguments.length > 1 ? arguments[1] : undefined;
168
- var borderWidth = getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? 1 : 2;
167
+ var borderWidth = appearance !== 'none' ? 1 : 2;
169
168
  var horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
170
169
  var borderHeight = borderWidth;
171
170
  return css({
@@ -195,7 +194,7 @@ var staticStyles = css({
195
194
  flex: '1 1 100%',
196
195
  borderRadius: "var(--ds-border-radius, 3px)",
197
196
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
198
- borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : borderWidth,
197
+ borderWidth: 1,
199
198
  fontSize: fontSize,
200
199
  outline: 'none',
201
200
  overflow: 'auto',
@@ -11,7 +11,7 @@ import { css, jsx } from '@emotion/react';
11
11
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
12
12
  import { borderWidth, dynamicStyles, getBaseStyles } from './styles';
13
13
  var packageName = "@atlaskit/textarea";
14
- var packageVersion = "5.0.0";
14
+ var packageVersion = "5.1.0";
15
15
  var analyticsParams = {
16
16
  componentName: 'textArea',
17
17
  packageName: packageName,
@@ -12,7 +12,8 @@ export interface OwnProps extends WithAnalyticsEventsProps {
12
12
  */
13
13
  isCompact?: boolean;
14
14
  /**
15
- * Sets the field as uneditable, with a changed hover state.
15
+ * Sets the field as uneditable, with a changed hover state, and prevents it from showing in the focus order.
16
+ * Wherever possible, prefer using validation and error messaging over disabled fields for a more accessible experience.
16
17
  */
17
18
  isDisabled?: boolean;
18
19
  /**
@@ -48,7 +49,7 @@ export interface OwnProps extends WithAnalyticsEventsProps {
48
49
  */
49
50
  name?: string;
50
51
  /**
51
- * The placeholder within the text area.
52
+ * The placeholder text within the text area. Don't use placeholder text to provide instructions as it disappears on data entry.
52
53
  */
53
54
  placeholder?: string;
54
55
  /**
@@ -12,7 +12,8 @@ export interface OwnProps extends WithAnalyticsEventsProps {
12
12
  */
13
13
  isCompact?: boolean;
14
14
  /**
15
- * Sets the field as uneditable, with a changed hover state.
15
+ * Sets the field as uneditable, with a changed hover state, and prevents it from showing in the focus order.
16
+ * Wherever possible, prefer using validation and error messaging over disabled fields for a more accessible experience.
16
17
  */
17
18
  isDisabled?: boolean;
18
19
  /**
@@ -48,7 +49,7 @@ export interface OwnProps extends WithAnalyticsEventsProps {
48
49
  */
49
50
  name?: string;
50
51
  /**
51
- * The placeholder within the text area.
52
+ * The placeholder text within the text area. Don't use placeholder text to provide instructions as it disappears on data entry.
52
53
  */
53
54
  placeholder?: string;
54
55
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textarea",
3
- "version": "5.0.0",
3
+ "version": "5.1.0",
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/"
@@ -41,10 +41,10 @@
41
41
  "./text-area": "./src/text-area.tsx"
42
42
  },
43
43
  "dependencies": {
44
- "@atlaskit/analytics-next": "^9.1.0",
44
+ "@atlaskit/analytics-next": "^9.2.0",
45
45
  "@atlaskit/platform-feature-flags": "^0.2.0",
46
46
  "@atlaskit/theme": "^12.6.0",
47
- "@atlaskit/tokens": "^1.28.0",
47
+ "@atlaskit/tokens": "^1.41.0",
48
48
  "@babel/runtime": "^7.0.0",
49
49
  "@emotion/react": "^11.7.1"
50
50
  },
@@ -53,14 +53,15 @@
53
53
  },
54
54
  "devDependencies": {
55
55
  "@af/accessibility-testing": "*",
56
+ "@af/integration-testing": "*",
56
57
  "@atlaskit/ds-lib": "^2.2.0",
57
58
  "@atlaskit/ssr": "*",
58
59
  "@atlaskit/visual-regression": "*",
59
- "@atlaskit/webdriver-runner": "*",
60
60
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
61
61
  "@atlassian/feature-flags-test-utils": "*",
62
62
  "@testing-library/dom": "^8.17.1",
63
63
  "@testing-library/react": "^12.1.5",
64
+ "jest-in-case": "^1.0.2",
64
65
  "jscodeshift": "^0.13.0",
65
66
  "react-dom": "^16.8.0",
66
67
  "storybook-addon-performance": "^0.16.0",
@@ -1,48 +0,0 @@
1
- ## API Report File for "@atlaskit/textarea"
2
-
3
- > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
4
-
5
- ```ts
6
-
7
- /// <reference types="react" />
8
-
9
- import { default as React_2 } from 'react';
10
- import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
11
-
12
- // @public (undocumented)
13
- type Combine<First, Second> = Omit<First, keyof Second> & Second;
14
-
15
- // @public (undocumented)
16
- interface OwnProps extends WithAnalyticsEventsProps {
17
- appearance?: 'none' | 'standard' | 'subtle';
18
- defaultValue?: string;
19
- isCompact?: boolean;
20
- isDisabled?: boolean;
21
- isInvalid?: boolean;
22
- isMonospaced?: boolean;
23
- isReadOnly?: boolean;
24
- isRequired?: boolean;
25
- maxHeight?: string;
26
- minimumRows?: number;
27
- name?: string;
28
- onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
29
- onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
30
- onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
31
- placeholder?: string;
32
- resize?: 'auto' | 'horizontal' | 'none' | 'smart' | 'vertical';
33
- spellCheck?: boolean;
34
- testId?: string;
35
- theme?: any;
36
- value?: string;
37
- }
38
-
39
- // @public
40
- const TextArea: React_2.MemoExoticComponent<React_2.ForwardRefExoticComponent<Pick<TextAreaProps, "about" | "accessKey" | "appearance" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "autoFocus" | "autoSave" | "children" | "className" | "color" | "cols" | "contentEditable" | "contextMenu" | "createAnalyticsEvent" | "dangerouslySetInnerHTML" | "datatype" | "defaultChecked" | "defaultValue" | "dir" | "dirName" | "draggable" | "form" | "hidden" | "id" | "inlist" | "inputMode" | "is" | "isCompact" | "isDisabled" | "isInvalid" | "isMonospaced" | "isReadOnly" | "isRequired" | "itemID" | "itemProp" | "itemRef" | "itemScope" | "itemType" | "lang" | "maxHeight" | "maxLength" | "minLength" | "minimumRows" | "name" | "onAbort" | "onAbortCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAuxClick" | "onAuxClickCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onBlur" | "onBlurCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onChange" | "onChangeCapture" | "onClick" | "onClickCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onContextMenu" | "onContextMenuCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onError" | "onErrorCapture" | "onFocus" | "onFocusCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onInput" | "onInputCapture" | "onInvalid" | "onInvalidCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onLoad" | "onLoadCapture" | "onLoadStart" | "onLoadStartCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onPaste" | "onPasteCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerUp" | "onPointerUpCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onReset" | "onResetCapture" | "onScroll" | "onScrollCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onSelect" | "onSelectCapture" | "onStalled" | "onStalledCapture" | "onSubmit" | "onSubmitCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onWheel" | "onWheelCapture" | "placeholder" | "prefix" | "property" | "radioGroup" | "readOnly" | "resize" | "resource" | "results" | "role" | "rows" | "security" | "slot" | "spellCheck" | "style" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "tabIndex" | "testId" | "theme" | "title" | "translate" | "typeof" | "unselectable" | "value" | "vocab" | "wrap"> & React_2.RefAttributes<HTMLTextAreaElement>>>;
41
- export default TextArea;
42
-
43
- // @public (undocumented)
44
- export type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled' | 'readonly' | 'required'>, OwnProps>;
45
-
46
- // (No @packageDocumentation comment for this package)
47
-
48
- ```