@atlaskit/textfield 5.6.8 → 6.0.0

package/dist/esm/styles.js

@@ -2,107 +2,72 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _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; }
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { R400 } from '@atlaskit/theme/colors';
+import { B200, N0, N10, N100, N200, N30, N40, 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';
-import * as componentTokens from './component-tokens';
 var fontSize = getFontSize();
 var gridSize = getGridSize();
-var disabledRules = {
-  light: {
-    backgroundColor: componentTokens.disabledBackgroundColor.light,
-    backgroundColorHover: componentTokens.disabledBackgroundColor.light,
-    borderColor: componentTokens.disabledBackgroundColor.light,
-    textColor: componentTokens.disabledTextColor.light
-  },
-  dark: {
-    backgroundColor: componentTokens.disabledBackgroundColor.dark,
-    backgroundColorHover: componentTokens.disabledBackgroundColor.dark,
-    borderColor: componentTokens.disabledBackgroundColor.dark,
-    textColor: componentTokens.disabledTextColor.dark
-  }
-};
-var invalidRules = {
-  light: {
-    // ----
-    backgroundColor: componentTokens.defaultBackgroundColor.light,
-    backgroundColorHover: componentTokens.defaultBackgroundColorHover.light,
-    // ^--- the above values aren't used directly they remain because its exposed by the `textFieldColors` export
-    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.light,
-    borderColor: "var(--ds-border-danger, ".concat(R400, ")"),
-    borderColorFocus: componentTokens.defaultBorderColorFocus.light
-  },
-  dark: {
-    // ----
-    backgroundColor: componentTokens.defaultBackgroundColor.dark,
-    backgroundColorHover: componentTokens.defaultBackgroundColorHover.dark,
-    // ^--- the above values aren't used directly they remain because its exposed by the `textFieldColors` export
-    backgroundColorFocus: componentTokens.defaultBackgroundColorFocus.dark,
-    borderColor: "var(--ds-border-danger, ".concat(R400, ")"),
-    borderColorFocus: componentTokens.defaultBorderColorFocus.dark
-  }
-};
 var backgroundColor = {
-  standard: componentTokens.defaultBackgroundColor,
-  subtle: componentTokens.transparent,
-  none: componentTokens.transparent
+  standard: "var(--ds-background-input, ".concat(N10, ")"),
+  subtle: 'transparent',
+  none: 'transparent'
 };
 var backgroundColorFocus = {
-  standard: componentTokens.defaultBackgroundColorFocus,
-  subtle: componentTokens.defaultBackgroundColorFocus,
-  none: componentTokens.transparent
+  standard: "var(--ds-background-input-pressed, ".concat(N0, ")"),
+  subtle: "var(--ds-background-input-pressed, ".concat(N0, ")"),
+  none: 'transparent'
 };
 var backgroundColorHover = {
-  standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.defaultBackgroundColorHover,
-  none: componentTokens.transparent
+  standard: "var(--ds-background-input-hovered, ".concat(N30, ")"),
+  subtle: "var(--ds-background-input-hovered, ".concat(N30, ")"),
+  none: 'transparent'
 };
 var borderColor = {
-  standard: componentTokens.defaultBorderColor,
-  subtle: componentTokens.transparent,
-  none: componentTokens.transparent
+  standard: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
+  subtle: 'transparent',
+  none: 'transparent'
 };
 var borderColorFocus = {
-  standard: componentTokens.defaultBorderColorFocus,
-  subtle: componentTokens.defaultBorderColorFocus,
-  none: componentTokens.transparent
+  standard: "var(--ds-border-focused, ".concat(B200, ")"),
+  subtle: "var(--ds-border-focused, ".concat(B200, ")"),
+  none: 'transparent'
 };
 var borderColorHover = {
-  standard: componentTokens.defaultBorderColor,
-  subtle: componentTokens.subtleBorderColorHover,
-  none: componentTokens.transparent
+  standard: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
+  subtle: "var(--ds-border-input, transparent)",
+  none: 'transparent'
 };
-var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor(appearance, mode) {
+var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor(appearance) {
   return {
-    backgroundColor: backgroundColor[appearance][mode],
-    borderColor: borderColor[appearance][mode],
-    color: componentTokens.textColor[mode],
+    backgroundColor: backgroundColor[appearance],
+    borderColor: borderColor[appearance],
+    color: "var(--ds-text, ".concat(N900, ")"),
     cursor: 'text',
     '&:hover:not([data-disabled])': {
-      backgroundColor: backgroundColorHover[appearance][mode],
-      borderColor: borderColorHover[appearance][mode]
+      backgroundColor: backgroundColorHover[appearance],
+      borderColor: borderColorHover[appearance]
     },
     '&:focus-within:not([data-disabled])': {
-      backgroundColor: backgroundColorFocus[appearance][mode],
-      borderColor: borderColorFocus[appearance][mode],
-      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance][mode]) : undefined
+      backgroundColor: backgroundColorFocus[appearance],
+      borderColor: borderColorFocus[appearance],
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance]) : undefined
     },
     '&[data-disabled]': _objectSpread({
-      color: disabledRules[mode].textColor,
+      color: "var(--ds-text-disabled, ".concat(N70, ")"),
       cursor: 'not-allowed'
     }, appearance === 'standard' && {
-      backgroundColor: disabledRules[mode].backgroundColor,
-      borderColor: disabledRules[mode].borderColor
+      backgroundColor: "var(--ds-background-disabled, ".concat(N10, ")"),
+      borderColor: "var(--ds-background-disabled, ".concat(N10, ")")
     }),
     '&[data-invalid], &[data-invalid]:hover': {
-      borderColor: invalidRules[mode].borderColor,
-      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules[mode].borderColor) : undefined
+      borderColor: "var(--ds-border-danger, ".concat(R400, ")"),
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")")) : undefined
     },
     '&[data-invalid]:focus-within': {
-      backgroundColor: invalidRules[mode].backgroundColorFocus,
-      borderColor: invalidRules[mode].borderColorFocus,
-      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules[mode].borderColorFocus) : undefined
+      backgroundColor: "var(--ds-background-input-pressed, ".concat(N0, ")"),
+      borderColor: "var(--ds-border-focused, ".concat(B200, ")"),
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")")) : undefined
     },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
