@atlaskit/textfield 5.1.11 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/textfield
 
+## 5.2.0
+
+### Minor Changes
+
+- [`acf974e717c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/acf974e717c) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.1.13
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 5.1.12
+
+### Patch Changes
+
+- [`7c14ea36248`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c14ea36248) - [ux] Updated input tokens within `@atlaskit/textfield`.
+
 ## 5.1.11
 
 ### Patch Changes

package/dist/cjs/component-tokens.js

@@ -18,8 +18,8 @@ var defaultBackgroundColor = {
 };
 exports.defaultBackgroundColor = defaultBackgroundColor;
 var defaultBackgroundColorFocus = {
-  light: "var(--ds-surface, ".concat(_colors.N0, ")"),
-  dark: "var(--ds-surface, ".concat(_colors.DN10, ")")
+  light: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")"),
+  dark: "var(--ds-background-input-pressed, ".concat(_colors.DN10, ")")
 };
 exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
 var defaultBackgroundColorHover = {

package/dist/cjs/text-field.js

@@ -19,7 +19,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -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.11"
+  packageVersion: "5.2.0"
 };
 var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,
@@ -125,7 +125,7 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [mode]);
   return (// We use event bubbling here to listen to any child element mouse down event.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, _core.jsx)("div", {
+    (0, _react2.jsx)("div", {
       "data-disabled": isDisabled ? isDisabled : undefined,
       "data-invalid": isInvalid ? isInvalid : undefined,
       "data-ds--text-field--container": true,
@@ -135,7 +135,7 @@ var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ,
       css: containerStyles,
       className: className
-    }, elemBeforeInput, (0, _core.jsx)("input", (0, _extends2.default)({}, spreadProps, {
+    }, elemBeforeInput, (0, _react2.jsx)("input", (0, _extends2.default)({}, spreadProps, {
       "data-compact": isCompact ? isCompact : undefined,
       "data-monospaced": isMonospaced ? isMonospaced : undefined,
       "data-ds--text-field--input": true,

package/dist/cjs/version.json

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

package/dist/es2019/component-tokens.js

@@ -8,8 +8,8 @@ export const defaultBackgroundColor = {
   dark: `var(--ds-background-input, ${DN10})`
 };
 export const defaultBackgroundColorFocus = {
-  light: `var(--ds-surface, ${N0})`,
-  dark: `var(--ds-surface, ${DN10})`
+  light: `var(--ds-background-input-pressed, ${N0})`,
+  dark: `var(--ds-background-input-pressed, ${DN10})`
 };
 export const defaultBackgroundColorHover = {
   light: `var(--ds-background-input-hovered, ${N30})`,

package/dist/es2019/text-field.js

@@ -2,14 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
 const analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.11"
+  packageVersion: "5.2.0"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/dist/es2019/version.json

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

package/dist/esm/component-tokens.js

@@ -8,8 +8,8 @@ export var defaultBackgroundColor = {
   dark: "var(--ds-background-input, ".concat(DN10, ")")
 };
 export var defaultBackgroundColorFocus = {
-  light: "var(--ds-surface, ".concat(N0, ")"),
-  dark: "var(--ds-surface, ".concat(DN10, ")")
+  light: "var(--ds-background-input-pressed, ".concat(N0, ")"),
+  dark: "var(--ds-background-input-pressed, ".concat(DN10, ")")
 };
 export var defaultBackgroundColorHover = {
   light: "var(--ds-background-input-hovered, ".concat(N30, ")"),

package/dist/esm/text-field.js

@@ -10,14 +10,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { containerStyles as getContainerStyles, inputStyles as getInputStyles } from './styles';
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.1.11"
+  packageVersion: "5.2.0"
 };
 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.11",
+	"version": "5.2.0",
 	"sideEffects": false
 }

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

@@ -7,8 +7,8 @@ export declare const defaultBackgroundColor: {
     dark: "var(--ds-background-input)";
 };
 export declare const defaultBackgroundColorFocus: {
-    light: "var(--ds-surface)";
-    dark: "var(--ds-surface)";
+    light: "var(--ds-background-input-pressed)";
+    dark: "var(--ds-background-input-pressed)";
 };
 export declare const defaultBackgroundColorHover: {
     light: "var(--ds-background-input-hovered)";

package/dist/types/styles.d.ts

@@ -36,7 +36,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
         borderColor: "var(--ds-border-danger)";
     };
     readonly '&[data-invalid]:focus-within': {
-        backgroundColor: "var(--ds-surface)";
+        backgroundColor: "var(--ds-background-input-pressed)";
         borderColor: "var(--ds-border-focused)";
     };
     readonly '@media screen and (-ms-high-contrast: active)': {
@@ -113,12 +113,12 @@ export declare const textFieldColors: {
     };
     backgroundColorFocus: {
         standard: {
-            light: "var(--ds-surface)";
-            dark: "var(--ds-surface)";
+            light: "var(--ds-background-input-pressed)";
+            dark: "var(--ds-background-input-pressed)";
         };
         subtle: {
-            light: "var(--ds-surface)";
-            dark: "var(--ds-surface)";
+            light: "var(--ds-background-input-pressed)";
+            dark: "var(--ds-background-input-pressed)";
         };
         none: {
             light: string;
@@ -179,14 +179,14 @@ export declare const textFieldColors: {
         light: {
             backgroundColor: "var(--ds-background-input)";
             backgroundColorHover: "var(--ds-background-input-hovered)";
-            backgroundColorFocus: "var(--ds-surface)";
+            backgroundColorFocus: "var(--ds-background-input-pressed)";
             borderColor: "var(--ds-border-danger)";
             borderColorFocus: "var(--ds-border-focused)";
         };
         dark: {
             backgroundColor: "var(--ds-background-input)";
             backgroundColorHover: "var(--ds-background-input-hovered)";
-            backgroundColorFocus: "var(--ds-surface)";
+            backgroundColorFocus: "var(--ds-background-input-pressed)";
             borderColor: "var(--ds-border-danger)";
             borderColorFocus: "var(--ds-border-focused)";
         };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.1.11",
+  "version": "5.2.0",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -18,7 +18,8 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Text field"
+      "name": "Text field",
+      "category": "Components"
     }
   },
   "af:exports": {
@@ -26,23 +27,24 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^20.5.0",
+    "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/ds-lib": "^2.0.1",
     "@atlaskit/form": "^8.5.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^12.4.0",
+    "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -51,7 +53,7 @@
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.5",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [
@@ -64,6 +66,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "styling": [
         "static",

package/report.api.md

@@ -0,0 +1,200 @@
+## API Report File for "@atlaskit/textfield"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { AllHTMLAttributes } from 'react';
+import { FormEventHandler } from 'react';
+import { default as React_2 } from 'react';
+
+export declare type Appearance = 'subtle' | 'standard' | 'none';
+
+declare const _default: React_2.NamedExoticComponent<
+  TextFieldProps & React_2.RefAttributes<unknown>
+>;
+export default _default;
+
+export declare const TextFieldColors: {
+  backgroundColor: {
+    standard: {
+      light: 'var(--ds-background-input)';
+      dark: 'var(--ds-background-input)';
+    };
+    subtle: {
+      light: string;
+      dark: string;
+    };
+    none: {
+      light: string;
+      dark: string;
+    };
+  };
+  backgroundColorFocus: {
+    standard: {
+      light: 'var(--ds-background-input-pressed)';
+      dark: 'var(--ds-background-input-pressed)';
+    };
+    subtle: {
+      light: 'var(--ds-background-input-pressed)';
+      dark: 'var(--ds-background-input-pressed)';
+    };
+    none: {
+      light: string;
+      dark: string;
+    };
+  };
+  backgroundColorHover: {
+    standard: {
+      light: 'var(--ds-background-input-hovered)';
+      dark: 'var(--ds-background-input-hovered)';
+    };
+    subtle: {
+      light: 'var(--ds-background-neutral-subtle-hovered)';
+      dark: 'var(--ds-background-neutral-subtle-hovered)';
+    };
+    none: {
+      light: string;
+      dark: string;
+    };
+  };
+  borderColor: {
+    standard: {
+      light: 'var(--ds-border)';
+      dark: 'var(--ds-border)';
+    };
+    subtle: {
+      light: string;
+      dark: string;
+    };
+    none: {
+      light: string;
+      dark: string;
+    };
+  };
+  borderColorFocus: {
+    standard: {
+      light: 'var(--ds-border-focused)';
+      dark: 'var(--ds-border-focused)';
+    };
+    subtle: {
+      light: 'var(--ds-border-focused)';
+      dark: 'var(--ds-border-focused)';
+    };
+    none: {
+      light: string;
+      dark: string;
+    };
+  };
+  placeholderTextColor: {
+    light: 'var(--ds-text-subtlest)';
+    dark: 'var(--ds-text-subtlest)';
+  };
+  textColor: {
+    light: 'var(--ds-text)';
+    dark: 'var(--ds-text)';
+  };
+  invalidRules: {
+    light: {
+      backgroundColor: 'var(--ds-background-input)';
+      backgroundColorHover: 'var(--ds-background-input-hovered)';
+      backgroundColorFocus: 'var(--ds-background-input-pressed)';
+      borderColor: 'var(--ds-border-danger)';
+      borderColorFocus: 'var(--ds-border-focused)';
+    };
+    dark: {
+      backgroundColor: 'var(--ds-background-input)';
+      backgroundColorHover: 'var(--ds-background-input-hovered)';
+      backgroundColorFocus: 'var(--ds-background-input-pressed)';
+      borderColor: 'var(--ds-border-danger)';
+      borderColorFocus: 'var(--ds-border-focused)';
+    };
+  };
+  disabledRules: {
+    light: {
+      backgroundColor: 'var(--ds-background-disabled)';
+      backgroundColorHover: 'var(--ds-background-disabled)';
+      borderColor: 'var(--ds-background-disabled)';
+      textColor: 'var(--ds-text-disabled)';
+    };
+    dark: {
+      backgroundColor: 'var(--ds-background-disabled)';
+      backgroundColorHover: 'var(--ds-background-disabled)';
+      borderColor: 'var(--ds-background-disabled)';
+      textColor: 'var(--ds-text-disabled)';
+    };
+  };
+};
+
+export declare interface TextFieldProps
+  extends AllHTMLAttributes<HTMLInputElement> {
+  /**
+   * Affects the visual style of the text field.
+   */
+  appearance?: 'standard' | 'none' | 'subtle';
+  /**
+   * Applies compact styling, making the field smaller.
+   */
+  isCompact?: boolean;
+  /**
+   * Sets the field as to appear disabled,
+   * users will not be able to interact with the text field.
+   */
+  isDisabled?: boolean;
+  /**
+   * Changes the text field to have a border indicating that its value is invalid.
+   */
+  isInvalid?: boolean;
+  /**
+   * Sets content text value to appear monospaced.
+   */
+  isMonospaced?: boolean;
+  /**
+   * If true, prevents the value of the input from being edited.
+   */
+  isReadOnly?: boolean;
+  /**
+   * Set required for form that the field is part of.
+   */
+  isRequired?: boolean;
+  /**
+   * Element after input in text field.
+   */
+  elemAfterInput?: React_2.ReactNode;
+  /**
+   * Element before input in text field.
+   */
+  elemBeforeInput?: React_2.ReactNode;
+  /**
+   * Sets maximum width of input.
+   */
+  width?: string | number;
+  /**
+   * Handler called when the mouse down event is triggered on the input element.
+   */
+  onMouseDown?: React_2.MouseEventHandler<HTMLElement>;
+  /**
+   * A `testId` prop is provided for specified elements, which is a unique
+   * string that appears as a data attribute `data-testid` in the rendered code,
+   * serving as a hook for automated tests.
+   */
+  testId?: string;
+  /**
+   * Name of the input element.
+   */
+  name?: string;
+  /**
+   * Class name to apply to the input element.
+   */
+  className?: string;
+  /**
+   * Placeholder text to display in the text field whenever it is empty.
+   */
+  placeholder?: string;
+  /**
+   * Handler called when the inputs value changes.
+   */
+  onChange?: FormEventHandler<HTMLInputElement>;
+}
+
+export {};
+```