Skip to content

Commit

Permalink
Draft commit for review for Popover v11 #1896
Browse files Browse the repository at this point in the history
  • Loading branch information
Samuel Janda committed Mar 8, 2024
1 parent 559701e commit 79d941b
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 107 deletions.
201 changes: 118 additions & 83 deletions docs/src/pages/components/Popover.svx
View file
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
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
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
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

0 comments on commit 79d941b

Please sign in to comment.