@atlaskit/textfield 6.2.0 → 6.3.1

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 (10) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/styles.js +12 -20
  3. package/dist/cjs/text-field.js +1 -1
  4. package/dist/es2019/styles.js +13 -23
  5. package/dist/es2019/text-field.js +1 -1
  6. package/dist/esm/styles.js +13 -23
  7. package/dist/esm/text-field.js +1 -1
  8. package/dist/types/styles.d.ts +8 -12
  9. package/dist/types-ts4.5/styles.d.ts +8 -12
  10. package/package.json +3 -12
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlaskit/textfield
2
2
 
3
+ ## 6.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#97073](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97073)
8
+ [`b6435f7c8d0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6435f7c8d0d) -
9
+ Internal changes to typography, no visual change.
10
+ - Updated dependencies
11
+
12
+ ## 6.3.0
13
+
14
+ ### Minor Changes
15
+
16
+ - [#94675](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94675)
17
+ [`5d9e1dccacca`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5d9e1dccacca) -
18
+ [ux] Update input border color token to meet 3:1 color contrast ratioLight theme:
19
+ color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #738496
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies
24
+
3
25
  ## 6.2.0
4
26
 
5
27
  ### Minor Changes
package/dist/cjs/styles.js CHANGED
@@ -6,13 +6,9 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.inputStyles = exports.containerStyles = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
9
  var _colors = require("@atlaskit/theme/colors");
11
- var _constants = require("@atlaskit/theme/constants");
12
10
  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; }
13
11
  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; }
14
- var fontSize = (0, _constants.fontSize)();
15
- var gridSize = (0, _constants.gridSize)();
16
12
  var backgroundColor = {
17
13
  standard: "var(--ds-background-input, ".concat(_colors.N10, ")"),
18
14
  subtle: 'transparent',
@@ -29,7 +25,7 @@ var backgroundColorHover = {
29
25
  none: 'transparent'
30
26
  };
31
27
  var borderColor = {
32
- standard: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
28
+ standard: "var(--ds-border-input, ".concat(_colors.N100, ")"),
33
29
  subtle: 'transparent',
34
30
  none: 'transparent'
35
31
  };
@@ -39,7 +35,7 @@ var borderColorFocus = {
39
35
  none: 'transparent'
40
36
  };
41
37
  var borderColorHover = {
42
- standard: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
38
+ standard: "var(--ds-border-input, ".concat(_colors.N100, ")"),
43
39
  subtle: "var(--ds-border-input, transparent)",
44
40
  none: 'transparent'
45
41
  };
@@ -56,7 +52,7 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
56
52
  '&:focus-within:not([data-disabled])': {
57
53
  backgroundColor: backgroundColorFocus[appearance],
58
54
  borderColor: borderColorFocus[appearance],
59
- boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance]) : undefined
55
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance])
60
56
  },
61
57
  '&[data-disabled]': _objectSpread({
62
58
  color: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
@@ -67,12 +63,12 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
67
63
  }),
68
64
  '&[data-invalid], &[data-invalid]:hover': {
69
65
  borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")"),
70
- boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")")) : undefined
66
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")"))
71
67
  },
72
68
  '&[data-invalid]:focus-within': {
73
69
  backgroundColor: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")"),
74
70
  borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
75
- boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")")) : undefined
71
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")"))
76
72
  },
77
73
  '@media screen and (-ms-high-contrast: active)': {
78
74
  '&[data-invalid]:focus-within': {
@@ -102,15 +98,15 @@ var containerStyles = exports.containerStyles = function containerStyles(appeara
102
98
  alignItems: 'center'
103
99
  }, getContainerTextBgAndBorderColor(appearance)), {}, {
104
100
  borderRadius: 3,
105
- borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : 2
106
- }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') && appearance !== 'none' ? {
101
+ borderWidth: "var(--ds-border-width, 1px)"
102
+ }, appearance !== 'none' ? {
107
103
  padding: "var(--ds-border-width, 1px)".concat(" 0")
108
104
  } : {}), {}, {
109
105
  borderStyle: appearance === 'none' ? 'none' : 'solid',
110
106
  boxSizing: 'border-box',
111
107
  display: 'flex',
112
108
  flex: '1 1 100%',
113
- fontSize: fontSize,
109
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
114
110
  justifyContent: 'space-between',
115
111
  maxWidth: getMaxWidth(width),
116
112
  overflow: 'hidden',
@@ -127,22 +123,18 @@ var inputStyles = exports.inputStyles = function inputStyles() {
127
123
  boxSizing: 'border-box',
128
124
  color: 'inherit',
129
125
  cursor: 'inherit',
130
- fontSize: fontSize,
126
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
131
127
  minWidth: '0',
132
128
  outline: 'none',
133
129
  width: '100%',
134
- lineHeight: gridSize * 2.5 / fontSize,
135
- fontFamily: (0, _constants.fontFamily)(),
136
130
  '&[data-monospaced]': {
137
- fontFamily: (0, _constants.codeFontFamily)()
131
+ fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
138
132
  },
139
133
  '&[data-compact]': {
140
- padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)"),
141
- height: "".concat((gridSize * 3.5 / fontSize).toFixed(2), "em")
134
+ padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
142
135
  },
143
136
  '&:not([data-compact])': {
144
- padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)"),
145
- height: "".concat((gridSize * 4.5 / fontSize).toFixed(2), "em")
137
+ padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
146
138
  },
147
139
  '&[disabled]': {
148
140
  // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
package/dist/cjs/text-field.js CHANGED
@@ -23,7 +23,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
23
23
  var analyticsParams = {
24
24
  componentName: 'textField',
25
25
  packageName: "@atlaskit/textfield",
26
- packageVersion: "6.2.0"
26
+ packageVersion: "6.3.1"
27
27
  };
28
28
  var TextfieldComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
29
29
  var _props$appearance = props.appearance,
package/dist/es2019/styles.js CHANGED
@@ -1,10 +1,4 @@
1
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
- import { B200, N0, N10, N100, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
3
- import { codeFontFamily, fontFamily, fontSize as getFontSize,
4
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
5
- gridSize as getGridSize } from '@atlaskit/theme/constants';
6
- const fontSize = getFontSize();
7
- const gridSize = getGridSize();
1
+ import { B200, N0, N10, N100, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
8
2
  const backgroundColor = {
9
3
  standard: `var(--ds-background-input, ${N10})`,
10
4
  subtle: 'transparent',
@@ -21,7 +15,7 @@ const backgroundColorHover = {
21
15
  none: 'transparent'
22
16
  };
23
17
  const borderColor = {
24
- standard: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
18
+ standard: `var(--ds-border-input, ${N100})`,
25
19
  subtle: 'transparent',
26
20
  none: 'transparent'
27
21
  };
@@ -31,7 +25,7 @@ const borderColorFocus = {
31
25
  none: 'transparent'
32
26
  };
33
27
  const borderColorHover = {
34
- standard: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
28
+ standard: `var(--ds-border-input, ${N100})`,
35
29
  subtle: "var(--ds-border-input, transparent)",
36
30
  none: 'transparent'
37
31
  };
@@ -47,7 +41,7 @@ const getContainerTextBgAndBorderColor = appearance => ({
47
41
  '&:focus-within:not([data-disabled])': {
48
42
  backgroundColor: backgroundColorFocus[appearance],
49
43
  borderColor: borderColorFocus[appearance],
50
- boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance]}` : undefined
44
+ boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance]}`
51
45
  },
52
46
  '&[data-disabled]': {
53
47
  color: `var(--ds-text-disabled, ${N70})`,
@@ -61,12 +55,12 @@ const getContainerTextBgAndBorderColor = appearance => ({
61
55
  },
62
56
  '&[data-invalid], &[data-invalid]:hover': {
63
57
  borderColor: `var(--ds-border-danger, ${R400})`,
64
- boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-danger, ${R400})`}` : undefined
58
+ boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-danger, ${R400})`}`
65
59
  },
66
60
  '&[data-invalid]:focus-within': {
67
61
  backgroundColor: `var(--ds-background-input-pressed, ${N0})`,
68
62
  borderColor: `var(--ds-border-focused, ${B200})`,
69
- boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B200})`}` : undefined
63
+ boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B200})`}`
70
64
  },
71
65
  '@media screen and (-ms-high-contrast: active)': {
72
66
  '&[data-invalid]:focus-within': {
@@ -92,16 +86,16 @@ export const containerStyles = (appearance, width) => ({
92
86
  alignItems: 'center',
93
87
  ...getContainerTextBgAndBorderColor(appearance),
94
88
  borderRadius: 3,
95
- borderWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : 2,
89
+ borderWidth: "var(--ds-border-width, 1px)",
96
90
  // add 1px padding on both top and bottom to keep the same overall height after border reduced from 2px to 1px under feature flag
97
- ...(getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') && appearance !== 'none' ? {
91
+ ...(appearance !== 'none' ? {
98
92
  padding: `${"var(--ds-border-width, 1px)"} 0`
99
93
  } : {}),
100
94
  borderStyle: appearance === 'none' ? 'none' : 'solid',
101
95
  boxSizing: 'border-box',
102
96
  display: 'flex',
103
97
  flex: '1 1 100%',
104
- fontSize,
98
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
105
99
  justifyContent: 'space-between',
106
100
  maxWidth: getMaxWidth(width),
107
101
  overflow: 'hidden',
@@ -116,22 +110,18 @@ export const inputStyles = () => ({
116
110
  boxSizing: 'border-box',
117
111
  color: 'inherit',
118
112
  cursor: 'inherit',
119
- fontSize,
113
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
120
114
  minWidth: '0',
121
115
  outline: 'none',
122
116
  width: '100%',
123
- lineHeight: gridSize * 2.5 / fontSize,
124
- fontFamily: fontFamily(),
125
117
  '&[data-monospaced]': {
126
- fontFamily: codeFontFamily()
118
+ fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
127
119
  },
128
120
  '&[data-compact]': {
129
- padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}`,
130
- height: `${(gridSize * 3.5 / fontSize).toFixed(2)}em`
121
+ padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}`
131
122
  },
132
123
  '&:not([data-compact])': {
133
- padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}`,
134
- height: `${(gridSize * 4.5 / fontSize).toFixed(2)}em`
124
+ padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}`
135
125
  },
136
126
  '&[disabled]': {
137
127
  // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
package/dist/es2019/text-field.js CHANGED
@@ -7,7 +7,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
7
7
  const analyticsParams = {
8
8
  componentName: 'textField',
9
9
  packageName: "@atlaskit/textfield",
10
- packageVersion: "6.2.0"
10
+ packageVersion: "6.3.1"
11
11
  };
12
12
  const TextfieldComponent = /*#__PURE__*/forwardRef((props, ref) => {
13
13
  const {
package/dist/esm/styles.js CHANGED
@@ -1,13 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  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; }
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
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
5
- import { B200, N0, N10, N100, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
6
- import { codeFontFamily, fontFamily, fontSize as getFontSize,
7
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
8
- gridSize as getGridSize } from '@atlaskit/theme/constants';
9
- var fontSize = getFontSize();
10
- var gridSize = getGridSize();
4
+ import { B200, N0, N10, N100, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
11
5
  var backgroundColor = {
12
6
  standard: "var(--ds-background-input, ".concat(N10, ")"),
13
7
  subtle: 'transparent',
@@ -24,7 +18,7 @@ var backgroundColorHover = {
24
18
  none: 'transparent'
25
19
  };
26
20
  var borderColor = {
27
- standard: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
21
+ standard: "var(--ds-border-input, ".concat(N100, ")"),
28
22
  subtle: 'transparent',
29
23
  none: 'transparent'
30
24
  };
@@ -34,7 +28,7 @@ var borderColorFocus = {
34
28
  none: 'transparent'
35
29
  };
36
30
  var borderColorHover = {
37
- standard: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
31
+ standard: "var(--ds-border-input, ".concat(N100, ")"),
38
32
  subtle: "var(--ds-border-input, transparent)",
39
33
  none: 'transparent'
40
34
  };
@@ -51,7 +45,7 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
51
45
  '&:focus-within:not([data-disabled])': {
52
46
  backgroundColor: backgroundColorFocus[appearance],
53
47
  borderColor: borderColorFocus[appearance],
54
- boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance]) : undefined
48
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance])
55
49
  },
56
50
  '&[data-disabled]': _objectSpread({
57
51
  color: "var(--ds-text-disabled, ".concat(N70, ")"),
@@ -62,12 +56,12 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
62
56
  }),
63
57
  '&[data-invalid], &[data-invalid]:hover': {
64
58
  borderColor: "var(--ds-border-danger, ".concat(R400, ")"),
65
- boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")")) : undefined
59
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")"))
66
60
  },
67
61
  '&[data-invalid]:focus-within': {
68
62
  backgroundColor: "var(--ds-background-input-pressed, ".concat(N0, ")"),
69
63
  borderColor: "var(--ds-border-focused, ".concat(B200, ")"),
70
- boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")")) : undefined
64
+ boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")"))
71
65
  },
72
66
  '@media screen and (-ms-high-contrast: active)': {
73
67
  '&[data-invalid]:focus-within': {
@@ -97,15 +91,15 @@ export var containerStyles = function containerStyles(appearance, width) {
97
91
  alignItems: 'center'
98
92
  }, getContainerTextBgAndBorderColor(appearance)), {}, {
99
93
  borderRadius: 3,
100
- borderWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : 2
101
- }, getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') && appearance !== 'none' ? {
94
+ borderWidth: "var(--ds-border-width, 1px)"
95
+ }, appearance !== 'none' ? {
102
96
  padding: "var(--ds-border-width, 1px)".concat(" 0")
103
97
  } : {}), {}, {
104
98
  borderStyle: appearance === 'none' ? 'none' : 'solid',
105
99
  boxSizing: 'border-box',
106
100
  display: 'flex',
107
101
  flex: '1 1 100%',
108
- fontSize: fontSize,
102
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
109
103
  justifyContent: 'space-between',
110
104
  maxWidth: getMaxWidth(width),
111
105
  overflow: 'hidden',
@@ -122,22 +116,18 @@ export var inputStyles = function inputStyles() {
122
116
  boxSizing: 'border-box',
123
117
  color: 'inherit',
124
118
  cursor: 'inherit',
125
- fontSize: fontSize,
119
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
126
120
  minWidth: '0',
127
121
  outline: 'none',
128
122
  width: '100%',
129
- lineHeight: gridSize * 2.5 / fontSize,
130
- fontFamily: fontFamily(),
131
123
  '&[data-monospaced]': {
132
- fontFamily: codeFontFamily()
124
+ fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
133
125
  },
134
126
  '&[data-compact]': {
135
- padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)"),
136
- height: "".concat((gridSize * 3.5 / fontSize).toFixed(2), "em")
127
+ padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
137
128
  },
138
129
  '&:not([data-compact])': {
139
- padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)"),
140
- height: "".concat((gridSize * 4.5 / fontSize).toFixed(2), "em")
130
+ padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
141
131
  },
142
132
  '&[disabled]': {
143
133
  // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
package/dist/esm/text-field.js CHANGED
@@ -13,7 +13,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
13
13
  var analyticsParams = {
14
14
  componentName: 'textField',
15
15
  packageName: "@atlaskit/textfield",
16
- packageVersion: "6.2.0"
16
+ packageVersion: "6.3.1"
17
17
  };
18
18
  var TextfieldComponent = /*#__PURE__*/forwardRef(function (props, ref) {
19
19
  var _props$appearance = props.appearance,
package/dist/types/styles.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import { Appearance } from './types';
1
+ import { type Appearance } from './types';
2
2
  export declare const containerStyles: (appearance: Appearance, width?: string | number) => {
3
3
  readonly borderStyle: "none" | "solid";
4
4
  readonly boxSizing: "border-box";
5
5
  readonly display: "flex";
6
6
  readonly flex: "1 1 100%";
7
- readonly fontSize: number;
7
+ readonly font: "var(--ds-font-body)";
8
8
  readonly justifyContent: "space-between";
9
9
  readonly maxWidth: string | number;
10
10
  readonly overflow: "hidden";
@@ -14,7 +14,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
14
14
  readonly pointerEvents: "auto";
15
15
  readonly padding?: string | undefined;
16
16
  readonly borderRadius: 3;
17
- readonly borderWidth: "var(--ds-border-width)" | 2;
17
+ readonly borderWidth: "var(--ds-border-width)";
18
18
  readonly backgroundColor: string;
19
19
  readonly borderColor: string;
20
20
  readonly color: "var(--ds-text)";
@@ -26,7 +26,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
26
26
  readonly '&:focus-within:not([data-disabled])': {
27
27
  backgroundColor: string;
28
28
  borderColor: string;
29
- boxShadow: string | undefined;
29
+ boxShadow: string;
30
30
  };
31
31
  readonly '&[data-disabled]': {
32
32
  backgroundColor?: "var(--ds-background-disabled)" | undefined;
@@ -36,12 +36,12 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
36
36
  };
37
37
  readonly '&[data-invalid], &[data-invalid]:hover': {
38
38
  borderColor: "var(--ds-border-danger)";
39
- boxShadow: string | undefined;
39
+ boxShadow: string;
40
40
  };
41
41
  readonly '&[data-invalid]:focus-within': {
42
42
  backgroundColor: "var(--ds-background-input-pressed)";
43
43
  borderColor: "var(--ds-border-focused)";
44
- boxShadow: string | undefined;
44
+ boxShadow: string;
45
45
  };
46
46
  readonly '@media screen and (-ms-high-contrast: active)': {
47
47
  '&[data-invalid]:focus-within': {
@@ -62,22 +62,18 @@ export declare const inputStyles: () => {
62
62
  readonly boxSizing: "border-box";
63
63
  readonly color: "inherit";
64
64
  readonly cursor: "inherit";
65
- readonly fontSize: number;
65
+ readonly font: "var(--ds-font-body)";
66
66
  readonly minWidth: "0";
67
67
  readonly outline: "none";
68
68
  readonly width: "100%";
69
- readonly lineHeight: number;
70
- readonly fontFamily: string;
71
69
  readonly '&[data-monospaced]': {
72
- readonly fontFamily: string;
70
+ readonly fontFamily: "var(--ds-font-family-monospace)";
73
71
  };
74
72
  readonly '&[data-compact]': {
75
73
  readonly padding: "var(--ds-space-050) var(--ds-space-075)";
76
- readonly height: `${string}em`;
77
74
  };
78
75
  readonly '&:not([data-compact])': {
79
76
  readonly padding: "var(--ds-space-100) var(--ds-space-075)";
80
- readonly height: `${string}em`;
81
77
  };
82
78
  readonly '&[disabled]': {
83
79
  readonly WebkitTextFillColor: "var(--ds-text-disabled)";
package/dist/types-ts4.5/styles.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import { Appearance } from './types';
1
+ import { type Appearance } from './types';
2
2
  export declare const containerStyles: (appearance: Appearance, width?: string | number) => {
3
3
  readonly borderStyle: "none" | "solid";
4
4
  readonly boxSizing: "border-box";
5
5
  readonly display: "flex";
6
6
  readonly flex: "1 1 100%";
7
- readonly fontSize: number;
7
+ readonly font: "var(--ds-font-body)";
8
8
  readonly justifyContent: "space-between";
9
9
  readonly maxWidth: string | number;
10
10
  readonly overflow: "hidden";
@@ -14,7 +14,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
14
14
  readonly pointerEvents: "auto";
15
15
  readonly padding?: string | undefined;
16
16
  readonly borderRadius: 3;
17
- readonly borderWidth: "var(--ds-border-width)" | 2;
17
+ readonly borderWidth: "var(--ds-border-width)";
18
18
  readonly backgroundColor: string;
19
19
  readonly borderColor: string;
20
20
  readonly color: "var(--ds-text)";
@@ -26,7 +26,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
26
26
  readonly '&:focus-within:not([data-disabled])': {
27
27
  backgroundColor: string;
28
28
  borderColor: string;
29
- boxShadow: string | undefined;
29
+ boxShadow: string;
30
30
  };
31
31
  readonly '&[data-disabled]': {
32
32
  backgroundColor?: "var(--ds-background-disabled)" | undefined;
@@ -36,12 +36,12 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
36
36
  };
37
37
  readonly '&[data-invalid], &[data-invalid]:hover': {
38
38
  borderColor: "var(--ds-border-danger)";
39
- boxShadow: string | undefined;
39
+ boxShadow: string;
40
40
  };
41
41
  readonly '&[data-invalid]:focus-within': {
42
42
  backgroundColor: "var(--ds-background-input-pressed)";
43
43
  borderColor: "var(--ds-border-focused)";
44
- boxShadow: string | undefined;
44
+ boxShadow: string;
45
45
  };
46
46
  readonly '@media screen and (-ms-high-contrast: active)': {
47
47
  '&[data-invalid]:focus-within': {
@@ -62,22 +62,18 @@ export declare const inputStyles: () => {
62
62
  readonly boxSizing: "border-box";
63
63
  readonly color: "inherit";
64
64
  readonly cursor: "inherit";
65
- readonly fontSize: number;
65
+ readonly font: "var(--ds-font-body)";
66
66
  readonly minWidth: "0";
67
67
  readonly outline: "none";
68
68
  readonly width: "100%";
69
- readonly lineHeight: number;
70
- readonly fontFamily: string;
71
69
  readonly '&[data-monospaced]': {
72
- readonly fontFamily: string;
70
+ readonly fontFamily: "var(--ds-font-family-monospace)";
73
71
  };
74
72
  readonly '&[data-compact]': {
75
73
  readonly padding: "var(--ds-space-050) var(--ds-space-075)";
76
- readonly height: `${string}em`;
77
74
  };
78
75
  readonly '&:not([data-compact])': {
79
76
  readonly padding: "var(--ds-space-100) var(--ds-space-075)";
80
- readonly height: `${string}em`;
81
77
  };
82
78
  readonly '&[disabled]': {
83
79
  readonly WebkitTextFillColor: "var(--ds-text-disabled)";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "6.2.0",
3
+ "version": "6.3.1",
4
4
  "description": "A text field is an input that allows a user to write or edit text.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -28,9 +28,8 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@atlaskit/analytics-next": "^9.3.0",
31
- "@atlaskit/platform-feature-flags": "^0.2.0",
32
- "@atlaskit/theme": "^12.7.0",
33
- "@atlaskit/tokens": "^1.44.0",
31
+ "@atlaskit/theme": "^12.8.0",
32
+ "@atlaskit/tokens": "^1.46.0",
34
33
  "@babel/runtime": "^7.0.0",
35
34
  "@emotion/react": "^11.7.1"
36
35
  },
@@ -91,14 +90,6 @@
91
90
  "af:exports": {
92
91
  ".": "./src/index.tsx"
93
92
  },
94
- "platform-feature-flags": {
95
- "platform.design-system-team.border-checkbox_nyoiu": {
96
- "type": "boolean"
97
- },
98
- "platform.design-system-team.update-input-border-wdith_5abwv": {
99
- "type": "boolean"
100
- }
101
- },
102
93
  "homepage": "https://atlassian.design/components/textfield/",
103
94
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
104
95
  }