@atlaskit/textfield 6.3.0 → 6.3.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 +9 -0
  2. package/dist/cjs/styles.js +5 -12
  3. package/dist/cjs/text-field.js +1 -1
  4. package/dist/es2019/styles.js +5 -14
  5. package/dist/es2019/text-field.js +1 -1
  6. package/dist/esm/styles.js +5 -14
  7. package/dist/esm/text-field.js +1 -1
  8. package/dist/types/styles.d.ts +4 -8
  9. package/dist/types-ts4.5/styles.d.ts +4 -8
  10. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/textfield
2
2
 
3
+ ## 6.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#97073](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97073)
8
+ [`b6435f7c8d0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6435f7c8d0d) -
9
+ Internal changes to typography, no visual change.
10
+ - Updated dependencies
11
+
3
12
  ## 6.3.0
4
13
 
5
14
  ### Minor Changes
package/dist/cjs/styles.js CHANGED
@@ -7,11 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.inputStyles = exports.containerStyles = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _colors = require("@atlaskit/theme/colors");
10
- var _constants = require("@atlaskit/theme/constants");
11
10
  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; }
12
11
  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; }
13
- var fontSize = (0, _constants.fontSize)();
14
- var gridSize = (0, _constants.gridSize)();
15
12
  var backgroundColor = {
16
13
  standard: "var(--ds-background-input, ".concat(_colors.N10, ")"),
17
14
  subtle: 'transparent',
@@ -109,7 +106,7 @@ var containerStyles = exports.containerStyles = function containerStyles(appeara
109
106
  boxSizing: 'border-box',
110
107
  display: 'flex',
111
108
  flex: '1 1 100%',
112
- fontSize: fontSize,
109
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
113
110
  justifyContent: 'space-between',
114
111
  maxWidth: getMaxWidth(width),
115
112
  overflow: 'hidden',
@@ -126,22 +123,18 @@ var inputStyles = exports.inputStyles = function inputStyles() {
126
123
  boxSizing: 'border-box',
127
124
  color: 'inherit',
128
125
  cursor: 'inherit',
129
- fontSize: fontSize,
126
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
130
127
  minWidth: '0',
131
128
  outline: 'none',
132
129
  width: '100%',
133
- lineHeight: gridSize * 2.5 / fontSize,
134
- fontFamily: (0, _constants.fontFamily)(),
135
130
  '&[data-monospaced]': {
136
- fontFamily: (0, _constants.codeFontFamily)()
131
+ fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
137
132
  },
138
133
  '&[data-compact]': {
139
- padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)"),
140
- height: "".concat((gridSize * 3.5 / fontSize).toFixed(2), "em")
134
+ padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
141
135
  },
142
136
  '&:not([data-compact])': {
143
- padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)"),
144
- height: "".concat((gridSize * 4.5 / fontSize).toFixed(2), "em")
137
+ padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
145
138
  },
146
139
  '&[disabled]': {
147
140
  // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
package/dist/cjs/text-field.js CHANGED
@@ -23,7 +23,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
23
23
  var analyticsParams = {
24
24
  componentName: 'textField',
25
25
  packageName: "@atlaskit/textfield",
26
- packageVersion: "6.3.0"
26
+ packageVersion: "6.3.1"
27
27
  };
28
28
  var TextfieldComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
29
29
  var _props$appearance = props.appearance,
package/dist/es2019/styles.js CHANGED
@@ -1,9 +1,4 @@
1
1
  import { B200, N0, N10, N100, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
2
- import { codeFontFamily, fontFamily, fontSize as getFontSize,
3
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
4
- gridSize as getGridSize } from '@atlaskit/theme/constants';
5
- const fontSize = getFontSize();
6
- const gridSize = getGridSize();
7
2
  const backgroundColor = {
8
3
  standard: `var(--ds-background-input, ${N10})`,
9
4
  subtle: 'transparent',
@@ -100,7 +95,7 @@ export const containerStyles = (appearance, width) => ({
100
95
  boxSizing: 'border-box',
101
96
  display: 'flex',
102
97
  flex: '1 1 100%',
103
- fontSize,
98
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
104
99
  justifyContent: 'space-between',
105
100
  maxWidth: getMaxWidth(width),
106
101
  overflow: 'hidden',
@@ -115,22 +110,18 @@ export const inputStyles = () => ({
115
110
  boxSizing: 'border-box',
116
111
  color: 'inherit',
117
112
  cursor: 'inherit',
118
- fontSize,
113
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
119
114
  minWidth: '0',
120
115
  outline: 'none',
121
116
  width: '100%',
122
- lineHeight: gridSize * 2.5 / fontSize,
123
- fontFamily: fontFamily(),
124
117
  '&[data-monospaced]': {
125
- fontFamily: codeFontFamily()
118
+ fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
126
119
  },
127
120
  '&[data-compact]': {
128
- padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}`,
129
- height: `${(gridSize * 3.5 / fontSize).toFixed(2)}em`
121
+ padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}`
130
122
  },
131
123
  '&:not([data-compact])': {
132
- padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}`,
133
- height: `${(gridSize * 4.5 / fontSize).toFixed(2)}em`
124
+ padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}`
134
125
  },
135
126
  '&[disabled]': {
136
127
  // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
package/dist/es2019/text-field.js CHANGED
@@ -7,7 +7,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
7
7
  const analyticsParams = {
8
8
  componentName: 'textField',
9
9
  packageName: "@atlaskit/textfield",
10
- packageVersion: "6.3.0"
10
+ packageVersion: "6.3.1"
11
11
  };
12
12
  const TextfieldComponent = /*#__PURE__*/forwardRef((props, ref) => {
13
13
  const {
package/dist/esm/styles.js CHANGED
@@ -2,11 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  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; }
3
3
  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) { _defineProperty(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; }
4
4
  import { B200, N0, N10, N100, N200, N30, N70, N900, R400 } from '@atlaskit/theme/colors';
5
- import { codeFontFamily, fontFamily, fontSize as getFontSize,
6
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
7
- gridSize as getGridSize } from '@atlaskit/theme/constants';
8
- var fontSize = getFontSize();
9
- var gridSize = getGridSize();
10
5
  var backgroundColor = {
11
6
  standard: "var(--ds-background-input, ".concat(N10, ")"),
12
7
  subtle: 'transparent',
@@ -104,7 +99,7 @@ export var containerStyles = function containerStyles(appearance, width) {
104
99
  boxSizing: 'border-box',
105
100
  display: 'flex',
106
101
  flex: '1 1 100%',
107
- fontSize: fontSize,
102
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
108
103
  justifyContent: 'space-between',
109
104
  maxWidth: getMaxWidth(width),
110
105
  overflow: 'hidden',
@@ -121,22 +116,18 @@ export var inputStyles = function inputStyles() {
121
116
  boxSizing: 'border-box',
122
117
  color: 'inherit',
123
118
  cursor: 'inherit',
124
- fontSize: fontSize,
119
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
125
120
  minWidth: '0',
126
121
  outline: 'none',
127
122
  width: '100%',
128
- lineHeight: gridSize * 2.5 / fontSize,
129
- fontFamily: fontFamily(),
130
123
  '&[data-monospaced]': {
131
- fontFamily: codeFontFamily()
124
+ fontFamily: "var(--ds-font-family-monospace, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
132
125
  },
133
126
  '&[data-compact]': {
134
- padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)"),
135
- height: "".concat((gridSize * 3.5 / fontSize).toFixed(2), "em")
127
+ padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
136
128
  },
137
129
  '&:not([data-compact])': {
138
- padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)"),
139
- height: "".concat((gridSize * 4.5 / fontSize).toFixed(2), "em")
130
+ padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)")
140
131
  },
141
132
  '&[disabled]': {
142
133
  // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
package/dist/esm/text-field.js CHANGED
@@ -13,7 +13,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
13
13
  var analyticsParams = {
14
14
  componentName: 'textField',
15
15
  packageName: "@atlaskit/textfield",
16
- packageVersion: "6.3.0"
16
+ packageVersion: "6.3.1"
17
17
  };
18
18
  var TextfieldComponent = /*#__PURE__*/forwardRef(function (props, ref) {
19
19
  var _props$appearance = props.appearance,
package/dist/types/styles.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import { Appearance } from './types';
1
+ import { type Appearance } from './types';
2
2
  export declare const containerStyles: (appearance: Appearance, width?: string | number) => {
3
3
  readonly borderStyle: "none" | "solid";
4
4
  readonly boxSizing: "border-box";
5
5
  readonly display: "flex";
6
6
  readonly flex: "1 1 100%";
7
- readonly fontSize: number;
7
+ readonly font: "var(--ds-font-body)";
8
8
  readonly justifyContent: "space-between";
9
9
  readonly maxWidth: string | number;
10
10
  readonly overflow: "hidden";
@@ -62,22 +62,18 @@ export declare const inputStyles: () => {
62
62
  readonly boxSizing: "border-box";
63
63
  readonly color: "inherit";
64
64
  readonly cursor: "inherit";
65
- readonly fontSize: number;
65
+ readonly font: "var(--ds-font-body)";
66
66
  readonly minWidth: "0";
67
67
  readonly outline: "none";
68
68
  readonly width: "100%";
69
- readonly lineHeight: number;
70
- readonly fontFamily: string;
71
69
  readonly '&[data-monospaced]': {
72
- readonly fontFamily: string;
70
+ readonly fontFamily: "var(--ds-font-family-monospace)";
73
71
  };
74
72
  readonly '&[data-compact]': {
75
73
  readonly padding: "var(--ds-space-050) var(--ds-space-075)";
76
- readonly height: `${string}em`;
77
74
  };
78
75
  readonly '&:not([data-compact])': {
79
76
  readonly padding: "var(--ds-space-100) var(--ds-space-075)";
80
- readonly height: `${string}em`;
81
77
  };
82
78
  readonly '&[disabled]': {
83
79
  readonly WebkitTextFillColor: "var(--ds-text-disabled)";
package/dist/types-ts4.5/styles.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import { Appearance } from './types';
1
+ import { type Appearance } from './types';
2
2
  export declare const containerStyles: (appearance: Appearance, width?: string | number) => {
3
3
  readonly borderStyle: "none" | "solid";
4
4
  readonly boxSizing: "border-box";
5
5
  readonly display: "flex";
6
6
  readonly flex: "1 1 100%";
7
- readonly fontSize: number;
7
+ readonly font: "var(--ds-font-body)";
8
8
  readonly justifyContent: "space-between";
9
9
  readonly maxWidth: string | number;
10
10
  readonly overflow: "hidden";
@@ -62,22 +62,18 @@ export declare const inputStyles: () => {
62
62
  readonly boxSizing: "border-box";
63
63
  readonly color: "inherit";
64
64
  readonly cursor: "inherit";
65
- readonly fontSize: number;
65
+ readonly font: "var(--ds-font-body)";
66
66
  readonly minWidth: "0";
67
67
  readonly outline: "none";
68
68
  readonly width: "100%";
69
- readonly lineHeight: number;
70
- readonly fontFamily: string;
71
69
  readonly '&[data-monospaced]': {
72
- readonly fontFamily: string;
70
+ readonly fontFamily: "var(--ds-font-family-monospace)";
73
71
  };
74
72
  readonly '&[data-compact]': {
75
73
  readonly padding: "var(--ds-space-050) var(--ds-space-075)";
76
- readonly height: `${string}em`;
77
74
  };
78
75
  readonly '&:not([data-compact])': {
79
76
  readonly padding: "var(--ds-space-100) var(--ds-space-075)";
80
- readonly height: `${string}em`;
81
77
  };
82
78
  readonly '&[disabled]': {
83
79
  readonly WebkitTextFillColor: "var(--ds-text-disabled)";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/textfield",
3
- "version": "6.3.0",
3
+ "version": "6.3.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/"
@@ -28,8 +28,8 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@atlaskit/analytics-next": "^9.3.0",
31
- "@atlaskit/theme": "^12.7.0",
32
- "@atlaskit/tokens": "^1.45.0",
31
+ "@atlaskit/theme": "^12.8.0",
32
+ "@atlaskit/tokens": "^1.46.0",
33
33
  "@babel/runtime": "^7.0.0",
34
34
  "@emotion/react": "^11.7.1"
35
35
  },