fix(EntityStatus): fix buttons bg in selected table rows (#2835)

Author: artemmufazalov

src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss

@@ -1,14 +1,16 @@
 @use '../../styles/mixins.scss';
 
 .entity-status {
-    --button-width: 28px;
+    --button-width: 24px;
+    --entity-status-height: 20px;
+
     position: relative;
 
     display: inline-flex;
     align-items: center;
 
     max-width: 100%;
-    height: 100%;
+    height: var(--entity-status-height);
 
     @include mixins.body-2-typography();
 
@@ -18,16 +20,27 @@
 
     &__info-icon,
     &__clipboard-button {
-        color: var(--g-color-text-secondary);
+        // Default button height is 20px. When focused it has 24px height because of outline
+        // Negative offset is needed to prevent button to have bigger size when focused
+        --g-button-focus-outline-offset: -2px;
+        --g-button-focus-outline-width: 2px;
 
-        @include mixins.table-hover-appearing-button();
+        opacity: 0;
+        color: var(--g-color-text-secondary);
 
-        &_visible {
+        &_visible,
+        &:focus-visible,
+        &:hover,
+        .entity-status__wrapper:focus-within &,
+        .data-table__row:hover &,
+        .ydb-paginated-table__row:hover & {
             opacity: 1;
         }
-    }
 
-    &__info-icon {
+        &:focus-visible,
+        .entity-status__wrapper:focus-within {
+            background-color: var(--g-color-base-float);
+        }
         &:hover {
             color: var(--g-color-text-primary);
         }
@@ -38,6 +51,8 @@
 
         overflow: hidden;
 
+        height: var(--entity-status-height);
+
         &_with-clipboard-button {
             padding-right: var(--button-width);
         }
@@ -63,34 +78,33 @@
         gap: var(--g-spacing-1);
 
         width: 0;
-        height: 100%;
 
-        &_visible {
+        &_visible,
+        &:focus-within {
             width: min-content;
-            padding: var(--g-spacing-1);
 
             background-color: var(--g-color-base-background);
         }
 
         .data-table__row:hover &,
-        .ydb-paginated-table__row:hover &,
-        .ydb-tree-view__item & {
+        .ydb-paginated-table__row:hover & {
             width: min-content;
-            padding: var(--g-spacing-1);
 
             background-color: var(--ydb-data-table-color-hover);
         }
     }
 
-    &__label {
-        margin-right: 2px;
-
-        color: var(--g-color-text-complementary);
+    &__wrapper_with-clipboard-button &__link {
+        width: calc(100% + var(--button-width));
+    }
 
-        @include mixins.body-2-typography();
+    &__wrapper_with-info-button &__link {
+        width: calc(100% + var(--button-width));
+    }
 
-        &_size_l {
-            font-size: var(--g-text-header-2-font-size);
+    &__wrapper_with-clipboard-button {
+        &.entity-status__wrapper_with-info-button .entity-status__link {
+            width: calc(100% + 2 * var(--button-width));
         }
     }
 
@@ -99,26 +113,11 @@
         overflow: hidden;
 
         width: 100%;
-        margin-top: 5px;
 
         white-space: nowrap;
         text-overflow: ellipsis;
     }
 
-    &__wrapper_with-clipboard-button &__link {
-        width: calc(100% + var(--button-width));
-    }
-
-    &__wrapper_with-info-button &__link {
-        width: calc(100% + var(--button-width));
-    }
-
-    &__wrapper_with-clipboard-button {
-        &.entity-status__wrapper_with-info-button .entity-status__link {
-            width: calc(100% + 2 * var(--button-width));
-        }
-    }
-
     &__link_with-left-trim {
         text-align: end;
         direction: rtl;
@@ -127,19 +126,4 @@
             unicode-bidi: plaintext;
         }
     }
-
-    &__label {
-        &_state_blue {
-            color: var(--ydb-color-status-blue);
-        }
-        &_state_yellow {
-            color: var(--ydb-color-status-yellow);
-        }
-        &_state_orange {
-            color: var(--ydb-color-status-orange);
-        }
-        &_state_red {
-            color: var(--ydb-color-status-red);
-        }
-    }
 }

src/components/DeveloperUILinkButton/DeveloperUILinkButton.tsx

@@ -18,9 +18,7 @@ interface EntityStatusProps {
     status?: EFlag;
     name?: string;
     renderName?: (name?: string) => React.ReactNode;
-    label?: string;
     path?: string;
-    iconPath?: string;
 
     size?: StatusIconSize;
     mode?: StatusIconMode;
@@ -45,9 +43,7 @@ export function EntityStatus({
     status = EFlag.Grey,
     name = '',
     renderName = defaultRenderName,
-    label,
     path,
-    iconPath,
 
     size = 's',
     mode = 'color',
@@ -71,13 +67,7 @@ export function EntityStatus({
 
         return <StatusIcon className={b('icon')} status={status} size={size} mode={mode} />;
     };
-    const renderStatusLink = (href: string) => {
-        return (
-            <UIKitLink target="_blank" href={href}>
-                {renderIcon()}
-            </UIKitLink>
-        );
-    };
+
     const renderLink = () => {
         if (path) {
             if (externalLink) {
@@ -96,14 +86,10 @@ export function EntityStatus({
         }
         return name && <span className={b('name')}>{renderName(name)}</span>;
     };
+
     return (
         <div className={b(null, className)}>
-            {iconPath ? renderStatusLink(iconPath) : renderIcon()}
-            {label && (
-                <span title={label} className={b('label', {size, state: status.toLowerCase()})}>
-                    {label}
-                </span>
-            )}
+            {renderIcon()}
             {(path || name) && (
                 <div
                     className={b('wrapper', {
@@ -127,15 +113,15 @@ export function EntityStatus({
                                     placement={['top-start', 'bottom-start']}
                                     onOpenChange={(visible) => setInfoIconHovered(visible)}
                                 >
-                                    <Button view="normal" size="xs">
-                                        <Icon
-                                            data={CircleInfo}
-                                            size="12"
-                                            className={b('info-icon', {
-                                                visible:
-                                                    clipboardButtonAlwaysVisible || infoIconHovered,
-                                            })}
-                                        />
+                                    <Button
+                                        view="normal"
+                                        size="xs"
+                                        className={b('info-icon', {
+                                            visible:
+                                                clipboardButtonAlwaysVisible || infoIconHovered,
+                                        })}
+                                    >
+                                        <Icon data={CircleInfo} size="12" />
                                     </Button>
                                 </Popover>
                             )}

src/components/DeveloperUILinkButton/i18n/en.json

@@ -284,29 +284,3 @@
         --entity-state-border-color: var(--g-color-line-generic-hover);
     }
 }
-
-@mixin table-hover-appearing-button {
-    opacity: 0;
-
-    &_visible,
-    &:focus-visible {
-        opacity: 1;
-    }
-    &:focus-visible {
-        position: absolute;
-        top: 2px;
-        right: 2px;
-
-        background-color: var(--g-color-base-float);
-    }
-    .data-table__row:hover &,
-    .ydb-paginated-table__row:hover & {
-        opacity: 1;
-    }
-    .data-table__row:hover &:focus-visible,
-    .ydb-paginated-table__row:hover &:focus-visible {
-        position: static;
-
-        background-color: unset;
-    }
-}