chore!: use @gravity-ui/uikit v5

- replace some '--yc-*' css-variables
gravity-ui · Jul 25, 2023 · 0a4e8da · 0a4e8da
1 parent 8753f8c
commit 0a4e8da
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^3.18.2",
+    "@gravity-ui/uikit": "^5",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.3",
@@ -92,10 +92,10 @@
     "typescript": "4.7.3"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^3.0.0",
-    "bem-cn-lite": "^4.0.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "@gravity-ui/uikit": "^5",
+    "bem-cn-lite": "^4",
+    "react": "^16 | ^17 | ^18",
+    "react-dom": "^16 | ^17 | ^18"
   },
   "nano-staged": {
     "*.{scss}": [

diff --git a/src/dialog/Dialog/Dialog.scss b/src/dialog/Dialog/Dialog.scss
@@ -14,22 +14,22 @@
     }
 
     &__caption {
-        font-size: var(--yc-text-header-1-font-size);
-        line-height: var(--yc-text-header-1-line-height);
-        font-weight: var(--yc-text-header-font-weight);
+        font-size: var(--g-text-header-1-font-size);
+        line-height: var(--g-text-header-1-line-height);
+        font-weight: var(--g-text-header-font-weight);
     }
 
     &__body {
         &_with_vertical_tabs {
-            border-top: 1px solid var(--yc-color-line-generic);
-            border-bottom: 1px solid var(--yc-color-line-generic);
+            border-top: 1px solid var(--g-color-line-generic);
+            border-bottom: 1px solid var(--g-color-line-generic);
             --yc-dialog-body-padding: 0px;
         }
     }
 
     &__tabs-control {
         &_vertical {
-            background-color: var(--yc-color-base-generic-ultralight);
+            background-color: var(--g-color-base-generic-ultralight);
             min-width: 20%;
         }
     }
@@ -50,7 +50,7 @@
     }
 
     &__separator {
-        border-top: 1px solid var(--yc-color-line-generic);
+        border-top: 1px solid var(--g-color-line-generic);
         padding-bottom: 1ex;
     }
 
@@ -73,18 +73,18 @@
     }
 
     &__error-message {
-        color: var(--yc-color-text-danger);
+        color: var(--g-color-text-danger);
         margin-top: 2px;
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-1-line-height);
+        font-size: var(--g-text-body-1-font-size);
+        line-height: var(--g-text-body-1-line-height);
     }
 
     &__section-title {
-        font-size: var(--yc-text-subheader-3-font-size);
-        line-height: var(--yc-text-subheader-3-line-height);
-        font-weight: var(--yc-text-subheader-font-weight);
-        margin-bottom: var(--yc-text-subheader-3-line-height);
-        margin-top: var(--yc-text-subheader-3-line-height);
+        font-size: var(--g-text-subheader-3-font-size);
+        line-height: var(--g-text-subheader-3-line-height);
+        font-weight: var(--g-text-subheader-font-weight);
+        margin-bottom: var(--g-text-subheader-3-line-height);
+        margin-top: var(--g-text-subheader-3-line-height);
 
         &:first-child {
             margin-top: 0;
@@ -113,15 +113,15 @@
 
     &__field-error {
         padding-top: 2px;
-        color: var(--yc-color-text-danger);
+        color: var(--g-color-text-danger);
     }
 
     &__field-wrapper {
         width: 450px;
         margin-bottom: 15px;
 
         &_empty {
-            color: var(--yc-color-text-secondary);
+            color: var(--g-color-text-secondary);
         }
 
         &_type_block,
@@ -137,7 +137,7 @@
 
     &__field-warning {
         margin-top: 2px; /* top offset of warning text from a control */
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
 
         /*
         15px height + 2px top offset of error text from a control
@@ -150,22 +150,22 @@
 
     &__field-warning-content {
         margin-left: 7px;
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-1-line-height);
+        font-size: var(--g-text-body-1-font-size);
+        line-height: var(--g-text-body-1-line-height);
         vertical-align: middle;
     }
 
     &__label {
         padding-top: 5px;
         display: flex;
-        font-size: var(--yc-text-body-2-font-size);
+        font-size: var(--g-text-body-2-font-size);
     }
     &__label-text {
         margin-right: 5px;
 
         &_required:after {
             content: '*';
-            color: var(--yc-color-text-danger);
+            color: var(--g-color-text-danger);
         }
     }
 
@@ -178,9 +178,9 @@
         left: 0;
         right: 0;
 
-        font-size: var(--yc-text-body-2-font-size);
-        color: var(--yc-color-text-light-primary);
-        background-color: var(--yc-color-infographics-info-medium);
+        font-size: var(--g-text-body-2-font-size);
+        color: var(--g-color-text-light-primary);
+        background-color: var(--g-color-base-info-medium);
         text-align: center;
 
         padding-top: 10px;
@@ -223,7 +223,7 @@
         display: flex;
         align-items: center;
         justify-content: flex-start;
-        color: var(--yc-color-text-primary);
+        color: var(--g-color-text-primary);
         font-size: 19px;
         font-weight: 700;
     }

diff --git a/src/dialog/EditableList/EditableList.scss b/src/dialog/EditableList/EditableList.scss
@@ -10,7 +10,7 @@
 
         white-space: nowrap;
         height: 1.8em;
-        background-color: var(--yc-color-line-generic);
+        background-color: var(--g-color-line-generic);
         margin-right: 1ex;
         margin-bottom: 4px;
         padding: 0 1ex;
@@ -26,7 +26,7 @@
 
         &-action {
             padding-left: 1ex;
-            color: var(--yc-color-text-secondary);
+            color: var(--g-color-text-secondary);
             cursor: pointer;
             display: inline-block;
             min-width: 1em;
@@ -42,7 +42,7 @@
 
     &__show-all {
         white-space: nowrap;
-        color: var(--yc-color-text-link);
+        color: var(--g-color-text-link);
         cursor: pointer;
         padding: 0 1ex;
     }

diff --git a/src/dialog/Icon/Icon.tsx b/src/dialog/Icon/Icon.tsx
@@ -100,19 +100,19 @@ export function WarningIcon(props: React.SVGProps<SVGSVGElement>) {
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M1.10067 13.1764L7.25321 2.41823C7.57211 1.86059 8.4284 1.86059 8.74642 2.41823L14.899 13.1764C15.2002 13.7023 14.7915 14.3375 14.1528 14.3375H1.84772C1.20815 14.3375 0.800269 13.7023 1.10067 13.1764Z"
-                fill="var(--yc-color-promo-base-gold)"
+                fill="var(--g-color-base-warning-heavy)"
             />
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M8.87908 9.43224C8.87908 9.70838 8.65523 9.93224 8.37908 9.93224H7.61719C7.34105 9.93224 7.11719 9.70838 7.11719 9.43224V6.55078C7.11719 6.27464 7.34105 6.05078 7.61719 6.05078H8.37908C8.65522 6.05078 8.87908 6.27464 8.87908 6.55078V9.43224Z"
-                fill="var(--yc-color-text-complementary)"
+                fill="var(--g-color-text-complementary)"
             />
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M8.87908 12.0989C8.87908 12.375 8.65523 12.5989 8.37908 12.5989H7.61719C7.34105 12.5989 7.11719 12.375 7.11719 12.0989V11.5176C7.11719 11.2414 7.34105 11.0176 7.61719 11.0176H8.37908C8.65522 11.0176 8.87908 11.2414 8.87908 11.5176V12.0989Z"
-                fill="var(--yc-color-text-complementary)"
+                fill="var(--g-color-text-complementary)"
             />
         </svg>
     );

diff --git a/src/dialog/PlainText/PlainText.scss b/src/dialog/PlainText/PlainText.scss
@@ -1,6 +1,6 @@
 .df-plain-text {
-    font-size: var(--yc-text-body-1-font-size);
+    font-size: var(--g-text-body-1-font-size);
     line-height: 18px;
     font-weight: 500;
-    color: var(--yc-color-text-primary);
+    color: var(--g-color-text-primary);
 }
diff --git a/src/dialog/TabField/TabFieldVertical.scss b/src/dialog/TabField/TabFieldVertical.scss
@@ -19,11 +19,11 @@
         line-height: 100%;
         padding-left: 1em;
         border-left: 4px solid rgba(0, 0, 0, 0);
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
 
         &_selected {
-            color: var(--yc-color-text-primary);
-            border-color: var(--yc-color-text-primary);
+            color: var(--g-color-text-primary);
+            border-color: var(--g-color-text-primary);
         }
     }
 

diff --git a/src/dialog/TextAreaControl/TextAreaControl.tsx b/src/dialog/TextAreaControl/TextAreaControl.tsx
@@ -1,13 +1,13 @@
 import React, {Component} from 'react';
-import {TextInput} from '@gravity-ui/uikit';
+import {TextArea} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
 
 import './TextAreaControl.scss';
 
 const block = cn('df-field-textarea');
 
 export type TextAreaControlProps = Omit<
-    React.ComponentProps<typeof TextInput>,
+    React.ComponentProps<typeof TextArea>,
     'value' | 'ref' | 'onUpdate' | 'onChange' | 'error'
 > & {
     value: string;
@@ -30,15 +30,14 @@ class TextControl extends Component<TextAreaControlProps> {
         const {value, onChange, ...rest} = this.props;
 
         return (
-            <TextInput
+            <TextArea
                 className={block()}
                 autoComplete={false}
                 hasClear
                 rows={4}
                 {...rest}
                 value={value}
                 onUpdate={onChange}
-                multiline
             />
         );
     }

diff --git a/src/dialog/TumblerControl/TumblerControl.scss b/src/dialog/TumblerControl/TumblerControl.scss
@@ -1,9 +1,9 @@
 .df-tumbler-control {
     white-space: nowrap;
-    font-size: var(--yc-text-body-2-font-size);
+    font-size: var(--g-text-body-2-font-size);
 
     &_size_l {
-        font-size: var(--yc-text-body-3-font-size);
+        font-size: var(--g-text-body-3-font-size);
     }
 
     &__switch {

diff --git a/src/stories/EditableManyListsDemo.scss b/src/stories/EditableManyListsDemo.scss
@@ -1,16 +1,16 @@
 .editable-lists-control-demo {
     &__secondary {
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__coral {
         color: lightcoral; // stylelint-disable-line color-named
     }
 
     &__add {
-        background-color: var(--yc-color-base-positive);
+        background-color: var(--g-color-base-positive-light);
     }
 
     &__remove {
-        background-color: var(--yc-color-base-danger);
+        background-color: var(--g-color-base-danger-light);
     }
 }