@atlaskit/textfield 6.6.0 → 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 +16 -0
  2. package/dist/cjs/styles.js +6 -3
  3. package/dist/cjs/text-field.js +1 -1
  4. package/dist/es2019/styles.js +6 -2
  5. package/dist/es2019/text-field.js +1 -1
  6. package/dist/esm/styles.js +6 -3
  7. package/dist/esm/text-field.js +1 -1
  8. package/dist/types/styles.d.ts +12 -126
  9. package/dist/types-ts4.5/styles.d.ts +12 -126
  10. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
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
+
3
19
  ## 6.6.0
4
20
 
5
21
  ### Minor Changes
package/dist/cjs/styles.js CHANGED
@@ -129,9 +129,12 @@ var inputStyles = exports.inputStyles = function inputStyles() {
129
129
  minWidth: '0',
130
130
  outline: 'none',
131
131
  width: '100%',
132
- '&[data-monospaced]': {
132
+ '&[data-monospaced]': (0, _defineProperty2.default)({
133
133
  fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
134
- },
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
+ }),
135
138
  '&[data-compact]': {
136
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)")
137
140
  },
@@ -165,7 +168,7 @@ var inputStyles = exports.inputStyles = function inputStyles() {
165
168
  color: 'GrayText'
166
169
  }
167
170
  }
168
- }, "".concat(_primitives.media.above.xs), {
171
+ }, _primitives.media.above.xs, {
169
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,
170
173
  '&[data-compact]': {
171
174
  padding: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)") : undefined
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.6.0"
30
+ packageVersion: "6.7.0"
31
31
  };
32
32
 
33
33
  /**
package/dist/es2019/styles.js CHANGED
@@ -117,7 +117,11 @@ export const inputStyles = () => ({
117
117
  outline: 'none',
118
118
  width: '100%',
119
119
  '&[data-monospaced]': {
120
- 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
+ }
121
125
  },
122
126
  '&[data-compact]': {
123
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)"}`
@@ -152,7 +156,7 @@ export const inputStyles = () => ({
152
156
  color: 'GrayText'
153
157
  }
154
158
  },
155
- [`${media.above.xs}`]: {
159
+ [media.above.xs]: {
156
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,
157
161
  '&[data-compact]': {
158
162
  padding: fg('platform_design_system_team_safari_input_fix') ? `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}` : undefined
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.6.0"
15
+ packageVersion: "6.7.0"
16
16
  };
17
17
 
18
18
  /**
package/dist/esm/styles.js CHANGED
@@ -122,9 +122,12 @@ export var inputStyles = function inputStyles() {
122
122
  minWidth: '0',
123
123
  outline: 'none',
124
124
  width: '100%',
125
- '&[data-monospaced]': {
125
+ '&[data-monospaced]': _defineProperty({
126
126
  fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
127
- },
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
+ }),
128
131
  '&[data-compact]': {
129
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)")
130
133
  },
@@ -158,7 +161,7 @@ export var inputStyles = function inputStyles() {
158
161
  color: 'GrayText'
159
162
  }
160
163
  }
161
- }, "".concat(media.above.xs), {
164
+ }, media.above.xs, {
162
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,
163
166
  '&[data-compact]': {
164
167
  padding: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)") : undefined
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.6.0"
21
+ packageVersion: "6.7.0"
22
22
  };
23
23
 
24
24
  /**
package/dist/types/styles.d.ts CHANGED
@@ -57,132 +57,6 @@ 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
- };
186
60
  readonly backgroundColor: "transparent";
187
61
  readonly border: 0;
188
62
  readonly boxSizing: "border-box";
@@ -194,6 +68,9 @@ export declare const inputStyles: () => {
194
68
  readonly width: "100%";
195
69
  readonly '&[data-monospaced]': {
196
70
  readonly fontFamily: "var(--ds-font-family-code)";
71
+ readonly "@media (min-width: 30rem)": {
72
+ readonly fontFamily: "var(--ds-font-family-code)" | undefined;
73
+ };
197
74
  };
198
75
  readonly '&[data-compact]': {
199
76
  readonly padding: string;
@@ -224,4 +101,13 @@ export declare const inputStyles: () => {
224
101
  readonly color: "GrayText";
225
102
  };
226
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
+ };
227
113
  };
package/dist/types-ts4.5/styles.d.ts CHANGED
@@ -57,132 +57,6 @@ 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
- };
186
60
  readonly backgroundColor: "transparent";
187
61
  readonly border: 0;
188
62
  readonly boxSizing: "border-box";
@@ -194,6 +68,9 @@ export declare const inputStyles: () => {
194
68
  readonly width: "100%";
195
69
  readonly '&[data-monospaced]': {
196
70
  readonly fontFamily: "var(--ds-font-family-code)";
71
+ readonly "@media (min-width: 30rem)": {
72
+ readonly fontFamily: "var(--ds-font-family-code)" | undefined;
73
+ };
197
74
  };
198
75
  readonly '&[data-compact]': {
199
76
  readonly padding: string;
@@ -224,4 +101,13 @@ export declare const inputStyles: () => {
224
101
  readonly color: "GrayText";
225
102
  };
226
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
+ };
227
113
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "6.6.0",
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/"
@@ -27,9 +27,9 @@
27
27
  "dependencies": {
28
28
  "@atlaskit/analytics-next": "^10.1.0",
29
29
  "@atlaskit/platform-feature-flags": "^0.3.0",
30
- "@atlaskit/primitives": "^13.0.0",
30
+ "@atlaskit/primitives": "^13.3.0",
31
31
  "@atlaskit/theme": "^14.0.0",
32
- "@atlaskit/tokens": "^2.3.0",
32
+ "@atlaskit/tokens": "^2.4.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@emotion/react": "^11.7.1"
35
35
  },
@@ -41,7 +41,7 @@
41
41
  "@af/integration-testing": "*",
42
42
  "@af/visual-regression": "*",
43
43
  "@atlaskit/codemod-utils": "^4.2.3",
44
- "@atlaskit/ds-lib": "^3.2.0",
44
+ "@atlaskit/ds-lib": "^3.3.0",
45
45
  "@atlaskit/ssr": "*",
46
46
  "@atlaskit/visual-regression": "*",
47
47
  "@atlassian/feature-flags-test-utils": "*",