ydb-embedded-ui 4.25.0 → 4.27.0

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -25,20 +25,18 @@
     }
 
     &__title .entity-status__name {
-        font-size: var(--yc-text-header-1-font-size);
-        font-weight: var(--yc-text-header-font-weight);
-        line-height: var(--yc-text-header-1-line-height);
+        font-weight: var(--g-text-header-font-weight);
+        @include header-1-typography();
     }
 
     &__title-skeleton {
         width: 20%;
         min-width: 200px;
-        height: var(--yc-text-header-1-line-height);
+        height: var(--g-text-header-1-line-height);
     }
 
     &__error {
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
+        @include body-2-typography();
     }
 
     &__info {

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -9,7 +9,7 @@ import {Tags} from '../../../components/Tags';
 import {Tablet} from '../../../components/Tablet';
 import {ResponseError} from '../../../components/Errors/ResponseError';
 import {ExternalLinkWithIcon} from '../../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
-import {IconWrapper as Icon} from '../../../components/Icon/Icon';
+import {Icon} from '../../../components/Icon/Icon';
 import {ContentWithPopup} from '../../../components/ContentWithPopup/ContentWithPopup';
 
 import type {IResponseError} from '../../../types/api/error';

package/dist/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.scss

@@ -9,10 +9,10 @@
         display: flex;
         align-items: flex-start;
 
-        min-height: var(--yc-text-body-2-font-size);
+        min-height: var(--g-text-body-2-font-size);
 
         .yc-skeleton {
-            min-height: var(--yc-text-body-2-font-size);
+            min-height: var(--g-text-body-2-font-size);
         }
     }
 
@@ -31,7 +31,7 @@
             width: 100px;
             margin: 0 2px;
 
-            border-bottom: 1px dotted var(--yc-color-text-secondary);
+            border-bottom: 1px dotted var(--g-color-text-secondary);
         }
     }
 

package/dist/containers/Cluster/VersionsBar/VersionsBar.tsx

