list-item.md

List Item

Originally the structure of the list items was made up (in my mind) of a ListItemContainer, ListItemTemplate and the ListItem encapsulation of both of those. However, after looking at how HDS implements their components we've had a bit of a change in direction that we wanted to share and discuss.

The list item is a generic component, which won't always be the case for component inside the toolkit. The <Cut::ListItem /> will be the container li itself and the container for all the content. It will handle options for how interacting with the entire list item will behave (switch routes, call a function, do nothing) and will represent the states of the li accordingly. It also houses a slot for generic content, allowing anyone to fill that area with whatever they would like. On top of that it will have a slot for actions that will be separate from the main clickable area of the list item to avoid buttons inside of buttons, or buttons inside of anchors, etc.

---

Example implementation with no actions

<Cut::ListItem @route='my-favourite-route/12' as |L|>
  <L.Content>Content Placeholder</L.Content>
</Cut::ListItem>

Example implementation with dropdown menu

<Cut::ListItem {{on 'click' this.myFavouriteAction}} as |L|>
  <L.Content>Content Placeholder</L.Content>
  <L.Action as |A|>
    <A.Menu ... />
    ...
  </L.Action> 
</Cut::ListItem>

Example implementation with button action

<Cut::ListItem @route='my-favourite-route/12' as |L|>
  <L.Content>Content Placeholder</L.Content>
  <L.Action as |A|>
    <A.Button @text="button" @color="primary" {{on 'click' (fn this.myfavouriteaction item)}} />
  </L.Action>
</Cut::ListItem>

Maybe you could also handle generic actions (yielding in the action slot)

<Cut::ListItem @route='my-favourite-route/12' as |L|>
  <L.Content>Content Placeholder</L.Content>
  <L.Action as |A|>
    <A.Generic>
      my beautiful action content goes here
    </A.Generic>
  </L.Action>
</Cut::ListItem>

List Template

We plan to have a generic list template that we can use for the different type of list item content we have throughout Consul. I don't have a strong definition of what this will look like right now from a code point of view but I wanted to share it for context.

<Cut::ListItem as |A|>
  <A.Content>
    <Cut::ListItem::Template @data={{mybeautifuldata}} />
  </A.Content>
  <A.Action />
</Cut::ListItem>

// or maybe something like

<Cut::ListItem as |A|>
  <A.Content>
    <Cut::ListItem::Template as |L|>
      <L.Title>Wonderful Title</L.Title>
      <L.SubText>Great subtext</L.SubText>
      ...
    </Cut::ListItem::Template>
  </A.Content>
</Cut::ListItem>

After speaking with Valeriia & Cristiano, I like the idea of exposing the template as a yielded component on the List Item. Something like the following, but Valeriia will be diving into what this will look like later this sprint:

<Cut::ListItem as |L|>
  <L.ConsulContent as |C|>
  <L.ConsulContent>
  // or 
  <L.ConsulContent />
  
  <A.Action as |A|>
    <A.Button />
  </A.Action>
</Cut::ListItem>

Encapsulating specific implementations

We are considering abstracting the different implementations of the ListItem and related template behind very specific components to make them as easy to use as possible. This might feel weird from a component library point of view, but it is also important to remember that this is meant to be a library of very specific components to Consul. That being said, we haven't 100% settled on this idea and are open to discussion about it!

// This would set up the list item like above
<Cut::ListItem::Service @service={{service}} @type='shoopdawhoop' ... />

List item template is a wrapper component for Label components. It might have one or two Labels inside, and might have Icon or Badge as connection element.
Metadata and title of Label component might be any elements. Common use-cases have Hds::Badge and regular text with icon elements. We're adding Cut::TextWithIcon component to cover the cases for regular text with icon and ending with slash(optional).

  <Cut::ListItem as |L|>
    <L.Content>
      <Cut::ListItem::Template as |T|>
        <T.Label as |LB|>
          <LB.Title>consul-da-server-client-development</LB.Title>
          <LB.Metadata>
            <Cut::TextWithIcon @icon="users" @text="billing" @connection="/"/>
            <Cut::TextWithIcon @icon="folder" @text="default"/>
          </LB.Metadata>
        </T.Label>
        <T.Badge @text="Allow" @color="success" @icon="arrow-right" @size="small"/>
        <T.Label2 as |LB|>
          <LB.Title>consul-da-server-client-development</LB.Title>
          <LB.Metadata>
            <Cut::TextWithIcon @icon="users" @text="billing" @connection="/"/>
            <Cut::TextWithIcon @icon="folder" @text="default"/>
          </LB.Metadata>
        </T.Label2>
      </Cut::ListItem::Template>
    </L.Content>
  </Cut::ListItem>

  <Cut::ListItem as |L|>
    <L.Content>
      <Cut::ListItem::Template as |T|>
        <T.Label as |LB|>
          <LB.Title>Exposed-path-name</LB.Title>
          <LB.Metadata>
            <Cut::TextWithIcon @text="grpc" @icon="globe"/>
            <Cut::TextWithIcon @text="listening on :63891" @icon="network"/>
            <Cut::TextWithIcon @text="/expeditabandwidth_overriding_berkshire.xif" @icon="path"/>
          </LB.Metadata>
        </T.Label>
      </Cut::ListItem::Template>
    </L.Content>
  </Cut::ListItem>