Skip to content

Commit a682a09

Browse files
thatblindgeyethatblindgeye
committed
Added tooltips to docked tools
1 parent e09d1b6 commit a682a09

File tree

2 files changed

+73
-38
lines changed

2 files changed

+73
-38
lines changed

‎packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx‎

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import {
2121
Dropdown,
2222
DropdownList,
2323
MenuToggle,
24-
MenuToggleElement,
2524
DropdownItem,
2625
Button,
2726
ButtonVariant,
@@ -52,11 +51,11 @@ export const CompassDockDemo: React.FunctionComponent = () => {
5251
};
5352

5453
const onDropdownToggle = () => {
55-
setIsDropdownOpen(!isDropdownOpen);
54+
setIsDropdownOpen((prevIsOpen) => !prevIsOpen);
5655
};
5756

5857
const onDropdownSelect = () => {
59-
setIsDropdownOpen(!isDropdownOpen);
58+
setIsDropdownOpen(false);
6059
};
6160

6261
const userDropdownItems = [
@@ -71,6 +70,10 @@ export const CompassDockDemo: React.FunctionComponent = () => {
7170
const navItem2Ref = useRef<HTMLAnchorElement>(null);
7271
const navItem3Ref = useRef<HTMLAnchorElement>(null);
7372
const navItem4Ref = useRef<HTMLAnchorElement>(null);
73+
const settingsRef = useRef<HTMLButtonElement>(null);
74+
const helpRef = useRef<HTMLButtonElement>(null);
75+
const userMenuRef = useRef<HTMLButtonElement>(null);
76+
7477
const dockContent = (
7578
<Masthead id="icon-router-link" variant="docked">
7679
<MastheadMain>
@@ -133,10 +136,10 @@ export const CompassDockDemo: React.FunctionComponent = () => {
133136
/>
134137
</NavList>
135138
</Nav>
136-
<Tooltip triggerRef={navItem1Ref} content="Link 1"></Tooltip>
137-
<Tooltip triggerRef={navItem2Ref} content="Link 2"></Tooltip>
138-
<Tooltip triggerRef={navItem3Ref} content="Link 3"></Tooltip>
139-
<Tooltip triggerRef={navItem4Ref} content="Link 4"></Tooltip>
139+
<Tooltip aria="none" aria-live="off" triggerRef={navItem1Ref} content="Link 1"></Tooltip>
140+
<Tooltip aria="none" aria-live="off" triggerRef={navItem2Ref} content="Link 2"></Tooltip>
141+
<Tooltip aria="none" aria-live="off" triggerRef={navItem3Ref} content="Link 3"></Tooltip>
142+
<Tooltip aria="none" aria-live="off" triggerRef={navItem4Ref} content="Link 4"></Tooltip>
140143
</ToolbarItem>
141144
<ToolbarGroup
142145
variant="action-group-plain"
@@ -145,28 +148,43 @@ export const CompassDockDemo: React.FunctionComponent = () => {
145148
>
146149
<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
147150
<ToolbarItem>
148-
<Button aria-label="Settings" isSettings variant="plain" />
151+
<Tooltip aria="none" aria-live="off" triggerRef={settingsRef} content="Settings">
152+
<Button ref={settingsRef} aria-label="Settings" isSettings variant="plain" />
153+
</Tooltip>
149154
</ToolbarItem>
150155
<ToolbarItem>
151-
<Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
156+
<Tooltip aria="none" aria-live="off" triggerRef={helpRef} content="Help">
157+
<Button
158+
ref={helpRef}
159+
aria-label="Help"
160+
variant={ButtonVariant.plain}
161+
icon={<QuestionCircleIcon />}
162+
/>
163+
</Tooltip>
152164
</ToolbarItem>
153165
</ToolbarGroup>
154166
</ToolbarGroup>
155167
<ToolbarItem>
156168
<Dropdown
157169
isOpen={isDropdownOpen}
170+
shouldFocusToggleOnSelect
158171
onSelect={onDropdownSelect}
159172
onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
160-
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
161-
<MenuToggle
162-
ref={toggleRef}
163-
onClick={onDropdownToggle}
164-
isExpanded={isDropdownOpen}
165-
icon={<Avatar src={imgAvatar} alt="" size="sm" />}
166-
variant="plain"
167-
aria-label="User menu"
168-
></MenuToggle>
169-
)}
173+
toggle={{
174+
toggleNode: (
175+
<Tooltip content="User menu" aria="none" aria-live="off" triggerRef={userMenuRef}>
176+
<MenuToggle
177+
ref={userMenuRef}
178+
onClick={onDropdownToggle}
179+
isExpanded={isDropdownOpen}
180+
icon={<Avatar src={imgAvatar} alt="" size="sm" />}
181+
variant="plain"
182+
aria-label="User menu"
183+
/>
184+
</Tooltip>
185+
),
186+
toggleRef: userMenuRef
187+
}}
170188
>
171189
<DropdownList>{userDropdownItems}</DropdownList>
172190
</Dropdown>

‎packages/react-core/src/demos/examples/Page/PageDockedNav.tsx‎

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import {
2121
MastheadContent,
2222
MastheadBrand,
2323
MenuToggle,
24-
MenuToggleElement,
2524
Nav,
2625
NavItem,
2726
NavList,
@@ -57,11 +56,11 @@ export const PageDockedNav: React.FunctionComponent = () => {
5756
};
5857

5958
const onDropdownToggle = () => {
60-
setIsDropdownOpen(!isDropdownOpen);
59+
setIsDropdownOpen((prevIsOpen) => !prevIsOpen);
6160
};
6261

6362
const onDropdownSelect = () => {
64-
setIsDropdownOpen(!isDropdownOpen);
63+
setIsDropdownOpen(false);
6564
};
6665

6766
const dashboardBreadcrumb = (
@@ -87,6 +86,9 @@ export const PageDockedNav: React.FunctionComponent = () => {
8786
const navItem2Ref = useRef<HTMLAnchorElement>(null);
8887
const navItem3Ref = useRef<HTMLAnchorElement>(null);
8988
const navItem4Ref = useRef<HTMLAnchorElement>(null);
89+
const settingsRef = useRef<HTMLButtonElement>(null);
90+
const helpRef = useRef<HTMLButtonElement>(null);
91+
const userMenuRef = useRef<HTMLButtonElement>(null);
9092

9193
const masthead = (
9294
<Masthead id="icon-router-link" variant="docked">
@@ -146,10 +148,10 @@ export const PageDockedNav: React.FunctionComponent = () => {
146148
/>
147149
</NavList>
148150
</Nav>
149-
<Tooltip triggerRef={navItem1Ref} content="Link 1"></Tooltip>
150-
<Tooltip triggerRef={navItem2Ref} content="Link 2"></Tooltip>
151-
<Tooltip triggerRef={navItem3Ref} content="Link 3"></Tooltip>
152-
<Tooltip triggerRef={navItem4Ref} content="Link 4"></Tooltip>
151+
<Tooltip aria="none" aria-live="off" triggerRef={navItem1Ref} content="Link 1"></Tooltip>
152+
<Tooltip aria="none" aria-live="off" triggerRef={navItem2Ref} content="Link 2"></Tooltip>
153+
<Tooltip aria="none" aria-live="off" triggerRef={navItem3Ref} content="Link 3"></Tooltip>
154+
<Tooltip aria="none" aria-live="off" triggerRef={navItem4Ref} content="Link 4"></Tooltip>
153155
</ToolbarItem>
154156
<ToolbarGroup
155157
variant="action-group-plain"
@@ -158,28 +160,43 @@ export const PageDockedNav: React.FunctionComponent = () => {
158160
>
159161
<ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
160162
<ToolbarItem>
161-
<Button aria-label="Settings" isSettings variant="plain" />
163+
<Tooltip aria="none" aria-live="off" triggerRef={settingsRef} content="Settings">
164+
<Button ref={settingsRef} aria-label="Settings" isSettings variant="plain" />
165+
</Tooltip>
162166
</ToolbarItem>
163167
<ToolbarItem>
164-
<Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
168+
<Tooltip aria="none" aria-live="off" triggerRef={helpRef} content="Help">
169+
<Button
170+
ref={helpRef}
171+
aria-label="Help"
172+
variant={ButtonVariant.plain}
173+
icon={<QuestionCircleIcon />}
174+
/>
175+
</Tooltip>
165176
</ToolbarItem>
166177
</ToolbarGroup>
167178
</ToolbarGroup>
168179
<ToolbarItem>
169180
<Dropdown
170181
isOpen={isDropdownOpen}
171182
onSelect={onDropdownSelect}
183+
shouldFocusToggleOnSelect
172184
onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
173-
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
174-
<MenuToggle
175-
ref={toggleRef}
176-
onClick={onDropdownToggle}
177-
isExpanded={isDropdownOpen}
178-
icon={<Avatar src={imgAvatar} alt="" size="sm" />}
179-
variant="plain"
180-
aria-label="User menu"
181-
></MenuToggle>
182-
)}
185+
toggle={{
186+
toggleNode: (
187+
<Tooltip content="User menu" aria="none" aria-live="off" triggerRef={userMenuRef}>
188+
<MenuToggle
189+
ref={userMenuRef}
190+
onClick={onDropdownToggle}
191+
isExpanded={isDropdownOpen}
192+
icon={<Avatar src={imgAvatar} alt="" size="sm" />}
193+
variant="plain"
194+
aria-label="User menu"
195+
/>
196+
</Tooltip>
197+
),
198+
toggleRef: userMenuRef
199+
}}
183200
>
184201
<DropdownList>{userDropdownItems}</DropdownList>
185202
</Dropdown>

0 commit comments

Comments
 (0)