ydb-embedded-ui 1.5.2 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+### [1.5.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.5.2...v1.5.3) (2022-05-26)
+
+
+### Bug Fixes
+
+* explicitly set lang for ydb-ui-components i18n ([5684524](https://github.com/ydb-platform/ydb-embedded-ui/commit/5684524267e2cbf19a44de75b0e0b2bf98b617fd))
+* proper icon size in uikit/Select ([a665d6d](https://github.com/ydb-platform/ydb-embedded-ui/commit/a665d6d829dae61ccf25566dd7b8cd1e46a743bb))
+* update code for @yandex-cloud/uikit@^2.0.0 ([49d67a1](https://github.com/ydb-platform/ydb-embedded-ui/commit/49d67a1bddcba6fa138b5ebaeb280f16366b3329))
+
+
+### chore
+
+* update @yandex-cloud/uikit to 2.4.0 ([d2eb2e5](https://github.com/ydb-platform/ydb-embedded-ui/commit/d2eb2e5db147604ae346aea295ae22759712eaa4))
+* add @yandex-cloud/uikit to peer deps ([9c9f599](https://github.com/ydb-platform/ydb-embedded-ui/commit/9c9f5997dcca1be5868d013da311a28e495e7faa))
+* update ydb-ui-components to v2.0.1 ([3d6a8d3](https://github.com/ydb-platform/ydb-embedded-ui/commit/3d6a8d30ab2ab47203eb956904e891ae106c0bc7))
+
 ### [1.5.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.5.1...v1.5.2) (2022-05-26)
 
 

package/dist/components/AsideNavigation/Settings/Settings.scss

@@ -29,9 +29,9 @@
     &__heading {
         margin: 20px 20px 0;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
     }
 
     &__search {
@@ -48,9 +48,9 @@
         &-heading {
             margin: 0;
 
-            font-size: var(--yc-text-body2-font-size);
+            font-size: var(--yc-text-body-2-font-size);
             font-weight: 500;
-            line-height: var(--yc-text-body2-line-height);
+            line-height: var(--yc-text-body-2-line-height);
 
             &_badge {
                 position: relative;

package/dist/components/Breadcrumbs/Breadcrumbs.scss

@@ -1,5 +1,5 @@
 .kv-breadcrumbs {
     padding: 20px 0;
 
-    font-size: var(--yc-text-body2-font-size);
+    font-size: var(--yc-text-body-2-font-size);
 }

package/dist/components/Collapse/Collapse.scss

@@ -20,18 +20,18 @@
 
     &__title_size {
         &_s {
-            font-size: var(--yc-text-body-font-size);
-            line-height: var(--yc-text-body-line-height);
+            font-size: var(--yc-text-body-1-font-size);
+            line-height: var(--yc-text-body-1-line-height);
         }
 
         &_m {
-            font-size: var(--yc-text-body2-font-size);
-            line-height: var(--yc-text-body2-line-height);
+            font-size: var(--yc-text-body-2-font-size);
+            line-height: var(--yc-text-body-2-line-height);
         }
 
         &_l {
-            font-size: var(--yc-text-body3-font-size);
-            line-height: var(--yc-text-body3-line-height);
+            font-size: var(--yc-text-body-3-font-size);
+            line-height: var(--yc-text-body-3-line-height);
         }
     }
 
@@ -55,9 +55,9 @@
     }
 
     &__empty-state-title {
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         font-weight: normal;
-        line-height: var(--yc-text-body-line-height);
+        line-height: var(--yc-text-body-1-line-height);
 
         opacity: 0.5;
     }

package/dist/components/EmptyState/EmptyState.scss

@@ -47,21 +47,21 @@
         font-weight: 500;
 
         &_size_s {
-            font-size: var(--yc-text-lead-font-size);
-            line-height: var(--yc-text-lead-line-height);
+            font-size: var(--yc-text-subheader-3-font-size);
+            line-height: var(--yc-text-subheader-3-line-height);
         }
 
         &_size_m {
-            font-size: var(--yc-text-title-font-size);
-            line-height: var(--yc-text-title-line-height);
+            font-size: var(--yc-text-header-2-font-size);
+            line-height: var(--yc-text-header-2-line-height);
         }
     }
 
     &__description {
         grid-area: description;
 
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
     }
 
     &__actions {

package/dist/components/EntityStatus/EntityStatus.scss

@@ -5,8 +5,8 @@
     max-width: 100%;
     height: 100%;
 
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
 
     &__clipboard-button {
         display: none;
@@ -42,8 +42,8 @@
     &__label {
         margin-right: 2px;
 
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
 
         color: var(--yc-color-text-complementary);
     }
@@ -96,7 +96,7 @@
     }
 
     &_size_m {
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
     }
 }

package/dist/components/FullNodeViewer/FullNodeViewer.scss

@@ -1,15 +1,15 @@
 @import '../../styles/mixins.scss';
 
 .full-node-viewer {
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
 
     &__title {
         margin: 0 20px 0 0;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 600;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 
@@ -50,7 +50,7 @@
         min-width: 100px;
         margin-right: 25px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         line-height: 18px;
         white-space: nowrap;
 
@@ -69,9 +69,9 @@
     &__section-title {
         margin: 15px 0 10px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 600;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
     }
 
     &__link {

package/dist/components/GroupViewer/GroupViewer.scss

@@ -8,7 +8,7 @@
     &__label {
         margin-right: 20px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
 
         color: var(--yc-color-text-complementary);
     }

package/dist/components/InfoViewer/InfoViewer.scss

@@ -1,12 +1,12 @@
 .info-viewer {
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
     &__title {
         margin: 15px 0 10px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 600;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
     }
 
     &__items {

package/dist/components/PDiskViewer/PDiskViewer.scss

@@ -6,7 +6,7 @@
     &__size {
         margin-right: 24px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         line-height: 0;
 
         color: var(--yc-color-text-complementary);

package/dist/components/PoolUsage/PoolUsage.scss

@@ -1,6 +1,6 @@
 .pool-usage {
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
     &__info {
         display: flex;
         justify-content: space-between;
@@ -17,7 +17,7 @@
     }
 
     &__threads {
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
 
         color: var(--yc-color-text-hint);
 
@@ -29,7 +29,7 @@
     &__percents {
         margin-right: 2px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
 
         color: var(--yc-color-text-primary);
     }
@@ -44,7 +44,7 @@
 
         height: 6px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
 
         border-radius: 4px;
         background-color: var(--yc-color-base-generic-accent);

package/dist/components/ProgressViewer/ProgressViewer.scss

@@ -10,7 +10,7 @@
     height: 23px;
     padding: 0 4px;
 
-    font-size: var(--yc-text-body2-font-size);
+    font-size: var(--yc-text-body-2-font-size);
     white-space: nowrap;
 
     color: var(--yc-color-text-light-primary);
@@ -49,20 +49,20 @@
     &_size_xs {
         height: 20px;
 
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
     }
 
     &_size_s {
         height: 28px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         line-height: 28px;
     }
     &_size_m {
         height: 32px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         line-height: 32px;
     }
 
@@ -70,25 +70,25 @@
         height: 24px;
 
         font-size: 13px;
-        line-height: var(--yc-text-lead-line-height);
+        line-height: var(--yc-text-subheader-3-line-height);
     }
 
     &_size_n {
         height: 36px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         line-height: 36px;
     }
 
     &_size_l {
         height: 38px;
 
-        font-size: var(--yc-text-lead-font-size);
+        font-size: var(--yc-text-subheader-3-font-size);
         line-height: 38px;
     }
 
     &_size_head {
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         line-height: 36px;
     }
 }

package/dist/components/TableSkeleton/TableSkeleton.scss

@@ -8,7 +8,7 @@
         height: var(--data-table-row-height);
 
         .yc-skeleton {
-            height: var(--yc-text-body2-line-height);
+            height: var(--yc-text-body-2-line-height);
         }
     }
 

package/dist/components/TabletsViewer/TabletsViewer.scss

@@ -17,7 +17,7 @@
         min-width: 60px;
         margin-right: 20px;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         line-height: 18px;
         white-space: nowrap;
         text-transform: capitalize;
@@ -33,7 +33,7 @@
         margin: 0;
         margin-bottom: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: bold;
         line-height: 20px;
     }

package/dist/containers/App/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 
+import {i18n as YDBComponentsI18N} from 'ydb-ui-components/build/components/i18n';
 import {I18N, i18n} from '../../utils/i18n';
 
 import ContentWrapper, {Content} from './Content';
@@ -25,7 +26,7 @@ class App extends React.Component {
     constructor(props) {
         super(props);
         i18n.setLang(I18N.LANGS.en);
-        I18N.setDefaultLang(I18N.LANGS.en); // for the peer dependency ydb-ui-components, should match the language above
+        YDBComponentsI18N.setLang(I18N.LANGS.en);
     }
 
     componentDidMount() {

package/dist/containers/App/App.scss

@@ -3,9 +3,15 @@
 @import './NodesTable';
 
 * {
+    // FIXME: this is an overkill, potentially could break external components, needs refactoring
     box-sizing: border-box;
 }
 
+.yc-select-popup__tick-icon {
+    // this is a local fix, remove after the refactoring
+    box-sizing: content-box;
+}
+
 html,
 body,
 #root {

package/dist/containers/App/TipPopup/TipPopup.js

@@ -54,7 +54,7 @@ function TipPopup({dbChangePopupVisibility, dataAttribute, initialIsPopupVisible
                 <div className={b('title')}>{tipData.title}</div>
                 <div className={b('content')}>{tipData.description}</div>
                 <div className={b('cross-icon-wrapper')}>
-                    <Button view="clear" onClick={onClosePopupClick}>
+                    <Button view="flat-secondary" onClick={onClosePopupClick}>
                         <Icon data={closeIcon} size={10} className={b('cross-icon')} />
                     </Button>
                 </div>

package/dist/containers/AsideNavigation/AsideNavigation.scss

@@ -6,7 +6,7 @@
 
         margin-left: 16px;
 
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
     }
     &__user-info-wrapper {
         display: flex;

package/dist/containers/Authentication/Authentication.scss

@@ -28,8 +28,8 @@
 
         width: 100%;
 
-        font-size: var(--yc-text-body-font-size);
-        line-height: var(--yc-text-header-line-height);
+        font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-header-1-line-height);
     }
 
     &__logo {

package/dist/containers/Header/Header.scss

@@ -15,14 +15,14 @@
     @include body2-typography;
 
     &__cluster-info-title {
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         text-transform: uppercase;
 
         color: var(--yc-color-text-secondary);
     }
 
     &__cluster-info-name {
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
     }
 

package/dist/containers/Header/Host/Host.scss

@@ -13,8 +13,8 @@
 
         margin-right: 15px;
 
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
     }
     &__info {
         display: flex;
@@ -32,8 +32,8 @@
     &__label {
         margin-right: 10px;
 
-        font-size: var(--yc-text-body-font-size);
-        line-height: var(--yc-text-body-line-height);
+        font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-body-1-line-height);
 
         color: var(--yc-color-text-hint);
 
@@ -42,8 +42,8 @@
         }
     }
     &__value {
-        font-size: var(--yc-text-body-font-size);
-        line-height: var(--yc-text-body-line-height);
+        font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-body-1-line-height);
 
         color: var(--yc-color-text-primary);
     }

package/dist/containers/Heatmap/Heatmap.js

@@ -8,8 +8,7 @@ import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 import {COLORS_RANGE_SIZE, getColorRange, getColorIndex, getCurrentMetricLimits} from './util';
 import {formatNumber} from '../../utils';
 
-import {Loader, Checkbox} from '@yandex-cloud/uikit';
-import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
+import {Loader, Checkbox, Select} from '@yandex-cloud/uikit';
 import {HeatmapCanvas} from './HeatmapCanvas/HeatmapCanvas';
 import {Histogram} from './Histogram/Histogram';
 import {AutoFetcher} from '../../utils/autofetcher';

package/dist/containers/Heatmap/Heatmap.scss

@@ -49,9 +49,9 @@
     &__label {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
 
         &_overall {

package/dist/containers/Node/Node.scss

@@ -20,7 +20,6 @@
 
     &__tabs {
         padding: 16px 20px 0;
-        @include body2-typography();
     }
 
     &__tab {

package/dist/containers/Node/Node.tsx

@@ -98,6 +98,7 @@ function Node(props: NodeProps) {
         return (
             <div className={b('tabs')}>
                 <Tabs
+                    size="l"
                     items={nodeTabs}
                     activeTab={activeTabVerified}
                     wrapTo={({id}, node) => (

package/dist/containers/Node/NodeStructure/NodeStructure.scss

@@ -22,7 +22,7 @@
 
         width: 573px;
         margin-bottom: 8px;
-        padding-left: 20px;
+        padding: 0 10px 0 20px;
 
         border: 1px solid var(--yc-color-line-generic);
         border-radius: 5px;
@@ -137,9 +137,9 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 }

package/dist/containers/Node/NodeStructure/Pdisk.tsx

@@ -2,7 +2,7 @@ import {useState} from 'react';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 
-import {ArrowToggle, Button, Tooltip} from '@yandex-cloud/uikit';
+import {ArrowToggle, Button, Popover} from '@yandex-cloud/uikit';
 
 import DataTable, {Column, Settings} from '@yandex-cloud/react-data-table';
 
@@ -126,20 +126,20 @@ function getColumns({
             width: 70,
             render: ({row}) => {
                 return (
-                    <Tooltip
+                    <Popover
                         placement={['right']}
                         content={<Vdisk {...row} />}
                         contentClassName={b('vdisk-details')}
                     >
                         <Button
-                            view="clear"
+                            view="flat-secondary"
                             className={b('vdisk-details-button', {
                                 selected: row.id === selectedVdiskId,
                             })}
                         >
                             <Icon name="information" viewBox="0 0 512 512" height={16} width={16} />
                         </Button>
-                    </Tooltip>
+                    </Popover>
                 );
             },
             sortable: false,
@@ -213,7 +213,7 @@ export function PDisk(props: PDiskProps) {
                                 className={b('external-button')}
                                 href={pDiskInternalViewerLink}
                                 target="_blank"
-                                view="clear"
+                                view="flat-secondary"
                             >
                                 <Icon name="external" />
                             </Button>
@@ -289,7 +289,7 @@ export function PDisk(props: PDiskProps) {
                     <span>{data.Path}</span>
                     <EntityStatus status={data.Device} name={`${data.NodeId}-${data.PDiskId}`} />
                 </div>
-                <Button onClick={unfolded ? onClosePDiskDetails : onOpenPDiskDetails} view="clear">
+                <Button onClick={unfolded ? onClosePDiskDetails : onOpenPDiskDetails} view="flat-secondary">
                     <ArrowToggle direction={unfolded ? 'top' : 'bottom'} />
                 </Button>
             </div>

package/dist/containers/Pdisk/Pdisk.scss

@@ -20,9 +20,9 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 

package/dist/containers/Pool/Pool.scss

@@ -10,9 +10,9 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
 
         &_groups {
@@ -30,6 +30,6 @@
     &__breadcrumbs {
         padding: 20px 0;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
     }
 }

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -5,7 +5,7 @@
     display: inline-block;
 
     width: 100%;
-    height: var(--yc-text-body2-line-height);
+    height: var(--yc-text-body-2-line-height);
 
     border: 1px solid var(--yc-color-infographics-misc-medium);
     border-radius: 2px;
@@ -67,7 +67,7 @@
         position: absolute;
         z-index: 2;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         line-height: inherit;
 
         color: inherit;

package/dist/containers/Storage/Storage.scss

@@ -16,12 +16,12 @@
         overflow: auto;
         flex-grow: 1;
 
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
 
         .yc-tooltip {
             // stylelint-disable-next-line declaration-no-important
-            height: var(--yc-text-body2-line-height) !important;
+            height: var(--yc-text-body-2-line-height) !important;
         }
 
         table {

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
-import {Tooltip, TooltipBehavior} from '@yandex-cloud/uikit';
+import {Popover, PopoverBehavior} from '@yandex-cloud/uikit';
 
 import Vdisk from '../Vdisk/Vdisk';
 //@ts-ignore
@@ -90,15 +90,15 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
                 return (
                     <div className={b('pool-name-wrapper')}>
                         {splitted && (
-                            <Tooltip
+                            <Popover
                                 content={<span className={b('tooltip')}>{value as string}</span>}
                                 placement={['right']}
-                                behavior={TooltipBehavior.Immediate}
+                                behavior={PopoverBehavior.Immediate}
                             >
                                 <span className={b('pool-name')}>
                                     {splitted[splitted.length - 1]}
                                 </span>
-                            </Tooltip>
+                            </Popover>
                         )}
                     </div>
                 );

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
-import {Tooltip, TooltipBehavior} from '@yandex-cloud/uikit';
+import {Popover, PopoverBehavior} from '@yandex-cloud/uikit';
 //@ts-ignore
 import {VisibleEntities} from '../../../store/reducers/storage';
 import Pdisk from '../Pdisk/Pdisk';
@@ -71,13 +71,13 @@ function StorageNodes({data, tableSettings, visibleEntities}: StorageGroupsProps
             render: ({value}) => {
                 return (
                     <div className={b('tooltip-wrapper')}>
-                        <Tooltip
+                        <Popover
                             content={<span className={b('tooltip')}>{value as string}</span>}
                             placement={['right']}
-                            behavior={TooltipBehavior.Immediate}
+                            behavior={PopoverBehavior.Immediate}
                         >
                             <span className={b('pool-name')}>{value as string}</span>
-                        </Tooltip>
+                        </Popover>
                     </div>
                 );
             },

package/dist/containers/Tablet/Tablet.scss

@@ -46,9 +46,9 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 
@@ -84,9 +84,9 @@
     &__top-label {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 }

package/dist/containers/Tablets/Tablets.js

@@ -12,8 +12,7 @@ import {
 import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 
 import Tablet from '../../components/Tablet/Tablet';
-import {Loader} from '@yandex-cloud/uikit';
-import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
+import {Loader, Select} from '@yandex-cloud/uikit';
 import ReactList from 'react-list';
 import {AutoFetcher} from '../../utils/autofetcher';
 

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -5,8 +5,7 @@ import cn from 'bem-cn-lite';
 import qs from 'qs';
 import _ from 'lodash';
 
-import {Loader} from '@yandex-cloud/uikit';
-import {Select} from '@yandex-cloud/uikit/build/esm/components/unstable/Select';
+import {Loader, Select} from '@yandex-cloud/uikit';
 import ReactList from 'react-list';
 
 import Tablet from '../../components/Tablet/Tablet';

package/dist/containers/TabletsFilters/TabletsFilters.scss

@@ -10,8 +10,8 @@
         display: flex;
         flex-direction: column;
 
-        font-size: var(--yc-text-body-font-size);
-        line-height: var(--yc-text-body-line-height);
+        font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-body-1-line-height);
     }
 
     &__node-meta {

package/dist/containers/Tenant/Acl/Acl.scss

@@ -38,8 +38,8 @@
     }
 
     &__text {
-        font-size: var(--yc-text-body-font-size);
-        line-height: var(--yc-text-body-line-height);
+        font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-body-1-line-height);
 
         color: var(--yc-color-text-primary);
 

package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -164,6 +164,7 @@ function Diagnostics(props: DiagnosticsProps) {
             <div className={b('header-wrapper')}>
                 <div className={b('tabs')}>
                     <Tabs
+                        size="l"
                         items={pages}
                         activeTab={activeTab as string}
                         wrapTo={({id}, node) => {

package/dist/containers/Tenant/Diagnostics/Network/Network.scss

@@ -9,8 +9,8 @@
     max-width: 1305px;
     height: 100%;
 
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
 
     &__nodes-row {
         display: flex;
@@ -74,8 +74,8 @@
     &__nodes-title {
         margin: 0 0 15px;
 
-        font-size: var(--yc-text-body2-font-size);
-        line-height: var(--yc-text-body2-line-height);
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
 
         color: var(--yc-color-text-secondary);
         border-bottom: 1px solid var(--yc-color-base-generic-accent);
@@ -90,9 +90,9 @@
     &__title {
         margin: 20px 0;
 
-        font-size: var(--yc-text-body-font-size);
+        font-size: var(--yc-text-body-1-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body-line-height);
+        line-height: var(--yc-text-body-1-line-height);
     }
 
     &__checkbox-wrapper {

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss

@@ -46,9 +46,9 @@
     }
 
     &__collapse-title {
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         //text-transform: uppercase;
     }
 
@@ -75,8 +75,8 @@
     &__section-title {
         margin-bottom: 20px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
     }
 }

package/dist/containers/Tenant/Diagnostics/TopQueries/TopQueries.scss

@@ -22,8 +22,8 @@
     }
 
     &__text {
-        font-size: var(--yc-text-body-font-size);
-        line-height: var(--yc-text-body-line-height);
+        font-size: var(--yc-text-body-1-font-size);
+        line-height: var(--yc-text-body-1-line-height);
 
         color: var(--yc-color-text-primary);
 

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.scss

@@ -16,23 +16,22 @@
         padding: 13px 20px 0;
 
         box-shadow: inset 0 -1px 0 0 var(--yc-color-line-generic);
-        @include body3-typography();
         .yc-tabs {
             box-shadow: unset;
         }
     }
     &__tab {
         text-decoration: none;
-    }
 
-    &__loader {
-        display: flex;
+        // fix for bug in uikit, gap is set for yc-tabs__item:not(:last-child),
+        // it doesn't work for wrapped items
+        // feel free to remove if the bug is fixed
+        &:not(:last-child) {
+            margin-right: var(--yc-tabs-gap);
+        }
     }
 
-    &__tab-label {
+    &__loader {
         display: flex;
-        gap: 5px;
-
-        align-items: center;
     }
 }

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -38,21 +38,11 @@ function ObjectGeneral(props: ObjectGeneralProps) {
     const {name: tenantName, general: generalTab} = queryParams;
 
     const renderTabs = () => {
-        const pages = TENANT_GENERAL_TABS.map((page) => {
-            return {
-                ...page,
-                title: (
-                    <div className={b('tab-label')}>
-                        {page.icon}
-                        {page.title}
-                    </div>
-                ),
-            };
-        });
         return (
             <div className={b('tabs')}>
                 <Tabs
-                    items={pages}
+                    size="xl"
+                    items={TENANT_GENERAL_TABS}
                     activeTab={generalTab as string}
                     wrapTo={({id}, node) => {
                         const path = createHref(routes.tenant, undefined, {

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -6,7 +6,7 @@ import {useHistory, useLocation} from 'react-router';
 import qs from 'qs';
 import _ from 'lodash';
 
-import {Button, HelpTooltip, Loader, Tabs} from '@yandex-cloud/uikit';
+import {Button, HelpPopover, Loader, Tabs} from '@yandex-cloud/uikit';
 
 import SplitPane from '../../../components/SplitPane';
 import {SchemaTree} from '../Schema/SchemaTree/SchemaTree';
@@ -127,6 +127,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
         return (
             <div className={b('tabs')}>
                 <Tabs
+                    size="l"
                     items={tabsItems}
                     activeTab={infoTab as string}
                     wrapTo={({id}, node) => {
@@ -260,7 +261,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
             <div className={b('entity-type')}>{type}</div>
         ) : (
             <div className={b('entity-type', {error: true})}>
-                <HelpTooltip content={message} offset={{left: 0}} />
+                <HelpPopover content={message} offset={{left: 0}} />
             </div>
         );
     };

package/dist/containers/Tenant/QueryEditor/SaveQuery/SaveQuery.scss

@@ -4,7 +4,7 @@
         align-items: flex-start;
 
         & + & {
-            margin-top: var(--yc-text-body-line-height);
+            margin-top: var(--yc-text-body-1-line-height);
         }
     }
     &__field-title {

package/dist/containers/Tenant/Tenant.scss

@@ -3,8 +3,8 @@
 .tenant-page {
     overflow: hidden;
 
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
     @include flex-container();
 
     .yc-tabs {

package/dist/containers/Vdisk/Vdisk.scss

@@ -20,9 +20,9 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 

package/dist/containers/VdiskPdiskNode/VdiskPdiskNode.scss

@@ -27,9 +27,9 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body2-font-size);
+        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body2-line-height);
+        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 

package/dist/styles/mixins.scss

@@ -16,25 +16,25 @@
 }
 
 @mixin body-typography() {
-    font-size: var(--yc-text-body-font-size);
-    line-height: var(--yc-text-body-line-height);
+    font-size: var(--yc-text-body-1-font-size);
+    line-height: var(--yc-text-body-1-line-height);
 }
 @mixin body2-typography() {
-    font-size: var(--yc-text-body2-font-size);
-    line-height: var(--yc-text-body2-line-height);
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
 }
 @mixin body3-typography() {
-    font-size: var(--yc-text-body3-font-size);
-    line-height: var(--yc-text-body3-line-height);
+    font-size: var(--yc-text-body-3-font-size);
+    line-height: var(--yc-text-body-3-line-height);
 }
 @mixin lead-typography() {
-    font-size: var(--yc-text-lead-font-size);
-    line-height: var(--yc-text-lead-line-height);
+    font-size: var(--yc-text-subheader-3-font-size);
+    line-height: var(--yc-text-subheader-3-line-height);
 }
 
 @mixin title-typography() {
-    font-size: var(--yc-text-title-font-size);
-    line-height: var(--yc-text-title-line-height);
+    font-size: var(--yc-text-header-2-font-size);
+    line-height: var(--yc-text-header-2-line-height);
 }
 
 @mixin sticky-top {
@@ -188,8 +188,8 @@
 @mixin json-tree-styles {
     // stylelint-disable
     font-family: var(--yc-font-family-monospace) !important;
-    font-size: var(--yc-text-code-font-size) !important;
-    line-height: var(--yc-text-code-line-height) !important;
+    font-size: var(--yc-text-code-1-font-size) !important;
+    line-height: var(--yc-text-code-1-line-height) !important;
     // stylelint-enable
 
     .json-inspector__leaf_composite:before {
@@ -239,7 +239,7 @@
             margin: 0;
             padding: 0;
 
-            font-family: var(--yc-font-family);
+            font-family: var(--yc-text-body-font-family);
             font-size: 13px;
             vertical-align: top;
 

package/dist/utils/getNodesColumns.js

@@ -1,7 +1,6 @@
-import React from 'react';
 import cn from 'bem-cn-lite';
 import DataTable from '@yandex-cloud/react-data-table';
-import {Button, Tooltip} from '@yandex-cloud/uikit';
+import {Button, Popover} from '@yandex-cloud/uikit';
 
 import Icon from '../components/Icon/Icon';
 import EntityStatus from '../components/EntityStatus/EntityStatus';
@@ -62,7 +61,7 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
             width: '200px',
             align: DataTable.LEFT,
             render: ({value}) => {
-                return <Tooltip content={value}>{value}</Tooltip>;
+                return <Popover content={value}>{value}</Popover>;
             },
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "files": [
     "dist"
   ],
@@ -40,7 +40,7 @@
     "reselect": "4.0.0",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "1.2.3"
+    "ydb-ui-components": "2.0.1"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -93,7 +93,7 @@
     "@yandex-cloud/prettier-config": "^1.0.0",
     "@yandex-cloud/stylelint-config": "^1.1.0",
     "@yandex-cloud/tsconfig": "^1.0.0",
-    "@yandex-cloud/uikit": "^1.7.0",
+    "@yandex-cloud/uikit": "^2.4.0",
     "copyfiles": "^2.4.1",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^7.0.4",
@@ -107,6 +107,7 @@
     "typescript": "^4.5.5"
   },
   "peerDependencies": {
-    "@yandex-cloud/browserslist-config": "^1.0.1"
+    "@yandex-cloud/browserslist-config": "^1.0.1",
+    "@yandex-cloud/uikit": "^2.4.0"
   }
 }