[OSCI] Adding props for shrink and basis for OuiFlexItem

CHANGELOG.md

@@ -13,6 +13,7 @@
 - Update ouiTextSubduedColor in `next` dark theme ([#973](https://github.com/opensearch-project/oui/pull/973))
 - Add `crossInCircleEmpty` and `power` icons ([#1044](https://github.com/opensearch-project/oui/pull/1044))
 - Add `Figma` icon and link to OUI Figma resources ([#1064](https://github.com/opensearch-project/oui/pull/1064))
+- Add `shrink` and `basis` props to OuiFlexItem ([#1126](https://github.com/opensearch-project/oui/pull/1126))
 
 ### 🐛 Bug Fixes
 

src-docs/src/views/flex/flex_basis_string.tsx

@@ -0,0 +1,43 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from 'react';
+
+import { OuiFlexGroup, OuiFlexItem } from '../../../../src/components/flex';
+
+export default () => (
+  <div>
+    <OuiFlexGroup>
+      <OuiFlexItem basis={'auto'}>
+        Auto
+        <br />
+        Varies based on content size or width/height property
+      </OuiFlexItem>
+      <OuiFlexItem basis={'fit-content'}>
+        Fit-content
+        <br />
+        Sizes the item based on the content&apos;s width but within the
+        container.
+      </OuiFlexItem>
+      <OuiFlexItem basis={'max-content'}>
+        Max-content
+        <br />
+        Sizes the item to be as large as the content&apos;s maximum width.
+      </OuiFlexItem>
+      <OuiFlexItem basis={'min-content'}>
+        Min-content
+        <br />
+        Sizes the item to be as small as the content&apos;s minimum width
+        without breaking.
+      </OuiFlexItem>
+    </OuiFlexGroup>
+  </div>
+);

src-docs/src/views/flex/flex_example.js

@@ -47,6 +47,12 @@ const flexGrowZeroSource = require('!!raw-loader!./flex_grow_zero');
 import FlexGrowNumeric from './flex_grow_numeric';
 const flexGrowNumericSource = require('!!raw-loader!./flex_grow_numeric');
 
+import FlexShrinkNumeric from './flex_shrink_numeric';
+const flexShrinkNumericSource = require('!!raw-loader!./flex_shrink_numeric');
+
+import FlexBasisString from './flex_basis_string';
+const FlexBasisStringSource = require('!!raw-loader!./flex_basis_string');
+
 import FlexJustify from './flex_justify';
 const flexJustifySource = require('!!raw-loader!./flex_justify');
 import FlexJustifyBetween from './flex_justify_between';
@@ -105,10 +111,31 @@ const flexGrowZeroSnippet = `<OuiFlexGroup>
 </OuiFlexGroup>`;
 
 const flexGrowNumericSnippet = `<OuiFlexGroup>
-  <OuiFlexItem grow={1}><!-- FlexItem with flew-grow 1 --></OuiFlexItem>
-  <OuiFlexItem grow={2}><!-- FlexItem with flew-grow 2 --></OuiFlexItem>
+  <OuiFlexItem grow={1}><!-- FlexItem with flex-grow 1 --></OuiFlexItem>
+  <OuiFlexItem grow={2}><!-- FlexItem with flex-grow 2 --></OuiFlexItem>
+  ...
+  <OuiFlexItem grow={10}><!-- FlexItem with flex-grow 10 --></OuiFlexItem>
+</OuiFlexGroup>`;
+
+const flexShrinkNumericSnippet = `<OuiFlexGroup>
+  <OuiFlexItem grow={false} shrink={1}><!-- FlexItem with flex-shrink 1 --></OuiFlexItem>
+  <OuiFlexItem grow={false} shrink={2}><!-- FlexItem with flex-shrink 2 --></OuiFlexItem>
   ...
-  <OuiFlexItem grow={10}><!-- FlexItem with flew-grow 10 --></OuiFlexItem>
+  <OuiFlexItem grow={false} shrink={10}><!-- FlexItem with flex-shrink 10 --></OuiFlexItem>
+</OuiFlexGroup>
+
+<OuiFlexGroup>
+  <OuiFlexItem shrink={1} basis={'auto'}><!-- FlexItem with flex-shrink 1 --></OuiFlexItem>
+  <OuiFlexItem shrink={2} basis={'auto'}><!-- FlexItem with flex-shrink 2 --></OuiFlexItem>
+  ...
+  <OuiFlexItem shrink={10} basis={'auto'}><!-- FlexItem with flex-shrink 10 --></OuiFlexItem>
+</OuiFlexGroup>`;
+
+const flexBasisStringSnippet = `<OuiFlexGroup>
+  <OuiFlexItem basis={'auto'}><!-- FlexItem with flex-basis 'auto' --></OuiFlexItem>
+  <OuiFlexItem basis={'fit-content'}><!-- FlexItem with flex-basis 'fit-content' --></OuiFlexItem>
+  <OuiFlexItem basis={'max-content'}><!-- FlexItem with flex-basis 'max-content' --></OuiFlexItem>
+  <OuiFlexItem basis={'min-content'}><!-- FlexItem with flex-basis 'min-content' --></OuiFlexItem>
 </OuiFlexGroup>`;
 
 const directionSnippet = `<OuiFlexGroup direction="column">
@@ -328,6 +355,55 @@ export const FlexExample = {
         </div>
       ),
     },
+    {
+      title: 'Proportional shrinking of items',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: flexShrinkNumericSource,
+        },
+      ],
+      text: (
+        <p>
+          You can specify a number between 1 and 10 for each{' '}
+          <strong>OuiFlexItem</strong> to take up a proportional shrinking of
+          the <strong>OuiFlexGroup</strong> it is in. For this to apply: (1) the
+          prop <strong>grow</strong> should set into <strong>false</strong> or
+          change the <strong>basis</strong> prop to <strong>auto</strong> and
+          (2) the content in the all flex item should be sufficient enough to
+          reach the width of the flex parent.
+        </p>
+      ),
+      snippet: flexShrinkNumericSnippet,
+      demo: (
+        <div className="guideDemo__highlightGrid">
+          <FlexShrinkNumeric />
+        </div>
+      ),
+    },
+    {
+      title: 'Basis of flex items',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: FlexBasisStringSource,
+        },
+      ],
+      text: (
+        <p>
+          You can also specify the <strong>flex-basis</strong> CSS property of a
+          flex item using the <strong>basis</strong> prop with one of the
+          following options: <strong>auto</strong>, <strong>content-fit</strong>
+          , <strong>content-max</strong>, <strong>content-min</strong>
+        </p>
+      ),
+      snippet: flexBasisStringSnippet,
+      demo: (
+        <div className="guideDemo__highlightGrid">
+          <FlexBasisString />
+        </div>
+      ),
+    },
     {
       title: 'Justify and align',
       source: [

src-docs/src/views/flex/flex_shrink_numeric.tsx

@@ -0,0 +1,51 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from 'react';
+
+import { OuiFlexGroup, OuiFlexItem } from '../../../../src/components/flex';
+import { OuiSpacer } from '../../../../src/components/spacer';
+
+export default () => (
+  <div>
+    <OuiFlexGroup>
+      <OuiFlexItem grow={false} shrink={1}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+      <OuiFlexItem grow={false} shrink={2}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+      <OuiFlexItem grow={false} shrink={4}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+      <OuiFlexItem grow={false} shrink={8}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+    </OuiFlexGroup>
+
+    <OuiSpacer />
+
+    <OuiFlexGroup>
+      <OuiFlexItem shrink={1} basis={'auto'}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+      <OuiFlexItem shrink={2} basis={'auto'}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+      <OuiFlexItem shrink={4} basis={'auto'}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+      <OuiFlexItem shrink={8} basis={'auto'}>
+        Extensive Text Extensive Text Extensive Text
+      </OuiFlexItem>
+    </OuiFlexGroup>
+  </div>
+);

src/components/flex/__snapshots__/flex_item.test.tsx.snap

@@ -1,5 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`OuiFlexItem basis auto is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexBasis-auto"
+/>
+`;
+
+exports[`OuiFlexItem basis fit-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexBasis-fit-content"
+/>
+`;
+
+exports[`OuiFlexItem basis max-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexBasis-max-content"
+/>
+`;
+
+exports[`OuiFlexItem basis min-content is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexBasis-min-content"
+/>
+`;
+
 exports[`OuiFlexItem grow 1 is rendered 1`] = `
 <div
   class="ouiFlexItem ouiFlexItem--flexGrow1"
@@ -79,3 +103,63 @@ exports[`OuiFlexItem is rendered 1`] = `
   data-test-subj="test subject string"
 />
 `;
+
+exports[`OuiFlexItem shrink 1 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink1"
+/>
+`;
+
+exports[`OuiFlexItem shrink 2 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink2"
+/>
+`;
+
+exports[`OuiFlexItem shrink 3 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink3"
+/>
+`;
+
+exports[`OuiFlexItem shrink 4 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink4"
+/>
+`;
+
+exports[`OuiFlexItem shrink 5 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink5"
+/>
+`;
+
+exports[`OuiFlexItem shrink 6 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink6"
+/>
+`;
+
+exports[`OuiFlexItem shrink 7 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink7"
+/>
+`;
+
+exports[`OuiFlexItem shrink 8 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink8"
+/>
+`;
+
+exports[`OuiFlexItem shrink 9 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink9"
+/>
+`;
+
+exports[`OuiFlexItem shrink 10 is rendered 1`] = `
+<div
+  class="ouiFlexItem ouiFlexItem--flexShrink10"
+/>
+`;

src/components/flex/_flex_group.scss

@@ -25,6 +25,7 @@
     }
 
     flex-grow: 1;
+    flex-shrink: 1;
     flex-basis: 0%; /* 2 */
   }
 }

src/components/flex/_flex_item.scss

@@ -24,18 +24,48 @@
 
   /*
    * 1. We need the extra specificity here to override the FlexGroup > FlexItem styles.
-   * 2. FlexItem can be manually set to not grow if needed.
+   * 2. FlexItem can be manually set to not grow or shrink if needed (default allows grow and shrink).
+   * 3. FlexItem basis can be set to 'auto' (defaul use flex-basis: 0%)
+   * 4. FlexItem also can be given values for grow, shrink and basis:
+   *    - grow: 1..10
+   *    - shrink: 1..10
+   *    - basis: auto, max-content, min-content, fit-content
    */
+
   &.ouiFlexItem--flexGrowZero { /* 1 */
     flex-grow: 0; /* 2 */
     flex-basis: auto; /* 2 */
   }
 
-  @for $i from 1 through 10 {
-    &.ouiFlexItem--flexGrow#{$i} {
-      flex-grow: $i;
+  &.ouiFlexItem--flexShrinkZero { /* 1 */
+    flex-shrink: 0; /* 2 */
+    flex-basis: auto; /* 2 */
+  }
+
+  &.ouiFlexItem--flexBasisAuto { /* 1 */
+    flex-basis: auto; /* 3 */
+  }
+
+  @for $i from 1 through 10 { /* 4 */
+    &.ouiFlexItem--flexGrow#{$i} { /* 4 */
+      flex-grow: $i; /* 4 */
+    }
+  }
+
+  @for $i from 1 through 10 { /* 4 */
+    &.ouiFlexItem--flexShrink#{$i} { /* 4 */
+      flex-shrink: $i; /* 4 */
     }
   }
+
+  $flexBasisOptions: auto, max-content, min-content, fit-content; /* 4 */
+
+  @each $basis in $flexBasisOptions { /* 4 */
+    &.ouiFlexItem--flexBasis-#{$basis} { /* 4 */
+      flex-basis: $basis; /* 3 */
+    }
+  }
+
 }
 
 // On mobile we force them to stack and act the same.