Skip to content

Commit

Permalink
chore: fix storybook build, Toolbar story and some Toolbar TS constru…
Browse files Browse the repository at this point in the history 
…ctions (#7499)

Since the Toolbar PR has been merged the "nightly" storybook stopped deploying due to errors when building the story of the Toolbar, see https://github.com/SAP/ui5-webcomponents/actions/runs/5974432275/job/16208568004#step:4:3210 tracked down to wrong jsdoc.

- fixed wrong namespaces, make use of appendocs

- fixed some TS construction has been fixed

In ToolbarItem.js
```js
export type { ToolbarItem };
export default ToolbarItem;
```

changed to
```js
export default ToolbarItem;
```

In Toolbar.js
```js
import type { ToolbarItem } from "./ToolbarItem.js"; 
```

changed to
```js
 import type ToolbarItem from "./ToolbarItem.js";
 ```

- showcase ui5-toolbar-select and ui5-toolbar-select-option in the storybook
  • Loading branch information
@ilhan007
ilhan007 authored Aug 29, 2023
1 parent b0b542a commit 97c4a12
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 63 deletions.
17 changes: 9 additions & 8 deletions packages/main/src/Toolbar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
*/
Expand All @@ -81,7 +82,6 @@ function parsePxValue(styleSet: CSSStyleDeclaration, propertyName: string): numb
template: ToolbarTemplate,
staticAreaTemplate: ToolbarPopoverTemplate,
})

class Toolbar extends UI5Element {
static i18nBundle: I18nBundle;

Expand Down Expand Up @@ -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<ToolbarItem>

Expand Down
14 changes: 9 additions & 5 deletions packages/main/src/ToolbarButton.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -14,17 +15,22 @@ import { registerToolbarItem } from "./ToolbarRegistry.js";

/**
* @class
*
* <h3 class="comment-api-title">Overview</h3>
* The <code>ui5-toolbar-button</code> represents an abstract action,
* used in the <code>ui5-toolbar</code>.
*
* <h3>ES6 Module Import</h3>
* <code>import "@ui5/webcomponents/dist/ToolbarButton";</code>
*
* @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],
Expand All @@ -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.
Expand Down
17 changes: 10 additions & 7 deletions packages/main/src/ToolbarItem.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -18,21 +18,21 @@ export interface IToolbarItem {
stableDomRef: string;
}

@customElement("ui5-tb-item")

/**
* @class
*
* The <code>ui5-tb-item</code> represents an abstract class for items,
* used in the <code>ui5-toolbar</code>.
*
* @constructor
* @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,
Expand All @@ -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;
Expand Down Expand Up @@ -136,5 +136,8 @@ class ToolbarItem extends UI5Element implements IToolbarItem {

ToolbarItem.define();

export type { ToolbarItem };
export type {
IToolbarItem,
IEventOptions,
};
export default ToolbarItem;
12 changes: 6 additions & 6 deletions packages/main/src/ToolbarSelect.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,18 @@ import type { SelectChangeEventDetail } from "./Select.js";
*
* <h3 class="comment-api-title">Overview</h3>
* The <code>ui5-toolbar-select</code> component is used to create a toolbar drop-down list.
* The items inside the <code>ui5-toolbar-select</code> define the available options by using the <code>ui5-option</code> component.
* The items inside the <code>ui5-toolbar-select</code> define the available options by using the <code>ui5-toolbar-select-option</code> component.
*
* <h3>ES6 Module Import</h3>
* <code>import "@ui5/webcomponents/dist/Select";</code>
* <code>import "@ui5/webcomponents/dist/ToolbarSelect";</code>
* <br>
* <code>import "@ui5/webcomponents/dist/Option";</code> (comes with <code>ui5-toolbar-select</code>)
* <code>import "@ui5/webcomponents/dist/ToolbarSelectOption";</code> (comes with <code>ui5-toolbar-select</code>)
* @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
*/
Expand All @@ -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")
Expand Down
105 changes: 68 additions & 37 deletions packages/playground/_stories/main/Toolbar/Toolbar.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<Toolbar>;

const Template: UI5StoryArgs<Toolbar, StoryArgsSlots> = (args) => {
return html` <ui5-toolbar
return html`<ui5-toolbar
align-content="${ifDefined(args.alignContent)}"
>
${unsafeHTML(args.default)}
</ui5-toolbar>`;
</ui5-toolbar>`;
};

export const Basic = Template.bind({});

Basic.storyName = "Basic";
Basic.args = {

default: `
<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
<ui5-toolbar-button icon="employee" text="Right 4"></ui5-toolbar-button>
<ui5-toolbar-button id="myOverflowBtn" icon="employee" text="Call me later"></ui5-toolbar-button>`,
};
Basic.storyName = "Basic";
<ui5-toolbar-button
icon="decline"
text="Mid 2">
</ui5-toolbar-button>
<ui5-toolbar-button
icon="add"
text="Right 1">
</ui5-toolbar-button>
<ui5-toolbar-button
icon="employee"
text="Right 4">
</ui5-toolbar-button>
<ui5-toolbar-button
id="myOverflowBtn"
icon="employee"
text="Call me later">
</ui5-toolbar-button>`,
};


export const WithSpacer: UI5StoryArgs<Toolbar, StoryArgsSlots> = Template.bind({});

Expand All @@ -54,7 +69,11 @@ WithSpacer.args = {
<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px" design="Default"></ui5-toolbar-button>
<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
<ui5-toolbar-select>
<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
<ui5-toolbar-select-option selected>2</ui5-toolbar-select-option>
<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
</ui5-toolbar-select>
<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
<ui5-toolbar-spacer></ui5-toolbar-spacer>
<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
Expand All @@ -70,7 +89,11 @@ WithSeparator.args = {
<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px" design="Default"></ui5-toolbar-button>
<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
<ui5-toolbar-select>
<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
<ui5-toolbar-select-option selected>2</ui5-toolbar-select-option>
<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
</ui5-toolbar-select>
<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
<ui5-toolbar-separator></ui5-toolbar-separator>
<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
Expand All @@ -79,47 +102,55 @@ WithSeparator.args = {
<ui5-toolbar-button id="myOverflowBtn" icon="employee" text="Call me later"></ui5-toolbar-button>`
}

