jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Tooltip to ToolbarIcon in Layout Plugin

Browse Source 
Summary: Trying to add tooltip to some components to promote tooltip itself and make it clearer what they do

Reviewed By: mweststrate

Differential Revision: D21649207

fbshipit-source-id: 4763ae9a99d687e6624c07bb636c5f4e869cafc9
This commit is contained in:
Chaiwat Ekkaewnumchai
2020-05-21 07:54:04 -07:00
committed by Facebook GitHub Bot
parent b8a989214d
commit 27dd08e546
1 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
desktop/app/src/ui/components/ToolbarIcon.tsx
View File

@@ -8,6 +8,7 @@
*/ */
import Glyph from './Glyph'; import Glyph from './Glyph';
import Tooltip from './Tooltip';
import {colors} from './colors'; import {colors} from './colors';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import React from 'react'; import React from 'react';
@@ -26,18 +27,20 @@ const ToolbarIconContainer = styled.div({
position: 'relative', // for settings popover positioning position: 'relative', // for settings popover positioning
}); });
export default function ToolbarIcon({active, icon, ...props}: Props) { export default function ToolbarIcon({active, icon, title, ...props}: Props) {
return ( return (
<ToolbarIconContainer {...props}> <Tooltip title={title}>
<Glyph <ToolbarIconContainer {...props}>
name={icon} <Glyph
size={16} name={icon}
color={ size={16}
active color={
? colors.macOSTitleBarIconSelected active
: colors.macOSTitleBarIconActive ? colors.macOSTitleBarIconSelected
} : colors.macOSTitleBarIconActive
/> }
</ToolbarIconContainer> />
</ToolbarIconContainer>
</Tooltip>
); );
} }