Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 8, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions src/components/DeveloperUILinkButton/DeveloperUILinkButton.scss
View file
Open in desktop

This file was deleted.

45 changes: 0 additions & 45 deletions src/components/DeveloperUILinkButton/DeveloperUILinkButton.tsx
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions src/components/DeveloperUILinkButton/i18n/en.json
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions src/components/DeveloperUILinkButton/i18n/index.ts
View file
Open in desktop

This file was deleted.

84 changes: 34 additions & 50 deletions src/components/EntityStatus/EntityStatus.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
@use '../../styles/mixins.scss';

.entity-status {
--button-width: 28px;
--button-width: 24px;
Copy link
Member Author

@artemmufazalov artemmufazalov Sep 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With no paddings there less width is needed

--entity-status-height: 20px;
Copy link
Member Author

@artemmufazalov artemmufazalov Sep 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without fixed height this element for some reason has extra 4px empty height. It was not visible because of 5px margin on link element. It can be fixed by display flex / inline-flex, but such display break buttons layout.

EntityStatus without fixed height and with display:block:
Screenshot 2025-09-04 at 15 36 02


position: relative;

display: inline-flex;
align-items: center;

max-width: 100%;
height: 100%;
height: var(--entity-status-height);

@include mixins.body-2-typography();

Expand All @@ -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);
}
Expand All @@ -38,6 +51,8 @@

overflow: hidden;

height: var(--entity-status-height);

&_with-clipboard-button {
padding-right: var(--button-width);
}
Expand All @@ -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);
Copy link
Member Author

@artemmufazalov artemmufazalov Sep 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed paddings to fix selected rows view

Screenshot 2025-09-04 at 15 37 21


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));
}
}

Expand All @@ -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;
Expand All @@ -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);
}
}
}
38 changes: 12 additions & 26 deletions src/components/EntityStatus/EntityStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,7 @@ interface EntityStatusProps {
status?: EFlag;
name?: string;
renderName?: (name?: string) => React.ReactNode;
label?: string;
path?: string;
iconPath?: string;
Copy link
Member Author

@artemmufazalov artemmufazalov Sep 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed unused props to make component a little easier


size?: StatusIconSize;
mode?: StatusIconMode;
Expand All @@ -45,9 +43,7 @@ export function EntityStatus({
status = EFlag.Grey,
name = '',
renderName = defaultRenderName,
label,
path,
iconPath,

size = 's',
mode = 'color',
Expand All @@ -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) {
Expand All @@ -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', {
Expand All @@ -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>
)}
Expand Down
26 changes: 0 additions & 26 deletions src/styles/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Loading