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

Button style enhancements #732

Merged
merged 4 commits into from Nov 17, 2023

Conversation

basham
Copy link
Member

@basham basham commented Nov 9, 2023

Notes:

  1. Added white backgrounds to secondary buttons, so contrast is maintained on non-white backgrounds. See similar changes in Fix badge style #728.
  2. Button content should not wrap, because it should be succinct. See similar changes in Fix badge style #728.
  3. Reduced left and right button padding by 2px on each side, so that normal-sized icon buttons are 40 square pixels.
  4. Added rvt-button--medium variant, with 32px height.
  5. Added new medium and small variant examples in the "Button with icons" page.

Questions:

  1. Should buttons use gap for icon button spacing, instead of rvt-m-left-xs? Or does that presume too much about the contents of buttons and how they should be used?
  2. The 2px horizontal padding for small buttons seems insufficient, in order to ensure that small icon buttons remain 24 square pixels. Does this indicate that perhaps the padding should be dynamic, according to if the visible content is an icon only verses icon with label verses just label?
  3. We may want to consider later enhancing icon buttons so that there is a tooltip-style label that shows when it is in focus or on hover. The problem is how do we control the placement of such a thing? The new Popover API would be great, but it is not yet available in Firefox. The upcoming anchor positioning CSS property is still being drafted. So, it would likely require the user to just pre-determine the position (bottom or top) and call it good enough.
  4. Perhaps I should do more exemplar research. But the Adobe Spectrum button has a lot of useful variants.

@basham
Copy link
Member Author

basham commented Nov 9, 2023

I've made this is PR a draft until the questions are addressed. We may need a meeting to discuss the direction.

@levimcg
Copy link
Member

levimcg commented Nov 10, 2023

@basham Cool! Thanks for getting this open. Yes, I'd be happen to schedule something face-to-face to chat through some of this before we continue.

@basham
Copy link
Member Author

basham commented Nov 15, 2023

Reviewed the PR with @levimcg today. Decisions:

  • Comment out medium size variant, and save it for later. This may be part of a larger rework of buttons and links.
  • Add a gap of xs. This will provide default spacing for icons and the text content, so we don't have to use the margin utility.
  • Adjust the width of small buttons so that the icon button is 32px wide. This provides a more comfortable look, even though it means they are not square (like the large and medium buttons).

@basham basham marked this pull request as ready for review November 15, 2023 20:41
@basham
Copy link
Member Author

basham commented Nov 15, 2023

@levimcg: Ready for review.

@levimcg levimcg merged commit 71b4e84 into indiana-university:2.0.0-dev Nov 17, 2023
@basham basham deleted the feature/button branch November 17, 2023 20:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants