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;