docs(samples): remove button row from input scenarios

Author: laske185

packages/samples/react/src/components/FormWrap.tsx

@@ -2,25 +2,27 @@ import React from 'react';
 
 import { KolButton, KolForm } from '@public-ui/react';
 
-export const FormWrap = <P,>({ RefComponent: Component, ...props }: { RefComponent: any } & Partial<P>) => {
+export const FormWrap = <P,>({ RefComponent: Component, showButtons = true, ...props }: { RefComponent: any; showButtons?: boolean } & Partial<P>) => {
 	return (
 		<KolForm className="w-full">
 			<div className="grid gap-4">
 				<Component {...props} />
-				<div className="flex gap-4">
-					<KolButton _label="Submit" _icons="codicon codicon-arrow-right" _type="submit" _variant="primary" />
-					<KolButton
-						_label="Bunte Icons"
-						_icons={{
-							left: { icon: 'codicon codicon-heart-filled', style: { color: '#cc006e' } },
-							right: { icon: 'codicon codicon-squirrel', style: { color: '#b41b1b' } },
-						}}
-						_type="submit"
-						_variant="secondary"
-					/>
-					<KolButton _label="Reset" _type="reset" _variant="tertiary" />
-					<KolButton _label="Help" _variant="ghost" />
-				</div>
+				{showButtons && (
+					<div className="flex gap-4">
+						<KolButton _label="Submit" _icons="codicon codicon-arrow-right" _type="submit" _variant="primary" />
+						<KolButton
+							_label="Bunte Icons"
+							_icons={{
+								left: { icon: 'codicon codicon-heart-filled', style: { color: '#cc006e' } },
+								right: { icon: 'codicon codicon-squirrel', style: { color: '#b41b1b' } },
+							}}
+							_type="submit"
+							_variant="secondary"
+						/>
+						<KolButton _label="Reset" _type="reset" _variant="tertiary" />
+						<KolButton _label="Help" _variant="ghost" />
+					</div>
+				)}
 			</div>
 		</KolForm>
 	);

packages/samples/react/src/components/combobox/basic.tsx

@@ -10,7 +10,7 @@ export const ComboboxBasic: FC = () => {
 				<p>KolCombobox combines a text input with a suggestion list, enabling users to either type in a value or to select on of the suggestions.</p>
 			</SampleDescription>
 
-			<FormWrap RefComponent={ComboboxVariants} />
+			<FormWrap RefComponent={ComboboxVariants} showButtons={false} />
 		</>
 	);
 };

packages/samples/react/src/components/input-checkbox/basic.tsx

@@ -11,6 +11,6 @@ export const InputCheckboxBasic: FC = () => (
 			<p>KolInputCheckbox renders a checkbox. The sample shows KolInputCheckbox in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputCheckboxVariants} />
+		<FormWrap RefComponent={InputCheckboxVariants} showButtons={false} />
 	</>
 );

packages/samples/react/src/components/input-checkbox/button.tsx

@@ -12,6 +12,6 @@ export const InputCheckboxButton: FC = () => (
 			<p>This sample shows KolInputCheckbox in the variant &quot;button&quot;.</p>
 		</SampleDescription>
 
-		<FormWrap<Components.KolInputCheckbox> RefComponent={InputCheckboxVariants} _variant="button" />
+		<FormWrap<Components.KolInputCheckbox> RefComponent={InputCheckboxVariants} _variant="button" showButtons={false} />
 	</>
 );

packages/samples/react/src/components/input-checkbox/switch.tsx

@@ -10,6 +10,6 @@ export const InputCheckboxSwitch: FC = () => (
 			<p>This sample shows KolInputCheckbox in the variant &quot;switch&quot;.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputCheckboxVariants} _variant="switch" />
+		<FormWrap RefComponent={InputCheckboxVariants} _variant="switch" showButtons={false} />
 	</>
 );

packages/samples/react/src/components/input-color/basic.tsx

@@ -11,6 +11,6 @@ export const InputColorBasic: FC = () => (
 			<p>KolInputColor renders a color input. The sample shows KolInputColor in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputColorVariants} />
+		<FormWrap RefComponent={InputColorVariants} showButtons={false} />
 	</>
 );

packages/samples/react/src/components/input-date/basic.tsx

@@ -11,6 +11,6 @@ export const InputDateBasic: FC = () => (
 			<p>KolInputDate renders all types of fields for date and time input. The sample shows KolInputDate in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputDateVariants} />
+		<FormWrap RefComponent={InputDateVariants} showButtons={false} />
 	</>
 );

packages/samples/react/src/components/input-email/basic.tsx

@@ -11,6 +11,6 @@ export const InputEmailBasic: FC = () => (
 			<p>KolInputEmail renders an email input field. The sample shows KolInputEmail in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputEmailVariants} />
+		<FormWrap RefComponent={InputEmailVariants} showButtons={false} />
 	</>
 );

packages/samples/react/src/components/input-file/basic.tsx

@@ -11,6 +11,6 @@ export const InputFileBasic: FC = () => (
 			<p>KolInputFile renders a file input field. The sample shows KolInputFile in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputFileVariants} />
+		<FormWrap RefComponent={InputFileVariants} showButtons={false} />
 	</>
 );

packages/samples/react/src/components/input-number/basic.tsx

@@ -14,6 +14,6 @@ export const InputNumberBasic: FC = () => (
 				emphasize validation rules, supporting examples without form validation, and refrains from additional validation through native HTML element validation.
 			</p>
 		</SampleDescription>
-		<FormWrap RefComponent={InputNumberVariants} />
+		<FormWrap RefComponent={InputNumberVariants} showButtons={false} />
 	</>
 );