GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 15:31:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

MIGRATE more components to improved Tooltip

Browse Source
This commit is contained in:
Norbert de Langen 2019-07-12 19:48:11 +02:00
parent 85bed265d7
commit 9ed36d93b4
4 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
addons/contexts/src/manager/components/ToolBarMenu.tsx
View File

@ -1,5 +1,5 @@
import React, { ComponentProps } from 'react';
import { Icons, IconButton, WithTooltip, TabButton } from '@storybook/components';
import { Icons, IconButton, WithTooltipPure, TabButton } from '@storybook/components';
import { ToolBarMenuOptions } from './ToolBarMenuOptions';
import { ContextNode, FCNoChildren } from '../../shared/types.d';
@ -20,7 +20,7 @@ export const ToolBarMenu: ToolBarMenu = ({
setExpanded,
optionsProps,
}) => (
<WithTooltip
<WithTooltipPure
closeOnClick
trigger="click"
placement="top"
@ -35,5 +35,5 @@ export const ToolBarMenu: ToolBarMenu = ({
) : (
<TabButton active={active}>{title}</TabButton>
)}
</WithTooltip>
</WithTooltipPure>
);

2
lib/components/src/index.ts
View File

@ -16,7 +16,7 @@ export { Button } from './Button/Button';
export { Form } from './form/index';
// Tooltips
export { WithTooltip } from './tooltip/WithTooltip';
export { WithTooltip, WithTooltipPure } from './tooltip/WithTooltip';
export { TooltipMessage } from './tooltip/TooltipMessage';
export { TooltipNote } from './tooltip/TooltipNote';
export { TooltipLinkList } from './tooltip/TooltipLinkList';

2
lib/components/src/tooltip/TooltipMessage.stories.tsx
View File

@ -7,7 +7,7 @@ import { TooltipMessage } from './TooltipMessage';
storiesOf('basics/Tooltip/TooltipMessage', module)
.addDecorator(storyFn => (
<div style={{ height: '300px' }}>
<WithTooltip placement="top" trigger="click" tooltipShown tooltip={storyFn()}>
<WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
<div>Tooltip</div>
</WithTooltip>
</div>

12
lib/ui/src/components/sidebar/SidebarHeading.js
View File

@ -100,7 +100,6 @@ const Brand = withTheme(({ theme: { brand: { title = 'Storybook', url = './', im
});
const SidebarHeading = ({ menuHighlighted, menu, ...props }) => {
const [tooltipShown, onVisibilityChange] = useState(false);
return (
<Head {...props}>
<BrandArea>
@ -110,16 +109,17 @@ const SidebarHeading = ({ menuHighlighted, menu, ...props }) => {
<WithTooltip
placement="top"
trigger="click"
tooltipShown={tooltipShown}
onVisibilityChange={onVisibilityChange}
tooltip={
tooltip={({ onHide }) => (
<TooltipLinkList
links={menu.map(i => ({
...i,
onClick: (...args) => onVisibilityChange(false) || i.onClick(...args),
onClick: (...args) => {
i.onClick(...args);
onHide();
},
}))}
/>
}
)}
closeOnClick
>
<MenuButton outline small containsIcon highlighted={menuHighlighted} title="Shortcuts">