feat: update to uikit5 (#607)

ydb-platform · Dec 14, 2023 · ddd263b · ddd263b
1 parent 3484e6c
commit ddd263b
Show file tree

Hide file tree

Showing 98 changed files with 1,819 additions and 772 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,9 +10,10 @@
   },
   "dependencies": {
     "@gravity-ui/axios-wrapper": "^1.3.0",
+    "@gravity-ui/components": "^2.9.1",
     "@gravity-ui/date-utils": "^1.1.1",
     "@gravity-ui/i18n": "^1.0.0",
-    "@gravity-ui/navigation": "^0.4.0",
+    "@gravity-ui/navigation": "^1.8.0",
     "@gravity-ui/paranoid": "^1.4.0",
     "@gravity-ui/react-data-table": "^1.0.3",
     "@types/react": "^17.0.58",
@@ -40,7 +41,7 @@
     "reselect": "4.1.6",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "^3.3.1"
+    "ydb-ui-components": "^3.5.0"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -107,11 +108,11 @@
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
     "@gravity-ui/eslint-config": "^1.0.2",
-    "@gravity-ui/icons": "^2.2.0",
+    "@gravity-ui/icons": "^2.8.1",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^4.11.1",
+    "@gravity-ui/uikit": "^5.24.0",
     "@playwright/test": "^1.31.1",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
@@ -139,6 +140,6 @@
     "url": "^0.11.0"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^3.0.1"
+    "@gravity-ui/uikit": "^5.24.0"
   }
 }
diff --git a/src/components/BasicNodeViewer/BasicNodeViewer.scss b/src/components/BasicNodeViewer/BasicNodeViewer.scss
@@ -1,20 +1,17 @@
 @import '../../styles/mixins.scss';
 
 .basic-node-viewer {
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
-
     display: flex;
     align-items: center;
 
     margin: 15px 0;
 
+    @include body-2-typography();
+
     &__title {
         margin: 0 20px 0 0;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 600;
-        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
     }
 
@@ -25,15 +22,10 @@
     &__label {
         margin-right: 10px;
 
-        font-size: var(--yc-text-body-2-font-size);
         line-height: 18px;
         white-space: nowrap;
 
-        color: var(--yc-color-text-hint);
-
-        .yc-root_theme_dark & {
-            color: var(--yc-color-text-hint);
-        }
+        color: var(--g-color-text-hint);
     }
 
     &__link {

diff --git a/src/components/CircularProgressBar/CircularProgressBar.scss b/src/components/CircularProgressBar/CircularProgressBar.scss
@@ -21,7 +21,7 @@
     }
 
     &__circle-bg {
-        stroke: var(--yc-color-base-simple-hover);
+        stroke: var(--g-color-base-simple-hover);
 
         fill: none;
     }
@@ -30,13 +30,13 @@
         fill: none;
 
         &_status_good {
-            stroke: var(--yc-color-private-green-550);
+            stroke: var(--ydb-color-status-green);
         }
         &_status_warning {
-            stroke: var(--yc-color-private-yellow-550);
+            stroke: var(--ydb-color-status-yellow);
         }
         &_status_danger {
-            stroke: var(--yc-color-private-red-550);
+            stroke: var(--ydb-color-status-red);
         }
     }
 }
diff --git a/src/components/DateRange/DateRange.scss b/src/components/DateRange/DateRange.scss
@@ -3,9 +3,9 @@
         min-width: 190px;
         padding: 5px 8px;
 
-        color: var(--yc-color-text-primary);
-        border: 1px solid var(--yc-color-line-generic);
-        border-radius: var(--yc-border-radius-m);
+        color: var(--g-color-text-primary);
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-m);
         background: transparent;
     }
 }
diff --git a/src/components/DiagnosticCard/DiagnosticCard.scss b/src/components/DiagnosticCard/DiagnosticCard.scss
@@ -5,18 +5,18 @@
     padding: 16px;
     padding-bottom: 28px;
 
-    border: 1px solid var(--yc-color-line-generic);
+    border: 1px solid var(--g-color-line-generic);
     border-radius: 8px;
     background-color: transparent;
 
     &_active {
-        border-color: var(--yc-color-base-info-heavy);
-        background-color: var(--yc-color-base-selection);
+        border-color: var(--g-color-base-info-medium);
+        background-color: var(--g-color-base-selection);
     }
 
     &:hover {
         cursor: pointer;
 
-        box-shadow: 0px 1px 5px var(--yc-color-sfx-shadow);
+        box-shadow: 0px 1px 5px var(--g-color-sfx-shadow);
     }
 }
diff --git a/src/components/Divider/Divider.scss b/src/components/Divider/Divider.scss
@@ -3,5 +3,5 @@
     height: 100%;
     margin: 0 4px;
 
-    background-color: var(--yc-color-line-generic);
+    background-color: var(--g-color-line-generic);
 }
