From a3a4a02d94272a7d18d7efdfb2c14b5fef3caa33 Mon Sep 17 00:00:00 2001 From: Eric Y Liu Date: Fri, 19 Mar 2021 06:34:42 -0700 Subject: [PATCH] feat(popover): add Popover component --- COMPONENT_INDEX.md | 26 ++++++++- docs/src/COMPONENT_API.json | 72 ++++++++++++++++++++++++- docs/src/layouts/ComponentLayout.svelte | 7 ++- docs/src/pages/_layout.svelte | 2 +- docs/src/pages/components/Popover.svx | 67 +++++++++++++++++++++++ src/Popover/Popover.svelte | 48 +++++++++++++++++ src/Popover/index.js | 1 + src/index.js | 1 + types/Popover/Popover.d.ts | 59 ++++++++++++++++++++ types/index.d.ts | 1 + 10 files changed, 280 insertions(+), 4 deletions(-) create mode 100644 docs/src/pages/components/Popover.svx create mode 100644 src/Popover/Popover.svelte create mode 100644 src/Popover/index.js create mode 100644 types/Popover/Popover.d.ts diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index f9e21080..4f6e2f40 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 160 components exported from carbon-components-svelte@0.30.0. +> 161 components exported from carbon-components-svelte@0.30.0. ## Components @@ -93,6 +93,7 @@ - [`PaginationNav`](#paginationnav) - [`PaginationSkeleton`](#paginationskeleton) - [`PasswordInput`](#passwordinput) +- [`Popover`](#popover) - [`ProgressIndicator`](#progressindicator) - [`ProgressIndicatorSkeleton`](#progressindicatorskeleton) - [`ProgressStep`](#progressstep) @@ -2632,6 +2633,29 @@ None. | focus | forwarded | -- | | blur | forwarded | -- | +## `Popover` + +### Props + +| Prop name | Kind | Reactive | Type | Default value | Description | +| :----------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------- | +| open | let | No | boolean | false | Set to `true` to display the popover | +| caret | let | No | boolean | false | Set to `true` render a caret | +| align | let | No | "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | "top" | Specify the alignment of the caret | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| highContrast | let | No | boolean | false | Set to `true` to enable the high contrast variant | +| relative | let | No | boolean | false | Set to `true` to use a relative position | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +None. + ## `ProgressIndicator` ### Props diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 6e59c9ea..be35f4be 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -1,5 +1,5 @@ { - "total": 160, + "total": 161, "components": [ { "moduleName": "Accordion", @@ -6778,6 +6778,76 @@ "typedefs": [], "rest_props": { "type": "Element", "name": "input" } }, + { + "moduleName": "Popover", + "filePath": "src/Popover/Popover.svelte", + "props": [ + { + "name": "open", + "kind": "let", + "description": "Set to `true` to display the popover", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "caret", + "kind": "let", + "description": "Set to `true` render a caret", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "align", + "kind": "let", + "description": "Specify the alignment of the caret", + "type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"", + "value": "\"top\"", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "highContrast", + "kind": "let", + "description": "Set to `true` to enable the high contrast variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, + { + "name": "relative", + "kind": "let", + "description": "Set to `true` to use a relative position", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + } + ], + "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "events": [], + "typedefs": [], + "rest_props": { "type": "Element", "name": "div" } + }, { "moduleName": "ProgressIndicator", "filePath": "src/ProgressIndicator/ProgressIndicator.svelte", diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte index 238f0a52..3f7c9b4c 100644 --- a/docs/src/layouts/ComponentLayout.svelte +++ b/docs/src/layouts/ComponentLayout.svelte @@ -208,7 +208,12 @@ } } - .preview-viewer > .bx--aspect-ratio { + .preview-viewer > .bx--aspect-ratio, + .preview-viewer [data-outline] { outline: 1px solid var(--cds-interactive-04); } + + [data-outline="relative"] { + position: relative; + } diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte index 3b1a616d..162e382b 100644 --- a/docs/src/pages/_layout.svelte +++ b/docs/src/pages/_layout.svelte @@ -20,7 +20,7 @@ import Footer from "../components/Footer.svelte"; const deprecated = ["ToggleSmall", "Icon"]; - const new_components = ["ImageLoader", "LocalStorage"]; + const new_components = ["Popover"]; let isOpen = false; let isSideNavOpen = true; diff --git a/docs/src/pages/components/Popover.svx b/docs/src/pages/components/Popover.svx new file mode 100644 index 00000000..1a722a93 --- /dev/null +++ b/docs/src/pages/components/Popover.svx @@ -0,0 +1,67 @@ + + +### Default + +By default, the position of the popover component is absolute. + +
+ Parent + +
Content
+ +
+ +### Relative + +Set `relative` to `true` to use a relative position. + +
+ Parent + +
Content
+ +
+ + +### With caret + +
+ Parent + +
Content
+ +
+ +### Custom caret alignment + +By default, the caret is aligned "top". + +Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-bottom"`, `"left-top"`, `"right"`, `"right-bottom"` or `"right-top"`. + +
+ Parent + +
Content
+ +
+ +### Light variant + +
+ Parent + +
Content
+ +
+ +### High contrast variant + +
+ Parent + +
Content
+ +
\ No newline at end of file diff --git a/src/Popover/Popover.svelte b/src/Popover/Popover.svelte new file mode 100644 index 00000000..e3af397c --- /dev/null +++ b/src/Popover/Popover.svelte @@ -0,0 +1,48 @@ + + +
+
+ +
+
diff --git a/src/Popover/index.js b/src/Popover/index.js new file mode 100644 index 00000000..6ffabfa1 --- /dev/null +++ b/src/Popover/index.js @@ -0,0 +1 @@ +export { default as Popover } from "./Popover.svelte"; diff --git a/src/index.js b/src/index.js index b0574d4c..d849dea7 100644 --- a/src/index.js +++ b/src/index.js @@ -77,6 +77,7 @@ export { OrderedList } from "./OrderedList"; export { OverflowMenu, OverflowMenuItem } from "./OverflowMenu"; export { Pagination, PaginationSkeleton } from "./Pagination"; export { PaginationNav } from "./PaginationNav"; +export { Popover } from "./Popover"; export { ProgressIndicator, ProgressIndicatorSkeleton, diff --git a/types/Popover/Popover.d.ts b/types/Popover/Popover.d.ts new file mode 100644 index 00000000..fb041746 --- /dev/null +++ b/types/Popover/Popover.d.ts @@ -0,0 +1,59 @@ +/// +import { SvelteComponentTyped } from "svelte"; + +export interface PopoverProps + extends svelte.JSX.HTMLAttributes { + /** + * Set to `true` to display the popover + * @default false + */ + open?: boolean; + + /** + * Set to `true` render a caret + * @default false + */ + caret?: boolean; + + /** + * Specify the alignment of the caret + * @default "top" + */ + align?: + | "top" + | "top-left" + | "top-right" + | "bottom" + | "bottom-left" + | "bottom-right" + | "left" + | "left-bottom" + | "left-top" + | "right" + | "right-bottom" + | "right-top"; + + /** + * Set to `true` to enable the light variant + * @default false + */ + light?: boolean; + + /** + * Set to `true` to enable the high contrast variant + * @default false + */ + highContrast?: boolean; + + /** + * Set to `true` to use a relative position + * @default false + */ + relative?: boolean; +} + +export default class Popover extends SvelteComponentTyped< + PopoverProps, + {}, + { default: {} } +> {} diff --git a/types/index.d.ts b/types/index.d.ts index 16073c71..17d9a595 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -86,6 +86,7 @@ export { default as OverflowMenuItem } from "./OverflowMenu/OverflowMenuItem"; export { default as Pagination } from "./Pagination/Pagination"; export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton"; export { default as PaginationNav } from "./PaginationNav/PaginationNav"; +export { default as Popover } from "./Popover/Popover"; export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator"; export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton"; export { default as ProgressStep } from "./ProgressIndicator/ProgressStep";