From 846a45467d7e70f3960950b6eb42d3a1d3cef2e5 Mon Sep 17 00:00:00 2001
From: Esteban Munoz Facusse <esteban.230@hotmail.com>
Date: Thu, 24 Aug 2023 16:21:36 -0700
Subject: [PATCH] feat(Stack): Add deprecated flag to render null when
 receiving a falsy value (#28978)

* feat(Stack): Add deprecated flag to render null when receiving a falsy value.

* change file

* types change
---
 ...-d1e31a08-0447-430f-8c8a-7ecdbae1691f.json |  7 +++++
 packages/react/etc/react.api.md               |  2 ++
 packages/react/src/components/Stack/Stack.tsx | 26 +++++++++++++++----
 .../react/src/components/Stack/Stack.types.ts | 11 ++++++++
 4 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 change/@fluentui-react-d1e31a08-0447-430f-8c8a-7ecdbae1691f.json

diff --git a/change/@fluentui-react-d1e31a08-0447-430f-8c8a-7ecdbae1691f.json b/change/@fluentui-react-d1e31a08-0447-430f-8c8a-7ecdbae1691f.json
new file mode 100644
index 00000000000000..5a9da3a76b6eaf
--- /dev/null
+++ b/change/@fluentui-react-d1e31a08-0447-430f-8c8a-7ecdbae1691f.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat(Stack): Add deprecated flag to render null when receiving a falsy value.",
+  "packageName": "@fluentui/react",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md
index 2bb36c38c527ee..a6f7d4db9d42c4 100644
--- a/packages/react/etc/react.api.md
+++ b/packages/react/etc/react.api.md
@@ -8789,6 +8789,8 @@ export interface IStackItemTokens {
 export interface IStackProps extends ISlottableProps<IStackSlots>, IStyleableComponentProps<IStackProps, IStackTokens, IStackStyles>, React_2.HTMLAttributes<HTMLElement> {
     as?: React_2.ElementType<React_2.HTMLAttributes<HTMLElement>>;
     disableShrink?: boolean;
+    // @deprecated
+    doNotRenderFalsyValues?: boolean;
     enableScopedSelectors?: boolean;
     // @deprecated
     gap?: number | string;
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
index 20223c8488c24f..6d03a5c8c05d2f 100644
--- a/packages/react/src/components/Stack/Stack.tsx
+++ b/packages/react/src/components/Stack/Stack.tsx
@@ -9,7 +9,15 @@ import type { IStackComponent, IStackProps, IStackSlots } from './Stack.types';
 import type { IStackItemProps } from './StackItem/StackItem.types';
 
 const StackView: IStackComponent['view'] = props => {
-  const { as: RootType = 'div', disableShrink = false, enableScopedSelectors = false, wrap, ...rest } = props;
+  const {
+    as: RootType = 'div',
+    disableShrink = false,
+    // eslint-disable-next-line deprecation/deprecation
+    doNotRenderFalsyValues = false,
+    enableScopedSelectors = false,
+    wrap,
+    ...rest
+  } = props;
 
   warnDeprecations('Stack', props, {
     gap: 'tokens.childrenGap',
@@ -18,7 +26,11 @@ const StackView: IStackComponent['view'] = props => {
     padding: 'tokens.padding',
   });
 
-  const stackChildren = _processStackChildren(props.children, { disableShrink, enableScopedSelectors });
+  const stackChildren = _processStackChildren(props.children, {
+    disableShrink,
+    enableScopedSelectors,
+    doNotRenderFalsyValues,
+  });
 
   const nativeProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(rest, htmlElementProperties);
 
@@ -40,18 +52,22 @@ const StackView: IStackComponent['view'] = props => {
 
 function _processStackChildren(
   children: React.ReactNode,
-  { disableShrink, enableScopedSelectors }: { disableShrink: boolean; enableScopedSelectors: boolean },
+  {
+    disableShrink,
+    enableScopedSelectors,
+    doNotRenderFalsyValues,
+  }: { disableShrink: boolean; enableScopedSelectors: boolean; doNotRenderFalsyValues: boolean },
 ): (React.ReactChild | React.ReactFragment | React.ReactPortal)[] {
   let childrenArray = React.Children.toArray(children);
 
   childrenArray = React.Children.map(childrenArray, child => {
     if (!child || !React.isValidElement(child)) {
-      return child;
+      return doNotRenderFalsyValues ? null : child;
     }
 
     if (child.type === React.Fragment) {
       return child.props.children
-        ? _processStackChildren(child.props.children, { disableShrink, enableScopedSelectors })
+        ? _processStackChildren(child.props.children, { disableShrink, enableScopedSelectors, doNotRenderFalsyValues })
         : null;
     }
 
diff --git a/packages/react/src/components/Stack/Stack.types.ts b/packages/react/src/components/Stack/Stack.types.ts
index 1a8fb4cd5a7539..f776eff0c9e294 100644
--- a/packages/react/src/components/Stack/Stack.types.ts
+++ b/packages/react/src/components/Stack/Stack.types.ts
@@ -156,6 +156,17 @@ export interface IStackProps
    * @defaultvalue false
    */
   enableScopedSelectors?: boolean;
+
+  /**
+   * When receiving a falsy value, render null instead.
+   *
+   * @deprecated Default behavior now allows rendering falsy values so cases like
+   * this one can happen:
+   * ```tsx
+   * <Stack>0 1 2 3 4</Stack>
+   * ```
+   */
+  doNotRenderFalsyValues?: boolean;
 }
 
 /**