@atlaskit/textfield 6.0.0 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/textfield
 
+## 6.1.0
+
+### Minor Changes
+
+- [#80805](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80805) [`427c2dd9e0d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/427c2dd9e0d6) - [ux] Update input border width from 2px to 1px with darker color to meet 3:1 color contrast
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.0.1
+
+### Patch Changes
+
+- [#74756](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74756) [`8e66f751df96`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8e66f751df96) - Use feature flag to roll out border width update from 2px to 1px
+
 ## 6.0.0
 
 ### Major Changes

package/dist/cjs/styles.js

@@ -56,7 +56,7 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     '&:focus-within:not([data-disabled])': {
       backgroundColor: backgroundColorFocus[appearance],
       borderColor: borderColorFocus[appearance],
-      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance]) : undefined
+      boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance])
     },
     '&[data-disabled]': _objectSpread({
       color: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
@@ -67,12 +67,12 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     }),
     '&[data-invalid], &[data-invalid]:hover': {
       borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")"),
-      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")")) : undefined
+      boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(_colors.R400, ")"))
     },
     '&[data-invalid]:focus-within': {
       backgroundColor: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")"),
       borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
-      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")")) : undefined
+      boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B200, ")"))
     },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
@@ -102,8 +102,8 @@ var containerStyles = exports.containerStyles = function containerStyles(appeara
     alignItems: 'center'
   }, getContainerTextBgAndBorderColor(appearance)), {}, {
     borderRadius: 3,
-    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' ? {
+    borderWidth: "var(--ds-border-width, 1px)"
+  }, appearance !== 'none' ? {
     padding: "var(--ds-border-width, 1px)".concat(" 0")
   } : {}), {}, {
     borderStyle: appearance === 'none' ? 'none' : 'solid',

package/dist/cjs/text-field.js

@@ -16,14 +16,14 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _styles = require("./styles");
 var _excluded = ["appearance", "className", "elemAfterInput", "elemBeforeInput", "isCompact", "isDisabled", "isInvalid", "isMonospaced", "isReadOnly", "isRequired", "name", "onBlur", "onChange", "onFocus", "onMouseDown", "placeholder", "testId", "width"];
 /** @jsx jsx */
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (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; }
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "6.0.0"
+  packageVersion: "6.1.0"
 };
 var Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/es2019/styles.js

@@ -47,7 +47,7 @@ const getContainerTextBgAndBorderColor = appearance => ({
   '&:focus-within:not([data-disabled])': {
     backgroundColor: backgroundColorFocus[appearance],
     borderColor: borderColorFocus[appearance],
-    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance]}` : undefined
+    boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance]}`
   },
   '&[data-disabled]': {
     color: `var(--ds-text-disabled, ${N70})`,
@@ -61,12 +61,12 @@ const getContainerTextBgAndBorderColor = appearance => ({
   },
   '&[data-invalid], &[data-invalid]:hover': {
     borderColor: `var(--ds-border-danger, ${R400})`,
-    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-danger, ${R400})`}` : undefined
+    boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-danger, ${R400})`}`
   },
   '&[data-invalid]:focus-within': {
     backgroundColor: `var(--ds-background-input-pressed, ${N0})`,
     borderColor: `var(--ds-border-focused, ${B200})`,
-    boxShadow: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B200})`}` : undefined
+    boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B200})`}`
   },
   '@media screen and (-ms-high-contrast: active)': {
     '&[data-invalid]:focus-within': {
@@ -92,9 +92,9 @@ export const containerStyles = (appearance, width) => ({
   alignItems: 'center',
   ...getContainerTextBgAndBorderColor(appearance),
   borderRadius: 3,
-  borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width, 1px)" : 2,
+  borderWidth: "var(--ds-border-width, 1px)",
   // 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' ? {
+  ...(appearance !== 'none' ? {
     padding: `${"var(--ds-border-width, 1px)"} 0`
   } : {}),
   borderStyle: appearance === 'none' ? 'none' : 'solid',

package/dist/es2019/text-field.js

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

package/dist/esm/styles.js

@@ -51,7 +51,7 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     '&:focus-within:not([data-disabled])': {
       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
+      boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance])
     },
     '&[data-disabled]': _objectSpread({
       color: "var(--ds-text-disabled, ".concat(N70, ")"),
@@ -62,12 +62,12 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     }),
     '&[data-invalid], &[data-invalid]:hover': {
       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
+      boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-danger, ".concat(R400, ")"))
     },
     '&[data-invalid]:focus-within': {
       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
+      boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B200, ")"))
     },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
@@ -97,8 +97,8 @@ export var containerStyles = function containerStyles(appearance, width) {
     alignItems: 'center'
   }, 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' ? {
