feat: support RTL

gravity-ui · Feb 1, 2024 · 08a0f20 · 08a0f20
1 parent 8ef2b60
commit 08a0f20
Show file tree

Hide file tree

Showing 35 changed files with 156 additions and 127 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,3 +1,8 @@
 {
-    "extends": ["@gravity-ui/stylelint-config", "@gravity-ui/stylelint-config/prettier"]
+    "extends": ["@gravity-ui/stylelint-config", "@gravity-ui/stylelint-config/prettier"],
+    "plugins": ["stylelint-use-logical"],
+    "rules": {
+        "csstools/use-logical": ["always", {"except": ["float", "width", "min-width", "max-width", "height", "min-height", "max-height"]}],
+        "declaration-colon-space-after": "always-single-line"
+    }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -96,6 +96,7 @@
     "sass": "^1.70.0",
     "sass-loader": "^14.1.0",
     "stylelint": "^15.11.0",
+    "stylelint-use-logical": "^2.1.0",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"
   },

diff --git a/src/components/ActionsPanel/ActionsPanel.scss b/src/components/ActionsPanel/ActionsPanel.scss
@@ -13,11 +13,11 @@
     &__note-wrapper {
         min-width: 100px;
         max-width: 320px;
-        margin-right: 40px;
+        margin-inline-end: 40px;
     }
 
     &__button-close-wrapper {
         flex-shrink: 0;
-        margin-left: auto;
+        margin-inline-start: auto;
     }
 }
diff --git a/src/components/ActionsPanel/components/CollapseActions.scss b/src/components/ActionsPanel/components/CollapseActions.scss
@@ -10,7 +10,7 @@
     display: flex;
     align-items: center;
     height: 100%;
-    margin-right: 8px;
+    margin-inline-end: 8px;
 
     &__container {
         display: flex;

diff --git a/src/components/ActionsPanel/components/CollapseActions.tsx b/src/components/ActionsPanel/components/CollapseActions.tsx
@@ -52,7 +52,7 @@ export const CollapseActions = ({actions}: Props) => {
             {showDropdown && (
                 <React.Fragment>
                     <div className={b('menu-placeholder')} />
-                    <div className={b('menu-wrapper')} style={{left: offset}}>
+                    <div className={b('menu-wrapper')} style={{insetInlineStart: offset}}>
                         <DropdownMenu
                             size="s"
                             items={dropdownItems}

diff --git a/src/components/AdaptiveTabs/AdaptiveTabs.scss b/src/components/AdaptiveTabs/AdaptiveTabs.scss
@@ -68,11 +68,11 @@ $block: '.#{variables.$ns}adaptive-tabs';
 
     &__select-switcher {
         position: absolute;
-        top: 0;
+        inset-block-start: 0;
         will-change: left;
 
         #{$block}__tab-container #{$block}__tab {
-            margin-right: 0;
+            margin-inline-end: 0;
         }
     }
 
@@ -93,7 +93,7 @@ $block: '.#{variables.$ns}adaptive-tabs';
 
     &__tab-container {
         overflow: hidden;
-        padding-right: var(--gc-tabs-space-between);
+        padding-inline-end: var(--gc-tabs-space-between);
 
         &:not(&_switcher-tab):only-child {
             #{$block}__tab {
@@ -102,11 +102,11 @@ $block: '.#{variables.$ns}adaptive-tabs';
         }
 
         &_last-tab {
-            padding-right: 0;
+            padding-inline-end: 0;
         }
 
         &_switcher-tab {
-            padding-right: 0;
+            padding-inline-end: 0;
             max-width: 100%;
 
             #{$block}__tab {
@@ -124,7 +124,7 @@ $block: '.#{variables.$ns}adaptive-tabs';
     }
 
     &__tab {
-        border-bottom: var(--gc-tabs-border-width) solid transparent;
+        border-block-end: var(--gc-tabs-border-width) solid transparent;
         padding: var(--gc-tabs-border-width) 1px 0;
 
         box-sizing: border-box;
@@ -153,7 +153,7 @@ $block: '.#{variables.$ns}adaptive-tabs';
     }
 
     &__chevron-icon {
-        margin-left: 10px;
+        margin-inline-start: 10px;
     }
 
     &__tabs-as-select-control {

diff --git a/src/components/AdaptiveTabs/AdaptiveTabs.tsx b/src/components/AdaptiveTabs/AdaptiveTabs.tsx
@@ -700,10 +700,10 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
     };
 
     /*
-        Calculates what value of the left property should be set to the absolutely positioned switcher at
+        Calculates what value of the inline-start property should be set to the absolutely positioned switcher at
         the current set of rendered tabs
      */
-    calcSelectSwitcherLeftPosition = () => {
+    calcSelectSwitcherInlineStartPosition = () => {
         const {tabChosenFromSelectId, firstHiddenTabIndex} = this.state;
         const {items} = this.props;
         let tabChosenFromSelectIndex = null;
@@ -943,7 +943,7 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
                         <div
                             ref={this.selectSwitcherNode}
                             className={b('select-switcher')}
-                            style={{left: this.calcSelectSwitcherLeftPosition()}}
+                            style={{insetInlineStart: this.calcSelectSwitcherInlineStartPosition()}}
                         >
                             {this.renderSelect()}
                         </div>

diff --git a/src/components/ChangelogDialog/ChangelogDialog.scss b/src/components/ChangelogDialog/ChangelogDialog.scss
@@ -8,22 +8,22 @@ $maxItemsHeight: 70vh;
     width: $width;
 
     &__full-list-link-icon {
-        margin-left: var(--g-spacing-1);
+        margin-inline-start: var(--g-spacing-1);
         vertical-align: middle;
     }
 
     &__items-container {
         max-height: $maxItemsHeight;
         overflow-y: auto;
-        margin-bottom: var(--g-spacing-5);
+        margin-block-end: var(--g-spacing-5);
 
         #{$block}__item:last-child {
-            margin-bottom: 0;
+            margin-block-end: 0;
         }
     }
 
     &__item {
-        margin-bottom: var(--g-spacing-8);
+        margin-block-end: var(--g-spacing-8);
     }
 
     &__empty-placeholder {

diff --git a/src/components/ChangelogDialog/components/Item/Item.scss b/src/components/ChangelogDialog/components/Item/Item.scss
@@ -17,12 +17,12 @@ $metaWidth: 80px;
     }
 
     &__label-new {
-        margin-top: var(--g-spacing-2);
+        margin-block-start: var(--g-spacing-2);
     }
 
     &__content {
         flex: 1;
-        margin-left: var(--g-spacing-5);
+        margin-inline-start: var(--g-spacing-5);
     }
 
     &__title {
@@ -31,20 +31,20 @@ $metaWidth: 80px;
     }
 
     &__image {
-        margin-top: var(--g-spacing-3);
+        margin-block-start: var(--g-spacing-3);
         border-radius: 16px;
         overflow: hidden;
     }
 
     &__description {
-        margin-top: var(--g-spacing-3);
+        margin-block-start: var(--g-spacing-3);
     }
 
     &__button {
-        margin-top: var(--g-spacing-4);
+        margin-block-start: var(--g-spacing-4);
     }
 
     &__button + &__button {
-        margin-left: var(--g-spacing-4);
+        margin-inline-start: var(--g-spacing-4);
     }
 }
diff --git a/src/components/ChangelogDialog/components/Picture/Picture.scss b/src/components/ChangelogDialog/components/Picture/Picture.scss
@@ -9,9 +9,9 @@ $block: '.#{variables.$ns}changelog-dialog-picture';
 
     &__loader {
         position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
+        transform: translate(calc(-50% * var(--g-flow-direction)), -50%);
         z-index: 1;
     }
 

diff --git a/src/components/CookieConsent/components/ConsentNotification/ConsentNotification.scss b/src/components/CookieConsent/components/ConsentNotification/ConsentNotification.scss
@@ -16,13 +16,13 @@ $block: '.#{variables.$ns}consent-notification';
         display: block;
 
         & + & {
-            margin-top: variables.$regularOffset;
+            margin-block-start: variables.$regularOffset;
         }
     }
 
     &_type_default {
-        right: variables.$regularOffset;
-        bottom: variables.$regularOffset;
+        inset-inline-end: variables.$regularOffset;
+        inset-block-end: variables.$regularOffset;
         width: 480px;
         border-radius: var(--g-border-radius-xl);
         padding: variables.$doubleRegularOffset;
@@ -33,21 +33,21 @@ $block: '.#{variables.$ns}consent-notification';
         }
 
         #{$block}__button {
-            margin-top: variables.$microOffset;
+            margin-block-start: variables.$microOffset;
             padding: 0 variables.$regularOffset;
             align-self: flex-end;
         }
     }
 
     &_type_mobile {
-        left: 0;
-        bottom: 0;
+        inset-inline-start: 0;
+        inset-block-end: 0;
         width: 100%;
         padding: variables.$normalOffset;
 
         #{$block}__button {
             width: 100%;
-            margin-top: variables.$normalOffset;
+            margin-block-start: variables.$normalOffset;
         }
     }
 }
diff --git a/src/components/CookieConsent/components/ConsentPopup/ConsentPopup.scss b/src/components/CookieConsent/components/ConsentPopup/ConsentPopup.scss
@@ -24,13 +24,13 @@ $block: '.#{variables.$ns}consent-popup';
         line-height: variables.$doubleInlineOffset;
 
         &_step_manage {
-            margin-bottom: variables.$doubleRegularOffset;
+            margin-block-end: variables.$doubleRegularOffset;
         }
     }
 
     &__text {
         & + & {
-            margin-top: variables.$regularOffset;
+            margin-block-start: variables.$regularOffset;
         }
     }
 
@@ -40,25 +40,25 @@ $block: '.#{variables.$ns}consent-popup';
     }
 
     &__button + &__button {
-        margin-left: variables.$regularOffset;
+        margin-inline-start: variables.$regularOffset;
     }
 
     &__close-button {
         --g-button-focus-outline-color: var(--g-color-line-focus);
 
         position: relative;
-        top: 1px;
+        inset-block-start: 1px;
     }
 
     &__arrow-button {
         --g-button-focus-outline-color: var(--g-color-line-focus);
 
         position: relative;
-        top: -2px;
+        inset-block-start: -2px;
     }
 
     &__cookie-list {
-        margin-top: variables.$doubleInlineOffset;
+        margin-block-start: variables.$doubleInlineOffset;
     }
 
     &__modal-content_mobile {
@@ -76,11 +76,11 @@ $block: '.#{variables.$ns}consent-popup';
         }
 
         #{$block}__button + #{$block}__button {
-            margin-left: variables.$inlineOffset;
+            margin-inline-start: variables.$inlineOffset;
         }
 
         #{$block}__arrow-button {
-            margin-right: variables.$regularOffset;
+            margin-inline-end: variables.$regularOffset;
         }
 
         &#{$block}__modal-content_step_manage {
@@ -99,7 +99,7 @@ $block: '.#{variables.$ns}consent-popup';
             }
 
             #{$block}__text + #{$block}__text {
-                margin-top: variables.$microOffset;
+                margin-block-start: variables.$microOffset;
             }
         }
     }

diff --git a/src/components/CookieConsent/components/ConsentPopup/ConsentPopup.tsx b/src/components/CookieConsent/components/ConsentPopup/ConsentPopup.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {ArrowLeft, Xmark} from '@gravity-ui/icons';
-import {Button, Icon, Link, Modal, Text, useMobile} from '@gravity-ui/uikit';
+import {ArrowLeft, ArrowRight, Xmark} from '@gravity-ui/icons';
+import {Button, Icon, Link, Modal, Text, useDirection, useMobile} from '@gravity-ui/uikit';
 
 import {block} from '../../../utils/cn';
 import {ConsentType} from '../../ConsentManager';
@@ -22,6 +22,7 @@ import './ConsentPopup.scss';
 const b = block('consent-popup');
 
 const Header = ({currentStep, initialStep, onClose, onChangeStep, isMobile}: HeaderProps) => {
+    const direction = useDirection();
     const buttonsEnabled = currentStep === ConsentPopupStep.Manage;
     const isBackButtonVisible = buttonsEnabled && initialStep === ConsentPopupStep.Main;
 
@@ -35,7 +36,7 @@ const Header = ({currentStep, initialStep, onClose, onChangeStep, isMobile}: Hea
                         size="s"
                         onClick={onChangeStep(ConsentPopupStep.Main)}
                     >
-                        <Icon data={ArrowLeft} size={16} />
+                        <Icon data={direction === 'rtl' ? ArrowRight : ArrowLeft} size={16} />
                     </Button>
                 ) : null}
                 <Text