@atlaskit/textfield 5.6.1 → 5.6.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/textfield
 
+## 5.6.3
+
+### Patch Changes
+
+- [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
+
+## 5.6.2
+
+### Patch Changes
+
+- [`a01cf0168b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a01cf0168b8) - update border width with border spacing token
+
 ## 5.6.1
 
 ### Patch Changes

package/dist/cjs/styles.js

@@ -94,7 +94,7 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     '&:focus-within:not([data-disabled])': {
       backgroundColor: backgroundColorFocus[appearance][mode],
       borderColor: borderColorFocus[appearance][mode],
-      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(borderColorFocus[appearance][mode]) : undefined
+      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance][mode]) : undefined
     },
     '&[data-disabled]': _objectSpread({
       color: disabledRules[mode].textColor,
@@ -105,12 +105,12 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     }),
     '&[data-invalid], &[data-invalid]:hover': {
       borderColor: invalidRules[mode].borderColor,
-      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColor) : undefined
+      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules[mode].borderColor) : undefined
     },
     '&[data-invalid]:focus-within': {
       backgroundColor: invalidRules[mode].backgroundColorFocus,
       borderColor: invalidRules[mode].borderColorFocus,
-      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColorFocus) : undefined
+      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules[mode].borderColorFocus) : undefined
     },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
@@ -140,11 +140,11 @@ var containerStyles = function containerStyles(appearance, mode, width) {
     alignItems: 'center'
   }, getContainerTextBgAndBorderColor(appearance, mode)), {}, {
     borderRadius: 3,
-    borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2
+    borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2
   }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ?
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   {
-    padding: '1px 0'
+    padding: "var(--ds-border-width, 1px)".concat(" 0")
   } : {}), {}, {
     borderStyle: appearance === 'none' ? 'none' : 'solid',
     boxSizing: 'border-box',

package/dist/cjs/text-field.js

@@ -24,7 +24,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.6.1"
+  packageVersion: "5.6.3"
 };
 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.6.1",
+	"version": "5.6.3",
 	"sideEffects": false
 }

package/dist/es2019/styles.js

@@ -82,7 +82,7 @@ const getContainerTextBgAndBorderColor = (appearance, mode) => ({
   '&: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 1px ${borderColorFocus[appearance][mode]}` : undefined
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance][mode]}` : undefined
   },
   '&[data-disabled]': {
     color: disabledRules[mode].textColor,
@@ -96,12 +96,12 @@ const getContainerTextBgAndBorderColor = (appearance, mode) => ({
   },
   '&[data-invalid], &[data-invalid]:hover': {
     borderColor: invalidRules[mode].borderColor,
-    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 1px ${invalidRules[mode].borderColor}` : undefined
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules[mode].borderColor}` : 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 1px ${invalidRules[mode].borderColorFocus}` : undefined
+    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules[mode].borderColorFocus}` : undefined
   },
   '@media screen and (-ms-high-contrast: active)': {
     '&[data-invalid]:focus-within': {
@@ -127,12 +127,12 @@ export const containerStyles = (appearance, mode, width) => ({
   alignItems: 'center',
   ...getContainerTextBgAndBorderColor(appearance, mode),
   borderRadius: 3,
-  borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2,
+  borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2,
   // add 1px padding on both top and bottom to keep the same overall height after border reduced from 2px to 1px under feature flag
   ...(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && appearance !== 'none' ?
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   {
-    padding: '1px 0'
+    padding: `${"var(--ds-border-width, 1px)"} 0`
   } : {}),
   borderStyle: appearance === 'none' ? 'none' : 'solid',
   boxSizing: 'border-box',

package/dist/es2019/text-field.js

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

package/dist/es2019/version.json

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

package/dist/esm/styles.js

@@ -86,7 +86,7 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     '&: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 1px ".concat(borderColorFocus[appearance][mode]) : undefined
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance][mode]) : undefined
     },
     '&[data-disabled]': _objectSpread({
       color: disabledRules[mode].textColor,
@@ -97,12 +97,12 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     }),
     '&[data-invalid], &[data-invalid]:hover': {
       borderColor: invalidRules[mode].borderColor,
-      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColor) : undefined
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules[mode].borderColor) : 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 1px ".concat(invalidRules[mode].borderColorFocus) : undefined
+      boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules[mode].borderColorFocus) : undefined
     },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
@@ -132,11 +132,11 @@ export var containerStyles = function containerStyles(appearance, mode, width) {
     alignItems: 'center'
   }, getContainerTextBgAndBorderColor(appearance, mode)), {}, {
     borderRadius: 3,
-    borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2
+    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' ?
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   {
-    padding: '1px 0'
+    padding: "var(--ds-border-width, 1px)".concat(" 0")
   } : {}), {}, {
     borderStyle: appearance === 'none' ? 'none' : 'solid',
     boxSizing: 'border-box',

package/dist/esm/text-field.js

@@ -14,7 +14,7 @@ import { containerStyles as getContainerStyles, inputStyles as getInputStyles }
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "5.6.1"
+  packageVersion: "5.6.3"
 };
 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.6.1",
+	"version": "5.6.3",
 	"sideEffects": false
 }

package/dist/types/styles.d.ts

@@ -15,7 +15,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     readonly pointerEvents: "auto";
     readonly padding?: string | undefined;
     readonly borderRadius: 3;
-    readonly borderWidth: 1 | 2;
+    readonly borderWidth: "var(--ds-border-width)" | 2;
     readonly backgroundColor: string;
     readonly borderColor: string;
     readonly color: "var(--ds-text)";

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

@@ -15,7 +15,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     readonly pointerEvents: "auto";
     readonly padding?: string | undefined;
     readonly borderRadius: 3;
-    readonly borderWidth: 1 | 2;
+    readonly borderWidth: "var(--ds-border-width)" | 2;
     readonly backgroundColor: string;
     readonly borderColor: string;
     readonly color: "var(--ds-text)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.6.1",
+  "version": "5.6.3",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -45,6 +45,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
+    "@af/accessibility-testing": "*",
     "@atlaskit/codemod-utils": "^4.2.3",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/ssr": "*",

package/tmp/api-report-tmp.d.ts

@@ -1,166 +0,0 @@
-## 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';
-
-// @public (undocumented)
-export type Appearance = 'none' | 'standard' | 'subtle';
-
-// @public
-const _default: React_2.NamedExoticComponent<TextFieldProps & React_2.RefAttributes<unknown>>;
-export default _default;
-
-// @public (undocumented)
-export 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)";
-        };
-    };
-};
-
-// @public (undocumented)
-export interface TextFieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
-    appearance?: Appearance;
-    className?: string;
-    elemAfterInput?: React_2.ReactNode;
-    elemBeforeInput?: React_2.ReactNode;
-    isCompact?: boolean;
-    isDisabled?: boolean;
-    isInvalid?: boolean;
-    isMonospaced?: boolean;
-    isReadOnly?: boolean;
-    isRequired?: boolean;
-    name?: string;
-    onChange?: FormEventHandler<HTMLInputElement>;
-    onMouseDown?: React_2.MouseEventHandler<HTMLElement>;
-    placeholder?: string;
-    testId?: string;
-    width?: number | string;
-}
-
-// (No @packageDocumentation comment for this package)
-
-```