From ca4f841c5cc8ef13ba86e375eba1ea51ec92a1cf Mon Sep 17 00:00:00 2001 From: Andy Choi Date: Thu, 28 Mar 2024 10:32:21 -0700 Subject: [PATCH 1/2] Fix React warning in ButtonGroup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This change fixes the following issue: ButtonGroup was adding positionInGroup to all children rather than just Buttons. For example, in the following, both the Buttons and the child spans get positionInGroup props: ``` ``` This results in a React warning: “Warning: React does not recognize the `positionInGroup` prop on a DOM element...” The review comment in the original code change causing this hints at this issue as well: https://github.com/themesberg/flowbite-react/pull/1273#issuecomment-1991553683 --- packages/ui/src/components/Button/ButtonGroup.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/components/Button/ButtonGroup.tsx b/packages/ui/src/components/Button/ButtonGroup.tsx index 2d758af51..91e1844a2 100644 --- a/packages/ui/src/components/Button/ButtonGroup.tsx +++ b/packages/ui/src/components/Button/ButtonGroup.tsx @@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge"; import { mergeDeep } from "../../helpers/merge-deep"; import { getTheme } from "../../theme-store"; import type { DeepPartial } from "../../types"; -import type { ButtonProps } from "../Button"; +import { Button, type ButtonProps } from "../Button"; export interface FlowbiteButtonGroupTheme { base: string; @@ -29,19 +29,20 @@ const processChildren = ( ): ReactNode => { return Children.map(children as ReactElement[], (child, index) => { if (isValidElement(child)) { + const positionInGroupProp = (child.type == Button) ? { positionInGroup: determinePosition(index, Children.count(children)) } : {}; // Check if the child has nested children if (child.props.children) { // Recursively process nested children return cloneElement(child, { ...child.props, children: processChildren(child.props.children, outline, pill), - positionInGroup: determinePosition(index, Children.count(children)), + ...positionInGroupProp }); } else { return cloneElement(child, { outline, pill, - positionInGroup: determinePosition(index, Children.count(children)), + ...positionInGroupProp }); } } @@ -49,7 +50,7 @@ const processChildren = ( }); }; -const determinePosition = (index: number, totalChildren: number) => { +const determinePosition = (index: number, totalChildren: number): keyof PositionInButtonGroup => { return index === 0 ? "start" : index === totalChildren - 1 ? "end" : "middle"; }; From 728aa5a14128b6d5b7c8d5c5fbdf565bf9495e43 Mon Sep 17 00:00:00 2001 From: Andy Choi Date: Fri, 29 Mar 2024 07:50:39 -0700 Subject: [PATCH 2/2] fix formatting --- packages/ui/src/components/Button/ButtonGroup.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/components/Button/ButtonGroup.tsx b/packages/ui/src/components/Button/ButtonGroup.tsx index 91e1844a2..dca346d94 100644 --- a/packages/ui/src/components/Button/ButtonGroup.tsx +++ b/packages/ui/src/components/Button/ButtonGroup.tsx @@ -29,20 +29,21 @@ const processChildren = ( ): ReactNode => { return Children.map(children as ReactElement[], (child, index) => { if (isValidElement(child)) { - const positionInGroupProp = (child.type == Button) ? { positionInGroup: determinePosition(index, Children.count(children)) } : {}; + const positionInGroupProp = + child.type == Button ? { positionInGroup: determinePosition(index, Children.count(children)) } : {}; // Check if the child has nested children if (child.props.children) { // Recursively process nested children return cloneElement(child, { ...child.props, children: processChildren(child.props.children, outline, pill), - ...positionInGroupProp + ...positionInGroupProp, }); } else { return cloneElement(child, { outline, pill, - ...positionInGroupProp + ...positionInGroupProp, }); } }