Skip to content

feat(Settings.Item): add the ability to hide item title #492

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 5 commits into from
Nov 21, 2025
Merged

feat(Settings.Item): add the ability to hide item title #492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a588d65
refactor: `@import` -> `@use`
ogonkov Nov 21, 2025
5670d21
feat(Settings.Item): add the ability to hide item title
ogonkov Nov 21, 2025
aa8ac22
chore: add new item type to mobile story
ogonkov Nov 21, 2025
b82f34c
test: update screenshots
ogonkov Nov 21, 2025
cb659ef
refactor: change `renderTitleComponent` signature
ogonkov Nov 21, 2025
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
23 changes: 13 additions & 10 deletions src/components/Settings/Settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@use '~@gravity-ui/uikit/styles/mixins';
Copy link
Collaborator

@DarkGenius DarkGenius Nov 21, 2025

Choose a reason for hiding this comment

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

For what?

Copy link
Contributor Author

@ogonkov ogonkov Nov 21, 2025

Choose a reason for hiding this comment

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

To reduce amount of warnings about @import deprecation

@use '../variables';

@import '../../../styles/mixins';

$block: '.#{variables.$ns}settings';

#{$block} {
Expand Down Expand Up @@ -53,7 +52,7 @@ $block: '.#{variables.$ns}settings';

#{$block}__section {
&-heading {
@include text-subheader-3;
@include mixins.text-subheader-3;
}

&-subheader {
Expand Down Expand Up @@ -85,11 +84,11 @@ $block: '.#{variables.$ns}settings';
}

&-heading {
@include text-body-2();
@include mixins.text-body-2();
}

&-description {
@include text-body-1();
@include mixins.text-body-1();
}

&_mode_row {
Expand All @@ -106,7 +105,7 @@ $block: '.#{variables.$ns}settings';
}

#{$block}__not-found {
@include text-body-2;
@include mixins.text-body-2;
justify-items: start;
color: var(--g-color-text-hint);
margin: 20px 0 0 20px;
Expand All @@ -132,7 +131,7 @@ $block: '.#{variables.$ns}settings';
}

&__heading {
@include text-subheader-2;
@include mixins.text-subheader-2;
margin: 20px 20px 0;
}

Expand All @@ -158,7 +157,7 @@ $block: '.#{variables.$ns}settings';
}

&-heading {
@include text-subheader-2;
@include mixins.text-subheader-2;
margin: 0;
}

Expand All @@ -184,6 +183,10 @@ $block: '.#{variables.$ns}settings';
grid-template-columns: 216px 1fr;
justify-items: start;

&_title_hide {
grid-template-columns: 1fr;
}

&_align_top {
align-items: start;
}
Expand Down Expand Up @@ -211,7 +214,7 @@ $block: '.#{variables.$ns}settings';
}

&-description {
@include text-caption-2();
@include mixins.text-caption-2();
display: block;
margin-top: 2px;
padding-right: 20px;
Expand All @@ -236,7 +239,7 @@ $block: '.#{variables.$ns}settings';
}

&__found {
@include text-accent;
@include mixins.text-accent;
background: var(--g-color-base-selection);
}
}
55 changes: 32 additions & 23 deletions src/components/Settings/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,33 +247,42 @@ Settings.Item = function SettingsItem(setting: SettingsItemProps) {
const isSettingSelected = selected.setting && selected.setting.id === id;

const {renderRightAdornment, showRightAdornmentOnHover} = useSettingsContext();
const titleNode = (
<span className={b('item-title', {badge: withBadge})}>
{renderTitleComponent(highlightedTitle)}
</span>
);
const titleComponent = renderTitleComponent(highlightedTitle);
const titleNode = <span className={b('item-title', {badge: withBadge})}>{titleComponent}</span>;

const showTitle = titleComponent !== null;

return (
<div
className={b('item', {align, mode, selected: isSettingSelected})}
className={b('item', {
align,
mode,
selected: isSettingSelected,
title: showTitle ? 'show' : 'hide',
})}
ref={isSettingSelected ? selected.selectedRef : undefined}
>
<label className={b('item-heading')} id={labelId}>
{renderRightAdornment ? (
<Flex className={b('item-title-wrapper')} gap={3}>
{titleNode}
<div
className={b('item-right-adornment', {
hidden: showRightAdornmentOnHover,
})}
>
{renderRightAdornment(setting)}
</div>
</Flex>
) : (
titleNode
)}
{description ? <span className={b('item-description')}>{description}</span> : null}
</label>
{showTitle ? (
<label className={b('item-heading')} id={labelId}>
{renderRightAdornment ? (
<Flex className={b('item-title-wrapper')} gap={3}>
{titleNode}
<div
className={b('item-right-adornment', {
hidden: showRightAdornmentOnHover,
})}
>
{renderRightAdornment(setting)}
</div>
</Flex>
) : (
titleNode
)}
{description ? (
<span className={b('item-description')}>{description}</span>
) : null}
</label>
) : null}
<div className={b('item-content')}>{children}</div>
</div>
);
Expand Down
Binary file modified ...isual.test.tsx-snapshots/Settings-render-story-Showcase-dark-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ....visual.test.tsx-snapshots/Settings-render-story-Showcase-dark-webkit-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...sual.test.tsx-snapshots/Settings-render-story-Showcase-light-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...visual.test.tsx-snapshots/Settings-render-story-Showcase-light-webkit-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ual.test.tsx-snapshots/Settings-render-story-ViewMobile-dark-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...isual.test.tsx-snapshots/Settings-render-story-ViewMobile-dark-webkit-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...al.test.tsx-snapshots/Settings-render-story-ViewMobile-light-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...sual.test.tsx-snapshots/Settings-render-story-ViewMobile-light-webkit-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions src/components/Settings/__stories__/SettingsDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,13 @@ export const SettingsComponent = React.memo(
}}
/>
</Settings.Item>
<Settings.Item
title="Full width"
id="full-width"
renderTitleComponent={() => null}
>
Place to display full width content
</Settings.Item>
</Settings.Section>
</Settings.Page>
<Settings.Page id="appearance" title="Appearance" icon={{data: Gear}}>
Expand Down
7 changes: 7 additions & 0 deletions src/components/Settings/__stories__/SettingsMobileDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,13 @@ export const SettingsMobileComponent = React.memo(
</Button>
</Settings.Item>
)}
<Settings.Item
title="Full width"
id="full-width"
renderTitleComponent={() => null}
>
Place to display full width content
</Settings.Item>
</Settings.Section>
</Settings.Page>
<Settings.Page id="appearance" title="Appearance">
Expand Down
4 changes: 4 additions & 0 deletions src/components/Settings/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,10 @@ export interface SettingsItemProps {
labelId?: string;
title: string;
highlightedTitle?: React.ReactNode | null;
/**
* Method to change rendering of title
* When method returns null, whole label column is not rendered
*/
renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;
align?: 'top' | 'center';
children: React.ReactNode;
Expand Down
Loading