@atlaskit/textfield 6.2.0 → 6.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/textfield
 
+## 6.3.0
+
+### Minor Changes
+
+-   [#94675](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94675)
+    [`5d9e1dccacca`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5d9e1dccacca) -
+    [ux] Update input border color token to meet 3:1 color contrast ratioLight theme:
+    color.border.input: #091E4224 → #8590A2Dark mode: color.border.input: #A6C5E229 → #738496
+
+### Patch Changes
+
+-   Updated dependencies
+
 ## 6.2.0
 
 ### Minor Changes

package/dist/cjs/styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.inputStyles = exports.containerStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 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; }
@@ -29,7 +28,7 @@ var backgroundColorHover = {
   none: 'transparent'
 };
 var borderColor = {
-  standard: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
+  standard: "var(--ds-border-input, ".concat(_colors.N100, ")"),
   subtle: 'transparent',
   none: 'transparent'
 };
@@ -39,7 +38,7 @@ var borderColorFocus = {
   none: 'transparent'
 };
 var borderColorHover = {
-  standard: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
+  standard: "var(--ds-border-input, ".concat(_colors.N100, ")"),
   subtle: "var(--ds-border-input, transparent)",
   none: 'transparent'
 };
@@ -56,7 +55,7 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     '&:focus-within:not([data-disabled])': {
       backgroundColor: backgroundColorFocus[appearance],
       borderColor: borderColorFocus[appearance],
-      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "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 +66,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.update-input-border-wdith_5abwv') ? "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.update-input-border-wdith_5abwv') ? "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 +101,8 @@ var containerStyles = exports.containerStyles = function containerStyles(appeara
     alignItems: 'center'
   }, getContainerTextBgAndBorderColor(appearance)), {}, {
     borderRadius: 3,
-    borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : 2
-  }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-input-border-wdith_5abwv') && 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

@@ -23,7 +23,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var analyticsParams = {
   componentName: 'textField',
   packageName: "@atlaskit/textfield",
-  packageVersion: "6.2.0"
+  packageVersion: "6.3.0"
 };
 var TextfieldComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$appearance = props.appearance,

package/dist/es2019/styles.js

@@ -1,5 +1,4 @@
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B200, N0, N10, N100, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
+import { B200, N0, N10, N100, N200, N30, 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';
@@ -21,7 +20,7 @@ const backgroundColorHover = {
   none: 'transparent'
 };
 const borderColor = {
-  standard: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
+  standard: `var(--ds-border-input, ${N100})`,
   subtle: 'transparent',
   none: 'transparent'
 };
@@ -31,7 +30,7 @@ const borderColorFocus = {
   none: 'transparent'
 };
 const borderColorHover = {
-  standard: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
+  standard: `var(--ds-border-input, ${N100})`,
   subtle: "var(--ds-border-input, transparent)",
   none: 'transparent'
 };
@@ -47,7 +46,7 @@ const getContainerTextBgAndBorderColor = appearance => ({
   '&:focus-within:not([data-disabled])': {
     backgroundColor: backgroundColorFocus[appearance],
     borderColor: borderColorFocus[appearance],
-    boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? `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 +60,12 @@ const getContainerTextBgAndBorderColor = appearance => ({
   },
   '&[data-invalid], &[data-invalid]:hover': {
     borderColor: `var(--ds-border-danger, ${R400})`,
-    boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? `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.update-input-border-wdith_5abwv') ? `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 +91,9 @@ export const containerStyles = (appearance, width) => ({
   alignItems: 'center',
   ...getContainerTextBgAndBorderColor(appearance),
   borderRadius: 3,
-  borderWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "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.update-input-border-wdith_5abwv') && 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.2.0"
+  packageVersion: "6.3.0"
 };
 const TextfieldComponent = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/dist/esm/styles.js

@@ -1,8 +1,7 @@
 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 { B200, N0, N10, N100, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
+import { B200, N0, N10, N100, N200, N30, 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';
@@ -24,7 +23,7 @@ var backgroundColorHover = {
   none: 'transparent'
 };
 var borderColor = {
-  standard: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
+  standard: "var(--ds-border-input, ".concat(N100, ")"),
   subtle: 'transparent',
   none: 'transparent'
 };
@@ -34,7 +33,7 @@ var borderColorFocus = {
   none: 'transparent'
 };
 var borderColorHover = {
-  standard: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
+  standard: "var(--ds-border-input, ".concat(N100, ")"),
   subtle: "var(--ds-border-input, transparent)",
   none: 'transparent'
 };
@@ -51,7 +50,7 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     '&:focus-within:not([data-disabled])': {
       backgroundColor: backgroundColorFocus[appearance],
       borderColor: borderColorFocus[appearance],
-      boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "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 +61,12 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     }),
     '&[data-invalid], &[data-invalid]:hover': {
       borderColor: "var(--ds-border-danger, ".concat(R400, ")"),
-      boxShadow: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "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.update-input-border-wdith_5abwv') ? "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 +96,8 @@ export var containerStyles = function containerStyles(appearance, width) {
     alignItems: 'center'
   }, getContainerTextBgAndBorderColor(appearance)), {}, {
     borderRadius: 3,
-    borderWidth: getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') ? "var(--ds-border-width, 1px)" : 2
-  }, getBooleanFF('platform.design-system-team.update-input-border-wdith_5abwv') && 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.2.0"
+  packageVersion: "6.3.0"
 };
 var TextfieldComponent = /*#__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-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,9 +28,8 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.3.0",
-    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.44.0",
+    "@atlaskit/tokens": "^1.45.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -91,14 +90,6 @@
   "af:exports": {
     ".": "./src/index.tsx"
   },
-  "platform-feature-flags": {
-    "platform.design-system-team.border-checkbox_nyoiu": {
-      "type": "boolean"
-    },
-    "platform.design-system-team.update-input-border-wdith_5abwv": {
-      "type": "boolean"
-    }
-  },
   "homepage": "https://atlassian.design/components/textfield/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }