Pluralisation of components with a relation to each other

[gfellerph]

What's your prefered way of naming components with a parent/child relationship?

1. Pluralisation with s

<post-breadcrumbs>
  <post-breadcrumb></post-breadcrumb>
</post-breadcrumbs>

• Is correct from a literary standpoint
• Has consistency issues with uncountable nouns (milks -> milk)

2. Appending -item to child items

<post-breadcrumb>
  <post-breadcrumb-item></post-breadcrumb-item>
</post-breadcrumb>

• Might seem awkward for some nouns (breadcrumb is one single breadcrumb, but displayed is a list of crumbs)
• Better consistency with uncountable nouns (milk -> milk-item)

3. Pluralisation with s and appending -item to child items

<post-breadcrumbs>
  <post-breadcrumbs-item></post-breadcrumbs-item>
</post-breadcrumbs>

• Is literarily correct for the wrapper, but not necessarily so for the child item

[alizedebray]

@gfellerph If we think about other components, there is also the possibility to use -group:

<post-avatar-group>
  <post-avatar></post-avatar>
</post-avatar-group>

<post-tab-group>
  <post-tab></post-tab>
  <post-tab-panel></post-tab-panel>
</post-tab-group>

[gfellerph]

To me, this would indicate that a <post-tab> can be used standalone which is the case for <post-avatar>, where <post-avatar-group> cannot be used standalone. Maybe we can conclude that [namespace]-[component] is something that can be used standalone, [namespace]-[component]-[subcomponent] is something tied to a specific set of components.

If we were to apply this scheme to the tabs, we'd end up with:

<post-tabgroup>
  <post-tabgroup-header></post-tabgroup-header>
  <post-tabgroup-panel></post-tabgroup-panel>
</post-tabgroup>

This does not look really intuitive. I think I'd prefer <post-tabs> in this case.

<!-- collection -->
<post-tabs>
  <!-- singleton -->
  <post-tabs-header></post-tabs-header>
  <post-tabs-panel></post-tabs-panel>
</post-tabs>

Guidelines could look something like:

• Can the component be used standalone?
  • Yes -> use [namespace]-[component] naming scheme
  • No -> use [namespace]-[component]-[subcomponent] naming scheme
• Can the collection be used standalone?
  • Yes -> use s pluralisation (if the noun is uncountable, we could go for <post-data><post-data-item>)
  • No -> use -group pluralisation

[oliverschuerch]

I was reading again the rest endpoint naming conventions, especially the sections "1.1" and "1.2".
Therefore I think to do both - pluralisation with "s" (where it makes sence, e.g. post-tabs, etc. but not for post-header, etc.) and add "-item" for child items - is the best way to keep consistency and I like the ideology of uplifting naming, as it not only emphasises dependency but also hierarchy.

Example:

<!-- singleton -->
<post-dropdown>
  <post-dropdown-item>
      <post-dropdown-item-button></post-dropdown-item-button>
      <post-dropdown-item-text></post-dropdown-item-text>
  </post-dropdown-item>
  <post-dropdown-divider />
  <post-dropdown-item></post-dropdown-item>
</post-dropdown>

<!-- singleton -->
<post-user>
  <post-user-avatar></post-user-avatar>
</post-user>

<!-- singleton -->
<post-pagination>
  <post-pagination-prev-button></post-pagination-prev-button>
  <!-- collection -->
  <post-pagination-items>
    <post-pagination-items-link></post-pagination-items-link>
    <post-pagination-items-link></post-pagination-items-link>
  <post-pagination-items>
  <post-pagination-next-button></post-pagination-next-button>
</post-pagination>

<!-- collection -->
<post-tabs>
  <!-- singleton -->
  <post-tabs-header></post-tabs-header>
  <post-tabs-panel></post-tabs-panel>
</post-tabs>