Fix bug with EuiFlyout maxWidth interfering with responsive mode. #1124
Conversation
… size and maxWidth examples.
| @@ -62,9 +62,9 @@ export class Flyout extends Component { | |||
| > | |||
| <EuiFlyoutHeader hasBorder> | |||
| <EuiTitle size="m"> | |||
| <h1 id="flyoutTitle"> | |||
| <h2 id="flyoutTitle"> | |||
There was a problem hiding this comment.
I updated these examples to use h2 because in most cases I've seen this heading won't make sense as a top-level heading; instead it will make more sense as a child of the top-level.
Yes. Sometimes the smaller ones we document (as we did in the header) here. But you're right, it helps catch some of these issues. Thanks for adding it. |
| ], | ||
| text: ( | ||
| <p> | ||
| In this example, we set <EuiCode>maxWidth</EuiCode> to <EuiCode>33vw</EuiCode>, to |
There was a problem hiding this comment.
Very minor thing, but I'd use an example with a pixel value (a good example one to show for the forms is 448px, which is the max-width of the form inputs + 24px padding on each side). The reason you often need the maxWidth prop is that the more fluid default widths (which are vw) can be inconsistent. Usually you're over riding it to make sure that thinner content doesn't get too airy on a wide screen.
There was a problem hiding this comment.
Thanks, I'll update the example with that pixel value. FYI, most of the time I've used a flyout in Kibana the small has been too cramped (on smaller screens like laptop) and the large has been too obtrusive (on all screens, both laptop and wide monitor). The pixel value you suggested works great.
|
@snide That px width uncovered another bug. The min-width value can fight with the max-width value:
I'm not sure how we want to solve this one, but we can figure it out in another PR. 😄 |
|
That's fine. TBH, it's not really a bug. It's using the settings provided. |
| <EuiFlyout | ||
| onClose={this.closeFlyout} | ||
| aria-labelledby="flyoutMaxWidthTitle" | ||
| maxWidth="448px" |
There was a problem hiding this comment.
Should we change the examples to not pass the 'px'? I intentionally wanted to mimic the way React handles the styles prop where if you send a number maxWidth={448}, it would treat it as a px value. But if you send a string maxWidth="40rem" it would apply it as is. I was thinking this would be an easier way for consumers to pass values without having to remember to append 'px'.
src/components/flyout/_flyout.scss
Outdated
| @@ -67,16 +63,23 @@ $flyoutSizes: ( | |||
| } | |||
| } | |||
|
|
|||
| /** | |||
| * 1. Calculating the minimum width based on the screen takover breakpoint | |||
There was a problem hiding this comment.
The 1. comment here references code above it, can you separate them or move it back to before the map?
Heh but you can't make the flyout hug the form! |
Fixes #1122
I also added examples for the
maxWidthprop and the large size flyout. @elastic/kibana-design In general, are we still trying to add examples to the docs site whenever we add new props?