@atlaskit/textarea 4.6.3 → 4.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/textarea
 
+## 4.7.0
+
+### Minor Changes
+
+- [`5f37caad726`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f37caad726) - [ux] reduce border width to 1px and update fallback color of border
+
 ## 4.6.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.invalidBorderColor = exports.disabledTextColor = exports.disabledBorder = exports.disabledBackground = 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 disabledBackground = {
   light: "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
@@ -21,8 +22,8 @@ var invalidBorderColor = {
 };
 exports.invalidBorderColor = invalidBorderColor;
 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.themeStyles = exports.getBaseStyles = exports.borderWidth = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("@atlaskit/theme/constants");
 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) { (0, _defineProperty2.default)(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; } /** @jsx jsx */
@@ -42,7 +43,8 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
   return (0, _react.css)(_objectSpread({
     '&:focus': {
       backgroundColor: props.backgroundColorFocus,
-      borderColor: props.borderColorFocus
+      borderColor: props.borderColorFocus,
+      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(props.borderColorFocus) : undefined
     },
     '&:not(:focus)': {
       backgroundColor: props.backgroundColor,
@@ -51,12 +53,14 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '&[data-invalid]:focus': {
       backgroundColor: props.invalidRules.backgroundColorFocus,
-      borderColor: props.invalidRules.borderColorFocus
+      borderColor: props.invalidRules.borderColorFocus,
+      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColorFocus) : undefined
     },
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '&[data-invalid]:not(:focus)': {
       backgroundColor: props.invalidRules.backgroundColor,
-      borderColor: props.invalidRules.borderColor
+      borderColor: props.invalidRules.borderColor,
+      boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColor) : undefined
     }
   }, appearance === 'standard' ? {
     '&:disabled:focus': {
@@ -86,7 +90,9 @@ var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(pro
       },
       // eslint-disable-next-line @repo/internal/styles/no-nested-styles
       '&[data-invalid]': {
-        backgroundColor: props.invalidRules.backgroundColorHover
+        backgroundColor: props.invalidRules.backgroundColorHover,
+        borderColor: props.invalidRules.borderColor,
+        boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColor) : undefined
       }
     }
   });
@@ -118,6 +124,8 @@ var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
 };
 var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
   var minimumRows = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  var appearance = arguments.length > 1 ? arguments[1] : undefined;
+  var borderWidth = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') && appearance !== 'none' ? 1 : 2;
   var horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
   var borderHeight = borderWidth;
   return (0, _react.css)({
@@ -144,7 +152,7 @@ var staticStyles = (0, _react.css)({
   position: 'relative',
   flex: '1 1 100%',
   borderRadius: borderRadius,
-  borderWidth: borderWidth,
+  borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? 1 : borderWidth,
   fontSize: fontSize,
   outline: 'none',
   overflow: 'auto',
@@ -168,7 +176,7 @@ var getBaseStyles = function getBaseStyles(_ref) {
     maxHeight = _ref.maxHeight;
   return (
     // eslint-disable-next-line @repo/internal/styles/no-exported-styles
-    (0, _react.css)([staticStyles, borderPaddingAndHeightStyles(minimumRows), resizeStyle(resize), borderStyle(appearance), fontFamilyStyle(isMonospaced), {
+    (0, _react.css)([staticStyles, borderPaddingAndHeightStyles(minimumRows, appearance), resizeStyle(resize), borderStyle(appearance), fontFamilyStyle(isMonospaced), {
       maxHeight: maxHeight
     }])
   );

package/dist/cjs/text-area.js

@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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) { (0, _defineProperty2.default)(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; }
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.6.3";
+var packageVersion = "4.7.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.6.3",
+	"version": "4.7.0",
 	"sideEffects": false
 }

package/dist/es2019/component-tokens.js

@@ -1,4 +1,5 @@
-import { B100, B75, DN10, DN20, DN200, DN30, DN40, DN600, DN90, N0, N10, N20, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B100, B75, DN10, DN20, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N20, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
 export const disabledBackground = {
   light: `var(--ds-background-disabled, ${N20})`,
   dark: `var(--ds-background-disabled, ${DN20})`
@@ -12,8 +13,8 @@ export const invalidBorderColor = {
   dark: `var(--ds-border-danger, ${R400})`
 };
 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,5 +1,6 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { codeFontFamily as getCodeFontFamily, fontFamily as getFontFamily, fontSize as getFontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize } from '@atlaskit/theme/constants';
@@ -33,7 +34,8 @@ const borderBoxMinHeightCompact = (minimumRows, borderHeight) => {
 const bgAndBorderColorStyles = (props, appearance) => css({
   '&:focus': {
     backgroundColor: props.backgroundColorFocus,
-    borderColor: props.borderColorFocus
+    borderColor: props.borderColorFocus,
+    boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? `inset 0 0 0 1px ${props.borderColorFocus}` : undefined
   },
   '&:not(:focus)': {
     backgroundColor: props.backgroundColor,
@@ -42,12 +44,14 @@ const bgAndBorderColorStyles = (props, appearance) => css({
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&[data-invalid]:focus': {
     backgroundColor: props.invalidRules.backgroundColorFocus,
-    borderColor: props.invalidRules.borderColorFocus
+    borderColor: props.invalidRules.borderColorFocus,
+    boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? `inset 0 0 0 1px ${props.invalidRules.borderColorFocus}` : undefined
   },
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&[data-invalid]:not(:focus)': {
     backgroundColor: props.invalidRules.backgroundColor,
-    borderColor: props.invalidRules.borderColor
+    borderColor: props.invalidRules.borderColor,
+    boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? `inset 0 0 0 1px ${props.invalidRules.borderColor}` : undefined
   },
   // Disabled background and border styles should not be applied to components that
   // have either no background or transparent background to begin with
@@ -76,7 +80,9 @@ const hoverBackgroundAndBorderStyles = props => css({
     },
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '&[data-invalid]': {
-      backgroundColor: props.invalidRules.backgroundColorHover
+      backgroundColor: props.invalidRules.backgroundColorHover,
+      borderColor: props.invalidRules.borderColor,
+      boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? `inset 0 0 0 1px ${props.invalidRules.borderColor}` : undefined
     }
   }
 });
@@ -101,7 +107,8 @@ const borderStyle = appearance => css({
 const fontFamilyStyle = isMonospaced => css({
   fontFamily: isMonospaced ? codeFontFamily : fontFamily
 });
-const borderPaddingAndHeightStyles = (minimumRows = 1) => {
+const borderPaddingAndHeightStyles = (minimumRows = 1, appearance) => {
+  const borderWidth = getBooleanFF('platform.design-system-team.update-border-input_ff9l1') && appearance !== 'none' ? 1 : 2;
   const horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
   const borderHeight = borderWidth;
   return css({
@@ -128,7 +135,7 @@ const staticStyles = css({
   position: 'relative',
   flex: '1 1 100%',
   borderRadius: borderRadius,
-  borderWidth: borderWidth,
+  borderWidth: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? 1 : borderWidth,
   fontSize: fontSize,
   outline: 'none',
   overflow: 'auto',
@@ -154,7 +161,7 @@ export const getBaseStyles = ({
   maxHeight
 }) =>
 // eslint-disable-next-line @repo/internal/styles/no-exported-styles
-css([staticStyles, borderPaddingAndHeightStyles(minimumRows), resizeStyle(resize), borderStyle(appearance), fontFamilyStyle(isMonospaced), {
+css([staticStyles, borderPaddingAndHeightStyles(minimumRows, appearance), resizeStyle(resize), borderStyle(appearance), fontFamilyStyle(isMonospaced), {
   maxHeight
 }]);
 export const themeStyles = (props, appearance) =>

package/dist/es2019/text-area.js

@@ -7,7 +7,7 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 const packageName = "@atlaskit/textarea";
-const packageVersion = "4.6.3";
+const packageVersion = "4.7.0";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.6.3",
+	"version": "4.7.0",
 	"sideEffects": false
 }

package/dist/esm/component-tokens.js

@@ -1,4 +1,5 @@
-import { B100, B75, DN10, DN20, DN200, DN30, DN40, DN600, DN90, N0, N10, N20, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B100, B75, DN10, DN20, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N20, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
 export var disabledBackground = {
   light: "var(--ds-background-disabled, ".concat(N20, ")"),
   dark: "var(--ds-background-disabled, ".concat(DN20, ")")
@@ -12,8 +13,8 @@ export var invalidBorderColor = {
   dark: "var(--ds-border-danger, ".concat(R400, ")")
 };
 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

@@ -3,6 +3,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 /** @jsx jsx */
 import { css } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { codeFontFamily as getCodeFontFamily, fontFamily as getFontFamily, fontSize as getFontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 gridSize } from '@atlaskit/theme/constants';
@@ -37,7 +38,8 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
   return css(_objectSpread({
     '&:focus': {
       backgroundColor: props.backgroundColorFocus,
-      borderColor: props.borderColorFocus
+      borderColor: props.borderColorFocus,
+      boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(props.borderColorFocus) : undefined
     },
     '&:not(:focus)': {
       backgroundColor: props.backgroundColor,
@@ -46,12 +48,14 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(props, appearance)
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '&[data-invalid]:focus': {
       backgroundColor: props.invalidRules.backgroundColorFocus,
-      borderColor: props.invalidRules.borderColorFocus
+      borderColor: props.invalidRules.borderColorFocus,
+      boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColorFocus) : undefined
     },
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '&[data-invalid]:not(:focus)': {
       backgroundColor: props.invalidRules.backgroundColor,
-      borderColor: props.invalidRules.borderColor
+      borderColor: props.invalidRules.borderColor,
+      boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColor) : undefined
     }
   }, appearance === 'standard' ? {
     '&:disabled:focus': {
@@ -81,7 +85,9 @@ var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(pro
       },
       // eslint-disable-next-line @repo/internal/styles/no-nested-styles
       '&[data-invalid]': {
-        backgroundColor: props.invalidRules.backgroundColorHover
+        backgroundColor: props.invalidRules.backgroundColorHover,
+        borderColor: props.invalidRules.borderColor,
+        boxShadow: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "inset 0 0 0 1px ".concat(props.invalidRules.borderColor) : undefined
       }
     }
   });
@@ -113,6 +119,8 @@ var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
 };
 var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
   var minimumRows = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  var appearance = arguments.length > 1 ? arguments[1] : undefined;
+  var borderWidth = getBooleanFF('platform.design-system-team.update-border-input_ff9l1') && appearance !== 'none' ? 1 : 2;
   var horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
   var borderHeight = borderWidth;
   return css({
@@ -139,7 +147,7 @@ var staticStyles = css({
   position: 'relative',
   flex: '1 1 100%',
   borderRadius: borderRadius,
-  borderWidth: borderWidth,
+  borderWidth: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? 1 : borderWidth,
   fontSize: fontSize,
   outline: 'none',
   overflow: 'auto',
@@ -163,7 +171,7 @@ export var getBaseStyles = function getBaseStyles(_ref) {
     maxHeight = _ref.maxHeight;
   return (
     // eslint-disable-next-line @repo/internal/styles/no-exported-styles
-    css([staticStyles, borderPaddingAndHeightStyles(minimumRows), resizeStyle(resize), borderStyle(appearance), fontFamilyStyle(isMonospaced), {
+    css([staticStyles, borderPaddingAndHeightStyles(minimumRows, appearance), resizeStyle(resize), borderStyle(appearance), fontFamilyStyle(isMonospaced), {
       maxHeight: maxHeight
     }])
   );

package/dist/esm/text-area.js

@@ -13,7 +13,7 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.6.3";
+var packageVersion = "4.7.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/textarea",
-	"version": "4.6.3",
+	"version": "4.7.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textarea",
-  "version": "4.6.3",
+  "version": "4.7.0",
   "description": "A text area lets users enter long form text which spans over multiple lines.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,6 +40,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",
@@ -58,6 +59,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",
@@ -90,5 +92,10 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "platform-feature-flags": {
+    "platform.design-system-team.update-border-input_ff9l1": {
+      "type": "boolean"
+    }
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }