@atlaskit/textarea 5.6.3 → 5.7.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/textarea
 
+## 5.7.0
+
+### Minor Changes
+
+- [#173737](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/173737)
+  [`667640085e5c7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/667640085e5c7) -
+  Update the font size for the textarea and select components at the `xs` breakpoint. The font size
+  will be increased to 16px to prevent IOS Safari from zooming in on the text field when it is
+  focused. Styles for larger breakpoints will remain unchanged.
+
+  Apply a fix to the textfield component to ensure monospace is correctly applied to the input at
+  the `media.above.xs` breakpoint.
+
+  These changes are currently behind a feature gate and will be evaluated for effectiveness. If
+  successful, they will be included in a future release.
+
+## 5.6.4
+
+### Patch Changes
+
+- [#166026](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166026)
+  [`962b5e77810fb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/962b5e77810fb) -
+  Adds side-effect config to support Compiled css extraction in third-party apps
+
 ## 5.6.3
 
 ### Patch Changes

package/component-tokens/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/component-tokens.js",
   "module": "../dist/esm/component-tokens.js",
   "module:es2019": "../dist/es2019/component-tokens.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/component-tokens.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/dist/cjs/styles.js

@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.getBaseStyles = exports.dynamicStyles = exports.borderWidth = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var componentTokens = _interopRequireWildcard(require("./component-tokens"));
 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); }
 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; }
@@ -248,6 +250,19 @@ var staticStyles = (0, _react.css)({
     boxShadow: 'none'
   }
 });
