[BUG] Items inside kirby-list with "shape=none" has box shadow cut off

[hjorte-bd]

• [x] I have written a good issue

Describe the bug

When using the <kirby-list shape="none"> component, children inside will be wrapped in a ´kirby-list-item´ and ´ion-item-sliding´. These two wrapper elements has overflow: hidden on, which will prevent effects like box-shadow to render properly outside those wrapper items.

Describe how to reproduce the bug

1. Create a kirby list component
2. Put one or more kirby-cards inside
3. Box shadow from the card component, should be cut-off

(The "List No Shape" example, in the cookbook, shows off the issue)

Which Kirby version was used?

6.3.1

What was the expected behavior?

At least the box-shadow should expand outside the box edges (see screenshot below)

Add any screenshots

What happens: (Box shadow has color changed to pink for demonstrative purposes)

How it looks with overflow: hidden on both wrapper elements:

Please complete the following information:

• OS: MacOS 12.5
• Browser: Chrome, Edge, Safari
• Browser version: 104, 104, 15,6

Are there any additional context?

No

---

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Verification

To make sure the bug is not intended behaviour; it should be verified by a member of team Kirby before moving on to implementation.

• [ ] Make sure the NOT verified label has been removed by a member of team Kirby; do not proceed until this is done

Implementation

The contributor who wants to implement this issue should:

• [ ] Make sure you have read: "Before you get coding".
• [ ] Signal to others you are working on the issue by assigning yourself.
• [ ] Create a branch from the develop branch following our branch naming convention.
• [ ] Create a test that reproduces the bug following guidelines in: "The good: Test".
• [ ] Write code to fix the bug

Review

Once the issue has been implemented and is ready for review:

• [ ] Do a self-review.
• [ ] Create a pull-request.

[hjorte-bd]

To fix, libs/designsystem/src/lib/components/list/list-item/list-item.component.scss simply need to be changed to:

@use '~@kirbydesign/core/src/scss/utils';

$divider-color: utils.get-color('background-color');

ion-item-sliding {
  overflow: visible;
}

:host-context(.has-divider) {
  ion-item-sliding:not(.last) {
    border-bottom: 1px solid $divider-color;
  }
}