Add rounded corners and shadow to list #2029

RasmusKjeldgaard · 2022-02-02T11:10:19Z

Which issue does this PR close?

This PR closes #1814

What is the new behavior?

The list experimental component has been changed, so content is now projected into a list-content wrapper, that has rounded corners and shadow. This way, we do not need very specific styling rules for rounding the corners of the first and last item in the list, which has proven to be error-prone. Now, it is simply the container (the list) that is responsible for this styling.

To simplify the list a great deal, there is no longer the concept of nested sections within the list. Instead, multiple lists should just be added one after another, optionally using the section-header component for dividing the lists with headers.

To document these changes, the showcase for the list in general had to be created, so this PR also contains some unrelated showcase code.

Note: The ion-list component was not used for anything in this regard, and has therefore been refactored to use a <section> instead. Later, if the ion-list specific code is needed, it can be added back with very little work, if any.

Does this PR introduce a breaking change?

Yes
No

Checklist:

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

Reminders

Make sure you have implemented tests following the guidelines in: "The good: Test".
Make sure you have updated the cookbook with examples and showcases (for bug fixes, enhancements & new components).

Review

Do a self-review.
Request that the changes are code-reviewed
Request that the changes are UX reviewed (only necessary if your PR introduces visual changes)

When the pull request has been approved it will be automatically merged to master via automerge.

jkaltoft

Good work! 💪🏻

In addition to the code comments I have a question/suggestion/request/wet dream/topic for discussion:

Can we use "proper" markup for lists? Is it possible to make kirby components for lists use e.g. <ul> and <li> under the hood?

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

libs/core/src/scss/base/_functions.scss

libs/designsystem/src/lib/components/list/list-experimental/list-experimental.component.html

libs/designsystem/src/lib/components/list/list-experimental/list-experimental.component.scss

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

RasmusKjeldgaard · 2022-02-03T11:13:18Z

Can we use "proper" markup for lists? Is it possible to make kirby components for lists use e.g. <ul> and <li> under the hood?

Would be great, but that would be a major overhaul - and seems to be well out of scope of this issue. The list could be refactored to utilize <ol> or <ul>, but then what about the item components markup? I do not think it trivial to refactor that to use <li>. We know for sure that the requesting teams want to be able to use the existing item-functionality in the list.

jkaltoft · 2022-02-07T09:40:51Z

Can we use "proper" markup for lists? Is it possible to make kirby components for lists use e.g. <ul> and <li> under the hood?

Would be great, but that would be a major overhaul - and seems to be well out of scope of this issue. The list could be refactored to utilize <ol> or <ul>, but then what about the item components markup? I do not think it trivial to refactor that to use <li>. We know for sure that the requesting teams want to be able to use the existing item-functionality in the list.

One is allowed to dream... 😁

jkaltoft

A final (short) discussion about globally available "CSS classes" and we're good to go 🚀

libs/core/src/scss/base/_list.scss

jkaltoft · 2022-02-07T13:19:19Z

Final question: Is main the branch you want to target?

Ion-list was not used for any specfic reason, and did not add any necessary functionality, so it has been exchanged for a section for now.

Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk>

* Only redraw chart if its rendered (#2017) * Only redraw chart if its rendered * ♻️ Spy on 'updateLabels' instead of 'updateDataLabels' updateDataLabels was renamed to updateLabels in PR #1989. * Updated chart property name & tests Co-authored-by: Tobias Secher <bdytos@bankdata.dk> Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * ⬆️ Bump follow-redirects from 1.13.3 to 1.14.7 (#1994) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.13.3 to 1.14.7. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](follow-redirects/follow-redirects@v1.13.3...v1.14.7) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: RasmusKjeldgaard <rkk@bankdata.dk> * ⬆️ Bump log4js from 6.3.0 to 6.4.0 (#2004) Bumps [log4js](https://github.com/log4js-node/log4js-node) from 6.3.0 to 6.4.0. - [Release notes](https://github.com/log4js-node/log4js-node/releases) - [Changelog](https://github.com/log4js-node/log4js-node/blob/master/CHANGELOG.md) - [Commits](log4js-node/log4js-node@v6.3.0...v6.4.0) --- updated-dependencies: - dependency-name: log4js dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: RasmusKjeldgaard <rkk@bankdata.dk> * ⬆️ Bump nanoid from 3.1.22 to 3.2.0 (#2005) Bumps [nanoid](https://github.com/ai/nanoid) from 3.1.22 to 3.2.0. - [Release notes](https://github.com/ai/nanoid/releases) - [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md) - [Commits](ai/nanoid@3.1.22...3.2.0) --- updated-dependencies: - dependency-name: nanoid dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: RasmusKjeldgaard <rkk@bankdata.dk> * ⬆️ Bump ssri from 6.0.1 to 6.0.2 (#2027) Bumps [ssri](https://github.com/npm/ssri) from 6.0.1 to 6.0.2. - [Release notes](https://github.com/npm/ssri/releases) - [Changelog](https://github.com/npm/ssri/blob/v6.0.2/CHANGELOG.md) - [Commits](npm/ssri@v6.0.1...v6.0.2) --- updated-dependencies: - dependency-name: ssri dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: RasmusKjeldgaard <rkk@bankdata.dk> * 📝 Remove grid from navigation (#2023) This is to avoid new consumers of Kirby taking grid into use. Co-authored-by: RasmusKjeldgaard <rkk@bankdata.dk> * Add rounded corners and shadow to list (#2029) * 💄 Introduce mixins for shadow and rounded corners * 💄 Apply rounded corners and shadow to list * 📝 Create list-experimental showcase * 💄 Rework and rename mixins and global classes * 💄 Enable first/last item padding in list * 📝 Add examples for declarative list * 📝 Refactor examples for use in showcase * 📝 Correct attribute for section header examples * 📝 Add examples to showcase * ♻️ Use section instead of ion-list Ion-list was not used for any specfic reason, and did not add any necessary functionality, so it has been exchanged for a section for now. * 📝 Improve documentation * ♻️ Rename slot for header to be more generic * ✅ Add tests for list-experimental * ✅ Remove focus flag from list-experimental suite * ✅ Add tests for padding top and bottom on item * 📝 Use correct name for slot in showcase * 📝 Add headings to example * ✅ Remove focus flag from item test * 📝 Improve wording and structure of showcase * 📝 Add multiple sections description to showcase * ✅ Use ' instead of " in test * Combine width style props into one in example Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk> * 🐛 Fix scss style for list example * 💄 Move utility classes to own list scss module * 💄 Apply refactored style classes to list * ✅ Remove unnecessary wrapper div from list Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk> * Added inline style for kirby-modal-footer (#1982) * updated modal-footer component ts, scss and corresponding tests. Updated showcase component. * corrected test * rephrased description * Change type inline/fixed * removed f in fdescribe, refactor of hostbinding * 🔖Bumping version to 5.1.0 (designsystem) Co-authored-by: Tobias Secher <77673731+bdytos@users.noreply.github.com> Co-authored-by: Tobias Secher <bdytos@bankdata.dk> Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk> Co-authored-by: NikolajSkousen <85226992+NikolajSkousen@users.noreply.github.com>

RasmusKjeldgaard requested a review from jkaltoft February 2, 2022 11:10

github-actions bot temporarily deployed to pr-1814-border-and-shadow-declarative-list-2 February 2, 2022 11:17 Inactive

github-actions bot temporarily deployed to pr-1814-border-and-shadow-declarative-list-2 February 2, 2022 11:22 Inactive

jkaltoft requested changes Feb 3, 2022

View reviewed changes

jkaltoft requested changes Feb 7, 2022

View reviewed changes

libs/core/src/scss/base/_list.scss Show resolved Hide resolved

github-actions bot temporarily deployed to pr-1814-border-and-shadow-declarative-list-2 February 7, 2022 13:03 Inactive

jkaltoft previously approved these changes Feb 7, 2022

View reviewed changes

github-actions bot temporarily deployed to pr-1814-border-and-shadow-declarative-list-2 February 7, 2022 13:43 Inactive

RasmusKjeldgaard and others added 19 commits February 7, 2022 15:02

💄 Introduce mixins for shadow and rounded corners

0bf791b

💄 Apply rounded corners and shadow to list

4c554f7

📝 Create list-experimental showcase

ca32060

💄 Rework and rename mixins and global classes

c5fd2c6

💄 Enable first/last item padding in list

848212e

📝 Add examples for declarative list

1681fb0

📝 Refactor examples for use in showcase

7cc2062

📝 Correct attribute for section header examples

33fc6e4

📝 Add examples to showcase

3840d25

♻️ Use section instead of ion-list

aeeeb61

Ion-list was not used for any specfic reason, and did not add any necessary functionality, so it has been exchanged for a section for now.

📝 Improve documentation

2a83902

♻️ Rename slot for header to be more generic

7cde0cf

✅ Add tests for list-experimental

45ded82

✅ Remove focus flag from list-experimental suite

f60241b

✅ Add tests for padding top and bottom on item

6bf0582

📝 Use correct name for slot in showcase

7e0b563

📝 Add headings to example

5ab2752

✅ Remove focus flag from item test

d11fcb3

📝 Improve wording and structure of showcase

8c3bb5a

RasmusKjeldgaard and others added 7 commits February 7, 2022 15:02

📝 Add multiple sections description to showcase

8a513ce

✅ Use ' instead of " in test

11a69dd

Combine width style props into one in example

b22546c

Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk>

🐛 Fix scss style for list example

220bb67

💄 Move utility classes to own list scss module

54c02d1

💄 Apply refactored style classes to list

82389fd

✅ Remove unnecessary wrapper div from list

a56f150

RasmusKjeldgaard dismissed jkaltoft’s stale review via a56f150 February 7, 2022 14:02

RasmusKjeldgaard force-pushed the enhancement/1814-border-and-shadow-declarative-list-2 branch from b534786 to a56f150 Compare February 7, 2022 14:02

jkaltoft approved these changes Feb 7, 2022

View reviewed changes

RasmusKjeldgaard merged commit 2dc4cca into main Feb 8, 2022

RasmusKjeldgaard deleted the enhancement/1814-border-and-shadow-declarative-list-2 branch February 8, 2022 08:22

RasmusKjeldgaard mentioned this pull request Feb 14, 2022

Release version 5.1 #2048

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add rounded corners and shadow to list #2029

Add rounded corners and shadow to list #2029

RasmusKjeldgaard commented Feb 2, 2022 •

edited

Loading

jkaltoft left a comment

RasmusKjeldgaard commented Feb 3, 2022 •

edited

Loading

jkaltoft commented Feb 7, 2022

jkaltoft left a comment

jkaltoft commented Feb 7, 2022

Add rounded corners and shadow to list #2029

Add rounded corners and shadow to list #2029

Conversation

RasmusKjeldgaard commented Feb 2, 2022 • edited Loading

Which issue does this PR close?

What is the new behavior?

Does this PR introduce a breaking change?

Checklist:

Reminders

Review

jkaltoft left a comment

Choose a reason for hiding this comment

RasmusKjeldgaard commented Feb 3, 2022 • edited Loading

jkaltoft commented Feb 7, 2022

jkaltoft left a comment

Choose a reason for hiding this comment

jkaltoft commented Feb 7, 2022

RasmusKjeldgaard commented Feb 2, 2022 •

edited

Loading

RasmusKjeldgaard commented Feb 3, 2022 •

edited

Loading