Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft commit for review for Popover v11 #1896 #1930

Open
wants to merge 1 commit into
base: next/v11-styles
Choose a base branch
from
Open

Draft commit for review for Popover v11 #1896 #1930

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
201 changes: 118 additions & 83 deletions docs/src/pages/components/Popover.svx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,123 +3,137 @@ components: ["Popover", "PopoverContent"]
---

<script>
import { Popover, PopoverContent } from "carbon-components-svelte";
import { Button, Popover, PopoverContent } from "carbon-components-svelte";
import FavoriteFilled from "carbon-icons-svelte/lib/FavoriteFilled.svelte";
import Preview from "../../components/Preview.svelte";
</script>

## Default

By default, the position of the popover component is absolute.

<div data-outline>
<Popover open>
Parent
<PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent>
</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>
<Popover open>
<div data-outline>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
</div>
<PopoverContent>
<h6>Available storage</h6>
<p>This server has 150 GB of block storage remaining.</p>
</PopoverContent>
</Popover>

## 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 closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
<div data-outline>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
</div>
<PopoverContent>
<h6>Available storage</h6>
<p>This server has 150 GB of block storage remaining.</p>
</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"`.

<div data-outline>
Parent
<Popover open align="top-left">
<div style="padding: var(--bx-spacing-05)">top-left</div>
</Popover>
<Popover open align="top-left">
<div data-outline>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
</div>
<div data-outline>
Parent
<PopoverContent>
<p>Top-left alignment</p>
</PopoverContent>
</Popover>

<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
<Popover open align="top-right">
<div style="padding: var(--bx-spacing-05)">top-right</div>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<p>Top-right alignment</p>
</PopoverContent>
</Popover>
</div>
<div data-outline>
Parent
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
<Popover open align="bottom">
<div style="padding: var(--bx-spacing-05)">bottom</div>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<p>Bottom alignment</p>
</PopoverContent>
</Popover>
</div>
<div data-outline>
Parent
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
<Popover open align="bottom-left">
<div style="padding: var(--bx-spacing-05)">bottom-left</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="bottom-right">
<div style="padding: var(--bx-spacing-05)">bottom-right</div>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<p>Bottom-left alignment</p>
</PopoverContent>
</Popover>
</div>
<div data-outline>
Parent
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
<Popover open align="left">
<div style="padding: var(--bx-spacing-05)">left</div>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<p>Left alignment</p>
</PopoverContent>
</Popover>
</div>
<div data-outline>
Parent
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
<Popover open align="left-bottom">
<div style="padding: var(--bx-spacing-05)">left-bottom</div>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<p>Left-bottom alignment</p>
</PopoverContent>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="left-right">
<div style="padding: var(--bx-spacing-05)">left-right</div>
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
<Popover open align="left-top">
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<p>Left-top alignment</p>
</PopoverContent>
</Popover>
</div>
<div data-outline>
Parent
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
<Popover open align="right">
<div style="padding: var(--bx-spacing-05)">right</div>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<p>Right alignment</p>
</PopoverContent>
</Popover>
</div>
<div data-outline>
Parent
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
<Popover open align="right-bottom">
<div style="padding: var(--bx-spacing-05)">right-bottom</div>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<p>Right-bottom alignment</p>
</PopoverContent>
</Popover>
</div>
<div data-outline>
Parent
<div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
<Popover open align="right-top">
<div style="padding: var(--bx-spacing-05)">right-top</div>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<p>Right-top alignment</p>
</PopoverContent>
</Popover>
</div>

## With caret

<div data-outline>
Parent
<Popover caret open>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
<Popover caret open>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<h6>Available storage</h6>
<p>This server has 150 GB of block storage remaining.</p>
</PopoverContent>
</Popover>
</div>

## Custom caret alignment
Expand All @@ -128,29 +142,50 @@ 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"`.

