feat: support button changes in uikit 6.11.0 (#227)

* feat: support button changes in uikit 6.11.0

* chore: apply lint rules

Author: teleginzhenya

package-lock.json

@@ -184,7 +184,7 @@
     "@gravity-ui/prettier-config": "1.1.0",
     "@gravity-ui/stylelint-config": "4.0.1",
     "@gravity-ui/tsconfig": "1.0.0",
-    "@gravity-ui/uikit": "6.1.1",
+    "@gravity-ui/uikit": "6.11.0",
     "@storybook/addon-essentials": "^7.1.1",
     "@storybook/cli": "^7.1.1",
     "@storybook/preset-scss": "1.0.3",
@@ -246,7 +246,7 @@
     "@diplodoc/mermaid-extension": "^1.0.0",
     "@diplodoc/transform": "^4.5.0",
     "@gravity-ui/components": "^3.0.0",
-    "@gravity-ui/uikit": "^6.0.0",
+    "@gravity-ui/uikit": "^6.11.0",
     "highlight.js": "^11.8.0",
     "katex": "^0.16.9",
     "lodash": "^4.17.20",

package.json

@@ -57,8 +57,9 @@
         background: var(--g-color-line-generic);
     }
 
-    // TODO: fixme
     .ye-toolbar-list-button_arrow {
+        --g-button-icon-offset: 0px;
+        --g-button-padding: 2px;
         width: 42px;
     }
 

src/bundle/YfmEditorView.scss

@@ -1,23 +1,10 @@
 @import '~@gravity-ui/uikit/styles/mixins';
 
 .ye-toolbar-button-with-popup-menu {
-    // TODO: FIXME
-    // button with 2 icons
-    // 42px width
+    --g-button-icon-offset: 0px;
+    --g-button-padding: 2px;
     width: 42px;
 
-    .g-button__text.g-button__text.g-button__text {
-        margin: 0px 21px;
-    }
-
-    .g-button__icon_side_start {
-        left: -1px;
-    }
-
-    .g-button__icon_side_end {
-        right: -1px;
-    }
-
     &__menu-group {
         .g-menu__group-label {
             color: var(--g-color-text-hint);

src/bundle/toolbar/ToolbarButtonWithPopupMenu.scss

@@ -1,18 +1,8 @@
 .ye-toolbar-list-button {
     &_arrow {
+        --g-button-icon-offset: 0px;
+        --g-button-padding: 2px;
         width: 42px;
-
-        .g-button__text.g-button__text.g-button__text {
-            margin: 0px 21px;
-        }
-
-        .g-button__icon_side_start {
-            left: -1px;
-        }
-
-        .g-button__icon_side_end {
-            right: -1px;
-        }
     }
 
     &__item {