From fe502f9b31fb607215cd5cf5da0c1cc77565de4c Mon Sep 17 00:00:00 2001 From: JelenaTakac Date: Wed, 16 Oct 2024 11:45:26 +0200 Subject: [PATCH 1/4] Reverted title and content props to Tooltip component --- src/components/tooltip/readme.md | 11 ++-- src/components/tooltip/tooltip.jsx | 24 +++------ src/components/tooltip/tooltip.stories.js | 63 ++++++++++------------- 3 files changed, 43 insertions(+), 55 deletions(-) diff --git a/src/components/tooltip/readme.md b/src/components/tooltip/readme.md index 39a13058..1fdee303 100644 --- a/src/components/tooltip/readme.md +++ b/src/components/tooltip/readme.md @@ -30,10 +30,13 @@ The `Tooltips` are small, interactive pop-up boxes that provide brief, informati - `"left-start"` - `"left-end"` -### label -**type:** `object` || `ReactComponent` -- **Object properties/format:** `{heading: 'Tooltip heading,' description: 'Tooltip description'}` -The label and label description also accepts a React component. +### `title` +- **Type:** `string` +- **Description:** Defines the title of the tooltip. It should be a simple text string that provides the heading or main subject of the tooltip + +### `content` +- **Type:** `string` | `ReactElement` +- **Description:** Provides detailed content for the tooltip. The content can be a plain string for a simple description or a custom ReactElement for more complex content, such as HTML or JSX components. ### `arrow` - **Type:** `boolean` diff --git a/src/components/tooltip/tooltip.jsx b/src/components/tooltip/tooltip.jsx index 9c8b43fd..a92ceec7 100644 --- a/src/components/tooltip/tooltip.jsx +++ b/src/components/tooltip/tooltip.jsx @@ -29,7 +29,8 @@ import { mergeRefs } from '../toaster/utils'; const Tooltip = ( { variant = 'dark', // 'light' | 'dark'; placement = 'bottom', // | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'; - label = {}, + title = '', + content, arrow = false, open, setOpen, @@ -140,21 +141,12 @@ const Tooltip = ( { { ...getFloatingProps() } >
- { isValidElement( label ) && label } - { ! isValidElement( label ) && label?.heading && ( - - { label.heading } - - ) } - { ! isValidElement( label ) && label?.description && ( -
- { isValidElement( label.description ) ? ( - label.description - ) : ( - { label.description } - ) } -
- ) } + {!!title && ( + {title} + )} + {!!content && ( +
{content}
+ )}
{ arrow && ( { { ...args } open={ args.open !== undefined ? args.open : isOpen } setOpen={ args.open !== undefined ? setIsOpen : undefined } + content={args.content} > @@ -139,14 +145,8 @@ export const DefaultTooltip = ( args ) => { DefaultTooltip.args = { variant: 'dark', placement: 'bottom', - label: { - heading: 'Tooltip Heading', - description: ( - - This is custom JSX in the description. - - ), - }, + title: 'Tooltip', + content: This is custom JSX in the description., arrow: true, triggers: [ 'hover', 'focus' ], interactive: false, @@ -187,21 +187,8 @@ DarkTooltipWithIcon.storyName = 'Tooltip with icon'; DarkTooltipWithIcon.args = { variant: 'dark', - label: { - heading: 'Tooltip Heading', - description: ( -
-
- Tooltips are used to describe or identify an element. In - most scenarios, tooltips help the user understand meaning, - function or alt-text. -
- -
- ), - }, + title: 'Tooltip', + content: 'This is simple string description.', arrow: true, }; @@ -238,9 +225,15 @@ DarkTooltipWithLabel.storyName = 'Tooltip with label'; DarkTooltipWithLabel.args = { variant: 'dark', - label: { - heading: 'Tooltip Heading', - description: 'This is a simple text description.', - }, + title: 'Tooltip', + content:
+
+ Tooltips are used to describe or identify an element. In + most scenarios, tooltips help the user understand meaning. +
+ +
, arrow: true, }; From fb1954db988dd6cac5828de2e511ed84c5f0434e Mon Sep 17 00:00:00 2001 From: JelenaTakac Date: Wed, 16 Oct 2024 11:57:07 +0200 Subject: [PATCH 2/4] Implemented Tooltip changes in other files --- src/components/radio-button/radio-button.jsx | 6 +-- src/components/sidebar/sidebar.jsx | 2 +- src/components/tooltip/readme.md | 51 +++++++++++-------- .../admin-settings-SureRank.stories.js | 6 +-- 4 files changed, 33 insertions(+), 32 deletions(-) diff --git a/src/components/radio-button/radio-button.jsx b/src/components/radio-button/radio-button.jsx index 9317b1af..958aa300 100644 --- a/src/components/radio-button/radio-button.jsx +++ b/src/components/radio-button/radio-button.jsx @@ -309,10 +309,8 @@ const RadioButtonComponent = ( arrow triggers={ [ 'hover', 'focus' ] } placement="top" - label={ { - heading: info?.heading, - description: info?.description, - } } + title={info?.heading} + content={info?.description} > { { isCollapsed ? ( <> diff --git a/src/components/tooltip/readme.md b/src/components/tooltip/readme.md index 1fdee303..43c31911 100644 --- a/src/components/tooltip/readme.md +++ b/src/components/tooltip/readme.md @@ -115,10 +115,14 @@ import { Tooltip } from '@bsf/force-ui'; const App = () => (
This is custom JSX in the description. - }} + title="Tooltip Title" + content={ + + Tooltips are used to describe or identify + an element. In most scenarios, tooltips help the user + understand meaning, function or alt-text. + + } arrow > @@ -126,10 +130,14 @@ const App = () => ( {/* Click only mode */} + Tooltips are used to describe or identify + an element. In most scenarios, tooltips help the user + understand meaning, function or alt-text. + + } triggers={['click']} arrow > @@ -138,17 +146,18 @@ const App = () => ( {/* Interactive Tooltip */} -

Tooltip title

-
Tooltips are used to describe or identify - an element. In most scenarios, tooltips help the user - understand meaning, function or alt-text.
- -
- } + + } arrow interactive > @@ -157,10 +166,8 @@ const App = () => ( {/* Controlled tooltip */} { Preview Date: Wed, 16 Oct 2024 12:25:46 +0200 Subject: [PATCH 3/4] Resolved lint js issues --- src/components/radio-button/radio-button.jsx | 4 +- src/components/sidebar/sidebar.jsx | 5 +- src/components/tooltip/tooltip.jsx | 16 ++--- src/components/tooltip/tooltip.stories.js | 63 ++++++++++--------- .../admin-settings-SureRank.stories.js | 2 +- 5 files changed, 47 insertions(+), 43 deletions(-) diff --git a/src/components/radio-button/radio-button.jsx b/src/components/radio-button/radio-button.jsx index 958aa300..e00cd4ec 100644 --- a/src/components/radio-button/radio-button.jsx +++ b/src/components/radio-button/radio-button.jsx @@ -309,8 +309,8 @@ const RadioButtonComponent = ( arrow triggers={ [ 'hover', 'focus' ] } placement="top" - title={info?.heading} - content={info?.description} + title={ info?.heading } + content={ info?.description } > { > { isCollapsed ? ( <> - + diff --git a/src/components/tooltip/tooltip.jsx b/src/components/tooltip/tooltip.jsx index a92ceec7..8809cb3b 100644 --- a/src/components/tooltip/tooltip.jsx +++ b/src/components/tooltip/tooltip.jsx @@ -29,8 +29,8 @@ import { mergeRefs } from '../toaster/utils'; const Tooltip = ( { variant = 'dark', // 'light' | 'dark'; placement = 'bottom', // | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'; - title = '', - content, + title = '', + content, arrow = false, open, setOpen, @@ -141,12 +141,12 @@ const Tooltip = ( { { ...getFloatingProps() } >
- {!!title && ( - {title} - )} - {!!content && ( -
{content}
- )} + { !! title && ( + { title } + ) } + { !! content && ( +
{ content }
+ ) }
{ arrow && ( { { ...args } open={ args.open !== undefined ? args.open : isOpen } setOpen={ args.open !== undefined ? setIsOpen : undefined } - content={args.content} + content={ args.content } > @@ -145,8 +146,12 @@ export const DefaultTooltip = ( args ) => { DefaultTooltip.args = { variant: 'dark', placement: 'bottom', - title: 'Tooltip', - content: This is custom JSX in the description., + title: 'Tooltip', + content: ( + + This is custom JSX in the description. + + ), arrow: true, triggers: [ 'hover', 'focus' ], interactive: false, @@ -187,8 +192,8 @@ DarkTooltipWithIcon.storyName = 'Tooltip with icon'; DarkTooltipWithIcon.args = { variant: 'dark', - title: 'Tooltip', - content: 'This is simple string description.', + title: 'Tooltip', + content: 'This is simple string description.', arrow: true, }; @@ -225,15 +230,17 @@ DarkTooltipWithLabel.storyName = 'Tooltip with label'; DarkTooltipWithLabel.args = { variant: 'dark', - title: 'Tooltip', - content:
-
- Tooltips are used to describe or identify an element. In - most scenarios, tooltips help the user understand meaning. -
- -
, + title: 'Tooltip', + content: ( +
+
+ Tooltips are used to describe or identify an element. In most + scenarios, tooltips help the user understand meaning. +
+ +
+ ), arrow: true, }; diff --git a/src/templates/admin-settings-SureRank/admin-settings-SureRank.stories.js b/src/templates/admin-settings-SureRank/admin-settings-SureRank.stories.js index c848244f..87e70857 100644 --- a/src/templates/admin-settings-SureRank/admin-settings-SureRank.stories.js +++ b/src/templates/admin-settings-SureRank/admin-settings-SureRank.stories.js @@ -392,7 +392,7 @@ const Template = () => { Preview Date: Wed, 16 Oct 2024 19:06:53 +0600 Subject: [PATCH 4/4] Removed margin from the left --- .../editor-input/mention-plugin/mention-component.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/editor-input/mention-plugin/mention-component.jsx b/src/components/editor-input/mention-plugin/mention-component.jsx index d8fbf1fc..cc2544da 100644 --- a/src/components/editor-input/mention-plugin/mention-component.jsx +++ b/src/components/editor-input/mention-plugin/mention-component.jsx @@ -135,7 +135,7 @@ const MentionComponent = ( { data, by, size, nodeKey } ) => { return (