fix(suite): restructure SettingsSection to properly display explanato…

…ry tooltips
trezor · Feb 12, 2025 · c770f64 · c770f64
1 parent e925744
commit c770f64
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git a/packages/components/src/components/InfoItem/InfoItem.tsx b/packages/components/src/components/InfoItem/InfoItem.tsx
@@ -44,6 +44,7 @@ const Container = styled.div<ContainerProps>`
 
 export type InfoItemProps = AllowedFrameProps &
     AllowedTextProps & {
+        allowTextWrap?: boolean;
         children?: ReactNode;
         direction?: FlexDirection;
         iconName?: IconName;
@@ -56,6 +57,7 @@ export type InfoItemProps = AllowedFrameProps &
     };
 
 export const InfoItem = ({
+    allowTextWrap = false,
     children,
     label,
     direction = 'column',
@@ -79,6 +81,7 @@ export const InfoItem = ({
                 gap={gap ?? (isRow ? spacings.md : mapTypographyStyleToLabelGap(typographyStyle))}
             >
                 <Row
+                    alignItems="start"
                     gap={mapTypographyStyleToIconGap(typographyStyle)}
                     width={labelWidth}
                     flex={labelWidth ? '0 0 auto' : '1 0 auto'}
@@ -94,7 +97,7 @@ export const InfoItem = ({
                         variant={variant}
                         typographyStyle={typographyStyle}
                         as="div"
-                        ellipsisLineCount={1}
+                        ellipsisLineCount={allowTextWrap ? undefined : 1}
                     >
                         {label}
                     </Text>

diff --git a/packages/suite/src/components/settings/SettingsSection.tsx b/packages/suite/src/components/settings/SettingsSection.tsx
@@ -1,24 +1,44 @@
 import React, { ReactNode } from 'react';
 
-import { Card, Column, IconName, InfoItem, useMediaQuery, variables } from '@trezor/components';
+import {
+    Card,
+    Column,
+    Icon,
+    IconName,
+    InfoItem,
+    Tooltip,
+    useMediaQuery,
+    variables,
+} from '@trezor/components';
 import { spacings } from '@trezor/theme';
 
 type SettingsSectionProps = {
     title: ReactNode;
     icon?: IconName;
     className?: string;
     children?: ReactNode;
+    tooltipText?: ReactNode;
 };
 
-export const SettingsSection = ({ title, icon, children }: SettingsSectionProps) => {
+export const SettingsSection = ({ title, icon, children, tooltipText }: SettingsSectionProps) => {
     const isBelowLaptop = useMediaQuery(`(max-width: ${variables.SCREEN_SIZE.LG})`);
 
     return (
         <InfoItem
+            allowTextWrap
             direction={isBelowLaptop ? 'column' : 'row'}
             labelWidth={250}
             iconName={icon}
-            label={title}
+            label={
+                <>
+                    {title}
+                    {tooltipText && (
+                        <Tooltip isInline content={tooltipText}>
+                            <Icon name="question" size="medium" />
+                        </Tooltip>
+                    )}
+                </>
+            }
             variant="default"
             typographyStyle="titleSmall"
             verticalAlignment="top"

diff --git a/packages/suite/src/views/settings/SettingsCoins/SettingsCoins.tsx b/packages/suite/src/views/settings/SettingsCoins/SettingsCoins.tsx
@@ -128,11 +128,8 @@ export const SettingsCoins = () => {
             </SettingsSection>
 
             <SettingsSection
-                title={
-                    <Tooltip content={<Translation id="TR_TESTNET_COINS_DESCRIPTION" />} hasIcon>
-                        <Translation id="TR_TESTNET_COINS" />
-                    </Tooltip>
-                }
+                tooltipText={<Translation id="TR_TESTNET_COINS_DESCRIPTION" />}
+                title={<Translation id="TR_TESTNET_COINS" />}
                 icon="coin"
             >
                 <SettingsSectionItem anchorId={SettingsAnchor.TestnetCrypto}>
@@ -142,14 +139,8 @@ export const SettingsCoins = () => {
 
             {showUnsupportedCoins && (
                 <SettingsSection
-                    title={
-                        <Tooltip
-                            content={<Translation id="TR_UNSUPPORTED_COINS_DESCRIPTION" />}
-                            hasIcon
-                        >
-                            <Translation id="TR_UNSUPPORTED_COINS" />
-                        </Tooltip>
-                    }
+                    tooltipText={<Translation id="TR_UNSUPPORTED_COINS_DESCRIPTION" />}
+                    title={<Translation id="TR_UNSUPPORTED_COINS" />}
                     icon="coin"
                 >
                     <SettingsSectionItem anchorId={SettingsAnchor.UnsupportedCrypto}>