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

Author: ogonkov

src/components/Settings/Settings.scss

@@ -183,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;
         }

src/components/Settings/Settings.tsx

@@ -241,6 +241,7 @@ Settings.Item = function SettingsItem(setting: SettingsItemProps) {
         renderTitleComponent = identity,
         mode,
         description,
+        showTitle = true,
     } = setting;
 
     const selected = useSettingsSelectionContext();
@@ -254,26 +255,35 @@ Settings.Item = function SettingsItem(setting: SettingsItemProps) {
     );
     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>
     );

src/components/Settings/__stories__/SettingsDemo.tsx

@@ -198,6 +198,9 @@ export const SettingsComponent = React.memo(
                                     }}
                                 />
                             </Settings.Item>
+                            <Settings.Item title="Full width" id="full-width" showTitle={false}>
+                                Place to display full width content
+                            </Settings.Item>
                         </Settings.Section>
                     </Settings.Page>
                     <Settings.Page id="appearance" title="Appearance" icon={{data: Gear}}>

src/components/Settings/types.ts

@@ -80,6 +80,11 @@ export interface SettingsItemProps {
     withBadge?: boolean;
     mode?: 'row';
     description?: React.ReactNode;
+    /**
+     * Render item with label or with content only
+     * @default true
+     */
+    showTitle?: boolean;
 }
 
 export type SettingsContentProps = Omit<SettingsProps, 'loading' | 'renderLoading'>;