@public-ui/sample-react 4.3.1-rc.0 → 4.3.1-rc.4

package/src/components/input-password/partials/cases.tsx

@@ -3,40 +3,77 @@ import { KolInputPassword } from '@public-ui/react-v19';
 import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
+import { SampleBlock } from '../../SampleBlock';
 
-export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordCases(props, ref) {
+type InputPasswordCasesProps = Components.KolInputPassword & {
+	/** Prefixes the visual block ids so the same cases can be rendered more than once per route. */
+	blockIdPrefix: string;
+	/**
+	 * Restricts the snapshots of this rendering to the case with this id; every other block is
+	 * rendered with `skipSnapshot`. Used for the `_hideLabel` groups: hiding the label mainly
+	 * changes how the message is laid out, so snapshotting every case a second time would only
+	 * duplicate the labelled group.
+	 */
+	snapshotOnly?: string;
+};
+
+export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, InputPasswordCasesProps>(function InputPasswordCases(
+	{ blockIdPrefix, snapshotOnly, ...props },
+	ref,
+) {
+	// Blocks outside `snapshotOnly` stay visible in the sample but are excluded from the snapshots.
+	const block = (caseId: string) => ({ id: `${blockIdPrefix}-${caseId}`, skipSnapshot: snapshotOnly !== undefined && caseId !== snapshotOnly });
 	return (
 		<div className="grid gap-4">
-			<div className="black-background">
+			<SampleBlock {...block('black-bg')} className="black-background">
 				<KolInputPassword {...props} _label="Passwort (Black background test)" />
-			</div>
-			<KolInputPassword
-				{...props}
-				ref={ref}
-				_accessKey="P"
-				_required
-				_hint={HINT_MSG}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_placeholder="Mit Icons"
-				_label="Passwort"
-				_icons={{
-					left: {
-						icon: 'kolicon-chevron-left',
-					},
-					right: {
-						icon: 'kolicon-chevron-right',
-					},
-				}}
-				_touched
-			/>
-			<KolInputPassword {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Passwort" _touched />
-			<KolInputPassword {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Passwort" _touched />
-			<KolInputPassword {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Passwort" _touched />
-			<KolInputPassword {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Passwort" _touched />
-			<KolInputPassword {...props} _disabled _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Passwort (Disabled)" _touched />
-			<KolInputPassword {...props} _readOnly _label="Passwort (Readonly)" />
-			<KolInputPassword {...props} ref={ref} _shortKey="c" _label="With access key" />
-			<KolInputPassword {...props} ref={ref} _shortKey="s" _label="With short key" />
+			</SampleBlock>
+			<SampleBlock {...block('icons-error')}>
+				<KolInputPassword
+					{...props}
+					ref={ref}
+					_accessKey="P"
+					_required
+					_hint={HINT_MSG}
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_placeholder="Mit Icons"
+					_label="Passwort"
+					_icons={{
+						left: {
+							icon: 'kolicon-chevron-left',
+						},
+						right: {
+							icon: 'kolicon-chevron-right',
+						},
+					}}
+					_touched
+					_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('msg-info')}>
+				<KolInputPassword {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Passwort" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-warning')}>
+				<KolInputPassword {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Passwort" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-success')}>
+				<KolInputPassword {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Passwort" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-default')}>
+				<KolInputPassword {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Passwort" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('disabled')}>
+				<KolInputPassword {...props} _disabled _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Passwort (Disabled)" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('readonly')}>
+				<KolInputPassword {...props} _readOnly _label="Passwort (Readonly)" />
+			</SampleBlock>
+			<SampleBlock {...block('access-key')}>
+				<KolInputPassword {...props} ref={ref} _shortKey="c" _label="With access key" />
+			</SampleBlock>
+			<SampleBlock {...block('short-key')}>
+				<KolInputPassword {...props} ref={ref} _shortKey="s" _label="With short key" />
+			</SampleBlock>
 		</div>
 	);
 });

package/src/components/input-password/partials/variants.tsx

@@ -4,17 +4,16 @@ import { InputPasswordCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { SampleGroup } from '../../SampleGroup';
 export const InputPasswordVariants = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordVariant(props, ref) {
 	return (
 		<SampleColumns>
-			<fieldset>
-				<legend>Password</legend>
-				<InputPasswordCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Password (hideLabel)</legend>
-				<InputPasswordCases ref={ref} {...props} _hideLabel />
-			</fieldset>
+			<SampleGroup heading="Password">
+				<InputPasswordCases blockIdPrefix="label" {...props} />
+			</SampleGroup>
+			<SampleGroup heading="Password (hideLabel)">
+				<InputPasswordCases blockIdPrefix="hide-label" snapshotOnly="icons-error" ref={ref} {...props} _hideLabel />
+			</SampleGroup>
 		</SampleColumns>
 	);
 });

package/src/components/input-password/show-password.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React, { useRef } from 'react';
 
 import { KolForm, KolInputPassword } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputPasswordShowPassword: FC = () => {
@@ -16,25 +17,27 @@ export const InputPasswordShowPassword: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<KolForm className="w-full">
-				<KolInputPassword _placeholder="With 'Show password' button" _label="Password" ref={passwordRef} className="block" _visibilityToggle={true} />
-				<KolInputPassword
-					_placeholder="With 'Show password' button"
-					_label="Password"
-					ref={passwordRef}
-					className="block"
-					_visibilityToggle={true}
-					_value="Password"
-				/>
-				<KolInputPassword
-					_placeholder="With 'Show password' button and disabled"
-					_label="Password"
-					ref={passwordRef}
-					className="block"
-					_disabled
-					_visibilityToggle={true}
-				/>
-			</KolForm>
+			<SampleBlock id="show-password">
+				<KolForm className="w-full">
+					<KolInputPassword _placeholder="With 'Show password' button" _label="Password" ref={passwordRef} className="block" _visibilityToggle={true} />
+					<KolInputPassword
+						_placeholder="With 'Show password' button"
+						_label="Password"
+						ref={passwordRef}
+						className="block"
+						_visibilityToggle={true}
+						_value="Password"
+					/>
+					<KolInputPassword
+						_placeholder="With 'Show password' button and disabled"
+						_label="Password"
+						ref={passwordRef}
+						className="block"
+						_disabled
+						_visibilityToggle={true}
+					/>
+				</KolForm>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/input-radio/horizontal.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 
 import { KolButton, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/react-v19';
 
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 import type { OrientationPropType } from '@public-ui/components';
@@ -37,10 +38,10 @@ export const InputRadioHorizontal: FC = () => {
 			</div>
 			{show && (
 				<KolForm>
-					<div className="container my-4 d-grid gap-4">
+					<SampleBlock id="orientation" className="container my-4 d-grid gap-4">
 						<KolInputRadio _label={`Test (${orientation})`} _options={options} _orientation={orientation} _required />
 						<KolInputRadio _hideLabel _label={`Test (${orientation})`} _options={options} _orientation={orientation} _required />
-					</div>
+					</SampleBlock>
 				</KolForm>
 			)}
 		</div>

package/src/components/input-radio/objectValue.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { KolForm, KolInputRadio } from '@public-ui/react-v19';
 
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputRadioObjectValue: FC = () => {
@@ -21,16 +22,16 @@ export const InputRadioObjectValue: FC = () => {
 				<p>
 					In this example for <code>KolInputRadio</code>, the values of the options are defined as objects.
 				</p>
-				<div className="container my-4 d-grid gap-4">
+				<SampleBlock id="object-value" className="container my-4 d-grid gap-4">
 					<KolInputRadio _value={options[1].value} _options={options} _label="Test (with object value)" />
-				</div>
+				</SampleBlock>
 
 				<p>
 					In this example for <code>KolInputRadio</code>, no value is set.
 				</p>
-				<div className="container my-4 d-grid gap-4">
+				<SampleBlock id="no-value" className="container my-4 d-grid gap-4">
 					<KolInputRadio _options={options} _label="Test (without value)" />
-				</div>
+				</SampleBlock>
 			</KolForm>
 		</div>
 	);

package/src/components/input-radio/partials/cases.tsx

@@ -5,68 +5,98 @@ import { KolInputRadio } from '@public-ui/react-v19';
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
 import type { Components } from '@public-ui/components';
-export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioCases(props, ref) {
+import { SampleBlock } from '../../SampleBlock';
+
+type InputRadioCasesProps = Components.KolInputRadio & {
+	/** Prefixes the visual block ids so the same cases can be rendered more than once per route. */
+	blockIdPrefix: string;
+	/**
+	 * Restricts the snapshots of this rendering to the case with this id; every other block is
+	 * rendered with `skipSnapshot`. Used for the `_hideLabel` groups: hiding the label mainly
+	 * changes how the message is laid out, so snapshotting every case a second time would only
+	 * duplicate the labelled group.
+	 */
+	snapshotOnly?: string;
+};
+
+export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, InputRadioCasesProps>(function InputRadioCases(
+	{ blockIdPrefix, snapshotOnly, ...props },
+	ref,
+) {
+	// Blocks outside `snapshotOnly` stay visible in the sample but are excluded from the snapshots.
+	const block = (caseId: string) => ({ id: `${blockIdPrefix}-${caseId}`, skipSnapshot: snapshotOnly !== undefined && caseId !== snapshotOnly });
 	return (
 		<div className="grid gap-4">
-			<div className="black-background">
+			<SampleBlock {...block('black-bg')} className="black-background">
 				<KolInputRadio
 					{...props}
 					_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
 					_label="Salutation (Black background test)"
 				/>
-			</div>
-			<KolInputRadio
-				{...props}
-				_required
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_touched
-				_value="Company"
-				_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
-				_label="Salutation (with error)"
-			/>
-			<KolInputRadio
-				{...props}
-				ref={ref}
-				_orientation="horizontal"
-				_required
-				_value="Company"
-				_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)'},{'label':'Company','value':'Company'}]"
-				_label="Salutation (horizontal)"
-			/>
-			<KolInputRadio
-				{...props}
-				_disabled
-				_orientation="horizontal"
-				_required
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_touched
-				_value="Company"
-				_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)'},{'label':'Company','value':'Company'}]"
-				_label="Salutation (horizontal with error)"
-			/>
-			<KolInputRadio
-				{...props}
-				_disabled
-				_value="Company"
-				_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)'},{'label':'Company','value':'Company'}]"
-				_label="Salutation"
-				_touched
-			/>
-			<KolInputRadio
-				{...props}
-				_orientation="horizontal"
-				_required
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_touched
-				_value="Company"
-				_options={[
-					{ label: 'Mrs.', value: 'Mrs.', hint: 'Description for option "Mrs."' },
-					{ label: 'Mr. (disabled)', value: 'Mr.', hint: 'Description for option "Mr."', disabled: true },
-					{ label: 'Company', value: 'Company', hint: 'Description for option "Company"' },
-				]}
-				_label="Salutation (horizontal with error hint and description)"
-				_hint={HINT_MSG}
-			/>
+			</SampleBlock>
+			<SampleBlock {...block('error')}>
+				<KolInputRadio
+					{...props}
+					_required
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_touched
+					_value="Company"
+					_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+					_label="Salutation (with error)"
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('horizontal')}>
+				<KolInputRadio
+					{...props}
+					ref={ref}
+					_orientation="horizontal"
+					_required
+					_value="Company"
+					_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)'},{'label':'Company','value':'Company'}]"
+					_label="Salutation (horizontal)"
+					_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('horizontal-disabled')}>
+				<KolInputRadio
+					{...props}
+					_disabled
+					_orientation="horizontal"
+					_required
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_touched
+					_value="Company"
+					_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)'},{'label':'Company','value':'Company'}]"
+					_label="Salutation (horizontal with error)"
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('disabled')}>
+				<KolInputRadio
+					{...props}
+					_disabled
+					_value="Company"
+					_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)'},{'label':'Company','value':'Company'}]"
+					_label="Salutation"
+					_touched
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('horizontal-hints')}>
+				<KolInputRadio
+					{...props}
+					_orientation="horizontal"
+					_required
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_touched
+					_value="Company"
+					_options={[
+						{ label: 'Mrs.', value: 'Mrs.', hint: 'Description for option "Mrs."' },
+						{ label: 'Mr. (disabled)', value: 'Mr.', hint: 'Description for option "Mr."', disabled: true },
+						{ label: 'Company', value: 'Company', hint: 'Description for option "Company"' },
+					]}
+					_label="Salutation (horizontal with error hint and description)"
+					_hint={HINT_MSG}
+				/>
+			</SampleBlock>
 		</div>
 	);
 });

package/src/components/input-radio/partials/variants.tsx

@@ -3,20 +3,18 @@ import React, { forwardRef } from 'react';
 import { InputRadioCases } from './cases';
 
 import type { Components } from '@public-ui/components';
-import { KolHeading } from '@public-ui/react-v19';
 import { SampleColumns } from '../../SampleColumns';
+import { SampleGroup } from '../../SampleGroup';
 
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (
 		<SampleColumns>
-			<div className="border border-solid border-dark-100 p-3">
-				<KolHeading _level={2} _label="Radio" className="block mb-2" />
-				<InputRadioCases {...props} />
-			</div>
-			<div className="border border-solid border-dark-100 p-3">
-				<KolHeading _level={2} _label="Radio (hideLabel)" className="block mb-2" />
-				<InputRadioCases ref={ref} {...props} _hideLabel />
-			</div>
+			<SampleGroup heading="Radio">
+				<InputRadioCases blockIdPrefix="label" {...props} />
+			</SampleGroup>
+			<SampleGroup heading="Radio (hideLabel)">
+				<InputRadioCases blockIdPrefix="hide-label" snapshotOnly="error" ref={ref} {...props} _hideLabel />
+			</SampleGroup>
 		</SampleColumns>
 	);
 });

package/src/components/input-range/partials/cases.tsx

@@ -3,11 +3,29 @@ import { KolInputRange } from '@public-ui/react-v19';
 import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
+import { SampleBlock } from '../../SampleBlock';
 
-export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeCases(props, ref) {
+type InputRangeCasesProps = Components.KolInputRange & {
+	/** Prefixes the visual block ids so the same cases can be rendered more than once per route. */
+	blockIdPrefix: string;
+	/**
+	 * Restricts the snapshots of this rendering to the case with this id; every other block is
+	 * rendered with `skipSnapshot`. Used for the `_hideLabel` groups: hiding the label mainly
+	 * changes how the message is laid out, so snapshotting every case a second time would only
+	 * duplicate the labelled group.
+	 */
+	snapshotOnly?: string;
+};
+
+export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, InputRangeCasesProps>(function InputRangeCases(
+	{ blockIdPrefix, snapshotOnly, ...props },
+	ref,
+) {
+	// Blocks outside `snapshotOnly` stay visible in the sample but are excluded from the snapshots.
+	const block = (caseId: string) => ({ id: `${blockIdPrefix}-${caseId}`, skipSnapshot: snapshotOnly !== undefined && caseId !== snapshotOnly });
 	return (
 		<div className="grid gap-4">
-			<div className="black-background">
+			<SampleBlock {...block('black-bg')} className="black-background">
 				<KolInputRange
 					{...props}
 					_min={0}
@@ -24,27 +42,46 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 					}}
 					_touched
 				/>
-			</div>
-			<KolInputRange
-				{...props}
-				ref={ref}
-				_accessKey="F"
-				_min={0}
-				_max={50}
-				_step={10}
-				_hint={HINT_MSG}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_label="Slider with error"
-				_touched
-			/>
-			<KolInputRange {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Slider" _touched />
-			<KolInputRange {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Slider" _touched />
-			<KolInputRange {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Slider" _touched />
-			<KolInputRange {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Slider" _touched />
-			<KolInputRange {...props} _disabled _min={0} _max={50} _label="Slider (disabled)" />
-			<KolInputRange {...props} _min={0} _max={50} _label="With access key" _accessKey="c" />
-			<KolInputRange {...props} _min={0} _max={50} _label="With short key" _shortKey="s" />
-			<KolInputRange {...props} _min={0} _max={5} _label="Small range (max=5): number input should not be narrower than 4 digits wide" />
+			</SampleBlock>
+			<SampleBlock {...block('error')}>
+				<KolInputRange
+					{...props}
+					ref={ref}
+					_accessKey="F"
+					_min={0}
+					_max={50}
+					_step={10}
+					_hint={HINT_MSG}
+					_msg={{ _type: 'error', _description: ERROR_MSG }}
+					_label="Slider with error"
+					_touched
+					_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
+				/>
+			</SampleBlock>
+			<SampleBlock {...block('msg-info')}>
+				<KolInputRange {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Slider" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-warning')}>
+				<KolInputRange {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Slider" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-success')}>
+				<KolInputRange {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Slider" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('msg-default')}>
+				<KolInputRange {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Slider" _touched />
+			</SampleBlock>
+			<SampleBlock {...block('disabled')}>
+				<KolInputRange {...props} _disabled _min={0} _max={50} _label="Slider (disabled)" />
+			</SampleBlock>
+			<SampleBlock {...block('access-key')}>
+				<KolInputRange {...props} _min={0} _max={50} _label="With access key" _accessKey="c" />
+			</SampleBlock>
+			<SampleBlock {...block('short-key')}>
+				<KolInputRange {...props} _min={0} _max={50} _label="With short key" _shortKey="s" />
+			</SampleBlock>
+			<SampleBlock {...block('small-range')}>
+				<KolInputRange {...props} _min={0} _max={5} _label="Small range (max=5): number input should not be narrower than 4 digits wide" />
+			</SampleBlock>
 		</div>
 	);
 });

package/src/components/input-range/partials/variants.tsx

@@ -4,17 +4,16 @@ import { InputRangeCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { SampleGroup } from '../../SampleGroup';
 export const InputRangeVariants = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeVariant(props, ref) {
 	return (
 		<SampleColumns>
-			<fieldset>
-				<legend>Range</legend>
-				<InputRangeCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Range (hideLabel)</legend>
-				<InputRangeCases ref={ref} {...props} _hideLabel />
-			</fieldset>
+			<SampleGroup heading="Range">
+				<InputRangeCases blockIdPrefix="label" {...props} />
+			</SampleGroup>
+			<SampleGroup heading="Range (hideLabel)">
+				<InputRangeCases blockIdPrefix="hide-label" snapshotOnly="error" ref={ref} {...props} _hideLabel />
+			</SampleGroup>
 		</SampleColumns>
 	);
 });

package/src/components/input-text/access-short-key.tsx

@@ -1,19 +1,26 @@
 import { KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextAccessShortKey: FC = () => (
-	<>
+	<div className="grid gap-4">
 		<SampleDescription>
 			<p>This story demonstrates access keys and short keys for KolInputText. Access keys provide keyboard shortcuts for focusing inputs.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<SampleBlock id="access-key-value">
 			<KolInputText _label="With access key (Alt+F)" _value="Press Alt+F to focus" _accessKey="f" />
+		</SampleBlock>
+		<SampleBlock id="short-key-value">
 			<KolInputText _label="With short key (Alt+N)" _value="Press Alt+N to focus" _shortKey="n" />
+		</SampleBlock>
+		<SampleBlock id="access-key-placeholder">
 			<KolInputText _label="Access key (Alt+E)" _value="" _placeholder="Email address" _accessKey="e" />
+		</SampleBlock>
+		<SampleBlock id="short-key-placeholder">
 			<KolInputText _label="Short key (Alt+P)" _value="" _placeholder="Phone number" _shortKey="p" />
-		</div>
-	</>
+		</SampleBlock>
+	</div>
 );

package/src/components/input-text/aria-details.tsx

@@ -1,6 +1,7 @@
 import { KolCombobox, KolInputText, KolSelect, KolTextarea } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextAriaDetails: FC = () => (
@@ -16,7 +17,7 @@ export const InputTextAriaDetails: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="grid gap-8">
+		<SampleBlock id="aria-details" className="grid gap-8">
 			{/* Input Form with all 4 components */}
 			<div className="grid gap-4 p-4 border border-gray-300 rounded">
 				<h2 className="text-lg font-semibold">Form Inputs with Shared Details</h2>
@@ -56,6 +57,6 @@ export const InputTextAriaDetails: FC = () => (
 					</li>
 				</ul>
 			</div>
-		</div>
+		</SampleBlock>
 	</>
 );

package/src/components/input-text/background-test.tsx

@@ -1,20 +1,22 @@
 import { KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextBackground: FC = () => (
-	<>
+	<div className="grid gap-4">
 		<SampleDescription>
 			<p>This story showcases the component placed on a colored background.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4 bg-blue-400 p-4 rounded">
+		<SampleBlock id="background-default" className="grid gap-4 bg-blue-400 p-4 rounded">
 			<strong>Default background:</strong>
 			<KolInputText _label="First name" _value="John Doe" />
-
+		</SampleBlock>
+		<SampleBlock id="background-unset" className="grid gap-4 bg-blue-400 p-4 rounded">
 			<strong>Unset background:</strong>
 			<KolInputText style={{ backgroundColor: 'unset' }} _label="First name" _value="John Doe" />
-		</div>
-	</>
+		</SampleBlock>
+	</div>
 );