+    borderWidth: "var(--ds-border-width, 1px)"
+  }, appearance !== 'none' ? {
     padding: "var(--ds-border-width, 1px)".concat(" 0")
   } : {}), {}, {
     borderStyle: appearance === 'none' ? 'none' : 'solid',

package/dist/esm/text-field.js

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

package/dist/types/styles.d.ts

@@ -14,7 +14,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
     readonly pointerEvents: "auto";
     readonly padding?: string | undefined;
     readonly borderRadius: 3;
-    readonly borderWidth: "var(--ds-border-width)" | 2;
+    readonly borderWidth: "var(--ds-border-width)";
     readonly backgroundColor: string;
     readonly borderColor: string;
     readonly color: "var(--ds-text)";
@@ -26,7 +26,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
     readonly '&:focus-within:not([data-disabled])': {
         backgroundColor: string;
         borderColor: string;
-        boxShadow: string | undefined;
+        boxShadow: string;
     };
     readonly '&[data-disabled]': {
         backgroundColor?: "var(--ds-background-disabled)" | undefined;
@@ -36,12 +36,12 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
     };
     readonly '&[data-invalid], &[data-invalid]:hover': {
         borderColor: "var(--ds-border-danger)";
-        boxShadow: string | undefined;
+        boxShadow: string;
     };
     readonly '&[data-invalid]:focus-within': {
         backgroundColor: "var(--ds-background-input-pressed)";
         borderColor: "var(--ds-border-focused)";
-        boxShadow: string | undefined;
+        boxShadow: string;
     };
     readonly '@media screen and (-ms-high-contrast: active)': {
         '&[data-invalid]:focus-within': {

package/dist/types/types.d.ts

@@ -1,7 +1,9 @@
 import React, { AllHTMLAttributes, FormEventHandler } from 'react';
 export interface TextfieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
     /**
-     * Affects the visual style of the text field.
+     * Controls the appearance of the field.
+     * Subtle shows styling on hover.
+     * None prevents all field styling. Take care when using the none appearance as this doesn't include accessible interactions.
      */
     appearance?: Appearance;
     /**
@@ -10,7 +12,8 @@ export interface TextfieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>
     isCompact?: boolean;
     /**
      * Sets the field as to appear disabled,
-     * users will not be able to interact with the text field.
+     * people will not be able to interact with the text field and it won't appear in the focus order.
+     * Wherever possible, prefer using validation and error messaging over disabled fields for a more accessible experience.
      */
     isDisabled?: boolean;
     /**

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

@@ -14,7 +14,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
     readonly pointerEvents: "auto";
     readonly padding?: string | undefined;
     readonly borderRadius: 3;
-    readonly borderWidth: "var(--ds-border-width)" | 2;
+    readonly borderWidth: "var(--ds-border-width)";
     readonly backgroundColor: string;
     readonly borderColor: string;
     readonly color: "var(--ds-text)";
@@ -26,7 +26,7 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
     readonly '&:focus-within:not([data-disabled])': {
         backgroundColor: string;
         borderColor: string;
-        boxShadow: string | undefined;
+        boxShadow: string;
     };
     readonly '&[data-disabled]': {
         backgroundColor?: "var(--ds-background-disabled)" | undefined;
@@ -36,12 +36,12 @@ export declare const containerStyles: (appearance: Appearance, width?: string |
     };
     readonly '&[data-invalid], &[data-invalid]:hover': {
         borderColor: "var(--ds-border-danger)";
-        boxShadow: string | undefined;
+        boxShadow: string;
     };
     readonly '&[data-invalid]:focus-within': {
         backgroundColor: "var(--ds-background-input-pressed)";
         borderColor: "var(--ds-border-focused)";
-        boxShadow: string | undefined;
+        boxShadow: string;
     };
     readonly '@media screen and (-ms-high-contrast: active)': {
         '&[data-invalid]:focus-within': {

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

@@ -1,7 +1,9 @@
 import React, { AllHTMLAttributes, FormEventHandler } from 'react';
 export interface TextfieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
     /**
-     * Affects the visual style of the text field.
+     * Controls the appearance of the field.
+     * Subtle shows styling on hover.
+     * None prevents all field styling. Take care when using the none appearance as this doesn't include accessible interactions.
      */
     appearance?: Appearance;
     /**
@@ -10,7 +12,8 @@ export interface TextfieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>
     isCompact?: boolean;
     /**
      * Sets the field as to appear disabled,
-     * users will not be able to interact with the text field.
+     * people will not be able to interact with the text field and it won't appear in the focus order.
+     * Wherever possible, prefer using validation and error messaging over disabled fields for a more accessible experience.
      */
     isDisabled?: boolean;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,10 +26,10 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.1.0",
+    "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.41.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -44,7 +44,6 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/dom": "^8.17.1",
@@ -98,4 +97,4 @@
   },
   "homepage": "https://atlassian.design/components/textfield/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

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

@@ -1,40 +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 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)
-
-```