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

Improve condensed EuiTabs focus states #3299

Merged
merged 4 commits into from
Apr 14, 2020

Conversation

miukimiu
Copy link
Contributor

@miukimiu miukimiu commented Apr 10, 2020

Summary

This PR closes #3273.

The EuiTabs condensed version doesn't have any background and relies solely on text underline for focused tabs.

In order to improve these focus states:

  • I'm adding a background with the same color as the regular tabs.
  • I'm adding a very small left and right padding to make the background look better. This change led me to decreased the margins between tabs.
  • I'm also removing the underline when the condensed tab is selected because it was looking odd as referenced on Condensed EuiTabs need better focus states #3273.

condensed-tabs@2x

Checklist

  • Check against all themes for compatibility in both light and dark modes
  • [ ] Checked in mobile[
  • Checked in IE11 and Firefox
  • [ ] Props have proper autodocs
  • [ ] Added documentation examples
  • [ ] Added or updated jest tests
  • [ ] Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

@miukimiu miukimiu requested a review from cchaos April 10, 2020 18:35
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3299/

Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Thank you for fixing this! I think the extra horizontal space inside the tab works as a solution to the background color. It's not a huge visual difference between the old and new.

You'll just need to rebase with master to fix the changelog location since there's been a release since this PR.

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3299/

@miukimiu miukimiu merged commit 5fed879 into elastic:master Apr 14, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Condensed EuiTabs need better focus states
3 participants