From 916928fb4a449b3dafad93a79cf9d833a155cf87 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 24 Aug 2023 11:58:48 -0700 Subject: [PATCH 1/3] feat(Stack): Add deprecated flag to render null when receiving a falsy value. --- packages/react/etc/react.api.md | 2 ++ packages/react/src/components/Stack/Stack.tsx | 26 +++++++++++++++---- .../react/src/components/Stack/Stack.types.ts | 10 +++++++ 3 files changed, 33 insertions(+), 5 deletions(-) diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md index 2bb36c38c527e..a6f7d4db9d42c 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, IStyleableComponentProps, React_2.HTMLAttributes { as?: React_2.ElementType>; 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 20223c8488c24..6d03a5c8c05d2 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>(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 1a8fb4cd5a753..092a6a18e52f2 100644 --- a/packages/react/src/components/Stack/Stack.types.ts +++ b/packages/react/src/components/Stack/Stack.types.ts @@ -156,6 +156,16 @@ export interface IStackProps * @defaultvalue false */ enableScopedSelectors?: boolean; + + /** + * When receiving a falsy value, render null instead. Default behavior allows rendering falsy values so cases like + * this one can happen: + * ```tsx + * 0 1 2 3 4 + * ``` + * @deprecated + */ + doNotRenderFalsyValues?: boolean; } /** From a90b1caac4c4e134bdb7b142813a5e3376b0d1ec Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 24 Aug 2023 11:59:10 -0700 Subject: [PATCH 2/3] change file --- ...luentui-react-d1e31a08-0447-430f-8c8a-7ecdbae1691f.json | 7 +++++++ 1 file changed, 7 insertions(+) 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 0000000000000..5a9da3a76b6ea --- /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" +} From d92bbef0ae0e9367297f0987e7870869eaa10c3b Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 24 Aug 2023 15:30:44 -0700 Subject: [PATCH 3/3] types change --- packages/react/src/components/Stack/Stack.types.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/Stack/Stack.types.ts b/packages/react/src/components/Stack/Stack.types.ts index 092a6a18e52f2..f776eff0c9e29 100644 --- a/packages/react/src/components/Stack/Stack.types.ts +++ b/packages/react/src/components/Stack/Stack.types.ts @@ -158,12 +158,13 @@ export interface IStackProps enableScopedSelectors?: boolean; /** - * When receiving a falsy value, render null instead. Default behavior allows rendering falsy values so cases like + * When receiving a falsy value, render null instead. + * + * @deprecated Default behavior now allows rendering falsy values so cases like * this one can happen: * ```tsx * 0 1 2 3 4 * ``` - * @deprecated */ doNotRenderFalsyValues?: boolean; }