@@ -127,10 +92,10 @@ var widthMap = {
 var getMaxWidth = function getMaxWidth(width) {
   return !width ? "100%" : width in widthMap ? widthMap[width] : +width;
 };
-export var containerStyles = function containerStyles(appearance, mode, width) {
+export var containerStyles = function containerStyles(appearance, width) {
   return _objectSpread(_objectSpread(_objectSpread({
     alignItems: 'center'
-  }, getContainerTextBgAndBorderColor(appearance, mode)), {}, {
+  }, getContainerTextBgAndBorderColor(appearance)), {}, {
     borderRadius: 3,
     borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2
   }, getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ? {
@@ -150,7 +115,7 @@ export var containerStyles = function containerStyles(appearance, mode, width) {
     pointerEvents: 'auto'
   });
 };
-export var inputStyles = function inputStyles(mode) {
+export var inputStyles = function inputStyles() {
   return {
     backgroundColor: 'transparent',
     border: 0,
@@ -178,7 +143,7 @@ export var inputStyles = function inputStyles(mode) {
       // Safari (WebKit) adds a -webkit-text-fill-color style to disabled inputs
       // which takes priority over color and makes the text unreadable. Need to
       // override it with the color we want.
-      WebkitTextFillColor: disabledRules[mode].textColor
+      WebkitTextFillColor: "var(--ds-text-disabled, ".concat(N70, ")")
     },
     // Hide the clear indicator on Edge (Windows only)
     '&::-ms-clear': {
@@ -191,9 +156,9 @@ export var inputStyles = function inputStyles(mode) {
       textOverflow: 'ellipsis'
     },
     '&::placeholder': {
-      color: componentTokens.placeholderTextColor[mode],
+      color: "var(--ds-text-subtlest, ".concat(N200, ")"),
       '&:disabled': {
-        color: disabledRules[mode].textColor
+        color: "var(--ds-text-disabled, ".concat(N70, ")")
       }
     },
     '@media screen and (-ms-high-contrast: active)': {
@@ -202,18 +167,4 @@ export var inputStyles = function inputStyles(mode) {
       }
     }
   };
-};
-
-// TODO: Remove when removing legacy theming.
-export var textFieldColors = {
-  backgroundColor: backgroundColor,
-  backgroundColorFocus: backgroundColorFocus,
-  backgroundColorHover: backgroundColorHover,
-  borderColor: borderColor,
-  borderColorFocus: borderColorFocus,
-  borderColorHover: borderColorHover,
-  placeholderTextColor: componentTokens.placeholderTextColor,
-  textColor: componentTokens.textColor,
-  invalidRules: invalidRules,
-  disabledRules: disabledRules
 };

package/dist/esm/text-field.js

@@ -9,12 +9,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
 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.6.8"
+  packageVersion: "6.0.0"
 };
 var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,
@@ -44,8 +43,6 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
     width = props.width,
     spreadProps = _objectWithoutProperties(props, _excluded);
   var inputRef = useRef(null);
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   var handleOnFocus = usePlatformLeafEventHandler(_objectSpread({
     fn: function fn(event) {
       onFocus && onFocus(event);
@@ -83,11 +80,9 @@ var Textfield = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [ref]);
   var containerStyles = useMemo(function () {
-    return getContainerStyles(appearance, mode, width);
-  }, [appearance, mode, width]);
-  var inputStyle = useMemo(function () {
-    return getInputStyles(mode);
-  }, [mode]);
+    return getContainerStyles(appearance, width);
+  }, [appearance, width]);
+  var inputStyle = getInputStyles();
   return (
     /**
      * It is not normally acceptable to add click and key handlers to

package/dist/types/index.d.ts

@@ -1,3 +1,2 @@
 export { default } from './text-field';
-export { textFieldColors as TextFieldColors } from './styles';
 export type { TextfieldProps as TextFieldProps, Appearance } from './types';

package/dist/types/styles.d.ts

@@ -1,6 +1,5 @@
-import { ThemeModes } from '@atlaskit/theme/types';
 import { Appearance } from './types';
-export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number) => {
+export declare const containerStyles: (appearance: Appearance, width?: string | number) => {
     readonly borderStyle: "none" | "solid";
     readonly boxSizing: "border-box";
     readonly display: "flex";
@@ -57,7 +56,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     };
     readonly alignItems: "center";
 };
-export declare const inputStyles: (mode: ThemeModes) => {
+export declare const inputStyles: () => {
     readonly backgroundColor: "transparent";
     readonly border: 0;
     readonly boxSizing: "border-box";
@@ -104,127 +103,3 @@ export declare const inputStyles: (mode: ThemeModes) => {
         };
     };
 };
-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-input-hovered)";
-            dark: "var(--ds-background-input-hovered)";
-        };
-        none: {
-            light: string;
-            dark: string;
-        };
-    };
-    borderColor: {
-        standard: {
-            light: "var(--ds-border-input)";
-            dark: "var(--ds-border-input)";
-        };
-        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;
-        };
-    };
-    borderColorHover: {
-        standard: {
-            light: "var(--ds-border-input)";
-            dark: "var(--ds-border-input)";
-        };
-        subtle: {
-            light: "var(--ds-border-input)";
-            dark: "var(--ds-border-input)";
-        };
-        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)";
-        };
-    };
-};

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +1,2 @@
 export { default } from './text-field';
-export { textFieldColors as TextFieldColors } from './styles';
 export type { TextfieldProps as TextFieldProps, Appearance } from './types';

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

@@ -1,6 +1,5 @@
-import { ThemeModes } from '@atlaskit/theme/types';
 import { Appearance } from './types';
-export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number) => {
+export declare const containerStyles: (appearance: Appearance, width?: string | number) => {
     readonly borderStyle: "none" | "solid";
     readonly boxSizing: "border-box";
     readonly display: "flex";
@@ -57,7 +56,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     };
     readonly alignItems: "center";
 };
-export declare const inputStyles: (mode: ThemeModes) => {
+export declare const inputStyles: () => {
     readonly backgroundColor: "transparent";
     readonly border: 0;
     readonly boxSizing: "border-box";
@@ -104,127 +103,3 @@ export declare const inputStyles: (mode: ThemeModes) => {
         };
     };
 };
-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-input-hovered)";
-            dark: "var(--ds-background-input-hovered)";
-        };
-        none: {
-            light: string;
-            dark: string;
-        };
-    };
-    borderColor: {
-        standard: {
-            light: "var(--ds-border-input)";
-            dark: "var(--ds-border-input)";
-        };
-        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;
-        };
-    };
-    borderColorHover: {
-        standard: {
-            light: "var(--ds-border-input)";
-            dark: "var(--ds-border-input)";
-        };
-        subtle: {
-            light: "var(--ds-border-input)";
-            dark: "var(--ds-border-input)";
-        };
-        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)";
-        };
-    };
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.6.8",
+  "version": "6.0.0",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.25.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/codemod-utils": "^4.2.3",
     "@atlaskit/ds-lib": "^2.2.0",
@@ -97,4 +98,4 @@
   },
   "homepage": "https://atlassian.design/components/textfield/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}