search

indiana-university / rivet-icons

Icons for Indiana University's Rivet Design System
https://rivet.iu.edu/icons-stickers/
BSD 3-Clause "New" or "Revised" License
5 stars 6 forks source link

Proposal: Vertical ellipsis #19

Closed basham closed 5 years ago

basham commented 5 years ago

I'm working on AdRx Action Items. For any given Action Item in a results list, we are including a button that will trigger a dropdown menu, which will list a variety of options.

Vertical ellipsis icon used within dropdown menu buttons in AdRx Action Items results list

There are two icons that could possibly work within the current icon set: ellipsis (used by Facebook and GitHub) and chevron-down (used by Twitter).

However, after small discussions in the community, I'm wondering if a vertical ellipsis (used by Google and Slack) would be more sensible. My main argument is that the three dots pointing down better visually represents a vertical list in a dropdown menu, and this may set better expectations than an alternative icon.

Ultimately: Should we add a vertical ellipsis to the icon set?

If yes, what should it be called? ellipsis-vertical or vertical-ellipsis or something else? I can make the PR contribution.

If no, what is the preferred icon to use in this dropdown context?

This is the SVG code I used to make rvt-icon-ellipsis-vertical.svg in the source code. It was easy to flip some cx/cy values from the rvt-icon-ellipsis.svg file.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
    <g fill="currentColor">
        <circle cx="8" cy="8" r="2"/>
        <circle cx="8" cy="14" r="2"/>
        <circle cx="8" cy="2" r="2"/>
    </g>
</svg>
levimcg commented 5 years ago

I like the vertical ellipsis as well. Seems like it's becoming a pretty common UI pattern to use. I think adding a rvt-icon-ellipsis-vertical.svg icon makes sense. We sort of follow the same pattern with the chevrons—technically the same vectors just rotated.

PR is definitely welcome! 🙌