diff --git a/src/components/Settings/Settings.scss b/src/components/Settings/Settings.scss
index d4a7748b..525c4d9f 100644
--- a/src/components/Settings/Settings.scss
+++ b/src/components/Settings/Settings.scss
@@ -1,7 +1,6 @@
+@use '~@gravity-ui/uikit/styles/mixins';
@use '../variables';
-@import '../../../styles/mixins';
-
$block: '.#{variables.$ns}settings';
#{$block} {
@@ -53,7 +52,7 @@ $block: '.#{variables.$ns}settings';
#{$block}__section {
&-heading {
- @include text-subheader-3;
+ @include mixins.text-subheader-3;
}
&-subheader {
@@ -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 {
@@ -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;
@@ -132,7 +131,7 @@ $block: '.#{variables.$ns}settings';
}
&__heading {
- @include text-subheader-2;
+ @include mixins.text-subheader-2;
margin: 20px 20px 0;
}
@@ -158,7 +157,7 @@ $block: '.#{variables.$ns}settings';
}
&-heading {
- @include text-subheader-2;
+ @include mixins.text-subheader-2;
margin: 0;
}
@@ -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;
}
@@ -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;
@@ -236,7 +239,7 @@ $block: '.#{variables.$ns}settings';
}
&__found {
- @include text-accent;
+ @include mixins.text-accent;
background: var(--g-color-base-selection);
}
}
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
index bb7a8de3..784ed4bf 100644
--- a/src/components/Settings/Settings.tsx
+++ b/src/components/Settings/Settings.tsx
@@ -247,33 +247,42 @@ Settings.Item = function SettingsItem(setting: SettingsItemProps) {
const isSettingSelected = selected.setting && selected.setting.id === id;
const {renderRightAdornment, showRightAdornmentOnHover} = useSettingsContext();
- const titleNode = (
-
- {renderTitleComponent(highlightedTitle)}
-
- );
+ const titleComponent = renderTitleComponent(highlightedTitle);
+ const titleNode = {titleComponent};
+
+ const showTitle = titleComponent !== null;
+
return (
-
+ {showTitle ? (
+
+ ) : null}
{children}
);
diff --git a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-dark-chromium-linux.png b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-dark-chromium-linux.png
index b069575e..e2c2ce0a 100644
Binary files a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-dark-chromium-linux.png and b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-dark-chromium-linux.png differ
diff --git a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-dark-webkit-linux.png b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-dark-webkit-linux.png
index 16df4659..cafe76c7 100644
Binary files a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-dark-webkit-linux.png and b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-dark-webkit-linux.png differ
diff --git a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-light-chromium-linux.png b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-light-chromium-linux.png
index dcd868ac..70b323e6 100644
Binary files a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-light-chromium-linux.png and b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-light-chromium-linux.png differ
diff --git a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-light-webkit-linux.png b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-light-webkit-linux.png
index ec5e0fab..3a978165 100644
Binary files a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-light-webkit-linux.png and b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-Showcase-light-webkit-linux.png differ
diff --git a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-dark-chromium-linux.png b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-dark-chromium-linux.png
index 2e2ebefe..c54c84c2 100644
Binary files a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-dark-chromium-linux.png and b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-dark-chromium-linux.png differ
diff --git a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-dark-webkit-linux.png b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-dark-webkit-linux.png
index f1d8e035..3daed57f 100644
Binary files a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-dark-webkit-linux.png and b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-dark-webkit-linux.png differ
diff --git a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-light-chromium-linux.png b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-light-chromium-linux.png
index 12b628af..905d86ca 100644
Binary files a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-light-chromium-linux.png and b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-light-chromium-linux.png differ
diff --git a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-light-webkit-linux.png b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-light-webkit-linux.png
index b23d7487..6e893a4c 100644
Binary files a/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-light-webkit-linux.png and b/src/components/Settings/__snapshots__/BurgerMenu.visual.test.tsx-snapshots/Settings-render-story-ViewMobile-light-webkit-linux.png differ
diff --git a/src/components/Settings/__stories__/SettingsDemo.tsx b/src/components/Settings/__stories__/SettingsDemo.tsx
index ea52794a..a7bb0602 100644
--- a/src/components/Settings/__stories__/SettingsDemo.tsx
+++ b/src/components/Settings/__stories__/SettingsDemo.tsx
@@ -198,6 +198,13 @@ export const SettingsComponent = React.memo(
}}
/>
+ null}
+ >
+ Place to display full width content
+
diff --git a/src/components/Settings/__stories__/SettingsMobileDemo.tsx b/src/components/Settings/__stories__/SettingsMobileDemo.tsx
index 766aa9cd..d66bd654 100644
--- a/src/components/Settings/__stories__/SettingsMobileDemo.tsx
+++ b/src/components/Settings/__stories__/SettingsMobileDemo.tsx
@@ -163,6 +163,13 @@ export const SettingsMobileComponent = React.memo(
)}
+ null}
+ >
+ Place to display full width content
+
diff --git a/src/components/Settings/types.ts b/src/components/Settings/types.ts
index 83f93058..f560e9a3 100644
--- a/src/components/Settings/types.ts
+++ b/src/components/Settings/types.ts
@@ -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;