Add list element feature [Fixes #772] #1720

danieldaeschle · 2018-03-12T12:55:41Z

This is a new feature.
How to update the docs/changelog?

Proposed solution

It adds a list element which was missing of the most of users

Testing Done

I checked in browser how it looks

Log1x · 2018-03-12T18:28:10Z

You forgot to remove list.sass from elements when you changed it to a component.

Otherwise, looks good to me.

danieldaeschle · 2018-03-12T18:31:50Z

Updated.

jgthms

Great first PR! You followed the guidelines. Some changes required though.

jgthms · 2018-03-12T23:14:46Z

sass/components/list.sass

+  background-color: $list-background-color
+  border: $list-border
+  border-radius: $list-radius
+  .list-item


I wouldn't nest this under .list.

where then?

jgthms · 2018-03-12T23:15:56Z

sass/components/list.sass

+  border: $list-border
+  border-radius: $list-radius
+  .list-item
+    color: black


Use color: $list-item-color and set the default value to $text.

oh yes, my fault :O

jgthms · 2018-03-12T23:16:08Z

sass/components/list.sass

+  border-radius: $list-radius
+  .list-item
+    color: black
+    cursor: default


Remove this.

jgthms · 2018-03-12T23:16:13Z

sass/components/list.sass

+  .list-item
+    color: black
+    cursor: default
+    display: flex


Remove this.

without display: flex

jgthms · 2018-03-12T23:16:17Z

sass/components/list.sass

+    color: black
+    cursor: default
+    display: flex
+    justify-content: flex-start


Remove this.

jgthms · 2018-03-12T23:16:34Z

sass/components/list.sass

+    cursor: default
+    display: flex
+    justify-content: flex-start
+    padding: 8px 16px


Use padding: 0.5em 1em

i didn't understand em and rem until today xD

jgthms · 2018-03-12T23:18:49Z

sass/components/list.sass

+    padding: 8px 16px
+    &:not(:last-child)
+      border-bottom: $list-item-border
+  & .is-hoverable:hover


I like this idea. But the syntax is &.is-hoverable:hover (without the space) and should be nested under .list-item.

Also, can you add a &.is-active state?

which color should it have? i tried to give it primary but then the text color is still black

danieldaeschle

Some more improvements?

danieldaeschle · 2018-03-13T08:14:54Z

sass/components/list.sass

+  .list-item
+    color: black
+    cursor: default
+    display: flex


without display: flex

danieldaeschle · 2018-03-13T08:18:05Z

sass/components/list.sass

+    padding: 8px 16px
+    &:not(:last-child)
+      border-bottom: $list-item-border
+  & .is-hoverable:hover


which color should it have? i tried to give it primary but then the text color is still black

KKSzymanowski · 2018-03-13T10:24:03Z

With the current implementation card appears to be slightly wider then the list because of border instead of box shadow. Switching to box shadow fixes this and, in my opinion, gives a nicer feel to it:

.list
  background-color: $list-background-color
- border: $list-border
+ box-shadow: $card-shadow
  border-radius: $list-radius
  &.is-hoverable > .list-item:hover:not(.is-active)
    background-color: $list-item-hover-color
    cursor: pointer

KKSzymanowski · 2018-03-13T10:39:45Z

Also, one of my use-cases for this list would be either a key value list or a list of labels and icons:

<div class="list">
    <div class="list-item">
        <div class="level">
            <div class="level-left">
                First
            </div>
            <div class="level-right">
                <i class="fa fa-check fa-fw"></i>
            </div>
        </div>
    </div>
</div>

But because of the display: flex on the .list-item the level element doesn't fill the entire width:

What would be the workaround for that?

danieldaeschle · 2018-03-13T10:43:42Z

eventually display: block is the solution? :)

KKSzymanowski · 2018-03-13T10:45:51Z

Yeah, that's how I did it for the screenshot, but I thought the flex display was there for a reason.

danieldaeschle · 2018-03-13T11:57:58Z

What does @jgthms think about the border?

jgthms · 2018-03-13T21:21:28Z

The shadow is a good shout. Let’s put that instead of the border.

KKSzymanowski · 2018-03-14T08:43:06Z

I haven't noticed this before but left padding is not consistent with the card.

Wouldn't it be better to change the list item padding to 0.75 and switch em to rem?

danieldaeschle · 2018-03-14T08:49:57Z

padding: 0.5rem 0.75rem then? or padding: 0.5em 0.75rem ? what is the different?

KKSzymanowski · 2018-03-14T09:01:14Z

In my opinion padding: 0.5rem 0.75rem (or even padding: 0.375rem 0.75rem).

what is the different?

em refers to the subject's font size whereas rem refers to the root(<html>) font size.

jgthms · 2018-03-14T11:17:36Z

sass/components/list.sass

+.list-item
+  color: $list-item-color
+  display: block
+  padding: 0.375rem 0.75rem


You need padding: 0.5em 1em here.

@jgthms Why is the 0.5em 1em padding better than 0.375rem 0.75rem?

Uses emso it's proportional to the list's font size, and just looks better.

I get the second part, but don't understand how do you decide whether to use rem or em.
For vertical margins(level, card, panel) you tend to use rem but sometimes(form label) you use em.
For horizontal margins you tend to use em but sometimes(tags) you use rem.
Similarly for paddings.
What's your rule of thumb when it comes to these units?

I feel like I'm being annoying but I just want to understand your train of though.

Margin is between elements, hence a common denominator like rem. Padding is within an element and the visual balance is assured when everything is proportional to the font size hence em.

Button padding is em. Same for form controls.

jgthms · 2018-03-14T11:19:16Z

sass/components/list.sass

+
+$list-item-border: 1px solid $border !default
+$list-item-color: $text !default
+$list-item-active-color: $primary !default


$list-item-active-background-color: $link !default

jgthms · 2018-03-14T11:19:28Z

sass/components/list.sass

+$list-item-border: 1px solid $border !default
+$list-item-color: $text !default
+$list-item-active-color: $primary !default
+$list-item-active-text-color: $white !default


$list-item-active-color: $link-invert !default

jgthms · 2018-03-14T11:20:08Z

sass/components/list.sass

+$list-item-color: $text !default
+$list-item-active-color: $primary !default
+$list-item-active-text-color: $white !default
+$list-item-hover-color: $background !default


$list-item-hover-background-color: $background !default

danieldaeschle · 2018-03-16T09:41:19Z

Ready to merge?

jgthms · 2018-03-16T09:57:56Z

sass/components/list.sass

+
+.list
+  background-color: $list-background-color
+  box-shadow: $card-shadow


Don’t reference a variable from another file. Create a new one.

danieldaeschle · 2018-03-16T21:03:26Z

Feedback?

danieldaeschle · 2018-03-21T10:46:41Z

push

HDVinnie · 2018-04-18T19:41:10Z

Any update? Will this be merged?

augustinbegue · 2018-08-16T19:29:09Z

Any updates ? I think this feature would be very usefull

frederikhors · 2018-10-01T13:18:54Z

@jgthms can you please merge? Is there another collaborator who can do it for you?

frederikhors · 2018-10-01T13:19:46Z

@danieldaeschle can you update docs?

danieldaeschle · 2018-10-01T13:26:30Z

My english is notj good enough to write fancy docs. i can do it but now yet and only if @jgthms says he will merge it then.

KKSzymanowski · 2018-10-01T13:28:20Z

Do what you can and tag us, we'll help you out.

danieldaeschle · 2018-10-01T13:29:51Z

Thanks, but I'm waiting for confirmation from @jgthms

danieldaeschle · 2018-10-02T07:39:25Z

Wow, thanks :)

jgthms · 2018-10-02T07:41:06Z

No, thank you! 😉

frederikhors · 2018-10-02T11:27:22Z

@danieldaeschle any docs? How to use? With english we can help.

KKSzymanowski · 2018-10-02T11:36:38Z

@frederikhors Not much to it:

<div class="list">
    <div class="list-item">First</div>
    <div class="list-item is-active">Second</div>
    <div class="list-item">Third</div>
</div>

If you want the items behaving like links:

<div class="list is-hoverable">
    <div class="list-item">First</div>
    <div class="list-item is-active">Second</div>
    <div class="list-item">Third</div>
</div>

nandordudas · 2018-11-30T18:07:14Z

Link of list is missing at components, i try with url and it works.
https://bulma.io/documentation/components/list/

danieldaeschle added 2 commits March 12, 2018 13:43

Add list element feature

03feac5

Move list from elements to components

4a216bc

danieldaeschle mentioned this pull request Mar 12, 2018

[Feature request] List group #772

Closed

Remove list.sass from elements

e1c0217

jgthms requested changes Mar 12, 2018

View reviewed changes

Add is-active to list, Move list-item out of list, Change some things

7d7e4e4

danieldaeschle commented Mar 13, 2018

View reviewed changes

danieldaeschle changed the title ~~Add list element feature Fixes #772~~ Add list element feature [Fixes #772] Mar 13, 2018

Change display: flex to block

ea389a9

Change padding and border to shadow

d3c4c1f

jgthms requested changes Mar 14, 2018

View reviewed changes

danieldaeschle added 2 commits March 15, 2018 08:34

Change variable names and padding

d078aef

Fix undefined variable bug

7d1f782

jgthms requested changes Mar 16, 2018

View reviewed changes

Change reference variable to local variable

703057e

jgthms approved these changes Oct 2, 2018

View reviewed changes

jgthms merged commit e6e4a5a into jgthms:master Oct 2, 2018

BobWalsh mentioned this pull request Dec 9, 2018

Are Bulma Lists usable? #2276

Closed

snyk-bot mentioned this pull request Aug 13, 2019

[Snyk] Upgrade bulma from 0.6.2 to 0.7.5 devopsred/gaia#6

Open

snyk-bot mentioned this pull request Feb 20, 2020

[Snyk] Upgrade bulma from 0.7.2 to 0.8.0 tghelere/valorize-vidas#6

Merged

snyk-bot mentioned this pull request Apr 5, 2020

[Snyk] Upgrade bulma from 0.5.1 to 0.8.0 anikets43/angular-ngrx-socket-frontend#4

Open

snyk-bot mentioned this pull request Apr 15, 2020

[Snyk] Upgrade bulma from 0.7.2 to 0.8.1 mc-ireiser/heroes-vue-node-api#5

Open

snyk-bot mentioned this pull request Apr 22, 2020

[Snyk] Upgrade bulma from 0.6.1 to 0.8.1 jwlh/WDI_GROUP_PROJECT#2

Open

Add list element feature [Fixes #772] #1720

Add list element feature [Fixes #772] #1720

Conversation

danieldaeschle commented Mar 12, 2018

Proposed solution

Testing Done

Log1x commented Mar 12, 2018

danieldaeschle commented Mar 12, 2018

jgthms left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danieldaeschle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KKSzymanowski commented Mar 13, 2018

KKSzymanowski commented Mar 13, 2018

danieldaeschle commented Mar 13, 2018

KKSzymanowski commented Mar 13, 2018

danieldaeschle commented Mar 13, 2018

jgthms commented Mar 13, 2018

KKSzymanowski commented Mar 14, 2018

danieldaeschle commented Mar 14, 2018

KKSzymanowski commented Mar 14, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danieldaeschle commented Mar 16, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danieldaeschle commented Mar 16, 2018

danieldaeschle commented Mar 21, 2018

HDVinnie commented Apr 18, 2018

augustinbegue commented Aug 16, 2018

frederikhors commented Oct 1, 2018

frederikhors commented Oct 1, 2018

danieldaeschle commented Oct 1, 2018

KKSzymanowski commented Oct 1, 2018

danieldaeschle commented Oct 1, 2018

danieldaeschle commented Oct 2, 2018

jgthms commented Oct 2, 2018

frederikhors commented Oct 2, 2018

KKSzymanowski commented Oct 2, 2018

nandordudas commented Nov 30, 2018