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

feat(overflow-menu): support "sm", "xl" size variants

Browse source
This commit is contained in:
Eric Liu 2020-10-29 13:02:18 -07:00
commit b4caea5f62
7 changed files with 108 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -3014,6 +3014,7 @@ import { OverflowMenu } from "carbon-components-svelte";
| Prop name | Type | Default value | Description |
| :--------------- | :------------------------------------------------------------------ | :--------------------------------- | :----------------------------------------------------------------- |
| size | <code>"sm" &#124; "xl"</code> | -- | Specify the size of the overflow menu. |
| direction | <code>"top" &#124; "bottom"</code> | `"bottom"` | Specify the direction of the overflow menu relative to the button. |
| open | <code>boolean</code> | `false` | Set to `true` to open the menu. |
| light | <code>boolean</code> | `false` | Set to `true` to enable the light variant. |

2
docs/package.json
View file

@ -12,7 +12,7 @@
"@carbon/themes": "^10.20.0",
"@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.0.1",
"carbon-components": "^10.22.0",
"carbon-components": "^10.23.0",
"carbon-components-svelte": "../",
"clipboard-copy": "^3.1.0",
"mdsvex": "^0.8.8",

108
docs/src/PUBLIC_API.json
View file

@ -8756,6 +8756,14 @@
"OverflowMenu": {
"moduleName": "OverflowMenu",
"props": [
[
"size",
{
"kind": "let",
"type": "\"sm\" | \"xl\"",
"description": "Specify the size of the overflow menu"
}
],
[
"direction",
{
@ -8858,14 +8866,14 @@
{
"attributes": [
{
"start": 4805,
"end": 4816,
"start": 5113,
"end": 5124,
"type": "Attribute",
"name": "name",
"value": [
{
"start": 4811,
"end": 4815,
"start": 5119,
"end": 5123,
"type": "Text",
"raw": "menu",
"data": "menu"
@ -8875,39 +8883,39 @@
],
"children": [
{
"start": 4817,
"end": 4822,
"start": 5125,
"end": 5130,
"type": "Text",
"raw": "\n ",
"data": "\n "
},
{
"start": 4822,
"end": 4985,
"start": 5130,
"end": 5293,
"type": "InlineComponent",
"name": "svelte:component",
"attributes": [
{
"start": 4866,
"end": 4896,
"start": 5174,
"end": 5204,
"type": "Attribute",
"name": "aria-label",
"value": [
{
"start": 4878,
"end": 4895,
"start": 5186,
"end": 5203,
"type": "MustacheTag",
"expression": {
"type": "Identifier",
"start": 4879,
"end": 4894,
"start": 5187,
"end": 5202,
"loc": {
"start": {
"line": 206,
"line": 216,
"column": 19
},
"end": {
"line": 206,
"line": 216,
"column": 34
}
},
@ -8917,26 +8925,26 @@
]
},
{
"start": 4903,
"end": 4928,
"start": 5211,
"end": 5236,
"type": "Attribute",
"name": "title",
"value": [
{
"start": 4910,
"end": 4927,
"start": 5218,
"end": 5235,
"type": "MustacheTag",
"expression": {
"type": "Identifier",
"start": 4911,
"end": 4926,
"start": 5219,
"end": 5234,
"loc": {
"start": {
"line": 207,
"line": 217,
"column": 14
},
"end": {
"line": 207,
"line": 217,
"column": 29
}
},
@ -8946,33 +8954,33 @@
]
},
{
"start": 4935,
"end": 4978,
"start": 5243,
"end": 5286,
"type": "Attribute",
"name": "class",
"value": [
{
"start": 4942,
"end": 4967,
"start": 5250,
"end": 5275,
"type": "Text",
"raw": "bx--overflow-menu__icon ",
"data": "bx--overflow-menu__icon "
},
{
"start": 4966,
"end": 4977,
"start": 5274,
"end": 5285,
"type": "MustacheTag",
"expression": {
"type": "Identifier",
"start": 4967,
"end": 4976,
"start": 5275,
"end": 5284,
"loc": {
"start": {
"line": 208,
"line": 218,
"column": 38
},
"end": {
"line": 208,
"line": 218,
"column": 47
}
},
@ -8985,15 +8993,15 @@
"children": [],
"expression": {
"type": "Identifier",
"start": 4853,
"end": 4857,
"start": 5161,
"end": 5165,
"loc": {
"start": {
"line": 205,
"line": 215,
"column": 13
},
"end": {
"line": 205,
"line": 215,
"column": 17
}
},
@ -9001,8 +9009,8 @@
}
},
{
"start": 4985,
"end": 4988,
"start": 5293,
"end": 5296,
"type": "Text",
"raw": "\n ",
"data": "\n "
@ -9026,8 +9034,8 @@
[
"click",
{
"start": 4327,
"end": 4335,
"start": 4635,
"end": 4643,
"type": "EventHandler",
"name": "click",
"modifiers": [],
@ -9037,8 +9045,8 @@
[
"mouseover",
{
"start": 4451,
"end": 4463,
"start": 4759,
"end": 4771,
"type": "EventHandler",
"name": "mouseover",
"modifiers": [],
@ -9048,8 +9056,8 @@
[
"mouseenter",
{
"start": 4466,
"end": 4479,
"start": 4774,
"end": 4787,
"type": "EventHandler",
"name": "mouseenter",
"modifiers": [],
@ -9059,8 +9067,8 @@
[
"mouseleave",
{
"start": 4482,
"end": 4495,
"start": 4790,
"end": 4803,
"type": "EventHandler",
"name": "mouseleave",
"modifiers": [],
@ -9070,8 +9078,8 @@
[
"keydown",
{
"start": 4498,
"end": 4508,
"start": 4806,
"end": 4816,
"type": "EventHandler",
"name": "keydown",
"modifiers": [],

25
docs/src/pages/components/OverflowMenu.svx
View file

@ -4,6 +4,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
<script>
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import Preview from "../../components/Preview.svelte";
</script>
@ -31,6 +32,22 @@ components: ["OverflowMenu", "OverflowMenuItem"]
<OverflowMenuItem danger text="Delete service" />
</OverflowMenu>
### Extra-large size
<OverflowMenu size="xl">
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
<OverflowMenuItem danger text="Delete service" />
</OverflowMenu>
### Small size
<OverflowMenu size="sm">
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
<OverflowMenuItem danger text="Delete service" />
</OverflowMenu>
### Custom primary focus
By default, the first overflow menu item is focused when opening the dropdown.
@ -41,6 +58,14 @@ By default, the first overflow menu item is focused when opening the dropdown.
<OverflowMenuItem primaryFocus danger text="Delete service" />
</OverflowMenu>
### Custom trigger icon
<OverflowMenu icon={Add16}>
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
<OverflowMenuItem danger text="Delete service" />
</OverflowMenu>
### Custom trigger slot
<OverflowMenu style="width: auto;">

10
docs/yarn.lock
View file

@ -771,15 +771,15 @@ caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001137:
integrity sha512-VAy5RHDfTJhpxnDdp2n40GPPLp3KqNrXz1QqFv4J64HvArKs8nuNMOWkB3ICOaBTU/Aj4rYAo/ytdQDDFF/Pug==
carbon-components-svelte@../:
version "0.17.0"
version "0.21.0"
dependencies:
carbon-icons-svelte "^10.17.0"
flatpickr "4.6.3"
carbon-components@^10.22.0:
version "10.22.0"
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.22.0.tgz#866791ca8e3f651054543d63f6a898cff6bcacf9"
integrity sha512-0cADWQf1e+6YsxXnjEz630Z7GZa3Z1ssO0UW/HnnJy03Dr+qdT3o6sIgSqObYLddJliAVcjeTlwJshZ9K4bWJQ==
carbon-components@^10.23.0:
version "10.23.0"
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.23.0.tgz#56bdfffa95f518237a0bee2961b955c367a8b4c4"
integrity sha512-Meq//PMtSnAwoMKr2BpiOmjAivpSzc1D2Q0r3mudkQsz9dhYOzBQAsfEfoh8WKbDiD7rHWUM2fNkw0yQl4dahA==
dependencies:
flatpickr "4.6.1"
lodash.debounce "^4.0.8"

14
src/OverflowMenu/OverflowMenu.svelte
View file

@ -1,4 +1,10 @@
<script>
/**
* Specify the size of the overflow menu
* @type {"sm" | "xl"} [size]
*/
export let size = undefined;
/**
* Specify the direction of the overflow menu relative to the button
* @type {"top" | "bottom"} [direction="bottom"]
@ -131,6 +137,8 @@
if (direction === "top") {
menuRef.style.top = "auto";
menuRef.style.bottom = height + "px";
} else if (direction === "bottom") {
menuRef.style.top = height + "px";
}
}
@ -149,7 +157,7 @@
$: if ($items[$currentIndex]) {
focusedId.set($items[$currentIndex].id);
}
$: dynamicPseudoWidth = `.bx--overflow-menu-options.bx--overflow-menu-options:after {
$: dynamicPseudoWidth = `#${id} .bx--overflow-menu-options.bx--overflow-menu-options:after {
width: ${buttonWidth ? buttonWidth + "px" : "2rem"};
}`;
$: styles = formatStyle(dynamicPseudoWidth);
@ -177,6 +185,8 @@
class:bx--overflow-menu="{true}"
class:bx--overflow-menu--open="{open}"
class:bx--overflow-menu--light="{light}"
class:bx--overflow-menu--sm="{size === 'sm'}"
class:bx--overflow-menu--xl="{size === 'xl'}"
{...$$restProps}
on:click
on:click="{({ target }) => {
@ -219,6 +229,8 @@
class:bx--overflow-menu--flip="{flipped}"
class:bx--overflow-menu-options--open="{open}"
class:bx--overflow-menu-options--light="{light}"
class:bx--overflow-menu-options--sm="{size === 'sm'}"
class:bx--overflow-menu-options--xl="{size === 'xl'}"
class:menuOptionsClass
>
<slot />

5
types/index.d.ts vendored
View file

@ -2888,6 +2888,11 @@ export class OrderedList extends CarbonSvelteComponent {
export class OverflowMenu extends CarbonSvelteComponent {
$$prop_def: {
/**
* Specify the size of the overflow menu
*/
size?: "sm" | "xl";
/**
* Specify the direction of the overflow menu relative to the button
* @default "bottom"