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

Draft commit for review for Popover v11 #1896

Browse source
This commit is contained in:
Samuel Janda 2024-03-08 13:02:04 +11:00
commit 79d941bdff
5 changed files with 165 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

201
docs/src/pages/components/Popover.svx
View file

@ -3,7 +3,8 @@ components: ["Popover", "PopoverContent"]
--- ---
<script> <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"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -11,34 +12,29 @@ components: ["Popover", "PopoverContent"]
By default, the position of the popover component is absolute. By default, the position of the popover component is absolute.
<div data-outline> <Popover open>
<Popover open> <div data-outline>
Parent <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent> </div>
</Popover> <PopoverContent>
</div> <h6>Available storage</h6>
<p>This server has 150 GB of block storage remaining.</p>
## Relative position </PopoverContent>
</Popover>
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 ## Close on outside click
Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover. Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover.
<div data-outline> <Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
Parent <div data-outline>
<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}> <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<div style="padding: var(--bx-spacing-05)">Content</div> </div>
</Popover> <PopoverContent>
</div> <h6>Available storage</h6>
<p>This server has 150 GB of block storage remaining.</p>
</PopoverContent>
</Popover>
## Popover alignment ## Popover alignment
@ -46,80 +42,98 @@ Customize the popover alignment using the `align` prop. Valid values include: `"
The default `align` value is `"top"`. The default `align` value is `"top"`.
<div data-outline> <Popover open align="top-left">
Parent <div data-outline>
<Popover open align="top-left"> <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<div style="padding: var(--bx-spacing-05)">top-left</div>
</Popover>
</div> </div>
<div data-outline> <PopoverContent>
Parent <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"> <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> </Popover>
</div> </div>
<div data-outline> <div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
Parent
<Popover open align="bottom"> <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> </Popover>
</div> </div>
<div data-outline> <div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
Parent
<Popover open align="bottom-left"> <Popover open align="bottom-left">
<div style="padding: var(--bx-spacing-05)">bottom-left</div> <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<PopoverContent>
<p>Bottom-left alignment</p>
</PopoverContent>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
Parent
<Popover open align="bottom-right">
<div style="padding: var(--bx-spacing-05)">bottom-right</div>
</Popover>
</div>
<div data-outline>
Parent
<Popover open align="left"> <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> </Popover>
</div> </div>
<div data-outline> <div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
Parent
<Popover open align="left-bottom"> <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> </Popover>
</div> </div>
<div data-outline> <div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
Parent <Popover open align="left-top">
<Popover open align="left-right"> <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<div style="padding: var(--bx-spacing-05)">left-right</div> <PopoverContent>
<p>Left-top alignment</p>
</PopoverContent>
</Popover> </Popover>
</div> </div>
<div data-outline> <div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
Parent
<Popover open align="right"> <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> </Popover>
</div> </div>
<div data-outline> <div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
Parent
<Popover open align="right-bottom"> <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> </Popover>
</div> </div>
<div data-outline> <div data-outline style="width:100%;padding:2em;display:flex;align-items:center;flex-direction:column;">
Parent
<Popover open align="right-top"> <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> </Popover>
</div> </div>
## With caret ## With caret
<div data-outline> <div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
Parent <Popover caret open>
<Popover caret open> <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<div style="padding: var(--bx-spacing-05)">Content</div> <PopoverContent>
</Popover> <h6>Available storage</h6>
<p>This server has 150 GB of block storage remaining.</p>
</PopoverContent>
</Popover>
</div> </div>
## Custom caret alignment ## Custom caret alignment
@ -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"`. 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> <div data-outline style="width:100%;padding:1em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
Parent <Popover caret align="right-top" open>
<Popover caret align="top-left" open> <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<div style="padding: var(--bx-spacing-05)">Content</div> <PopoverContent>
</Popover> <h6>Available storage</h6>
<p>This server has 150 GB of block storage remaining.</p>
</PopoverContent>
</Popover>
</div> </div>
## Light variant ## Light variant
<div data-outline> <div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
Parent <Popover light open>
<Popover light open> <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<div style="padding: var(--bx-spacing-05)">Content</div> <PopoverContent>
</Popover> <h6>Available storage</h6>
<p>This server has 150 GB of block storage remaining.</p>
</PopoverContent>
</Popover>
</div> </div>
## High contrast variant ## High contrast variant
<div data-outline> <div data-outline style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;">
Parent <Popover highContrast open>
<Popover highContrast open> <Button kind="tertiary" iconDescription="Popover example" icon={FavoriteFilled} />
<div style="padding: var(--bx-spacing-05)">Content</div> <PopoverContent>
</Popover> <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> </div>
## External element ## External element

33
docs/src/pages/framed/Popover/WithButton.svelte
View file

@ -1,20 +1,31 @@
<script> <script>
import { Popover, Button } from "carbon-components-svelte"; import { Popover, PopoverContent, Button } from "carbon-components-svelte";
let open = true; let open = true;
let ref = null; let ref = null;
</script> </script>
<div bind:this="{ref}" style:position="relative"> <div bind:this="{ref}" style:position="relative">
<Button on:click="{() => (open = !open)}">Toggle popover</Button> <div
<Popover data-outline
bind:open="{open}" style="width:100%;padding:4em 0 1em 0;display:flex;align-items:center;flex-direction:column;"
align="bottom-left"
on:click:outside="{({ detail }) => {
console.log('on:click:outside');
open = ref.contains(detail.target);
}}"
> >
<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> </div>

23
src/Popover/Popover.svelte
View file

@ -3,6 +3,9 @@
* @event {{ target: HTMLElement; }} click:outside * @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 */ /** Set to `true` to display the popover */
export let open = false; export let open = false;
@ -21,11 +24,17 @@
/** Set to `true` to enable the light variant */ /** Set to `true` to enable the light variant */
export let light = false; 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 */ /** Set to `true` to enable the high contrast variant */
export let highContrast = false; 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"; import { createEventDispatcher } from "svelte";
@ -44,10 +53,12 @@
}}" }}"
/> />
<div <span
bind:this="{ref}" bind:this="{ref}"
id="{id}"
class:bx--popover-container="{true}" class:bx--popover-container="{true}"
class:bx--popover--caret="{caret}" class:bx--popover--caret="{caret}"
class:bx--popover--drop-shadow="{dropShadow}"
class:bx--popover--light="{light}" class:bx--popover--light="{light}"
class:bx--popover--high-contrast="{highContrast}" class:bx--popover--high-contrast="{highContrast}"
class:bx--popover--top="{align === 'top'}" class:bx--popover--top="{align === 'top'}"
@ -63,9 +74,7 @@
class:bx--popover--right-bottom="{align === 'right-bottom'}" class:bx--popover--right-bottom="{align === 'right-bottom'}"
class:bx--popover--right-top="{align === 'right-top'}" class:bx--popover--right-top="{align === 'right-top'}"
class:bx--popover--open="{open}" class:bx--popover--open="{open}"
class:bx--popover--relative="{relative}" {...containerProps}
style:position="{relative ? "relative" : undefined}"
{...$$restProps}
> >
<slot /> <slot />
</div> </span>

10
src/Popover/PopoverContent.svelte
View file

@ -1,9 +1,13 @@
<script> <script>
export let className = null; /**
* Specify the content `span` props
* @type {import('svelte/elements').HTMLDivAttributes}
*/
export let contentProps = {};
</script> </script>
<span class:bx--popover="{true}" {...$$restProps}> <span class:bx--popover="{true}">
<span class:bx--popover-content="{true}" class="{className}"> <span class:bx--popover-content="{true}" {...contentProps}>
<slot /> <slot />
</span> </span>
<span class:bx--popover-caret="{true}"></span> <span class:bx--popover-caret="{true}"></span>

5
tests/Popover.test.svelte
View file

@ -5,16 +5,15 @@
</script> </script>
<Popover <Popover
bind:open bind:open="{open}"
closeOnOutsideClick closeOnOutsideClick
align="right" align="right"
caret caret
relative
light light
highContrast highContrast
on:click:outside="{() => { on:click:outside="{() => {
console.log('on:click:outside'); console.log('on:click:outside');
}}" }}"
> >
<PopoverContent style="padding: var(--bx-spacing-05)">Content</PopoverContent> <PopoverContent>Content</PopoverContent>
</Popover> </Popover>