feat(Settings): added onlyChild option to the Settings.Section (#298)

Co-authored-by: Angelina Gadzhieva <[email protected]>
gravity-ui · Aug 22, 2024 · 7fe46f5 · 7fe46f5
1 parent 8aeb001
commit 7fe46f5
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 2 deletions.
diff --git a/src/components/Settings/README.md b/src/components/Settings/README.md
@@ -46,6 +46,7 @@ The components provides layouting functionality of settings panel with the follo
 | header    | ReactNode |          |         | Header of section                                                             |
 | withBadge | boolean   |          |         | Show badge on a section and menu                                              |
 | showTitle | boolean   |          |         | Show section title. Prop is needed to hide title in simple settings on Mobile |
+| onlyChild | boolean   |          |         | Hide title if only one Settings.Section exists on page.                       |
 
 #### Settings.Item
 

diff --git a/src/components/Settings/Settings.scss b/src/components/Settings/Settings.scss
@@ -169,6 +169,14 @@ $block: '.#{variables.$ns}settings';
         & + & {
             margin-top: 32px;
         }
+
+        &_only-child:only-child &-item:first-of-type {
+            margin-top: 0px;
+        }
+
+        &_only-child:only-child &-heading {
+            display: none;
+        }
     }
 
     &__item {

diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
@@ -68,6 +68,7 @@ export interface SettingsSectionProps {
     children: React.ReactNode;
     withBadge?: boolean;
     showTitle?: boolean;
+    onlyChild?: boolean;
 }
 
 export interface SettingsItemProps {
@@ -232,7 +233,7 @@ function SettingsContent({
         return (
             <div
                 key={section.title}
-                className={b('section', {selected: isSelected})}
+                className={b('section', {selected: isSelected, 'only-child': section.onlyChild})}
                 ref={isSelected ? selected.selectedRef : undefined}
             >
                 {section.showTitle && (

diff --git a/src/components/Settings/__stories__/SettingsDemo.tsx b/src/components/Settings/__stories__/SettingsDemo.tsx
@@ -276,7 +276,7 @@ function renderGeneralSettings(
     return (
         <Settings.Group id="general" groupTitle="General">
             <Settings.Page id="appearance" title="Appearance" icon={{data: featureIcon}}>
-                <Settings.Section title="Appearance">
+                <Settings.Section title="Appearance" onlyChild={true}>
                     <Settings.Item title="Interface language">
                         <RadioButton
                             value={settings.lang ?? 'ru'}

diff --git a/src/components/Settings/collect-settings.ts b/src/components/Settings/collect-settings.ts
@@ -35,6 +35,7 @@ export interface SettingsPageSection {
     hidden?: boolean;
     withBadge?: boolean;
     showTitle?: boolean;
+    onlyChild?: boolean;
 }
 
 export interface SettingsItem {