docs: allow to set a custom label width in demos

marigold-ui · Oct 11, 2024 · 1b85f07 · 1b85f07
1 parent caefbe4
commit 1b85f07
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/docs/ui/ComponentDemo.tsx b/docs/ui/ComponentDemo.tsx
@@ -27,6 +27,7 @@ export interface ComponentDemoProps {
   source: string;
   children?: ReactNode;
   disableLabelWidth?: boolean;
+  labelWidth?: string;
 }
 
 // Component
@@ -35,6 +36,7 @@ export const ComponentDemo = ({
   name,
   children,
   disableLabelWidth,
+  labelWidth = '100px',
 }: ComponentDemoProps) => {
   if (!registry[name]) {
     throw Error(`No demo with name "${name}" found in the registry.`);
@@ -45,7 +47,7 @@ export const ComponentDemo = ({
 
   const Wrapper = ({ children }: { children: ReactNode }) =>
     current === 'core' && !disableLabelWidth ? (
-      <FieldGroup labelWidth="100px">{children}</FieldGroup>
+      <FieldGroup labelWidth={labelWidth}>{children}</FieldGroup>
     ) : (
       children
     );