@atlaskit/textarea 4.7.0 → 4.7.2
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 +12 -0
- package/dist/cjs/component-tokens.js +2 -2
- package/dist/cjs/styles.js +8 -6
- package/dist/cjs/text-area.js +2 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/component-tokens.js +2 -2
- package/dist/es2019/styles.js +8 -6
- package/dist/es2019/text-area.js +2 -2
- package/dist/es2019/version.json +1 -1
- package/dist/esm/component-tokens.js +2 -2
- package/dist/esm/styles.js +8 -6
- package/dist/esm/text-area.js +2 -2
- package/dist/esm/version.json +1 -1
- package/package.json +6 -5
- package/tmp/api-report-tmp.d.ts +215 -0
- package/extract-react-types/textarea-props.tsx +0 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/textarea
|
|
2
2
|
|
|
3
|
+
## 4.7.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`8f436f0c301`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f436f0c301) - extend border contrast feature flag to support confluence
|
|
8
|
+
|
|
9
|
+
## 4.7.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`b1bdec7cce2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1bdec7cce2) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
|
|
14
|
+
|
|
3
15
|
## 4.7.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -22,8 +22,8 @@ var invalidBorderColor = {
|
|
|
22
22
|
};
|
|
23
23
|
exports.invalidBorderColor = invalidBorderColor;
|
|
24
24
|
var defaultBorderColor = {
|
|
25
|
-
light: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
26
|
-
dark: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
25
|
+
light: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
|
|
26
|
+
dark: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.DN200 : _colors.DN40, ")")
|
|
27
27
|
};
|
|
28
28
|
exports.defaultBorderColor = defaultBorderColor;
|
|
29
29
|
var defaultBorderColorFocus = {
|
package/dist/cjs/styles.js
CHANGED
|
@@ -44,7 +44,7 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
|
|
|
44
44
|
'&:focus': {
|
|
45
45
|
backgroundColor: props.backgroundColorFocus,
|
|
46
46
|
borderColor: props.borderColorFocus,
|
|
47
|
-
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
47
|
+
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.borderColorFocus) : undefined
|
|
48
48
|
},
|
|
49
49
|
'&:not(:focus)': {
|
|
50
50
|
backgroundColor: props.backgroundColor,
|
|
@@ -54,13 +54,13 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
|
|
|
54
54
|
'&[data-invalid]:focus': {
|
|
55
55
|
backgroundColor: props.invalidRules.backgroundColorFocus,
|
|
56
56
|
borderColor: props.invalidRules.borderColorFocus,
|
|
57
|
-
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
57
|
+
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColorFocus) : undefined
|
|
58
58
|
},
|
|
59
59
|
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
60
60
|
'&[data-invalid]:not(:focus)': {
|
|
61
61
|
backgroundColor: props.invalidRules.backgroundColor,
|
|
62
62
|
borderColor: props.invalidRules.borderColor,
|
|
63
|
-
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
63
|
+
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColor) : undefined
|
|
64
64
|
}
|
|
65
65
|
}, appearance === 'standard' ? {
|
|
66
66
|
'&:disabled:focus': {
|
|
@@ -92,7 +92,7 @@ var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(pro
|
|
|
92
92
|
'&[data-invalid]': {
|
|
93
93
|
backgroundColor: props.invalidRules.backgroundColorHover,
|
|
94
94
|
borderColor: props.invalidRules.borderColor,
|
|
95
|
-
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
95
|
+
boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColor) : undefined
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
});
|
|
@@ -125,18 +125,20 @@ var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
|
|
|
125
125
|
var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
|
|
126
126
|
var minimumRows = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
|
127
127
|
var appearance = arguments.length > 1 ? arguments[1] : undefined;
|
|
128
|
-
var borderWidth = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
128
|
+
var borderWidth = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? 1 : 2;
|
|
129
129
|
var horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
|
|
130
130
|
var borderHeight = borderWidth;
|
|
131
131
|
return (0, _react.css)({
|
|
132
132
|
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
133
133
|
'&[data-compact]': {
|
|
134
134
|
minHeight: borderBoxMinHeightCompact(minimumRows, borderHeight),
|
|
135
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
|
|
135
136
|
padding: "".concat(compactVerticalPadding, "px ").concat(horizontalPaddingWithoutBorderWidth, "px"),
|
|
136
137
|
lineHeight: lineHeightCompact / fontSize
|
|
137
138
|
},
|
|
138
139
|
'&:not([data-compact])': {
|
|
139
140
|
minHeight: borderBoxMinHeight(minimumRows, borderHeight),
|
|
141
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
|
|
140
142
|
padding: "".concat(verticalPadding, "px ").concat(horizontalPaddingWithoutBorderWidth, "px"),
|
|
141
143
|
lineHeight: lineHeightBase / fontSize
|
|
142
144
|
}
|
|
@@ -152,7 +154,7 @@ var staticStyles = (0, _react.css)({
|
|
|
152
154
|
position: 'relative',
|
|
153
155
|
flex: '1 1 100%',
|
|
154
156
|
borderRadius: borderRadius,
|
|
155
|
-
borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.
|
|
157
|
+
borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? 1 : borderWidth,
|
|
156
158
|
fontSize: fontSize,
|
|
157
159
|
outline: 'none',
|
|
158
160
|
overflow: 'auto',
|
package/dist/cjs/text-area.js
CHANGED
|
@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
23
23
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
24
24
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
25
|
var packageName = "@atlaskit/textarea";
|
|
26
|
-
var packageVersion = "4.7.
|
|
26
|
+
var packageVersion = "4.7.2";
|
|
27
27
|
var analyticsParams = {
|
|
28
28
|
componentName: 'textArea',
|
|
29
29
|
packageName: packageName,
|
|
@@ -131,7 +131,7 @@ var TextAreaWithTokens = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
|
|
|
131
131
|
rows: minimumRows
|
|
132
132
|
// TODO refactor to follow emotion styling rules
|
|
133
133
|
// see: https://product-fabric.atlassian.net/browse/DSP-6060
|
|
134
|
-
// eslint-disable-next-line @
|
|
134
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
135
135
|
,
|
|
136
136
|
css: textAreaStyles
|
|
137
137
|
}, rest));
|
package/dist/cjs/version.json
CHANGED
|
@@ -13,8 +13,8 @@ export const invalidBorderColor = {
|
|
|
13
13
|
dark: `var(--ds-border-danger, ${R400})`
|
|
14
14
|
};
|
|
15
15
|
export const defaultBorderColor = {
|
|
16
|
-
light: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.
|
|
17
|
-
dark: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.
|
|
16
|
+
light: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
|
|
17
|
+
dark: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN40})`
|
|
18
18
|
};
|
|
19
19
|
export const defaultBorderColorFocus = {
|
|
20
20
|
light: `var(--ds-border-focused, ${B100})`,
|
package/dist/es2019/styles.js
CHANGED
|
@@ -35,7 +35,7 @@ const bgAndBorderColorStyles = (props, appearance) => css({
|
|
|
35
35
|
'&:focus': {
|
|
36
36
|
backgroundColor: props.backgroundColorFocus,
|
|
37
37
|
borderColor: props.borderColorFocus,
|
|
38
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
38
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 1px ${props.borderColorFocus}` : undefined
|
|
39
39
|
},
|
|
40
40
|
'&:not(:focus)': {
|
|
41
41
|
backgroundColor: props.backgroundColor,
|
|
@@ -45,13 +45,13 @@ const bgAndBorderColorStyles = (props, appearance) => css({
|
|
|
45
45
|
'&[data-invalid]:focus': {
|
|
46
46
|
backgroundColor: props.invalidRules.backgroundColorFocus,
|
|
47
47
|
borderColor: props.invalidRules.borderColorFocus,
|
|
48
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
48
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 1px ${props.invalidRules.borderColorFocus}` : undefined
|
|
49
49
|
},
|
|
50
50
|
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
51
51
|
'&[data-invalid]:not(:focus)': {
|
|
52
52
|
backgroundColor: props.invalidRules.backgroundColor,
|
|
53
53
|
borderColor: props.invalidRules.borderColor,
|
|
54
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
54
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 1px ${props.invalidRules.borderColor}` : undefined
|
|
55
55
|
},
|
|
56
56
|
// Disabled background and border styles should not be applied to components that
|
|
57
57
|
// have either no background or transparent background to begin with
|
|
@@ -82,7 +82,7 @@ const hoverBackgroundAndBorderStyles = props => css({
|
|
|
82
82
|
'&[data-invalid]': {
|
|
83
83
|
backgroundColor: props.invalidRules.backgroundColorHover,
|
|
84
84
|
borderColor: props.invalidRules.borderColor,
|
|
85
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
85
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 1px ${props.invalidRules.borderColor}` : undefined
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
});
|
|
@@ -108,18 +108,20 @@ const fontFamilyStyle = isMonospaced => css({
|
|
|
108
108
|
fontFamily: isMonospaced ? codeFontFamily : fontFamily
|
|
109
109
|
});
|
|
110
110
|
const borderPaddingAndHeightStyles = (minimumRows = 1, appearance) => {
|
|
111
|
-
const borderWidth = getBooleanFF('platform.design-system-team.
|
|
111
|
+
const borderWidth = getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? 1 : 2;
|
|
112
112
|
const horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
|
|
113
113
|
const borderHeight = borderWidth;
|
|
114
114
|
return css({
|
|
115
115
|
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
116
116
|
'&[data-compact]': {
|
|
117
117
|
minHeight: borderBoxMinHeightCompact(minimumRows, borderHeight),
|
|
118
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
|
|
118
119
|
padding: `${compactVerticalPadding}px ${horizontalPaddingWithoutBorderWidth}px`,
|
|
119
120
|
lineHeight: lineHeightCompact / fontSize
|
|
120
121
|
},
|
|
121
122
|
'&:not([data-compact])': {
|
|
122
123
|
minHeight: borderBoxMinHeight(minimumRows, borderHeight),
|
|
124
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
|
|
123
125
|
padding: `${verticalPadding}px ${horizontalPaddingWithoutBorderWidth}px`,
|
|
124
126
|
lineHeight: lineHeightBase / fontSize
|
|
125
127
|
}
|
|
@@ -135,7 +137,7 @@ const staticStyles = css({
|
|
|
135
137
|
position: 'relative',
|
|
136
138
|
flex: '1 1 100%',
|
|
137
139
|
borderRadius: borderRadius,
|
|
138
|
-
borderWidth: getBooleanFF('platform.design-system-team.
|
|
140
|
+
borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : borderWidth,
|
|
139
141
|
fontSize: fontSize,
|
|
140
142
|
outline: 'none',
|
|
141
143
|
overflow: 'auto',
|
package/dist/es2019/text-area.js
CHANGED
|
@@ -7,7 +7,7 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
|
|
|
7
7
|
import { borderWidth, getBaseStyles, themeStyles } from './styles';
|
|
8
8
|
import { Theme } from './theme';
|
|
9
9
|
const packageName = "@atlaskit/textarea";
|
|
10
|
-
const packageVersion = "4.7.
|
|
10
|
+
const packageVersion = "4.7.2";
|
|
11
11
|
const analyticsParams = {
|
|
12
12
|
componentName: 'textArea',
|
|
13
13
|
packageName,
|
|
@@ -107,7 +107,7 @@ const TextAreaWithTokens = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
107
107
|
rows: minimumRows
|
|
108
108
|
// TODO refactor to follow emotion styling rules
|
|
109
109
|
// see: https://product-fabric.atlassian.net/browse/DSP-6060
|
|
110
|
-
// eslint-disable-next-line @
|
|
110
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
111
111
|
,
|
|
112
112
|
css: textAreaStyles
|
|
113
113
|
}, rest));
|
package/dist/es2019/version.json
CHANGED
|
@@ -13,8 +13,8 @@ export var invalidBorderColor = {
|
|
|
13
13
|
dark: "var(--ds-border-danger, ".concat(R400, ")")
|
|
14
14
|
};
|
|
15
15
|
export var defaultBorderColor = {
|
|
16
|
-
light: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.
|
|
17
|
-
dark: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.
|
|
16
|
+
light: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
|
|
17
|
+
dark: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN40, ")")
|
|
18
18
|
};
|
|
19
19
|
export var defaultBorderColorFocus = {
|
|
20
20
|
light: "var(--ds-border-focused, ".concat(B100, ")"),
|
package/dist/esm/styles.js
CHANGED
|
@@ -39,7 +39,7 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
|
|
|
39
39
|
'&:focus': {
|
|
40
40
|
backgroundColor: props.backgroundColorFocus,
|
|
41
41
|
borderColor: props.borderColorFocus,
|
|
42
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
42
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.borderColorFocus) : undefined
|
|
43
43
|
},
|
|
44
44
|
'&:not(:focus)': {
|
|
45
45
|
backgroundColor: props.backgroundColor,
|
|
@@ -49,13 +49,13 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
|
|
|
49
49
|
'&[data-invalid]:focus': {
|
|
50
50
|
backgroundColor: props.invalidRules.backgroundColorFocus,
|
|
51
51
|
borderColor: props.invalidRules.borderColorFocus,
|
|
52
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
52
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColorFocus) : undefined
|
|
53
53
|
},
|
|
54
54
|
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
55
55
|
'&[data-invalid]:not(:focus)': {
|
|
56
56
|
backgroundColor: props.invalidRules.backgroundColor,
|
|
57
57
|
borderColor: props.invalidRules.borderColor,
|
|
58
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
58
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColor) : undefined
|
|
59
59
|
}
|
|
60
60
|
}, appearance === 'standard' ? {
|
|
61
61
|
'&:disabled:focus': {
|
|
@@ -87,7 +87,7 @@ var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(pro
|
|
|
87
87
|
'&[data-invalid]': {
|
|
88
88
|
backgroundColor: props.invalidRules.backgroundColorHover,
|
|
89
89
|
borderColor: props.invalidRules.borderColor,
|
|
90
|
-
boxShadow: getBooleanFF('platform.design-system-team.
|
|
90
|
+
boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColor) : undefined
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
});
|
|
@@ -120,18 +120,20 @@ var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
|
|
|
120
120
|
var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
|
|
121
121
|
var minimumRows = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
|
122
122
|
var appearance = arguments.length > 1 ? arguments[1] : undefined;
|
|
123
|
-
var borderWidth = getBooleanFF('platform.design-system-team.
|
|
123
|
+
var borderWidth = getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? 1 : 2;
|
|
124
124
|
var horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
|
|
125
125
|
var borderHeight = borderWidth;
|
|
126
126
|
return css({
|
|
127
127
|
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
128
128
|
'&[data-compact]': {
|
|
129
129
|
minHeight: borderBoxMinHeightCompact(minimumRows, borderHeight),
|
|
130
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
|
|
130
131
|
padding: "".concat(compactVerticalPadding, "px ").concat(horizontalPaddingWithoutBorderWidth, "px"),
|
|
131
132
|
lineHeight: lineHeightCompact / fontSize
|
|
132
133
|
},
|
|
133
134
|
'&:not([data-compact])': {
|
|
134
135
|
minHeight: borderBoxMinHeight(minimumRows, borderHeight),
|
|
136
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
|
|
135
137
|
padding: "".concat(verticalPadding, "px ").concat(horizontalPaddingWithoutBorderWidth, "px"),
|
|
136
138
|
lineHeight: lineHeightBase / fontSize
|
|
137
139
|
}
|
|
@@ -147,7 +149,7 @@ var staticStyles = css({
|
|
|
147
149
|
position: 'relative',
|
|
148
150
|
flex: '1 1 100%',
|
|
149
151
|
borderRadius: borderRadius,
|
|
150
|
-
borderWidth: getBooleanFF('platform.design-system-team.
|
|
152
|
+
borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : borderWidth,
|
|
151
153
|
fontSize: fontSize,
|
|
152
154
|
outline: 'none',
|
|
153
155
|
overflow: 'auto',
|
package/dist/esm/text-area.js
CHANGED
|
@@ -13,7 +13,7 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
|
|
|
13
13
|
import { borderWidth, getBaseStyles, themeStyles } from './styles';
|
|
14
14
|
import { Theme } from './theme';
|
|
15
15
|
var packageName = "@atlaskit/textarea";
|
|
16
|
-
var packageVersion = "4.7.
|
|
16
|
+
var packageVersion = "4.7.2";
|
|
17
17
|
var analyticsParams = {
|
|
18
18
|
componentName: 'textArea',
|
|
19
19
|
packageName: packageName,
|
|
@@ -121,7 +121,7 @@ var TextAreaWithTokens = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
121
121
|
rows: minimumRows
|
|
122
122
|
// TODO refactor to follow emotion styling rules
|
|
123
123
|
// see: https://product-fabric.atlassian.net/browse/DSP-6060
|
|
124
|
-
// eslint-disable-next-line @
|
|
124
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
125
125
|
,
|
|
126
126
|
css: textAreaStyles
|
|
127
127
|
}, rest));
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/textarea",
|
|
3
|
-
"version": "4.7.
|
|
3
|
+
"version": "4.7.2",
|
|
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/"
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"homepage": "https://atlassian.design/components/textarea/",
|
|
26
26
|
"atlassian": {
|
|
27
27
|
"team": "Design System Team",
|
|
28
|
-
"releaseModel": "
|
|
28
|
+
"releaseModel": "continuous",
|
|
29
29
|
"website": {
|
|
30
30
|
"name": "Text area",
|
|
31
31
|
"category": "Components"
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"@atlaskit/analytics-next": "^9.1.0",
|
|
43
43
|
"@atlaskit/platform-feature-flags": "^0.2.0",
|
|
44
44
|
"@atlaskit/theme": "^12.5.0",
|
|
45
|
-
"@atlaskit/tokens": "^1.
|
|
45
|
+
"@atlaskit/tokens": "^1.8.0",
|
|
46
46
|
"@babel/runtime": "^7.0.0",
|
|
47
47
|
"@emotion/react": "^11.7.1"
|
|
48
48
|
},
|
|
@@ -83,7 +83,8 @@
|
|
|
83
83
|
"ui-components": "lite-mode",
|
|
84
84
|
"analytics": "analytics-next",
|
|
85
85
|
"design-tokens": [
|
|
86
|
-
"color"
|
|
86
|
+
"color",
|
|
87
|
+
"spacing"
|
|
87
88
|
],
|
|
88
89
|
"styling": [
|
|
89
90
|
"static",
|
|
@@ -93,7 +94,7 @@
|
|
|
93
94
|
}
|
|
94
95
|
},
|
|
95
96
|
"platform-feature-flags": {
|
|
96
|
-
"platform.design-system-team.
|
|
97
|
+
"platform.design-system-team.border-checkbox_nyoiu": {
|
|
97
98
|
"type": "boolean"
|
|
98
99
|
}
|
|
99
100
|
},
|
|
@@ -0,0 +1,215 @@
|
|
|
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 { ComponentType } from 'react';
|
|
10
|
+
import { default as React_2 } from 'react';
|
|
11
|
+
import { ReactNode } from 'react';
|
|
12
|
+
import { ThemeProp } from '@atlaskit/theme/components';
|
|
13
|
+
import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
|
|
14
|
+
|
|
15
|
+
// @public (undocumented)
|
|
16
|
+
type Combine<First, Second> = Omit<First, keyof Second> & Second;
|
|
17
|
+
|
|
18
|
+
// @public (undocumented)
|
|
19
|
+
interface OwnProps extends WithAnalyticsEventsProps {
|
|
20
|
+
appearance?: 'none' | 'standard' | 'subtle';
|
|
21
|
+
defaultValue?: string;
|
|
22
|
+
isCompact?: boolean;
|
|
23
|
+
isDisabled?: boolean;
|
|
24
|
+
isInvalid?: boolean;
|
|
25
|
+
isMonospaced?: boolean;
|
|
26
|
+
isReadOnly?: boolean;
|
|
27
|
+
isRequired?: boolean;
|
|
28
|
+
maxHeight?: string;
|
|
29
|
+
minimumRows?: number;
|
|
30
|
+
name?: string;
|
|
31
|
+
onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
32
|
+
onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
|
|
33
|
+
onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
34
|
+
placeholder?: string;
|
|
35
|
+
resize?: 'auto' | 'horizontal' | 'none' | 'smart' | 'vertical';
|
|
36
|
+
spellCheck?: boolean;
|
|
37
|
+
testId?: string;
|
|
38
|
+
theme?: any;
|
|
39
|
+
value?: string;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// @public
|
|
43
|
+
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" | "typeof" | "unselectable" | "value" | "vocab" | "wrap"> & React_2.RefAttributes<HTMLTextAreaElement>>>;
|
|
44
|
+
export default TextArea;
|
|
45
|
+
|
|
46
|
+
// @public (undocumented)
|
|
47
|
+
export type TextAreaProps = Combine<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled' | 'readonly' | 'required'>, OwnProps>;
|
|
48
|
+
|
|
49
|
+
// @public @deprecated (undocumented)
|
|
50
|
+
export const Theme: {
|
|
51
|
+
Consumer: ComponentType< {
|
|
52
|
+
children: (tokens: ThemeTokens) => ReactNode;
|
|
53
|
+
} & ThemeProps>;
|
|
54
|
+
Provider: ComponentType< {
|
|
55
|
+
children?: ReactNode;
|
|
56
|
+
value?: ThemeProp<ThemeTokens, ThemeProps> | undefined;
|
|
57
|
+
}>;
|
|
58
|
+
useTheme: (props: ThemeProps) => ThemeTokens;
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
// @public (undocumented)
|
|
62
|
+
export type ThemeAppearance = 'none' | 'standard' | 'subtle';
|
|
63
|
+
|
|
64
|
+
// @public (undocumented)
|
|
65
|
+
export type ThemeProps = {
|
|
66
|
+
appearance: ThemeAppearance;
|
|
67
|
+
mode: 'dark' | 'light';
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
// @public @deprecated (undocumented)
|
|
71
|
+
export type ThemeTokens = {
|
|
72
|
+
borderColor: string;
|
|
73
|
+
borderColorFocus: string;
|
|
74
|
+
borderColorHover: string;
|
|
75
|
+
backgroundColor: string;
|
|
76
|
+
backgroundColorFocus: string;
|
|
77
|
+
backgroundColorHover: string;
|
|
78
|
+
disabledRules: {
|
|
79
|
+
backgroundColor: string;
|
|
80
|
+
backgroundColorFocus: string;
|
|
81
|
+
backgroundColorHover: string;
|
|
82
|
+
borderColor: string;
|
|
83
|
+
borderColorFocus: string;
|
|
84
|
+
textColor: string;
|
|
85
|
+
};
|
|
86
|
+
invalidRules: {
|
|
87
|
+
borderColor: string;
|
|
88
|
+
borderColorFocus: string;
|
|
89
|
+
backgroundColor: string;
|
|
90
|
+
backgroundColorFocus: string;
|
|
91
|
+
backgroundColorHover: string;
|
|
92
|
+
};
|
|
93
|
+
textColor: string;
|
|
94
|
+
placeholderTextColor: string;
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
// @public @deprecated (undocumented)
|
|
98
|
+
export const themeTokens: {
|
|
99
|
+
borderColor: {
|
|
100
|
+
standard: {
|
|
101
|
+
light: "var(--ds-border-input)";
|
|
102
|
+
dark: "var(--ds-border-input)";
|
|
103
|
+
};
|
|
104
|
+
subtle: {
|
|
105
|
+
light: string;
|
|
106
|
+
dark: string;
|
|
107
|
+
};
|
|
108
|
+
none: {
|
|
109
|
+
light: string;
|
|
110
|
+
dark: string;
|
|
111
|
+
};
|
|
112
|
+
};
|
|
113
|
+
borderColorFocus: {
|
|
114
|
+
standard: {
|
|
115
|
+
light: "var(--ds-border-focused)";
|
|
116
|
+
dark: "var(--ds-border-focused)";
|
|
117
|
+
};
|
|
118
|
+
subtle: {
|
|
119
|
+
light: "var(--ds-border-focused)";
|
|
120
|
+
dark: "var(--ds-border-focused)";
|
|
121
|
+
};
|
|
122
|
+
none: {
|
|
123
|
+
light: string;
|
|
124
|
+
dark: string;
|
|
125
|
+
};
|
|
126
|
+
};
|
|
127
|
+
backgroundColor: {
|
|
128
|
+
standard: {
|
|
129
|
+
light: "var(--ds-background-input)";
|
|
130
|
+
dark: "var(--ds-background-input)";
|
|
131
|
+
};
|
|
132
|
+
subtle: {
|
|
133
|
+
light: string;
|
|
134
|
+
dark: string;
|
|
135
|
+
};
|
|
136
|
+
none: {
|
|
137
|
+
light: string;
|
|
138
|
+
dark: string;
|
|
139
|
+
};
|
|
140
|
+
};
|
|
141
|
+
backgroundColorFocus: {
|
|
142
|
+
standard: {
|
|
143
|
+
light: "var(--ds-background-input-pressed)";
|
|
144
|
+
dark: "var(--ds-background-input-pressed)";
|
|
145
|
+
};
|
|
146
|
+
subtle: {
|
|
147
|
+
light: "var(--ds-background-input-pressed)";
|
|
148
|
+
dark: "var(--ds-background-input-pressed)";
|
|
149
|
+
};
|
|
150
|
+
none: {
|
|
151
|
+
light: string;
|
|
152
|
+
dark: string;
|
|
153
|
+
};
|
|
154
|
+
};
|
|
155
|
+
backgroundColorHover: {
|
|
156
|
+
standard: {
|
|
157
|
+
light: "var(--ds-background-input-hovered)";
|
|
158
|
+
dark: "var(--ds-background-input-hovered)";
|
|
159
|
+
};
|
|
160
|
+
subtle: {
|
|
161
|
+
light: "var(--ds-background-input-hovered)";
|
|
162
|
+
dark: "var(--ds-background-input-hovered)";
|
|
163
|
+
};
|
|
164
|
+
none: {
|
|
165
|
+
light: string;
|
|
166
|
+
dark: string;
|
|
167
|
+
};
|
|
168
|
+
};
|
|
169
|
+
disabledRules: {
|
|
170
|
+
light: {
|
|
171
|
+
backgroundColor: "var(--ds-background-disabled)";
|
|
172
|
+
backgroundColorFocus: "var(--ds-background-disabled)";
|
|
173
|
+
backgroundColorHover: "var(--ds-background-disabled)";
|
|
174
|
+
borderColor: "var(--ds-border-disabled)";
|
|
175
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
176
|
+
textColor: "var(--ds-text-disabled)";
|
|
177
|
+
};
|
|
178
|
+
dark: {
|
|
179
|
+
backgroundColor: "var(--ds-background-disabled)";
|
|
180
|
+
backgroundColorFocus: "var(--ds-background-disabled)";
|
|
181
|
+
backgroundColorHover: "var(--ds-background-disabled)";
|
|
182
|
+
borderColor: "var(--ds-border-disabled)";
|
|
183
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
184
|
+
textColor: "var(--ds-text-disabled)";
|
|
185
|
+
};
|
|
186
|
+
};
|
|
187
|
+
invalidRules: {
|
|
188
|
+
light: {
|
|
189
|
+
borderColor: "var(--ds-border-danger)";
|
|
190
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
191
|
+
backgroundColor: "var(--ds-background-input)";
|
|
192
|
+
backgroundColorFocus: "var(--ds-background-input-pressed)";
|
|
193
|
+
backgroundColorHover: "var(--ds-background-input-hovered)";
|
|
194
|
+
};
|
|
195
|
+
dark: {
|
|
196
|
+
borderColor: "var(--ds-border-danger)";
|
|
197
|
+
borderColorFocus: "var(--ds-border-focused)";
|
|
198
|
+
backgroundColor: "var(--ds-background-input)";
|
|
199
|
+
backgroundColorFocus: "var(--ds-background-input-pressed)";
|
|
200
|
+
backgroundColorHover: "var(--ds-background-input-hovered)";
|
|
201
|
+
};
|
|
202
|
+
};
|
|
203
|
+
textColor: {
|
|
204
|
+
light: "var(--ds-text)";
|
|
205
|
+
dark: "var(--ds-text)";
|
|
206
|
+
};
|
|
207
|
+
placeholderTextColor: {
|
|
208
|
+
light: "var(--ds-text-subtlest)";
|
|
209
|
+
dark: "var(--ds-text-subtlest)";
|
|
210
|
+
};
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
// (No @packageDocumentation comment for this package)
|
|
214
|
+
|
|
215
|
+
```
|