mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(tooltip): support align prop from carbon-components v10.25 (#446)

Browse source
This commit is contained in:
Eric Liu 2020-12-05 09:04:53 -08:00 • committed by GitHub
commit 222c7f2899
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 71 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -4131,6 +4131,7 @@ None.
| refTooltip | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element | | refTooltip | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip | | open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
| align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
| direction | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button | | direction | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
| hideIcon | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon | | hideIcon | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button<br />Icon size must be 16px (e.g., `Add16`, `Task16`) | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button<br />Icon size must be 16px (e.g., `Add16`, `Task16`) |

2
docs/package.json
View file

@ -12,7 +12,7 @@
"@carbon/themes": "^10.22.1", "@carbon/themes": "^10.22.1",
"@sveltech/routify": "^1.9.9", "@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.0.1", "autoprefixer": "^10.0.1",
"carbon-components": "^10.23.1", "carbon-components": "^10.25.0",
"carbon-components-svelte": "../", "carbon-components-svelte": "../",
"clipboard-copy": "^3.1.0", "clipboard-copy": "^3.1.0",
"mdsvex": "^0.8.8", "mdsvex": "^0.8.8",

12
docs/src/COMPONENT_API.json
View file

@ -3356,7 +3356,7 @@
{ "type": "forwarded", "name": "mouseleave", "element": "table" } { "type": "forwarded", "name": "mouseleave", "element": "table" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "table" }, "rest_props": { "type": "Element", "name": "div" },
"extends": { "extends": {
"interface": "DataTableHeader", "interface": "DataTableHeader",
"import": "\"../DataTable/DataTable\"" "import": "\"../DataTable/DataTable\""
@ -9274,6 +9274,16 @@
"moduleName": "Tooltip", "moduleName": "Tooltip",
"filePath": "/src/Tooltip/Tooltip.svelte", "filePath": "/src/Tooltip/Tooltip.svelte",
"props": [ "props": [
{
"name": "align",
"kind": "let",
"description": "Set the alignment of the tooltip relative to the icon",
"type": "\"start\" | \"center\" | \"end\"",
"value": "\"center\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{ {
"name": "direction", "name": "direction",
"kind": "let", "kind": "let",

10
docs/src/pages/components/Tooltip.svx
View file

@ -6,8 +6,8 @@
### Default (icon-only, "bottom" direction) ### Default (icon-only, "bottom" direction)
<Tooltip> <Tooltip tooltipBodyId="tooltip-body">
<p> <p id="tooltip-body">
Resources are provisioned based on your account's organization. Resources are provisioned based on your account's organization.
</p> </p>
</Tooltip> </Tooltip>
@ -27,6 +27,12 @@
<Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip> <Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
<Tooltip triggerText="Left" direction="left"><p>Left</p></Tooltip> <Tooltip triggerText="Left" direction="left"><p>Left</p></Tooltip>
### Alignment
<Tooltip triggerText="Start" align="start"><p>Start</p></Tooltip>
<Tooltip triggerText="End" align="end"><p>End</p></Tooltip>
<Tooltip triggerText="Center" align="center"><p>Center</p></Tooltip>
### Interactive ### Interactive
<Tooltip triggerText="Resource list"> <Tooltip triggerText="Resource list">

20
docs/yarn.lock
View file

@ -771,24 +771,24 @@ caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001137:
integrity sha512-VAy5RHDfTJhpxnDdp2n40GPPLp3KqNrXz1QqFv4J64HvArKs8nuNMOWkB3ICOaBTU/Aj4rYAo/ytdQDDFF/Pug== integrity sha512-VAy5RHDfTJhpxnDdp2n40GPPLp3KqNrXz1QqFv4J64HvArKs8nuNMOWkB3ICOaBTU/Aj4rYAo/ytdQDDFF/Pug==
carbon-components-svelte@../: carbon-components-svelte@../:
version "0.21.0" version "0.25.1"
dependencies: dependencies:
carbon-icons-svelte "^10.17.0" carbon-icons-svelte "^10.21.0"
flatpickr "4.6.3" flatpickr "4.6.3"
carbon-components@^10.23.1: carbon-components@^10.25.0:
version "10.23.1" version "10.25.0"
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.23.1.tgz#cf649a09aa25eac14dc158f0fb79ba625730026c" resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.25.0.tgz#268441eb5f06be35f72790770bed9ba0cd52a0b1"
integrity sha512-izeyNCo9cPfdw9358y5VPsDRzmGAO1wAjSnkD5gGEQO46P2HBdQcgXV1IqjAbFuit+TgfG/MrP38u+pmjp4zyQ== integrity sha512-0XzHaDxJ7aO23xZ7L/efAkSLuo3pKf7h94CAP0RsXPp2c9KL7uYdjtSZLmAqMkDQrOSORnkUju6zQhI+ZYcEIw==
dependencies: dependencies:
flatpickr "4.6.1" flatpickr "4.6.1"
lodash.debounce "^4.0.8" lodash.debounce "^4.0.8"
warning "^3.0.0" warning "^3.0.0"
carbon-icons-svelte@^10.17.0: carbon-icons-svelte@^10.21.0:
version "10.17.0" version "10.21.0"
resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.17.0.tgz#f7559f58be9c789097ea4035e52dbc4c12691d45" resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.21.0.tgz#9bbdd37d5513d484e9706d6335c121f60f3186c4"
integrity sha512-as1RN87YLvF7iepGAGWQOk2oleyb4w17BoHSYyQgE3MceOla04YdSWASK5c22XZZnmMJbbrT17Z34Cl70niz0Q== integrity sha512-5NNaRdmbS4N36dUGNj72Ys3VqVjH3fZ69AhYUHx+bH02GFYCwAaE49qjtP77kP7DKMtDV9NmMEti/P/JB83aYQ==
caseless@~0.12.0: caseless@~0.12.0:
version "0.12.0" version "0.12.0"

2
package.json
View file

@ -27,7 +27,7 @@
"@rollup/plugin-node-resolve": "^10.0.0", "@rollup/plugin-node-resolve": "^10.0.0",
"@tsconfig/svelte": "^1.0.10", "@tsconfig/svelte": "^1.0.10",
"autoprefixer": "^9.8.6", "autoprefixer": "^9.8.6",
"carbon-components-10.23": "npm:carbon-components@10.23.1", "carbon-components-10.25": "npm:carbon-components@10.25.0",
"gh-pages": "^3.1.0", "gh-pages": "^3.1.0",
"husky": "^4.3.0", "husky": "^4.3.0",
"lint-staged": "^10.5.1", "lint-staged": "^10.5.1",

12
scripts/build-css.js
View file

@ -18,12 +18,12 @@ const shared = {
$css--default-type: true; $css--default-type: true;
$css--plex: true; $css--plex: true;
@import "node_modules/carbon-components-10.23/scss/globals/scss/_css--reset.scss"; @import "node_modules/carbon-components-10.25/scss/globals/scss/_css--reset.scss";
@import "node_modules/carbon-components-10.23/scss/globals/scss/_css--font-face.scss"; @import "node_modules/carbon-components-10.25/scss/globals/scss/_css--font-face.scss";
@import "node_modules/carbon-components-10.23/scss/globals/scss/_css--helpers.scss"; @import "node_modules/carbon-components-10.25/scss/globals/scss/_css--helpers.scss";
@import "node_modules/carbon-components-10.23/scss/globals/scss/_css--body.scss"; @import "node_modules/carbon-components-10.25/scss/globals/scss/_css--body.scss";
@import "node_modules/carbon-components-10.23/scss/globals/grid/_grid.scss"; @import "node_modules/carbon-components-10.25/scss/globals/grid/_grid.scss";
@import "node_modules/carbon-components-10.23/scss/globals/scss/styles.scss"; @import "node_modules/carbon-components-10.25/scss/globals/scss/styles.scss";
`, `,
components: ``, components: ``,
}; };

23
src/Tooltip/Tooltip.svelte
View file

@ -1,4 +1,10 @@
<script> <script>
/**
* Set the alignment of the tooltip relative to the icon
* @type {"start" | "center" | "end"}
*/
export let align = "center";
/** /**
* Set the direction of the tooltip relative to the button * Set the direction of the tooltip relative to the button
* @type {"top" | "right" | "bottom" | "left"} * @type {"top" | "right" | "bottom" | "left"}
@ -205,10 +211,25 @@
data-floating-menu-direction="{direction}" data-floating-menu-direction="{direction}"
class:bx--tooltip="{true}" class:bx--tooltip="{true}"
class:bx--tooltip--shown="{open}" class:bx--tooltip--shown="{open}"
class:bx--tooltip--top="{direction === 'top'}"
class:bx--tooltip--right="{direction === 'right'}"
class:bx--tooltip--bottom="{direction === 'bottom'}"
class:bx--tooltip--left="{direction === 'left'}"
class:bx--tooltip--align-center="{align === 'center'}"
class:bx--tooltip--align-start="{align === 'start'}"
class:bx--tooltip--align-end="{align === 'end'}"
on:blur="{closeMenu}" on:blur="{closeMenu}"
> >
<span class:bx--tooltip__caret="{true}"></span> <span class:bx--tooltip__caret="{true}"></span>
<slot /> <div
class:bx--tooltip__content="{true}"
tabIndex="-1"
role="dialog"
aria-describedby="{$$props['tooltipBodyId']}"
aria-labelledby="{triggerId}"
>
<slot />
</div>
</div> </div>
{/if} {/if}
</div> </div>

2
types/DataTableSkeleton/DataTableSkeleton.d.ts vendored
View file

@ -3,7 +3,7 @@ import { DataTableHeader } from "../DataTable/DataTable";
export interface DataTableSkeletonProps export interface DataTableSkeletonProps
extends DataTableHeader, extends DataTableHeader,
svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["table"]> { svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Specify the number of columns * Specify the number of columns
* Superseded by `headers` if `headers` is a non-empty array * Superseded by `headers` if `headers` is a non-empty array

6
types/Tooltip/Tooltip.d.ts vendored
View file

@ -1,6 +1,12 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
export interface TooltipProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { export interface TooltipProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the alignment of the tooltip relative to the icon
* @default "center"
*/
align?: "start" | "center" | "end";
/** /**
* Set the direction of the tooltip relative to the button * Set the direction of the tooltip relative to the button
* @default "bottom" * @default "bottom"

8
yarn.lock
View file

@ -416,10 +416,10 @@ caniuse-lite@^1.0.30001109:
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001124.tgz#5d9998190258e11630d674fc50ea8e579ae0ced2" resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001124.tgz#5d9998190258e11630d674fc50ea8e579ae0ced2"
integrity sha512-zQW8V3CdND7GHRH6rxm6s59Ww4g/qGWTheoboW9nfeMg7sUoopIfKCcNZUjwYRCOrvereh3kwDpZj4VLQ7zGtA== integrity sha512-zQW8V3CdND7GHRH6rxm6s59Ww4g/qGWTheoboW9nfeMg7sUoopIfKCcNZUjwYRCOrvereh3kwDpZj4VLQ7zGtA==
"carbon-components-10.23@npm:carbon-components@10.23.1": "carbon-components-10.25@npm:carbon-components@10.25.0":
version "10.23.1" version "10.25.0"
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.23.1.tgz#cf649a09aa25eac14dc158f0fb79ba625730026c" resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.25.0.tgz#268441eb5f06be35f72790770bed9ba0cd52a0b1"
integrity sha512-izeyNCo9cPfdw9358y5VPsDRzmGAO1wAjSnkD5gGEQO46P2HBdQcgXV1IqjAbFuit+TgfG/MrP38u+pmjp4zyQ== integrity sha512-0XzHaDxJ7aO23xZ7L/efAkSLuo3pKf7h94CAP0RsXPp2c9KL7uYdjtSZLmAqMkDQrOSORnkUju6zQhI+ZYcEIw==
dependencies: dependencies:
flatpickr "4.6.1" flatpickr "4.6.1"
lodash.debounce "^4.0.8" lodash.debounce "^4.0.8"