@megafon/ui-core 4.0.0-beta.5 → 4.0.0-beta.8

package/CHANGELOG.md

@@ -3,6 +3,53 @@
 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.8](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.7...@megafon/ui-core@4.0.0-beta.8) (2022-07-14)
+
+
+### Bug Fixes
+
+* **accordion:** change focus and dark theme styles ([d3e07ea](https://github.com/MegafonWebLab/megafon-ui/commit/d3e07ea6fee0c131e25db1bb558d8b205d201e0c))
+* **notification:** change title typography ([f91a60e](https://github.com/MegafonWebLab/megafon-ui/commit/f91a60ee1562626494358ef529321f072ba70890))
+* **tabs:** change dark theme and indents styles ([272dfcb](https://github.com/MegafonWebLab/megafon-ui/commit/272dfcbeef750f2f7ae097b46f7d98405cf53a88))
+
+
+### Features
+
+* **header:** add new prop space ([e5bef7c](https://github.com/MegafonWebLab/megafon-ui/commit/e5bef7c8e13c57e477a4c25f07a4a4a6dbb8b6bd))
+
+
+
+
+
+# [4.0.0-beta.7](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.6...@megafon/ui-core@4.0.0-beta.7) (2022-07-13)
+
+
+### Bug Fixes
+
+* **select:** fix styles ([3e79c68](https://github.com/MegafonWebLab/megafon-ui/commit/3e79c68fecde72e515b7ef52d38d9188e51680f6))
+
+
+
+
+
+# [4.0.0-beta.6](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.0.0-beta.5...@megafon/ui-core@4.0.0-beta.6) (2022-07-05)
+
+
+### Features
+
+* **inputlabel:** component removed ([1f236ac](https://github.com/MegafonWebLab/megafon-ui/commit/1f236ace90acfd7ea1917422677fa24c1c5abdf4))
+* **search:** component redesign ([d6f11eb](https://github.com/MegafonWebLab/megafon-ui/commit/d6f11eb7ee810b835879c7a31e5e01c426060ea1))
+* **select:** component redesign ([aeeda00](https://github.com/MegafonWebLab/megafon-ui/commit/aeeda00dfc1db70421a495a686954e19eecf815d))
+
+
+### BREAKING CHANGES
+
+* **inputlabel:** inputLabel component removed due to non-use
+
+
+
+
+
 # [4.0.0-beta.5](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@3.12.0...@megafon/ui-core@4.0.0-beta.5) (2022-06-29)
 
 

package/dist/es/components/Accordion/Accordion.css

@@ -12,7 +12,7 @@
 }
 .mfui-accordion__title-wrap {
   position: relative;
-  padding: 20px 20px 20px 16px;
+  padding: 20px 20px 44px 16px;
   border-radius: 12px;
   cursor: pointer;
   -webkit-transition: background-color 0.3s;
@@ -20,11 +20,14 @@
 }
 @media screen and (min-width: 768px) {
   .mfui-accordion__title-wrap {
-    padding: 20px 24px;
+    padding: 20px 56px 20px 24px;
   }
 }
 .mfui-accordion__title-wrap:hover {
-  background: var(--spbSky1);
+  background-color: var(--spbSky1);
+}
+.mfui-accordion__title-wrap:focus {
+  background-color: inherit;
 }
 .mfui-accordion__icon-box {
   position: absolute;
@@ -42,7 +45,7 @@
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background-color: var(--base);
+  background-color: var(--stcWhite);
   -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   -webkit-transform: translateY(-50%);

package/dist/es/components/Header/Header.css

@@ -84,6 +84,9 @@
   line-height: 24px;
   font-weight: 500;
 }
+.mfui-header_space_tight.mfui-header_level_h5 {
+  line-height: 18px;
+}
 .mfui-header_margin.mfui-header_level_h5 {
   margin: 24px 0 16px 0;
 }

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

@@ -3,6 +3,8 @@ import './Header.less';
 interface IHeaderProps {
     /** Тег */
     as?: 'h1' | 'h2' | 'h3' | 'h5';
+    /** Поведение текста при встраивании в широкий или узкий контейнер (только для h5) */
+    space?: 'wide' | 'tight';
     /** Цвет */
     color?: 'default' | 'black' | 'white' | 'green' | 'purple' | 'blue' | 'inherit';
     /** Включить отступ */

package/dist/es/components/Header/Header.js

@@ -9,6 +9,8 @@ var Header = function Header(_ref) {
   var addition = _ref.addition,
       _ref$as = _ref.as,
       level = _ref$as === void 0 ? 'h1' : _ref$as,
+      _ref$space = _ref.space,
+      space = _ref$space === void 0 ? 'wide' : _ref$space,
       children = _ref.children,
       className = _ref.className,
       _ref$color = _ref.color,
@@ -19,12 +21,15 @@ var Header = function Header(_ref) {
       margin = _ref.margin,
       onClick = _ref.onClick;
   var ElementType = level;
+  var hasVariousSpaces = level === 'h5';
+  var spaceLevel = hasVariousSpaces && space;
   return /*#__PURE__*/React.createElement(ElementType, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color,
       margin: margin,
       level: level,
-      'h-align': hAlign
+      'h-align': hAlign,
+      space: spaceLevel
     }, className),
     onClick: onClick
   }), children, addition && /*#__PURE__*/React.createElement("div", {
@@ -35,6 +40,7 @@ var Header = function Header(_ref) {
 Header.propTypes = {
   as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h5']),
   color: PropTypes.oneOf(['default', 'black', 'white', 'green', 'purple', 'blue', 'inherit']),
+  space: PropTypes.oneOf(['wide', 'tight']),
   margin: PropTypes.bool,
   addition: PropTypes.element,
   hAlign: PropTypes.oneOf(['inherit', 'left', 'center', 'right']),

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

@@ -22,12 +22,16 @@ h5 {
   display: flex;
 }
 .mfui-notification__title {
-  margin-bottom: 8px;
+  display: block;
+  margin-bottom: 4px;
   color: var(--content);
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 18px;
 }
 @media screen and (min-width: 1280px) {
   .mfui-notification__title {
-    margin-bottom: 4px;
+    line-height: 24px;
   }
 }
 .mfui-notification__title_close-padding {

package/dist/es/components/Notification/Notification.js

@@ -7,7 +7,6 @@ import React, { useEffect, useRef, useState } from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import Button from "../Button/Button";
-import Header from "../Header/Header";
 import TextLink from "../TextLink/TextLink";
 import Tile from "../Tile/Tile";
 import "./Notification.css";
@@ -298,13 +297,9 @@ var Notification = function Notification(_ref) {
     className: cn('content', [contentClass])
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('text-container')
-  }, title && /*#__PURE__*/React.createElement(Header, {
-    dataAttrs: {
-      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
-    },
-    as: "h5",
+  }, title && /*#__PURE__*/React.createElement("span", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
     className: cn('title')
-  }, title), /*#__PURE__*/React.createElement("div", _extends({
+  }), title), /*#__PURE__*/React.createElement("div", _extends({
     ref: wrapTextRef
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text', {

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

@@ -1,3 +1,27 @@
+@-webkit-keyframes listAppear {
+  from {
+    -webkit-transform: translateY(-25px);
+            transform: translateY(-25px);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes listAppear {
+  from {
+    -webkit-transform: translateY(-25px);
+            transform: translateY(-25px);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    opacity: 1;
+  }
+}
 .mfui-search {
   font-family: inherit;
   font-size: 15px;
@@ -22,20 +46,106 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   width: 100%;
-  height: 48px;
-  padding: 0 16px 0 20px;
+  height: 60px;
+  padding: 0 16px 0 16px;
   border: 1px solid var(--spbSky2);
+  border-radius: 12px;
   background-color: var(--base);
   outline: none;
   cursor: pointer;
+  -webkit-transition: border-color 0.3s;
+  transition: border-color 0.3s;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
+.mfui-search__control:not(.mfui-search__control_success):not(.mfui-search__control_error):hover {
+  border-color: var(--content);
+}
+.mfui-search__control_success {
+  border-color: var(--brandGreen);
+}
 .mfui-search__control_error {
   border-color: var(--fury);
 }
+.mfui-search__search-wrapper {
+  position: relative;
+  display: block;
+  width: 100%;
+  cursor: text;
+}
+.mfui-search__search-wrapper_labeled {
+  padding-top: 22px;
+}
+.mfui-search__label {
+  position: absolute;
+  top: 17px;
+  z-index: 1;
+  display: block;
+  overflow: auto;
+  color: var(--spbSky3);
+  -webkit-transition: top 0.5s, -webkit-transform 0.5s;
+  transition: top 0.5s, -webkit-transform 0.5s;
+  transition: transform 0.5s, top 0.5s;
+  transition: transform 0.5s, top 0.5s, -webkit-transform 0.5s;
+  pointer-events: none;
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+}
+.mfui-search__search-field::-webkit-input-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-search__search-field:-moz-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-search__search-field:-ms-input-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-search__search-field::-moz-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-search__search-field::-ms-input-placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-search__search-field::placeholder {
+  color: var(--spbSky3);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+.mfui-search__search-wrapper_labeled .mfui-search__search-field:focus::-webkit-input-placeholder {
+  opacity: 1;
+}
+.mfui-search__search-wrapper_labeled .mfui-search__search-field:focus:-moz-placeholder {
+  opacity: 1;
+}
+.mfui-search__search-wrapper_labeled .mfui-search__search-field:focus:-ms-input-placeholder {
+  opacity: 1;
+}
+.mfui-search__search-field_filled + .mfui-search__label,
+.mfui-search__search-field:focus + .mfui-search__label {
+  -webkit-transform: scale(0.8) translate(-12.5%, -75%);
+          transform: scale(0.8) translate(-12.5%, -75%);
+  -webkit-transition-duration: 0.2s, 0.01s;
+          transition-duration: 0.2s, 0.01s;
+}
 .mfui-search__search-field {
   position: relative;
   z-index: 1;
@@ -44,6 +154,7 @@
           flex-grow: 1;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  width: 100%;
   height: 100%;
   padding: 0;
   border: none;
@@ -73,9 +184,10 @@
   left: -1px;
   z-index: 0;
   display: none;
+  border-radius: 12px;
   background-color: var(--base);
-  -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
-          box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 .mfui-search__icon {
   display: block;
@@ -105,12 +217,13 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   max-height: 368px;
-  padding: 12px 0;
+  padding: 16px;
   overflow-y: auto;
 }
 .mfui-search__list-item {
   font-family: inherit;
   padding: 8px 32px;
+  border-radius: 16px;
   background-color: var(--base);
   cursor: pointer;
 }
@@ -141,7 +254,12 @@
 }
 .mfui-search_open .mfui-search__list {
   display: block;
-  border-color: var(--content);
+  -webkit-animation-name: listAppear;
+          animation-name: listAppear;
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
 }
 .mfui-search_open {
   z-index: 12;

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

@@ -24,6 +24,8 @@ export interface ISearchProps {
     value?: string;
     /** Заголовок поля */
     label?: string;
+    /** HTML идентификатор поля поиска */
+    searchId?: string;
     /** Текст внутри поля по умолчанию */
     placeholder?: string;
     /** Запрещает отрисовку иконки */

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

@@ -10,7 +10,6 @@ import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import debounce from 'lodash.debounce';
 import * as PropTypes from 'prop-types';
-import InputLabel from "../InputLabel/InputLabel";
 import "./Search.css";
 
 var SearchIcon = function SearchIcon(props) {
@@ -32,6 +31,8 @@ var Search = function Search(_ref) {
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? '' : _ref$value,
       label = _ref.label,
+      _ref$searchId = _ref.searchId,
+      searchId = _ref$searchId === void 0 ? 'mfuiSearchId' : _ref$searchId,
       placeholder = _ref.placeholder,
       hideIcon = _ref.hideIcon,
       _ref$items = _ref.items,
@@ -179,14 +180,21 @@ var Search = function Search(_ref) {
       open: isFocused,
       disabled: disabled
     }, [className])
-  }), label && /*#__PURE__*/React.createElement(InputLabel, null, label, required && /*#__PURE__*/React.createElement("span", {
-    className: cn('require-mark')
-  }, "*")), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: cn('control', {
-      error: verification === Verification.ERROR
+      error: verification === Verification.ERROR,
+      success: verification === Verification.VALID
     }, [classes === null || classes === void 0 ? void 0 : classes.control])
+  }, /*#__PURE__*/React.createElement("label", {
+    className: cn('search-wrapper', {
+      labeled: !!label
+    }),
+    htmlFor: searchId
   }, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
-    className: cn('search-field'),
+    id: searchId,
+    className: cn('search-field', {
+      filled: !!searchQuery
+    }),
     placeholder: placeholder,
     value: searchQuery,
     onChange: handleChange,
@@ -197,7 +205,11 @@ var Search = function Search(_ref) {
     disabled: disabled,
     type: "text",
     autoComplete: "off"
-  })), !hideIcon && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.submit), {
+  })), label && /*#__PURE__*/React.createElement("div", {
+    className: cn('label')
+  }, label, required && /*#__PURE__*/React.createElement("span", {
+    className: cn('require-mark')
+  }, "*"))), !hideIcon && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.submit), {
     className: cn('icon-box'),
     onClick: handleSearchSubmit
   }), /*#__PURE__*/React.createElement(SearchIcon, {
@@ -237,6 +249,7 @@ Search.propTypes = {
   }),
   value: PropTypes.string,
   label: PropTypes.string,
+  searchId: PropTypes.string,
   placeholder: PropTypes.string,
   hideIcon: PropTypes.bool,
   items: PropTypes.arrayOf(PropTypes.shape({