[Enhancement] Item Start-slot doesn’t respect inner padding like default- and end-slot

bommariusser commented 2 years ago

Describe the enhancement

The padding top/bot of an item medium is normally 8, unless you put an element in start-slot that is higher then 40px. When you put an element like avatar-medium in the start slot it "eats" the padding

Skærmbillede 2021-12-10 kl 13 25 59

Describe the solution you'd like

The start-slot of an item should also respect the items padding (8)

Have you considered any alternatives?

Nope

Are there any additional context?

See screenshot above

Expected behavior should have more padding. see also:

Skærmbillede 2021-12-20 kl 08 36 54

Checklist:

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

Refinement

[ ] Request that the issue is UX refined; do not proceed until this is done.
[ ] Request that the issue is tech refined; 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 master branch following our branch naming convention.
[ ] Publish a WIP implementation to Github as a draft PR and ask for feedback.
[ ] Make sure you have implemented tests following the guidelines in: "The good: Test".
[ ] Update the cookbook with examples and showcases.

Review

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

[ ] Do a self-review.
[ ] Create a pull-request. If you created a draft PR during implementation you can just mark that as "ready for review".

RasmusKjeldgaard commented 2 years ago

This has to do with the fact that we use --inner-padding-top/bottom on the item. This means that any padding is only applied to the default slot. To target the whole item, we would have to use --padding-top/bottom, but first we need to investigate why this was changed at an earlier point: https://github.com/kirbydesign/designsystem/pull/847/files#diff-ed9293c163f05db6592b5d177a7f9219c243598ebf6ca951c438f59f8a8bf095L12-L13.

bommariusser commented 2 years ago

@RasmusKjeldgaard does end slot respect it? not sure it does :(

RasmusKjeldgaard commented 2 years ago

The end slot is inside the 'item-inner' element, that gets the padding, so it should actually respect it:

bommariusser commented 2 years ago

oki doki @RasmusKjeldgaard det kan godt være man så kan lave en snedig workaround på det :D jeg vender tilbage, tak <3

RasmusKjeldgaard commented 2 years ago

I think a workaround is to just give the avatar some padding on its own in this case, like so:

<kirby-item>
  <kirby-avatar themeColor="danger" size="md" slot="start" style="padding-top: 8px; padding-bottom: 8px">
    <kirby-icon name="kirby"></kirby-icon>
  </kirby-avatar>
  <kirby-label>
    <h3>Title</h3>
    <p detail>Detail</p>
  </kirby-label>
  <kirby-label slot="end">
    <data>Value</data>
    <data detail>Detail</data>
  </kirby-label>
</kirby-item>

kirbydesign / designsystem