Update FieldsetAsLabel to add description

Author: irshadahmad21

packages/js/ui/src/wp/fieldset-as-label/index.tsx

@@ -2,21 +2,36 @@ import { __experimentalView as View } from '@wordpress/components';
 import clsx from 'clsx';
 import styles from './styles.module.scss';
 
-export type FieldsetAsLabelProps = {
+export type FieldsetAsLabelProps = React.HTMLAttributes<HTMLFieldSetElement> & {
 	label: React.ReactNode;
-	children?: React.ReactNode;
+	labelProps?: React.HTMLAttributes<HTMLLegendElement>;
+	description?: React.ReactNode;
 };
 
-export function FieldsetAsLabel({ label, children }: FieldsetAsLabelProps) {
+export function FieldsetAsLabel({
+	label,
+	children,
+	labelProps,
+	description,
+	...props
+}: FieldsetAsLabelProps) {
 	return (
-		<fieldset>
+		<fieldset {...props}>
 			<View
+				{...labelProps}
 				as="legend"
 				className={clsx('components-base-control__label', styles.label)}
 			>
 				{label}
 			</View>
 			<View>{children}</View>
+			{description ? (
+				<View
+					className={clsx('components-base-control__help', styles.description)}
+				>
+					{description}
+				</View>
+			) : null}
 		</fieldset>
 	);
 }

packages/js/ui/src/wp/fieldset-as-label/styles.module.scss

@@ -7,3 +7,11 @@
     margin-bottom: calc(8px);
     padding: 0px;
 }
+
+.description {
+    margin-top: calc(8px);
+    margin-bottom: 0px;
+    font-size: 12px;
+    font-style: normal;
+    color: rgb(117, 117, 117);
+}