mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-19 11:59:34 +00:00
feat(v11): Popover
* Breaking changes * - The `Popover` now uses a different markup. The trigger becomes a child of the component. - The new `PopoverContent` becomes an additional child of the `Popover` component. - remove `relative` property
This commit is contained in:
Gregor Wassmann
parent
baf33c0505
commit
d139d19524
13 changed files with 245 additions and 174 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"total": 163,
|
||||
"total": 164,
|
||||
"components": [
|
||||
{
|
||||
"moduleName": "Accordion",
|
||||
|
|
@ -8911,12 +8911,23 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "isTabTip",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to render the tab tip variant",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "caret",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` render a caret",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
|
|
@ -8928,7 +8939,6 @@
|
|||
"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,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
|
|
@ -8936,11 +8946,11 @@
|
|||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "light",
|
||||
"name": "dropShadow",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to enable the light variant",
|
||||
"description": "Set to `false` to omit the drop shadow",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"value": "true",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
|
|
@ -8958,18 +8968,6 @@
|
|||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "relative",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to use a relative position",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
|
|
@ -8982,7 +8980,39 @@
|
|||
}
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
"rest_props": { "type": "Element", "name": "span" }
|
||||
},
|
||||
{
|
||||
"moduleName": "PopoverContent",
|
||||
"filePath": "src/Popover/PopoverContent.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "className",
|
||||
"kind": "let",
|
||||
"value": "null",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "contentProps",
|
||||
"kind": "let",
|
||||
"type": "{}",
|
||||
"value": "{}",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "span" }
|
||||
},
|
||||
{
|
||||
"moduleName": "ProgressBar",
|
||||
|
|
|
|||
|
|
@ -121,6 +121,10 @@ html[theme="g90"] .code-override {
|
|||
margin-bottom: var(--bx-spacing-05);
|
||||
}
|
||||
|
||||
.p-05 {
|
||||
padding: var(--bx-spacing-05);
|
||||
}
|
||||
|
||||
.table {
|
||||
position: sticky;
|
||||
max-height: calc(100vh - 3rem);
|
||||
|
|
|
|||
|
|
@ -1,153 +1,128 @@
|
|||
---
|
||||
components: ["Popover", "PopoverContent"]
|
||||
---
|
||||
|
||||
<script>
|
||||
import { Popover } from "carbon-components-svelte";
|
||||
import { Popover, PopoverContent, Button } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
import Settings from "carbon-icons-svelte/lib/Settings.svelte";
|
||||
</script>
|
||||
|
||||
## Default
|
||||
|
||||
By default, the position of the popover component is absolute.
|
||||
By default, the alignment of the popover is at the bottom.
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
## Relative position
|
||||
|
||||
Set `relative` to `true` to use a relative position.
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover relative open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
## Close on outside click
|
||||
|
||||
Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover.
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<Popover open>
|
||||
<div data-outline>Parent</div>
|
||||
<PopoverContent className="p-05">Content</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
## Popover alignment
|
||||
|
||||
Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`.
|
||||
|
||||
The default `align` value is `"top"`.
|
||||
The default `align` value is `"bottom"`.
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="top-left">
|
||||
<div style="padding: var(--bx-spacing-05)">top-left</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="top-right">
|
||||
<div style="padding: var(--bx-spacing-05)">top-right</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
**At the bottom**
|
||||
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<Popover open align="bottom">
|
||||
<div style="padding: var(--bx-spacing-05)">bottom</div>
|
||||
<div data-outline>Parent</div>
|
||||
<PopoverContent className="p-05">bottom</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="bottom-left">
|
||||
<div style="padding: var(--bx-spacing-05)">bottom-left</div>
|
||||
<div data-outline>Parent</div>
|
||||
<PopoverContent className="p-05">bottom-left</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="bottom-right">
|
||||
<div style="padding: var(--bx-spacing-05)">bottom-right</div>
|
||||
<div data-outline>Parent</div>
|
||||
<PopoverContent className="p-05">bottom-right</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
|
||||
**To the left**
|
||||
|
||||
<div style="display: flex; justify-content: space-around; ">
|
||||
<Popover open align="left">
|
||||
<div style="padding: var(--bx-spacing-05)">left</div>
|
||||
<div data-outline style="line-height: 2rem">Parent</div><!-- Height of 32px/2rem is assumed by @carbon/styles. Otherwise caret is misaligned. -->
|
||||
<PopoverContent className="p-05">left</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="left-bottom">
|
||||
<div style="padding: var(--bx-spacing-05)">left-bottom</div>
|
||||
<div data-outline style="line-height: 2rem">Parent</div><!-- Height of 32px/2rem is assumed by @carbon/styles. Otherwise caret is misaligned. -->
|
||||
<PopoverContent className="p-05">left-bottom</PopoverContent>
|
||||
</Popover>
|
||||
<Popover open align="left-top">
|
||||
<div data-outline style="line-height: 2rem">Parent</div><!-- Height of 32px/2rem is assumed by @carbon/styles. Otherwise caret is misaligned. -->
|
||||
<PopoverContent className="p-05">left-top</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="left-right">
|
||||
<div style="padding: var(--bx-spacing-05)">left-right</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
|
||||
**To the right**
|
||||
|
||||
<div style="display: flex; justify-content: space-around ">
|
||||
<Popover open align="right">
|
||||
<div style="padding: var(--bx-spacing-05)">right</div>
|
||||
<div data-outline style="line-height: 2rem">Parent</div><!-- Height of 32px/2rem is assumed by @carbon/styles. Otherwise caret is misaligned. -->
|
||||
<PopoverContent className="p-05">right</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="right-bottom">
|
||||
<div style="padding: var(--bx-spacing-05)">right-bottom</div>
|
||||
<div data-outline style="line-height: 2rem">Parent</div><!-- Height of 32px/2rem is assumed by @carbon/styles. Otherwise caret is misaligned. -->
|
||||
<PopoverContent className="p-05">right-bottom</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover open align="right-top">
|
||||
<div style="padding: var(--bx-spacing-05)">right-top</div>
|
||||
<div data-outline style="line-height: 2rem">Parent</div><!-- Height of 32px/2rem is assumed by @carbon/styles. Otherwise caret is misaligned. -->
|
||||
<PopoverContent className="p-05">right-top</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
## With caret
|
||||
**At the top**
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover caret open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<Popover open align="top-left">
|
||||
<div data-outline>Parent</div>
|
||||
<PopoverContent className="p-05">top-left</PopoverContent>
|
||||
</Popover>
|
||||
<Popover open align="top">
|
||||
<div data-outline>Parent</div>
|
||||
<PopoverContent className="p-05">top</PopoverContent>
|
||||
</Popover>
|
||||
<Popover open align="top-right">
|
||||
<div data-outline>Parent</div>
|
||||
<PopoverContent className="p-05">top-right</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
## Custom caret alignment
|
||||
|
||||
By default, the caret is aligned "top".
|
||||
## Without caret
|
||||
|
||||
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"`.
|
||||
<Popover caret={false} open align='right'>
|
||||
<div data-outline>Parent</div>
|
||||
<PopoverContent className="p-05">Content</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover caret align="top-left" open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
## Tab tip variant
|
||||
|
||||
## Light variant
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover light open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<Popover isTabTip open align='bottom-left'>
|
||||
<Button iconOnly kind="ghost" icon={Settings} />
|
||||
<PopoverContent className="p-05">Content</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
## High contrast variant
|
||||
|
||||
<div data-outline>
|
||||
Parent
|
||||
<Popover highContrast open>
|
||||
<div style="padding: var(--bx-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
</div>
|
||||
Set `highContrast` to use the high contrast variant.
|
||||
|
||||
<Popover highContrast open align='right'>
|
||||
<div data-outline>Parent</div>
|
||||
<PopoverContent className="p-05">Content</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
## Without drop shadow
|
||||
|
||||
Set `dropShadow` to `false` to remove the drop shadow.
|
||||
|
||||
<Popover open dropShadow={false} align='right'>
|
||||
<div data-outline>Parent</div>
|
||||
<PopoverContent className="p-05">Content</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
## External element
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<script>
|
||||
import { Popover, Button } from "carbon-components-svelte";
|
||||
import { Popover, PopoverContent, Button } from "carbon-components-svelte";
|
||||
|
||||
let open = true;
|
||||
let ref = null;
|
||||
</script>
|
||||
|
||||
<div bind:this="{ref}" style:position="relative">
|
||||
<Button on:click="{() => (open = !open)}">Toggle popover</Button>
|
||||
<div bind:this="{ref}">
|
||||
<Popover
|
||||
bind:open
|
||||
align="bottom-left"
|
||||
isTabTip
|
||||
on:click:outside="{({ detail }) => {
|
||||
console.log('on:click:outside');
|
||||
open = ref.contains(detail.target);
|
||||
}}"
|
||||
>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
<Button on:click="{() => (open = !open)}">Toggle popover</Button>
|
||||
<PopoverContent className="p-05">Content</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue