diff --git a/packages/client/src/components/block-defaults/input-block/config.tsx b/packages/client/src/components/block-defaults/input-block/config.tsx index e6009a5293..2499aa070f 100644 --- a/packages/client/src/components/block-defaults/input-block/config.tsx +++ b/packages/client/src/components/block-defaults/input-block/config.tsx @@ -101,6 +101,7 @@ export const config: BlockConfig = { label="Rows" path="rows" type="number" + description="This will determine how many rows are displayed on text input" /> ), }, diff --git a/packages/client/src/components/block-defaults/select-block/config.tsx b/packages/client/src/components/block-defaults/select-block/config.tsx index 9e009c9bec..06ec53f2d8 100644 --- a/packages/client/src/components/block-defaults/select-block/config.tsx +++ b/packages/client/src/components/block-defaults/select-block/config.tsx @@ -52,6 +52,7 @@ export const config: BlockConfig = { id={id} label="Enable Multi Select" path="multiple" + description="This setting will enable the multi-select feature on the select input" /> ), }, diff --git a/packages/client/src/components/block-defaults/text-block/config.tsx b/packages/client/src/components/block-defaults/text-block/config.tsx index a2a1ce9405..be86e9356c 100644 --- a/packages/client/src/components/block-defaults/text-block/config.tsx +++ b/packages/client/src/components/block-defaults/text-block/config.tsx @@ -46,6 +46,7 @@ export const config: BlockConfig = { id={id} label="Enable Typewriting Effect" path="isStreaming" + description="This setting will enable the typewriting effect on the text" /> ), }, diff --git a/packages/client/src/components/block-settings/BaseSettingSection.tsx b/packages/client/src/components/block-settings/BaseSettingSection.tsx index 64b7c0f33b..2e6cf215ee 100644 --- a/packages/client/src/components/block-settings/BaseSettingSection.tsx +++ b/packages/client/src/components/block-settings/BaseSettingSection.tsx @@ -1,5 +1,6 @@ import { ReactNode } from 'react'; -import { styled, Stack, Typography } from '@semoss/ui'; +import { styled, Stack, Typography, Tooltip } from '@semoss/ui'; +import HelpOutlineIcon from '@mui/icons-material/HelpOutline'; const StyledTypography = styled(Typography)(() => ({ width: '30%', @@ -13,6 +14,7 @@ export const BaseSettingSection = (props: { label: string; children: ReactNode; wide?: boolean; + description?: string; }) => { return ( {props.label} + {!!props.description?.length && ( + + + + )} { * Parse input as object to set value */ valueAsObject?: boolean; + + /** + * What to be displayed on the tooltip to explain setting + */ + description?: string; } export const InputSettings = observer( @@ -46,6 +51,7 @@ export const InputSettings = observer( secondaryPath = undefined, type = 'text', valueAsObject = false, + description, }: InputSettingsProps) => { const { data, setData } = useBlockSettings(id); @@ -124,7 +130,7 @@ export const InputSettings = observer( }; return ( - + { path: Paths['data'], 4>; resetValueOnChange?: boolean; + + /** + * Desciption that will show on tooltip, to inform user about the setting + */ + description?: string; } export const SwitchSettings = observer( ({ id, label = '', + description = '', path, resetValueOnChange = false, }: SwitchSettingsProps) => { @@ -97,7 +103,7 @@ export const SwitchSettings = observer( }; return ( - + {