+
+// suggestion: these two could be merged into cssMap during @compiled rewrite
+var newFontStyles = (0, _react.css)((0, _defineProperty2.default)({
+  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)"
+}, _primitives.media.above.xs, {
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+}));
+var monospacedFontFamilyStyles = (0, _react.css)((0, _defineProperty2.default)({
+  fontFamily: codeFontFamily
+}, _primitives.media.above.xs, {
+  // Reapply the monospaced font family as the font declaration used in the breakpoint in newFontStyles overrides it otherwise
+  fontFamily: codeFontFamily
+}));
 var getBaseStyles = exports.getBaseStyles = function getBaseStyles(_ref) {
   var minimumRows = _ref.minimumRows,
     resize = _ref.resize,
@@ -265,8 +280,13 @@ var getBaseStyles = exports.getBaseStyles = function getBaseStyles(_ref) {
     resizeStyle(resize),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     borderStyle(appearance),
+    // @todo: remove in `platform_design_system_team_safari_input_fix` cleanup
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     fontFamilyStyle(isMonospaced),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? newFontStyles : undefined,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    isMonospaced && (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? monospacedFontFamilyStyles : undefined,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     {
       maxHeight: maxHeight

package/dist/cjs/text-area.js

@@ -25,7 +25,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; }
 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; }
 var packageName = "@atlaskit/textarea";
-var packageVersion = "5.6.3";
+var packageVersion = "5.7.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/dist/es2019/styles.js

@@ -4,6 +4,8 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { media } from '@atlaskit/primitives';
 import * as componentTokens from './component-tokens';
 const disabledRules = {
   backgroundColor: componentTokens.disabledBackground,
@@ -234,6 +236,21 @@ const staticStyles = css({
     boxShadow: 'none'
   }
 });
+
+// suggestion: these two could be merged into cssMap during @compiled rewrite
+const newFontStyles = css({
+  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)",
+  [media.above.xs]: {
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  }
+});
+const monospacedFontFamilyStyles = css({
+  fontFamily: codeFontFamily,
+  [media.above.xs]: {
+    // Reapply the monospaced font family as the font declaration used in the breakpoint in newFontStyles overrides it otherwise
+    fontFamily: codeFontFamily
+  }
+});
 export const getBaseStyles = ({
   minimumRows,
   resize,
@@ -251,8 +268,13 @@ borderPaddingAndHeightStyles(minimumRows, appearance),
 resizeStyle(resize),
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 borderStyle(appearance),
+// @todo: remove in `platform_design_system_team_safari_input_fix` cleanup
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 fontFamilyStyle(isMonospaced),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+fg('platform_design_system_team_safari_input_fix') ? newFontStyles : undefined,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+isMonospaced && fg('platform_design_system_team_safari_input_fix') ? monospacedFontFamilyStyles : undefined,
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 {
   maxHeight

package/dist/es2019/text-area.js

@@ -10,7 +10,7 @@ import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { borderWidth, dynamicStyles, getBaseStyles } from './styles';
 const packageName = "@atlaskit/textarea";
-const packageVersion = "5.6.3";
+const packageVersion = "5.7.0";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,

package/dist/esm/styles.js

@@ -7,6 +7,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { media } from '@atlaskit/primitives';
 import * as componentTokens from './component-tokens';
 var disabledRules = {
   backgroundColor: componentTokens.disabledBackground,
@@ -240,6 +242,19 @@ var staticStyles = css({
     boxShadow: 'none'
   }
 });
+
+// suggestion: these two could be merged into cssMap during @compiled rewrite
+var newFontStyles = css(_defineProperty({
+  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)"
+}, media.above.xs, {
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+}));
+var monospacedFontFamilyStyles = css(_defineProperty({
+  fontFamily: codeFontFamily
+}, media.above.xs, {
+  // Reapply the monospaced font family as the font declaration used in the breakpoint in newFontStyles overrides it otherwise
+  fontFamily: codeFontFamily
+}));
 export var getBaseStyles = function getBaseStyles(_ref) {
   var minimumRows = _ref.minimumRows,
     resize = _ref.resize,
@@ -257,8 +272,13 @@ export var getBaseStyles = function getBaseStyles(_ref) {
     resizeStyle(resize),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     borderStyle(appearance),
+    // @todo: remove in `platform_design_system_team_safari_input_fix` cleanup
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     fontFamilyStyle(isMonospaced),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    fg('platform_design_system_team_safari_input_fix') ? newFontStyles : undefined,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    isMonospaced && fg('platform_design_system_team_safari_input_fix') ? monospacedFontFamilyStyles : undefined,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     {
       maxHeight: maxHeight

package/dist/esm/text-area.js

@@ -16,7 +16,7 @@ import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { borderWidth, dynamicStyles, getBaseStyles } from './styles';
 var packageName = "@atlaskit/textarea";
-var packageVersion = "5.6.3";
+var packageVersion = "5.7.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "5.6.3",
+	"version": "5.7.0",
 	"description": "A text area lets users enter long form text which spans over multiple lines.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -20,7 +20,9 @@
 			]
 		}
 	},
-	"sideEffects": false,
+	"sideEffects": [
+		"**/*.compiled.css"
+	],
 	"atlaskit:src": "src/index.tsx",
 	"homepage": "https://atlassian.design/components/textarea/",
 	"atlassian": {
@@ -28,7 +30,7 @@
 		"runReact18": true,
 		"website": {
 			"name": "Text area",
-			"category": "Components"
+			"category": "Forms and input"
 		}
 	},
 	"af:exports": {
@@ -39,8 +41,10 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -51,7 +55,7 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/ds-lib": "^3.1.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
@@ -60,7 +64,7 @@
 		"jest-in-case": "^1.0.2",
 		"jscodeshift": "^0.13.0",
 		"react-dom": "^16.8.0",
-		"storybook-addon-performance": "^0.16.0",
+		"storybook-addon-performance": "^0.17.3",
 		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
 	},
@@ -88,5 +92,10 @@
 			],
 			"deprecation": "no-deprecated-imports"
 		}
+	},
+	"platform-feature-flags": {
+		"platform_design_system_team_safari_input_fix": {
+			"type": "boolean"
+		}
 	}
 }

package/styles/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/styles.js",
   "module": "../dist/esm/styles.js",
   "module:es2019": "../dist/es2019/styles.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/styles.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/text-area/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/text-area.js",
   "module": "../dist/esm/text-area.js",
   "module:es2019": "../dist/es2019/text-area.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/text-area.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {