@atlaskit/textarea 4.3.10 → 4.3.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/textarea
 
+## 4.3.11
+
+### Patch Changes
+
+- [`bedbdec0e82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bedbdec0e82) - Update hover state appearance of subtle Textarea, Textfield and Select components to match the hover states of their default counterparts.
+
 ## 4.3.10
 
 ### Patch Changes

package/dist/cjs/component-tokens.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transparent = exports.textColor = exports.subtleHoverBackgroundColor = exports.placeholderTextColor = exports.invalidBorderColor = exports.disabledTextColor = exports.disabledBorder = exports.disabledBackground = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
+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 _colors = require("@atlaskit/theme/colors");
 
@@ -47,11 +47,11 @@ var defaultBackgroundColorFocus = {
   dark: "var(--ds-background-input-pressed, ".concat(_colors.DN10, ")")
 };
 exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
-var subtleHoverBackgroundColor = {
-  light: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
-  dark: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")")
+var subtleBorderColorHover = {
+  light: "var(--ds-border-input, transparent)",
+  dark: "var(--ds-border-input, transparent)"
 };
-exports.subtleHoverBackgroundColor = subtleHoverBackgroundColor;
+exports.subtleBorderColorHover = subtleBorderColorHover;
 var placeholderTextColor = {
   light: "var(--ds-text-subtlest, ".concat(_colors.N100, ")"),
   dark: "var(--ds-text-subtlest, ".concat(_colors.DN200, ")")

package/dist/cjs/styles.js

@@ -82,10 +82,11 @@ var placeholderStyle = function placeholderStyle(placeholderTextColor) {
   };
 };
 
-var hoverBackgroundStyle = function hoverBackgroundStyle(props) {
+var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(props) {
   return {
     '&:hover:not(:read-only):not(:focus)': {
       backgroundColor: props.backgroundColorHover,
+      borderColor: props.borderColorHover,
       '&:disabled': {
         backgroundColor: props.disabledRules.backgroundColorHover
       },
@@ -150,7 +151,7 @@ var staticStyles = {
   borderRadius: borderRadius,
   boxSizing: 'border-box',
   overflow: 'auto',
-  transition: "background-color ".concat(transitionDuration, " ease-in-out"),
+  transition: "background-color ".concat(transitionDuration, " ease-in-out,\n               border-color ").concat(transitionDuration, " ease-in-out"),
   wordWrap: 'break-word',
   fontSize: fontSize,
   borderWidth: borderWidth,
@@ -185,7 +186,7 @@ var getBaseStyles = function getBaseStyles(_ref) {
 exports.getBaseStyles = getBaseStyles;
 
 var themeStyles = function themeStyles(props) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props)), hoverBackgroundStyle(props)), placeholderStyle(props.placeholderTextColor)), {}, {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props)), hoverBackgroundAndBorderStyles(props)), placeholderStyle(props.placeholderTextColor)), {}, {
     color: props.textColor,
     '&:disabled': {
       color: props.disabledRules.textColor

package/dist/cjs/text-area.js

@@ -40,7 +40,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) { (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.3.10";
+var packageVersion = "4.3.11";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/dist/cjs/theme.js

@@ -61,7 +61,7 @@ var backgroundColorFocus = {
 };
 var backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.subtleHoverBackgroundColor,
+  subtle: componentTokens.defaultBackgroundColorHover,
   none: componentTokens.transparent
 };
 var borderColor = {
@@ -74,6 +74,11 @@ var borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+var borderColorHover = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.subtleBorderColorHover,
+  none: componentTokens.transparent
+};
 
 /**
  * @deprecated
@@ -104,6 +109,7 @@ var Theme = (0, _components.createTheme)(function (_ref) {
   return {
     borderColor: borderColor[appearance][mode],
     borderColorFocus: borderColorFocus[appearance][mode],
+    borderColorHover: borderColorHover[appearance][mode],
     backgroundColorHover: backgroundColorHover[appearance][mode],
     backgroundColorFocus: backgroundColorFocus[appearance][mode],
     backgroundColor: backgroundColor[appearance][mode],

package/dist/cjs/version.json

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

package/dist/es2019/component-tokens.js

@@ -31,9 +31,9 @@ export const defaultBackgroundColorFocus = {
   light: `var(--ds-background-input-pressed, ${N0})`,
   dark: `var(--ds-background-input-pressed, ${DN10})`
 };
-export const subtleHoverBackgroundColor = {
-  light: `var(--ds-background-input-hovered, ${N30})`,
-  dark: `var(--ds-background-input-hovered, ${DN30})`
+export const subtleBorderColorHover = {
+  light: "var(--ds-border-input, transparent)",
+  dark: "var(--ds-border-input, transparent)"
 };
 export const placeholderTextColor = {
   light: `var(--ds-text-subtlest, ${N100})`,

package/dist/es2019/styles.js

@@ -62,10 +62,11 @@ const placeholderStyle = placeholderTextColor => ({
   }
 });
 
-const hoverBackgroundStyle = props => {
+const hoverBackgroundAndBorderStyles = props => {
   return {
     '&:hover:not(:read-only):not(:focus)': {
       backgroundColor: props.backgroundColorHover,
+      borderColor: props.borderColorHover,
       '&:disabled': {
         backgroundColor: props.disabledRules.backgroundColorHover
       },
@@ -125,7 +126,8 @@ const staticStyles = {
   borderRadius: borderRadius,
   boxSizing: 'border-box',
   overflow: 'auto',
-  transition: `background-color ${transitionDuration} ease-in-out`,
+  transition: `background-color ${transitionDuration} ease-in-out,
+               border-color ${transitionDuration} ease-in-out`,
   wordWrap: 'break-word',
   fontSize,
   borderWidth: borderWidth,
@@ -161,7 +163,7 @@ export const getBaseStyles = ({
 });
 export const themeStyles = props => {
   return { ...bgAndBorderColorStyles(props),
-    ...hoverBackgroundStyle(props),
+    ...hoverBackgroundAndBorderStyles(props),
     ...placeholderStyle(props.placeholderTextColor),
     color: props.textColor,
     '&:disabled': {

package/dist/es2019/text-area.js

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

package/dist/es2019/theme.js

@@ -46,7 +46,7 @@ const backgroundColorFocus = {
 };
 const backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.subtleHoverBackgroundColor,
+  subtle: componentTokens.defaultBackgroundColorHover,
   none: componentTokens.transparent
 };
 const borderColor = {
@@ -59,6 +59,11 @@ const borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+const borderColorHover = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.subtleBorderColorHover,
+  none: componentTokens.transparent
+};
 
 /**
  * @deprecated
@@ -88,6 +93,7 @@ export const Theme = createTheme(({
 }) => ({
   borderColor: borderColor[appearance][mode],
   borderColorFocus: borderColorFocus[appearance][mode],
+  borderColorHover: borderColorHover[appearance][mode],
   backgroundColorHover: backgroundColorHover[appearance][mode],
   backgroundColorFocus: backgroundColorFocus[appearance][mode],
   backgroundColor: backgroundColor[appearance][mode],

package/dist/es2019/version.json

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

package/dist/esm/component-tokens.js

@@ -31,9 +31,9 @@ export var defaultBackgroundColorFocus = {
   light: "var(--ds-background-input-pressed, ".concat(N0, ")"),
   dark: "var(--ds-background-input-pressed, ".concat(DN10, ")")
 };
-export var subtleHoverBackgroundColor = {
-  light: "var(--ds-background-input-hovered, ".concat(N30, ")"),
-  dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
+export var subtleBorderColorHover = {
+  light: "var(--ds-border-input, transparent)",
+  dark: "var(--ds-border-input, transparent)"
 };
 export var placeholderTextColor = {
   light: "var(--ds-text-subtlest, ".concat(N100, ")"),

package/dist/esm/styles.js

@@ -72,10 +72,11 @@ var placeholderStyle = function placeholderStyle(placeholderTextColor) {
   };
 };
 
-var hoverBackgroundStyle = function hoverBackgroundStyle(props) {
+var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(props) {
   return {
     '&:hover:not(:read-only):not(:focus)': {
       backgroundColor: props.backgroundColorHover,
+      borderColor: props.borderColorHover,
       '&:disabled': {
         backgroundColor: props.disabledRules.backgroundColorHover
       },
@@ -140,7 +141,7 @@ var staticStyles = {
   borderRadius: borderRadius,
   boxSizing: 'border-box',
   overflow: 'auto',
-  transition: "background-color ".concat(transitionDuration, " ease-in-out"),
+  transition: "background-color ".concat(transitionDuration, " ease-in-out,\n               border-color ").concat(transitionDuration, " ease-in-out"),
   wordWrap: 'break-word',
   fontSize: fontSize,
   borderWidth: borderWidth,
@@ -171,7 +172,7 @@ export var getBaseStyles = function getBaseStyles(_ref) {
   });
 };
 export var themeStyles = function themeStyles(props) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props)), hoverBackgroundStyle(props)), placeholderStyle(props.placeholderTextColor)), {}, {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, bgAndBorderColorStyles(props)), hoverBackgroundAndBorderStyles(props)), placeholderStyle(props.placeholderTextColor)), {}, {
     color: props.textColor,
     '&:disabled': {
       color: props.disabledRules.textColor

package/dist/esm/text-area.js

@@ -16,7 +16,7 @@ import GlobalTheme from '@atlaskit/theme/components';
 import { borderWidth, getBaseStyles, themeStyles } from './styles';
 import { Theme } from './theme';
 var packageName = "@atlaskit/textarea";
-var packageVersion = "4.3.10";
+var packageVersion = "4.3.11";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/dist/esm/theme.js

@@ -46,7 +46,7 @@ var backgroundColorFocus = {
 };
 var backgroundColorHover = {
   standard: componentTokens.defaultBackgroundColorHover,
-  subtle: componentTokens.subtleHoverBackgroundColor,
+  subtle: componentTokens.defaultBackgroundColorHover,
   none: componentTokens.transparent
 };
 var borderColor = {
@@ -59,6 +59,11 @@ var borderColorFocus = {
   subtle: componentTokens.defaultBorderColorFocus,
   none: componentTokens.transparent
 };
+var borderColorHover = {
+  standard: componentTokens.defaultBorderColor,
+  subtle: componentTokens.subtleBorderColorHover,
+  none: componentTokens.transparent
+};
 
 /**
  * @deprecated
@@ -88,6 +93,7 @@ export var Theme = createTheme(function (_ref) {
   return {
     borderColor: borderColor[appearance][mode],
     borderColorFocus: borderColorFocus[appearance][mode],
+    borderColorHover: borderColorHover[appearance][mode],
     backgroundColorHover: backgroundColorHover[appearance][mode],
     backgroundColorFocus: backgroundColorFocus[appearance][mode],
     backgroundColor: backgroundColor[appearance][mode],

package/dist/esm/version.json

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

package/dist/types/component-tokens.d.ts

@@ -30,9 +30,9 @@ export declare const defaultBackgroundColorFocus: {
     light: "var(--ds-background-input-pressed)";
     dark: "var(--ds-background-input-pressed)";
 };
-export declare const subtleHoverBackgroundColor: {
-    light: "var(--ds-background-input-hovered)";
-    dark: "var(--ds-background-input-hovered)";
+export declare const subtleBorderColorHover: {
+    light: "var(--ds-border-input)";
+    dark: "var(--ds-border-input)";
 };
 export declare const placeholderTextColor: {
     light: "var(--ds-text-subtlest)";

package/dist/types/theme.d.ts

@@ -16,6 +16,7 @@ export declare type ThemeProps = {
 export declare type ThemeTokens = {
     borderColor: string;
     borderColorFocus: string;
+    borderColorHover: string;
     backgroundColor: string;
     backgroundColorFocus: string;
     backgroundColorHover: string;

package/dist/types-ts4.0/component-tokens.d.ts

@@ -30,9 +30,9 @@ export declare const defaultBackgroundColorFocus: {
     light: "var(--ds-background-input-pressed)";
     dark: "var(--ds-background-input-pressed)";
 };
-export declare const subtleHoverBackgroundColor: {
-    light: "var(--ds-background-input-hovered)";
-    dark: "var(--ds-background-input-hovered)";
+export declare const subtleBorderColorHover: {
+    light: "var(--ds-border-input)";
+    dark: "var(--ds-border-input)";
 };
 export declare const placeholderTextColor: {
     light: "var(--ds-text-subtlest)";

package/dist/types-ts4.0/theme.d.ts

@@ -16,6 +16,7 @@ export declare type ThemeProps = {
 export declare type ThemeTokens = {
     borderColor: string;
     borderColorFocus: string;
+    borderColorHover: string;
     backgroundColor: string;
     backgroundColorFocus: string;
     backgroundColorHover: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/textarea",
-  "version": "4.3.10",
+  "version": "4.3.11",
   "description": "A text area lets users enter long form text which spans over multiple lines.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"