@atlaskit/textfield 6.5.5 → 6.7.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 +29 -0
  2. package/dist/cjs/styles.js +20 -7
  3. package/dist/cjs/text-field.js +1 -1
  4. package/dist/es2019/styles.js +19 -4
  5. package/dist/es2019/text-field.js +1 -1
  6. package/dist/esm/styles.js +20 -7
  7. package/dist/esm/text-field.js +1 -1
  8. package/dist/types/styles.d.ts +15 -3
  9. package/dist/types-ts4.5/styles.d.ts +15 -3
  10. package/package.json +12 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,34 @@
1
1
  # @atlaskit/textfield
2
2
 
3
+ ## 6.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#173737](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/173737)
8
+ [`667640085e5c7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/667640085e5c7) -
9
+ Update the font size for the textarea and select components at the `xs` breakpoint. The font size
10
+ will be increased to 16px to prevent IOS Safari from zooming in on the text field when it is
11
+ focused. Styles for larger breakpoints will remain unchanged.
12
+
13
+ Apply a fix to the textfield component to ensure monospace is correctly applied to the input at
14
+ the `media.above.xs` breakpoint.
15
+
16
+ These changes are currently behind a feature gate and will be evaluated for effectiveness. If
17
+ successful, they will be included in a future release.
18
+
19
+ ## 6.6.0
20
+
21
+ ### Minor Changes
22
+
23
+ - [#161890](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161890)
24
+ [`6735226160872`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6735226160872) -
25
+ Update the font size and padding styles for the text field component at the `xs` breakpoint. The
26
+ font size will be increased to 16px to prevent IOS Safari from zooming in on the text field when
27
+ it is focused. Styles for larger breakpoints will remain unchanged.
28
+
29
+ These changes are currently behind a feature gate and will be evaluated for effectiveness. If
30
+ successful, they will be included in a future release.
31
+
3
32
  ## 6.5.5
4
33
 
5
34
  ### 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,24 +119,27 @@ 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%',
130
- '&[data-monospaced]': {
132
+ '&[data-monospaced]': (0, _defineProperty2.default)({
131
133
  fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
132
- },
134
+ }, _primitives.media.above.xs, {
135
+ // Reapply the monospaced font family as the font declaration in a breakpoint on the root will override it otherwise
136
+ fontFamily: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)" : undefined
137
+ }),
133
138
  '&[data-compact]': {
134
- padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
139
+ 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
140
  },
136
141
  '&:not([data-compact])': {
137
- padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
142
+ 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
143
  },
139
144
  '&[disabled]': {
140
145
  // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
@@ -163,5 +168,13 @@ var inputStyles = exports.inputStyles = function inputStyles() {
163
168
  color: 'GrayText'
164
169
  }
165
170
  }
166
- };
171
+ }, _primitives.media.above.xs, {
172
+ 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,
173
+ '&[data-compact]': {
174
+ padding: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)") : undefined
175
+ },
176
+ '&:not([data-compact])': {
177
+ padding: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)") : undefined
178
+ }
179
+ });
167
180
  };
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.7.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,18 +112,22 @@ 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%',
117
119
  '&[data-monospaced]': {
118
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
120
+ fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
121
+ [media.above.xs]: {
122
+ // Reapply the monospaced font family as the font declaration in a breakpoint on the root will override it otherwise
123
+ fontFamily: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)" : undefined
124
+ }
119
125
  },
120
126
  '&[data-compact]': {
121
- padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}`
127
+ 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
128
  },
