feat(Button)!: use logical properties (#1119)

gravity-ui · Feb 6, 2024 · b6d4200 · b6d4200
1 parent a28abcf
commit b6d4200
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 41 deletions.
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -284,21 +284,21 @@ $block: '.#{variables.$ns}button';
             justify-content: center;
         }
 
-        &_side_left,
-        &_side_right {
+        &_side_start,
+        &_side_end {
             position: absolute;
             inset-block-start: 0;
         }
 
-        &_side_left {
+        &_side_start {
             inset-inline-start: var(--_--icon-position);
 
             & ~ #{$block}__text {
                 padding-inline-start: var(--_--icon-space);
             }
         }
 
-        &_side_right {
+        &_side_end {
             inset-inline-end: var(--_--icon-position);
 
             & ~ #{$block}__text {

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -212,39 +212,39 @@ function prepareChildren(children: React.ReactNode) {
             );
         }
     } else {
-        let leftIcon, rightIcon, text;
+        let startIcon, endIcon, text;
         const content = [];
 
         for (const item of items) {
             const isIconElement = isIcon(item);
             const isButtonIconElement = isButtonIconComponent(item);
 
             if (isIconElement || isButtonIconElement) {
-                if (!leftIcon && content.length === 0) {
-                    const key = 'icon-left';
-                    const side = 'left';
+                if (!startIcon && content.length === 0) {
+                    const key = 'icon-start';
+                    const side = 'start';
                     if (isIconElement) {
-                        leftIcon = (
+                        startIcon = (
                             <Button.Icon key={key} side={side}>
                                 {item}
                             </Button.Icon>
                         );
                     } else {
-                        leftIcon = React.cloneElement(item, {
+                        startIcon = React.cloneElement(item, {
                             side,
                         });
                     }
-                } else if (!rightIcon && content.length !== 0) {
-                    const key = 'icon-right';
-                    const side = 'right';
+                } else if (!endIcon && content.length !== 0) {
+                    const key = 'icon-end';
+                    const side = 'end';
                     if (isIconElement) {
-                        rightIcon = (
+                        endIcon = (
                             <Button.Icon key={key} side={side}>
                                 {item}
                             </Button.Icon>
                         );
                     } else {
-                        rightIcon = React.cloneElement(item, {
+                        endIcon = React.cloneElement(item, {
                             side,
                         });
                     }
@@ -262,6 +262,6 @@ function prepareChildren(children: React.ReactNode) {
             );
         }
 
-        return [leftIcon, rightIcon, text];
+        return [startIcon, endIcon, text];
     }
 }
diff --git a/src/components/Button/ButtonIcon.tsx b/src/components/Button/ButtonIcon.tsx
@@ -6,7 +6,7 @@ const b = block('button');
 
 type Props = React.PropsWithChildren<{
     className?: string;
-    side?: 'left' | 'right';
+    side?: 'start' | 'end';
 }>;
 
 export const ButtonIcon = ({side, className, children}: Props) => {

diff --git a/src/components/Button/README.md b/src/components/Button/README.md
@@ -187,10 +187,10 @@ To add an icon to the `Button`, you should use the [`Icon`](../Icon) component,
     code={`
 <Button view="outlined" size="l">
     <Icon data={Gear} size={18} />
-    Left
+    Start
 </Button>
 <Button view="outlined" size="l">
-    Right
+    End
     <Icon data={Gear} size={18} />
 </Button>
 <Button view="outlined" size="l">
@@ -208,10 +208,10 @@ To add an icon to the `Button`, you should use the [`Icon`](../Icon) component,
         <UIKit.Icon data={() => (
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fillRule="evenodd" d="M7.199 2H8.8a.2.2 0 0 1 .2.2c0 1.808 1.958 2.939 3.524 2.034a.199.199 0 0 1 .271.073l.802 1.388a.199.199 0 0 1-.073.272c-1.566.904-1.566 3.164 0 4.069a.199.199 0 0 1 .073.271l-.802 1.388a.199.199 0 0 1-.271.073C10.958 10.863 9 11.993 9 13.8a.2.2 0 0 1-.199.2H7.2a.199.199 0 0 1-.2-.2c0-1.808-1.958-2.938-3.524-2.034a.199.199 0 0 1-.272-.073l-.8-1.388a.199.199 0 0 1 .072-.271c1.566-.905 1.566-3.165 0-4.07a.199.199 0 0 1-.073-.271l.801-1.388a.199.199 0 0 1 .272-.073C5.042 5.138 7 4.007 7 2.2c0-.11.089-.199.199-.199ZM5.5 2.2c0-.94.76-1.7 1.699-1.7H8.8c.94 0 1.7.76 1.7 1.7a.85.85 0 0 0 1.274.735 1.699 1.699 0 0 1 2.32.622l.802 1.388c.469.813.19 1.851-.622 2.32a.85.85 0 0 0 0 1.472 1.7 1.7 0 0 1 .622 2.32l-.802 1.388a1.699 1.699 0 0 1-2.32.622.85.85 0 0 0-1.274.735c0 .939-.76 1.7-1.699 1.7H7.2a1.7 1.7 0 0 1-1.699-1.7.85.85 0 0 0-1.274-.735 1.698 1.698 0 0 1-2.32-.622l-.802-1.388a1.699 1.699 0 0 1 .622-2.32.85.85 0 0 0 0-1.471 1.699 1.699 0 0 1-.622-2.321l.801-1.388a1.699 1.699 0 0 1 2.32-.622A.85.85 0 0 0 5.5 2.2Zm4 5.8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" clipRule="evenodd"></path></svg>
         )} size={18} />
-        Left
+        Start
     </UIKit.Button>
     <UIKit.Button view="outlined" size="l">
-        Right
+        End
         <UIKit.Icon data={() => (
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fillRule="evenodd" d="M7.199 2H8.8a.2.2 0 0 1 .2.2c0 1.808 1.958 2.939 3.524 2.034a.199.199 0 0 1 .271.073l.802 1.388a.199.199 0 0 1-.073.272c-1.566.904-1.566 3.164 0 4.069a.199.199 0 0 1 .073.271l-.802 1.388a.199.199 0 0 1-.271.073C10.958 10.863 9 11.993 9 13.8a.2.2 0 0 1-.199.2H7.2a.199.199 0 0 1-.2-.2c0-1.808-1.958-2.938-3.524-2.034a.199.199 0 0 1-.272-.073l-.8-1.388a.199.199 0 0 1 .072-.271c1.566-.905 1.566-3.165 0-4.07a.199.199 0 0 1-.073-.271l.801-1.388a.199.199 0 0 1 .272-.073C5.042 5.138 7 4.007 7 2.2c0-.11.089-.199.199-.199ZM5.5 2.2c0-.94.76-1.7 1.699-1.7H8.8c.94 0 1.7.76 1.7 1.7a.85.85 0 0 0 1.274.735 1.699 1.699 0 0 1 2.32.622l.802 1.388c.469.813.19 1.851-.622 2.32a.85.85 0 0 0 0 1.472 1.7 1.7 0 0 1 .622 2.32l-.802 1.388a1.699 1.699 0 0 1-2.32.622.85.85 0 0 0-1.274.735c0 .939-.76 1.7-1.699 1.7H7.2a1.7 1.7 0 0 1-1.699-1.7.85.85 0 0 0-1.274-.735 1.698 1.698 0 0 1-2.32-.622l-.802-1.388a1.699 1.699 0 0 1 .622-2.32.85.85 0 0 0 0-1.471 1.699 1.699 0 0 1-.622-2.321l.801-1.388a1.699 1.699 0 0 1 2.32-.622A.85.85 0 0 0 5.5 2.2Zm4 5.8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" clipRule="evenodd"></path></svg>
         )} size={18} />
@@ -242,10 +242,10 @@ LANDING_BLOCK-->
 ```tsx
 <Button view="outlined" size="l">
     <Icon data={Gear} size={18} />
-    Left
+    Start
 </Button>
 <Button view="outlined" size="l">
-    Right
+    End
     <Icon data={Gear} size={18} />
 </Button>
 <Button view="outlined" size="l">
@@ -381,8 +381,8 @@ LANDING_BLOCK-->
 
 ## Pin
 
-The `pin` property allows you to control the shape of the right and left edges and is usually used for combining multiple buttons in a single unit.
-The value of the `pin` property consists of left and edge style names divided by a dash, e.g. `"round-brick"`.
+The `pin` property allows you to control the shape of the "start" and "end" edges and is usually used for combining multiple buttons in a single unit.
+The value of the `pin` property consists of "start" and "end" style names divided by a dash, e.g. `"round-brick"`.
 The edge styles are: `round` (default), `circle`, `brick` and `clear`.
 
 <!--LANDING_BLOCK
@@ -394,9 +394,9 @@ The edge styles are: `round` (default), `circle`, `brick` and `clear`.
     <Button view="action" size="l" pin="brick-round">...</Button>
 </div>
 <div>
-    <Button view="normal" size="l" pin="circle-clear">Left</Button>
+    <Button view="normal" size="l" pin="circle-clear">Start</Button>
     <Button view="normal" size="l" pin="brick-brick" selected>Center</Button>
-    <Button view="normal" size="l" pin="clear-circle">Right</Button>
+    <Button view="normal" size="l" pin="clear-circle">End</Button>
 </div>
 <div>
     <Button view="outlined" pin="brick-clear">1</Button>
@@ -411,9 +411,9 @@ The edge styles are: `round` (default), `circle`, `brick` and `clear`.
         <UIKit.Button view="action" size="l" pin="brick-round">...</UIKit.Button>
     </div>
     <div>
-        <UIKit.Button view="normal" size="l" pin="circle-clear">Left</UIKit.Button>
+        <UIKit.Button view="normal" size="l" pin="circle-clear">Start</UIKit.Button>
         <UIKit.Button view="normal" size="l" pin="brick-brick" selected>Center</UIKit.Button>
-        <UIKit.Button view="normal" size="l" pin="clear-circle">Right</UIKit.Button>
+        <UIKit.Button view="normal" size="l" pin="clear-circle">End</UIKit.Button>
     </div>
     <div>
         <UIKit.Button view="outlined" pin="brick-clear">1</UIKit.Button>
@@ -433,9 +433,9 @@ LANDING_BLOCK-->
     <Button view="action" size="l" pin="brick-round">...</Button>
 </div>
 <div>
-    <Button view="normal" size="l" pin="circle-clear">Left</Button>
+    <Button view="normal" size="l" pin="circle-clear">Start</Button>
     <Button view="normal" size="l" pin="brick-brick" selected>Center</Button>
-    <Button view="normal" size="l" pin="clear-circle">Right</Button>
+    <Button view="normal" size="l" pin="clear-circle">End</Button>
 </div>
 <div>
     <Button view="outlined" pin="brick-clear">1</Button>

diff --git a/src/components/Button/__tests__/Button.test.tsx b/src/components/Button/__tests__/Button.test.tsx
@@ -91,7 +91,7 @@ describe('Button', () => {
         render(
             <Button>
                 <Gear data-qa={iconQaId} width={20} height={20} />
-                Left
+                Start
             </Button>,
         );
 
@@ -127,7 +127,7 @@ describe('Button', () => {
                 <Button.Icon>
                     <Gear data-qa={iconQaId} width={20} height={20} />
                 </Button.Icon>
-                Left
+                Start
             </Button>,
         );
 

diff --git a/styles/mixins.scss b/styles/mixins.scss
@@ -83,20 +83,32 @@
         }
 
         &#{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {
-            border-radius: $radius 0 0 $radius;
+            border-start-start-radius: $radius;
+            border-start-end-radius: 0;
+            border-end-start-radius: $radius;
+            border-end-end-radius: 0;
         }
 
         &#{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {
-            border-radius: 0 $radius $radius 0;
+            border-start-start-radius: 0;
+            border-start-end-radius: $radius;
+            border-end-start-radius: 0;
+            border-end-end-radius: $radius;
         }
 
         &#{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {
-            border-radius: $radius 0 0 $radius;
+            border-start-start-radius: $radius;
+            border-start-end-radius: 0;
+            border-end-start-radius: $radius;
+            border-end-end-radius: 0;
             border-inline-end: 0;
         }
 
         &#{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {
-            border-radius: 0 $radius $radius 0;
+            border-start-start-radius: 0;
+            border-start-end-radius: $radius;
+            border-end-start-radius: 0;
+            border-end-end-radius: $radius;
             border-inline-start: 0;
         }
 
@@ -111,20 +123,32 @@
         }
 
         &#{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {
-            border-radius: 100px 0 0 100px;
+            border-start-start-radius: 100px;
+            border-start-end-radius: 0;
+            border-end-start-radius: 100px;
+            border-end-end-radius: 0;
         }
 
         &#{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {
-            border-radius: 0 100px 100px 0;
+            border-start-start-radius: 0;
+            border-start-end-radius: 100px;
+            border-end-start-radius: 0;
+            border-end-end-radius: 100px;
         }
 
         &#{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {
-            border-radius: 100px 0 0 100px;
+            border-start-start-radius: 100px;
+            border-start-end-radius: 0;
+            border-end-start-radius: 100px;
+            border-end-end-radius: 0;
             border-inline-end: 0;
         }
 
         &#{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {
-            border-radius: 0 100px 100px 0;
+            border-start-start-radius: 0;
+            border-start-end-radius: 100px;
+            border-end-start-radius: 0;
+            border-end-end-radius: 100px;
             border-inline-start: 0;
         }
     }