Add rounded corners and shadow to list

apps/cookbook/src/app/examples/examples.common.ts

@@ -29,6 +29,7 @@ import { ItemExampleComponent } from './item-example/item-example.component';
 import { ItemGroupExampleComponent } from './item-group-example/item-group-example.component';
 import { LinkExampleComponent } from './link-example/link-example.component';
 import { ListExampleComponent } from './list-example/list-example.component';
+import { ListExperimentalExampleComponent } from './list-experimental-example/list-experimental-example.component';
 import { ListLoadOnDemandExampleComponent } from './list-load-on-demand-example/list-load-on-demand-example.component';
 import { ListNoShapeExampleComponent } from './list-no-shape-example/list-no-shape-example.component';
 import { ListSwipeExampleComponent } from './list-swipe-example/list-swipe-example.component';
@@ -126,6 +127,7 @@ export const COMPONENT_DECLARATIONS: any[] = [
   StylingHtmlListsExampleComponent,
   ItemGroupExampleComponent,
   SectionHeaderExampleComponent,
+  ListExperimentalExampleComponent,
 ];
 
 // Configure custom icons (used by example to show the usage of custom icons)

apps/cookbook/src/app/examples/examples.module.ts

@@ -22,6 +22,7 @@ import { ItemGroupExampleModule } from './item-group-example/item-group-example.
 import { ItemSlidingExampleModule } from './item-sliding-example/item-sliding-example.module';
 import { LinkExampleModule } from './link-example/link-example.module';
 import { ListExamplesModule } from './list-example/list-example.module';
+import { ListExperimentalExampleModule } from './list-experimental-example/list-experimental-example.module';
 import { ModalExampleModule } from './modal-example/modal-example.module';
 import { ProgressCircleExampleModule } from './progress-circle-example/progress-circle-example.module';
 import { RadioExampleModule } from './radio-example/radio-example.module';
@@ -54,6 +55,7 @@ const IMPORTS = [
   GridLayoutExamplesModule,
   SectionHeaderExampleModule,
   ItemGroupExampleModule,
+  ListExperimentalExampleModule,
 ];
 
 @NgModule({

apps/cookbook/src/app/examples/examples.routes.ts

@@ -41,6 +41,7 @@ import { ListWithSectionsExampleComponent } from './list-example/examples/sectio
 import { ListWithSectionsAndColoredItemsExampleComponent } from './list-example/examples/sections-and-colored-items';
 import { ListSelectableItemsExampleComponent } from './list-example/examples/selectable-items';
 import { ListExampleComponent } from './list-example/list-example.component';
+import { ListExperimentalExampleComponent } from './list-experimental-example/list-experimental-example.component';
 import { ListLoadOnDemandExampleComponent } from './list-load-on-demand-example/list-load-on-demand-example.component';
 import { ListNoShapeExampleComponent } from './list-no-shape-example/list-no-shape-example.component';
 import { ListSwipeExampleComponent } from './list-swipe-example/list-swipe-example.component';
@@ -337,6 +338,10 @@ export const routes: Routes = [
     path: 'list-load-on-demand',
     component: ListLoadOnDemandExampleComponent,
   },
+  {
+    path: 'list-experimental',
+    component: ListExperimentalExampleComponent,
+  },
   {
     path: 'chart-deprecated',
     component: ChartDeprecatedExampleComponent,

apps/cookbook/src/app/examples/list-experimental-example/examples/item-sliding.ts

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+
+import { ItemSwipeAction } from '@kirbydesign/designsystem';
+
+import { BaseListComponent } from '../../list-shared/base-list.component';
+
+const template = `<kirby-list-experimental>
+  <kirby-item-sliding *ngFor="let item of items" [swipeActions]="swipeActions">
+    <kirby-item>
+      <p>{{ item.title }}</p>
+      <data slot="end" class="kirby-text-bold">{{item.amount}}</data>
+    </kirby-item>
+  </kirby-item-sliding>
+</kirby-list-experimental>`;
+@Component({
+  // tslint:disable-next-line
+  selector: 'cookbook-list-experimental-sliding-items-example',
+  template: template,
+})
+export class ListExperimentalSlidingItemsExampleComponent extends BaseListComponent {
+  template: string = template;
+
+  swipeActions: ItemSwipeAction[] = [
+    {
+      title: 'edit',
+      type: 'success',
+      onSelected: () => {},
+    },
+    {
+      title: 'archive',
+      type: 'warning',
+      onSelected: () => {},
+    },
+    {
+      title: 'delete',
+      icon: 'trash',
+      onSelected: () => {},
+      type: 'danger',
+    },
+  ];
+}

apps/cookbook/src/app/examples/list-experimental-example/examples/item.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+import { BaseListComponent } from '../../list-shared/base-list.component';
+
+const template = `<kirby-list-experimental>
+  <kirby-section-header outside>
+    <h2 heading>Stocks</h2>
+  </kirby-section-header>
+  <kirby-item *ngFor="let item of items">
+    <p>{{ item.title }}</p>
+    <data slot="end" class="kirby-text-bold">{{item.amount}}</data>
+  </kirby-item>
+</kirby-list-experimental>`;
+
+@Component({
+  // tslint:disable-next-line
+  selector: 'cookbook-list-experimental-items-example',
+  template: template,
+})
+export class ListExperimentalItemsExampleComponent extends BaseListComponent {
+  template: string = template;
+}

apps/cookbook/src/app/examples/list-experimental-example/list-experimental-example.component.html

@@ -0,0 +1,8 @@
+<div>
+  <h2>List with items and section</h2>
+  <cookbook-list-experimental-items-example></cookbook-list-experimental-items-example>
+</div>
+<div>
+  <h2>List with sliding items</h2>
+  <cookbook-list-experimental-sliding-items-example></cookbook-list-experimental-sliding-items-example>
+</div>

apps/cookbook/src/app/examples/list-experimental-example/list-experimental-example.component.scss

@@ -0,0 +1,18 @@
+@use "sass:map";
+@use '~@kirbydesign/core/src/scss/utils';
+@use '~@kirbydesign/core/src/scss/base/list';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-grow: 1;
+  height: 100%;
+  background: utils.get-color('background-color');
+  gap: utils.size('m');
+  padding-top: utils.size('s');
+
+  > * {
+    width: min(100%, #{map.get(utils.$breakpoints, 'medium')});
+  }
+}

apps/cookbook/src/app/examples/list-experimental-example/list-experimental-example.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+import { ItemSwipeAction } from '@kirbydesign/designsystem';
+
+import { BaseListComponent } from '../list-shared/base-list.component';
+
+@Component({
+  selector: 'cookbook-list-example',
+  templateUrl: './list-experimental-example.component.html',
+  styleUrls: ['./list-experimental-example.component.scss'],
+})
+export class ListExperimentalExampleComponent {}

apps/cookbook/src/app/examples/list-experimental-example/list-experimental-example.module.ts

@@ -0,0 +1,20 @@
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { KirbyModule } from '@kirbydesign/designsystem';
+
+import { ListExperimentalItemsExampleComponent } from './examples/item';
+import { ListExperimentalSlidingItemsExampleComponent } from './examples/item-sliding';
+
+const listExperimentalExamples = [
+  ListExperimentalItemsExampleComponent,
+  ListExperimentalSlidingItemsExampleComponent,
+];
+
+@NgModule({
+  imports: [CommonModule, KirbyModule, ScrollingModule],
+  declarations: [...listExperimentalExamples],
+  exports: [...listExperimentalExamples],
+})
+export class ListExperimentalExampleModule {}

apps/cookbook/src/app/showcase/list-experimental-showcase/list-experimental-showcase.component.html

@@ -0,0 +1,58 @@
+<p>
+  Lists are made up of multiple rows of items which can contain items, text, buttons, icons, and
+  much more. Lists generally contain items with similar data content, such as images and text.
+</p>
+<p>
+  The list itself is essentially a container with styling for rounded corners and shadow around the
+  list content. Anything can be placed into the list, but it comes with a bit of extra functionality
+  when used together with <code>kirby-section-header</code> and <code>kirby-item</code>.
+</p>
+<p>
+  When using <code>kirby-item</code>, either on its own or wrapped in custom markup, the list
+  expects its children to represent single item (e.g. not another container or wrapper element).
+  This way, the first and last item will correctly have top and bottom spacing applied, to provide
+  the correct appearance of the list.
+</p>
+
+<div class="examples">
+  <div>
+    <h2>List with items</h2>
+    <p>
+      The <a routerLink="/home/showcase/section-header">Section Header</a> can be used on a list to
+      create a set of grouped content, making use of the lists <code>slots</code>.
+    </p>
+    <p>
+      The list has two <code>slots</code>, the default and the named <code>outside</code> slot. The
+      default slot is reserved for the list items, and receives the list-specific styling. The
+      <code>outside</code> slot is placed outside the styled part of the list, and is meant to be
+      used with the <code>kirby-section-header</code> or similar.
+    </p>
+    <cookbook-code-viewer [html]="items.template"> </cookbook-code-viewer>
+  </div>
+  <cookbook-list-experimental-items-example #items></cookbook-list-experimental-items-example>
+  <div>
+    <h2>Sliding items in list</h2>
+    <p>
+      Lists work out of the box with the interactive
+      <a routerLink="/home/showcase/item-sliding">Item Sliding</a>, allowing to swipe an item left
+      or right to reveal options. Try dragging right on one of the items, to see swipe actions
+      revealed to the left of the item content. See the page linked above for more details on
+      <code>kirby-item-sliding</code>.
+    </p>
+    <cookbook-code-viewer [html]="slidingItems.template"> </cookbook-code-viewer>
+  </div>
+  <cookbook-list-experimental-sliding-items-example
+    #slidingItems
+  ></cookbook-list-experimental-sliding-items-example>
+</div>
+
+<h2>Sections</h2>
+<p>
+  It is important to note that the list does not have any functionality for multiple sections nested
+  within the list itself. This would add extra (unnecessary) complexity to using the list.
+</p>
+
+<p>
+  Instead, multiple lists should just be added one after another in a flat structure, as seen below.
+</p>
+<cookbook-code-viewer [html]="multipleListsExample"> </cookbook-code-viewer>

apps/cookbook/src/app/showcase/list-experimental-showcase/list-experimental-showcase.component.scss

@@ -0,0 +1,6 @@
+.examples {
+  display: grid;
+  gap: 3rem;
+  grid-template-columns: repeat(auto-fill, minmax(40ch, 1fr));
+  margin: 2rem 0;
+}

apps/cookbook/src/app/showcase/list-experimental-showcase/list-experimental-showcase.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'cookbook-list-experimental-showcase',
+  templateUrl: './list-experimental-showcase.component.html',
+  styleUrls: ['./list-experimental-showcase.component.scss'],
+})
+export class ListExperimentalShowcaseComponent {
+  multipleListsExample: string = `<kirby-list-experimental>
+  <kirby-section-header outside></kirby-section-header>
+  ...
+</kirby-list-experimental>
+
+<kirby-list-experimental>
+  <kirby-section-header outside></kirby-section-header>
+  ...
+</kirby-list-experimental>`;
+}

apps/cookbook/src/app/showcase/showcase.common.ts

@@ -28,6 +28,7 @@ import { IconShowcaseComponent } from './icon-showcase/icon-showcase.component';
 import { ItemGroupShowcaseComponent } from './item-group-showcase/item-group-showcase.component';
 import { ItemSlidingShowcaseComponent } from './item-sliding-showcase/item-sliding-showcase.component';
 import { LinkShowcaseComponent } from './link-showcase/link-showcase.component';
+import { ListExperimentalShowcaseComponent } from './list-experimental-showcase/list-experimental-showcase.component';
 import { ListLoadOnDemandShowcaseComponent } from './list-load-on-demand-showcase/list-load-on-demand-showcase.component';
 import { ListNoShapeShowcaseComponent } from './list-no-shape-showcase/list-no-shape-showcase.component';
 import { ListShowcaseComponent } from './list-showcase/list-showcase.component';
@@ -105,6 +106,7 @@ export const COMPONENT_EXPORTS: any[] = [
   SectionHeaderShowcaseComponent,
   ItemSlidingShowcaseComponent,
   StylingHtmlListsShowcaseComponent,
+  ListExperimentalShowcaseComponent,
 ];
 
 export const COMPONENT_DECLARATIONS: any[] = [...COMPONENT_EXPORTS, ShowcaseComponent];

apps/cookbook/src/app/showcase/showcase.routes.ts

@@ -30,6 +30,7 @@ import { IconShowcaseComponent } from './icon-showcase/icon-showcase.component';
 import { ItemGroupShowcaseComponent } from './item-group-showcase/item-group-showcase.component';
 import { ItemSlidingShowcaseComponent } from './item-sliding-showcase/item-sliding-showcase.component';
 import { LinkShowcaseComponent } from './link-showcase/link-showcase.component';
+import { ListExperimentalShowcaseComponent } from './list-experimental-showcase/list-experimental-showcase.component';
 import { ListLoadOnDemandShowcaseComponent } from './list-load-on-demand-showcase/list-load-on-demand-showcase.component';
 import { ListNoShapeShowcaseComponent } from './list-no-shape-showcase/list-no-shape-showcase.component';
 import { ListShowcaseComponent } from './list-showcase/list-showcase.component';
@@ -126,6 +127,13 @@ export const routes: Routes = [
         path: 'list-no-shape',
         component: ListNoShapeShowcaseComponent,
       },
+      {
+        path: 'list-experimental',
+        component: ListExperimentalShowcaseComponent,
+        data: {
+          hide: true,
+        },
+      },
       {
         path: 'page',
         component: PageShowcaseComponent,

libs/core/src/scss/_global-styles.scss

@@ -4,7 +4,7 @@
 @use 'base/ionic';
 @use 'base/typography';
 @use 'base/line-clamp';
-@use 'base/list';
+@use 'base/html-list';
 
 :root,
 :host {

libs/core/src/scss/base/_html-list.scss

@@ -0,0 +1,11 @@
+ul,
+ol {
+  margin-inline-start: 0.25em;
+  padding-inline-start: 1em;
+  line-height: 1.5;
+}
+
+li li,
+li + li {
+  margin-block-start: 0.5em;
+}