diff --git a/src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss b/src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss deleted file mode 100644 index 8060a60cbc..0000000000 --- a/src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '../../styles/mixins.scss'; - -.developer-ui-link-button { - @include mixins.table-hover-appearing-button(); -} diff --git a/src/components/DeveloperUILinkButton/DeveloperUILinkButton.tsx b/src/components/DeveloperUILinkButton/DeveloperUILinkButton.tsx deleted file mode 100644 index fc5041e900..0000000000 --- a/src/components/DeveloperUILinkButton/DeveloperUILinkButton.tsx +++ /dev/null @@ -1,45 +0,0 @@ -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 = { - 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, - size = 's', -}: DeveloperUiLinkProps) { - return ( - - ); -} diff --git a/src/components/DeveloperUILinkButton/i18n/en.json b/src/components/DeveloperUILinkButton/i18n/en.json deleted file mode 100644 index 47d941aadd..0000000000 --- a/src/components/DeveloperUILinkButton/i18n/en.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "action_go-to": "Go to {{href}}" -} diff --git a/src/components/DeveloperUILinkButton/i18n/index.ts b/src/components/DeveloperUILinkButton/i18n/index.ts deleted file mode 100644 index fc4abb3d22..0000000000 --- a/src/components/DeveloperUILinkButton/i18n/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {registerKeysets} from '../../../utils/i18n'; - -import en from './en.json'; - -const COMPONENT = 'ydb-developer-ui-button'; - -export default registerKeysets(COMPONENT, {en}); diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss index d1cfc99b0a..9497337e21 100644 --- a/src/components/EntityStatus/EntityStatus.scss +++ b/src/components/EntityStatus/EntityStatus.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); - } - } } diff --git a/src/components/EntityStatus/EntityStatus.tsx b/src/components/EntityStatus/EntityStatus.tsx index f8f920e4a2..a23a1b016d 100644 --- a/src/components/EntityStatus/EntityStatus.tsx +++ b/src/components/EntityStatus/EntityStatus.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 ; }; - const renderStatusLink = (href: string) => { - return ( - - {renderIcon()} - - ); - }; + const renderLink = () => { if (path) { if (externalLink) { @@ -96,14 +86,10 @@ export function EntityStatus({ } return name && {renderName(name)}; }; + return (
- {iconPath ? renderStatusLink(iconPath) : renderIcon()} - {label && ( - - {label} - - )} + {renderIcon()} {(path || name) && (
setInfoIconHovered(visible)} > - )} diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index 8bd35440b2..a991d07f51 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -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; - } -}