Stack: Adding basis prop to mimick flexBasis CSS property (#19053)

* Stack: Adding basis prop to mimick flexBasis CSS property. * Change files * Adding default value as auto for basis prop. * Updating snapshots * Updating snapshots.
microsoft · Mar 17, 2022 · f4ed6d1 · f4ed6d1
1 parent 956f573
commit f4ed6d1
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 2 deletions.
diff --git a/change/@fluentui-react-7063805d-c084-4da0-986d-cd3193d90f01.json b/change/@fluentui-react-7063805d-c084-4da0-986d-cd3193d90f01.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Stack: Adding basis prop to mimick flexBasis CSS property.",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-cards/src/components/Card/CardItem/__snapshots__/CardItem.test.tsx.snap b/packages/react-cards/src/components/Card/CardItem/__snapshots__/CardItem.test.tsx.snap
@@ -45,6 +45,7 @@ exports[`Card Item renders correctly 1`] = `
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -111,6 +112,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -136,6 +138,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -202,6 +205,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -227,6 +231,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -293,6 +298,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -318,6 +324,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -384,6 +391,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -409,6 +417,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -475,6 +484,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -500,6 +510,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -525,6 +536,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -591,6 +603,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -616,6 +629,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -641,6 +655,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -707,6 +722,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -773,6 +789,7 @@ exports[`Card Item renders correctly when filling up the margins while being the
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -839,6 +856,7 @@ exports[`Card Item renders correctly when having tokens passed to it 1`] = `
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;

diff --git a/packages/react-cards/src/components/Card/__snapshots__/Card.view.test.tsx.snap b/packages/react-cards/src/components/Card/__snapshots__/Card.view.test.tsx.snap
@@ -35,6 +35,7 @@ exports[`CardView renders a Horizontal Card with an onClick function specified c
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -86,6 +87,7 @@ exports[`CardView renders a Horizontal Card with contents correctly 1`] = `
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -107,6 +109,7 @@ exports[`CardView renders a Horizontal Card with contents correctly 1`] = `
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -128,6 +131,7 @@ exports[`CardView renders a Horizontal Card with contents correctly 1`] = `
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -209,6 +213,7 @@ exports[`CardView renders a Vertical Card with an onClick function specified cor
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -260,6 +265,7 @@ exports[`CardView renders a Vertical Card with contents correctly 1`] = `
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -281,6 +287,7 @@ exports[`CardView renders a Vertical Card with contents correctly 1`] = `
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;
@@ -302,6 +309,7 @@ exports[`CardView renders a Vertical Card with contents correctly 1`] = `
         {
           -moz-osx-font-smoothing: grayscale;
           -webkit-font-smoothing: antialiased;
+          flex-basis: auto;
           flex-shrink: 0;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 18px;

diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md
@@ -8494,6 +8494,7 @@ export type IStackItemComponent = IComponent<IStackItemProps, IStackItemTokens,
 // @public (undocumented)
 export interface IStackItemProps extends IStackItemSlots, IStyleableComponentProps<IStackItemProps, IStackItemTokens, IStackItemStyles>, React_2.HTMLAttributes<HTMLElement> {
     align?: 'auto' | 'stretch' | 'baseline' | 'start' | 'center' | 'end';
+    basis?: React_2.CSSProperties['flexBasis'];
     className?: string;
     disableShrink?: boolean;
     grow?: boolean | number | 'inherit' | 'initial' | 'unset';

diff --git a/packages/react/src/components/Stack/StackItem/StackItem.styles.ts b/packages/react/src/components/Stack/StackItem/StackItem.styles.ts
@@ -11,7 +11,7 @@ const alignMap: { [key: string]: string } = {
 };
 
 export const StackItemStyles: IStackItemComponent['styles'] = (props, theme, tokens): IStackItemStylesReturnType => {
-  const { grow, shrink, disableShrink, align, verticalFill, order, className } = props;
+  const { grow, shrink, disableShrink, align, verticalFill, order, className, basis = 'auto' } = props;
 
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
@@ -20,12 +20,15 @@ export const StackItemStyles: IStackItemComponent['styles'] = (props, theme, tok
       theme.fonts.medium,
       classNames.root,
       {
+        flexBasis: basis,
         margin: tokens.margin,
         padding: tokens.padding,
         height: verticalFill ? '100%' : 'auto',
         width: 'auto',
       },
-      grow && { flexGrow: grow === true ? 1 : grow },
+      grow && {
+        flexGrow: grow === true ? 1 : grow,
+      },
       (disableShrink || (!grow && !shrink)) && {
         flexShrink: 0,
       },

diff --git a/packages/react/src/components/Stack/StackItem/StackItem.types.ts b/packages/react/src/components/Stack/StackItem/StackItem.types.ts
@@ -78,6 +78,13 @@ export interface IStackItemProps
    */
   verticalFill?: boolean;
 
+  /**
+   * Defines the initial main size of the StackItem, setting the size of the content box unless otherwise set with
+   * box-sizing.
+   * @defaultvalue auto
+   */
+  basis?: React.CSSProperties['flexBasis'];
+
   /**
    * Defines order of the StackItem.
    * @defaultvalue 0