diff --git a/packages/action-menu/stories/action-menu.stories.ts b/packages/action-menu/stories/action-menu.stories.ts index fd4f28580c..4e5a9c0c71 100644 --- a/packages/action-menu/stories/action-menu.stories.ts +++ b/packages/action-menu/stories/action-menu.stories.ts @@ -13,6 +13,8 @@ import { html, TemplateResult } from '@spectrum-web-components/base'; import '@spectrum-web-components/menu/sp-menu.js'; import '@spectrum-web-components/menu/sp-menu-item.js'; +import '@spectrum-web-components/menu/sp-menu-group.js'; +import '@spectrum-web-components/menu/sp-menu-divider.js'; import { ActionMenuMarkup } from './'; import '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js'; @@ -179,3 +181,31 @@ export const controlled = (): TemplateResult => { `; }; + +export const groups = (): TemplateResult => html` + + + cms + + Update All Content + + Refresh All XDs + + + ssg + Clear Cache + + + vrt + Contributions + Internal + Public + Patterns + All + + + + Logout + + +`; diff --git a/packages/menu/src/menu.css b/packages/menu/src/menu.css index 2358a23878..a22b450efb 100644 --- a/packages/menu/src/menu.css +++ b/packages/menu/src/menu.css @@ -13,6 +13,12 @@ governing permissions and limitations under the License. @import './spectrum-menu.css'; :host { + /** + * Remove when Spectrum CSS supports this correctly + */ + display: inline-flex; + flex-direction: column; + /** * TODO: remove the following when https://github.com/adobe/spectrum-css/issues/1130 is correct @@ -34,5 +40,10 @@ governing permissions and limitations under the License. } ::slotted(*) { + /** + * Remove when Spectrum CSS supports this correctly + */ + flex-shrink: 0; + --swc-menu-width: 100%; }