mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
feat(component): add Tooltip
Closes #11 - Fixes `tabindex` prop storybook typo
This commit is contained in:
Eric Liu
parent
446032d8ee
commit
7e5252951a
19 changed files with 350 additions and 24 deletions
|
|
@ -110,6 +110,7 @@ Currently, the following components are supported:
|
|||
- ToggleSkeleton
|
||||
- ToggleSmall
|
||||
- ToggleSmallSkeleton
|
||||
- Tooltip
|
||||
- TooltipDefinition
|
||||
- TooltipIcon
|
||||
- UnorderedList
|
||||
|
|
|
|||
|
|
@ -70,4 +70,4 @@
|
|||
}</script><style>#root[hidden],
|
||||
#docs-root[hidden] {
|
||||
display: none !important;
|
||||
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.8d22be1b99a499135109.bundle.js"></script><script src="vendors~main.8d22be1b99a499135109.bundle.js"></script><script src="main.8d22be1b99a499135109.bundle.js"></script></body></html>
|
||||
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.060526069d5dd6138723.bundle.js"></script><script src="vendors~main.060526069d5dd6138723.bundle.js"></script><script src="main.060526069d5dd6138723.bundle.js"></script></body></html>
|
||||
2
docs/main.060526069d5dd6138723.bundle.js
Normal file
2
docs/main.060526069d5dd6138723.bundle.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/main.060526069d5dd6138723.bundle.js.map
Normal file
1
docs/main.060526069d5dd6138723.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"main.060526069d5dd6138723.bundle.js","sources":["webpack:///main.060526069d5dd6138723.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"main.8d22be1b99a499135109.bundle.js","sources":["webpack:///main.8d22be1b99a499135109.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
|
||||
//# sourceMappingURL=runtime~main.8d22be1b99a499135109.bundle.js.map
|
||||
//# sourceMappingURL=runtime~main.060526069d5dd6138723.bundle.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"runtime~main.8d22be1b99a499135109.bundle.js","sources":["webpack:///runtime~main.3fc22874a0adf047f1de.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||
{"version":3,"file":"runtime~main.060526069d5dd6138723.bundle.js","sources":["webpack:///runtime~main.3fc22874a0adf047f1de.bundle.js"],"mappings":"AAAA","sourceRoot":""}
|
||||
File diff suppressed because one or more lines are too long
1
docs/vendors~main.060526069d5dd6138723.bundle.js.map
Normal file
1
docs/vendors~main.060526069d5dd6138723.bundle.js.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"vendors~main.060526069d5dd6138723.bundle.js","sources":["webpack:///vendors~main.060526069d5dd6138723.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAmmPA;;;;;AAy9WA;;AAu8BA;;;;;;;;;;;;;;AAmBA;;;;;AA68NA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AA6cA;;;;;;;AAfA","sourceRoot":""}
|
||||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"vendors~main.8d22be1b99a499135109.bundle.js","sources":["webpack:///vendors~main.3fc22874a0adf047f1de.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;AAs2OA;;;;;AAy9WA;;AAu8BA;;;;;;;;;;;;;;AAmBA;;;;;AAu9NA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAycA;;;;;;;AAfA","sourceRoot":""}
|
||||
|
|
@ -117,7 +117,6 @@
|
|||
}
|
||||
});
|
||||
|
||||
// $: hasCalendar.set($mode === 'single' || $mode === 'range');
|
||||
$: inputValue.set(value);
|
||||
$: value = $inputValue;
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { withKnobs, text, select, boolean, number, array } from '@storybook/addon-knobs';
|
||||
import { withKnobs, text, select, boolean, array } from '@storybook/addon-knobs';
|
||||
import Component from './FileUploader.Story.svelte';
|
||||
|
||||
export default { title: 'FileUploader', decorators: [withKnobs] };
|
||||
|
|
@ -89,7 +89,7 @@ export const FileUploaderDropContainer = () => ({
|
|||
),
|
||||
disabled: boolean('Disabled (disabled)', false),
|
||||
role: text('ARIA role of the button (role)', ''),
|
||||
tabindex: number('Tab index (tabindex)', '0')
|
||||
tabindex: text('Tab index (tabindex)', '0')
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export const Container = () => ({
|
|||
disabled: boolean('Disabled (disabled in <Tab>)', false),
|
||||
href: text('The href for tab (href in <Tab>)', '#'),
|
||||
role: text('ARIA role (role in <Tab>)', 'presentation'),
|
||||
tabindex: number('Tab index (tabindex in <Tab>)', 0)
|
||||
tabindex: text('Tab index (tabindex in <Tab>)', '0')
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
88
src/components/Tooltip/Tooltip.Story.svelte
Normal file
88
src/components/Tooltip/Tooltip.Story.svelte
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import OverflowMenuVertical16 from 'carbon-icons-svelte/lib/OverflowMenuVertical16';
|
||||
import Layout from '../../internal/ui/Layout.svelte';
|
||||
import { cx } from '../../lib';
|
||||
import Link from '../Link';
|
||||
import Button from '../Button';
|
||||
import Tooltip from './Tooltip.svelte';
|
||||
|
||||
let open = story === 'uncontrolled';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-icon-class {
|
||||
width: 10px;
|
||||
height: 4px;
|
||||
border-radius: 5px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<Layout>
|
||||
<div style="margin: 3rem">
|
||||
{#if story === 'custom icon'}
|
||||
<Tooltip
|
||||
{...$$props}
|
||||
bind:open
|
||||
on:open={() => {
|
||||
console.log('on:open');
|
||||
}}
|
||||
on:close={() => {
|
||||
console.log('on:close');
|
||||
}}>
|
||||
<div slot="icon" class="custom-icon-class" />
|
||||
<p>
|
||||
This is some tooltip text. This box shows the maximum amount of text that should appear
|
||||
inside. If more room is needed please use a modal instead.
|
||||
</p>
|
||||
<div class={cx('--tooltip__footer')}>
|
||||
<Link href="/">Learn More</Link>
|
||||
<Button size="small">Create</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
{:else if story === 'uncontrolled'}
|
||||
<Button
|
||||
style="padding: 15px 20px; margin: 4px 20px"
|
||||
on:click={() => {
|
||||
open = false;
|
||||
}}>
|
||||
Hide
|
||||
</Button>
|
||||
<Button
|
||||
style="padding: 15px 20px; margin: 4px 20px"
|
||||
on:click={() => {
|
||||
open = true;
|
||||
}}>
|
||||
Show
|
||||
</Button>
|
||||
<div style="padding: 15px 20px; margin: 4px 20px">
|
||||
<Tooltip {...$$props} bind:open showIcon={false}>
|
||||
<div slot="triggerText">My text wrapped with tooltip</div>
|
||||
Tooltip content
|
||||
</Tooltip>
|
||||
</div>
|
||||
{:else}
|
||||
<Tooltip
|
||||
{...$$props}
|
||||
bind:open
|
||||
on:open={() => {
|
||||
console.log('on:open');
|
||||
}}
|
||||
on:close={() => {
|
||||
console.log('on:close');
|
||||
}}
|
||||
icon={story === 'custom icon only' ? OverflowMenuVertical16 : undefined}>
|
||||
<p>
|
||||
This is some tooltip text. This box shows the maximum amount of text that should appear
|
||||
inside. If more room is needed please use a modal instead.
|
||||
</p>
|
||||
<div class={cx('--tooltip__footer')}>
|
||||
<Link href="/">Learn More</Link>
|
||||
<Button size="small">Create</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
{/if}
|
||||
</div>
|
||||
</Layout>
|
||||
61
src/components/Tooltip/Tooltip.stories.js
Normal file
61
src/components/Tooltip/Tooltip.stories.js
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
import { withKnobs, select, text } from '@storybook/addon-knobs';
|
||||
import Component from './Tooltip.Story.svelte';
|
||||
|
||||
export default { title: 'Tooltip', decorators: [withKnobs] };
|
||||
|
||||
const directions = {
|
||||
'Top (top)': 'top',
|
||||
'Right (right)': 'right',
|
||||
'Bottom (bottom)': 'bottom',
|
||||
'Left (left)': 'left'
|
||||
};
|
||||
|
||||
export const Default = () => ({
|
||||
Component,
|
||||
props: {
|
||||
direction: select('Tooltip direction (direction)', directions, 'bottom'),
|
||||
triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
|
||||
tabindex: text('Tab index (tabindex in <Tooltip>)', '0')
|
||||
}
|
||||
});
|
||||
|
||||
export const NoIcon = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'no icon',
|
||||
showIcon: false,
|
||||
direction: select('Tooltip direction (direction)', directions, 'bottom'),
|
||||
triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
|
||||
tabindex: text('Tab index (tabindex in <Tooltip>)', '0')
|
||||
}
|
||||
});
|
||||
|
||||
export const CustomIcon = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'custom icon',
|
||||
showIcon: true,
|
||||
direction: select('Tooltip direction (direction)', directions, 'bottom'),
|
||||
triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
|
||||
tabindex: text('Tab index (tabindex in <Tooltip>)', '0')
|
||||
}
|
||||
});
|
||||
|
||||
export const CustomIconOnly = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'custom icon only',
|
||||
showIcon: true,
|
||||
direction: select('Tooltip direction (direction)', directions, 'bottom'),
|
||||
iconDescription: 'Helpful Information',
|
||||
tabindex: text('Tab index (tabindex in <Tooltip>)', '0')
|
||||
}
|
||||
});
|
||||
|
||||
export const UncontrolledTooltip = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'uncontrolled',
|
||||
direction: select('Tooltip direction (direction)', directions, 'bottom')
|
||||
}
|
||||
});
|
||||
172
src/components/Tooltip/Tooltip.svelte
Normal file
172
src/components/Tooltip/Tooltip.svelte
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let triggerText = ''; // TODO: support slot?
|
||||
export let triggerId = Math.random();
|
||||
export let tooltipId = Math.random();
|
||||
export let triggerClass = undefined;
|
||||
export let open = false;
|
||||
export let direction = 'bottom';
|
||||
export let icon = Information16;
|
||||
export let showIcon = true; // TODO: change to hideIcon
|
||||
export let iconName = '';
|
||||
export let iconDescription = '';
|
||||
export let tabindex = '0';
|
||||
export let style = undefined;
|
||||
|
||||
import { createEventDispatcher, afterUpdate } from 'svelte';
|
||||
import Information16 from 'carbon-icons-svelte/lib/Information16';
|
||||
import { cx } from '../../lib';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let programmatic = true;
|
||||
let buttonRef = undefined;
|
||||
let tooltipRef = undefined;
|
||||
let iconRef = undefined;
|
||||
|
||||
function onKeydown(event) {
|
||||
if (event.key === 'Escape') {
|
||||
event.stopPropagation();
|
||||
open = false;
|
||||
} else if (event.key === ' ' || event.key === 'Enter') {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
open = true;
|
||||
}
|
||||
}
|
||||
|
||||
function onBlur({ relatedTarget }) {
|
||||
if (tooltipRef && !tooltipRef.contains(relatedTarget)) {
|
||||
open = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openMenu() {
|
||||
programmatic = false;
|
||||
open = true;
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
programmatic = false;
|
||||
open = false;
|
||||
}
|
||||
|
||||
afterUpdate(() => {
|
||||
if (open) {
|
||||
const button = buttonRef.getBoundingClientRect();
|
||||
const tooltip = tooltipRef.getBoundingClientRect();
|
||||
|
||||
let iconWidth = 16;
|
||||
let iconHeight = 16;
|
||||
|
||||
if (iconRef) {
|
||||
const icon = iconRef.getBoundingClientRect();
|
||||
iconWidth = icon.width;
|
||||
iconHeight = icon.height;
|
||||
}
|
||||
|
||||
let offsetX = 0;
|
||||
let offsetY = 0;
|
||||
|
||||
switch (direction) {
|
||||
case 'bottom':
|
||||
if (!showIcon) {
|
||||
offsetX = -1 * (tooltip.width / 2 - button.width / 2);
|
||||
} else {
|
||||
offsetX = -1 * (tooltip.width / 2 - button.width + iconWidth / 2);
|
||||
}
|
||||
offsetY = iconHeight / 2;
|
||||
break;
|
||||
case 'right':
|
||||
offsetX = button.width + 6;
|
||||
offsetY = -1 * (tooltip.height / 2 + iconWidth / 2 - 3);
|
||||
break;
|
||||
case 'left':
|
||||
if (!showIcon) {
|
||||
offsetX = -1 * (tooltip.width + 6 + 1);
|
||||
} else {
|
||||
offsetX = -1 * (tooltip.width - button.width + iconWidth + 8);
|
||||
}
|
||||
offsetY = -1 * (tooltip.height / 2 + button.height) - 2;
|
||||
break;
|
||||
case 'top':
|
||||
if (!showIcon) {
|
||||
offsetX = -1 * (tooltip.width / 2 - button.width / 2);
|
||||
} else {
|
||||
offsetX = -1 * (tooltip.width / 2 - button.width + iconWidth / 2 + 1);
|
||||
}
|
||||
offsetY = -1 * (tooltip.height + button.height + iconWidth / 2 - 1);
|
||||
break;
|
||||
}
|
||||
|
||||
tooltipRef.style.left = offsetX + 'px';
|
||||
tooltipRef.style.marginTop = offsetY + 'px';
|
||||
}
|
||||
});
|
||||
|
||||
$: {
|
||||
dispatch(open ? 'open' : 'close');
|
||||
}
|
||||
$: buttonProps = {
|
||||
role: 'button',
|
||||
'aria-haspopup': 'true',
|
||||
id: showIcon ? undefined : triggerId,
|
||||
class: showIcon ? cx('--tooltip__trigger') : cx('--tooltip__label', triggerClass),
|
||||
'aria-expanded': open,
|
||||
'aria-describedby': open ? tooltipId : undefined,
|
||||
'aria-labelledby': triggerText ? triggerId : undefined,
|
||||
'aria-label': triggerText ? iconDescription : undefined,
|
||||
tabindex,
|
||||
style: showIcon ? undefined : style
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:body
|
||||
on:click={({ target }) => {
|
||||
if (!programmatic && open && tooltipRef && !tooltipRef.contains(target)) {
|
||||
open = false;
|
||||
}
|
||||
}} />
|
||||
|
||||
<div style="position: relative">
|
||||
{#if showIcon}
|
||||
<div bind:this={buttonRef} id={triggerId} class={cx('--tooltip__label', triggerClass)} {style}>
|
||||
{triggerText}
|
||||
<div
|
||||
bind:this={iconRef}
|
||||
{...buttonProps}
|
||||
on:click|preventDefault|stopPropagation={openMenu}
|
||||
on:focus={openMenu}
|
||||
on:blur={onBlur}
|
||||
on:keydown={onKeydown}>
|
||||
<slot name="icon">
|
||||
<svelte:component this={icon} name={iconName} />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
bind:this={buttonRef}
|
||||
{...buttonProps}
|
||||
on:click|preventDefault|stopPropagation={openMenu}
|
||||
on:focus={openMenu}
|
||||
on:blur={onBlur}
|
||||
on:keydown={onKeydown}>
|
||||
<slot name="triggerText">{triggerText}</slot>
|
||||
</div>
|
||||
{/if}
|
||||
{#if open}
|
||||
<div
|
||||
bind:this={tooltipRef}
|
||||
role="tooltip"
|
||||
tabindex="0"
|
||||
id={tooltipId}
|
||||
data-floating-menu-direction={direction}
|
||||
class={cx('--tooltip', open && '--tooltip--shown', className)}
|
||||
on:blur={closeMenu}>
|
||||
<span class={cx('--tooltip__caret')} />
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
3
src/components/Tooltip/index.js
Normal file
3
src/components/Tooltip/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import Tooltip from './Tooltip.svelte';
|
||||
|
||||
export default Tooltip;
|
||||
|
|
@ -70,6 +70,7 @@ import Tile, {
|
|||
import TimePicker, { TimePickerSelect } from './components/TimePicker';
|
||||
import Toggle, { ToggleSkeleton } from './components/Toggle';
|
||||
import ToggleSmall, { ToggleSmallSkeleton } from './components/ToggleSmall';
|
||||
import Tooltip from './components/Tooltip';
|
||||
import TooltipDefinition from './components/TooltipDefinition';
|
||||
import TooltipIcon from './components/TooltipIcon';
|
||||
import UnorderedList from './components/UnorderedList';
|
||||
|
|
@ -170,6 +171,7 @@ export {
|
|||
ToggleSkeleton,
|
||||
ToggleSmall,
|
||||
ToggleSmallSkeleton,
|
||||
Tooltip,
|
||||
TooltipDefinition,
|
||||
TooltipIcon,
|
||||
UnorderedList
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue