Skip to content
This repository was archived by the owner on Nov 3, 2021. It is now read-only.

Commit 15cd839

Browse files
wyvlwyvl
authored
Merge pull request #842 from wyvl/technical/INT-13012-add-tooltip-props-to-dropdown-menu-section
[INT-13012] Add tooltip props to dropdown menu section
2 parents a50d25b + 1615d33 commit 15cd839

File tree

5 files changed

+215
-11
lines changed

5 files changed

+215
-11
lines changed

‎src/domain/Popovers/DropdownMenu/DropdownMenu.examples.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,26 @@
4444
</div>
4545
```
4646

47+
#### DropdownMenu with tooltip
48+
49+
```jsx
50+
<DropdownMenu
51+
sections={[
52+
{
53+
text: 'Hover and View Tooltip',
54+
href: 'https://www.intellihr.com.au',
55+
tooltipMessage: 'I am a tooltip for item 1'
56+
},
57+
{
58+
text: 'Archive',
59+
onClick: () => alert('Archive'),
60+
tooltipMessage: 'This template has been used to create a goal so it cannot be deleted. Archived templates are hidden when creating goals.',
61+
tooltipProps: { width: 300 }
62+
}
63+
]}
64+
/>
65+
```
66+
4767
#### Dropdown Menu using strip colors
4868

4969
```jsx

‎src/domain/Popovers/DropdownMenu/DropdownMenu.test.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,41 @@ describe('<DropdownMenu />', () => {
3636
})
3737
})
3838

