@atlaskit/textfield 6.6.0 → 6.7.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 +7 -3
  3. package/dist/cjs/text-field.js +1 -1
  4. package/dist/es2019/styles.js +7 -2
  5. package/dist/es2019/text-field.js +1 -1
  6. package/dist/esm/styles.js +7 -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 +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlaskit/textfield
2
2
 
3
+ ## 6.7.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 6.7.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#173737](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/173737)
14
+ [`667640085e5c7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/667640085e5c7) -
15
+ Update the font size for the textarea and select components at the `xs` breakpoint. The font size
16
+ will be increased to 16px to prevent IOS Safari from zooming in on the text field when it is
17
+ focused. Styles for larger breakpoints will remain unchanged.
18
+
19
+ Apply a fix to the textfield component to ensure monospace is correctly applied to the input at
20
+ the `media.above.xs` breakpoint.
21
+
22
+ These changes are currently behind a feature gate and will be evaluated for effectiveness. If
23
+ successful, they will be included in a future release.
24
+
3
25
  ## 6.6.0
4
26
 
5
27
  ### Minor Changes
package/dist/cjs/styles.js CHANGED
@@ -129,9 +129,13 @@ 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
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
137
+ 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
138
+ }),
135
139
  '&[data-compact]': {
136
140
  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
141
  },
@@ -165,7 +169,7 @@ var inputStyles = exports.inputStyles = function inputStyles() {
165
169
  color: 'GrayText'
166
170
  }
167
171
  }
168
- }, "".concat(_primitives.media.above.xs), {
172
+ }, _primitives.media.above.xs, {
169
173
  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
174
  '&[data-compact]': {
171
175
  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.1"
31
31
  };
32
32
 
33
33
  /**
package/dist/es2019/styles.js CHANGED
@@ -117,7 +117,12 @@ 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
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
124
+ fontFamily: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)" : undefined
125
+ }
121
126
  },
122
127
  '&[data-compact]': {
123
128
  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 +157,7 @@ export const inputStyles = () => ({
152
157
  color: 'GrayText'
153
158
  }
154
159
  },
155
- [`${media.above.xs}`]: {
160
+ [media.above.xs]: {
156
161
  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
162
  '&[data-compact]': {
158
163
  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.1"
16
16
  };
17
17
 
18
18
  /**
package/dist/esm/styles.js CHANGED
@@ -122,9 +122,13 @@ 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
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
130
+ fontFamily: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)" : undefined
131
+ }),
128
132
  '&[data-compact]': {
129
133
  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
134
  },
@@ -158,7 +162,7 @@ export var inputStyles = function inputStyles() {
158
162
  color: 'GrayText'
159
163
  }
160
164
  }
161
- }, "".concat(media.above.xs), {
165
+ }, media.above.xs, {
162
166
  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
167
  '&[data-compact]': {
164
168
  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.1"
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.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/"
@@ -25,11 +25,11 @@
25
25
  }
26
26
  },
27
27
  "dependencies": {
28
- "@atlaskit/analytics-next": "^10.1.0",
28
+ "@atlaskit/analytics-next": "^10.2.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": "^3.0.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": "*",