Skip to content

Commit f4a7827

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 c9f3009 commit f4a7827

File tree

13 files changed

+241
-170
lines changed

13 files changed

+241
-170
lines changed

‎COMPONENT_INDEX.md

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -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)
@@ -2801,15 +2802,15 @@ None.
28012802

28022803
### Props
28032804

2804-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
2805-
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------ |
2806-
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to display the popover |
2807-
| closeOnOutsideClick | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to close the popover on an outside click |
2808-
| caret | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` render a caret |
2809-
| 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 |
2810-
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
2811-
| highContrast | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the high contrast variant |
2812-
| relative | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use a relative position |
2805+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
2806+
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------ |
2807+
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to display the popover |
2808+
| closeOnOutsideClick | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to close the popover on an outside click |
2809+
| isTabTip | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render the tab tip variant |
2810+
| caret | No | <code>let</code> | No | <code>boolean</code> | <code>undefined</code> | Set to `true` render a caret |
2811+
| 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 |
2812+
| dropShadow | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to omit the drop shadow |
2813+
| highContrast | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the high contrast variant |
28132814

28142815
### Slots
28152816

@@ -2823,6 +2824,25 @@ None.
28232824
| :------------ | :--------- | :------------------------------------ |
28242825
| click:outside | dispatched | <code>{ target: HTMLElement; }</code> |
28252826

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

28282848
### Props

‎docs/src/COMPONENT_API.json

Lines changed: 47 additions & 17 deletions
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",
@@ -8916,9 +8916,9 @@
89168916
"reactive": false
89178917
},
89188918
{
8919-
"name": "caret",
8919+
"name": "isTabTip",
89208920
"kind": "let",
8921-
"description": "Set to `true` render a caret",
8921+
"description": "Set to `true` to render the tab tip variant",
89228922
"type": "boolean",
89238923
"value": "false",
89248924
"isFunction": false,
@@ -8928,45 +8928,43 @@
89288928
"reactive": false
89298929
},
89308930
{
8931-
"name": "align",
8931+
"name": "caret",
89328932
"kind": "let",
8933-
"description": "Specify the alignment of the caret",
8934-
"type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
8935-
"value": "\"top\"",
8933+
"description": "Set to `true` render a caret",
8934+
"type": "boolean",
89368935
"isFunction": false,
89378936
"isFunctionDeclaration": false,
89388937
"isRequired": false,
89398938
"constant": false,
89408939
"reactive": false
89418940
},
89428941
{
8943-
"name": "light",
8942+
"name": "align",
89448943
"kind": "let",
8945-
"description": "Set to `true` to enable the light variant",
8946-
"type": "boolean",
8947-
"value": "false",
8944+
"description": "Specify the alignment of the caret",
8945+
"type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
89488946
"isFunction": false,
89498947
"isFunctionDeclaration": false,
89508948
"isRequired": false,
89518949
"constant": false,
89528950
"reactive": false
89538951
},
89548952
{
8955-
"name": "highContrast",
8953+
"name": "dropShadow",
89568954
"kind": "let",
8957-
"description": "Set to `true` to enable the high contrast variant",
8955+
"description": "Set to `false` to omit the drop shadow",
89588956
"type": "boolean",
8959-
"value": "false",
8957+
"value": "true",
89608958
"isFunction": false,
89618959
"isFunctionDeclaration": false,
89628960
"isRequired": false,
89638961
"constant": false,
89648962
"reactive": false
89658963
},
89668964
{
8967-
"name": "relative",
8965+
"name": "highContrast",
89688966
"kind": "let",
8969-
"description": "Set to `true` to use a relative position",
8967+
"description": "Set to `true` to enable the high contrast variant",
89708968
"type": "boolean",
89718969
"value": "false",
89728970
"isFunction": false,
@@ -8986,7 +8984,39 @@
89868984
}
89878985
],
89888986
"typedefs": [],
8989-
"rest_props": { "type": "Element", "name": "div" }
8987+
"rest_props": { "type": "Element", "name": "span" }
8988+
},
8989+
{
8990+
"moduleName": "PopoverContent",
8991+
"filePath": "src/Popover/PopoverContent.svelte",
8992+
"props": [
8993+
{
8994+
"name": "className",
8995+
"kind": "let",
8996+
"value": "null",
8997+
"isFunction": false,
8998+
"isFunctionDeclaration": false,
8999+
"isRequired": false,
9000+
"constant": false,
9001+
"reactive": false
9002+
},
9003+
{
9004+
"name": "contentProps",
9005+
"kind": "let",
9006+
"type": "{}",
9007+
"value": "{}",
9008+
"isFunction": false,
9009+
"isFunctionDeclaration": false,
9010+
"isRequired": false,
9011+
"constant": false,
9012+
"reactive": false
9013+
}
9014+
],
9015+
"moduleExports": [],
9016+
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
9017+
"events": [],
9018+
"typedefs": [],
9019+
"rest_props": { "type": "Element", "name": "span" }
89909020
},
89919021
{
89929022
"moduleName": "ProgressBar",

‎docs/src/global.css

Lines changed: 4 additions & 0 deletions
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)