39+
describe('Render a dropdown with tooltip', () => {
40+
const wrapper = shallow(
41+
<DropdownMenu
42+
sections={[
43+
{
44+
text: 'Item 1',
45+
tooltipMessage: 'I am a tooltip for item 1'
46+
},
47+
{
48+
text: 'Item 2',
49+
href: 'https://www.intellihr.com.au',
50+
tooltipMessage: 'I am a tooltip for item 2',
51+
tooltipProps: { width: 300 }
52+
}
53+
]}
54+
/>
55+
)
56+
57+
it('should match the snapshot', () => {
58+
expect(wrapper).toMatchSnapshot()
59+
})
60+
61+
it('should open the menu', () => {
62+
// @ts-ignore TS2339
63+
wrapper.instance().openMenu()
64+
65+
expect(
66+
wrapper
67+
.update()
68+
.find('Popover')
69+
.prop('isOpen')
70+
).toBeTruthy()
71+
})
72+
})
73+
3974
describe('Render a dropdown using custom content', () => {
4075
const wrapper = shallow(
4176
<DropdownMenu>

‎src/domain/Popovers/DropdownMenu/__snapshots__/DropdownMenu.test.tsx.snap‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,80 @@ exports[`<DropdownMenu /> Render a dropdown using custom content should match th
5353
</Fragment>
5454
`;
5555

56+
exports[`<DropdownMenu /> Render a dropdown with tooltip should match the snapshot 1`] = `
57+
<Fragment>
58+
<styled.button
59+
aria-expanded={false}
60+
aria-haspopup={true}
61+
onClick={[Function]}
62+
role="button"
63+
type="button"
64+
>
65+
<Memo(FontAwesomeIcon)
66+
icon="ellipsis-v"
67+
type="solid"
68+
/>
69+
</styled.button>
70+
<Popover
71+
animationType="dropdown"
72+
id=""
73+
isOpen={false}
74+
parentAnchorPosition="auto"
75+
parentRef={
76+
Object {
77+
"current": null,
78+
}
79+
}
80+
popoverAnchorPosition="auto"
81+
>
82+
<FocusTrap
83+
_createFocusTrap={[Function]}
84+
active={false}
85+
focusTrapOptions={
86+
Object {
87+
"clickOutsideDeactivates": true,
88+
"fallbackFocus": <body />,
89+
"initialFocus": <body />,
90+
"onDeactivate": [Function],
91+
"returnFocusOnDeactivate": false,
92+
}
93+
}
94+
paused={false}
95+
tag="span"
96+
>
97+
<styled.div
98+
role="menu"
99+
>
100+
<styled.ul>
101+
<Section
102+
__closeMenuCallback={[Function]}
103+
closeDropdownBehaviour="whenActionProvided"
104+
key="0"
105+
sectionType="default"
106+
text="Item 1"
107+
tooltipMessage="I am a tooltip for item 1"
108+
/>
109+
<Section
110+
__closeMenuCallback={[Function]}
111+
closeDropdownBehaviour="whenActionProvided"
112+
href="https://www.intellihr.com.au"
113+
key="1"
114+
sectionType="default"
115+
text="Item 2"
116+
tooltipMessage="I am a tooltip for item 2"
117+
tooltipProps={
118+
Object {
119+
"width": 300,
120+
}
121+
}
122+
/>
123+
</styled.ul>
124+
</styled.div>
125+
</FocusTrap>
126+
</Popover>
127+
</Fragment>
128+
`;
129+
56130
exports[`<DropdownMenu /> Simple dropdown behaviour should match the snapshot 1`] = `
57131
<Fragment>
58132
<styled.button

‎src/domain/Popovers/DropdownMenu/subcomponents/Section.tsx‎

Lines changed: 79 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import React from 'react'
22

3+
import {Props, Variables} from '../../../../common'
4+
import {StyledIconButton} from '../../../Buttons/FontAwesomeIconButton/style'
5+
import {StyledInputLabel} from '../../../Forms/VerticalForm/subcomponents/style'
6+
import {FontAwesomeIcon} from '../../../Icons/FontAwesomeIcon'
37
import { Anchor } from '../../../Internals'
4-
import { StyledSection } from './style'
8+
import {GridLayout} from '../../../Layouts/GridLayout'
9+
import {Margin} from '../../../Spacers/Margin'
10+
import {ITooltipPopoverProps, ITooltipPopoverToggleComponentProps, TooltipPopover} from '../../TooltipPopover'
11+
import {TooltipPopoverVariant} from '../../TooltipPopover/TooltipPopover'
12+
import {StyledSection, StyledSectionContent} from './style'
513

614
type SectionType =
715
'default'
@@ -41,6 +49,10 @@ interface ISectionProps {
4149
styleOnHover?: boolean
4250
/** Stop propagation of click event */
4351
stopPropagation?: boolean
52+
/** Message of tooltip to show */
53+
tooltipMessage?: JSX.Element | string
54+
/** any extra tooltip props */
55+
tooltipProps?: ITooltipPopoverProps
4456
}
4557

4658
class Section extends React.PureComponent<ISectionProps, never> {
@@ -76,20 +88,17 @@ class Section extends React.PureComponent<ISectionProps, never> {
7688
role: 'menuitem'
7789
}
7890
}
79-
public static defaultProps: Partial<ISectionProps> = {
80-
sectionType: 'default',
81-
closeDropdownBehaviour: 'whenActionProvided'
82-
}
8391

84-
public render (): JSX.Element {
92+
private get content () {
8593
const {
8694
component,
8795
componentProps,
8896
leftComponent,
8997
rightComponent,
9098
text,
9199
onClick,
92-
href
100+
href,
101+
tooltipMessage
93102
} = this.props
94103

95104
if (component) {
@@ -108,14 +117,74 @@ class Section extends React.PureComponent<ISectionProps, never> {
108117
onClick={onClick}
109118
href={href}
110119
>
111-
{leftComponent && <span className='left-component'>{leftComponent}</span>}
112-
{text}
113-
{rightComponent && <span className='right-component'>{rightComponent}</span>}
120+
{
121+
tooltipMessage ? (
122+
<>
123+
<Margin margins={{ right: Variables.Spacing.sXSmall }}>
124+
{leftComponent && <span className='left-component'>{leftComponent}</span>}
125+
{text}
126+
{rightComponent && <span className='right-component'>{rightComponent}</span>}
127+
</Margin>
128+
<FontAwesomeIcon icon='info-circle' type='solid' color={Variables.Color.n400}/>
129+
</>
130+
) : (
131+
<>
132+
{leftComponent && <span className='left-component'>{leftComponent}</span>}
133+
{text}
134+
{rightComponent && <span className='right-component'>{rightComponent}</span>}
135+
</>
136+
)
137+
}
114138
</Component>
115139
</StyledSection>
116140
)
117141
}
118142

143+
public static defaultProps: Partial<ISectionProps> = {
144+
sectionType: 'default',
145+
closeDropdownBehaviour: 'whenActionProvided'
146+
}
147+
148+
public render (): JSX.Element {
149+
const {
150+
tooltipMessage,
151+
tooltipProps
152+
} = this.props
153+
154+
if (tooltipMessage) {
155+
return (
156+
<TooltipPopover
157+
toggleComponent={this.toggleComponent(this.content)}
158+
width={300}
159+
parentAnchorPosition={{
160+
xPos: Props.Position.Left,
161+
yPos: Props.Position.Top
162+
}}
163+
popoverAnchorPosition={{
164+
xPos: Props.Position.Right,
165+
yPos: Props.Position.Top
166+
}}
167+
{...tooltipProps}
168+
>
169+
{tooltipMessage}
170+
</TooltipPopover>
171+
)
172+
}
173+
174+
return this.content
175+
}
176+
177+
private toggleComponent = (content: JSX.Element) => ({ openMenu, closeMenu, toggleComponentRef, ariaProps }: ITooltipPopoverToggleComponentProps) => (
178+
<span
179+
onMouseEnter={openMenu}
180+
onMouseLeave={closeMenu}
181+
ref={toggleComponentRef}
182+
{...ariaProps}
183+
>
184+
{content}
185+
</span>
186+
)
187+
119188
private handleCloseMenuClick = (event: React.SyntheticEvent<HTMLLIElement>) => {
120189
const {
121190
href,

‎src/domain/Popovers/DropdownMenu/subcomponents/style.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,10 +230,16 @@ const StyledSection = styled.li`
230230
}
231231
`
232232

233+
const StyledSectionContent = styled.div`
234+
display: flex;
235+
justify-content: space-between;
236+
`
237+
233238
export {
234239
DefaultDropdownButton,
235240
StyledContentWrapper,
236241
StyledSection,
237242
StyledDropdownSectionList,
238-
StyledDropdownCustomContent
243+
StyledDropdownCustomContent,
244+
StyledSectionContent
239245
}

0 commit comments

Comments
 (0)