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

[EuiButtonEmpty] Do we need/want a flush="both" prop value? #4012

Closed
MichaelMarcialis opened this issue Sep 4, 2020 · 0 comments · Fixed by #4084
Closed

[EuiButtonEmpty] Do we need/want a flush="both" prop value? #4012

MichaelMarcialis opened this issue Sep 4, 2020 · 0 comments · Fixed by #4084

Comments

@MichaelMarcialis
Copy link
Contributor

While checking the responsiveness of the redesigned home and Kibana landing pages, there were a few locations where I desired for some of the EuiButtonEmpty components to be left-aligned to the page's edge on small viewport widths and right-aligned on larger viewports widths. In order to avoid the button looking misaligned in one of the two layout possibilities, I was hoping that the provided flush prop would allow for a value of both (thus stripping both the left and right padding from the component). Unfortunately, it appears that the only options are left or right, which meant I needed to override the styles to strip both the left and right padding from these buttons.

Example: Left-Aligned EuiButtonEmpty Components at Smaller Viewport Widths
image

Example: Right-Aligned EuiButtonEmpty Components at Larger Viewport Widths
image

While it's not difficult to apply these overriding styles, it did get me thinking as to whether or not we should have both as a possible value for the flush prop on EuiButtonEmpty.

Further still, I became curious as to why EuiButtonEmpty components included left and right padding at all. Is the purpose to not have the focused background color's edge rub right against the edge of the text? I feel like in most (if not all) cases, designers and devs would would want the EuiButtonEmpty components not to have horizontal padding at all. Thoughts?

@cchaos cchaos changed the title [Discussion] Do we need/want a flush="both" prop value for EuiButtonEmpty? [EuiButtonEmpty] Do we need/want a flush="both" prop value? Sep 20, 2020
@cchaos cchaos mentioned this issue Sep 30, 2020
6 tasks
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 a pull request may close this issue.

2 participants