Merge pull request #56 from gravity-ui/fix-arrow-link-position-CLOUDFRONT-13236

fix: link arrow position

Author: gorgeousvlad

src/components/Link/Link.scss

@@ -22,11 +22,18 @@ $block: '.#{$ns}link-block';
         }
 
         &_has-arrow {
+            display: inherit;
+            white-space: nowrap;
+
             &:hover,
             &:active {
                 --pc-text-header-color: inherit;
                 color: var(--yc-color-text-link);
             }
+
+            #{$root}__content {
+                white-space: normal;
+            }
         }
 
         &:hover {
@@ -44,8 +51,7 @@ $block: '.#{$ns}link-block';
 
     &__arrow {
         position: relative;
-        margin-left: 2px;
-
+        top: 2px;
         transition: transform 0.3s $ease-out-cubic;
         transform: rotate(-90deg);
     }
@@ -57,6 +63,10 @@ $block: '.#{$ns}link-block';
 
         &_m {
             @include text-size(body-2);
+
+            #{$root}__arrow {
+                top: 1px;
+            }
         }
 
         &_s {

src/components/Link/Link.tsx

@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, {Fragment, useContext} from 'react';
 import {Icon} from '@gravity-ui/uikit';
 
 import {block, getLinkProps, setUrlTld} from '../../utils';
@@ -13,6 +13,7 @@ import {useMetrika} from '../../hooks/useMetrika';
 import './Link.scss';
 
 const b = block('link-block');
+const WORD_JOINER_SYM = '\u200b';
 
 export type LinkFullProps = LinkProps & ClassNameProps;
 
@@ -23,9 +24,9 @@ function getArrowSize(size: TextSize) {
         case 'm':
             return 18;
         case 's':
-            return 12;
+            return 14;
         default:
-            return 12;
+            return 14;
     }
 }
 
@@ -79,13 +80,16 @@ const LinkBlock = (props: WithChildren<LinkFullProps>) => {
                         onClick={onClick}
                         {...linkProps}
                     >
-                        {children || text}
+                        <span className={b('content')}>{children || text}</span>
                         {arrow && (
-                            <Icon
-                                className={b('arrow')}
-                                data={Chevron}
-                                size={getArrowSize(textSize)}
-                            />
+                            <Fragment>
+                                {WORD_JOINER_SYM}
+                                <Icon
+                                    className={b('arrow')}
+                                    data={Chevron}
+                                    size={getArrowSize(textSize)}
+                                />
+                            </Fragment>
                         )}
                     </a>
                 );

src/components/Link/__stories__/Link.stories.tsx

@@ -75,7 +75,7 @@ const WithChildrenTemplate: Story<LinkFullProps> = (args) => (
 export const Default = DefaultTemplate.bind({});
 export const ThemesSizes = ThemesSizesTemplate.bind({});
 export const NormalWithChildren = WithChildrenTemplate.bind({});
-export const NormalArrow = DefaultTemplate.bind({});
+export const NormalArrow = SizesTemplate.bind({});
 export const NormalForDarkTheme = DarkTemplate.bind({});
 export const UnderlineWithChildren = WithChildrenTemplate.bind({});
 export const BackWithChildren = WithChildrenTemplate.bind({});