diff --git a/src/components/EmptyState/EmptyState.scss b/src/components/EmptyState/EmptyState.scss
@@ -1,3 +1,5 @@
+@import '../../styles/mixins.scss';
+
 .empty-state {
     padding: 20px;
 
@@ -31,10 +33,10 @@
 
         margin-right: 60px;
 
-        color: var(--yc-color-base-info-hover);
+        color: var(--g-color-base-info-light-hover);
 
-        .yc-root_theme_dark & {
-            color: var(--yc-color-base-generic);
+        .g-root_theme_dark & {
+            color: var(--g-color-base-generic);
         }
     }
 
@@ -45,21 +47,18 @@
         font-weight: 500;
 
         &_size_s {
-            font-size: var(--yc-text-subheader-3-font-size);
-            line-height: var(--yc-text-subheader-3-line-height);
+            @include lead-typography();
         }
 
         &_size_m {
-            font-size: var(--yc-text-header-2-font-size);
-            line-height: var(--yc-text-header-2-line-height);
+            @include header-2-typography();
         }
     }
 
     &__description {
         grid-area: description;
 
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
+        @include body-2-typography();
     }
 
     &__actions {

diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss
@@ -1,15 +1,17 @@
+@import '../../styles/mixins.scss';
+
 .entity-status {
     display: inline-flex;
     align-items: center;
 
     max-width: 100%;
     height: 100%;
 
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    @include body-2-typography();
 
     &__clipboard-button {
         display: none;
+        justify-content: center;
         align-items: center;
 
         margin-left: 8px;
@@ -33,28 +35,22 @@
     a {
         text-decoration: none;
 
-        color: var(--yc-color-text-link);
+        color: var(--g-color-text-link);
     }
 
     a:hover {
-        color: var(--yc-color-text-link-hover);
+        color: var(--g-color-text-link-hover);
     }
 
     &__label {
         margin-right: 2px;
 
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
-
-        color: var(--yc-color-text-complementary);
+        color: var(--g-color-text-complementary);
 
-        &_size_m {
-            font-size: var(--yc-text-body-2-font-size);
-            line-height: var(--yc-text-body-2-line-height);
-        }
+        @include body-2-typography();
 
         &_size_l {
-            font-size: var(--yc-text-header-2-font-size);
+            font-size: var(--g-text-header-2-font-size);
         }
     }
 
@@ -108,45 +104,39 @@
     &__status-color {
         &_state_running,
         &_state_green {
-            background-color: var(--yc-color-infographics-positive-heavy);
+            background-color: var(--ydb-color-status-green);
         }
         &_state_yellow {
-            background-color: var(--yc-color-infographics-warning-heavy);
+            background-color: var(--ydb-color-status-yellow);
         }
         &_state_blue {
-            background-color: var(--yc-color-infographics-info-heavy);
+            background-color: var(--ydb-color-status-blue);
         }
-
         &_state_red {
-            background: var(--yc-color-infographics-danger-heavy);
+            background-color: var(--ydb-color-status-red);
         }
         &_state_gray,
         &_state_grey {
-            background: var(--yc-color-text-complementary);
+            background-color: var(--ydb-color-status-grey);
         }
         &_state_orange {
-            background: var(--yc-color-base-warning-orange);
+            background-color: var(--ydb-color-status-orange);
         }
     }
 
     &__label,
     &__status-icon {
         &_state_blue {
-            color: var(--yc-color-infographics-info-heavy);
+            color: var(--ydb-color-status-blue);
         }
         &_state_yellow {
-            color: var(--yc-color-infographics-warning-heavy);
+            color: var(--ydb-color-status-yellow);
         }
         &_state_orange {
-            color: var(--yc-color-base-warning-orange);
+            color: var(--ydb-color-status-orange);
         }
         &_state_red {
-            color: var(--yc-color-infographics-danger-heavy);
+            color: var(--ydb-color-status-red);
         }
     }
-
-    &_size_m {
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
-    }
 }
diff --git a/src/components/ExternalLinkWithIcon/ExternalLinkWithIcon.tsx b/src/components/ExternalLinkWithIcon/ExternalLinkWithIcon.tsx
@@ -2,7 +2,7 @@ import block from 'bem-cn-lite';
 
 import {Link} from '@gravity-ui/uikit';
 
-import {IconWrapper} from '../Icon/Icon';
+import {Icon} from '../Icon/Icon';
 
 import './ExternalLinkWithIcon.scss';
 
@@ -18,7 +18,7 @@ export const ExternalLinkWithIcon = ({title, url}: ExternalLinkWithIconProps) =>
         <Link href={url} target="_blank" className={b()}>
             {title}
             {'\u00a0'}
-            <IconWrapper name="external" viewBox={'0 0 16 16'} width={16} height={16} />
+            <Icon name="external" viewBox={'0 0 16 16'} width={16} height={16} />
         </Link>
     );
 };
diff --git a/src/components/FullNodeViewer/FullNodeViewer.scss b/src/components/FullNodeViewer/FullNodeViewer.scss
@@ -1,8 +1,7 @@
 @import '../../styles/mixins.scss';
 
 .full-node-viewer {
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    @include body-2-typography();
 
     &__common-info {
         display: flex;
@@ -29,8 +28,6 @@
     &__section-title {
         margin: 15px 0 10px;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 600;
-        line-height: var(--yc-text-body-2-line-height);
     }
 }
diff --git a/src/components/Fullscreen/Fullscreen.scss b/src/components/Fullscreen/Fullscreen.scss
@@ -1,6 +1,6 @@
 .kv-fullscreen {
     // should expand to fill the content area, keeping aside navigation visible
-    // counts on .ycn-aside-header__content to have position: relative, it is set in App.scss
+    // counts on .gn-aside-header__content to have position: relative, it is set in App.scss
     position: absolute;
     z-index: 10;
     top: 0;
@@ -12,19 +12,12 @@
     overflow: hidden;
     flex-grow: 1;
 
-    background-color: var(--yc-color-base-background);
+    background-color: var(--g-color-base-background);
 
     &__close-button {
         position: fixed;
         z-index: 11;
         top: 8px;
         right: 20px;
-
-        .yc-button__text {
-            display: flex;
-            align-items: center;
-
-            margin: 0 6px;
-        }
     }
 }
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -32,8 +32,4 @@ export const Icon = ({
     );
 };
 
-// When used with uikit components Icon is considered as text element and corresponding styles are applied
-// IconWrapper overrides displayName to 'Icon', so it will be considered as an icon with right styles
-export const IconWrapper = (props: IconProps) => <Icon {...props} />;
-
-IconWrapper.displayName = 'Icon';
+Icon.displayName = 'Icon';