Skip to content
This repository was archived by the owner on Jan 22, 2026. It is now read-only.

Add clock/info icons and fix multiline-tooltip bug. #118

Merged
Osmose merged 2 commits into from
Jul 13, 2020
Merged

Add clock/info icons and fix multiline-tooltip bug. #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7cb790b
Add clock and info icons.
Jul 11, 2020
fe7f9c9
Position tooltip arrow correctly for multi-line tooltips on top.
Jul 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 16 additions & 5 deletions lib/icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,12 @@ const svgs = {
chevronLeft: (props) => <Chevron rotate="180" {...props} />,
chevronRight: (props) => <Chevron rotate="0" {...props} />,
chevronUp: (props) => <Chevron rotate="-90" {...props} />,
clock: (props) => (
<SVGBase viewBox="0 0 19 20" {...props}>
<path d="M9.68121 0.833252C4.76352 0.833252 0.78125 4.93992 0.78125 9.99992C0.78125 15.0599 4.76352 19.1666 9.68121 19.1666C14.6078 19.1666 18.599 15.0599 18.599 9.99992C18.599 4.93992 14.6078 0.833252 9.68121 0.833252ZM9.69012 17.3333C5.7524 17.3333 2.56302 14.0516 2.56302 9.99992C2.56302 5.94825 5.7524 2.66659 9.69012 2.66659C13.6278 2.66659 16.8172 5.94825 16.8172 9.99992C16.8172 14.0516 13.6278 17.3333 9.69012 17.3333Z" fill="currentColor"/>
<path d="M10.1361 5.41675H8.7998V10.9167L13.477 13.8042L14.1451 12.6767L10.1361 10.2292V5.41675Z" fill="currentColor"/>
</SVGBase>
),
collapse: (props) => (
<SVGBase viewBox="0 0 14 12" {...props}>
<rect x="0.5" y="0.5" width="13" height="11" rx="3" stroke="currentColor" strokeWidth="1" fill="none" />
Expand Down Expand Up @@ -103,6 +109,11 @@ const svgs = {
/>
</SVGBase>
),
info: (props) => (
<SVGBase viewBox="0 0 14 14" {...props}>
<path d="M6.99902 0C3.13502 0 -0.000976562 3.136 -0.000976562 7C-0.000976562 10.864 3.13502 14 6.99902 14C10.863 14 13.999 10.864 13.999 7C13.999 3.136 10.863 0 6.99902 0ZM7.69902 10.5H6.29902V6.3H7.69902V10.5ZM7.69902 4.9H6.29902V3.5H7.69902V4.9Z" fill="currentColor" />
</SVGBase>
),
octocat: (props) => (
<SVGBase viewBox="-194 298 16 15" {...props}>
<path
Expand Down Expand Up @@ -182,16 +193,16 @@ const svgs = {
/>
</SVGBase>
),
x: (props) => (
<SVGBase viewBox="0 0 64 64" {...props}>
<path d="M8,8 L56,56 M8,56 L56,8" stroke="currentColor" fill="none" strokeWidth="12" />
</SVGBase>
),
textLightningBolt: (props) => (
<SVGBase viewBox="0 0 11 15" {...props}>
<path d="M0 8.44221L8.30935 0L4.7482 6.03015L11 5.80402L0.316547 15L5.46043 8.1407L0 8.44221Z" fill="currentColor"/>
</SVGBase>
),
x: (props) => (
<SVGBase viewBox="0 0 64 64" {...props}>
<path d="M8,8 L56,56 M8,56 L56,8" stroke="currentColor" fill="none" strokeWidth="12" />
</SVGBase>
),
};
/* eslint-enable react/display-name */

Expand Down
5 changes: 3 additions & 2 deletions lib/tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ const TooltipBase = styled.div`
border-bottom-color: transparent;
margin-top: -6px;
transform: translateX(-50%) translateY(100%);
top: 85%;
bottom: 0;
}
`}
${({ left }) =>
Expand Down Expand Up @@ -397,7 +397,7 @@ export const StoryTooltipContainer = () => {
/>

<TooltipContainer align={['top', 'right']} target={<button>Top right persistent tooltip</button>} tooltip="Click me" type="info" />

`}</CodeExample>
<PropsDefinition>
<Prop name="type" required>
Expand Down Expand Up @@ -432,6 +432,7 @@ export const StoryTooltipContainer = () => {
<TooltipContainer target={<button>Default aligned tooltip</button>} tooltip="Such center!" type="info" />
<TooltipContainer align={['right']} target={<button>Right tooltip</button>} tooltip="Important info!" type="info" />
<TooltipContainer align={['top']} persistent target={<button>Top tooltip</button>} tooltip="Click me" type="info" />
<TooltipContainer align={['top']} persistent target={<button>Multi-line tooltip</button>} tooltip={'Multi\nline\ntooltip'} type="info" />
<TooltipContainer align={['top', 'right']} persistent target={<button>Top right persistent tooltip</button>} tooltip="Click me" type="info" />
</>
);
Expand Down