<div data-outline>
Parent
<Popover caret align="top-left" open>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
<div data-outline style="width:100%;padding:1em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
<Popover caret align="right-top" open>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<h6>Available storage</h6>
<p>This server has 150 GB of block storage remaining.</p>
</PopoverContent>
</Popover>
</div>

## Light variant

<div data-outline>
Parent
<Popover light open>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
<Popover light open>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<h6>Available storage</h6>
<p>This server has 150 GB of block storage remaining.</p>
</PopoverContent>
</Popover>
</div>

## High contrast variant

<div data-outline>
Parent
<Popover highContrast open>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
<Popover highContrast open>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<h6>Available storage</h6>
<p>This server has 150 GB of block storage remaining.</p>
</PopoverContent>
</Popover>
</div>

## Drop shadow

<div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
<Popover dropShadow open>
<Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<h6>Available storage</h6>
<p>This server has 150 GB of block storage remaining.</p>
</PopoverContent>
</Popover>
</div>

## External element
Expand Down
33 changes: 22 additions & 11 deletions docs/src/pages/framed/Popover/WithButton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,31 @@
<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>
<Popover
bind:open="{open}"
align="bottom-left"
on:click:outside="{({ detail }) => {
console.log('on:click:outside');
open = ref.contains(detail.target);
}}"
<div
data-outline
style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;"
>
<div style="padding: var(--bx-spacing-05)">Content</div>
</Popover>
<Popover
bind:open="{open}"
align="bottom-left"
caret
on:click:outside="{({ detail }) => {
console.log('on:click:outside');
open = ref.contains(detail.target);
}}"
>
<Button on:click="{() => (open = !open)}">Toggle popover</Button>
<PopoverContent>
<div style="padding:0.5em;">
<h6>Available storage</h6>
<p>This server has 150 GB of block storage remaining.</p>
</div>
</PopoverContent>
</Popover>
</div>
</div>
23 changes: 16 additions & 7 deletions src/Popover/Popover.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@
* @event {{ target: HTMLElement; }} click:outside
*/

/** Set an id for the content `span` component */
export let id = "ccs-" + Math.random().toString(36);

/** Set to `true` to display the popover */
export let open = false;

Expand All @@ -21,11 +24,17 @@
/** Set to `true` to enable the light variant */
export let light = false;

/** Specify whether a drop shadow should be rendered on the popover */
export let dropShadow = false;

/** Set to `true` to enable the high contrast variant */
export let highContrast = false;

/** Set to `true` to use a relative position */
export let relative = false;
/**
* Specify the container `div` props
* @type {import('svelte/elements').HTMLDivAttributes}
*/
export let containerProps = {};

import { createEventDispatcher } from "svelte";

Expand All @@ -44,10 +53,12 @@
}}"
/>

<div
<span
bind:this="{ref}"
id="{id}"
class:bx--popover-container="{true}"
class:bx--popover--caret="{caret}"
class:bx--popover--drop-shadow="{dropShadow}"
class:bx--popover--light="{light}"
class:bx--popover--high-contrast="{highContrast}"
class:bx--popover--top="{align === 'top'}"
Expand All @@ -63,9 +74,7 @@
class:bx--popover--right-bottom="{align === 'right-bottom'}"
class:bx--popover--right-top="{align === 'right-top'}"
class:bx--popover--open="{open}"
class:bx--popover--relative="{relative}"
style:position="{relative ? "relative" : undefined}"
{...$$restProps}
{...containerProps}
>
<slot />
</div>
</span>
10 changes: 7 additions & 3 deletions src/Popover/PopoverContent.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
<script>
export let className = null;
/**
* Specify the content `span` props
* @type {import('svelte/elements').HTMLDivAttributes}
*/
export let contentProps = {};
</script>

<span class:bx--popover="{true}" {...$$restProps}>
<span class:bx--popover-content="{true}" class="{className}">
<span class:bx--popover="{true}">
<span class:bx--popover-content="{true}" {...contentProps}>
<slot />
</span>
<span class:bx--popover-caret="{true}"></span>
Expand Down
Loading
Loading