@atlaskit/textfield 5.1.7 → 5.1.10

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/textfield
 
+## 5.1.10
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+
+## 5.1.9
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.1.8
+
+### Patch Changes
+
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- Updated dependencies
+
 ## 5.1.7
 
 ### Patch Changes

package/dist/cjs/component-tokens.js

@@ -23,8 +23,8 @@ var defaultBackgroundColorFocus = {
 };
 exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
 var defaultBackgroundColorHover = {
-  light: "var(--ds-surface, ".concat(_colors.N30, ")"),
-  dark: "var(--ds-surface, ".concat(_colors.DN30, ")")
+  light: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
+  dark: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")")
 };
 exports.defaultBackgroundColorHover = defaultBackgroundColorHover;
 var subtleBackgroundColorHover = {

package/dist/cjs/text-field.js

@@ -40,7 +40,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.7"
+  packageVersion: "5.1.10"
 };
 var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.1.7",
+	"version": "5.1.10",
 	"sideEffects": false
 }

package/dist/es2019/component-tokens.js

@@ -12,8 +12,8 @@ export const defaultBackgroundColorFocus = {
   dark: `var(--ds-surface, ${DN10})`
 };
 export const defaultBackgroundColorHover = {
-  light: `var(--ds-surface, ${N30})`,
-  dark: `var(--ds-surface, ${DN30})`
+  light: `var(--ds-background-input-hovered, ${N30})`,
+  dark: `var(--ds-background-input-hovered, ${DN30})`
 };
 export const subtleBackgroundColorHover = {
   light: `var(--ds-background-neutral-subtle-hovered, ${N30})`,

package/dist/es2019/text-field.js

@@ -9,7 +9,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 const analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.7"
+  packageVersion: "5.1.10"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.1.7",
+	"version": "5.1.10",
 	"sideEffects": false
 }

package/dist/esm/component-tokens.js

@@ -12,8 +12,8 @@ export var defaultBackgroundColorFocus = {
   dark: "var(--ds-surface, ".concat(DN10, ")")
 };
 export var defaultBackgroundColorHover = {
-  light: "var(--ds-surface, ".concat(N30, ")"),
-  dark: "var(--ds-surface, ".concat(DN30, ")")
+  light: "var(--ds-background-input-hovered, ".concat(N30, ")"),
+  dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
 };
 export var subtleBackgroundColorHover = {
   light: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"),

package/dist/esm/text-field.js

@@ -17,7 +17,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.7"
+  packageVersion: "5.1.10"
 };
 var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textfield",
-	"version": "5.1.7",
+	"version": "5.1.10",
 	"sideEffects": false
 }

package/dist/types/component-tokens.d.ts

@@ -11,8 +11,8 @@ export declare const defaultBackgroundColorFocus: {
     dark: "var(--ds-surface)";
 };
 export declare const defaultBackgroundColorHover: {
-    light: "var(--ds-surface)";
-    dark: "var(--ds-surface)";
+    light: "var(--ds-background-input-hovered)";
+    dark: "var(--ds-background-input-hovered)";
 };
 export declare const subtleBackgroundColorHover: {
     light: "var(--ds-background-neutral-subtle-hovered)";

package/dist/types/styles.d.ts

@@ -68,12 +68,12 @@ export declare const inputStyles: (mode: ThemeModes) => {
         readonly fontFamily: string;
     };
     readonly '&[data-compact]': {
-        readonly padding: string;
-        readonly height: string;
+        readonly padding: `${number}px ${number}px`;
+        readonly height: `${string}em`;
     };
     readonly '&:not([data-compact])': {
-        readonly padding: string;
-        readonly height: string;
+        readonly padding: `${number}px ${number}px`;
+        readonly height: `${string}em`;
     };
     readonly '&[disabled]': {
         readonly WebkitTextFillColor: "var(--ds-text-disabled)";
@@ -127,8 +127,8 @@ export declare const textFieldColors: {
     };
     backgroundColorHover: {
         standard: {
-            light: "var(--ds-surface)";
-            dark: "var(--ds-surface)";
+            light: "var(--ds-background-input-hovered)";
+            dark: "var(--ds-background-input-hovered)";
         };
         subtle: {
             light: "var(--ds-background-neutral-subtle-hovered)";
@@ -178,14 +178,14 @@ export declare const textFieldColors: {
     invalidRules: {
         light: {
             backgroundColor: "var(--ds-background-input)";
-            backgroundColorHover: "var(--ds-surface)";
+            backgroundColorHover: "var(--ds-background-input-hovered)";
             backgroundColorFocus: "var(--ds-surface)";
             borderColor: "var(--ds-border-danger)";
             borderColorFocus: "var(--ds-border-focused)";
         };
         dark: {
             backgroundColor: "var(--ds-background-input)";
-            backgroundColorHover: "var(--ds-surface)";
+            backgroundColorHover: "var(--ds-background-input-hovered)";
             backgroundColorFocus: "var(--ds-surface)";
             borderColor: "var(--ds-border-danger)";
             borderColorFocus: "var(--ds-border-focused)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.1.7",
+  "version": "5.1.10",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.7.0",
+    "@atlaskit/tokens": "^0.9.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@atlaskit/avatar": "^20.5.0",
-    "@atlaskit/button": "^16.2.0",
+    "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/form": "^8.5.0",
     "@atlaskit/icon": "^21.10.0",
@@ -51,7 +51,7 @@
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "3.9.6",
+    "typescript": "4.2.4",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [