@atlaskit/textfield 6.5.5 → 6.6.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.
Files changed (10) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/styles.js +15 -5
  3. package/dist/cjs/text-field.js +1 -1
  4. package/dist/es2019/styles.js +14 -3
  5. package/dist/es2019/text-field.js +1 -1
  6. package/dist/esm/styles.js +15 -5
  7. package/dist/esm/text-field.js +1 -1
  8. package/dist/types/styles.d.ts +129 -3
  9. package/dist/types-ts4.5/styles.d.ts +129 -3
  10. package/package.json +11 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/textfield
2
2
 
3
+ ## 6.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#161890](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161890)
8
+ [`6735226160872`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6735226160872) -
9
+ Update the font size and padding styles for the text field component at the `xs` breakpoint. The
10
+ font size will be increased to 16px to prevent IOS Safari from zooming in on the text field when
11
+ it is focused. Styles for larger breakpoints will remain unchanged.
12
+
13
+ These changes are currently behind a feature gate and will be evaluated for effectiveness. If
14
+ successful, they will be included in a future release.
15
+
3
16
  ## 6.5.5
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/styles.js CHANGED
@@ -6,6 +6,8 @@ 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
+ var _primitives = require("@atlaskit/primitives");
9
11
  var _colors = require("@atlaskit/theme/colors");
10
12
  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; }
11
13
  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; }
@@ -117,13 +119,13 @@ var containerStyles = exports.containerStyles = function containerStyles(appeara
117
119
  });
118
120
  };
119
121
  var inputStyles = exports.inputStyles = function inputStyles() {
120
- return {
122
+ return (0, _defineProperty2.default)({
121
123
  backgroundColor: 'transparent',
122
124
  border: 0,
123
125
  boxSizing: 'border-box',
124
126
  color: 'inherit',
125
127
  cursor: 'inherit',
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)",
128
+ font: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
127
129
  minWidth: '0',
128
130
  outline: 'none',
129
131
  width: '100%',
@@ -131,10 +133,10 @@ var inputStyles = exports.inputStyles = function inputStyles() {
131
133
  fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
132
134
  },
133
135
  '&[data-compact]': {
134
- padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
136
+ padding: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)") : "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
135
137
  },
136
138
  '&:not([data-compact])': {
137
- padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
139
+ padding: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-075, 6px)") : "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
138
140
  },
139
141
  '&[disabled]': {
140
142
  // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
@@ -163,5 +165,13 @@ var inputStyles = exports.inputStyles = function inputStyles() {
163
165
  color: 'GrayText'
164
166
  }
165
167
  }
166
- };
168
+ }, "".concat(_primitives.media.above.xs), {
169
+ font: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : undefined,
170
+ '&[data-compact]': {
171
+ padding: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)") : undefined
172
+ },
173
+ '&:not([data-compact])': {
174
+ padding: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)") : undefined
175
+ }
176
+ });
167
177
  };
package/dist/cjs/text-field.js CHANGED
@@ -27,7 +27,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
27
27
  var analyticsParams = {
28
28
  componentName: 'textField',
29
29
  packageName: "@atlaskit/textfield",
30
- packageVersion: "6.5.5"
30
+ packageVersion: "6.6.0"
31
31
  };
32
32
 
33
33
  /**
package/dist/es2019/styles.js CHANGED
@@ -1,3 +1,5 @@
1
+ import { fg } from '@atlaskit/platform-feature-flags';
2
+ import { media } from '@atlaskit/primitives';
1
3
  import { B200, N0, N10, N100, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
2
4
  const backgroundColor = {
3
5
  standard: `var(--ds-background-input, ${N10})`,
@@ -110,7 +112,7 @@ export const inputStyles = () => ({
110
112
  boxSizing: 'border-box',
111
113
  color: 'inherit',
112
114
  cursor: 'inherit',
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)",
115
+ font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
114
116
  minWidth: '0',
115
117
  outline: 'none',
116
118
  width: '100%',
@@ -118,10 +120,10 @@ export const inputStyles = () => ({
118
120
  fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
119
121
  },
120
122
  '&[data-compact]': {
121
- padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}`
123
+ padding: fg('platform_design_system_team_safari_input_fix') ? `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"}` : `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}`
122
124
  },
123
125
  '&:not([data-compact])': {
124
- padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}`
126
+ padding: fg('platform_design_system_team_safari_input_fix') ? `${"var(--ds-space-075, 6px)"} ${"var(--ds-space-075, 6px)"}` : `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}`
125
127
  },
126
128
  '&[disabled]': {
127
129
  // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
@@ -149,5 +151,14 @@ export const inputStyles = () => ({
149
151
  '&[disabled]': {
150
152
  color: 'GrayText'
151
153
  }
154
+ },
155
+ [`${media.above.xs}`]: {
156
+ font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : undefined,
157
+ '&[data-compact]': {
158
+ padding: fg('platform_design_system_team_safari_input_fix') ? `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}` : undefined
159
+ },
160
+ '&:not([data-compact])': {
161
+ padding: fg('platform_design_system_team_safari_input_fix') ? `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}` : undefined
162
+ }
152
163
  }
153
164
  });
package/dist/es2019/text-field.js CHANGED
@@ -12,7 +12,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
12
12
  const analyticsParams = {
13
13
  componentName: 'textField',
14
14
  packageName: "@atlaskit/textfield",
15
- packageVersion: "6.5.5"
15
+ packageVersion: "6.6.0"
16
16
  };
17
17
 
18
18
  /**
package/dist/esm/styles.js CHANGED
@@ -1,6 +1,8 @@
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 { fg } from '@atlaskit/platform-feature-flags';
5
+ import { media } from '@atlaskit/primitives';
4
6
  import { B200, N0, N10, N100, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
5
7
  var backgroundColor = {
6
8
  standard: "var(--ds-background-input, ".concat(N10, ")"),
@@ -110,13 +112,13 @@ export var containerStyles = function containerStyles(appearance, width) {
110
112
  });
111
113
  };
112
114
  export var inputStyles = function inputStyles() {
113
- return {
115
+ return _defineProperty({
114
116
  backgroundColor: 'transparent',
115
117
  border: 0,
116
118
  boxSizing: 'border-box',
117
119
  color: 'inherit',
118
120
  cursor: 'inherit',
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)",
121
+ font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
120
122
  minWidth: '0',
121
123
  outline: 'none',
122
124
  width: '100%',
@@ -124,10 +126,10 @@ export var inputStyles = function inputStyles() {
124
126
  fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
125
127
  },
126
128
  '&[data-compact]': {
127
- padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
129
+ padding: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)") : "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
128
130
  },
129
131
  '&:not([data-compact])': {
130
- padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
132
+ padding: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-075, 6px)") : "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
131
133
  },
132
134
  '&[disabled]': {
133
135
  // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
@@ -156,5 +158,13 @@ export var inputStyles = function inputStyles() {
156
158
  color: 'GrayText'
157
159
  }
158
160
  }
159
- };
161
+ }, "".concat(media.above.xs), {
162
+ font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : undefined,
163
+ '&[data-compact]': {
164
+ padding: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)") : undefined
165
+ },
166
+ '&:not([data-compact])': {
167
+ padding: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)") : undefined
168
+ }
169
+ });
160
170
  };
package/dist/esm/text-field.js CHANGED
@@ -18,7 +18,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
18
18
  var analyticsParams = {
19
19
  componentName: 'textField',
20
20
  packageName: "@atlaskit/textfield",
21
- packageVersion: "6.5.5"
21
+ packageVersion: "6.6.0"
22
22
  };
23
23
 
24
24
  /**
package/dist/types/styles.d.ts CHANGED
@@ -57,12 +57,138 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
57
57
  readonly alignItems: "center";
58
58
  };
59
59
  export declare const inputStyles: () => {
60
+ readonly [x: string]: 0 | "none" | "transparent" | "100%" | "border-box" | "var(--ds-font-body)" | "inherit" | "var(--ds-font-body-large)" | "0" | {
61
+ readonly fontFamily: "var(--ds-font-family-code)";
62
+ readonly padding?: undefined;
63
+ readonly WebkitTextFillColor?: undefined;
64
+ readonly display?: undefined;
65
+ readonly boxShadow?: undefined;
66
+ readonly textOverflow?: undefined;
67
+ readonly color?: undefined;
68
+ readonly '&:disabled'?: undefined;
69
+ readonly '&[disabled]'?: undefined;
70
+ readonly font?: undefined;
71
+ readonly '&[data-compact]'?: undefined;
72
+ readonly '&:not([data-compact])'?: undefined;
73
+ } | {
74
+ readonly padding: string;
75
+ readonly fontFamily?: undefined;
76
+ readonly WebkitTextFillColor?: undefined;
77
+ readonly display?: undefined;
78
+ readonly boxShadow?: undefined;
79
+ readonly textOverflow?: undefined;
80
+ readonly color?: undefined;
81
+ readonly '&:disabled'?: undefined;
82
+ readonly '&[disabled]'?: undefined;
83
+ readonly font?: undefined;
84
+ readonly '&[data-compact]'?: undefined;
85
+ readonly '&:not([data-compact])'?: undefined;
86
+ } | {
87
+ readonly WebkitTextFillColor: "var(--ds-text-disabled)";
88
+ readonly fontFamily?: undefined;
89
+ readonly padding?: undefined;
90
+ readonly display?: undefined;
91
+ readonly boxShadow?: undefined;
92
+ readonly textOverflow?: undefined;
93
+ readonly color?: undefined;
94
+ readonly '&:disabled'?: undefined;
95
+ readonly '&[disabled]'?: undefined;
96
+ readonly font?: undefined;
97
+ readonly '&[data-compact]'?: undefined;
98
+ readonly '&:not([data-compact])'?: undefined;
99
+ } | {
100
+ readonly display: "none";
101
+ readonly fontFamily?: undefined;
102
+ readonly padding?: undefined;
103
+ readonly WebkitTextFillColor?: undefined;
104
+ readonly boxShadow?: undefined;
105
+ readonly textOverflow?: undefined;
106
+ readonly color?: undefined;
107
+ readonly '&:disabled'?: undefined;
108
+ readonly '&[disabled]'?: undefined;
109
+ readonly font?: undefined;
110
+ readonly '&[data-compact]'?: undefined;
111
+ readonly '&:not([data-compact])'?: undefined;
112
+ } | {
113
+ readonly boxShadow: "none";
114
+ readonly fontFamily?: undefined;
115
+ readonly padding?: undefined;
116
+ readonly WebkitTextFillColor?: undefined;
117
+ readonly display?: undefined;
118
+ readonly textOverflow?: undefined;
119
+ readonly color?: undefined;
120
+ readonly '&:disabled'?: undefined;
121
+ readonly '&[disabled]'?: undefined;
122
+ readonly font?: undefined;
123
+ readonly '&[data-compact]'?: undefined;
124
+ readonly '&:not([data-compact])'?: undefined;
125
+ } | {
126
+ readonly textOverflow: "ellipsis";
127
+ readonly fontFamily?: undefined;
128
+ readonly padding?: undefined;
129
+ readonly WebkitTextFillColor?: undefined;
130
+ readonly display?: undefined;
131
+ readonly boxShadow?: undefined;
132
+ readonly color?: undefined;
133
+ readonly '&:disabled'?: undefined;
134
+ readonly '&[disabled]'?: undefined;
135
+ readonly font?: undefined;
136
+ readonly '&[data-compact]'?: undefined;
137
+ readonly '&:not([data-compact])'?: undefined;
138
+ } | {
139
+ readonly color: "var(--ds-text-subtlest)";
140
+ readonly '&:disabled': {
141
+ readonly color: "var(--ds-text-disabled)";
142
+ };
143
+ readonly fontFamily?: undefined;
144
+ readonly padding?: undefined;
145
+ readonly WebkitTextFillColor?: undefined;
146
+ readonly display?: undefined;
147
+ readonly boxShadow?: undefined;
148
+ readonly textOverflow?: undefined;
149
+ readonly '&[disabled]'?: undefined;
150
+ readonly font?: undefined;
151
+ readonly '&[data-compact]'?: undefined;
152
+ readonly '&:not([data-compact])'?: undefined;
153
+ } | {
154
+ readonly '&[disabled]': {
155
+ readonly color: "GrayText";
156
+ };
157
+ readonly fontFamily?: undefined;
158
+ readonly padding?: undefined;
159
+ readonly WebkitTextFillColor?: undefined;
160
+ readonly display?: undefined;
161
+ readonly boxShadow?: undefined;
162
+ readonly textOverflow?: undefined;
163
+ readonly color?: undefined;
164
+ readonly '&:disabled'?: undefined;
165
+ readonly font?: undefined;
166
+ readonly '&[data-compact]'?: undefined;
167
+ readonly '&:not([data-compact])'?: undefined;
168
+ } | {
169
+ readonly font: "var(--ds-font-body)" | undefined;
170
+ readonly '&[data-compact]': {
171
+ readonly padding: string | undefined;
172
+ };
173
+ readonly '&:not([data-compact])': {
174
+ readonly padding: string | undefined;
175
+ };
176
+ readonly fontFamily?: undefined;
177
+ readonly padding?: undefined;
178
+ readonly WebkitTextFillColor?: undefined;
179
+ readonly display?: undefined;
180
+ readonly boxShadow?: undefined;
181
+ readonly textOverflow?: undefined;
182
+ readonly color?: undefined;
183
+ readonly '&:disabled'?: undefined;
184
+ readonly '&[disabled]'?: undefined;
185
+ };
60
186
  readonly backgroundColor: "transparent";
61
187
  readonly border: 0;
62
188
  readonly boxSizing: "border-box";
63
189
  readonly color: "inherit";
64
190
  readonly cursor: "inherit";
65
- readonly font: "var(--ds-font-body)";
191
+ readonly font: "var(--ds-font-body)" | "var(--ds-font-body-large)";
66
192
  readonly minWidth: "0";
67
193
  readonly outline: "none";
68
194
  readonly width: "100%";
@@ -70,10 +196,10 @@ export declare const inputStyles: () => {
70
196
  readonly fontFamily: "var(--ds-font-family-code)";
71
197
  };
72
198
  readonly '&[data-compact]': {
73
- readonly padding: "var(--ds-space-050) var(--ds-space-075)";
199
+ readonly padding: string;
74
200
  };
75
201
  readonly '&:not([data-compact])': {
76
- readonly padding: "var(--ds-space-100) var(--ds-space-075)";
202
+ readonly padding: string;
77
203
  };
78
204
  readonly '&[disabled]': {
79
205
  readonly WebkitTextFillColor: "var(--ds-text-disabled)";
package/dist/types-ts4.5/styles.d.ts CHANGED
@@ -57,12 +57,138 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
57
57
  readonly alignItems: "center";
58
58
  };
59
59
  export declare const inputStyles: () => {
60
+ readonly [x: string]: 0 | "none" | "transparent" | "100%" | "border-box" | "var(--ds-font-body)" | "inherit" | "var(--ds-font-body-large)" | "0" | {
61
+ readonly fontFamily: "var(--ds-font-family-code)";
62
+ readonly padding?: undefined;
63
+ readonly WebkitTextFillColor?: undefined;
64
+ readonly display?: undefined;
65
+ readonly boxShadow?: undefined;
66
+ readonly textOverflow?: undefined;
67
+ readonly color?: undefined;
68
+ readonly '&:disabled'?: undefined;
69
+ readonly '&[disabled]'?: undefined;
70
+ readonly font?: undefined;
71
+ readonly '&[data-compact]'?: undefined;
72
+ readonly '&:not([data-compact])'?: undefined;
73
+ } | {
74
+ readonly padding: string;
75
+ readonly fontFamily?: undefined;
76
+ readonly WebkitTextFillColor?: undefined;
77
+ readonly display?: undefined;
78
+ readonly boxShadow?: undefined;
79
+ readonly textOverflow?: undefined;
80
+ readonly color?: undefined;
81
+ readonly '&:disabled'?: undefined;
82
+ readonly '&[disabled]'?: undefined;
83
+ readonly font?: undefined;
84
+ readonly '&[data-compact]'?: undefined;
85
+ readonly '&:not([data-compact])'?: undefined;
86
+ } | {
87
+ readonly WebkitTextFillColor: "var(--ds-text-disabled)";
88
+ readonly fontFamily?: undefined;
89
+ readonly padding?: undefined;
90
+ readonly display?: undefined;
91
+ readonly boxShadow?: undefined;
92
+ readonly textOverflow?: undefined;
93
+ readonly color?: undefined;
94
+ readonly '&:disabled'?: undefined;
95
+ readonly '&[disabled]'?: undefined;
96
+ readonly font?: undefined;
97
+ readonly '&[data-compact]'?: undefined;
98
+ readonly '&:not([data-compact])'?: undefined;
99
+ } | {
100
+ readonly display: "none";
101
+ readonly fontFamily?: undefined;
102
+ readonly padding?: undefined;
103
+ readonly WebkitTextFillColor?: undefined;
104
+ readonly boxShadow?: undefined;
105
+ readonly textOverflow?: undefined;
106
+ readonly color?: undefined;
107
+ readonly '&:disabled'?: undefined;
108
+ readonly '&[disabled]'?: undefined;
109
+ readonly font?: undefined;
110
+ readonly '&[data-compact]'?: undefined;
111
+ readonly '&:not([data-compact])'?: undefined;
112
+ } | {
113
+ readonly boxShadow: "none";
114
+ readonly fontFamily?: undefined;
115
+ readonly padding?: undefined;
116
+ readonly WebkitTextFillColor?: undefined;
117
+ readonly display?: undefined;
118
+ readonly textOverflow?: undefined;
119
+ readonly color?: undefined;
120
+ readonly '&:disabled'?: undefined;
121
+ readonly '&[disabled]'?: undefined;
122
+ readonly font?: undefined;
123
+ readonly '&[data-compact]'?: undefined;
124
+ readonly '&:not([data-compact])'?: undefined;
125
+ } | {
126
+ readonly textOverflow: "ellipsis";
127
+ readonly fontFamily?: undefined;
128
+ readonly padding?: undefined;
129
+ readonly WebkitTextFillColor?: undefined;
130
+ readonly display?: undefined;
131
+ readonly boxShadow?: undefined;
132
+ readonly color?: undefined;
133
+ readonly '&:disabled'?: undefined;
134
+ readonly '&[disabled]'?: undefined;
135
+ readonly font?: undefined;
136
+ readonly '&[data-compact]'?: undefined;
137
+ readonly '&:not([data-compact])'?: undefined;
138
+ } | {
139
+ readonly color: "var(--ds-text-subtlest)";
140
+ readonly '&:disabled': {
141
+ readonly color: "var(--ds-text-disabled)";
142
+ };
143
+ readonly fontFamily?: undefined;
144
+ readonly padding?: undefined;
145
+ readonly WebkitTextFillColor?: undefined;
146
+ readonly display?: undefined;
147
+ readonly boxShadow?: undefined;
148
+ readonly textOverflow?: undefined;
149
+ readonly '&[disabled]'?: undefined;
150
+ readonly font?: undefined;
151
+ readonly '&[data-compact]'?: undefined;
152
+ readonly '&:not([data-compact])'?: undefined;
153
+ } | {
154
+ readonly '&[disabled]': {
155
+ readonly color: "GrayText";
156
+ };
157
+ readonly fontFamily?: undefined;
158
+ readonly padding?: undefined;
159
+ readonly WebkitTextFillColor?: undefined;
160
+ readonly display?: undefined;
161
+ readonly boxShadow?: undefined;
162
+ readonly textOverflow?: undefined;
163
+ readonly color?: undefined;
164
+ readonly '&:disabled'?: undefined;
165
+ readonly font?: undefined;
166
+ readonly '&[data-compact]'?: undefined;
167
+ readonly '&:not([data-compact])'?: undefined;
168
+ } | {
169
+ readonly font: "var(--ds-font-body)" | undefined;
170
+ readonly '&[data-compact]': {
171
+ readonly padding: string | undefined;
172
+ };
173
+ readonly '&:not([data-compact])': {
174
+ readonly padding: string | undefined;
175
+ };
176
+ readonly fontFamily?: undefined;
177
+ readonly padding?: undefined;
178
+ readonly WebkitTextFillColor?: undefined;
179
+ readonly display?: undefined;
180
+ readonly boxShadow?: undefined;
181
+ readonly textOverflow?: undefined;
182
+ readonly color?: undefined;
183
+ readonly '&:disabled'?: undefined;
184
+ readonly '&[disabled]'?: undefined;
185
+ };
60
186
  readonly backgroundColor: "transparent";
61
187
  readonly border: 0;
62
188
  readonly boxSizing: "border-box";
63
189
  readonly color: "inherit";
64
190
  readonly cursor: "inherit";
65
- readonly font: "var(--ds-font-body)";
191
+ readonly font: "var(--ds-font-body)" | "var(--ds-font-body-large)";
66
192
  readonly minWidth: "0";
67
193
  readonly outline: "none";
68
194
  readonly width: "100%";
@@ -70,10 +196,10 @@ export declare const inputStyles: () => {
70
196
  readonly fontFamily: "var(--ds-font-family-code)";
71
197
  };
72
198
  readonly '&[data-compact]': {
73
- readonly padding: "var(--ds-space-050) var(--ds-space-075)";
199
+ readonly padding: string;
74
200
  };
75
201
  readonly '&:not([data-compact])': {
76
- readonly padding: "var(--ds-space-100) var(--ds-space-075)";
202
+ readonly padding: string;
77
203
  };
78
204
  readonly '&[disabled]': {
79
205
  readonly WebkitTextFillColor: "var(--ds-text-disabled)";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "6.5.5",
3
+ "version": "6.6.0",
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/"
@@ -21,13 +21,15 @@
21
21
  "runReact18": true,
22
22
  "website": {
23
23
  "name": "Text field",
24
- "category": "Components"
24
+ "category": "Forms and input"
25
25
  }
26
26
  },
27
27
  "dependencies": {
28
28
  "@atlaskit/analytics-next": "^10.1.0",
29
+ "@atlaskit/platform-feature-flags": "^0.3.0",
30
+ "@atlaskit/primitives": "^13.0.0",
29
31
  "@atlaskit/theme": "^14.0.0",
30
- "@atlaskit/tokens": "^2.2.0",
32
+ "@atlaskit/tokens": "^2.3.0",
31
33
  "@babel/runtime": "^7.0.0",
32
34
  "@emotion/react": "^11.7.1"
33
35
  },
@@ -87,5 +89,10 @@
87
89
  "af:exports": {
88
90
  ".": "./src/index.tsx"
89
91
  },
90
- "homepage": "https://atlassian.design/components/textfield/"
92
+ "homepage": "https://atlassian.design/components/textfield/",
93
+ "platform-feature-flags": {
94
+ "platform_design_system_team_safari_input_fix": {
95
+ "type": "boolean"
96
+ }
97
+ }
91
98
  }