@megafon/ui-core 4.0.0-beta.18 → 4.0.0-beta.20

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0-beta.20](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.19...@megafon/ui-core@4.0.0-beta.20) (2022-08-24)
+
+
+### Bug Fixes
+
+* **textfield:** returned correct color to notice text ([d6ef976](https://github.com/MegafonWebLab/megafon-ui/commit/d6ef976f755e1fb55d7fd2e462095459d96b74c9))
+
+
+
+
+
+# [4.0.0-beta.19](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.18...@megafon/ui-core@4.0.0-beta.19) (2022-08-23)
+
+
+### Bug Fixes
+
+* **notification:** fix bottom gaps ([1427080](https://github.com/MegafonWebLab/megafon-ui/commit/14270809ec97d18dbdf19183111b9034114d9437))
+* **search:** add modifier for item paddings ([9df5792](https://github.com/MegafonWebLab/megafon-ui/commit/9df5792d6828f852bed9c1c4e64404667e8d2cd7))
+* **select:** add modifier for item paddings ([e5f9735](https://github.com/MegafonWebLab/megafon-ui/commit/e5f97353c9686fba070aad48d3816ec0ce12d5d9))
+
+
+
+
+
 # [4.0.0-beta.18](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.17...@megafon/ui-core@4.0.0-beta.18) (2022-08-22)
 
 

package/dist/es/components/Notification/Notification.css

@@ -132,7 +132,6 @@ h5 {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  gap: 16px;
   -webkit-box-align: end;
       -ms-flex-align: end;
           align-items: flex-end;
@@ -142,16 +141,10 @@ h5 {
   width: 100%;
   margin-top: 8px;
 }
-@media screen and (min-width: 768px) {
-  .mfui-notification__bottom {
-    gap: 20px;
-  }
-}
 .mfui-notification__bottom-block {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  gap: 16px;
   overflow: hidden;
 }
 .mfui-notification__bottom_has-button {
@@ -167,6 +160,7 @@ h5 {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  margin-left: 16px;
   cursor: pointer;
 }
 @media screen and (max-width: 767px) {
@@ -203,6 +197,7 @@ h5 {
   height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
+  margin-left: 20px;
   padding: 0;
   border: none;
   color: var(--systemBlue);
@@ -214,6 +209,7 @@ h5 {
   .mfui-notification__collapse-button {
     font-size: 12px;
     line-height: 18px;
+    margin-left: 16px;
   }
 }
 .mfui-notification__collapse_hidden {

package/dist/es/components/Search/Search.css

@@ -224,11 +224,20 @@
 }
 .mfui-search__list-item {
   font-family: inherit;
-  padding: 12px 32px;
+  padding-top: 12px;
+  padding-bottom: 12px;
   border-radius: 16px;
   background-color: var(--base);
   cursor: pointer;
 }
+.mfui-search__list-item_paddings_large {
+  padding-right: 32px;
+  padding-left: 32px;
+}
+.mfui-search__list-item_paddings_small {
+  padding-right: 12px;
+  padding-left: 12px;
+}
 .mfui-search__list-item_active {
   background-color: var(--spbSky0);
 }

package/dist/es/components/Search/Search.d.ts

@@ -6,11 +6,17 @@ export declare const Verification: {
 };
 declare type VerificationType = typeof Verification[keyof typeof Verification];
 declare type ElementOrString = JSX.Element[] | JSX.Element | Element[] | Element;
+export declare const SearchItemsPaddings: {
+    readonly SMALL: "small";
+    readonly LARGE: "large";
+};
 export declare type SearchItem = {
     /** Значение value элемента */
     value: string;
     /** Настраиваемое отображение элементов в выпадающем списке */
     searchView?: ElementOrString;
+    /** Размер горизонтальных отступов элемента */
+    paddings?: typeof SearchItemsPaddings[keyof typeof SearchItemsPaddings];
 };
 export interface ISearchProps {
     /** Дополнительные data атрибуты к внутренним элементам */

package/dist/es/components/Search/Search.js

@@ -1,4 +1,5 @@
 import "core-js/modules/es.array.map";
+import "core-js/modules/es.object.values";
 import "core-js/modules/es.regexp.constructor";
 import "core-js/modules/es.regexp.exec";
 import "core-js/modules/es.regexp.to-string";
@@ -24,6 +25,10 @@ export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
 };
+export var SearchItemsPaddings = {
+  SMALL: 'small',
+  LARGE: 'large'
+};
 var cn = cnCreate('mfui-search');
 
 var Search = function Search(_ref) {
@@ -220,11 +225,14 @@ var Search = function Search(_ref) {
     className: cn('list-inner')
   }, items.map(function (_ref2, i) {
     var itemValue = _ref2.value,
-        searchView = _ref2.searchView;
+        searchView = _ref2.searchView,
+        _ref2$paddings = _ref2.paddings,
+        paddings = _ref2$paddings === void 0 ? SearchItemsPaddings.LARGE : _ref2$paddings;
     return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
       ref: activeIndex === i ? highlightedItem : null,
       className: cn('list-item', {
-        active: activeIndex === i
+        active: activeIndex === i,
+        paddings: paddings
       }),
       onMouseDown: handleSelectSubmit(i),
       onMouseEnter: handleHoverItem(i),
@@ -254,7 +262,8 @@ Search.propTypes = {
   hideIcon: PropTypes.bool,
   items: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.string.isRequired,
-    searchView: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
+    searchView: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+    paddings: PropTypes.oneOf(Object.values(SearchItemsPaddings))
   }).isRequired),
   changeDelay: PropTypes.number,
   verification: PropTypes.oneOf(['valid', 'error']),

package/dist/es/components/Select/Select.css

@@ -192,7 +192,8 @@
 }
 .mfui-select__list-item {
   font-family: inherit;
-  padding: 12px 32px;
+  padding-top: 12px;
+  padding-bottom: 12px;
   border-radius: 16px;
   background-color: var(--base);
   cursor: pointer;
@@ -200,6 +201,14 @@
 .mfui-select__list-item_hovered {
   background-color: var(--spbSky0);
 }
+.mfui-select__list-item_paddings_large {
+  padding-right: 32px;
+  padding-left: 32px;
+}
+.mfui-select__list-item_paddings_small {
+  padding-right: 12px;
+  padding-left: 12px;
+}
 .mfui-select__item-title {
   position: relative;
   display: -webkit-box;

package/dist/es/components/Select/Select.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import './Select.less';
+export declare const SelectItemsPaddings: {
+    readonly SMALL: "small";
+    readonly LARGE: "large";
+};
 export declare const Verification: {
     readonly VALID: "valid";
     readonly ERROR: "error";
@@ -26,6 +30,8 @@ export interface ISelectItem<T extends SelectItemValueType> {
     view?: ElementOrString | ((data: ViewCallbackArguments) => ElementOrString);
     /** Настраиваемое отображение выбранного элемента в поле селекта  */
     selectedView?: JSX.Element | Element | React.ReactElement;
+    /** Размер горизонтальных отступов элемента */
+    paddings?: typeof SelectItemsPaddings[keyof typeof SelectItemsPaddings];
 }
 export interface ISelectProps<T extends SelectItemValueType> {
     /** Тип компонента */
@@ -134,6 +140,7 @@ declare const Select: {
             selectedView: PropTypes.Requireable<string | PropTypes.ReactElementLike | ((...args: any[]) => any)>;
             title: PropTypes.Validator<string>;
             value: PropTypes.Validator<string | number>;
+            paddings: PropTypes.Requireable<"small" | "large">;
         }>> | null | undefined)[]>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onOpened: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/es/components/Select/Select.js

@@ -26,6 +26,10 @@ var UPDATE_ITEMS_LIST = SelectActions.UPDATE_ITEMS_LIST,
     TOGGLE_DROPDOWN = SelectActions.TOGGLE_DROPDOWN,
     UPDATE_SELECT_VALUE = SelectActions.UPDATE_SELECT_VALUE,
     SET_HOVERED_ITEM_INDEX = SelectActions.SET_HOVERED_ITEM_INDEX;
+export var SelectItemsPaddings = {
+  SMALL: 'small',
+  LARGE: 'large'
+};
 export var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -381,11 +385,14 @@ var Select = function Select(_ref) {
     }, currentItems.map(function (_ref3, i) {
       var title = _ref3.title,
           value = _ref3.value,
-          view = _ref3.view;
+          view = _ref3.view,
+          _ref3$paddings = _ref3.paddings,
+          paddings = _ref3$paddings === void 0 ? SelectItemsPaddings.LARGE : _ref3$paddings;
       var isItemActive = currentValue === value;
       return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItem, i + 1), {
         className: cn('list-item', {
-          hovered: hoveredItemIndex === i
+          hovered: hoveredItemIndex === i,
+          paddings: paddings
         }, [classes.listItem]),
         key: "".concat(i, "_").concat(value),
         onClick: handleSelectItem,
@@ -460,7 +467,8 @@ Select.propTypes = {
     view: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
     selectedView: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
     title: PropTypes.string.isRequired,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    paddings: PropTypes.oneOf(Object.values(SelectItemsPaddings))
   })).isRequired,
   onSelect: PropTypes.func,
   onOpened: PropTypes.func,

package/dist/es/components/TextField/TextField.css

@@ -269,13 +269,13 @@
   cursor: default !important;
 }
 .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__counter_error,
-.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__wrap {
+.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field-bottom-wrapper {
   color: var(--fury);
 }
 .mfui-text-field_theme_white .mfui-text-field__icon {
   fill: var(--stcWhite);
 }
-.mfui-text-field_theme_white .mfui-text-field__wrap,
+.mfui-text-field_theme_white .mfui-text-field__field-bottom-wrapper,
 .mfui-text-field_theme_white .mfui-text-field__counter {
   color: var(--stcWhite);
 }

package/dist/lib/components/Notification/Notification.css

@@ -132,7 +132,6 @@ h5 {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  gap: 16px;
   -webkit-box-align: end;
       -ms-flex-align: end;
           align-items: flex-end;
@@ -142,16 +141,10 @@ h5 {
   width: 100%;
   margin-top: 8px;
 }
-@media screen and (min-width: 768px) {
-  .mfui-notification__bottom {
-    gap: 20px;
-  }
-}
 .mfui-notification__bottom-block {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  gap: 16px;
   overflow: hidden;
 }
 .mfui-notification__bottom_has-button {
@@ -167,6 +160,7 @@ h5 {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  margin-left: 16px;
   cursor: pointer;
 }
 @media screen and (max-width: 767px) {
@@ -203,6 +197,7 @@ h5 {
   height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
+  margin-left: 20px;
   padding: 0;
   border: none;
   color: var(--systemBlue);
@@ -214,6 +209,7 @@ h5 {
   .mfui-notification__collapse-button {
     font-size: 12px;
     line-height: 18px;
+    margin-left: 16px;
   }
 }
 .mfui-notification__collapse_hidden {

package/dist/lib/components/Search/Search.css

@@ -224,11 +224,20 @@
 }
 .mfui-search__list-item {
   font-family: inherit;
-  padding: 12px 32px;
+  padding-top: 12px;
+  padding-bottom: 12px;
   border-radius: 16px;
   background-color: var(--base);
   cursor: pointer;
 }
+.mfui-search__list-item_paddings_large {
+  padding-right: 32px;
+  padding-left: 32px;
+}
+.mfui-search__list-item_paddings_small {
+  padding-right: 12px;
+  padding-left: 12px;
+}
 .mfui-search__list-item_active {
   background-color: var(--spbSky0);
 }

package/dist/lib/components/Search/Search.d.ts

@@ -6,11 +6,17 @@ export declare const Verification: {
 };
 declare type VerificationType = typeof Verification[keyof typeof Verification];
 declare type ElementOrString = JSX.Element[] | JSX.Element | Element[] | Element;
+export declare const SearchItemsPaddings: {
+    readonly SMALL: "small";
+    readonly LARGE: "large";
+};
 export declare type SearchItem = {
     /** Значение value элемента */
     value: string;
     /** Настраиваемое отображение элементов в выпадающем списке */
     searchView?: ElementOrString;
+    /** Размер горизонтальных отступов элемента */
+    paddings?: typeof SearchItemsPaddings[keyof typeof SearchItemsPaddings];
 };
 export interface ISearchProps {
     /** Дополнительные data атрибуты к внутренним элементам */

package/dist/lib/components/Search/Search.js

@@ -5,10 +5,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Verification = void 0;
+exports["default"] = exports.SearchItemsPaddings = exports.Verification = void 0;
 
 require("core-js/modules/es.array.map");
 
+require("core-js/modules/es.object.values");
+
 require("core-js/modules/es.regexp.constructor");
 
 require("core-js/modules/es.regexp.exec");
@@ -50,6 +52,11 @@ var Verification = {
   ERROR: 'error'
 };
 exports.Verification = Verification;
+var SearchItemsPaddings = {
+  SMALL: 'small',
+  LARGE: 'large'
+};
+exports.SearchItemsPaddings = SearchItemsPaddings;
 var cn = (0, _uiHelpers.cnCreate)('mfui-search');
 
 var Search = function Search(_ref) {
@@ -260,11 +267,14 @@ var Search = function Search(_ref) {
     className: cn('list-inner')
   }, items.map(function (_ref2, i) {
     var itemValue = _ref2.value,
-        searchView = _ref2.searchView;
+        searchView = _ref2.searchView,
+        _ref2$paddings = _ref2.paddings,
+        paddings = _ref2$paddings === void 0 ? SearchItemsPaddings.LARGE : _ref2$paddings;
     return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
       ref: activeIndex === i ? highlightedItem : null,
       className: cn('list-item', {
-        active: activeIndex === i
+        active: activeIndex === i,
+        paddings: paddings
       }),
       onMouseDown: handleSelectSubmit(i),
       onMouseEnter: handleHoverItem(i),
@@ -294,7 +304,8 @@ Search.propTypes = {
   hideIcon: PropTypes.bool,
   items: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.string.isRequired,
-    searchView: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
+    searchView: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
+    paddings: PropTypes.oneOf(Object.values(SearchItemsPaddings))
   }).isRequired),
   changeDelay: PropTypes.number,
   verification: PropTypes.oneOf(['valid', 'error']),

package/dist/lib/components/Select/Select.css

@@ -192,7 +192,8 @@
 }
 .mfui-select__list-item {
   font-family: inherit;
-  padding: 12px 32px;
+  padding-top: 12px;
+  padding-bottom: 12px;
   border-radius: 16px;
   background-color: var(--base);
   cursor: pointer;
@@ -200,6 +201,14 @@
 .mfui-select__list-item_hovered {
   background-color: var(--spbSky0);
 }
+.mfui-select__list-item_paddings_large {
+  padding-right: 32px;
+  padding-left: 32px;
+}
+.mfui-select__list-item_paddings_small {
+  padding-right: 12px;
+  padding-left: 12px;
+}
 .mfui-select__item-title {
   position: relative;
   display: -webkit-box;

package/dist/lib/components/Select/Select.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import './Select.less';
+export declare const SelectItemsPaddings: {
+    readonly SMALL: "small";
+    readonly LARGE: "large";
+};
 export declare const Verification: {
     readonly VALID: "valid";
     readonly ERROR: "error";
@@ -26,6 +30,8 @@ export interface ISelectItem<T extends SelectItemValueType> {
     view?: ElementOrString | ((data: ViewCallbackArguments) => ElementOrString);
     /** Настраиваемое отображение выбранного элемента в поле селекта  */
     selectedView?: JSX.Element | Element | React.ReactElement;
+    /** Размер горизонтальных отступов элемента */
+    paddings?: typeof SelectItemsPaddings[keyof typeof SelectItemsPaddings];
 }
 export interface ISelectProps<T extends SelectItemValueType> {
     /** Тип компонента */
@@ -134,6 +140,7 @@ declare const Select: {
             selectedView: PropTypes.Requireable<string | PropTypes.ReactElementLike | ((...args: any[]) => any)>;
             title: PropTypes.Validator<string>;
             value: PropTypes.Validator<string | number>;
+            paddings: PropTypes.Requireable<"small" | "large">;
         }>> | null | undefined)[]>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onOpened: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/lib/components/Select/Select.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SelectTypes = exports.Verification = void 0;
+exports["default"] = exports.SelectTypes = exports.Verification = exports.SelectItemsPaddings = void 0;
 
 require("core-js/modules/es.array.concat");
 
@@ -58,6 +58,11 @@ var UPDATE_ITEMS_LIST = _selectReducer.SelectActions.UPDATE_ITEMS_LIST,
     TOGGLE_DROPDOWN = _selectReducer.SelectActions.TOGGLE_DROPDOWN,
     UPDATE_SELECT_VALUE = _selectReducer.SelectActions.UPDATE_SELECT_VALUE,
     SET_HOVERED_ITEM_INDEX = _selectReducer.SelectActions.SET_HOVERED_ITEM_INDEX;
+var SelectItemsPaddings = {
+  SMALL: 'small',
+  LARGE: 'large'
+};
+exports.SelectItemsPaddings = SelectItemsPaddings;
 var Verification = {
   VALID: 'valid',
   ERROR: 'error'
@@ -415,11 +420,14 @@ var Select = function Select(_ref) {
     }, currentItems.map(function (_ref3, i) {
       var title = _ref3.title,
           value = _ref3.value,
-          view = _ref3.view;
+          view = _ref3.view,
+          _ref3$paddings = _ref3.paddings,
+          paddings = _ref3$paddings === void 0 ? SelectItemsPaddings.LARGE : _ref3$paddings;
       var isItemActive = currentValue === value;
       return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItem, i + 1), {
         className: cn('list-item', {
-          hovered: hoveredItemIndex === i
+          hovered: hoveredItemIndex === i,
+          paddings: paddings
         }, [classes.listItem]),
         key: "".concat(i, "_").concat(value),
         onClick: handleSelectItem,
@@ -494,7 +502,8 @@ Select.propTypes = {
     view: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
     selectedView: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
     title: PropTypes.string.isRequired,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    paddings: PropTypes.oneOf(Object.values(SelectItemsPaddings))
   })).isRequired,
   onSelect: PropTypes.func,
   onOpened: PropTypes.func,

package/dist/lib/components/TextField/TextField.css

@@ -269,13 +269,13 @@
   cursor: default !important;
 }
 .mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__counter_error,
-.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__wrap {
+.mfui-text-field_theme_default.mfui-text-field_error .mfui-text-field__field-bottom-wrapper {
   color: var(--fury);
 }
 .mfui-text-field_theme_white .mfui-text-field__icon {
   fill: var(--stcWhite);
 }
-.mfui-text-field_theme_white .mfui-text-field__wrap,
+.mfui-text-field_theme_white .mfui-text-field__field-bottom-wrapper,
 .mfui-text-field_theme_white .mfui-text-field__counter {
   color: var(--stcWhite);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "4.0.0-beta.18",
+  "version": "4.0.0-beta.20",
   "files": [
     "dist",
     "styles"
@@ -97,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "5a1d0399078e86cc7f193b83e82099e7883d75f1"
+  "gitHead": "0757940d05a058c5eb0a5044767bf59a993eaace"
 }