@atlaskit/textarea 5.1.2 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/textarea
 
+## 5.2.0
+
+### Minor Changes
+
+- [#82028](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82028) [`065756e95a09`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/065756e95a09) - [ux] This change includes a fix for the TextArea's text color when there is a placeholder and isDisabled is true.
+
 ## 5.1.2
 
 ### Patch Changes

package/dist/cjs/styles.js

@@ -120,13 +120,14 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(appearance) {
     }
   } : {}));
 };
-var placeholderStyle = function placeholderStyle(placeholderTextColor) {
-  return (0, _react.css)({
-    '&::placeholder': {
-      color: placeholderTextColor
-    }
-  });
-};
+var placeholderStyles = (0, _react.css)({
+  '&::placeholder': {
+    color: componentTokens.placeholderTextColor
+  },
+  '&:disabled::placeholder': {
+    color: disabledRules.textColor
+  }
+});
 var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(appearance) {
   return appearance && (0, _react.css)({
     '&:hover:not(:read-only):not(:focus)': {
@@ -234,7 +235,7 @@ var getBaseStyles = exports.getBaseStyles = function getBaseStyles(_ref) {
 var dynamicStyles = exports.dynamicStyles = function dynamicStyles(appearance) {
   return (
     // eslint-disable-next-line @repo/internal/styles/no-exported-styles
-    (0, _react.css)([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyle(componentTokens.placeholderTextColor), {
+    (0, _react.css)([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyles, {
       color: componentTokens.textColor,
       '&:disabled': {
         color: disabledRules.textColor

package/dist/cjs/text-area.js

@@ -21,7 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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 packageName = "@atlaskit/textarea";
-var packageVersion = "5.1.2";
+var packageVersion = "5.2.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/dist/es2019/styles.js

@@ -111,9 +111,12 @@ const bgAndBorderColorStyles = appearance => appearance && css({
     }
   } : {})
 });
-const placeholderStyle = placeholderTextColor => css({
+const placeholderStyles = css({
   '&::placeholder': {
-    color: placeholderTextColor
+    color: componentTokens.placeholderTextColor
+  },
+  '&:disabled::placeholder': {
+    color: disabledRules.textColor
   }
 });
 const hoverBackgroundAndBorderStyles = appearance => appearance && css({
@@ -214,7 +217,7 @@ css([staticStyles, borderPaddingAndHeightStyles(minimumRows, appearance), resize
 }]);
 export const dynamicStyles = appearance =>
 // eslint-disable-next-line @repo/internal/styles/no-exported-styles
-css([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyle(componentTokens.placeholderTextColor), {
+css([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyles, {
   color: componentTokens.textColor,
   '&:disabled': {
     color: disabledRules.textColor

package/dist/es2019/text-area.js

@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { borderWidth, dynamicStyles, getBaseStyles } from './styles';
 const packageName = "@atlaskit/textarea";
-const packageVersion = "5.1.2";
+const packageVersion = "5.2.0";
 const analyticsParams = {
   componentName: 'textArea',
   packageName,

package/dist/esm/styles.js

@@ -113,13 +113,14 @@ var bgAndBorderColorStyles = function bgAndBorderColorStyles(appearance) {
     }
   } : {}));
 };
-var placeholderStyle = function placeholderStyle(placeholderTextColor) {
-  return css({
-    '&::placeholder': {
-      color: placeholderTextColor
-    }
-  });
-};
+var placeholderStyles = css({
+  '&::placeholder': {
+    color: componentTokens.placeholderTextColor
+  },
+  '&:disabled::placeholder': {
+    color: disabledRules.textColor
+  }
+});
 var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(appearance) {
   return appearance && css({
     '&:hover:not(:read-only):not(:focus)': {
@@ -227,7 +228,7 @@ export var getBaseStyles = function getBaseStyles(_ref) {
 export var dynamicStyles = function dynamicStyles(appearance) {
   return (
     // eslint-disable-next-line @repo/internal/styles/no-exported-styles
-    css([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyle(componentTokens.placeholderTextColor), {
+    css([bgAndBorderColorStyles(appearance), hoverBackgroundAndBorderStyles(appearance), placeholderStyles, {
       color: componentTokens.textColor,
       '&:disabled': {
         color: disabledRules.textColor

package/dist/esm/text-area.js

@@ -11,7 +11,7 @@ import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { borderWidth, dynamicStyles, getBaseStyles } from './styles';
 var packageName = "@atlaskit/textarea";
-var packageVersion = "5.1.2";
+var packageVersion = "5.2.0";
 var analyticsParams = {
   componentName: 'textArea',
   packageName: packageName,

package/package.json

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