diff --git a/docs/components/index.md b/docs/components/index.md index 6f2fdbe44c..bc4c5ece7e 100644 --- a/docs/components/index.md +++ b/docs/components/index.md @@ -76,6 +76,7 @@ documentation. - [Launchpad](layout-navigation/launchpad.md) - [Line Chart](charts/line-chart.md) - [List Group](lists-tables-trees/list-group.md) +- [List Item](lists-tables-trees/list-item.md) ## M diff --git a/docs/components/lists-tables-trees/list-item.md b/docs/components/lists-tables-trees/list-item.md new file mode 100644 index 0000000000..42053da2f5 --- /dev/null +++ b/docs/components/lists-tables-trees/list-item.md @@ -0,0 +1,21 @@ +# List item + +## Usage --- + +## Code --- + +### Example + + + +### Action list items + +If the entire item is clickable, use the `.list-item-action` helper class to apply hover styling. + + + +### Unread state + +Use the `.unread` class on `.list-item-title` to indicate unread items with a bold title and a dot indicator. + + diff --git a/docs/components/status-notifications/notification-item.md b/docs/components/status-notifications/notification-item.md index 29e5f0c58a..895545913f 100644 --- a/docs/components/status-notifications/notification-item.md +++ b/docs/components/status-notifications/notification-item.md @@ -1,5 +1,9 @@ # Notification item +!!! warning "Deprecated" + + This component is deprecated. Use the [list item](../lists-tables-trees/list-item.md) component instead. + ## Usage --- Notifications keep users updated on changes, prompt timely responses to important updates, and guide them through interactions. diff --git a/mkdocs.yml b/mkdocs.yml index 64e9fd41d5..565ec0d372 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -121,6 +121,7 @@ nav: - Wizard: 'components/layout-navigation/wizard.md' - Lists, Tables & Trees: - List Group: 'components/lists-tables-trees/list-group.md' + - List Item: 'components/lists-tables-trees/list-item.md' - Table & Datatable: - Overview: 'components/lists-tables-trees/overview.md' - HTML Table: 'components/lists-tables-trees/HTML-table.md' diff --git a/playwright/e2e/element-examples/static.spec.ts b/playwright/e2e/element-examples/static.spec.ts index 621ee716aa..7eac5bacf5 100644 --- a/playwright/e2e/element-examples/static.spec.ts +++ b/playwright/e2e/element-examples/static.spec.ts @@ -24,6 +24,9 @@ test('input-fields/multi-line', ({ si }) => si.static()); test('input-fields/single-line', ({ si }) => si.static()); test('links/links', ({ si }) => si.static()); test('list-group/list-group', ({ si }) => si.static()); +test('list-item/list-item', ({ si }) => si.static()); +test('list-item/list-item-action', ({ si }) => si.static()); +test('list-item/list-item-unread', ({ si }) => si.static()); test('shapes/shapes', ({ si }) => si.static()); test('si-about/si-about-api', ({ si }) => si.static()); test('si-about/si-about-text-api', ({ si }) => si.static()); diff --git a/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-action-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-action-element-examples-chromium-dark-linux.png new file mode 100644 index 0000000000..7f16782b7f --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-action-element-examples-chromium-dark-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a7b857c0b02f84739bb4f49bd197f4e98e03373ac5324ac75e19934d498e43a1 +size 27634 diff --git a/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-action-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-action-element-examples-chromium-light-linux.png new file mode 100644 index 0000000000..b614183e23 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-action-element-examples-chromium-light-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7343659d6f9b84cc357a90379f20ab82d110a43fdbfd7c67608c0fa80dfb6090 +size 27117 diff --git a/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-action.yaml b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-action.yaml new file mode 100644 index 0000000000..02f6f09588 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-action.yaml @@ -0,0 +1,11 @@ +- paragraph: Edited 2 hours ago +- heading "Project Alpha" [level=5] +- paragraph: Automation config for assembly line 3 +- paragraph: Edited 3 days ago +- heading "Project Beta" [level=5] +- paragraph: Drive parameter tuning for conveyor motors +- text: 3 contributors +- paragraph: Edited last week +- heading "Project Gamma" [level=5] +- paragraph: Safety interlock logic for press station +- text: Workspace B Private Review pending \ No newline at end of file diff --git a/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-element-examples-chromium-dark-linux.png new file mode 100644 index 0000000000..9f05cbccc1 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-element-examples-chromium-dark-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:23ff594c2ae579e0598557c68b473d40b922dda484f8bf48a6b9417b47287263 +size 43619 diff --git a/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-element-examples-chromium-light-linux.png new file mode 100644 index 0000000000..3c458cc275 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-element-examples-chromium-light-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9759d4d9c1b1c4e355fbe1b4eb02eb7a55814383cf2790b190f9cf9819a19c3c +size 43013 diff --git a/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-unread-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-unread-element-examples-chromium-dark-linux.png new file mode 100644 index 0000000000..4814e4ba04 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-unread-element-examples-chromium-dark-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:65bb9ad3dea7b9f5acfbc4bd56db083fc5f375f6f43704926725c5dc36def869 +size 30751 diff --git a/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-unread-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-unread-element-examples-chromium-light-linux.png new file mode 100644 index 0000000000..4a391c4b57 --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-unread-element-examples-chromium-light-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0e67204522378f041e8d0ad58a6f6cd3138bf3143e69b12da54c8130d473b2bc +size 30245 diff --git a/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-unread.yaml b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-unread.yaml new file mode 100644 index 0000000000..4f80be06be --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item-unread.yaml @@ -0,0 +1,19 @@ +- list: + - listitem: + - paragraph: /Today at \d+:\d+/ + - heading "Conveyor belt inspection completed" [level=5] + - paragraph: /Routine inspection of conveyor belt CB-\d+ finished without issues\. All parameters within tolerance\./ + - listitem: + - paragraph: /Today at \d+:\d+/ + - heading "Sensor calibration report available" [level=5] + - paragraph: Calibration of temperature sensors on production line 2 has been completed and documented. + - text: Production line 2 + - link "View report": + - /url: "#" + - listitem: + - paragraph: /Yesterday at \d+:\d+/ + - heading "Motor drive fault detected" [level=5] + - paragraph: /Drive unit DU-\d+ on packaging station reported overcurrent fault\. Manual reset required\./ +- text: Interactive Demo Controls +- checkbox "Unread (indicator and emphasis)" [checked] +- text: Unread (indicator and emphasis) \ No newline at end of file diff --git a/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item.yaml b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item.yaml new file mode 100644 index 0000000000..55b91a264c --- /dev/null +++ b/playwright/snapshots/static.spec.ts-snapshots/list-item--list-item.yaml @@ -0,0 +1,29 @@ +- list: + - listitem: + - paragraph: /Today at \d+:\d+/ + - heading "Conveyor belt inspection completed" [level=5] + - paragraph: /Routine inspection of conveyor belt CB-\d+ finished without issues\. All parameters within tolerance\./ + - listitem: + - paragraph: /Today at \d+:\d+/ + - heading "Sensor calibration report available" [level=5] + - paragraph: Calibration of temperature sensors on production line 2 has been completed and documented. + - text: Production line 2 + - link "View report": + - /url: "#" + - listitem: + - paragraph: /Today at \d+:\d+/ + - heading "Firmware update pending approval" [level=5] + - button "Options" + - paragraph: /SIMATIC S7-\d+ firmware v3\.1\.2 is ready for deployment\. Review and approve to proceed with installation\./ + - group "Approval actions": + - button "Approve" + - button "Archive" + - button "Delete" + - listitem: + - paragraph: /Yesterday at \d+:\d+/ + - heading "Motor drive fault detected" [level=5] + - button "Options" + - paragraph: /Drive unit DU-\d+ on packaging station reported overcurrent fault\. Manual reset required\./ + - text: Fault log Critical + - button "Accept" + - button "Deny" \ No newline at end of file diff --git a/projects/element-theme/src/styles/components/_list-item.scss b/projects/element-theme/src/styles/components/_list-item.scss new file mode 100644 index 0000000000..cfcaa8a405 --- /dev/null +++ b/projects/element-theme/src/styles/components/_list-item.scss @@ -0,0 +1,118 @@ +@use '../variables'; +@use '../variables/typography'; + +@use 'sass:map'; + +ul:has(.list-item), +ol:has(.list-item) { + margin: 0; + padding: 0; +} + +.list-item { + display: grid; + grid-template-columns: 1fr auto; + padding-block: map.get(variables.$spacers, 4); + padding-inline: map.get(variables.$spacers, 6); + + @include typography.si-font( + typography.$si-font-size-body, + typography.$si-line-height-body, + typography.$si-font-weight-body + ); + + > * { + grid-column: 1 / -1; + } + + .list-item-timestamp { + color: variables.$element-text-secondary; + margin-block-end: 0; + } + + .list-item-title { + grid-column: 1; + padding-block: map.get(variables.$spacers, 4); + margin-block-end: 0; + + @include typography.si-font( + typography.$si-font-size-h5, + typography.$si-line-height-h5, + typography.$si-font-weight-h5 + ); + + &.unread { + position: relative; + + @include typography.si-font( + typography.$si-font-size-h5-bold, + typography.$si-line-height-h5-bold, + typography.$si-font-weight-h5-bold + ); + + &::before { + content: ''; + position: absolute; + block-size: map.get(variables.$spacers, 3); + inline-size: map.get(variables.$spacers, 3); + border-radius: 50%; + background-color: variables.$element-ui-1; + inset-inline-start: calc( + -1 * (map.get(variables.$spacers, 2) + map.get(variables.$spacers, 3)) + ); + inset-block-start: 50%; + translate: 0 -50%; + } + } + } + + .list-item-primary-action { + grid-column: 2; + align-self: center; + } + + .list-item-description { + margin-block-end: map.get(variables.$spacers, 4); + } + + .list-item-metadata { + display: flex; + flex-direction: row; + align-items: center; + color: variables.$element-text-secondary; + margin-block-end: map.get(variables.$spacers, 4); + + a:not(:hover) { + color: variables.$element-text-secondary; + } + + .badge { + margin-inline: 0; + } + + .list-item-metadata-divider { + inline-size: 0.125rem; + block-size: 0.125rem; + border-radius: 50%; + background-color: variables.$element-text-secondary; + margin-inline: map.get(variables.$spacers, 2); + } + } + + .list-item-quick-actions { + display: flex; + gap: map.get(variables.$spacers, 4); + } + + &.list-item-action { + cursor: pointer; + + &:hover { + background-color: variables.$element-base-1-hover; + } + + &:active { + background-color: variables.$element-base-1-selected; + } + } +} diff --git a/projects/element-theme/src/theme.scss b/projects/element-theme/src/theme.scss index 42f0051eb7..79ffee0c52 100644 --- a/projects/element-theme/src/theme.scss +++ b/projects/element-theme/src/theme.scss @@ -17,6 +17,7 @@ $_themes: () !default; @use 'styles/components/icons'; @use 'styles/components/layout'; @use 'styles/components/links'; +@use 'styles/components/list-item'; @use 'styles/components/pills'; @use 'styles/components/scrollbar'; @use 'styles/components/skeleton'; diff --git a/src/app/examples/list-item/list-item-action.html b/src/app/examples/list-item/list-item-action.html new file mode 100644 index 0000000000..55aff9ce8c --- /dev/null +++ b/src/app/examples/list-item/list-item-action.html @@ -0,0 +1,33 @@ +
+
+

Edited 2 hours ago

+
Project Alpha
+

Automation config for assembly line 3

+
+
+

Edited 3 days ago

+
Project Beta
+

Drive parameter tuning for conveyor motors

+
+
+ + 3 contributors +
+
+
+
+

Edited last week

+
Project Gamma
+

Safety interlock logic for press station

+
+ Workspace B +
+
+ + Private +
+
+ Review pending +
+
+
diff --git a/src/app/examples/list-item/list-item-action.ts b/src/app/examples/list-item/list-item-action.ts new file mode 100644 index 0000000000..7051d933ce --- /dev/null +++ b/src/app/examples/list-item/list-item-action.ts @@ -0,0 +1,21 @@ +/** + * Copyright (c) Siemens 2016 - 2026 + * SPDX-License-Identifier: MIT + */ +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; +import { elementUser, elementLock } from '@siemens/element-icons'; +import { addIcons, SiIconComponent } from '@siemens/element-ng/icon'; +import { LOG_EVENT } from '@siemens/live-preview'; + +@Component({ + selector: 'app-sample', + imports: [SiIconComponent], + templateUrl: './list-item-action.html', + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'p-4' } +}) +export class SampleComponent { + logEvent = inject(LOG_EVENT); + + icons = addIcons({ elementUser, elementLock }); +} diff --git a/src/app/examples/list-item/list-item-unread.html b/src/app/examples/list-item/list-item-unread.html new file mode 100644 index 0000000000..18f067af7a --- /dev/null +++ b/src/app/examples/list-item/list-item-unread.html @@ -0,0 +1,40 @@ + + +
+
Interactive Demo Controls
+
+ + + +
+
diff --git a/src/app/examples/list-item/list-item-unread.ts b/src/app/examples/list-item/list-item-unread.ts new file mode 100644 index 0000000000..bec849823b --- /dev/null +++ b/src/app/examples/list-item/list-item-unread.ts @@ -0,0 +1,17 @@ +/** + * Copyright (c) Siemens 2016 - 2026 + * SPDX-License-Identifier: MIT + */ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { SiFormItemComponent } from '@siemens/element-ng/form'; + +@Component({ + selector: 'app-sample', + imports: [FormsModule, SiFormItemComponent], + templateUrl: './list-item-unread.html', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class SampleComponent { + unread = true; +} diff --git a/src/app/examples/list-item/list-item.html b/src/app/examples/list-item/list-item.html new file mode 100644 index 0000000000..fbf2afca0d --- /dev/null +++ b/src/app/examples/list-item/list-item.html @@ -0,0 +1,108 @@ + + + + + diff --git a/src/app/examples/list-item/list-item.ts b/src/app/examples/list-item/list-item.ts new file mode 100644 index 0000000000..97b3c83907 --- /dev/null +++ b/src/app/examples/list-item/list-item.ts @@ -0,0 +1,37 @@ +/** + * Copyright (c) Siemens 2016 - 2026 + * SPDX-License-Identifier: MIT + */ +import { CdkMenuTrigger } from '@angular/cdk/menu'; +import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; +import { + elementArchive, + elementCheckboxChecked, + elementDelete, + elementDocument +} from '@siemens/element-icons'; +import { addIcons, SiIconComponent } from '@siemens/element-ng/icon'; +import { SiMenuFactoryComponent, type MenuItem } from '@siemens/element-ng/menu'; +import { LOG_EVENT } from '@siemens/live-preview'; + +@Component({ + selector: 'app-sample', + imports: [SiIconComponent, SiMenuFactoryComponent, CdkMenuTrigger], + templateUrl: './list-item.html', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class SampleComponent { + logEvent = inject(LOG_EVENT); + + icons = addIcons({ elementCheckboxChecked, elementArchive, elementDelete, elementDocument }); + + items: MenuItem[] = [ + { type: 'action', label: 'View details', action: () => this.logEvent('View details') }, + { + type: 'action', + label: 'Assign technician', + action: () => this.logEvent('Assign technician') + }, + { type: 'action', label: 'Export log', action: () => this.logEvent('Export log') } + ]; +}