Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update buttons to accept an optional icon #893

Closed
craigcook opened this issue Jul 28, 2023 · 0 comments
Closed

Update buttons to accept an optional icon #893

craigcook opened this issue Jul 28, 2023 · 0 comments
Assignees

Comments

@craigcook
Copy link
Member

Sometimes we want to put an icon on a button, to make it distinct from other buttons or indicate a specific function. For example, a download button might include a little down arrow icon like: image

A few approaches we might take:

  1. Update button styling to accommodate an inline image, so we could include icons arbitrarily (maybe wrapped in a span, might need a modifier class on the button).
  2. Predefine a few specific kinds of icon buttons for specific purposes, then a theme class could handle the icon in CSS (a pseudo-element with a background).

Additional thoughts:

  • We might need style alternatives for icon-on-left or icon-on-right, unless we decide to commit to only one.
  • Icon position should respect language direction.
  • We probably shouldn't allow doubling icons (no left AND right). Unless there's a very good use case for two icons in a button?
  • If we use Protocol icon assets we'll need them in both dark and light (though if it's an inline SVG we could color the icon with CSS)
@craigcook craigcook self-assigned this Jan 26, 2024
@stephaniehobson stephaniehobson moved this to Planning in Moz.org Refresh Mar 6, 2024
@stephaniehobson stephaniehobson moved this from Planning to Dev Ready in Moz.org Refresh Mar 15, 2024
@craigcook craigcook moved this from Dev Ready to In Progress in Moz.org Refresh Mar 18, 2024
craigcook added a commit to craigcook/protocol that referenced this issue Mar 25, 2024
craigcook added a commit to craigcook/protocol that referenced this issue Mar 28, 2024
craigcook added a commit to craigcook/protocol that referenced this issue Apr 4, 2024
craigcook added a commit to craigcook/protocol that referenced this issue Apr 4, 2024
@stephaniehobson stephaniehobson moved this from In Progress to Done in Moz.org Refresh May 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Archived in project
Development

No branches or pull requests

1 participant