export const WithAlwaysOverflowElements: UI5StoryArgs<Toolbar, StoryArgsSlots> = Template.bind({});
export const WithAlwaysOverflowItems: UI5StoryArgs<Toolbar, StoryArgsSlots> = Template.bind({});

WithAlwaysOverflowElements.storyName = "'AlwaysOverflow' elements";
WithAlwaysOverflowItems.storyName = "With 'AlwaysOverflow' items";

WithAlwaysOverflowElements.args = {
WithAlwaysOverflowItems.args = {
default: `
<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px" design="Default"></ui5-toolbar-button>
<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
<ui5-toolbar-select>
<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
<ui5-toolbar-select-option selected>2</ui5-toolbar-select-option>
<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
</ui5-toolbar-select>
<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
<ui5-toolbar-button icon="decline" text="Mid 2" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
<ui5-toolbar-button icon="add" text="Right 1" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
<ui5-toolbar-button icon="employee" text="Right 4" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
<ui5-toolbar-button id="myOverflowBtn" icon="employee" text="Call me later" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>`
}

export const WithNeverOverflowElements: UI5StoryArgs<Toolbar, StoryArgsSlots> = Template.bind({});
export const WithNeverOverflowItems: UI5StoryArgs<Toolbar, StoryArgsSlots> = Template.bind({});

WithNeverOverflowElements.storyName = "'NeverOverflow' elements";
WithNeverOverflowItems.storyName = "With 'NeverOverflow' items";

WithNeverOverflowElements.args = {
WithNeverOverflowItems.args = {
default: `
<ui5-toolbar-button icon="add" text="Left 1 (long)" width="150px" design="Default"></ui5-toolbar-button>
<ui5-toolbar-button icon="decline" text="Left 2" ></ui5-toolbar-button>
<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
<ui5-toolbar-select>
<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
<ui5-toolbar-select-option selected>2</ui5-toolbar-select-option>
<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
</ui5-toolbar-select>
<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
<ui5-toolbar-button icon="decline" text="Mid 2" ></ui5-toolbar-button>
<ui5-toolbar-button icon="add" text="Right 1" overflow-priority="NeverOverflow"></ui5-toolbar-button>
<ui5-toolbar-button icon="employee" text="Right 4" ></ui5-toolbar-button>
<ui5-toolbar-button id="myOverflowBtn" icon="employee" text="Call me later" overflow-priority="NeverOverflow"></ui5-toolbar-button>`
}

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
};

0 comments on commit 97c4a12

Please sign in to comment.