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 - List #7824

Merged
merged 11 commits into from
Nov 28, 2023
Merged

docs: new cem for Topic-P components - List #7824

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9d234a1
docs: new cem for Topic-P components - List
plamenivanov91 Nov 8, 2023
0cc29e4
Merge branch 'main' into list-namespace-refactoring
plamenivanov91 Nov 14, 2023
24d6371
docs: new cem for Topic-P components - List
plamenivanov91 Nov 14, 2023
562924e
Merge branch 'main' into list-namespace-refactoring
plamenivanov91 Nov 20, 2023
ae7e847
docs: new cem for Topic-P components - List
plamenivanov91 Nov 20, 2023
a12207e
Merge branch 'main' into list-namespace-refactoring
plamenivanov91 Nov 21, 2023
eb51ec4
Merge remote-tracking branch 'upstream/new-cem' into list-namespace-r…
plamenivanov91 Nov 21, 2023
673478c
Merge remote-tracking branch 'upstream/new-cem' into list-namespace-r…
plamenivanov91 Nov 27, 2023
2700107
docs: new cem for Topic-P components - List
plamenivanov91 Nov 27, 2023
f4fe91b
docs: new cem for Topic-P components - List
plamenivanov91 Nov 27, 2023
5860a9d
Merge remote-tracking branch 'upstream/new-cem' into list-namespace-r…
plamenivanov91 Nov 27, 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
36 changes: 11 additions & 25 deletions packages/main/src/CustomListItem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import ListItem from "./ListItem.js";
import CustomListItemTemplate from "./generated/templates/CustomListItemTemplate.lit.js";
import { IListItem } from "./Interfaces.js";

// Styles
import customListItemCss from "./generated/themes/CustomListItem.css.js";
Expand All @@ -16,41 +17,29 @@ import customListItemCss from "./generated/themes/CustomListItem.css.js";
*
* The component accepts arbitrary HTML content to allow full customization.
*
* <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-li-custom</code> exposes the following CSS Shadow Parts:
* <ul>
* <li>native-li - Used to style the main li tag of the list item</li>
* <li>content - Used to style the content area of the list item</li>
* <li>detail-button - Used to style the button rendered when the list item is of type detail</li>
* <li>delete-button - Used to style the button rendered when the list item is in delete mode</li>
* <li>radio - Used to style the radio button rendered when the list item is in single selection mode</li>
* <li>checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode</li>
* </ul>
* @csspart native-li - Used to style the main li tag of the list item
* @csspart content - Used to style the content area of the list item
* @csspart detail-button - Used to style the button rendered when the list item is of type detail
* @csspart delete-button - Used to style the button rendered when the list item is in delete mode
* @csspart radio - Used to style the radio button rendered when the list item is in single selection mode
* @csspart checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode
*
* @constructor
plamenivanov91 marked this conversation as resolved.
Show resolved Hide resolved
* @author SAP SE
* @alias sap.ui.webc.main.CustomListItem
* @extends sap.ui.webc.main.ListItem
* @tagname ui5-li-custom
* @implements sap.ui.webc.main.IListItem
* @extends ListItem
* @implements {IListItem}
* @public
*/
@customElement({
tag: "ui5-li-custom",
template: CustomListItemTemplate,
styles: [ListItem.styles, customListItemCss],
})
class CustomListItem extends ListItem {
class CustomListItem extends ListItem implements IListItem {
/**
* Defines the text alternative of the component.
* Note: If not provided a default text alternative will be set, if present.
*
* @type {string}
* @name sap.ui.webc.main.CustomListItem.prototype.accessibleName
* @defaultvalue ""
* @default ""
* @public
* @since 1.0.0-rc.15
*/
Expand All @@ -59,9 +48,6 @@ class CustomListItem extends ListItem {

/**
* Defines the content of the component.
plamenivanov91 marked this conversation as resolved.
Show resolved Hide resolved
* @type {Node[]}
* @name sap.ui.webc.main.CustomListItem.prototype.default
* @slot
* @public
*/

Expand Down
29 changes: 9 additions & 20 deletions packages/main/src/GroupHeaderListItem.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
import ListItemBase from "./ListItemBase.js";
import { IListItem } from "./Interfaces.js";

import { GROUP_HEADER_TEXT } from "./generated/i18n/i18n-defaults.js";

Expand All @@ -16,12 +17,13 @@ import groupheaderListItemCss from "./generated/themes/GroupHeaderListItem.css.j
* @class
* The <code>ui5-li-groupheader</code> is a special list item, used only to separate other list items into logical groups.
*
* @slot {Node[]} default - Defines the text of the component.
* <br>
* <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
*
* @constructor
* @author SAP SE
* @alias sap.ui.webc.main.GroupHeaderListItem
* @extends sap.ui.webc.main.ListItemBase
* @tagname ui5-li-groupheader
* @implements sap.ui.webc.main.IListItem
* @extends ListItemBase
* @implements {IListItem}
* @public
*/
plamenivanov91 marked this conversation as resolved.
Show resolved Hide resolved
@customElement({
Expand All @@ -30,31 +32,18 @@ import groupheaderListItemCss from "./generated/themes/GroupHeaderListItem.css.j
template: GroupHeaderListItemTemplate,
styles: [ListItemBase.styles, groupheaderListItemCss],
})
class GroupHeaderListItem extends ListItemBase {
class GroupHeaderListItem extends ListItemBase implements IListItem {
/**
* Defines the text alternative of the component.
* Note: If not provided a default text alternative will be set, if present.
*
* @type {string}
* @name sap.ui.webc.main.GroupHeaderListItem.prototype.accessibleName
* @defaultvalue ""
* @default ""
* @public
* @since 1.0.0-rc.15
*/
@property()
accessibleName!: string;

/**
* Defines the text of the component.
* <br>
* <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
*
* @type {Node[]}
* @name sap.ui.webc.main.GroupHeaderListItem.prototype.default
* @slot
* @public
*/

static i18nBundle: I18nBundle;

get groupItem() {
Expand Down
4 changes: 2 additions & 2 deletions packages/main/src/Interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,11 +91,11 @@ const IInputSuggestionItem = "sap.ui.webc.main.IInputSuggestionItem";
/**
* Interface for components that may be slotted inside a <code>ui5-list</code> as items
*
* @name sap.ui.webc.main.IListItem
* @interface
plamenivanov91 marked this conversation as resolved.
Show resolved Hide resolved
* @public
*/
const IListItem = "sap.ui.webc.main.IListItem";
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface IListItem extends HTMLElement { }
plamenivanov91 marked this conversation as resolved.
Show resolved Hide resolved

/**
* Interface for components that may be slotted inside <code>ui5-menu</code> as items
Expand Down
70 changes: 14 additions & 56 deletions packages/main/src/List.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,11 +145,7 @@ type ListItemClickEventDetail = {
* <code>import "@ui5/webcomponents/dist/GroupHeaderListItem.js";</code> (for <code>ui5-li-groupheader</code>)
*
* @constructor
* @author SAP SE
* @alias sap.ui.webc.main.List
* @extends sap.ui.webc.base.UI5Element
* @tagname ui5-list
* @appenddocs sap.ui.webc.main.StandardListItem sap.ui.webc.main.CustomListItem sap.ui.webc.main.GroupHeaderListItem
* @extends UI5Element
* @public
*/
@customElement({
Expand All @@ -164,7 +160,6 @@ type ListItemClickEventDetail = {
* Fired when an item is activated, unless the item's <code>type</code> property
* is set to <code>Inactive</code>.
plamenivanov91 marked this conversation as resolved.
Show resolved Hide resolved
*
* @event sap.ui.webc.main.List#item-click
* @allowPreventDefault
* @param {HTMLElement} item The clicked item.
* @public
Expand All @@ -181,7 +176,6 @@ type ListItemClickEventDetail = {
* <b>Note:</b> This event is only applicable to list items that can be closed (such as notification list items),
* not to be confused with <code>item-delete</code>.
*
* @event sap.ui.webc.main.List#item-close
* @param {HTMLElement} item the item about to be closed.
* @public
* @since 1.0.0-rc.8
Expand All @@ -197,7 +191,6 @@ type ListItemClickEventDetail = {
* <br><br>
* <b>Note:</b> This event is only applicable to list items that can be toggled (such as notification group list items).
*
* @event sap.ui.webc.main.List#item-toggle
* @param {HTMLElement} item the toggled item.
* @public
* @since 1.0.0-rc.8
Expand All @@ -214,7 +207,6 @@ type ListItemClickEventDetail = {
* <b>Note:</b> A Delete button is displayed on each item,
* when the component <code>mode</code> property is set to <code>Delete</code>.
*
* @event sap.ui.webc.main.List#item-delete
* @param {HTMLElement} item the deleted item.
* @public
*/
Expand All @@ -228,7 +220,6 @@ type ListItemClickEventDetail = {
* Fired when selection is changed by user interaction
* in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes.
*
* @event sap.ui.webc.main.List#selection-change
* @allowPreventDefault
* @param {Array} selectedItems An array of the selected items.
* @param {Array} previouslySelectedItems An array of the previously selected items.
Expand All @@ -248,7 +239,6 @@ type ListItemClickEventDetail = {
* <br><br>
* <b>Note:</b> The event is fired when the <code>growing='Scroll'</code> property is enabled.
*
* @event sap.ui.webc.main.List#load-more
* @public
* @since 1.0.0-rc.6
*/
Expand All @@ -268,9 +258,7 @@ class List extends UI5Element {
* <br><br>
* <b>Note:</b> If <code>header</code> is set this property is ignored.
*
* @type {string}
* @name sap.ui.webc.main.List.prototype.headerText
* @defaultvalue ""
* @default ""
* @public
*/
@property()
Expand All @@ -279,9 +267,7 @@ class List extends UI5Element {
/**
* Defines the footer text.
*
* @type {string}
* @name sap.ui.webc.main.List.prototype.footerText
* @defaultvalue ""
* @default ""
* @public
*/
@property()
Expand All @@ -290,9 +276,7 @@ class List extends UI5Element {
/**
* Determines whether the component is indented.
*
* @type {boolean}
* @name sap.ui.webc.main.List.prototype.indent
* @defaultvalue false
* @default false
* @public
*/
@property({ type: Boolean })
Expand All @@ -301,9 +285,7 @@ class List extends UI5Element {
/**
* Defines the mode of the component.
*
* @type {sap.ui.webc.main.types.ListMode}
* @name sap.ui.webc.main.List.prototype.mode
* @defaultvalue "None"
* @default "None"
* @public
*/
@property({ type: ListMode, defaultValue: ListMode.None })
Expand All @@ -312,9 +294,7 @@ class List extends UI5Element {
/**
* Defines the text that is displayed when the component contains no items.
*
* @type {string}
* @name sap.ui.webc.main.List.prototype.noDataText
* @defaultvalue ""
* @default ""
* @public
*/
@property()
Expand All @@ -323,9 +303,7 @@ class List extends UI5Element {
/**
* Defines the item separator style that is used.
*
* @type {sap.ui.webc.main.types.ListSeparators}
* @name sap.ui.webc.main.List.prototype.separators
* @defaultvalue "All"
* @default "All"
* @public
*/
@property({ type: ListSeparators, defaultValue: ListSeparators.All })
Expand All @@ -337,9 +315,7 @@ class List extends UI5Element {
* <br><br>
* <b>Restrictions:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer,
* on IE the component will fallback to <code>growing="Button"</code>.
* @type {sap.ui.webc.main.types.ListGrowingMode}
* @name sap.ui.webc.main.List.prototype.growing
* @defaultvalue "None"
* @default "None"
* @since 1.0.0-rc.13
* @public
*/
Expand All @@ -349,9 +325,7 @@ class List extends UI5Element {
/**
* Defines if the component would display a loading indicator over the list.
*
* @type {boolean}
* @name sap.ui.webc.main.List.prototype.busy
* @defaultvalue false
* @default false
* @public
* @since 1.0.0-rc.6
*/
Expand All @@ -361,9 +335,7 @@ class List extends UI5Element {
/**
* Defines the delay in milliseconds, after which the busy indicator will show up for this component.
*
* @type {sap.ui.webc.base.types.Integer}
* @name sap.ui.webc.main.List.prototype.busyDelay
* @defaultValue 1000
* @default 1000
* @public
*/
@property({ validator: Integer, defaultValue: 1000 })
Expand All @@ -372,9 +344,7 @@ class List extends UI5Element {
/**
* Defines the accessible name of the component.
*
* @type {string}
* @name sap.ui.webc.main.List.prototype.accessibleName
* @defaultvalue ""
* @default ""
* @public
* @since 1.0.0-rc.15
*/
Expand All @@ -384,9 +354,7 @@ class List extends UI5Element {
/**
* Defines the IDs of the elements that label the input.
*
* @type {string}
* @name sap.ui.webc.main.List.prototype.accessibleNameRef
* @defaultvalue ""
* @default ""
* @public
* @since 1.0.0-rc.15
*/
Expand All @@ -397,9 +365,7 @@ class List extends UI5Element {
* Defines the accessible role of the component.
* <br><br>
* @public
* @type {string}
* @name sap.ui.webc.main.List.prototype.accessibleRole
* @defaultvalue "list"
* @default "list"
* @since 1.0.0-rc.15
*/
@property({ defaultValue: "list" })
Expand All @@ -408,9 +374,7 @@ class List extends UI5Element {
/**
* Defines the description for the accessible role of the component.
* @protected
* @type {string}
* @name sap.ui.webc.main.List.prototype.accessibleRoleDescription
* @defaultvalue undefined
* @default undefined
* @since 1.10.0
*/
@property({ defaultValue: undefined, noAttribute: true })
Expand All @@ -435,9 +399,6 @@ class List extends UI5Element {
* <br><br>
* <b>Note:</b> Use <code>ui5-li</code>, <code>ui5-li-custom</code>, and <code>ui5-li-groupheader</code> for the intended design.
*
* @type {sap.ui.webc.main.IListItem[]}
* @name sap.ui.webc.main.List.prototype.default
* @slot items
* @public
*/
@slot({ type: HTMLElement, "default": true })
Expand All @@ -449,9 +410,6 @@ class List extends UI5Element {
* <b>Note:</b> When <code>header</code> is set, the
* <code>headerText</code> property is ignored.
*
* @type {HTMLElement[]}
* @name sap.ui.webc.main.List.prototype.header
* @slot
* @public
*/
@slot()
Expand Down
Loading
Loading