chore: v11 OverflowMenu

Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
This commit is contained in:
Gregor Wassmann 2023-03-28 20:58:39 +02:00 committed by Enrico Sacchetti
commit ff8d54b38e
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
6 changed files with 8 additions and 8 deletions

View file

@ -2609,7 +2609,7 @@ None.
| buttonRef | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element | | buttonRef | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;OverflowMenuVertical /&gt;` | | icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;OverflowMenuVertical /&gt;` |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu | | open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Specify the size of the overflow menu |
| direction | No | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button | | direction | No | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| flipped | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button | | flipped | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |

View file

@ -7984,7 +7984,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of the overflow menu", "description": "Specify the size of the overflow menu",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,

View file

@ -42,7 +42,7 @@ Set `flipped` to `true` for the menu to be positioned to the left of the button.
<OverflowMenuItem danger text="Delete service" /> <OverflowMenuItem danger text="Delete service" />
</OverflowMenu> </OverflowMenu>
## Extra-large size ## Large size
<OverflowMenu size="xl"> <OverflowMenu size="xl">
<OverflowMenuItem text="Manage credentials" /> <OverflowMenuItem text="Manage credentials" />

View file

@ -5,7 +5,7 @@
/** /**
* Specify the size of the overflow menu * Specify the size of the overflow menu
* @type {"sm" | "xl"} * @type {"sm" | "lg"}
*/ */
export let size = undefined; export let size = undefined;
@ -199,7 +199,7 @@
class:bx--overflow-menu--open="{open}" class:bx--overflow-menu--open="{open}"
class:bx--overflow-menu--light="{light}" class:bx--overflow-menu--light="{light}"
class:bx--overflow-menu--sm="{size === 'sm'}" class:bx--overflow-menu--sm="{size === 'sm'}"
class:bx--overflow-menu--xl="{size === 'xl'}" class:bx--overflow-menu--lg="{size === 'lg'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:click="{({ target }) => { on:click="{({ target }) => {
@ -254,7 +254,7 @@
class:bx--overflow-menu-options--open="{open}" class:bx--overflow-menu-options--open="{open}"
class:bx--overflow-menu-options--light="{light}" class:bx--overflow-menu-options--light="{light}"
class:bx--overflow-menu-options--sm="{size === 'sm'}" class:bx--overflow-menu-options--sm="{size === 'sm'}"
class:bx--overflow-menu-options--xl="{size === 'xl'}" class:bx--overflow-menu-options--lg="{size === 'lg'}"
class:bx--breadcrumb-menu-options="{!!ctxBreadcrumbItem}" class:bx--breadcrumb-menu-options="{!!ctxBreadcrumbItem}"
class="{menuOptionsClass}" class="{menuOptionsClass}"
> >

View file

@ -34,7 +34,7 @@
<OverflowMenuItem danger text="Delete service" /> <OverflowMenuItem danger text="Delete service" />
</OverflowMenu> </OverflowMenu>
<OverflowMenu size="xl"> <OverflowMenu size="lg">
<OverflowMenuItem text="Manage credentials" /> <OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem <OverflowMenuItem
href="https://cloud.ibm.com/docs/api-gateway/" href="https://cloud.ibm.com/docs/api-gateway/"

View file

@ -8,7 +8,7 @@ export interface OverflowMenuProps extends RestProps {
* Specify the size of the overflow menu * Specify the size of the overflow menu
* @default undefined * @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "lg";
/** /**
* Specify the direction of the overflow menu relative to the button * Specify the direction of the overflow menu relative to the button