@atlaskit/textarea 5.6.4 → 5.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 (9) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/cjs/styles.js +21 -3
  3. package/dist/cjs/text-area.js +1 -1
  4. package/dist/es2019/styles.js +23 -3
  5. package/dist/es2019/text-area.js +1 -1
  6. package/dist/esm/styles.js +21 -3
  7. package/dist/esm/text-area.js +1 -1
  8. package/package.json +14 -6
  9. package/types/package.json +17 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @atlaskit/textarea
2
2
 
3
+ ## 5.7.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#98226](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98226)
8
+ [`9c961c3cbcc7f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9c961c3cbcc7f) -
9
+ Internal changes to typography.
10
+
11
+ ## 5.7.0
12
+
13
+ ### Minor Changes
14
+
15
+ - [#173737](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/173737)
16
+ [`667640085e5c7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/667640085e5c7) -
17
+ Update the font size for the textarea and select components at the `xs` breakpoint. The font size
18
+ will be increased to 16px to prevent IOS Safari from zooming in on the text field when it is
19
+ focused. Styles for larger breakpoints will remain unchanged.
20
+
21
+ Apply a fix to the textfield component to ensure monospace is correctly applied to the input at
22
+ the `media.above.xs` breakpoint.
23
+
24
+ These changes are currently behind a feature gate and will be evaluated for effectiveness. If
25
+ successful, they will be included in a future release.
26
+
3
27
  ## 5.6.4
4
28
 
5
29
  ### Patch Changes
package/dist/cjs/styles.js CHANGED
@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.getBaseStyles = exports.dynamicStyles = exports.borderWidth = void 0;
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
10
  var _react = require("@emotion/react");
11
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
+ var _primitives = require("@atlaskit/primitives");
11
13
  var componentTokens = _interopRequireWildcard(require("./component-tokens"));
12
14
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
13
15
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -67,8 +69,6 @@ var compactVerticalPadding = 2;
67
69
  var verticalPadding = 6;
68
70
  var horizontalPadding = 8;
69
71
  var transitionDuration = '0.2s';
70
- var fontFamily = "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)";
71
- var codeFontFamily = "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)";
72
72
  var borderWidth = exports.borderWidth = 2;
73
73
 
74
74
  // Safari puts on some difficult to remove styles, mainly for disabled inputs
@@ -190,7 +190,7 @@ var borderStyle = function borderStyle(appearance) {
190
190
  var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
191
191
  return (0, _react.css)({
192
192
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
193
- fontFamily: isMonospaced ? codeFontFamily : fontFamily
193
+ fontFamily: isMonospaced ? "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)" : "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
194
194
  });
195
195
  };
196
196
  var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
@@ -248,6 +248,19 @@ var staticStyles = (0, _react.css)({
248
248
  boxShadow: 'none'
249
249
  }
250
250
  });
251
+
252
+ // suggestion: these two could be merged into cssMap during @compiled rewrite
253
+ var newFontStyles = (0, _react.css)((0, _defineProperty2.default)({
254
+ font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
255
+ }, _primitives.media.above.xs, {
256
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
257
+ }));
258
+ var monospacedFontFamilyStyles = (0, _react.css)((0, _defineProperty2.default)({
259
+ fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
260
+ }, _primitives.media.above.xs, {
261
+ // Reapply the monospaced font family as the font declaration used in the breakpoint in newFontStyles overrides it otherwise
262
+ fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
263
+ }));
251
264
  var getBaseStyles = exports.getBaseStyles = function getBaseStyles(_ref) {
252
265
  var minimumRows = _ref.minimumRows,
253
266
  resize = _ref.resize,
@@ -265,8 +278,13 @@ var getBaseStyles = exports.getBaseStyles = function getBaseStyles(_ref) {
265
278
  resizeStyle(resize),
266
279
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
267
280
  borderStyle(appearance),
281
+ // @todo: remove in `platform_design_system_team_safari_input_fix` cleanup
268
282
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
269
283
  fontFamilyStyle(isMonospaced),
284
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
285
+ (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? newFontStyles : undefined,
286
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
287
+ isMonospaced && (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? monospacedFontFamilyStyles : undefined,
270
288
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
271
289
  {
272
290
  maxHeight: maxHeight
package/dist/cjs/text-area.js CHANGED
@@ -25,7 +25,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
25
25
  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; }
26
26
  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; }
27
27
  var packageName = "@atlaskit/textarea";
28
- var packageVersion = "5.6.4";
28
+ var packageVersion = "5.7.1";
29
29
  var analyticsParams = {
30
30
  componentName: 'textArea',
31
31
  packageName: packageName,
package/dist/es2019/styles.js CHANGED
@@ -4,6 +4,8 @@
4
4
  */
5
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
6
  import { css } from '@emotion/react';
7
+ import { fg } from '@atlaskit/platform-feature-flags';
8
+ import { media } from '@atlaskit/primitives';
7
9
  import * as componentTokens from './component-tokens';
8
10
  const disabledRules = {
9
11
  backgroundColor: componentTokens.disabledBackground,
@@ -56,8 +58,6 @@ const compactVerticalPadding = 2;
56
58
  const verticalPadding = 6;
57
59
  const horizontalPadding = 8;
58
60
  const transitionDuration = '0.2s';
59
- const fontFamily = "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)";
60
- const codeFontFamily = "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)";
61
61
  export const borderWidth = 2;
62
62
 
63
63
  // Safari puts on some difficult to remove styles, mainly for disabled inputs
@@ -176,7 +176,7 @@ const borderStyle = appearance => css({
176
176
  });
177
177
  const fontFamilyStyle = isMonospaced => css({
178
178
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
179
- fontFamily: isMonospaced ? codeFontFamily : fontFamily
179
+ fontFamily: isMonospaced ? "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)" : "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
180
180
  });
181
181
  const borderPaddingAndHeightStyles = (minimumRows = 1, appearance) => {
182
182
  const borderWidth = appearance !== 'none' ? 1 : 2;
@@ -234,6 +234,21 @@ const staticStyles = css({
234
234
  boxShadow: 'none'
235
235
  }
236
236
  });
237
+
238
+ // suggestion: these two could be merged into cssMap during @compiled rewrite
239
+ const newFontStyles = css({
240
+ font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
241
+ [media.above.xs]: {
242
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
243
+ }
244
+ });
245
+ const monospacedFontFamilyStyles = css({
246
+ fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
247
+ [media.above.xs]: {
248
+ // Reapply the monospaced font family as the font declaration used in the breakpoint in newFontStyles overrides it otherwise
249
+ fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
250
+ }
251
+ });
237
252
  export const getBaseStyles = ({
238
253
  minimumRows,
239
254
  resize,
@@ -251,8 +266,13 @@ borderPaddingAndHeightStyles(minimumRows, appearance),
251
266
  resizeStyle(resize),
252
267
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
253
268
  borderStyle(appearance),
269
+ // @todo: remove in `platform_design_system_team_safari_input_fix` cleanup
254
270
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
255
271
  fontFamilyStyle(isMonospaced),
272
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
273
+ fg('platform_design_system_team_safari_input_fix') ? newFontStyles : undefined,
274
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
275
+ isMonospaced && fg('platform_design_system_team_safari_input_fix') ? monospacedFontFamilyStyles : undefined,
256
276
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
257
277
  {
258
278
  maxHeight
package/dist/es2019/text-area.js CHANGED
@@ -10,7 +10,7 @@ import { css, jsx } from '@emotion/react';
10
10
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
11
11
  import { borderWidth, dynamicStyles, getBaseStyles } from './styles';
12
12
  const packageName = "@atlaskit/textarea";
13
- const packageVersion = "5.6.4";
13
+ const packageVersion = "5.7.1";
14
14
  const analyticsParams = {
15
15
  componentName: 'textArea',
16
16
  packageName,
package/dist/esm/styles.js CHANGED
@@ -7,6 +7,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
7
7
  */
8
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
9
  import { css } from '@emotion/react';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
11
+ import { media } from '@atlaskit/primitives';
10
12
  import * as componentTokens from './component-tokens';
11
13
  var disabledRules = {
12
14
  backgroundColor: componentTokens.disabledBackground,
@@ -59,8 +61,6 @@ var compactVerticalPadding = 2;
59
61
  var verticalPadding = 6;
60
62
  var horizontalPadding = 8;
61
63
  var transitionDuration = '0.2s';
62
- var fontFamily = "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)";
63
- var codeFontFamily = "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)";
64
64
  export var borderWidth = 2;
65
65
 
66
66
  // Safari puts on some difficult to remove styles, mainly for disabled inputs
@@ -182,7 +182,7 @@ var borderStyle = function borderStyle(appearance) {
182
182
  var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
183
183
  return css({
184
184
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
185
- fontFamily: isMonospaced ? codeFontFamily : fontFamily
185
+ fontFamily: isMonospaced ? "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)" : "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
186
186
  });
187
187
  };
188
188
  var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
@@ -240,6 +240,19 @@ var staticStyles = css({
240
240
  boxShadow: 'none'
241
241
  }
242
242
  });
243
+
244
+ // suggestion: these two could be merged into cssMap during @compiled rewrite
245
+ var newFontStyles = css(_defineProperty({
246
+ font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
247
+ }, media.above.xs, {
248
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
249
+ }));
250
+ var monospacedFontFamilyStyles = css(_defineProperty({
251
+ fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
252
+ }, media.above.xs, {
253
+ // Reapply the monospaced font family as the font declaration used in the breakpoint in newFontStyles overrides it otherwise
254
+ fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
255
+ }));
243
256
  export var getBaseStyles = function getBaseStyles(_ref) {
244
257
  var minimumRows = _ref.minimumRows,
245
258
  resize = _ref.resize,
@@ -257,8 +270,13 @@ export var getBaseStyles = function getBaseStyles(_ref) {
257
270
  resizeStyle(resize),
258
271
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
259
272
  borderStyle(appearance),
273
+ // @todo: remove in `platform_design_system_team_safari_input_fix` cleanup
260
274
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
261
275
  fontFamilyStyle(isMonospaced),
276
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
277
+ fg('platform_design_system_team_safari_input_fix') ? newFontStyles : undefined,
278
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
279
+ isMonospaced && fg('platform_design_system_team_safari_input_fix') ? monospacedFontFamilyStyles : undefined,
262
280
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
263
281
  {
264
282
  maxHeight: maxHeight
package/dist/esm/text-area.js CHANGED
@@ -16,7 +16,7 @@ import { css, jsx } from '@emotion/react';
16
16
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
17
17
  import { borderWidth, dynamicStyles, getBaseStyles } from './styles';
18
18
  var packageName = "@atlaskit/textarea";
19
- var packageVersion = "5.6.4";
19
+ var packageVersion = "5.7.1";
20
20
  var analyticsParams = {
21
21
  componentName: 'textArea',
22
22
  packageName: packageName,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textarea",
3
- "version": "5.6.4",
3
+ "version": "5.7.1",
4
4
  "description": "A text area lets users enter long form text which spans over multiple lines.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -30,19 +30,22 @@
30
30
  "runReact18": true,
31
31
  "website": {
32
32
  "name": "Text area",
33
- "category": "Components"
33
+ "category": "Forms and input"
34
34
  }
35
35
  },
36
36
  "af:exports": {
37
37
  ".": "./src/index.tsx",
38
38
  "./component-tokens": "./src/component-tokens.tsx",
39
39
  "./styles": "./src/styles.tsx",
40
- "./text-area": "./src/text-area.tsx"
40
+ "./text-area": "./src/text-area.tsx",
41
+ "./types": "./src/types.tsx"
41
42
  },
42
43
  "dependencies": {
43
- "@atlaskit/analytics-next": "^10.1.0",
44
+ "@atlaskit/analytics-next": "^10.2.0",
45
+ "@atlaskit/platform-feature-flags": "^0.3.0",
46
+ "@atlaskit/primitives": "^13.3.0",
44
47
  "@atlaskit/theme": "^14.0.0",
45
- "@atlaskit/tokens": "^2.2.0",
48
+ "@atlaskit/tokens": "^2.5.0",
46
49
  "@babel/runtime": "^7.0.0",
47
50
  "@emotion/react": "^11.7.1"
48
51
  },
@@ -53,7 +56,7 @@
53
56
  "@af/accessibility-testing": "*",
54
57
  "@af/integration-testing": "*",
55
58
  "@af/visual-regression": "*",
56
- "@atlaskit/ds-lib": "^3.2.0",
59
+ "@atlaskit/ds-lib": "^3.3.0",
57
60
  "@atlaskit/ssr": "*",
58
61
  "@atlaskit/visual-regression": "*",
59
62
  "@atlassian/feature-flags-test-utils": "*",
@@ -90,5 +93,10 @@
90
93
  ],
91
94
  "deprecation": "no-deprecated-imports"
92
95
  }
96
+ },
97
+ "platform-feature-flags": {
98
+ "platform_design_system_team_safari_input_fix": {
99
+ "type": "boolean"
100
+ }
93
101
  }
94
102
  }
package/types/package.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "name": "@atlaskit/textarea/types",
3
+ "main": "../dist/cjs/types.js",
4
+ "module": "../dist/esm/types.js",
5
+ "module:es2019": "../dist/es2019/types.js",
6
+ "sideEffects": [
7
+ "**/*.compiled.css"
8
+ ],
9
+ "types": "../dist/types/types.d.ts",
10
+ "typesVersions": {
11
+ ">=4.5 <5.4": {
12
+ "*": [
13
+ "../dist/types-ts4.5/types.d.ts"
14
+ ]
15
+ }
16
+ }
17
+ }