Skip to content

Commit 7a90581

Browse files
gregorwgregorw
committed
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
1 parent baf33c0 commit 7a90581

13 files changed

+239
-171
lines changed

‎COMPONENT_INDEX.md

+30-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Component Index
22

3-
> 163 components exported from [email protected].
3+
> 164 components exported from [email protected].
44
55
## Components
66

@@ -95,6 +95,7 @@
9595
- [`PaginationSkeleton`](#paginationskeleton)
9696
- [`PasswordInput`](#passwordinput)
9797
- [`Popover`](#popover)
98+
- [`PopoverContent`](#popovercontent)
9899
- [`ProgressBar`](#progressbar)
99100
- [`ProgressIndicator`](#progressindicator)
100101
- [`ProgressIndicatorSkeleton`](#progressindicatorskeleton)
@@ -2797,15 +2798,15 @@ None.
27972798

27982799
### Props
27992800

2800-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
2801-
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------ |
2802-
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to display the popover |
2803-
| closeOnOutsideClick | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to close the popover on an outside click |
2804-
| caret | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` render a caret |
2805-
| align | No | <code>let</code> | No | <code>"top" &#124; "top-left" &#124; "top-right" &#124; "bottom" &#124; "bottom-left" &#124; "bottom-right" &#124; "left" &#124; "left-bottom" &#124; "left-top" &#124; "right" &#124; "right-bottom" &#124; "right-top"</code> | <code>"top"</code> | Specify the alignment of the caret |
2806-
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
2807-
| highContrast | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the high contrast variant |
2808-
| relative | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use a relative position |
2801+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
2802+
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------ |
2803+
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to display the popover |
2804+
| closeOnOutsideClick | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to close the popover on an outside click |
2805+
| isTabTip | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render the tab tip variant |
2806+
| caret | No | <code>let</code> | No | <code>boolean</code> | <code>undefined</code> | Set to `true` render a caret |
2807+
| align | No | <code>let</code> | No | <code>"top" &#124; "top-left" &#124; "top-right" &#124; "bottom" &#124; "bottom-left" &#124; "bottom-right" &#124; "left" &#124; "left-bottom" &#124; "left-top" &#124; "right" &#124; "right-bottom" &#124; "right-top"</code> | <code>undefined</code> | Specify the alignment of the caret |
2808+
| dropShadow | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to omit the drop shadow |
2809+
| highContrast | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the high contrast variant |
28092810

28102811
### Slots
28112812

@@ -2819,6 +2820,25 @@ None.
28192820
| :------------ | :--------- | :------------------------------------ |
28202821
| click:outside | dispatched | <code>{ target: HTMLElement; }</code> |
28212822

2823+
## `PopoverContent`
2824+
2825+
### Props
2826+
2827+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
2828+
| :----------- | :------- | :--------------- | :------- | --------------- | ----------------- | ----------- |
2829+
| className | No | <code>let</code> | No | -- | <code>null</code> | -- |
2830+
| contentProps | No | <code>let</code> | No | <code>{}</code> | <code>{}</code> | -- |
2831+
2832+
### Slots
2833+
2834+
| Slot name | Default | Props | Fallback |
2835+
| :-------- | :------ | :---- | :------- |
2836+
| -- | Yes | -- | -- |
2837+
2838+
### Events
2839+
2840+
None.
2841+
28222842
## `ProgressBar`
28232843

28242844
### Props

‎docs/src/COMPONENT_API.json

+47-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"total": 163,
2+
"total": 164,
33
"components": [
44
{
55
"moduleName": "Accordion",
@@ -8912,9 +8912,9 @@
89128912
"reactive": false
89138913
},
89148914
{
8915-
"name": "caret",
8915+
"name": "isTabTip",
89168916
"kind": "let",
8917-
"description": "Set to `true` render a caret",
8917+
"description": "Set to `true` to render the tab tip variant",
89188918
"type": "boolean",
89198919
"value": "false",
89208920
"isFunction": false,
@@ -8924,45 +8924,43 @@
89248924
"reactive": false
89258925
},
89268926
{
8927-
"name": "align",
8927+
"name": "caret",
89288928
"kind": "let",
8929-
"description": "Specify the alignment of the caret",
8930-
"type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
8931-
"value": "\"top\"",
8929+
"description": "Set to `true` render a caret",
8930+
"type": "boolean",
89328931
"isFunction": false,
89338932
"isFunctionDeclaration": false,
89348933
"isRequired": false,
89358934
"constant": false,
89368935
"reactive": false
89378936
},
89388937
{
8939-
"name": "light",
8938+
"name": "align",
89408939
"kind": "let",
8941-
"description": "Set to `true` to enable the light variant",
8942-
"type": "boolean",
8943-
"value": "false",
8940+
"description": "Specify the alignment of the caret",
8941+
"type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
89448942
"isFunction": false,
89458943
"isFunctionDeclaration": false,
89468944
"isRequired": false,
89478945
"constant": false,
89488946
"reactive": false
89498947
},
89508948
{
8951-
"name": "highContrast",
8949+
"name": "dropShadow",
89528950
"kind": "let",
8953-
"description": "Set to `true` to enable the high contrast variant",
8951+
"description": "Set to `false` to omit the drop shadow",
89548952
"type": "boolean",
8955-
"value": "false",
8953+
"value": "true",
89568954
"isFunction": false,
89578955
"isFunctionDeclaration": false,
89588956
"isRequired": false,
89598957
"constant": false,
89608958
"reactive": false
89618959
},
89628960
{
8963-
"name": "relative",
8961+
"name": "highContrast",
89648962
"kind": "let",
8965-
"description": "Set to `true` to use a relative position",
8963+
"description": "Set to `true` to enable the high contrast variant",
89668964
"type": "boolean",
89678965
"value": "false",
89688966
"isFunction": false,
@@ -8982,7 +8980,39 @@
89828980
}
89838981
],
89848982
"typedefs": [],
8985-
"rest_props": { "type": "Element", "name": "div" }
8983+
"rest_props": { "type": "Element", "name": "span" }
8984+
},
8985+
{
8986+
"moduleName": "PopoverContent",
8987+
"filePath": "src/Popover/PopoverContent.svelte",
8988+
"props": [
8989+
{
8990+
"name": "className",
8991+
"kind": "let",
8992+
"value": "null",
8993+
"isFunction": false,
8994+
"isFunctionDeclaration": false,
8995+
"isRequired": false,
8996+
"constant": false,
8997+
"reactive": false
8998+
},
8999+
{
9000+
"name": "contentProps",
9001+
"kind": "let",
9002+
"type": "{}",
9003+
"value": "{}",
9004+
"isFunction": false,
9005+
"isFunctionDeclaration": false,
9006+
"isRequired": false,
9007+
"constant": false,
9008+
"reactive": false
9009+
}
9010+
],
9011+
"moduleExports": [],
9012+
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
9013+
"events": [],
9014+
"typedefs": [],
9015+
"rest_props": { "type": "Element", "name": "span" }
89869016
},
89879017
{
89889018
"moduleName": "ProgressBar",

‎docs/src/global.css

+4
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,10 @@ html[theme="g90"] .code-override {
121121
margin-bottom: var(--bx-spacing-05);
122122
}
123123

124+
.p-05 {
125+
padding: var(--bx-spacing-05);
126+
}
127+
124128
.table {
125129
position: sticky;
126130
max-height: calc(100vh - 3rem);

0 commit comments

Comments
 (0)