Chips

[SiravitPhokeed]

Features:

• Chip
  • States
  • Unselected
  • Selected
  • Appearances
  • Outlined
  • Elevated
  • Children variants
  • Has Icons
  • Has Leading Icon
  • Has Trailing Icon
  • Has Avatar
  • Has Avatar and Icon
• Chip List
  • Regular
  • Radio
• “Sora” is the new display font for Latin glyphs
• Chip List support for X Scroll Content

Fixes:

• State layer hover in Has Action utils shouldn’t transition
• Input width can’t be modified
• Icon Button has too little padding
• Outlined Button is larger than Filled Button
• Button with Icon should have different padding

Refs: Fixes #22, fixes #23, fixes #25, fixes #26

---

Note to reviewer(s):

• I’d like some thoughts on the new display font “Sora”.
• The following code is used to create the banner photo of this pull request, for you to also review this with your eyeballs, if you’d like.

  
  <div class="x-scroll-content">
  <div class="x-scroll-content__content">
  <div class="chip-list--no-wrap">
    <button class="chip">News</button>
    <button class="chip--has-leading-icon selected">
      <div class="chip__icon">
        <i class="icon icon--custom-size">done</i>
      </div>
      <span>Forms</span>
    </button>
    <button class="chip">Payments</button>
    <div class="chip-list--radio">
      <button class="chip">Few done</button>
      <button class="chip">Most done</button>
      <button class="chip--has-leading-icon selected">
        <div class="chip__icon">
          <i class="icon icon--custom-size">done</i>
        </div>
        <span>All done</span>
      </button>
    </div>
  </div>
  </div>
  </div>

Elevated

Sadudee

close