Added shrink prop to EuiFlexItem

Needs some doc something
cchaos · Feb 21, 2020 · 61a3103 · 61a3103
1 parent c8476bf
commit 61a3103
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 7 deletions.
diff --git a/src-docs/src/views/flex/flex_grow_zero.tsx b/src-docs/src/views/flex/flex_grow_zero.tsx
@@ -8,5 +8,13 @@ export default () => (
       <EuiFlexItem grow={false}>This item won&rsquo;t grow</EuiFlexItem>
       <EuiFlexItem>But this item will.</EuiFlexItem>
     </EuiFlexGroup>
+    <EuiFlexGroup>
+      <EuiFlexItem shrink={false}>
+        <div style={{ width: 400 }}>This item won&rsquo;t shrink</div>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <div style={{ width: 400 }}>But this item will.</div>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </div>
 );
diff --git a/src/components/flex/__snapshots__/flex_item.test.tsx.snap b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
@@ -79,3 +79,75 @@ exports[`EuiFlexItem is rendered 1`] = `
   data-test-subj="test subject string"
 />
 `;
+
+exports[`EuiFlexItem shrink 1 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 2 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 3 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 4 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 5 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 6 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 7 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 8 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 9 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 10 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink false is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinkZero"
+/>
+`;
+
+exports[`EuiFlexItem shrink true is rendered 1`] = `
+<div
+  class="euiFlexItem"
+/>
+`;
diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss
@@ -25,6 +25,16 @@
       flex-grow: $i;
     }
   }
+
+  &.euiFlexItem--flexShrinkZero { /* 1 */
+    flex-shrink: 0; /* 2 */
+  }
+
+  @for $i from 1 through 10 {
+    &.euiFlexItem--flexShrink#{$i} {
+      flex-shrink: $i;
+    }
+  }
 }
 
 // On mobile we force them to stack and act the same.

diff --git a/src/components/flex/flex_item.test.tsx b/src/components/flex/flex_item.test.tsx
@@ -6,7 +6,7 @@ import {
   stopThrowingReactWarnings,
 } from '../../test';
 
-import { EuiFlexItem, GROW_SIZES } from './flex_item';
+import { EuiFlexItem, GROW_SHRINK_SIZES } from './flex_item';
 
 beforeAll(startThrowingReactWarnings);
 afterAll(stopThrowingReactWarnings);
@@ -19,12 +19,22 @@ describe('EuiFlexItem', () => {
   });
 
   describe('grow', () => {
-    GROW_SIZES.concat([true, false]).forEach(value => {
+    GROW_SHRINK_SIZES.concat([true, false]).forEach(value => {
       test(`${value} is rendered`, () => {
         const component = render(<EuiFlexItem grow={value} />);
 
         expect(component).toMatchSnapshot();
       });
     });
   });
+
+  describe('shrink', () => {
+    GROW_SHRINK_SIZES.concat([true, false]).forEach(value => {
+      test(`${value} is rendered`, () => {
+        const component = render(<EuiFlexItem shrink={value} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
 });
diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes, FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 
-export type FlexItemGrowSize =
+export type FlexItemGrowShrinkSize =
   | 1
   | 2
   | 3
@@ -18,11 +18,31 @@ export type FlexItemGrowSize =
   | null;
 
 export interface EuiFlexItemProps {
-  grow?: FlexItemGrowSize;
+  /**
+   * Set to a `number` to match the CSS property of `flex-grow`,
+   * or `true` for `1` and `false`/`null` for `0`.
+   */
+  grow?: FlexItemGrowShrinkSize;
+  /**
+   * Set to a `number` to match the CSS property of `flex-shrink`,
+   * or `true` for `1` and `false`/`null` for `0`.
+   */
+  shrink?: FlexItemGrowShrinkSize;
   component?: keyof JSX.IntrinsicElements;
 }
 
-export const GROW_SIZES: FlexItemGrowSize[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export const GROW_SHRINK_SIZES: FlexItemGrowShrinkSize[] = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+];
 
 export const EuiFlexItem: FunctionComponent<
   CommonProps &
@@ -32,6 +52,7 @@ export const EuiFlexItem: FunctionComponent<
   children,
   className,
   grow = true,
+  shrink = true,
   component: Component = 'div',
   ...rest
 }) => {
@@ -42,7 +63,14 @@ export const EuiFlexItem: FunctionComponent<
     {
       'euiFlexItem--flexGrowZero': !grow,
       [`euiFlexItem--flexGrow${grow}`]:
-        typeof grow === 'number' ? GROW_SIZES.indexOf(grow) >= 0 : undefined,
+        typeof grow === 'number'
+          ? GROW_SHRINK_SIZES.indexOf(grow) >= 0
+          : undefined,
+      'euiFlexItem--flexShrinkZero': !shrink,
+      [`euiFlexItem--flexShrink${grow}`]:
+        typeof shrink === 'number'
+          ? GROW_SHRINK_SIZES.indexOf(shrink) >= 0
+          : undefined,
     },
     className
   );
@@ -56,7 +84,7 @@ export const EuiFlexItem: FunctionComponent<
 };
 
 function validateGrowValue(value: EuiFlexItemProps['grow']) {
-  const validValues = [null, undefined, true, false, ...GROW_SIZES];
+  const validValues = [null, undefined, true, false, ...GROW_SHRINK_SIZES];
 
   if (validValues.indexOf(value) === -1) {
     throw new Error(

diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -192,6 +192,54 @@ exports[`EuiFlyout max width can be set to a default 1`] = `
 </div>
 `;
 
+exports[`EuiFlyout props accepts div props 1`] = `
+<div>
+  <div
+    data-focus-guard="true"
+    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+    tabindex="0"
+  />
+  <div
+    data-focus-guard="true"
+    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+    tabindex="1"
+  />
+  <div
+    data-focus-lock-disabled="false"
+  >
+    <div
+      class="euiFlyout euiFlyout--medium"
+      id="imaflyout"
+      role="dialog"
+      tabindex="0"
+    >
+      <button
+        aria-label="Closes this dialog"
+        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        data-test-subj="euiFlyoutCloseButton"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+          focusable="false"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </button>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+    tabindex="0"
+  />
+</div>
+`;
+
 exports[`EuiFlyout props close button is not rendered 1`] = `
 <div>
   <div