[Product Block Editor]: add className prop to ButtonWithDropdownMenu component (#43136)

* add className to the ButtonWithDropdownMenu cmp

* chnagelog

* move changelog file location

packages/js/product-editor/changelog/update-product-editor-add-classname-prop-to-button-with-cmp

@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+[Product Block Editor]: add className prop to ButtonWithDropdownMenu component

packages/js/product-editor/src/components/button-with-dropdown-menu/index.tsx

@@ -28,10 +28,13 @@ export const ButtonWithDropdownMenu: React.FC<
 		position: 'bottom left left',
 		offset: 0,
 	},
+	className,
 } ) => {
 	return (
 		<Flex
-			className="woocommerce-button-with-dropdown-menu"
+			className={ `woocommerce-button-with-dropdown-menu${
+				className?.length ? ' ' + className : ''
+			}` }
 			justify="left"
 			gap={ 0 }
 			expanded={ false }

packages/js/product-editor/src/components/button-with-dropdown-menu/stories/index.tsx

@@ -48,5 +48,6 @@ Default.args = {
 			title: 'Second Menu Item Label',
 		},
 	],
+	className: 'my-custom-classname',
 	onButtonClick: console.log, // eslint-disable-line no-console
 };

packages/js/product-editor/src/components/button-with-dropdown-menu/types.ts

@@ -47,4 +47,5 @@ export interface ButtonWithDropdownMenuProps {
 
 	popoverProps?: popoverProps;
 	onButtonClick?: () => void;
+	className?: string;
 }