Component requests

[mrmrs]

Opening this issue for people to add components they'd like to see added to the component library. Trying to gauge where people need the most help. Please respond below (visual examples are helpful).

[charliewilco]

a search component

like the one on github or facebook.

[levibostian]

Modals.

[joshy]

• Sidebar (collapsed on mobile, visible on large screens), example would be https://blackrockdigital.github.io/startbootstrap-simple-sidebar/
• Paging (http://v4-alpha.getbootstrap.com/components/pagination/)
• Two column form layout (maybe more than two columns)
• Tooltip (don't know if a pure css solution is possible), example http://cssdeck.com/labs/pure-css-tooltip-with-arrow

[sebastienbarre]

While this is probably a lot more work, a screenshot of each component on the components page would be very helpful. For quick access.

[sebastienbarre]

Bumped into these components today on Use Kanban:

Below is my take on it (with random HTML entities for icons), please feel free to fix :)

And here is the Codepen

• Tachyons doesn't have the same green (then again I'm colorblind)
• I used <small> for the percentage label because f6 is too big (a new f7 would be nice).

  <section class="avenir w-100 pa2">
    <article class="fl w-100 w-third-ns pa2">
      <div class="w-100 truncate dt dt--fixed">
        <div class="dtc v-mid tc h2 w2 bg-red white br1 f3">&ccupssm;</div>
        <div class="dtc v-mid pl2 f4 f5-m fw5 near-black truncate">Mobile App for Airbnb</div>
      </div>
      <div class="bg-red white w-100 mt3 pa3">
        <div class="w-100 pb1 bb b--white-50  inline-flex items-center justify-between">
          <div class="ttu f6 fw2">Tasks</div>
          <small>&#x279C;</small>
        </div>
        <div class="pt3 f2 f2-m fw5">8/42</div>
        <div class="pt2 w-100 dt dt--fixed">
          <div class="dtc h1 red bg-white br1 br--left tc" style="width: 19%"><small>19%</small></div>
          <div class="dtc h1 bg-white o-30 br1 br--right"></div>
        </div>
        <div class="pt2 o-80 truncate"><small>+3% since last week</small></div>
      </div>
    </article>
    <article class="fl w-100 w-third-ns pa2">
      <div class="w-100 truncate dt dt--fixed">
        <div class="dtc v-mid tc h2 w2 bg-blue white br1 f3">&andand;</div>
        <div class="dtc v-mid pl2 f4 f5-m fw5 near-black truncate">Redesign our website</div>
      </div>
      <div class="bg-gold white w-100 mt3 pa3">
        <div class="w-100 pb1 bb b--white-50  inline-flex items-center justify-between">
          <div class="ttu f6 fw2">Tasks</div>
          <small>&#x279C;</small>
        </div>
        <div class="pt3 f2 fw5">59/98</div>
        <div class="pt2 w-100 dt dt--fixed">
          <div class="dtc h1 gold bg-white br1 br--left tc" style="width: 60%"><small>60%</small></div>
          <div class="dtc h1 bg-white o-30 br1 br--right"></div>
        </div>
        <div class="pt2 o-80 truncate"><small>+11% since last week</small></div>
      </div>
    </article>
    <article class="fl w-100 w-third-ns pa2">
      <div class="w-100 truncate dt dt--fixed">
        <div class="dtc v-mid tc h2 w2 bg-black white br1 f3">&cupbrcap;</div>
        <div class="dtc v-mid pl2 f4 f5-m fw5 near-black truncate">Bot for Nike</div>
      </div>
      <div class="bg-green white w-100 mt3 pa3">
        <div class="w-100 pb1 bb b--white-50  inline-flex items-center justify-between">
          <div class="ttu f6 fw2">Tasks</div>
          <small>&#x279C;</small>
        </div>
        <div class="pt3 f2 fw5">315/398</div>
        <div class="pt2 w-100 dt dt--fixed">
          <div class="dtc h1 green bg-white br1 br--left tc" style="width: 79%"><small>79%</small></div>
          <div class="dtc h1 bg-white o-30 br1 br--right"></div>
        </div>
        <div class="pt2 o-80 truncate"><small>+27% since last week</small></div>
      </div>
    </article>
  </section>

[edhenderson]

Maybe a min/max range slider?

[three60five]

I am inspired by your work. Thanks for being a thoughtful open source contributor.

I'd like to see:

• button groups http://v4-alpha.getbootstrap.com/components/button-group/#basic-example
• input groups http://v4-alpha.getbootstrap.com/components/input-group/#basic-example
• alerts/messaging http://v4-alpha.getbootstrap.com/components/alerts/

I'd also be curious to hear your thoughts on components like dropdown buttons and tooltips/popovers and if they have a place in a library like Tachyons.

[sebastienbarre]

As seen on Hierarchy view component with pure CSS (SASS) – Medium

[sebastienbarre]

Step Sequence, as seen in this CodePen

[sebastienbarre]

An office example of a corner ribbon would be nice. Turns out there is already one for grabs in the gallery :)

[sebastienbarre]

One new category that could be popular is "Dashboard". Now many dashboard components involve charts, but I'm sure some could be done with Tachyons only (gauges, "widgets", progress cards, etc).

See my recent Codepen)

or:

or:

[YerkoPalma]

I would like to see some material design components written with tachyons. Maybe the buttons or cards are a good place to start

[jikkujose]

A system for overlay elements that can be used for:

• Tooltips
• Modals
• DropDowns