From 5e47d4838b5b0c910ea3ff3e3679d57ae97a7cd1 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Mon, 30 Sep 2024 18:17:02 +0900
Subject: [PATCH] SelectControl: Add story for `prefix` slot (#65730)

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../src/select-control/stories/index.story.tsx    | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/select-control/stories/index.story.tsx b/packages/components/src/select-control/stories/index.story.tsx
index 018f519e6b6d43..5e57a4eaecd5ab 100644
--- a/packages/components/src/select-control/stories/index.story.tsx
+++ b/packages/components/src/select-control/stories/index.story.tsx
@@ -12,6 +12,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import SelectControl from '../';
+import { InputControlPrefixWrapper } from '../../input-control/input-prefix-wrapper';
 
 const meta: Meta< typeof SelectControl > = {
 	title: 'Components/SelectControl',
@@ -64,6 +65,7 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 export const Default = SelectControlWithState.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
+	label: 'Label',
 	options: [
 		{ value: '', label: 'Select an Option', disabled: true },
 		{ value: 'a', label: 'Option A' },
@@ -76,7 +78,6 @@ export const WithLabelAndHelpText = SelectControlWithState.bind( {} );
 WithLabelAndHelpText.args = {
 	...Default.args,
 	help: 'Help text to explain the select control.',
-	label: 'Value',
 };
 
 /**
@@ -86,6 +87,7 @@ WithLabelAndHelpText.args = {
 export const WithCustomChildren = SelectControlWithState.bind( {} );
 WithCustomChildren.args = {
 	__nextHasNoMarginBottom: true,
+	label: 'Label',
 	children: (
 		<>
 			<option value="option-1">Option 1</option>
@@ -104,8 +106,19 @@ WithCustomChildren.args = {
 	),
 };
 
+/**
+ * By default, the prefix is aligned with the edge of the input border, with no padding.
+ * If you want to apply standard padding in accordance with the size variant, wrap the element in the `<InputControlPrefixWrapper>` component.
+ */
+export const WithPrefix = SelectControlWithState.bind( {} );
+WithPrefix.args = {
+	...Default.args,
+	prefix: <InputControlPrefixWrapper>Prefix:</InputControlPrefixWrapper>,
+};
+
 export const Minimal = SelectControlWithState.bind( {} );
 Minimal.args = {
 	...Default.args,
 	variant: 'minimal',
+	hideLabelFromVision: true,
 };