From b4caea5f62f552893d3531d9f614388cc682eee5 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Thu, 29 Oct 2020 13:02:18 -0700 Subject: [PATCH] feat(overflow-menu): support "sm", "xl" size variants --- COMPONENT_INDEX.md | 1 + docs/package.json | 2 +- docs/src/PUBLIC_API.json | 108 +++++++++++---------- docs/src/pages/components/OverflowMenu.svx | 25 +++++ docs/yarn.lock | 10 +- src/OverflowMenu/OverflowMenu.svelte | 14 ++- types/index.d.ts | 5 + 7 files changed, 108 insertions(+), 57 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 245a25e9..bc2c5cf2 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -3014,6 +3014,7 @@ import { OverflowMenu } from "carbon-components-svelte"; | Prop name | Type | Default value | Description | | :--------------- | :------------------------------------------------------------------ | :--------------------------------- | :----------------------------------------------------------------- | +| size | "sm" | "xl" | -- | Specify the size of the overflow menu. | | direction | "top" | "bottom" | `"bottom"` | Specify the direction of the overflow menu relative to the button. | | open | boolean | `false` | Set to `true` to open the menu. | | light | boolean | `false` | Set to `true` to enable the light variant. | diff --git a/docs/package.json b/docs/package.json index 0ddbd352..2aff263e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -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", diff --git a/docs/src/PUBLIC_API.json b/docs/src/PUBLIC_API.json index 93f06fef..4e531a64 100644 --- a/docs/src/PUBLIC_API.json +++ b/docs/src/PUBLIC_API.json @@ -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": [], diff --git a/docs/src/pages/components/OverflowMenu.svx b/docs/src/pages/components/OverflowMenu.svx index 553dbb1f..89ba3f5f 100644 --- a/docs/src/pages/components/OverflowMenu.svx +++ b/docs/src/pages/components/OverflowMenu.svx @@ -4,6 +4,7 @@ components: ["OverflowMenu", "OverflowMenuItem"] @@ -31,6 +32,22 @@ components: ["OverflowMenu", "OverflowMenuItem"] +### Extra-large size + + + + + + + +### Small size + + + + + + + ### 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. +### Custom trigger icon + + + + + + + ### Custom trigger slot diff --git a/docs/yarn.lock b/docs/yarn.lock index f6fda509..84d117f5 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -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" diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte index edae7c7a..14db7c77 100644 --- a/src/OverflowMenu/OverflowMenu.svelte +++ b/src/OverflowMenu/OverflowMenu.svelte @@ -1,4 +1,10 @@