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: ( <> @@ -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 `` component. + */ +export const WithPrefix = SelectControlWithState.bind( {} ); +WithPrefix.args = { + ...Default.args, + prefix: Prefix:, +}; + export const Minimal = SelectControlWithState.bind( {} ); Minimal.args = { ...Default.args, variant: 'minimal', + hideLabelFromVision: true, };