Sample App: Implement SampleColumns for conditional grid (#7369)

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type PropsWithChildren } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+export function SampleColumns({ children }: PropsWithChildren) {
+	const [searchParams] = useSearchParams();
+	const noColumns = searchParams.has('noColumns');
+
+	return <div className={noColumns ? '' : 'grid md:grid-cols-2 gap-4'}>{children}</div>;
+}

packages/samples/react/src/components/combobox/partials/variants.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import type { Components } from '@public-ui/components';
 
 import { ComboboxCases } from './cases';
+import { SampleColumns } from '../../SampleColumns';
 
 export const ComboboxVariants = (props: Partial<Components.KolCombobox>) => {
 	return (
-		<div className="w-full grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<ComboboxCases {...props} />
@@ -14,6 +15,6 @@ export const ComboboxVariants = (props: Partial<Components.KolCombobox>) => {
 				<legend>Text (hideLabel)</legend>
 				<ComboboxCases {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 };

packages/samples/react/src/components/input-checkbox/partials/variants.tsx

@@ -3,10 +3,11 @@ import React, { forwardRef } from 'react';
 import { InputCheckboxCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Components.KolInputCheckbox>(function InputCheckboxVariant(props, ref) {
 	return (
 		<>
-			<div className="grid md:grid-cols-2 gap-4">
+			<SampleColumns>
 				<fieldset>
 					<legend>Label align &quot;left&quot; with label</legend>
 					<InputCheckboxCases {...props} _labelAlign="left" />
@@ -15,8 +16,8 @@ export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Com
 					<legend>Label align &quot;left&quot; without Label (hideLabel)</legend>
 					<InputCheckboxCases ref={ref} {...props} _hideLabel _labelAlign="left" />
 				</fieldset>
-			</div>
-			<div className="grid md:grid-cols-2 gap-4">
+			</SampleColumns>
+			<SampleColumns>
 				<fieldset>
 					<legend>Label align &quot;right&quot; with label</legend>
 					<InputCheckboxCases {...props} />
@@ -25,7 +26,7 @@ export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Com
 					<legend>Label align &quot;right&quot; without Label (hideLabel)</legend>
 					<InputCheckboxCases ref={ref} {...props} _hideLabel />
 				</fieldset>
-			</div>
+			</SampleColumns>
 		</>
 	);
 });

packages/samples/react/src/components/input-color/partials/variants.tsx

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputColorCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputColorVariants = forwardRef<HTMLKolInputColorElement, Components.KolInputColor>(function InputColorVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Color</legend>
 				<InputColorCases {...props} />
@@ -14,6 +15,6 @@ export const InputColorVariants = forwardRef<HTMLKolInputColorElement, Component
 				<legend>Color (hideLabel)</legend>
 				<InputColorCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

packages/samples/react/src/components/input-date/partials/variants.tsx

@@ -4,9 +4,10 @@ import { InputDateCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 import { InputDateMinMaxCases } from './minMax';
+import { SampleColumns } from '../../SampleColumns';
 export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Date</legend>
 				<InputDateCases {...props} />
@@ -19,6 +20,6 @@ export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.
 				<legend>Date (with min/max)</legend>
 				<InputDateMinMaxCases {...props} />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

packages/samples/react/src/components/input-email/partials/variants.tsx

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputEmailCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputEmailVariants = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Email</legend>
 				<InputEmailCases {...props} />
@@ -14,6 +15,6 @@ export const InputEmailVariants = forwardRef<HTMLKolInputEmailElement, Component
 				<legend>Email (hideLabel)</legend>
 				<InputEmailCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

packages/samples/react/src/components/input-file/partials/variants.tsx

@@ -1,11 +1,12 @@
 import React, { forwardRef } from 'react';
 
 import { InputFileCases } from './cases';
+import { SampleColumns } from '../../SampleColumns';
 
 import type { Components } from '@public-ui/components';
 export const InputFileVariants = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>File</legend>
 				<InputFileCases {...props} />
@@ -14,6 +15,6 @@ export const InputFileVariants = forwardRef<HTMLKolInputFileElement, Components.
 				<legend>File (hideLabel)</legend>
 				<InputFileCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

packages/samples/react/src/components/input-number/partials/variants.tsx

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputNumberCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputNumberVariants = forwardRef<HTMLKolInputNumberElement, Components.KolInputNumber>(function InputNumberVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Number</legend>
 				<InputNumberCases {...props} />
@@ -14,6 +15,6 @@ export const InputNumberVariants = forwardRef<HTMLKolInputNumberElement, Compone
 				<legend>Number (hideLabel)</legend>
 				<InputNumberCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

packages/samples/react/src/components/input-password/partials/variants.tsx

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputPasswordCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputPasswordVariants = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Password</legend>
 				<InputPasswordCases {...props} />
@@ -14,6 +15,6 @@ export const InputPasswordVariants = forwardRef<HTMLKolInputPasswordElement, Com
 				<legend>Password (hideLabel)</legend>
 				<InputPasswordCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

packages/samples/react/src/components/input-radio/partials/variants.tsx

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputRadioCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Radio</legend>
 				<InputRadioCases {...props} />
@@ -14,6 +15,6 @@ export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Component
 				<legend>Radio (hideLabel)</legend>
 				<InputRadioCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

packages/samples/react/src/components/input-range/partials/variants.tsx

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputRangeCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputRangeVariants = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Range</legend>
 				<InputRangeCases {...props} />
@@ -14,6 +15,6 @@ export const InputRangeVariants = forwardRef<HTMLKolInputRangeElement, Component
 				<legend>Range (hideLabel)</legend>
 				<InputRangeCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

packages/samples/react/src/components/input-text/partials/variants.tsx

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputTextCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputTextVariants = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<InputTextCases {...props} />
@@ -14,6 +15,6 @@ export const InputTextVariants = forwardRef<HTMLKolInputTextElement, Components.
 				<legend>Text (hideLabel)</legend>
 				<InputTextCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

packages/samples/react/src/components/select/partials/variants.tsx

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { SelectCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const SelectVariants = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<SelectCases {...props} />
@@ -14,6 +15,6 @@ export const SelectVariants = forwardRef<HTMLKolSelectElement, Components.KolSel
 				<legend>Text (hideLabel)</legend>
 				<SelectCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

packages/samples/react/src/components/single-select/partials/variants.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 
 import { SingleSelectCases } from './cases';
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 
 export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<SingleSelectCases {...props} />
@@ -14,6 +15,6 @@ export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 				<legend>Text (hideLabel)</legend>
 				<SingleSelectCases {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 };

packages/samples/react/src/components/textarea/partials/variants.tsx

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { TextareaCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const TextareaVariants = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<TextareaCases {...props} />
@@ -14,6 +15,6 @@ export const TextareaVariants = forwardRef<HTMLKolTextareaElement, Components.Ko
 				<legend>Text (hideLabel)</legend>
 				<TextareaCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

packages/tools/visual-tests/tests/sample-app.routes.js

@@ -105,7 +105,7 @@ ROUTES.set('card/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('combobox/basic', {
+ROUTES.set('combobox/basic?noColumns', {
 	axe: {
 		skipFailures: false,
 	},
@@ -174,22 +174,21 @@ ROUTES.set('image/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('input-checkbox/basic', null);
-ROUTES.set('input-checkbox/button', null);
-ROUTES.set('input-checkbox/switch', null);
-ROUTES.set('input-color/basic', null);
-ROUTES.set('input-date/basic', null);
-ROUTES.set('input-email/basic', null);
-ROUTES.set('input-file/basic', null);
-ROUTES.set('input-number/basic', null);
-ROUTES.set('input-password/basic', null);
-ROUTES.set('input-password/show-password', null);
-ROUTES.set('input-radio/basic', null);
-ROUTES.set('input-radio/horizontal', null);
-ROUTES.set('input-radio/object', null);
-ROUTES.set('input-range/basic', null);
-ROUTES.set('input-text/basic', null);
-ROUTES.set('input-text/focus', null);
+ROUTES.set('input-checkbox/basic?noColumns', null);
+ROUTES.set('input-checkbox/button?noColumns', null);
+ROUTES.set('input-checkbox/switch?noColumns', null);
+ROUTES.set('input-color/basic?noColumns', null);
+ROUTES.set('input-date/basic?noColumns', null);
+ROUTES.set('input-email/basic?noColumns', null);
+ROUTES.set('input-file/basic?noColumns', null);
+ROUTES.set('input-number/basic?noColumns', null);
+ROUTES.set('input-password/basic?noColumns', null);
+ROUTES.set('input-password/show-password?noColumns', null);
+ROUTES.set('input-radio/basic?noColumns', null);
+ROUTES.set('input-radio/horizontal?noColumns', null);
+ROUTES.set('input-radio/object?noColumns', null);
+ROUTES.set('input-range/basic?noColumns', null);
+ROUTES.set('input-text/basic?noColumns', null);
 ROUTES.set('kolibri/basic', {
 	axe: {
 		skipFailures: false,
@@ -268,7 +267,7 @@ ROUTES.set('quote/block', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('select/basic', null);
+ROUTES.set('select/basic?noColumns', null);
 ROUTES.set('skip-nav/basic', {
 	axe: {
 		skipFailures: false,
@@ -279,7 +278,7 @@ ROUTES.set('spin/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('single-select/basic', {
+ROUTES.set('single-select/basic?noColumns', {
 	axe: {
 		skipFailures: false,
 	},
@@ -369,7 +368,7 @@ ROUTES.set('textarea/adjust-height', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('textarea/basic', null);
+ROUTES.set('textarea/basic?noColumns', null);
 ROUTES.set('textarea/resize', {
 	axe: {
 		skipFailures: false,