@atlaskit/textfield 5.4.3 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/textfield
 
+## 5.5.0
+
+### Minor Changes
+
+- [`c9c3a3f43af`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c9c3a3f43af) - [ux] reduce border width to 1px and update fallback color of border
+
 ## 5.4.3
 
 ### Patch Changes

package/dist/cjs/component-tokens.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.transparent = exports.textColor = exports.subtleBorderColorHover = exports.placeholderTextColor = exports.disabledTextColor = exports.disabledBackgroundColor = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var disabledBackgroundColor = {
   light: "var(--ds-background-disabled, ".concat(_colors.N10, ")"),
@@ -26,8 +27,8 @@ var defaultBackgroundColorHover = {
 };
 exports.defaultBackgroundColorHover = defaultBackgroundColorHover;
 var defaultBorderColor = {
-  light: "var(--ds-border-input, ".concat(_colors.N40, ")"),
-  dark: "var(--ds-border-input, ".concat(_colors.DN40, ")")
+  light: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N40, ")"),
+  dark: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.DN200 : _colors.DN40, ")")
 };
 exports.defaultBorderColor = defaultBorderColor;
 var defaultBorderColorFocus = {

package/dist/cjs/styles.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.textFieldColors = 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");
 var componentTokens = _interopRequireWildcard(require("./component-tokens"));
@@ -92,7 +93,8 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     },
     '&:focus-within:not([data-disabled])': {
       backgroundColor: backgroundColorFocus[appearance][mode],
-      borderColor: borderColorFocus[appearance][mode]
+      borderColor: borderColorFocus[appearance][mode],
+      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(borderColorFocus[appearance][mode]) : undefined
     },
     '&[data-disabled]': _objectSpread({
       color: disabledRules[mode].textColor,
@@ -102,11 +104,13 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
       borderColor: disabledRules[mode].borderColor
     }),
     '&[data-invalid], &[data-invalid]:hover': {
-      borderColor: invalidRules[mode].borderColor
+      borderColor: invalidRules[mode].borderColor,
+      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColor) : undefined
     },
     '&[data-invalid]:focus-within': {
       backgroundColor: invalidRules[mode].backgroundColorFocus,
-      borderColor: invalidRules[mode].borderColorFocus
+      borderColor: invalidRules[mode].borderColorFocus,
+      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColorFocus) : undefined
     },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
@@ -132,11 +136,14 @@ var getMaxWidth = function getMaxWidth(width) {
   return !width ? "100%" : width in widthMap ? widthMap[width] : +width;
 };
 var containerStyles = function containerStyles(appearance, mode, width) {
-  return _objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread({
     alignItems: 'center'
   }, getContainerTextBgAndBorderColor(appearance, mode)), {}, {
     borderRadius: 3,
-    borderWidth: 2,
+    borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? 1 : 2
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') && appearance !== 'none' ? {
+    padding: '1px 0'
+  } : {}), {}, {
     borderStyle: appearance === 'none' ? 'none' : 'solid',
     boxSizing: 'border-box',
     display: 'flex',

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.4.3"
+  packageVersion: "5.5.0"
 };
 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.4.3",
+	"version": "5.5.0",
 	"sideEffects": false
 }

package/dist/es2019/component-tokens.js