123
129
  '&:not([data-compact])': {
124
- padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}`
130
+ 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
131
  },
126
132
  '&[disabled]': {
127
133
  // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
@@ -149,5 +155,14 @@ export const inputStyles = () => ({
149
155
  '&[disabled]': {
150
156
  color: 'GrayText'
151
157
  }
158
+ },
159
+ [media.above.xs]: {
160
+ 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,
161
+ '&[data-compact]': {
162
+ padding: fg('platform_design_system_team_safari_input_fix') ? `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}` : undefined
163
+ },
164
+ '&:not([data-compact])': {
165
+ padding: fg('platform_design_system_team_safari_input_fix') ? `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}` : undefined
166
+ }
152
167
  }
153
168
  });
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.7.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,24 +112,27 @@ 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%',
123
- '&[data-monospaced]': {
125
+ '&[data-monospaced]': _defineProperty({
124
126
  fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
125
- },
127
+ }, media.above.xs, {
128
+ // Reapply the monospaced font family as the font declaration in a breakpoint on the root will override it otherwise
129
+ fontFamily: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)" : undefined
130
+ }),
126
131
  '&[data-compact]': {
127
- padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
132
+ 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
133
  },
129
134
  '&:not([data-compact])': {
130
- padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
135
+ 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
136
  },
132
137
  '&[disabled]': {
133
138
  // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
@@ -156,5 +161,13 @@ export var inputStyles = function inputStyles() {
156
161
  color: 'GrayText'
157
162
  }
158
163
  }
159
- };
164
+ }, media.above.xs, {
165
+ 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,
166
+ '&[data-compact]': {
167
+ padding: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)") : undefined
168
+ },
169
+ '&:not([data-compact])': {
170
+ padding: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)") : undefined
171
+ }
172
+ });
160
173
  };
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.7.0"
22
22
  };
23
23
 
24
24
  /**
package/dist/types/styles.d.ts CHANGED
@@ -62,18 +62,21 @@ export declare const inputStyles: () => {
62
62
  readonly boxSizing: "border-box";
63
63
  readonly color: "inherit";
64
64
  readonly cursor: "inherit";
65
- readonly font: "var(--ds-font-body)";
65
+ readonly font: "var(--ds-font-body)" | "var(--ds-font-body-large)";
66
66
  readonly minWidth: "0";
67
67
  readonly outline: "none";
68
68
  readonly width: "100%";
69
69
  readonly '&[data-monospaced]': {
70
70
  readonly fontFamily: "var(--ds-font-family-code)";
71
+ readonly "@media (min-width: 30rem)": {
72
+ readonly fontFamily: "var(--ds-font-family-code)" | undefined;
73
+ };
71
74
  };
72
75
  readonly '&[data-compact]': {
73
- readonly padding: "var(--ds-space-050) var(--ds-space-075)";
76
+ readonly padding: string;
74
77
  };
75
78
  readonly '&:not([data-compact])': {
76
- readonly padding: "var(--ds-space-100) var(--ds-space-075)";
79
+ readonly padding: string;
77
80
  };
78
81
  readonly '&[disabled]': {
79
82
  readonly WebkitTextFillColor: "var(--ds-text-disabled)";
@@ -98,4 +101,13 @@ export declare const inputStyles: () => {
98
101
  readonly color: "GrayText";
99
102
  };
100
103
  };
104
+ readonly "@media (min-width: 30rem)": {
105
+ readonly font: "var(--ds-font-body)" | undefined;
106
+ readonly '&[data-compact]': {
107
+ readonly padding: string | undefined;
108
+ };
109
+ readonly '&:not([data-compact])': {
110
+ readonly padding: string | undefined;
111
+ };
112
+ };
101
113
  };
package/dist/types-ts4.5/styles.d.ts CHANGED
@@ -62,18 +62,21 @@ export declare const inputStyles: () => {
62
62
  readonly boxSizing: "border-box";
63
63
  readonly color: "inherit";
64
64
  readonly cursor: "inherit";
65
- readonly font: "var(--ds-font-body)";
65
+ readonly font: "var(--ds-font-body)" | "var(--ds-font-body-large)";
66
66
  readonly minWidth: "0";
67
67
  readonly outline: "none";
68
68
  readonly width: "100%";
69
69
  readonly '&[data-monospaced]': {
70
70
  readonly fontFamily: "var(--ds-font-family-code)";
71
+ readonly "@media (min-width: 30rem)": {
72
+ readonly fontFamily: "var(--ds-font-family-code)" | undefined;
73
+ };
71
74
  };
72
75
  readonly '&[data-compact]': {
73
- readonly padding: "var(--ds-space-050) var(--ds-space-075)";
76
+ readonly padding: string;
74
77
  };
75
78
  readonly '&:not([data-compact])': {
76
- readonly padding: "var(--ds-space-100) var(--ds-space-075)";
79
+ readonly padding: string;
77
80
  };
78
81
  readonly '&[disabled]': {
79
82
  readonly WebkitTextFillColor: "var(--ds-text-disabled)";
@@ -98,4 +101,13 @@ export declare const inputStyles: () => {
98
101
  readonly color: "GrayText";
99
102
  };
100
103
  };
104
+ readonly "@media (min-width: 30rem)": {
105
+ readonly font: "var(--ds-font-body)" | undefined;
106
+ readonly '&[data-compact]': {
107
+ readonly padding: string | undefined;
108
+ };
109
+ readonly '&:not([data-compact])': {
110
+ readonly padding: string | undefined;
111
+ };
112
+ };
101
113
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "6.5.5",
3
+ "version": "6.7.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.3.0",
29
31
  "@atlaskit/theme": "^14.0.0",
30
- "@atlaskit/tokens": "^2.2.0",
32
+ "@atlaskit/tokens": "^2.4.0",
31
33
  "@babel/runtime": "^7.0.0",
32
34
  "@emotion/react": "^11.7.1"
33
35
  },
@@ -39,7 +41,7 @@
39
41
  "@af/integration-testing": "*",
40
42
  "@af/visual-regression": "*",
41
43
  "@atlaskit/codemod-utils": "^4.2.3",
42
- "@atlaskit/ds-lib": "^3.2.0",
44
+ "@atlaskit/ds-lib": "^3.3.0",
43
45
  "@atlaskit/ssr": "*",
44
46
  "@atlaskit/visual-regression": "*",
45
47
  "@atlassian/feature-flags-test-utils": "*",
@@ -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
  }