diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 2d5cf5703123..de760c8f36e0 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -28,7 +28,7 @@ import ToolbarAlign from "./types/ToolbarAlign.js"; import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js"; import HasPopup from "./types/HasPopup.js"; -import type { ToolbarItem } from "./ToolbarItem.js"; +import type ToolbarItem from "./ToolbarItem.js"; import { getRegisteredToolbarItem, getRegisteredStyles, @@ -71,6 +71,7 @@ function parsePxValue(styleSet: CSSStyleDeclaration, propertyName: string): numb * @alias sap.ui.webc.main.Toolbar * @extends sap.ui.webc.base.UI5Element * @tagname ui5-toolbar + * @appenddocs sap.ui.webc.main.ToolbarButton sap.ui.webc.main.ToolbarSelect * @public * @since 1.17.0 */ @@ -81,7 +82,6 @@ function parsePxValue(styleSet: CSSStyleDeclaration, propertyName: string): numb template: ToolbarTemplate, staticAreaTemplate: ToolbarPopoverTemplate, }) - class Toolbar extends UI5Element { static i18nBundle: I18nBundle; @@ -151,12 +151,13 @@ class Toolbar extends UI5Element { accessibleNameRef!: string; /** - * Slotted Toolbar items - * @type {sap.ui.webc.main.IToolbarItem[]} - * @name sap.ui.webc.main.Toolbar.prototype.items - * @slot items - * @public - */ + * Defines the items of the component. + * + * @type {sap.ui.webc.main.IToolbarItem[]} + * @name sap.ui.webc.main.Toolbar.prototype.default + * @slot items + * @public + */ @slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true }) items!: Array diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts index 54d7f1f5634e..752737456379 100644 --- a/packages/main/src/ToolbarButton.ts +++ b/packages/main/src/ToolbarButton.ts @@ -4,7 +4,8 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js"; import Button from "./Button.js"; import ButtonDesign from "./types/ButtonDesign.js"; -import ToolbarItem, { IEventOptions } from "./ToolbarItem.js"; +import ToolbarItem from "./ToolbarItem.js"; +import type { IEventOptions } from "./ToolbarItem.js"; import ToolbarButtonTemplate from "./generated/templates/ToolbarButtonTemplate.lit.js"; import ToolbarPopoverButtonTemplate from "./generated/templates/ToolbarPopoverButtonTemplate.lit.js"; @@ -14,17 +15,22 @@ import { registerToolbarItem } from "./ToolbarRegistry.js"; /** * @class + * + *

Overview

* The ui5-toolbar-button represents an abstract action, * used in the ui5-toolbar. * + *

ES6 Module Import

+ * import "@ui5/webcomponents/dist/ToolbarButton"; + * * @constructor * @author SAP SE * @alias sap.ui.webc.main.ToolbarButton * @extends sap.ui.webc.main.ToolbarItem - * @since 1.17.0 + * @tagname ui5-toolbar-button * @public + * @since 1.17.0 */ - @customElement({ tag: "ui5-toolbar-button", dependencies: [Button], @@ -39,10 +45,8 @@ import { registerToolbarItem } from "./ToolbarRegistry.js"; * * @event sap.ui.webc.main.ToolbarButton#click * @public - * @native */ @event("click") - class ToolbarButton extends ToolbarItem { /** * Defines if the action is disabled. diff --git a/packages/main/src/ToolbarItem.ts b/packages/main/src/ToolbarItem.ts index 0ef12927c4e2..6d476b924745 100644 --- a/packages/main/src/ToolbarItem.ts +++ b/packages/main/src/ToolbarItem.ts @@ -5,11 +5,11 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js"; -export type IEventOptions = { +type IEventOptions = { preventClosing: boolean; } -export interface IToolbarItem { +interface IToolbarItem { overflowPriority: `${ToolbarItemOverflowBehavior}`; preventOverflowClosing: boolean; ignoreSpace?: boolean; @@ -18,10 +18,9 @@ export interface IToolbarItem { stableDomRef: string; } -@customElement("ui5-tb-item") - /** * @class + * * The ui5-tb-item represents an abstract class for items, * used in the ui5-toolbar. * @@ -29,10 +28,11 @@ export interface IToolbarItem { * @author SAP SE * @alias sap.ui.webc.main.ToolbarItem * @extends sap.ui.webc.base.UI5Element - * @since 1.17.0 * @abstract * @public + * @since 1.17.0 */ +@customElement("ui5-tb-item") class ToolbarItem extends UI5Element implements IToolbarItem { /** * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set, @@ -57,7 +57,7 @@ class ToolbarItem extends UI5Element implements IToolbarItem { * @type {Boolean} * @defaultvalue false * @public - * @name sap.ui.webc.main.Toolbar.prototype.preventOverflowClosing + * @name sap.ui.webc.main.ToolbarItem.prototype.preventOverflowClosing */ @property({ type: Boolean }) preventOverflowClosing!: boolean; @@ -136,5 +136,8 @@ class ToolbarItem extends UI5Element implements IToolbarItem { ToolbarItem.define(); -export type { ToolbarItem }; +export type { + IToolbarItem, + IEventOptions, +}; export default ToolbarItem; diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts index 6043da142d86..5781aba850bc 100644 --- a/packages/main/src/ToolbarSelect.ts +++ b/packages/main/src/ToolbarSelect.ts @@ -21,18 +21,18 @@ import type { SelectChangeEventDetail } from "./Select.js"; * *

Overview

* The ui5-toolbar-select component is used to create a toolbar drop-down list. - * The items inside the ui5-toolbar-select define the available options by using the ui5-option component. + * The items inside the ui5-toolbar-select define the available options by using the ui5-toolbar-select-option component. * *

ES6 Module Import

- * import "@ui5/webcomponents/dist/Select"; + * import "@ui5/webcomponents/dist/ToolbarSelect"; *
- * import "@ui5/webcomponents/dist/Option"; (comes with ui5-toolbar-select) + * import "@ui5/webcomponents/dist/ToolbarSelectOption"; (comes with ui5-toolbar-select) * @constructor * @author SAP SE * @alias sap.ui.webc.main.ToolbarSelect * @extends sap.ui.webc.base.UI5Element * @tagname ui5-toolbar-select - * @appenddocs sap.ui.webc.main.Option + * @appenddocs sap.ui.webc.main.ToolbarSelectOption * @public * @since 1.17.0 */ @@ -58,14 +58,14 @@ import type { SelectChangeEventDetail } from "./Select.js"; /** * Fired after the component's dropdown menu opens. * - * @event sap.ui.webc.ToolbarSelect#open + * @event sap.ui.webc.main.ToolbarSelect#open * @public */ @event("open") /** * Fired after the component's dropdown menu closes. * - * @event sap.ui.webc.ToolbarSelect#close + * @event sap.ui.webc.main.ToolbarSelect#close * @public */ @event("close") diff --git a/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts b/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts index 2376a4de1513..de40fe306806 100644 --- a/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts +++ b/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts @@ -3,49 +3,64 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; import type { Meta } from "@storybook/web-components"; -import Toolbar from "@ui5/webcomponents/dist/Toolbar"; +import type Toolbar from "@ui5/webcomponents/dist/Toolbar.js"; +import ToolbarAlign from "@ui5/webcomponents/dist/types/ToolbarAlign.js"; import argTypes, { componentInfo } from "./argTypes.js"; import type { StoryArgsSlots } from "./argTypes.js"; import type { UI5StoryArgs } from "../../../types.js"; -import ToolbarAlign from "@ui5/webcomponents/dist/types/ToolbarAlign.js"; - import { DocsPage } from "../../../.storybook/docs"; const component = "ui5-toolbar"; export default { - title: "Main/Toolbar", - component, - subcomponents: { ToolbarItem: "ui5-toolbar-item" }, - argTypes, - parameters: { - docs: { - page: DocsPage({ ...componentInfo, component }) - }, - }, + title: "Main/Toolbar", + component: "Toolbar", + subcomponents: { + ToolbarButton: "ToolbarButton", + ToolbarSelect: "ToolbarSelect", + ToolbarSelectOption: "ToolbarSelectOption", + }, + argTypes, + parameters: { + docs: { + page: DocsPage({ ...componentInfo, component }) + }, + }, } as Meta; const Template: UI5StoryArgs = (args) => { - return html` ${unsafeHTML(args.default)} - `; +`; }; export const Basic = Template.bind({}); - +Basic.storyName = "Basic"; Basic.args = { - default: ` - - - - `, - }; -Basic.storyName = "Basic"; + + + + + + + + `, +}; + export const WithSpacer: UI5StoryArgs = Template.bind({}); @@ -54,7 +69,11 @@ WithSpacer.args = { - + + 1 + 2 + 3 + @@ -70,7 +89,11 @@ WithSeparator.args = { - + + 1 + 2 + 3 + @@ -79,16 +102,20 @@ WithSeparator.args = { ` } -export const WithAlwaysOverflowElements: UI5StoryArgs = Template.bind({}); +export const WithAlwaysOverflowItems: UI5StoryArgs = Template.bind({}); -WithAlwaysOverflowElements.storyName = "'AlwaysOverflow' elements"; +WithAlwaysOverflowItems.storyName = "With 'AlwaysOverflow' items"; -WithAlwaysOverflowElements.args = { +WithAlwaysOverflowItems.args = { default: ` - + + 1 + 2 + 3 + @@ -96,16 +123,20 @@ WithAlwaysOverflowElements.args = { ` } -export const WithNeverOverflowElements: UI5StoryArgs = Template.bind({}); +export const WithNeverOverflowItems: UI5StoryArgs = Template.bind({}); -WithNeverOverflowElements.storyName = "'NeverOverflow' elements"; +WithNeverOverflowItems.storyName = "With 'NeverOverflow' items"; -WithNeverOverflowElements.args = { +WithNeverOverflowItems.args = { default: ` - + + 1 + 2 + 3 + @@ -113,13 +144,13 @@ WithNeverOverflowElements.args = { ` } -export const WithStartAlignedElements = Template.bind({}); +export const WithStartAlignedItems = Template.bind({}); -WithStartAlignedElements.storyName = "Toolbar with 'Start' aligned elements"; +WithStartAlignedItems.storyName = "With 'Start' aligned items"; -WithStartAlignedElements.args = { - alignContent: ToolbarAlign.Start, - default: Basic.args.default +WithStartAlignedItems.args = { + alignContent: ToolbarAlign.Start, + default: Basic.args.default };