@@ -1,4 +1,5 @@
-import { B100, B75, DN10, DN200, DN30, DN40, DN600, DN90, N0, N10, N200, N30, N40, N70, N900 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B100, B75, DN10, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N200, N30, N40, N70, N900 } from '@atlaskit/theme/colors';
 export const disabledBackgroundColor = {
   light: `var(--ds-background-disabled, ${N10})`,
   dark: `var(--ds-background-disabled, ${DN10})`
@@ -16,8 +17,8 @@ export const defaultBackgroundColorHover = {
   dark: `var(--ds-background-input-hovered, ${DN30})`
 };
 export const defaultBorderColor = {
-  light: `var(--ds-border-input, ${N40})`,
-  dark: `var(--ds-border-input, ${DN40})`
+  light: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40})`,
+  dark: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? DN200 : DN40})`
 };
 export const defaultBorderColorFocus = {
   light: `var(--ds-border-focused, ${B100})`,

package/dist/es2019/styles.js

@@ -1,3 +1,4 @@
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { R400 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontFamily, fontSize as getFontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -80,7 +81,8 @@ const getContainerTextBgAndBorderColor = (appearance, mode) => ({
   },
   '&:focus-within:not([data-disabled])': {
     backgroundColor: backgroundColorFocus[appearance][mode],
-    borderColor: borderColorFocus[appearance][mode]
+    borderColor: borderColorFocus[appearance][mode],
+    boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? `inset 0 0 0 1px ${borderColorFocus[appearance][mode]}` : undefined
   },
   '&[data-disabled]': {
     color: disabledRules[mode].textColor,
@@ -93,11 +95,13 @@ const getContainerTextBgAndBorderColor = (appearance, mode) => ({
     })
   },
   '&[data-invalid], &[data-invalid]:hover': {
-    borderColor: invalidRules[mode].borderColor
+    borderColor: invalidRules[mode].borderColor,
+    boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? `inset 0 0 0 1px ${invalidRules[mode].borderColor}` : undefined
   },
   '&[data-invalid]:focus-within': {
     backgroundColor: invalidRules[mode].backgroundColorFocus,
-    borderColor: invalidRules[mode].borderColorFocus
+    borderColor: invalidRules[mode].borderColorFocus,
+    boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? `inset 0 0 0 1px ${invalidRules[mode].borderColorFocus}` : undefined
   },
   '@media screen and (-ms-high-contrast: active)': {
     '&[data-invalid]:focus-within': {
@@ -123,7 +127,11 @@ export const containerStyles = (appearance, mode, width) => ({
   alignItems: 'center',
   ...getContainerTextBgAndBorderColor(appearance, mode),
   borderRadius: 3,
-  borderWidth: 2,
+  borderWidth: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? 1 : 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.update-border-input_ff9l1') && appearance !== 'none' ? {
+    padding: '1px 0'
+  } : {}),
   borderStyle: appearance === 'none' ? 'none' : 'solid',
   boxSizing: 'border-box',
   display: 'flex',

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.4.3"
+  packageVersion: "5.5.0"
 };
 const Textfield = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/dist/es2019/version.json

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

package/dist/esm/component-tokens.js

@@ -1,4 +1,5 @@
-import { B100, B75, DN10, DN200, DN30, DN40, DN600, DN90, N0, N10, N200, N30, N40, N70, N900 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B100, B75, DN10, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N200, N30, N40, N70, N900 } from '@atlaskit/theme/colors';
 export var disabledBackgroundColor = {
   light: "var(--ds-background-disabled, ".concat(N10, ")"),
   dark: "var(--ds-background-disabled, ".concat(DN10, ")")
@@ -16,8 +17,8 @@ export var defaultBackgroundColorHover = {
   dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
 };
 export var defaultBorderColor = {
-  light: "var(--ds-border-input, ".concat(N40, ")"),
-  dark: "var(--ds-border-input, ".concat(DN40, ")")
+  light: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40, ")"),
+  dark: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? DN200 : DN40, ")")
 };
 export var defaultBorderColorFocus = {
   light: "var(--ds-border-focused, ".concat(B100, ")"),

package/dist/esm/styles.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { R400 } from '@atlaskit/theme/colors';
 import { codeFontFamily, fontFamily, fontSize as getFontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -84,7 +85,8 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
     },
     '&:focus-within:not([data-disabled])': {
       backgroundColor: backgroundColorFocus[appearance][mode],
-      borderColor: borderColorFocus[appearance][mode]
+      borderColor: borderColorFocus[appearance][mode],
+      boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(borderColorFocus[appearance][mode]) : undefined
     },
     '&[data-disabled]': _objectSpread({
       color: disabledRules[mode].textColor,
@@ -94,11 +96,13 @@ var getContainerTextBgAndBorderColor = function getContainerTextBgAndBorderColor
       borderColor: disabledRules[mode].borderColor
     }),
     '&[data-invalid], &[data-invalid]:hover': {
-      borderColor: invalidRules[mode].borderColor
+      borderColor: invalidRules[mode].borderColor,
+      boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColor) : undefined
     },
     '&[data-invalid]:focus-within': {
       backgroundColor: invalidRules[mode].backgroundColorFocus,
-      borderColor: invalidRules[mode].borderColorFocus
+      borderColor: invalidRules[mode].borderColorFocus,
+      boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(invalidRules[mode].borderColorFocus) : undefined
     },
     '@media screen and (-ms-high-contrast: active)': {
       '&[data-invalid]:focus-within': {
@@ -124,11 +128,14 @@ var getMaxWidth = function getMaxWidth(width) {
   return !width ? "100%" : width in widthMap ? widthMap[width] : +width;
 };
 export var containerStyles = function containerStyles(appearance, mode, width) {
-  return _objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread({
     alignItems: 'center'
   }, getContainerTextBgAndBorderColor(appearance, mode)), {}, {
     borderRadius: 3,
-    borderWidth: 2,
+    borderWidth: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? 1 : 2
+  }, getBooleanFF('platform.design-system-team.update-border-input_ff9l1') && appearance !== 'none' ? {
+    padding: '1px 0'
+  } : {}), {}, {
     borderStyle: appearance === 'none' ? 'none' : 'solid',
     boxSizing: 'border-box',
     display: 'flex',

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.4.3"
+  packageVersion: "5.5.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.4.3",
+	"version": "5.5.0",
 	"sideEffects": false
 }

package/dist/types/styles.d.ts

@@ -1,8 +1,6 @@
 import { ThemeModes } from '@atlaskit/theme/types';
 import { Appearance } from './types';
 export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number) => {
-    readonly borderRadius: 3;
-    readonly borderWidth: 2;
     readonly borderStyle: "none" | "solid";
     readonly boxSizing: "border-box";
     readonly display: "flex";
@@ -15,6 +13,9 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     readonly wordWrap: "break-word";
     readonly verticalAlign: "top";
     readonly pointerEvents: "auto";
+    readonly padding?: string | undefined;
+    readonly borderRadius: 3;
+    readonly borderWidth: 1 | 2;
     readonly backgroundColor: string;
     readonly borderColor: string;
     readonly color: "var(--ds-text)";
@@ -26,6 +27,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     readonly '&:focus-within:not([data-disabled])': {
         backgroundColor: string;
         borderColor: string;
+        boxShadow: string | undefined;
     };
     readonly '&[data-disabled]': {
         backgroundColor?: "var(--ds-background-disabled)" | undefined;
@@ -35,10 +37,12 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     };
     readonly '&[data-invalid], &[data-invalid]:hover': {
         borderColor: "var(--ds-border-danger)";
+        boxShadow: string | undefined;
     };
     readonly '&[data-invalid]:focus-within': {
         backgroundColor: "var(--ds-background-input-pressed)";
         borderColor: "var(--ds-border-focused)";
+        boxShadow: string | undefined;
     };
     readonly '@media screen and (-ms-high-contrast: active)': {
         '&[data-invalid]:focus-within': {

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

@@ -1,8 +1,6 @@
 import { ThemeModes } from '@atlaskit/theme/types';
 import { Appearance } from './types';
 export declare const containerStyles: (appearance: Appearance, mode: ThemeModes, width?: string | number) => {
-    readonly borderRadius: 3;
-    readonly borderWidth: 2;
     readonly borderStyle: "none" | "solid";
     readonly boxSizing: "border-box";
     readonly display: "flex";
@@ -15,6 +13,9 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     readonly wordWrap: "break-word";
     readonly verticalAlign: "top";
     readonly pointerEvents: "auto";
+    readonly padding?: string | undefined;
+    readonly borderRadius: 3;
+    readonly borderWidth: 1 | 2;
     readonly backgroundColor: string;
     readonly borderColor: string;
     readonly color: "var(--ds-text)";
@@ -26,6 +27,7 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     readonly '&:focus-within:not([data-disabled])': {
         backgroundColor: string;
         borderColor: string;
+        boxShadow: string | undefined;
     };
     readonly '&[data-disabled]': {
         backgroundColor?: "var(--ds-background-disabled)" | undefined;
@@ -35,10 +37,12 @@ export declare const containerStyles: (appearance: Appearance, mode: ThemeModes,
     };
     readonly '&[data-invalid], &[data-invalid]:hover': {
         borderColor: "var(--ds-border-danger)";
+        boxShadow: string | undefined;
     };
     readonly '&[data-invalid]:focus-within': {
         backgroundColor: "var(--ds-background-input-pressed)";
         borderColor: "var(--ds-border-focused)";
+        boxShadow: string | undefined;
     };
     readonly '@media screen and (-ms-high-contrast: active)': {
         '&[data-invalid]:focus-within': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textfield",
-  "version": "5.4.3",
+  "version": "5.5.0",
   "description": "A text field is an input that allows a user to write or edit text.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.4.0",
     "@babel/runtime": "^7.0.0",
@@ -56,6 +57,7 @@
     "@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",
     "@testing-library/react": "^12.1.5",
     "jscodeshift": "^0.13.0",
@@ -89,6 +91,11 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "platform-feature-flags": {
+    "platform.design-system-team.update-border-input_ff9l1": {
+      "type": "boolean"
+    }
+  },
   "homepage": "https://atlassian.design/components/textfield/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }