1163921 - [gaia-list] Avoid to qualify class rules with tag names for the element inside list

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia::Components, defect)

Description

[Steve Chung [:steveck]]

In the current gaia-list structure, the tag name was used widely and we'll need to follow the structure with specific tags. But it's not a flexible way to build up the list component if user prefer to apply other type of tag, or user want to apply the same tag with different semantic. We need to apply a strict semantic class name instead of tag name for flexibility and maintenance.

Comment 1

[[e-mail]]

and all list item should be wrap within <li> element (bug 1162419). 

To aggregate current usage, I like to propose the following classes:


```
<gaia-list>
  <li>
    <h3 class="gaia-item"></h3>
    <small class="gaia-item-desc">Disabled</small>
    <small class="gaia-item-detail">Disabled</small>
    <span class="gaia-item-end circular"></span>
  </li>
</gaia-list>
```

explain:

.gaia-item: main item header

.gaia-item-desc: description

.gaia-item-detail: second line of description (email)

.gaia-item-end: naming follows RTL `-moz-padding-end` to denote the element should be put on another side.

modifier:

.circular: apply with gaia-item-end to turn the element to circle. (contacts)

Comment 2

[[e-mail]]

Update from above proposal

<gaia-list>
  <li>
    <a class="gaia-item data-icon="airplane" action="settings" data-href="#hashtag">
    <span class="gaia-item-title">Menu</span>
    <span class="gaia-item-desc">Disabled</span>
    </a>
  </li>
</gaia-list>

explain: (add icon automatically as attribute)

* .gaia-item: item with special actions

* .gaia-item-title: main item header

* .gaia-item-desc: description

* .gaia-item-end: naming follows RTL `-moz-padding-end` to denote the element should be put on another side.


gaia-item modifier:

* data-icon="airplane" : Show icon before the list item

* action="next"(next|link) : (if 'next') Show chevron at the end of the list item

* data-href="#hashtag" : define the data required for action


gaia-item-end modifier:

* .circular: apply with gaia-item-end to turn the element to circle. (contacts)



Now .gaia-item-title & .gaia-item-desc is implemented in PR for bug 1162419

Comment 3

[[e-mail]]

Attachment: pull request redirect to github

partial class based declaration support:

.gaia-item-title == h1~h4
.gaia-item-desc == p, small

Comment 4

[Wilson Page [:wilsonpage]]

Comment on attachment 8615872 [details] [review]
pull request redirect to github

LANDED https://github.com/gaia-components/gaia-list/commit/b666c2f39ef2383102d9ba242a1b9d4a3d55eb51

---

Example page needs some polish, spacing looks a bit off. But let's not block on that :)

Comment 5

[BMO Automation]

Firefox OS is not being worked on