adding shrink and basis props for OuiFlexItem

Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>

src/components/flex/_flex_item.scss

@@ -24,18 +24,38 @@
 
   /*
    * 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 if needed (default).
+   * 3. FlexItem also can be given values for grow, shrink and basis:
+   *    - grow: 1..10
+   *    - shrink: 1..10
+   *    - basis: auto, 0%, 25%, 50%, 75% or 100%
    */
+
   &.ouiFlexItem--flexGrowZero { /* 1 */
     flex-grow: 0; /* 2 */
     flex-basis: auto; /* 2 */
   }
 
-  @for $i from 1 through 10 {
-    &.ouiFlexItem--flexGrow#{$i} {
-      flex-grow: $i;
+  @for $i from 1 through 10 { /* 3 */
+    &.ouiFlexItem--flexGrow#{$i} { /* 3 */
+      flex-grow: $i; /* 3 */
     }
   }
+
+  @for $i from 1 through 10 { /* 3 */
+    &.ouiFlexItem--flexShrink#{$i} { /* 3 */
+      flex-shrink: $i; /* 3 */
+    }
+  }
+
+  $flexBasisOptions: 'auto', '0%', '25%', '50%', '75%', '100%'; /* 3 */
+
+  @each $basis in $flexBasisOptions { /* 3 */
+    .ouiFlexItem--flexBasis#{$basis} { /* 3 */
+      flex-basis: $basis; /* 3 */
+    }
+  }
+
 }
 
 // On mobile we force them to stack and act the same.

src/components/flex/flex_item.tsx

@@ -46,13 +46,43 @@ export type FlexItemGrowSize =
   | true
   | false
   | null;
+export type FlexItemShrinkSize =
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | true
+  | false
+  | null;
+export type FlexItemBasisValue = string | true | false | null;
 
 export interface OuiFlexItemProps {
   grow?: FlexItemGrowSize;
+  shrink?: FlexItemShrinkSize;
+  basis?: FlexItemBasisValue;
   component?: keyof JSX.IntrinsicElements;
 }
 
 export const GROW_SIZES: FlexItemGrowSize[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export const SHRINK_SIZES: FlexItemShrinkSize[] = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+];
+export const BASIS_VALUES:FlexItemBasisValue[] = ['auto','0%','25%','50%','75%','100%']
 
 export const OuiFlexItem: FunctionComponent<
   CommonProps &
@@ -61,18 +91,26 @@ export const OuiFlexItem: FunctionComponent<
 > = ({
   children,
   className,
-  grow = true,
+  grow = true, // default true -> keep grow 1 coming from flex_grid
+  shrink = 1, // default 1 for shrink
+  basis = 'auto', // default 'auto' basis
   component: Component = 'div',
   ...rest
 }) => {
   validateGrowValue(grow);
+  validateShrinkValue(shrink);
+  validateBasisValue(basis);
 
   const classes = classNames(
     'ouiFlexItem',
     {
       'ouiFlexItem--flexGrowZero': !grow,
       [`ouiFlexItem--flexGrow${grow}`]:
         typeof grow === 'number' ? GROW_SIZES.indexOf(grow) >= 0 : undefined,
+      [`ouiFlexItem--flexShrink${shrink}`]:
+        typeof shrink === 'number' ? SHRINK_SIZES.indexOf(shrink) >= 0 : undefined,
+      [`ouiFlexItem--flexBasis${basis}`]:
+        typeof shrink === 'string' ? BASIS_VALUES.indexOf(shrink) >= 0 : undefined,
     },
     className
   );
@@ -94,3 +132,26 @@ function validateGrowValue(value: OuiFlexItemProps['grow']) {
     );
   }
 }
+
+function validateShrinkValue(value: OuiFlexItemProps['shrink']) {
+  // New function
+  const validValues = [null, undefined, true, false, ...SHRINK_SIZES];
+
+  if (validValues.indexOf(value) === -1) {
+    throw new Error(
+      `Prop \`shrink\` passed to \`OuiFlexItem\` must be a boolean or an integer between 1 and 10, received \`${value}\``
+    );
+  }
+}
+
+function validateBasisValue(value: OuiFlexItemProps['basis']) {
+  // Define the valid values for 'flex-basis'. These can be 'auto' or specific percentages.
+  const validValues = [null, undefined, true, false, ...BASIS_VALUES];
+
+  // Check if the passed value is one of the valid values.
+  if (!validValues.includes(value)) {
+    throw new Error(
+      `Prop \`basis\` passed to \`OuiFlexItem\` must be one of ['auto', '0%', '25%', '50%', '75%', '100%'], received \`${value}\``
+    );
+  }
+}