@atlaskit/textfield - npm Package Compare versions

Comparing version 6.3.0 to 6.3.1

CHANGELOG.md

 # @atlaskit/textfield
 
+## 6.3.1
+
+### Patch Changes
+
+-   [#97073](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97073)
+    [`b6435f7c8d0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6435f7c8d0d) -
+    Internal changes to typography, no visual change.
+-   Updated dependencies
+
 ## 6.3.0
@@ -4,0 +13,0 @@

dist/cjs/styles.js

@@ -10,7 +10,4 @@ "use strict";
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 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 fontSize = (0, _constants.fontSize)();
-var gridSize = (0, _constants.gridSize)();
 var backgroundColor = {
@@ -113,3 +110,3 @@ standard: "var(--ds-background-input, ".concat(_colors.N10, ")"),
     flex: '1 1 100%',
-    fontSize: fontSize,
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     justifyContent: 'space-between',
@@ -131,18 +128,14 @@ maxWidth: getMaxWidth(width),
     cursor: 'inherit',
-    fontSize: fontSize,
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     minWidth: '0',
     outline: 'none',
     width: '100%',
-    lineHeight: gridSize * 2.5 / fontSize,
-    fontFamily: (0, _constants.fontFamily)(),
     '&[data-monospaced]': {
-      fontFamily: (0, _constants.codeFontFamily)()
+      fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
     },
     '&[data-compact]': {
-      padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)"),
-      height: "".concat((gridSize * 3.5 / fontSize).toFixed(2), "em")
+      padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
     },
     '&:not([data-compact])': {
-      padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)"),
-      height: "".concat((gridSize * 4.5 / fontSize).toFixed(2), "em")
+      padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
     },
@@ -149,0 +142,0 @@ '&[disabled]': {

dist/cjs/text-field.js

@@ -26,3 +26,3 @@ "use strict";
   packageName: "@atlaskit/textfield",
-  packageVersion: "6.3.0"
+  packageVersion: "6.3.1"
 };
@@ -29,0 +29,0 @@ var TextfieldComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {

dist/es2019/styles.js

 import { B200, N0, N10, N100, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
-import { codeFontFamily, fontFamily, fontSize as getFontSize,
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-gridSize as getGridSize } from '@atlaskit/theme/constants';
-const fontSize = getFontSize();
-const gridSize = getGridSize();
 const backgroundColor = {
@@ -103,3 +98,3 @@ standard: `var(--ds-background-input, ${N10})`,
   flex: '1 1 100%',
-  fontSize,
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   justifyContent: 'space-between',
@@ -119,18 +114,14 @@ maxWidth: getMaxWidth(width),
   cursor: 'inherit',
-  fontSize,
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   minWidth: '0',
   outline: 'none',
   width: '100%',
-  lineHeight: gridSize * 2.5 / fontSize,
-  fontFamily: fontFamily(),
   '&[data-monospaced]': {
-    fontFamily: codeFontFamily()
+    fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
   },
   '&[data-compact]': {
-    padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}`,
-    height: `${(gridSize * 3.5 / fontSize).toFixed(2)}em`
+    padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}`
   },
   '&:not([data-compact])': {
-    padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}`,
-    height: `${(gridSize * 4.5 / fontSize).toFixed(2)}em`
+    padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}`
   },
@@ -137,0 +128,0 @@ '&[disabled]': {

dist/es2019/text-field.js

@@ -10,3 +10,3 @@ import _extends from "@babel/runtime/helpers/extends";
   packageName: "@atlaskit/textfield",
-  packageVersion: "6.3.0"
+  packageVersion: "6.3.1"
 };
@@ -13,0 +13,0 @@ const TextfieldComponent = /*#__PURE__*/forwardRef((props, ref) => {

dist/esm/styles.js

@@ -5,7 +5,2 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { B200, N0, N10, N100, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
-import { codeFontFamily, fontFamily, fontSize as getFontSize,
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-gridSize as getGridSize } from '@atlaskit/theme/constants';
-var fontSize = getFontSize();
-var gridSize = getGridSize();
 var backgroundColor = {
@@ -108,3 +103,3 @@ standard: "var(--ds-background-input, ".concat(N10, ")"),
     flex: '1 1 100%',
-    fontSize: fontSize,
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     justifyContent: 'space-between',
@@ -126,18 +121,14 @@ maxWidth: getMaxWidth(width),
     cursor: 'inherit',
-    fontSize: fontSize,
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     minWidth: '0',
     outline: 'none',
     width: '100%',
-    lineHeight: gridSize * 2.5 / fontSize,
-    fontFamily: fontFamily(),
     '&[data-monospaced]': {
-      fontFamily: codeFontFamily()
+      fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
     },
     '&[data-compact]': {
-      padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)"),
-      height: "".concat((gridSize * 3.5 / fontSize).toFixed(2), "em")
+      padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
     },
     '&:not([data-compact])': {
-      padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)"),
-      height: "".concat((gridSize * 4.5 / fontSize).toFixed(2), "em")
+      padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
     },
@@ -144,0 +135,0 @@ '&[disabled]': {

dist/esm/text-field.js

@@ -16,3 +16,3 @@ import _extends from "@babel/runtime/helpers/extends";
   packageName: "@atlaskit/textfield",
-  packageVersion: "6.3.0"
+  packageVersion: "6.3.1"
 };
@@ -19,0 +19,0 @@ var TextfieldComponent = /*#__PURE__*/forwardRef(function (props, ref) {

dist/types-ts4.5/styles.d.ts

@@ -1,2 +0,2 @@
-import { Appearance } from './types';
+import { type Appearance } from './types';
 export declare const containerStyles: (appearance: Appearance, width?: string | number) => {
@@ -7,3 +7,3 @@ readonly borderStyle: "none" | "solid";
     readonly flex: "1 1 100%";
-    readonly fontSize: number;
+    readonly font: "var(--ds-font-body)";
     readonly justifyContent: "space-between";
@@ -66,18 +66,14 @@ readonly maxWidth: string | number;
     readonly cursor: "inherit";
-    readonly fontSize: number;
+    readonly font: "var(--ds-font-body)";
     readonly minWidth: "0";
     readonly outline: "none";
     readonly width: "100%";
-    readonly lineHeight: number;
-    readonly fontFamily: string;
     readonly '&[data-monospaced]': {
-        readonly fontFamily: string;
+        readonly fontFamily: "var(--ds-font-family-monospace)";
     };
     readonly '&[data-compact]': {
         readonly padding: "var(--ds-space-050) var(--ds-space-075)";
-        readonly height: `${string}em`;
     };
     readonly '&:not([data-compact])': {
         readonly padding: "var(--ds-space-100) var(--ds-space-075)";
-        readonly height: `${string}em`;
     };
@@ -84,0 +80,0 @@ readonly '&[disabled]': {

dist/types/styles.d.ts

@@ -1,2 +0,2 @@
-import { Appearance } from './types';
+import { type Appearance } from './types';
 export declare const containerStyles: (appearance: Appearance, width?: string | number) => {
@@ -7,3 +7,3 @@ readonly borderStyle: "none" | "solid";
     readonly flex: "1 1 100%";
-    readonly fontSize: number;
+    readonly font: "var(--ds-font-body)";
     readonly justifyContent: "space-between";
@@ -66,18 +66,14 @@ readonly maxWidth: string | number;
     readonly cursor: "inherit";
-    readonly fontSize: number;
+    readonly font: "var(--ds-font-body)";
     readonly minWidth: "0";
     readonly outline: "none";
     readonly width: "100%";
-    readonly lineHeight: number;
-    readonly fontFamily: string;
     readonly '&[data-monospaced]': {
-        readonly fontFamily: string;
+        readonly fontFamily: "var(--ds-font-family-monospace)";
     };
     readonly '&[data-compact]': {
         readonly padding: "var(--ds-space-050) var(--ds-space-075)";
-        readonly height: `${string}em`;
     };
     readonly '&:not([data-compact])': {
         readonly padding: "var(--ds-space-100) var(--ds-space-075)";
-        readonly height: `${string}em`;
     };
@@ -84,0 +80,0 @@ readonly '&[disabled]': {

package.json

 {
   "name": "@atlaskit/textfield",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "A text field is an input that allows a user to write or edit text.",
@@ -31,4 +31,4 @@ "publishConfig": {
     "@atlaskit/analytics-next": "^9.3.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.46.0",
     "@babel/runtime": "^7.0.0",
@@ -35,0 +35,0 @@ "@emotion/react": "^11.7.1"

No alert changes

Worsened metrics

Total package byte prevSize

121459

decreased by-0.01%

Lines of code

2212

decreased by-1.47%

Dependency changes

• Updated@atlaskit/theme@^12.8.0

• Updated@atlaskit/tokens@^1.46.0