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

[sideNavItem] no need for justify-content: space-between #2297

Merged
merged 7 commits into from
Sep 6, 2019
Merged

[sideNavItem] no need for justify-content: space-between #2297

merged 7 commits into from
Sep 6, 2019

Conversation

spalger
Copy link
Contributor

@spalger spalger commented Sep 6, 2019

Summary

Fixed #2296 by removing justify-content: space-between; from sideNavItem buttons, rather than starting with space-between and overwriting nearly everything with justify-content: flex-start;.

Checklist

  • Checked in dark mode
  • 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

@chandlerprall chandlerprall requested a review from cchaos September 6, 2019 18:25
@cchaos
Copy link
Contributor

cchaos commented Sep 6, 2019

@spalger The space-between is actually necessary for when there is a caret indicating children of the nav item. You can see an example via the EUI doc's side nav.

We may need to actually group the icon and text together or ensure that the icon and caret never grow.

@spalger
Copy link
Contributor Author

spalger commented Sep 6, 2019

Nice catch @cchaos

I've grouped the icon and label together like you mentioned, but I'm not sure about naming. Should I even bother adding a class to the span since it's not necessary for styling?

image

@cchaos
Copy link
Contributor

cchaos commented Sep 6, 2019

Now you're starting to see what we have to deal with 😜 ...

This dom layout breaks the truncation.

Screen Shot 2019-09-06 at 15 40 05 PM

You're best best is to leave elements as they were, and instead remove the justify-content: space-between; from .euiSideNavItemButton__content while adding flex-grow: 1 to .euiSideNavItemButton__label. This force the label to take up the empty space and push the caret left but staying left aligned.

@spalger
Copy link
Contributor Author

spalger commented Sep 6, 2019

Yes, yes, that seems like the right way to do this

image

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.

LGTM, with a change to the CL. Thx

CHANGELOG.md Outdated Show resolved Hide resolved
@spalger spalger merged commit 69110c1 into elastic:master Sep 6, 2019
@spalger spalger deleted the fix/side-nav-item-justify branch September 6, 2019 20:25
thompsongl pushed a commit to thompsongl/eui that referenced this pull request Sep 10, 2019
* [sideNavItem] no need for justify-content: space-between

* add changelog entry

* group the icon and label so that they don't get spaced out

* remove unnecessary classname

* rather than negotiating spacing, grow the label so it takes up available space

* update and bump changelog entry to master
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.

<EuiSideNav> items with icon
2 participants