@twreporter/react-components 8.18.0-rc.6 → 8.18.0-rc.7

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.18.0-rc.7](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.18.0-rc.6...@twreporter/react-components@8.18.0-rc.7) (2023-06-17)
+
+
+### Bug Fixes
+
+* address defects ([5d0898c](https://github.com/twreporter/twreporter-npm-packages/commit/5d0898c18f5930538b15844432c748e40ab0b23b))
+
+
+
+
+
 # [8.18.0-rc.6](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.18.0-rc.5...@twreporter/react-components@8.18.0-rc.6) (2023-06-15)
 
 

package/lib/input/components/text-field.js

@@ -17,7 +17,7 @@ var _color = require("@twreporter/core/lib/constants/color");
 
 var _paragraph = require("../../text/paragraph");
 
-var _excluded = ["placeholder", "align", "state", "message", "onSubmit", "onChange"];
+var _excluded = ["placeholder", "align", "state", "message", "onSubmit", "onChange", "className"];
 
 var _textColor, _messageColor;
 
@@ -38,7 +38,7 @@ var borderColor = messageColor;
 var Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
   displayName: "text-field__Input",
   componentId: "ld9aag-0"
-})(["height:40px;font-size:16px;border-width:0 0 1px 0;background-color:inherit;color:", ";border-color:", ";&:focus,&:focus-visible{outline-width:0;}&::placeholder{color:", ";}"], function (props) {
+})(["height:40px;font-size:16px;border-width:0 0 1px 0;background-color:inherit;padding:0;color:", ";border-color:", ";&:focus,&:focus-visible{outline-width:0;outline-style:none;}&::placeholder{color:", ";}"], function (props) {
   return textColor[props.state];
 }, function (props) {
   return borderColor[props.state];
@@ -47,7 +47,7 @@ var Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
 var Message = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P3).withConfig({
   displayName: "text-field__Message",
   componentId: "ld9aag-1"
-})(["color:", ";margin:8px 0 0 4px;"], function (props) {
+})(["color:", ";margin-top:8px;"], function (props) {
   return messageColor[props.state];
 });
 
@@ -75,6 +75,8 @@ var TextField = function TextField(_ref) {
       onSubmit = _ref$onSubmit === void 0 ? defaultFunc : _ref$onSubmit,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? defaultFunc : _ref$onChange,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var handleSubmit = function handleSubmit(e) {
@@ -84,20 +86,20 @@ var TextField = function TextField(_ref) {
   };
 
   var handleChange = function handleChange(e) {
-    onChange(e.target.value);
+    onChange(e.target.value, e.target.checkValidity());
   };
 
-  return /*#__PURE__*/_react["default"].createElement(Container, _extends({
+  return /*#__PURE__*/_react["default"].createElement(Container, {
     onSubmit: handleSubmit,
-    align: align
-  }, props), /*#__PURE__*/_react["default"].createElement(Input, {
+    align: align,
+    className: className
+  }, /*#__PURE__*/_react["default"].createElement(Input, _extends({
     name: "input",
-    type: "text",
     placeholder: placeholder,
     state: state,
     disabled: state === _enums.TextState.DISABLED,
     onChange: handleChange
-  }), message && /*#__PURE__*/_react["default"].createElement(Message, {
+  }, props)), message && /*#__PURE__*/_react["default"].createElement(Message, {
     text: message,
     state: state
   }));
@@ -109,7 +111,8 @@ TextField.propTypes = {
   state: _propTypes["default"].oneOf(Object.values(_enums.TextState)),
   message: _propTypes["default"].string,
   onSubmit: _propTypes["default"].func,
-  onChange: _propTypes["default"].func
+  onChange: _propTypes["default"].func,
+  className: _propTypes["default"].string
 };
 TextField.Align = _enums.TextAlign;
 TextField.State = _enums.TextState;

package/lib/material-icon.js

@@ -16,8 +16,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var StyledSymbol = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   displayName: "material-icon__StyledSymbol",
   componentId: "sc-1mjrid5-0"
-})(["font-variation-settings:", ";"], function (props) {
+})(["font-variation-settings:", ";font-size:", "px;"], function (props) {
   return "\n    'FILL': ".concat(props.fill, ",\n    'wght': ").concat(props.weight, ",\n    'GRAD': ").concat(props.grade, ",\n    'opsz': ").concat(props.size, "\n  ");
+}, function (props) {
+  return props.size;
 });
 
 var MeterialSymbol = function MeterialSymbol(_ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.18.0-rc.6",
+  "version": "8.18.0-rc.7",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -44,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "a186ee2fc93f40867ae8d22f7ec1283bad95904d"
+  "gitHead": "186747107ad32429a3dcc0b0a663c1ccc7d744ea"
 }