Reduced min-width of medium flyouts to 448

..to accomodate forms. Also added docs example for this forms width trick.
elastic · Jul 17, 2019 · 5162f20 · 5162f20
1 parent 016cb21
commit 5162f20
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js
@@ -179,6 +179,13 @@ export class FlyoutMaxWidth extends Component {
  <strong>larger custom max-width</strong>
  </EuiLink>
 
+ <EuiSpacer />
+
+ <EuiLink color="primary" onClick={() => this.showFlyout('m', 0)}>
+ Trick for forms: <strong>Medium</strong> flyout with{' '}
+ <strong>0 as max-width</strong>
+ </EuiLink>
+
  {flyout}
  </div>
  );

diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss
@@ -1,3 +1,5 @@
+@import '../form/variables';
+
 .euiFlyout {
  border-left: $euiBorderThin;
  // The mixin augments the above
@@ -36,7 +38,8 @@ $flyoutSizes: (
  max: round(map-get($euiBreakpoints, 's') * .7),
  ),
  'medium': (
- min: round(map-get($euiBreakpoints, 'm') * .7), /* 1 */
+ // Calculated for forms plus padding
+ min: $euiFormMaxWidth + ($euiSizeM * 2),
  width: 50vw,
  max: map-get($euiBreakpoints, 'm'),
  ),