@@ -15,7 +15,7 @@ interface VersionsBarProps {
 export const VersionsBar = ({versionsValues = []}: VersionsBarProps) => {
     return (
         <div className={b()}>
-            <Progress value={100} stack={versionsValues} view="thin" />
+            <Progress value={100} stack={versionsValues} size="s" />
             <div className={b('versions')}>
                 {versionsValues.map((item, index) => (
                     <div

package/dist/containers/Header/Header.scss

@@ -8,7 +8,7 @@
 
     padding: 0 20px 0 12px;
 
-    border-bottom: 1px solid var(--yc-color-line-generic);
+    border-bottom: 1px solid var(--g-color-line-generic);
 
     &__breadcrumb {
         display: flex;

package/dist/containers/Heatmap/Heatmap.scss

@@ -20,9 +20,7 @@
     &__limits-title {
         margin-right: 5px;
 
-        color: var(--yc-color-text-secondary);
-    }
-    &__limits-value {
+        color: var(--g-color-text-secondary);
     }
 
     &__row {
@@ -42,11 +40,11 @@
     &__label {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
 
+        @include body-2-typography();
+
         &_overall {
             margin-right: 15px;
         }

package/dist/containers/Heatmap/Histogram/Histogram.scss

@@ -13,22 +13,22 @@
         margin-top: 30px;
         margin-left: 50px;
 
-        border-bottom: 1px solid var(--yc-color-base-generic);
-        border-left: 1px solid var(--yc-color-base-generic);
+        border-bottom: 1px solid var(--g-color-base-generic);
+        border-left: 1px solid var(--g-color-base-generic);
     }
     &__x-min {
         position: absolute;
         bottom: -25px;
         left: -3px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__x-max {
         position: absolute;
         right: 0;
         bottom: -25px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__y-min {
         position: absolute;
@@ -39,7 +39,7 @@
 
         text-align: right;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__y-max {
         position: absolute;
@@ -50,7 +50,7 @@
 
         text-align: right;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__item {
         width: 1.5%;

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

@@ -8,7 +8,7 @@
     flex-direction: column;
     flex-shrink: 0;
     @include flex-container();
-    @include body2-typography();
+    @include body-2-typography();
 
     &__pdisk {
         display: flex;
@@ -18,7 +18,7 @@
         margin-bottom: 8px;
         padding: 0 10px 0 20px;
 
-        border: 1px solid var(--yc-color-line-generic);
+        border: 1px solid var(--g-color-line-generic);
         border-radius: 5px;
     }
 
@@ -54,7 +54,7 @@
         &-label {
             font-weight: 400;
 
-            color: var(--yc-color-text-secondary);
+            color: var(--g-color-text-secondary);
         }
     }
 
@@ -79,7 +79,7 @@
     &__link {
         text-decoration: none;
 
-        color: var(--yc-color-base-special);
+        color: var(--g-color-base-brand);
     }
 
     &__vdisks-header {
@@ -94,6 +94,7 @@
         overflow: auto;
 
         min-width: 200px;
+        max-width: unset;
         max-height: 90vh;
 
         .vdisk-pdisk-node__column {
@@ -109,13 +110,13 @@
         align-items: center;
 
         &_selected {
-            color: var(--yc-color-text-info);
+            color: var(--g-color-text-info);
         }
     }
 
     &__vdisk-details-button {
         &_selected {
-            color: var(--yc-color-text-info);
+            color: var(--g-color-text-info);
         }
     }
 
@@ -127,10 +128,6 @@
 
         transform: translateY(-1px);
 
-        .yc-button__text {
-            margin: 0 4px;
-        }
-
         &_hidden {
             visibility: hidden;
         }
@@ -160,15 +157,15 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
+
+        @include body-2-typography();
     }
 }
 
 @keyframes onSelectedVdiskAnimation {
     0% {
-        background-color: var(--yc-color-base-info-hover);
+        background-color: var(--g-color-base-info-light-hover);
     }
 }

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

@@ -143,7 +143,7 @@ function getColumns({
                     <Popover
                         placement={['right']}
                         content={<Vdisk {...row} />}
-                        contentClassName={b('vdisk-details')}
+                        tooltipContentClassName={b('vdisk-details')}
                     >
                         <Button
                             view="flat-secondary"

package/dist/containers/ReduxTooltip/ReduxTooltip.js

@@ -43,7 +43,7 @@ function ReduxTooltip(props) {
                 <Popup
                     open={visible}
                     placement={['top', 'bottom', 'left', 'right']}
-                    className={popupClassName}
+                    contentClassName={popupClassName}
                     anchorRef={fakeAnchor}
                     onOutsideClick={hideTooltip}
                 >

package/dist/containers/ReduxTooltip/ReduxTooltip.scss

@@ -6,8 +6,6 @@
     animation: none !important;
 }
 
-.pool-tooltip,
-.tablet-tooltip,
 .node-tootltip,
 .tabletsOverall-tooltip,
 .histogram-tooltip {
@@ -16,7 +14,7 @@
     &__label {
         padding-right: 15px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 }
 
@@ -54,18 +52,3 @@
 
     word-break: break-word;
 }
-
-.tablet-tooltip {
-    padding: 10px;
-    &__label {
-        padding-right: 15px;
-
-        color: var(--yc-color-text-secondary);
-    }
-
-    &__value {
-        &_blue {
-            color: var(--yc-color-base-special);
-        }
-    }
-}

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

@@ -10,14 +10,14 @@
     display: block;
 
     min-width: 50px;
-    height: var(--yc-text-body-3-line-height);
+    height: var(--g-text-body-3-line-height);
 
     text-align: center;
 
-    color: var(--yc-color-text-primary);
-    border: $border-width solid var(--yc-color-infographics-misc-heavy);
+    color: var(--g-color-text-primary);
+    border: $border-width solid var(--g-color-base-misc-heavy);
     border-radius: $outer-border-radius;
-    background-color: var(--yc-color-infographics-misc-light);
+    background-color: var(--g-color-base-misc-light);
 
     &_compact {
         min-width: 0;
@@ -31,16 +31,16 @@
     }
 
     #{$block}__filled {
-        background-color: var(--yc-color-infographics-misc-medium);
+        background-color: var(--g-color-base-misc-medium);
     }
 
     &_green {
-        border-color: var(--yc-color-infographics-positive-heavy);
-        background-color: var(--yc-color-infographics-positive-light);
+        border-color: var(--g-color-base-positive-heavy);
+        background-color: var(--g-color-base-positive-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-positive-medium);
+            background-color: var(--g-color-base-positive-medium);
 
-            .yc-root_theme_dark & {
+            .g-root_theme_dark & {
                 // the common medium green is too bright for this case
                 background-color: rgb(124, 227, 121, 0.4);
             }
@@ -48,33 +48,33 @@
     }
 
     &_blue {
-        border-color: var(--yc-color-infographics-info-heavy);
-        background-color: var(--yc-color-infographics-info-light);
+        border-color: var(--g-color-base-info-heavy);
+        background-color: var(--g-color-base-info-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-info-medium);
+            background-color: var(--g-color-base-info-medium);
         }
     }
 
     &_yellow {
-        border-color: var(--yc-color-infographics-warning-heavy);
-        background-color: var(--yc-color-infographics-yellow-light);
+        border-color: var(--g-color-base-warning-heavy);
+        background-color: var(--g-color-base-yellow-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-yellow-medium);
+            background-color: var(--g-color-base-yellow-medium);
         }
     }
 
     &_orange {
-        border-color: var(--yc-color-base-warning-orange);
-        background-color: var(--yc-color-infographics-warning-light);
+        border-color: var(--ydb-color-status-orange);
+        background-color: var(--g-color-base-warning-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-warning-medium);
+            background-color: var(--g-color-base-warning-medium);
         }
     }
     &_red {
-        border-color: var(--yc-color-infographics-danger-heavy);
-        background-color: var(--yc-color-infographics-danger-light);
+        border-color: var(--g-color-base-danger-heavy);
+        background-color: var(--g-color-base-danger-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-danger-medium);
+            background-color: var(--g-color-base-danger-medium);
         }
     }
 
@@ -98,9 +98,9 @@
         position: relative;
         z-index: 2;
 
-        font-size: var(--yc-text-body-1-font-size);
+        font-size: var(--g-text-body-1-font-size);
         // bar height minus borders
-        line-height: calc(var(--yc-text-body-3-line-height) - #{$border-width * 2});
+        line-height: calc(var(--g-text-body-3-line-height) - #{$border-width * 2});
 
         color: inherit;
     }

package/dist/containers/Storage/PDisk/PDisk.scss

@@ -25,7 +25,7 @@
         flex-shrink: 0;
 
         .stack__layer {
-            background: var(--yc-color-base-background);
+            background: var(--g-color-base-background);
 
             .data-table__row:hover & {
                 background: var(--ydb-data-table-color-hover);
@@ -45,9 +45,9 @@
         top: 0;
         right: 4px;
 
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-3-line-height);
+        font-size: var(--g-text-body-1-font-size);
+        line-height: var(--g-text-body-3-line-height);
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 }

package/dist/containers/Storage/PDiskPopup/PDiskPopup.tsx

@@ -66,7 +66,7 @@ export const PDiskPopup = ({data, nodes, ...props}: PDiskPopupProps) => {
 
     return (
         <Popup
-            className={b()}
+            contentClassName={b()}
             placement={['top', 'bottom']}
             // bigger offset for easier switching to neighbour nodes
             // matches the default offset for popup with arrow out of a sense of beauty

package/dist/containers/Storage/Storage.scss

@@ -8,7 +8,7 @@
     &__table {
         .yc-tooltip {
             // stylelint-disable-next-line declaration-no-important
-            height: var(--yc-text-body-2-line-height) !important;
+            height: var(--g-text-body-2-line-height) !important;
         }
 
         table {

package/dist/containers/Storage/StorageGroups/StorageGroups.scss

@@ -20,7 +20,7 @@
         }
 
         .stack__layer {
-            background: var(--yc-color-base-background);
+            background: var(--g-color-base-background);
 
             .data-table__row:hover & {
                 background: var(--ydb-data-table-color-hover);

package/dist/containers/Storage/UsageFilter/UsageFilter.scss

@@ -1,3 +1,5 @@
+@import '../../../styles/mixins.scss';
+
 .usage-filter {
     min-width: 100px;
 
@@ -5,10 +7,9 @@
         flex-grow: 1;
 
         &-title {
-            height: var(--yc-text-body-1-line-height);
+            height: var(--g-text-body-1-line-height);
 
-            font-size: var(--yc-text-body-1-font-size);
-            line-height: var(--yc-text-body-1-line-height);
+            @include body-1-typography();
         }
 
         &-meta {
@@ -17,8 +18,8 @@
 
             padding: 0 5px;
 
-            font-size: var(--yc-text-caption-2-font-size);
-            line-height: var(--yc-text-caption-2-line-height);
+            font-size: var(--g-text-caption-2-font-size);
+            line-height: var(--g-text-caption-2-line-height);
 
             border-radius: 3px;
         }
@@ -31,7 +32,7 @@
             left: 0;
 
             border-radius: 3px;
-            background-color: var(--yc-color-infographics-info-medium);
+            background-color: var(--g-color-base-info-medium);
         }
     }
 }

package/dist/containers/Storage/VDiskPopup/VDiskPopup.scss

@@ -5,7 +5,7 @@
         margin-top: 8px;
         padding-top: 8px;
 
-        border-top: 1px solid var(--yc-color-line-generic);
+        border-top: 1px solid var(--g-color-line-generic);
     }
 
     &__donor-label {

package/dist/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -147,7 +147,7 @@ export const VDiskPopup = ({data, nodes, ...props}: VDiskPopupProps) => {
 
     return (
         <Popup
-            className={b()}
+            contentClassName={b()}
             placement={['top', 'bottom']}
             // bigger offset for easier switching to neighbour nodes
             // matches the default offset for popup with arrow out of a sense of beauty

package/dist/containers/Tablet/Tablet.scss

@@ -20,7 +20,7 @@
     }
     &__history-title {
         margin-bottom: 15px;
-        @include body2-typography();
+        @include body-2-typography();
     }
 
     &__placeholder {
@@ -46,10 +46,10 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
+
+        @include body-2-typography();
     }
 
     &__loader {
@@ -88,10 +88,10 @@
     &__top-label {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
+
+        @include body-2-typography();
     }
 
     &__host {

package/dist/containers/TabletsFilters/TabletsFilters.scss

@@ -8,8 +8,7 @@
     &__node {
         overflow: hidden;
 
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-1-line-height);
+        @include body-1-typography();
     }
 
     &__node-meta {
@@ -18,7 +17,7 @@
         white-space: nowrap;
         text-overflow: ellipsis;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 
     &__items {

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

@@ -23,20 +23,6 @@
 
         padding-bottom: 16px;
 
-        background-color: var(--yc-color-base-background);
-        .yc-staff-card {
-            display: inline-block;
-        }
-    }
-
-    &__text {
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-1-line-height);
-
-        color: var(--yc-color-text-primary);
-
-        &::first-letter {
-            color: var(--yc-color-text-danger);
-        }
+        background-color: var(--g-color-base-background);
     }
 }

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

@@ -16,10 +16,6 @@
         @include search();
     }
 
-    &__table-settings .yc-icon {
-        width: 20px;
-    }
-
     &__table-wrapper {
         overflow: auto;
         @include flex-container();

package/dist/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.scss

@@ -1,6 +1,7 @@
+@import '../../../../../styles/mixins.scss';
+
 .ydb-diagnostics-consumers-topic-stats {
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    @include body-2-typography();
 
     &__wrapper {
         display: flex;
@@ -8,7 +9,7 @@
 
         padding-left: 16px;
 
-        border-left: 1px solid var(--yc-color-line-generic);
+        border-left: 1px solid var(--g-color-line-generic);
     }
 
     &__item {
@@ -20,7 +21,7 @@
     &__label {
         margin-bottom: 4px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__value {
         display: flex;

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

@@ -23,11 +23,5 @@
         position: absolute;
         top: 23px;
         right: 13px;
-
-        & .yc-button__text {
-            display: flex;
-
-            margin: 0 4px;
-        }
     }
 }

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

@@ -8,7 +8,7 @@
     &__header-wrapper {
         padding: 13px 20px 16px;
 
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
     }
 
     &__tabs {
@@ -16,7 +16,7 @@
         justify-content: space-between;
         align-items: center;
 
-        box-shadow: inset 0 -1px 0 0 var(--yc-color-line-generic);
+        box-shadow: inset 0 -1px 0 0 var(--g-color-line-generic);
         & .yc-tabs_direction_horizontal {
             box-shadow: unset;
         }

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

@@ -9,7 +9,7 @@
 
     max-height: 100%;
 
-    background-color: var(--yc-color-base-background);
+    background-color: var(--g-color-base-background);
 
     &__table-content {
         overflow: auto;
@@ -28,7 +28,7 @@
         width: 100%;
         padding: 10px 0;
 
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
     }
     &__loader {
         display: flex;