Create a new dist version 0.0.10 (#26)

Collecting:
- Impl [Form] new Textarea component (#24)
- Fix [Models] Issue with input validation (#25)

Author: ilan7empest

commit_message

@@ -1,10 +1,7 @@
 
 
-Create a new dist version 0.0.9
+Create a new dist version 0.0.10
 
 Collecting:
-- Fix [Wizard] remove hasSteps logic (#18)
-- add isOpen prop in FormSelect (#19)
-- Impl [Models] Add `FormKeyValueTable` component (#20)
-- Update form.util.js (#21)
-- Fix [FormKeyValue] fix last row (#22)
+- Impl [Form] new Textarea component (#24)
+- Fix [Models] Issue with input validation (#25)

dist/components/Button/Button.js

@@ -25,7 +25,7 @@ require("./Button.scss");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["className", "icon", "label", "tooltip", "variant"];
+var _excluded = ["className", "density", "icon", "label", "tooltip", "variant"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -45,13 +45,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
+      density = _ref.density,
       icon = _ref.icon,
       label = _ref.label,
       tooltip = _ref.tooltip,
       variant = _ref.variant,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var buttonClassName = (0, _classnames.default)('btn', "btn-".concat(variant), className);
+  var buttonClassName = (0, _classnames.default)('btn', "btn-".concat(variant), "btn-".concat(density), className);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
     template: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextTooltipTemplate.default, {
       text: tooltip
@@ -68,12 +69,14 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 });
 Button.defaultProps = {
   className: '',
+  density: 'normal',
   label: 'Button',
   tooltip: '',
   variant: _constants.TERTIARY_BUTTON
 };
 Button.propTypes = {
   className: _propTypes.default.string,
+  density: _propTypes.default.oneOf(['dense', 'normal', 'medium', 'chunky']),
   icon: _propTypes.default.element,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
   tooltip: _propTypes.default.string,

dist/components/Button/Button.scss

@@ -7,16 +7,31 @@
   align-items: center;
   justify-content: center;
   min-width: 90px;
-  height: 36px;
+  height: $fieldNormal;
   padding: 0 16px;
   color: $white;
   font-weight: 500;
   font-size: 0.875rem;
   font-style: normal;
-  line-height: 16px;
   border: $transparentBorder;
   border-radius: $mainBorderRadius;
 
+  &-dense {
+    height: $fieldDense;
+  }
+
+  &-normal {
+    height: $fieldNormal;
+  }
+
+  &-medium {
+    height: $fieldMedium;
+  }
+
+  &-chunky {
+    height: $fieldChunky;
+  }
+
   svg {
     & > * {
       fill: currentColor;

dist/components/FormInput/FormInput.js

@@ -136,7 +136,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   (0, _useDetectOutsideClick.useDetectOutsideClick)(ref, function () {
     return setShowValidationRules(false);
   });
-  var formFieldClassNames = (0, _classnames.default)('form-field', className);
+  var formFieldClassNames = (0, _classnames.default)('form-field form-field-input', className);
   var inputWrapperClassNames = (0, _classnames.default)('form-field__wrapper', "form-field__wrapper-".concat(density), disabled && 'form-field__wrapper-disabled', isInvalid && 'form-field__wrapper-invalid', withoutBorder && 'without-border');
   var labelClassNames = (0, _classnames.default)('form-field__label', disabled && 'form-field__label-disabled');
   (0, _react.useEffect)(function () {
@@ -200,6 +200,8 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   };
 
   var handleScroll = function handleScroll(event) {
+    if (inputRef.current.contains(event.target)) return;
+
     if (!event.target.closest('.options-menu') && !event.target.classList.contains('form-field')) {
       setShowValidationRules(false);
     }

dist/components/FormInput/formInput.scss

@@ -3,90 +3,57 @@
 @import '../../scss/shadows';
 @import '../../scss/mixins';
 
-.form-field {
-  @include formField;
+.form-field.form-field-input {
+  width: 100%;
 
-  &__label {
-    &-icon {
-      display: inline-flex;
-      margin-left: 3px;
+  .form-field {
+    @include formField;
 
-      & > *,
-      a {
+    &__label {
+      &-icon {
         display: inline-flex;
-      }
-
-      a {
-        transform: translateY(-1px);
-      }
+        margin-left: 3px;
 
-      svg {
-        width: 12px;
-        height: 12px;
-
-        path {
-          fill: $cornflowerBlue;
+        & > *,
+        a {
+          display: inline-flex;
         }
-      }
-    }
-  }
-
-  input {
-    border: 0;
-    color: inherit;
-    background-color: transparent;
-    padding: 0;
-    width: 100%;
-
-    &::placeholder {
-      color: $spunPearl;
-    }
-
-    &::-webkit-input-placeholder {
-      /* Chrome/Opera/Safari */
-      color: $spunPearl;
-    }
 
-    &::-moz-placeholder {
-      /* Firefox 19+ */
-      color: $spunPearl;
-    }
-
-    &:-ms-input-placeholder {
-      /* IE 10+ */
-      color: $spunPearl;
-    }
+        a {
+          transform: translateY(-1px);
+        }
 
-    &:-moz-placeholder {
-      /* Firefox 18- */
-      color: $spunPearl;
-    }
+        svg {
+          width: 12px;
+          height: 12px;
 
-    &:disabled {
-      background: transparent;
-      cursor: not-allowed;
+          path {
+            fill: $cornflowerBlue;
+          }
+        }
+      }
     }
-  }
-
-  &__suggestion-list {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 5;
-    margin: 0;
-    padding: 7px 0;
-    background-color: $white;
-    border-radius: 4px;
-    box-shadow: $previewBoxShadow;
 
-    .suggestion-item {
-      padding: 7px 15px;
-      color: $mulledWine;
-      list-style-type: none;
-
-      &:hover {
-        background-color: $alabaster;
-        cursor: pointer;
+    &__suggestion-list {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: 5;
+      margin: 0;
+      padding: 7px 0;
+      background-color: $white;
+      border-radius: 4px;
+      box-shadow: $previewBoxShadow;
+
+      .suggestion-item {
+        padding: 7px 15px;
+        color: $mulledWine;
+        list-style-type: none;
+
+        &:hover {
+          background-color: $alabaster;
+          cursor: pointer;
+        }
       }
     }
   }

dist/components/FormSelect/FormSelect.js

@@ -185,7 +185,7 @@ var FormSelect = function FormSelect(_ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         "data-testid": "select",
         ref: selectRef,
-        className: "form-field ".concat(className),
+        className: "form-field form-field-select ".concat(className),
         onClick: toggleOpen,
         children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: selectLabelClassName,
@@ -264,7 +264,7 @@ var FormSelect = function FormSelect(_ref) {
           isOpen: isConfirmDialogOpen,
           message: selectedItemAction.confirm.message
         }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PopUpDialog.default, {
-          className: "form-field__select__options-list",
+          className: "form-field form-field-select__options-list",
           customPosition: {
             element: selectRef,
             position: 'bottom-right'