ydb-embedded-ui 4.25.0 → 4.26.0

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

@@ -17,7 +17,7 @@
     }
 
     &__select-option_empty {
-        color: var(--yc-color-text-hint);
+        color: var(--g-color-text-hint);
     }
 
     &__search {
@@ -30,10 +30,6 @@
         }
     }
 
-    &__table-settings .yc-icon {
-        width: 20px;
-    }
-
     &__table-wrapper {
         overflow: auto;
         @include flex-container();

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

@@ -169,7 +169,6 @@ export const PartitionsControls = ({
                 items={columnsToSelect}
                 showStatus
                 onUpdate={hadleTableColumnsSetupChange}
-                className={b('table-settings')}
             />
         </div>
     );

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

@@ -74,35 +74,35 @@
 
         &_good,
         &_green {
-            color: var(--yc-color-text-positive);
-            background-color: var(--yc-color-base-positive);
+            color: var(--g-color-text-positive);
+            background-color: var(--g-color-base-positive-light);
         }
         &_degraded,
         &_yellow {
-            color: var(--yc-color-text-warning);
-            background-color: var(--yc-color-base-warning);
+            color: var(--g-color-text-warning);
+            background-color: var(--g-color-base-warning-light);
         }
 
         &_blue {
-            color: var(--yc-color-text-info);
-            background-color: var(--yc-color-base-info);
+            color: var(--g-color-text-info);
+            background-color: var(--g-color-base-info-light);
         }
 
         &_emergency,
         &_red {
-            color: var(--yc-color-text-danger);
-            background-color: var(--yc-color-base-danger);
+            color: var(--g-color-text-danger);
+            background-color: var(--g-color-base-danger-light);
         }
         &_unspecified,
         &_gray,
         &_grey {
-            color: var(--yc-color-text-misc);
-            background-color: var(--yc-color-base-misc);
+            color: var(--g-color-text-misc);
+            background-color: var(--g-color-base-misc-light);
         }
         &_maintenance_required,
         &_orange {
-            color: var(--yc-color-text-warning-heavy);
-            background-color: var(--yc-color-infographics-warning-light);
+            color: var(--g-color-text-warning-heavy);
+            background-color: var(--g-color-base-warning-light);
         }
     }
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss

@@ -1,40 +1,5 @@
 @import '../../../../../../styles/mixins.scss';
 
-.indicator {
-    width: 12px;
-    height: 12px;
-    margin-right: 4px;
-
-    border-radius: 4px;
-
-    &_good,
-    &_green {
-        background-color: var(--yc-color-base-positive-heavy);
-    }
-    &_degraded,
-    &_yellow {
-        background-color: var(--yc-color-base-warning-heavy);
-    }
-
-    &_blue {
-        background-color: var(--yc-color-base-info-heavy);
-    }
-
-    &_emergency,
-    &_red {
-        background: var(--yc-color-base-danger-heavy);
-    }
-    &_unspecified,
-    &_gray,
-    &_grey {
-        background: var(--yc-color-text-complementary);
-    }
-    &_maintenance_required,
-    &_orange {
-        background: var(--yc-color-text-warning-heavy);
-    }
-}
-
 .issue-tree {
     display: flex;
 
@@ -54,7 +19,7 @@
         padding: 8px 20px;
 
         border-radius: 4px;
-        background: var(--yc-color-base-generic);
+        background: var(--g-color-base-generic);
     }
 
     &__inspector {

package/dist/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.scss

@@ -21,10 +21,10 @@
 
             cursor: pointer;
 
-            color: var(--yc-color-text-link);
+            color: var(--g-color-text-link);
 
             &:hover {
-                color: var(--yc-color-text-link-hover);
+                color: var(--g-color-text-link-hover);
             }
         }
         &_message {
@@ -45,6 +45,6 @@
     }
 
     &__field-label {
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 }

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

@@ -20,11 +20,11 @@
         flex-direction: column;
         align-items: center;
 
-        font-size: var(--yc-text-header-1-font-size);
-        line-height: var(--yc-text-header-1-line-height);
         text-align: center;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
+
+        @include header-1-typography();
     }
 
     &__progress {
@@ -35,18 +35,18 @@
     }
 
     &__resources {
-        font-size: var(--yc-text-body-1-font-size);
+        font-size: var(--g-text-body-1-font-size);
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 
     &_active {
         #{$b}__content {
-            color: var(--yc-color-text-complementary);
+            color: var(--g-color-text-complementary);
         }
 
         #{$b}__progress-bar-circle-bg {
-            stroke: var(--yc-color-base-float);
+            stroke: var(--g-color-base-float);
         }
     }
 }

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

@@ -43,9 +43,9 @@
     &__title {
         margin-bottom: 10px;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 700;
-        line-height: var(--yc-text-body-2-line-height);
+
+        @include body-2-typography();
     }
 
     &__table {

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

@@ -5,7 +5,7 @@
 
     height: 100%;
 
-    background-color: var(--yc-color-base-background);
+    background-color: var(--g-color-base-background);
 
     &__loader {
         display: flex;

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -29,7 +29,7 @@
         top: 19px; // centered relative to the heading
         right: 5px; // centered relative to the collapsed panel
 
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
         &_hidden {
             visibility: hidden;
         }
@@ -86,14 +86,10 @@
     &__info-controls {
         display: flex;
         gap: 4px;
-
-        .yc-button__text {
-            margin: 0 6px;
-        }
     }
 
     &__info-action-button {
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
         &_hidden {
             display: none;
         }
@@ -116,7 +112,7 @@
 
         padding: 12px 12px 10px;
 
-        border-bottom: 1px solid var(--yc-color-line-generic);
+        border-bottom: 1px solid var(--g-color-line-generic);
     }
 
     &__info-title {
@@ -144,7 +140,7 @@
         text-transform: lowercase;
 
         border-radius: 3px;
-        background-color: var(--yc-color-base-generic);
+        background-color: var(--g-color-base-generic);
 
         &_error {
             padding: 3px 0;

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

@@ -5,7 +5,8 @@ import {Link} from 'react-router-dom';
 import qs from 'qs';
 import cn from 'bem-cn-lite';
 
-import {Button, HelpPopover, Tabs} from '@gravity-ui/uikit';
+import {Button, Tabs} from '@gravity-ui/uikit';
+import {HelpPopover} from '@gravity-ui/components';
 
 import SplitPane from '../../../components/SplitPane';
 import CopyToClipboard from '../../../components/CopyToClipboard/CopyToClipboard';

package/dist/containers/Tenant/Query/ExecuteResult/ExecuteResult.scss

@@ -44,8 +44,8 @@
         height: 53px;
         padding: 12px 20px;
 
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        background-color: var(--yc-color-base-background);
+        border-bottom: 1px solid var(--g-color-line-generic);
+        background-color: var(--g-color-base-background);
     }
 
     &__controls-right {
@@ -57,9 +57,6 @@
     &__controls-left {
         display: flex;
         gap: 4px;
-        .yc-button__text {
-            margin: 0 6px;
-        }
     }
     &__inspector {
         max-width: calc(100% - 50px);
@@ -81,7 +78,7 @@
         height: 100%;
         margin: 20px;
 
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
         @include table-styles();
         table {
             width: 100% !important;

package/dist/containers/Tenant/Query/ExplainResult/ExplainResult.scss

@@ -22,8 +22,8 @@
         height: 53px;
         padding: 12px 20px;
 
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        background-color: var(--yc-color-base-background);
+        border-bottom: 1px solid var(--g-color-line-generic);
+        background-color: var(--g-color-base-background);
     }
     &__controls-right {
         display: flex;
@@ -34,9 +34,6 @@
     &__controls-left {
         display: flex;
         gap: 4px;
-        .yc-button__text {
-            margin: 0 6px;
-        }
     }
     &__explain-canvas-container {
         overflow-y: auto;

package/dist/containers/Tenant/Query/Issues/Issues.scss

@@ -12,7 +12,7 @@
 
         padding: 10px 0;
 
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
     }
 
     &__error-message-text {
@@ -48,7 +48,7 @@
 
         text-align: left;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 
     &__message {
@@ -57,9 +57,9 @@
         margin-right: auto;
         margin-left: 10px;
 
-        font-family: var(--yc-font-family-monospace);
-        font-size: var(--yc-text-code-2-font-size);
-        line-height: var(--yc-text-header-2-line-height);
+        font-family: var(--g-font-family-monospace);
+        font-size: var(--g-text-code-2-font-size);
+        line-height: var(--g-text-header-2-line-height);
     }
 
     &__message-text {
@@ -79,14 +79,11 @@
 
         font-size: 12px;
 
-        color: var(--yc-color-text-complementary);
+        color: var(--g-color-text-complementary);
     }
 
     &__arrow-toggle {
         margin-right: 5px;
-        .yc-button__text {
-            margin: 0 5px;
-        }
     }
 }
 
@@ -98,19 +95,19 @@
     white-space: nowrap;
 
     &_severity_fatal &__icon {
-        color: var(--yc-color-text-danger);
+        color: var(--g-color-text-danger);
     }
 
     &_severity_error &__icon {
-        color: var(--yc-color-text-danger);
+        color: var(--g-color-text-danger);
     }
 
     &_severity_warning &__icon {
-        color: var(--yc-color-text-warning);
+        color: var(--g-color-text-warning);
     }
 
     &_severity_info &__icon {
-        color: var(--yc-color-text-info);
+        color: var(--g-color-text-info);
     }
 
     &__title {
@@ -118,6 +115,6 @@
 
         text-transform: capitalize;
 
-        color: var(--yc-color-text-complementary);
+        color: var(--g-color-text-complementary);
     }
 }

package/dist/containers/Tenant/Query/Preview/Preview.scss

@@ -4,10 +4,6 @@
     height: 100%;
     @include query-data-table;
 
-    .yc-button__text {
-        margin: 0 6px;
-    }
-
     &__header {
         position: sticky;
         top: 0;
@@ -19,8 +15,8 @@
         height: 53px;
         padding: 0 20px;
 
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        background-color: var(--yc-color-base-background);
+        border-bottom: 1px solid var(--g-color-line-generic);
+        background-color: var(--g-color-base-background);
     }
 
     &__title {
@@ -30,7 +26,7 @@
     &__table-name {
         margin-left: 4px;
 
-        color: var(--yc-color-text-complementary);
+        color: var(--g-color-text-complementary);
     }
 
     &__controls-left {

package/dist/containers/Tenant/Query/QueryDuration/QueryDuration.scss

@@ -4,7 +4,7 @@
 
     margin-left: 10px;
 
-    color: var(--yc-color-text-complementary);
+    color: var(--g-color-text-complementary);
 
     &__item-with-popover {
         white-space: nowrap;

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

@@ -11,12 +11,6 @@
 
     @include query-data-table;
 
-    & .yc-button__text {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
     &__monaco {
         position: relative;
 
@@ -25,7 +19,7 @@
         width: 100%;
         height: 100%;
 
-        border: 1px solid var(--yc-color-line-generic);
+        border: 1px solid var(--g-color-line-generic);
     }
 
     &__monaco-wrapper {
@@ -40,12 +34,12 @@
         display: flex;
         flex-direction: column;
 
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
 
         &_top {
             padding: 0 16px;
 
-            border-bottom: 1px solid var(--yc-color-line-generic);
+            border-bottom: 1px solid var(--g-color-line-generic);
         }
     }
 }

package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.scss

@@ -14,15 +14,6 @@
         gap: 12px;
     }
 
-    &__run {
-        .yc-button__text {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 8px;
-        }
-    }
-
     &__mode-selector {
         $b: &;
 

package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx

@@ -92,19 +92,17 @@ export const QueryEditorControls = ({
     return (
         <div className={b()}>
             <div className={b('left')}>
-                <div className={b('run')}>
-                    <Button
-                        onClick={() => {
-                            onRunButtonClick(queryMode);
-                        }}
-                        disabled={disabled}
-                        loading={runIsLoading}
-                        view={runView}
-                    >
-                        <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
-                        {'Run'}
-                    </Button>
-                </div>
+                <Button
+                    onClick={() => {
+                        onRunButtonClick(queryMode);
+                    }}
+                    disabled={disabled}
+                    loading={runIsLoading}
+                    view={runView}
+                >
+                    <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
+                    {'Run'}
+                </Button>
                 <Button
                     onClick={() => {
                         onExplainButtonClick(queryMode);

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

@@ -4,7 +4,7 @@
         align-items: flex-start;
 
         & + & {
-            margin-top: var(--yc-text-body-1-line-height);
+            margin-top: var(--g-text-body-1-line-height);
         }
     }
     &__field-title {
@@ -18,7 +18,7 @@
             &::after {
                 content: '*';
 
-                color: var(--yc-color-text-danger);
+                color: var(--g-color-text-danger);
             }
         }
     }
@@ -32,7 +32,7 @@
 
         height: 17px;
 
-        color: var(--yc-color-text-danger);
+        color: var(--g-color-text-danger);
     }
     &__embedded-tooltip {
         display: flex;
@@ -41,11 +41,11 @@
         height: 100%;
         margin-left: -10px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
         &:hover {
             cursor: pointer;
 
-            color: var(--yc-color-text-complementary);
+            color: var(--g-color-text-complementary);
         }
     }
 

package/dist/containers/Tenant/Query/SavedQueries/SavedQueries.tsx

@@ -11,7 +11,7 @@ import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
 import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
 
 import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
-import {IconWrapper} from '../../../../components/Icon';
+import {Icon} from '../../../../components/Icon';
 
 import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
 
@@ -110,10 +110,10 @@ export const SavedQueries = ({savedQueries, changeUserInput, onDeleteQuery}: Sav
                     </div>
                     <span className={b('controls')}>
                         <Button view="flat-secondary">
-                            <IconWrapper name="pencil" viewBox="0 0 24 24" />
+                            <Icon name="pencil" viewBox="0 0 24 24" />
                         </Button>
                         <Button view="flat-secondary" onClick={onDeleteQueryClick(query.name)}>
-                            <IconWrapper name="trash" viewBox="0 0 24 24" />
+                            <Icon name="trash" viewBox="0 0 24 24" />
                         </Button>
                     </span>
                 </div>

package/dist/containers/Tenant/Tenant.scss

@@ -3,7 +3,6 @@
 .tenant-page {
     overflow: hidden;
 
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    @include body-2-typography();
     @include flex-container();
 }

package/dist/containers/Tenant/utils/schemaControls.tsx

@@ -6,7 +6,7 @@ import {Button} from '@gravity-ui/uikit';
 import {setShowPreview} from '../../../store/reducers/schema/schema';
 import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
 import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
-import {IconWrapper} from '../../../components/Icon';
+import {Icon} from '../../../components/Icon';
 
 import i18n from '../i18n';
 
@@ -44,7 +44,7 @@ export const getControls =
                 title={i18n('actions.openPreview')}
                 size="s"
             >
-                <IconWrapper name="tablePreview" />
+                <Icon name="tablePreview" />
             </Button>
         );
 

package/dist/containers/UserSettings/Setting.tsx

@@ -82,7 +82,11 @@ export const Setting = ({
     };
 
     return (
-        <Settings.Item title={title} renderTitleComponent={renderTitleComponent}>
+        <Settings.Item
+            title={title}
+            highlightedTitle={title}
+            renderTitleComponent={renderTitleComponent}
+        >
             {getSettingsElement(type)}
         </Settings.Item>
     );

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss

@@ -8,7 +8,7 @@
         margin-top: 10px;
         margin-bottom: 10px;
 
-        border: 1px solid var(--yc-color-line-generic);
+        border: 1px solid var(--g-color-line-generic);
         border-radius: 10px;
     }
 
@@ -29,8 +29,7 @@
     }
 
     .ydb-tree-view {
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
+        @include body-2-typography();
 
         // Apply margin ignoring first element of the tree
         .ydb-tree-view {

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.scss

@@ -24,7 +24,7 @@
     &__info-label {
         font-weight: 200;
 
-        color: var(--yc-color-text-complementary);
+        color: var(--g-color-text-complementary);
 
         &_margin_left {
             margin-left: 5px;

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx

@@ -53,7 +53,7 @@ export const NodesTreeTitle = ({
                 {versionsValues ? (
                     <div className={b('version-progress')}>
                         <span className={b('info-label', {margin: 'right'})}>Versions</span>
-                        <Progress view="thin" value={100} stack={versionsValues} />
+                        <Progress size="s" value={100} stack={versionsValues} />
                     </div>
                 ) : null}
             </div>