diff --git a/src/components/Settings/README.md b/src/components/Settings/README.md index e85e190..a86c184 100644 --- 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 index c6dcc31..338eb59 100644 --- 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 index f8fcb87..86463eb 100644 --- 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 (