You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Example: Right-Aligned EuiButtonEmpty Components at Larger Viewport Widths
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?
The text was updated successfully, but these errors were encountered:
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
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 providedflush
prop would allow for a value ofboth
(thus stripping both the left and right padding from the component). Unfortunately, it appears that the only options areleft
orright
, 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 WidthsExample: Right-Aligned
EuiButtonEmpty
Components at Larger Viewport WidthsWhile 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 theflush
prop onEuiButtonEmpty
.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 theEuiButtonEmpty
components not to have horizontal padding at all. Thoughts?The text was updated successfully, but these errors were encountered: