feat: improve appearing controls styles (#1436)

Author: Raubzeug

src/components/ClipboardButton/ClipboardButton.tsx

@@ -1,12 +1,5 @@
-.developer-ui-link-button {
-    display: none;
-
-    &_visible {
-        display: inline-block;
-    }
+@import '../../styles/mixins.scss';
 
-    .data-table__row:hover &,
-    .ydb-paginated-table__row:hover & {
-        display: inline-block;
-    }
+.developer-ui-link-button {
+    @include table-hover-appearing-button();
 }

src/components/ClipboardButton/index.ts

@@ -1,22 +1,45 @@
 import {ArrowUpRightFromSquare} from '@gravity-ui/icons';
+import type {ButtonSize} from '@gravity-ui/uikit';
 import {Button, Icon} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 
+import i18n from './i18n';
+
 import './DeveloperUILinkButton.scss';
 
 const b = cn('developer-ui-link-button');
 
+const buttonSizeToIconSize: Record<ButtonSize, number> = {
+    xs: 14,
+    s: 16,
+    m: 16,
+    l: 18,
+    xl: 18,
+};
+
 interface DeveloperUiLinkProps {
     className?: string;
     visible?: boolean;
     href: string;
+    size?: ButtonSize;
 }
 
-export function DeveloperUILinkButton({href, visible = false, className}: DeveloperUiLinkProps) {
+export function DeveloperUILinkButton({
+    href,
+    visible = false,
+    className,
+    size = 's',
+}: DeveloperUiLinkProps) {
     return (
-        <Button size="s" href={href} className={b({visible}, className)} target="_blank">
-            <Icon data={ArrowUpRightFromSquare} />
+        <Button
+            size={size}
+            href={href}
+            className={b({visible}, className)}
+            target="_blank"
+            title={i18n('action_go-to', {href})}
+        >
+            <Icon data={ArrowUpRightFromSquare} size={buttonSizeToIconSize[size]} />
         </Button>
     );
 }

src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss

@@ -0,0 +1,3 @@
+{
+  "action_go-to": "Go to {{href}}"
+}

src/components/DeveloperUILinkButton/DeveloperUILinkButton.tsx

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-developer-ui-button';
+
+export default registerKeysets(COMPONENT, {en});

src/components/DeveloperUILinkButton/i18n/en.json

@@ -1,6 +1,8 @@
 @import '../../styles/mixins.scss';
 
 .entity-status {
+    position: relative;
+
     display: inline-flex;
     align-items: center;
 
@@ -14,24 +16,33 @@
     }
 
     &__clipboard-button {
+        color: var(--g-color-text-secondary);
+
+        @include table-hover-appearing-button();
+    }
+
+    &__controls-wrapper {
+        position: absolute;
+        top: 0;
+        right: 0;
+
         display: flex;
-        flex-shrink: 0;
+        align-items: center;
+        gap: var(--g-spacing-1);
 
-        margin-left: var(--g-spacing-2);
+        width: 0;
+        height: 100%;
 
-        opacity: 0;
-        color: var(--g-color-text-secondary);
+        background-color: var(--g-color-base-float);
 
-        &_visible,
-        &:focus-visible {
-            opacity: 1;
+        .data-table__row:hover &,
+        .ydb-paginated-table__row:hover &,
+        .ydb-tree-view__item & {
+            width: min-content;
+            padding: var(--g-spacing-1);
         }
     }
 
-    &__additional-controls {
-        margin-left: var(--g-spacing-1);
-    }
-
     &__label {
         margin-right: 2px;
 

src/components/DeveloperUILinkButton/i18n/index.ts

@@ -1,8 +1,7 @@
-import {Link as UIKitLink} from '@gravity-ui/uikit';
+import {ClipboardButton, Link as UIKitLink} from '@gravity-ui/uikit';
 
 import {EFlag} from '../../types/api/enums';
 import {cn} from '../../utils/cn';
-import {ClipboardButton} from '../ClipboardButton';
 import {InternalLink} from '../InternalLink/InternalLink';
 import {StatusIcon} from '../StatusIcon/StatusIcon';
 import type {StatusIconMode, StatusIconSize} from '../StatusIcon/StatusIcon';
@@ -95,18 +94,21 @@ export function EntityStatus({
                 </span>
             )}
             <span className={b('link', {'with-left-trim': withLeftTrim})}>{renderLink()}</span>
-            {hasClipboardButton && (
-                <ClipboardButton
-                    text={name}
-                    size="s"
-                    className={b('clipboard-button', {
-                        visible: clipboardButtonAlwaysVisible,
-                    })}
-                />
-            )}
-            {additionalControls && (
-                <span className={b('additional-controls ')}>{additionalControls}</span>
-            )}
+            <div className={b('controls-wrapper')}>
+                {hasClipboardButton && (
+                    <ClipboardButton
+                        text={name}
+                        size="xs"
+                        view="normal"
+                        className={b('clipboard-button', {
+                            visible: clipboardButtonAlwaysVisible,
+                        })}
+                    />
+                )}
+                {additionalControls && (
+                    <span className={b('additional-controls')}>{additionalControls}</span>
+                )}
+            </div>
         </div>
     );
 }

src/components/EntityStatus/EntityStatus.scss

@@ -42,7 +42,9 @@ export const NodeHostWrapper = ({node, getNodeRef, database}: NodeHostWrapperPro
           })
         : undefined;
 
-    const additionalControls = nodeHref ? <DeveloperUILinkButton href={nodeHref} /> : null;
+    const additionalControls = nodeHref ? (
+        <DeveloperUILinkButton href={nodeHref} size="xs" />
+    ) : null;
 
     return (
         <CellWithPopover

src/components/EntityStatus/EntityStatus.tsx

@@ -7,7 +7,7 @@
     --paginated-table-cell-horizontal-padding: 10px;
 
     --paginated-table-border-color: var(--g-color-base-generic-hover);
-    --paginated-table-hover-color: var(--g-color-base-float-hover);
+    --paginated-table-hover-color: var(--g-color-base-float);
 
     width: 100%;
     @include body-2-typography();