Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: new cem for Topic-P components - ShellBar #7823

Merged
merged 12 commits into from
Nov 21, 2023
Merged

docs: new cem for Topic-P components - ShellBar #7823

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
847f921
docs: new cem for Topic-P components - ShellBar
plamenivanov91 Nov 8, 2023
f806dab
Merge branch 'main' into shellbar-namespace-refactoring
plamenivanov91 Nov 14, 2023
decaf65
docs: new cem for Topic-P components - ShellBar
plamenivanov91 Nov 14, 2023
1534d89
fix(ui5-wizard): scrollbar styles are now present on root (#7838)
ivoplashkov Nov 20, 2023
f3b7ee6
Merge branch 'main' into shellbar-namespace-refactoring
plamenivanov91 Nov 20, 2023
e1ebea3
docs: new cem for Topic-P components - ShellBar
plamenivanov91 Nov 20, 2023
1660ad4
chore: update chromedriver to 119 (#7883)
ilhan007 Nov 21, 2023
007e755
fix(ui5-switch): align 'off' text in RTL, add compact mode params (#7…
hinzzx Nov 21, 2023
87535f1
fix(framework): redundant fonts loading (#7868)
nnaydenow Nov 21, 2023
5633803
Merge branch 'main' into shellbar-namespace-refactoring
plamenivanov91 Nov 21, 2023
1efd2cd
Merge remote-tracking branch 'upstream/new-cem' into shellbar-namespa…
plamenivanov91 Nov 21, 2023
a7716ee
docs: new cem for Topic-P components - ShellBar
plamenivanov91 Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/fiori/src/Interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@ const IProductSwitchItem = "sap.ui.webc.fiori.IProductSwitchItem";
/**
* Interface for components that may be slotted inside <code>ui5-shellbar</code> as items
*
* @name sap.ui.webc.fiori.IShellBarItem
* @interface
* @public
*/
const IShellBarItem = "sap.ui.webc.fiori.IShellBarItem";
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface IShellBarItem extends HTMLElement { }
plamenivanov91 marked this conversation as resolved.
Show resolved Hide resolved

/**
* Interface for components that may be slotted inside <code>ui5-side-navigation</code> as items
Expand Down
116 changes: 24 additions & 92 deletions packages/fiori/src/ShellBar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,15 +139,6 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
* <li>product-switch</li>
* </ul>
*
* <h3>CSS Shadow Parts</h3>
*
* <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
* <br>
* The <code>ui5-shellbar</code> exposes the following CSS Shadow Parts:
* <ul>
* <li>root - Used to style the outermost wrapper of the <code>ui5-shellbar</code></li>
* </ul>
*
* <h3>Keyboard Handling</h3>
*
plamenivanov91 marked this conversation as resolved.
Show resolved Hide resolved
* <h4>Fast Navigation</h4>
Expand All @@ -159,12 +150,10 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
* <h3>ES6 Module Import</h3>
* <code>import "@ui5/webcomponents-fiori/dist/ShellBar";</code>
*
* @csspart root - Used to style the outermost wrapper of the <code>ui5-shellbar</code>
*
* @constructor
* @author SAP SE
* @alias sap.ui.webc.fiori.ShellBar
* @extends sap.ui.webc.base.UI5Element
* @tagname ui5-shellbar
* @appenddocs sap.ui.webc.fiori.ShellBarItem
* @extends UI5Element
plamenivanov91 marked this conversation as resolved.
Show resolved Hide resolved
* @public
* @since 0.8.0
*/
Expand All @@ -189,7 +178,6 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
*
* Fired, when the notification icon is activated.
*
* @event sap.ui.webc.fiori.ShellBar#notifications-click
* @allowPreventDefault
* @param {HTMLElement} targetRef dom ref of the activated element
* @public
Expand All @@ -203,7 +191,6 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
/**
* Fired, when the profile slot is present.
*
* @event sap.ui.webc.fiori.ShellBar#profile-click
* @param {HTMLElement} targetRef dom ref of the activated element
* @public
*/
Expand All @@ -217,7 +204,6 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
* Fired, when the product switch icon is activated.
* <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
*
* @event sap.ui.webc.fiori.ShellBar#product-switch-click
* @allowPreventDefault
* @param {HTMLElement} targetRef dom ref of the activated element
* @public
Expand All @@ -231,7 +217,6 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
/**
* Fired, when the logo is activated.
*
* @event sap.ui.webc.fiori.ShellBar#logo-click
* @param {HTMLElement} targetRef dom ref of the activated element
* @since 0.10
* @public
Expand All @@ -245,7 +230,6 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
/**
* Fired, when the co pilot is activated.
*
* @event sap.ui.webc.fiori.ShellBar#co-pilot-click
* @param {HTMLElement} targetRef dom ref of the activated element
* @since 0.10
* @public
Expand All @@ -260,7 +244,6 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
* Fired, when a menu item is activated
* <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
*
* @event sap.ui.webc.fiori.ShellBar#menu-item-click
* @param {HTMLElement} item DOM ref of the activated list item
* @since 0.10
* @public
Expand All @@ -276,9 +259,7 @@ class ShellBar extends UI5Element {
* Defines the <code>primaryTitle</code>.
* <br><br>
* <b>Note:</b> The <code>primaryTitle</code> would be hidden on S screen size (less than approx. 700px).
* @type {string}
* @defaultvalue ""
* @name sap.ui.webc.fiori.ShellBar.prototype.primaryTitle
* @default ""
* @public
*/
@property()
Expand All @@ -288,9 +269,7 @@ class ShellBar extends UI5Element {
* Defines the <code>secondaryTitle</code>.
* <br><br>
* <b>Note:</b> The <code>secondaryTitle</code> would be hidden on S and M screen sizes (less than approx. 1300px).
* @type {string}
* @defaultvalue ""
* @name sap.ui.webc.fiori.ShellBar.prototype.secondaryTitle
* @default ""
* @public
*/
@property()
Expand All @@ -299,29 +278,23 @@ class ShellBar extends UI5Element {
/**
* Defines the <code>notificationsCount</code>,
* displayed in the notification icon top-right corner.
* @type {string}
* @defaultvalue ""
* @name sap.ui.webc.fiori.ShellBar.prototype.notificationsCount
* @default ""
* @public
*/
@property()
notificationsCount!: string;

/**
* Defines, if the notification icon would be displayed.
* @type {boolean}
* @defaultvalue false
* @name sap.ui.webc.fiori.ShellBar.prototype.showNotifications
* @default false
* @public
*/
@property({ type: Boolean })
showNotifications!: boolean;

/**
* Defines, if the product switch icon would be displayed.
* @type {boolean}
* @defaultvalue false
* @name sap.ui.webc.fiori.ShellBar.prototype.showProductSwitch
* @default false
* @public
*/
@property({ type: Boolean })
Expand All @@ -331,9 +304,7 @@ class ShellBar extends UI5Element {
* Defines, if the product CoPilot icon would be displayed.
* <br><b>Note:</b> By default the co-pilot is displayed as static SVG.
* If you need an animated co-pilot, you can import the <code>"@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js"</code> module as add-on feature.
* @type {boolean}
* @defaultvalue false
* @name sap.ui.webc.fiori.ShellBar.prototype.showCoPilot
* @default false
* @public
*/
@property({ type: Boolean })
Expand All @@ -342,9 +313,7 @@ class ShellBar extends UI5Element {
/**
* Defines, if the Search Field would be displayed when there is a valid <code>searchField</code> slot.
* <br><b>Note:</b> By default the Search Field is not displayed.
* @type {boolean}
* @defaultvalue false
* @name sap.ui.webc.fiori.ShellBar.prototype.showSearchField
* @default false
* @public
*/
@property({ type: Boolean })
Expand All @@ -356,8 +325,6 @@ class ShellBar extends UI5Element {
* It supports the following fields:
* - <code>logoRole</code>: the accessibility role for the <code>logo</code>
*
* @type {object}
* @name sap.ui.webc.fiori.ShellBar.prototype.accessibilityRoles
* @public
* @since 1.6.0
*/
Expand All @@ -372,8 +339,6 @@ class ShellBar extends UI5Element {
* - <code>profileButtonTitle</code>: defines the tooltip for the profile button
* - <code>logoTitle</code>: defines the tooltip for the logo
*
* @type {object}
* @name sap.ui.webc.fiori.ShellBar.prototype.accessibilityTexts
* @public
* @since 1.1.0
*/
Expand Down Expand Up @@ -403,8 +368,6 @@ class ShellBar extends UI5Element {
* </ul>
* </li>
* </ul>
* @type {object}
* @name sap.ui.webc.fiori.ShellBar.prototype.accessibilityAttributes
* @public
* @since 1.10.0
*/
Expand Down Expand Up @@ -450,9 +413,6 @@ class ShellBar extends UI5Element {
* <b>Note:</b>
* You can use the &nbsp;&lt;ui5-shellbar-item>&lt;/ui5-shellbar-item>.
*
* @type {sap.ui.webc.fiori.IShellBarItem[]}
* @name sap.ui.webc.fiori.ShellBar.prototype.default
* @slot items
* @public
*/
@slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true })
Expand All @@ -464,9 +424,6 @@ class ShellBar extends UI5Element {
*
* Note: We recommend not using the <code>size</code> attribute of <code>ui5-avatar</code> because
* it should have specific size by design in the context of <code>ui5-shellbar</code> profile.
* @type {sap.ui.webc.main.IAvatar}
* @name sap.ui.webc.fiori.ShellBar.prototype.profile
* @slot profile
* @since 1.0.0-rc.6
* @public
*/
Expand All @@ -476,9 +433,6 @@ class ShellBar extends UI5Element {
/**
* Defines the logo of the <code>ui5-shellbar</code>.
* For example, you can use <code>ui5-avatar</code> or <code>img</code> elements as logo.
* @type {sap.ui.webc.main.IAvatar}
* @name sap.ui.webc.fiori.ShellBar.prototype.logo
* @slot
* @since 1.0.0-rc.8
* @public
*/
Expand All @@ -491,9 +445,6 @@ class ShellBar extends UI5Element {
* <b>Note:</b>
* You can use the &nbsp;&lt;ui5-li>&lt;/ui5-li> and its ancestors.
*
* @type {sap.ui.webc.main.IListItem[]}
* @name sap.ui.webc.fiori.ShellBar.prototype.menuItems
* @slot
* @since 0.10
* @public
*/
Expand All @@ -503,9 +454,6 @@ class ShellBar extends UI5Element {
/**
* Defines the <code>ui5-input</code>, that will be used as a search field.
*
* @type {sap.ui.webc.main.IInput}
* @name sap.ui.webc.fiori.ShellBar.prototype.searchField
* @slot
* @public
*/
@slot()
Expand All @@ -516,9 +464,6 @@ class ShellBar extends UI5Element {
* We encourage this slot to be used for a back or home button.
* It gets overstyled to match ShellBar's styling.
*
* @type {sap.ui.webc.main.IButton}
* @name sap.ui.webc.fiori.ShellBar.prototype.startButton
* @slot
* @public
*/
@slot()
Expand Down Expand Up @@ -707,9 +652,8 @@ class ShellBar extends UI5Element {
* Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event
* @public
* @method
* @name sap.ui.webc.fiori.ShellBar#closeOverflow
*/
closeOverflow() {
closeOverflow(): void {
if (this.overflowPopover) {
this.overflowPopover.close();
}
Expand Down Expand Up @@ -907,79 +851,67 @@ class ShellBar extends UI5Element {

/**
* Returns the <code>logo</code> DOM ref.
* @type {HTMLElement}
* @name sap.ui.webc.fiori.ShellBar.prototype.logoDomRef
* @public
* @readonly
* @since 1.0.0-rc.16
*/
get logoDomRef() {
return this.shadowRoot!.querySelector<Button>(`*[data-ui5-stable="logo"]`);
get logoDomRef(): HTMLElement | null {
return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="logo"]`);
}

/**
* Returns the <code>copilot</code> DOM ref.
* @type {HTMLElement}
* @name sap.ui.webc.fiori.ShellBar.prototype.copilotDomRef
* @public
* @readonly
* @since 1.0.0-rc.16
*/
get copilotDomRef() {
return this.shadowRoot!.querySelector<Button>(`*[data-ui5-stable="copilot"]`);
get copilotDomRef(): HTMLElement | null {
return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="copilot"]`);
}

/**
* Returns the <code>notifications</code> icon DOM ref.
* @type {HTMLElement}
* @name sap.ui.webc.fiori.ShellBar.prototype.notificationsDomRef
* @public
* @readonly
* @since 1.0.0-rc.16
*/
get notificationsDomRef() {
return this.shadowRoot!.querySelector<Button>(`*[data-ui5-stable="notifications"]`);
get notificationsDomRef(): HTMLElement | null {
return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="notifications"]`);
}

/**
* Returns the <code>overflow</code> icon DOM ref.
* @type {HTMLElement}
* @name sap.ui.webc.fiori.ShellBar.prototype.overflowDomRef
* @public
* @readonly
* @since 1.0.0-rc.16
*/
get overflowDomRef() {
return this.shadowRoot!.querySelector<Button>(`*[data-ui5-stable="overflow"]`);
get overflowDomRef(): HTMLElement | null {
return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="overflow"]`);
}

/**
* Returns the <code>profile</code> icon DOM ref.
* @type {HTMLElement}
* @name sap.ui.webc.fiori.ShellBar.prototype.profileDomRef
* @public
* @readonly
* @since 1.0.0-rc.16
*/
get profileDomRef() {
return this.shadowRoot!.querySelector<Button>(`*[data-ui5-stable="profile"]`);
get profileDomRef(): HTMLElement | null {
return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="profile"]`);
}

/**
* Returns the <code>product-switch</code> icon DOM ref.
* @type {HTMLElement}
* @name sap.ui.webc.fiori.ShellBar.prototype.productSwitchDomRef
* @public
* @readonly
* @since 1.0.0-rc.16
*/
get productSwitchDomRef() {
return this.shadowRoot!.querySelector<Button>(`*[data-ui5-stable="product-switch"]`);
get productSwitchDomRef(): HTMLElement | null {
return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="product-switch"]`);
}

/**
* Returns all items that will be placed in the right of the bar as icons / dom elements.
* @param {boolean} showOverflowButton Determines if overflow button should be visible (not overflowing)
* @param showOverflowButton Determines if overflow button should be visible (not overflowing)
*/
_getAllItems(showOverflowButton: boolean) {
let domOrder = -1;
Expand Down
Loading
Loading