feat: added right adornments for settings items (#110)

* feat: added right adornments for settings items * fix: fixed tags styles in AsideHeader stories --------- Co-authored-by: sunduckcow <[email protected]>
gravity-ui · Sep 27, 2023 · fe14e64 · fe14e64
1 parent 131e465
commit fe14e64
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 7 deletions.
diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss
@@ -78,3 +78,10 @@ body {
         padding: 20px;
     }
 }
+
+.composite-bar-showcase__tag {
+    color: var(--g-color-text-positive);
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.3px;
+}
diff --git a/src/components/Settings/Settings.scss b/src/components/Settings/Settings.scss
@@ -195,6 +195,14 @@ $block: '.#{variables.$ns}settings';
             padding-right: 20px;
             color: var(--g-color-text-secondary);
         }
+
+        &-right-adornment_hidden {
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+        &:hover &-right-adornment_hidden {
+            opacity: 1;
+        }
     }
 
     &__found {

diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {block} from '../utils/cn';
 import identity from 'lodash/identity';
 
-import {IconProps, Loader} from '@gravity-ui/uikit';
+import {Flex, IconProps, Loader} from '@gravity-ui/uikit';
 import {SettingsSearch} from './SettingsSearch/SettingsSearch';
 import {SettingsMenu, SettingsMenuInstance} from './SettingsMenu/SettingsMenu';
 import {SettingsMenuMobile} from './SettingsMenuMobile/SettingsMenuMobile';
@@ -29,6 +29,8 @@ export interface SettingsProps {
     loading?: boolean;
     view?: 'normal' | 'mobile';
     onClose?: () => void;
+    renderRightAdornment?: (item: Pick<SettingsItemProps, 'title'>) => React.ReactNode;
+    showRightAdornmentOnHover?: boolean;
 }
 
 export interface SettingsGroupProps {
@@ -62,11 +64,20 @@ export interface SettingsItemProps {
     description?: string;
 }
 
+export interface SettingsContextType
+    extends Pick<SettingsProps, 'renderRightAdornment' | 'showRightAdornmentOnHover'> {}
+
+const SettingsContext = React.createContext<SettingsContextType>({});
+
+export const useSettingsContext = () => React.useContext(SettingsContext);
+
 export function Settings({
     loading,
     renderLoading,
     children,
     view = 'normal',
+    renderRightAdornment,
+    showRightAdornmentOnHover = true,
     ...props
 }: SettingsProps) {
     if (loading) {
@@ -82,9 +93,11 @@ export function Settings({
     }
 
     return (
-        <SettingsContent view={view} {...props}>
-            {children}
-        </SettingsContent>
+        <SettingsContext.Provider value={{renderRightAdornment, showRightAdornmentOnHover}}>
+            <SettingsContent view={view} {...props}>
+                {children}
+            </SettingsContent>
+        </SettingsContext.Provider>
     );
 }
 
@@ -284,12 +297,27 @@ Settings.Item = function SettingsItem({
     mode,
     description,
 }: SettingsItemProps) {
+    const {renderRightAdornment, showRightAdornmentOnHover} = useSettingsContext();
+    const titleNode = (
+        <span className={b('item-title', {badge: withBadge})}>{renderTitleComponent(title)}</span>
+    );
     return (
         <div className={b('item', {align, mode})}>
             <label className={b('item-heading')}>
-                <span className={b('item-title', {badge: withBadge})}>
-                    {renderTitleComponent(title)}
-                </span>
+                {renderRightAdornment ? (
+                    <Flex className={b('item-title-wrapper')} gap={3}>
+                        {titleNode}
+                        <div
+                            className={b('item-right-adornment', {
+                                hidden: showRightAdornmentOnHover,
+                            })}
+                        >
+                            {renderRightAdornment({title})}
+                        </div>
+                    </Flex>
+                ) : (
+                    titleNode
+                )}
                 {description ? <span className={b('item-description')}>{description}</span> : null}
             </label>
             <div className={b('item-content')}>{children}</div>

diff --git a/src/components/Settings/__stories__/SettingsDemo.tsx b/src/components/Settings/__stories__/SettingsDemo.tsx
@@ -67,6 +67,10 @@ export const SettingsComponent = React.memo(
                     console.log({page});
                 }}
                 onClose={onClose}
+                renderRightAdornment={({title}) => (
+                    <HelpPopover content={`Some text for ${title}`} />
+                )}
+                showRightAdornmentOnHover={true} // true by default
             >
                 <Settings.Group id="arcanum" groupTitle="Arcanum">
                     <Settings.Page id="features" title="Features" icon={{data: featureIcon}}>