@cloudflare/component-textarea 2.5.93 → 2.6.2

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.6.2](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-textarea@2.6.1...@cloudflare/component-textarea@2.6.2) (2022-02-01)
+
+**Note:** Version bump only for package @cloudflare/component-textarea
+
+
+
+
+
+## [2.6.1](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-textarea@2.6.0...@cloudflare/component-textarea@2.6.1) (2022-01-19)
+
+**Note:** Version bump only for package @cloudflare/component-textarea
+
+
+
+
+
+# [2.6.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-textarea@2.5.94...@cloudflare/component-textarea@2.6.0) (2022-01-07)
+
+
+### Features
+
+* **component-textarea:** A11Y-584 Add invalid prop, update styling ([7f4fabb](http://stash.cfops.it:7999/fe/stratus/commits/7f4fabb))
+
+
+
+
+
+## [2.5.94](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-textarea@2.5.93...@cloudflare/component-textarea@2.5.94) (2021-12-28)
+
+**Note:** Version bump only for package @cloudflare/component-textarea
+
+
+
+
+
 ## [2.5.93](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-textarea@2.5.91...@cloudflare/component-textarea@2.5.93) (2021-12-21)
 
 **Note:** Version bump only for package @cloudflare/component-textarea

package/dist/Textarea.d.ts

@@ -334,6 +334,7 @@ declare const Textarea: import("react").ComponentType<{
     px?: import("csstype").PaddingLeftProperty<string | number> | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | [import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined, import("csstype").PaddingLeftProperty<string | number> | undefined] | undefined;
     py?: import("csstype").PaddingTopProperty<string | number> | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | [import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined, import("csstype").PaddingTopProperty<string | number> | undefined] | undefined;
     borderbottomRightRadius?: ([never, never] | [never, never, never]) | undefined;
+    invalid?: boolean | undefined;
     innerRef?: import("react").Ref<HTMLTextAreaElement> | undefined;
 }>;
 export default Textarea;

package/es/Textarea.js

@@ -1,9 +1,15 @@
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import PropTypes from 'prop-types';
 import requiredIf from 'react-required-if';
 import { createStyledComponent } from '@cloudflare/style-container';
 const Textarea = createStyledComponent(({
-  theme
-}) => ({
+  theme,
+  invalid,
+  disabled
+}) => _objectSpread({
   height: 'initial',
   lineHeight: 'initial',
   wordBreak: 'initial',
@@ -16,35 +22,19 @@ const Textarea = createStyledComponent(({
   mx: 0,
   mt: 0,
   mb: 3,
-  border: `1px solid ${theme.colors.gray[5]}`,
-  borderRadius: theme.radii[2],
-  verticalAlign: 'middle',
-  fontFamily: theme.fontFamily,
-  fontSize: 2,
-  background: theme.colors.white,
-  color: theme.colors.gray[1],
-  outline: 'none',
-  transition: 'border-color 0.2s ease',
-  '&:hover': {
-    borderColor: theme.colors.blue[3]
-  },
-  '&:focus': {
-    outline: '5px auto -webkit-focus-ring-color',
-    outlineOffset: '-1px'
-  },
-  '&:disabled': {
-    background: theme.colors.gray[8],
-    color: theme.colors.gray[1],
-    opacity: 0.5,
-    '&:hover': {
-      borderColor: theme.colors.gray[5]
-    }
-  }
-}), 'textarea');
+  verticalAlign: 'middle'
+}, theme.mixins.focus({
+  invalid,
+  border: true
+}), theme.mixins.input({
+  invalid,
+  disabled
+})), 'textarea');
 Textarea.propTypes = {
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
+  invalid: PropTypes.bool,
   disabled: PropTypes.bool,
   readOnly: PropTypes.bool,
   rows: PropTypes.number,

package/lib/Textarea.js

@@ -13,9 +13,15 @@ var _styleContainer = require("@cloudflare/style-container");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var Textarea = (0, _styleContainer.createStyledComponent)(function (_ref) {
-  var theme = _ref.theme;
-  return {
+  var theme = _ref.theme,
+      invalid = _ref.invalid,
+      disabled = _ref.disabled;
+  return _objectSpread({
     height: 'initial',
     lineHeight: 'initial',
     wordBreak: 'initial',
@@ -28,36 +34,20 @@ var Textarea = (0, _styleContainer.createStyledComponent)(function (_ref) {
     mx: 0,
     mt: 0,
     mb: 3,
-    border: "1px solid ".concat(theme.colors.gray[5]),
-    borderRadius: theme.radii[2],
-    verticalAlign: 'middle',
-    fontFamily: theme.fontFamily,
-    fontSize: 2,
-    background: theme.colors.white,
-    color: theme.colors.gray[1],
-    outline: 'none',
-    transition: 'border-color 0.2s ease',
-    '&:hover': {
-      borderColor: theme.colors.blue[3]
-    },
-    '&:focus': {
-      outline: '5px auto -webkit-focus-ring-color',
-      outlineOffset: '-1px'
-    },
-    '&:disabled': {
-      background: theme.colors.gray[8],
-      color: theme.colors.gray[1],
-      opacity: 0.5,
-      '&:hover': {
-        borderColor: theme.colors.gray[5]
-      }
-    }
-  };
+    verticalAlign: 'middle'
+  }, theme.mixins.focus({
+    invalid: invalid,
+    border: true
+  }), theme.mixins.input({
+    invalid: invalid,
+    disabled: disabled
+  }));
 }, 'textarea');
 Textarea.propTypes = {
   height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   name: _propTypes.default.string.isRequired,
   value: _propTypes.default.string.isRequired,
+  invalid: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
   readOnly: _propTypes.default.bool,
   rows: _propTypes.default.number,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-textarea",
   "description": "Cloudflare Textarea Component",
-  "version": "2.5.93",
+  "version": "2.6.2",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "./dist/index.d.ts",
@@ -13,8 +13,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@cloudflare/style-container": "^7.5.26",
-    "@cloudflare/types": "^6.11.18",
+    "@cloudflare/style-container": "^7.6.2",
+    "@cloudflare/types": "^6.12.0",
     "prop-types": "^15.6.0",
     "react-required-if": "^1.0.0"
   },
@@ -32,5 +32,5 @@
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
   },
-  "gitHead": "f42cb1c7695dc47de8d5d7044d9d7463779b962b"
+  "gitHead": "d620f573304f8c7cf4948ebaaaa06029883e0594"
 }