mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +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 | | 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. | | 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. | | 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. | | 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", "@carbon/themes": "^10.20.0",
"@sveltech/routify": "^1.9.9", "@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.0.1", "autoprefixer": "^10.0.1",
"carbon-components": "^10.22.0", "carbon-components": "^10.23.0",
"carbon-components-svelte": "../", "carbon-components-svelte": "../",
"clipboard-copy": "^3.1.0", "clipboard-copy": "^3.1.0",
"mdsvex": "^0.8.8", "mdsvex": "^0.8.8",

108
docs/src/PUBLIC_API.json
View file

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

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

@ -4,6 +4,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
<script> <script>
import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte"; import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
@ -31,6 +32,22 @@ components: ["OverflowMenu", "OverflowMenuItem"]
<OverflowMenuItem danger text="Delete service" /> <OverflowMenuItem danger text="Delete service" />
</OverflowMenu> </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 ### Custom primary focus
By default, the first overflow menu item is focused when opening the dropdown. 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" /> <OverflowMenuItem primaryFocus danger text="Delete service" />
</OverflowMenu> </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 ### Custom trigger slot
<OverflowMenu style="width: auto;"> <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== integrity sha512-VAy5RHDfTJhpxnDdp2n40GPPLp3KqNrXz1QqFv4J64HvArKs8nuNMOWkB3ICOaBTU/Aj4rYAo/ytdQDDFF/Pug==
carbon-components-svelte@../: carbon-components-svelte@../:
version "0.17.0" version "0.21.0"
dependencies: dependencies:
carbon-icons-svelte "^10.17.0" carbon-icons-svelte "^10.17.0"
flatpickr "4.6.3" flatpickr "4.6.3"
carbon-components@^10.22.0: carbon-components@^10.23.0:
version "10.22.0" version "10.23.0"
resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.22.0.tgz#866791ca8e3f651054543d63f6a898cff6bcacf9" resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.23.0.tgz#56bdfffa95f518237a0bee2961b955c367a8b4c4"
integrity sha512-0cADWQf1e+6YsxXnjEz630Z7GZa3Z1ssO0UW/HnnJy03Dr+qdT3o6sIgSqObYLddJliAVcjeTlwJshZ9K4bWJQ== integrity sha512-Meq//PMtSnAwoMKr2BpiOmjAivpSzc1D2Q0r3mudkQsz9dhYOzBQAsfEfoh8WKbDiD7rHWUM2fNkw0yQl4dahA==
dependencies: dependencies:
flatpickr "4.6.1" flatpickr "4.6.1"
lodash.debounce "^4.0.8" lodash.debounce "^4.0.8"

14
src/OverflowMenu/OverflowMenu.svelte
View file

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

5
types/index.d.ts vendored
View file

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