Skip to content

Commit 427f0c7

Browse files
snowystingersnowystinger
committed
fix searchwithin stories
1 parent 1e9a68a commit 427f0c7

File tree

1 file changed

+220
-51
lines changed

1 file changed

+220
-51
lines changed

‎packages/@react-spectrum/searchwithin/stories/SearchWithin.stories.tsx

Lines changed: 220 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,15 @@ export default {
2525
title: 'SearchWithin'
2626
};
2727

28-
function render(props: Omit<SpectrumSearchWithinProps, 'children'> = {}, searchFieldProps: SpectrumSearchFieldProps = {}, pickerProps: Omit<SpectrumPickerProps<object>, 'children'> = {}) {
28+
interface SearchWithinProps extends Omit<SpectrumSearchWithinProps, 'children'> {
29+
searchFieldProps?: SpectrumSearchFieldProps,
30+
pickerProps?: Omit<SpectrumPickerProps<object>, 'children'>
31+
}
32+
33+
function RenderSearchWithin(props: SearchWithinProps = {}) {
34+
let {searchFieldProps, pickerProps, ...rest} = props;
2935
return (
30-
<SearchWithin label="This is label" {...props}>
36+
<SearchWithin label="This is label" {...rest}>
3137
<SearchField {...searchFieldProps} onChange={action('change')} onSubmit={action('submit')} />
3238
<Picker defaultSelectedKey="all" {...pickerProps} onSelectionChange={action('selectionChange')}>
3339
<Item key="all">All</Item>
@@ -40,7 +46,8 @@ function render(props: Omit<SpectrumSearchWithinProps, 'children'> = {}, searchF
4046
);
4147
}
4248

43-
function renderReverse(props: Omit<SpectrumSearchWithinProps, 'children'> = {}, searchFieldProps: SpectrumSearchFieldProps = {}, pickerProps: Omit<SpectrumPickerProps<object>, 'children'> = {}) {
49+
function RenderReverse(props: SearchWithinProps = {}) {
50+
let {searchFieldProps, pickerProps, ...rest} = props;
4451
return (
4552
<SearchWithin label="Test label" {...props}>
4653
<Picker defaultSelectedKey="all" {...pickerProps} onSelectionChange={action('selectionChange')}>
@@ -77,74 +84,236 @@ function ResizeSearchWithinApp(props) {
7784
);
7885
}
7986

80-
export const Default = () => render({});
81-
82-
export const ValueControlled = () => render({}, {value: 'Controlled'});
83-
ValueControlled.name = 'value (controlled) ';
87+
export const Default = {
88+
render: (args) => (
89+
<RenderSearchWithin {...args} />
90+
)
91+
};
8492

85-
export const isDisabled = () => render({isDisabled: true});
86-
isDisabled.name = 'isDisabled: true';
93+
export const ValueControlled = {
94+
render: (args) => (
95+
<RenderSearchWithin {...args} />
96+
),
97+
args: {
98+
searchFieldProps: {value: 'Controlled'}
99+
},
100+
name: 'value (controlled)'
101+
};
87102

88-
export const isRequired = () => render({isRequired: true});
89-
isRequired.name = 'isRequired: true';
103+
export const isDisabled = {
104+
render: (args) => (
105+
<RenderSearchWithin {...args} />
106+
),
107+
args: {
108+
isDisabled: true
109+
},
110+
name: 'isDisabled: true'
111+
};
90112

91-
export const isReadOnly = () => render({}, {isReadOnly: true, value: 'Read Only'});
92-
isReadOnly.name = 'isReadOnly: true';
113+
export const isRequired = {
114+
render: (args) => (
115+
<RenderSearchWithin {...args} />
116+
),
117+
args: {
118+
isRequired: true
119+
},
120+
name: 'isRequired: true'
121+
};
93122

94-
export const searchfieldDefaultValue = () => render({}, {defaultValue: 'Default Value'});
95-
searchfieldDefaultValue.name = 'Default value for Searchfield';
123+
export const isReadOnly = {
124+
render: (args) => (
125+
<RenderSearchWithin {...args} />
126+
),
127+
args: {
128+
searchFieldProps: {isReadOnly: true, value: 'Read Only'}
129+
},
130+
name: 'isReadOnly: true'
131+
};
96132

97-
export const pickerDefaultValue = () => render({}, {}, {defaultSelectedKey: 'tags'});
98-
pickerDefaultValue.name = 'Default value for Picker';
133+
export const searchfieldDefaultValue = {
134+
render: (args) => (
135+
<RenderSearchWithin {...args} />
136+
),
137+
args: {
138+
searchFieldProps: {defaultValue: 'Default Value'}
139+
},
140+
name: 'Default value for Searchfield'
141+
};
99142

100-
export const isRequiredNecessityIndicatorLabel = () => render({isRequired: true, necessityIndicator: 'label'});
101-
isRequiredNecessityIndicatorLabel.name = 'isRequired: true, necessityIndicator "label"';
143+
export const pickerDefaultValue = {
144+
render: (args) => (
145+
<RenderSearchWithin {...args} />
146+
),
147+
args: {
148+
pickerProps: {defaultSelectedKey: 'tags'}
149+
},
150+
name: 'Default value for Picker'
151+
};
102152

103-
export const isRequiredFalse_necessityIndicator = () => render({isRequired: false, necessityIndicator: 'label'});
104-
isRequiredFalse_necessityIndicator.name = 'isRequired: false, necessityIndicator "label"';
153+
export const isRequiredNecessityIndicatorLabel = {
154+
render: (args) => (
155+
<RenderSearchWithin {...args} />
156+
),
157+
args: {
158+
isRequired: true,
159+
necessityIndicator: 'label'
160+
},
161+
name: 'isRequired: true, necessityIndicator "label"'
162+
};
105163

106-
export const InputValidationSateInvalid = () => render({}, {validationState: 'invalid'});
107-
InputValidationSateInvalid.name = 'input validationState: invalid';
164+
export const isRequiredFalse_necessityIndicator = {
165+
render: (args) => (
166+
<RenderSearchWithin {...args} />
167+
),
168+
args: {
169+
isRequired: false,
170+
necessityIndicator: 'label'
171+
},
172+
name: 'isRequired: false, necessityIndicator "label"'
173+
};
108174

109-
export const PickerValidationSateInvalid = () => render({}, {}, {isInvalid: true});
110-
PickerValidationSateInvalid.name = 'picker validationState: invalid';
175+
export const InputValidationSateInvalid = {
176+
render: (args) => (
177+
<RenderSearchWithin {...args} />
178+
),
179+
args: {
180+
searchFieldProps: {validationState: 'invalid'}
181+
},
182+
name: 'input validationState: invalid'
183+
};
111184

112-
export const PickerDisabled = () => render({}, {}, {isDisabled: true});
185+
export const PickerValidationSateInvalid = {
186+
render: (args) => (
187+
<RenderSearchWithin {...args} />
188+
),
189+
args: {
190+
pickerProps: {isInvalid: true}
191+
},
192+
name: 'picker validationState: invalid'
193+
};
113194

114-
export const CustomWidth300 = () => render({width: 300});
115-
CustomWidth300.name = 'Custom width: 300';
195+
export const PickerDisabled = {
196+
render: (args) => (
197+
<RenderSearchWithin {...args} />
198+
),
199+
args: {
200+
pickerProps: {isDisabled: true}
201+
},
202+
name: 'picker isDisabled: true'
203+
};
116204

117-
export const CustomWidth30 = () => render({width: 30});
118-
CustomWidth30.name = 'Custom width: 30';
205+
export const CustomWidth300 = {
206+
render: (args) => (
207+
<RenderSearchWithin {...args} />
208+
),
209+
args: {
210+
width: 300
211+
},
212+
name: 'Custom width: 300'
213+
};
119214

120-
export const LabelPositionSide = () => render({labelPosition: 'side'});
121-
LabelPositionSide.name = 'labelPosition: side';
215+
export const CustomWidth30 = {
216+
render: (args) => (
217+
<RenderSearchWithin {...args} />
218+
),
219+
args: {
220+
width: 30
221+
},
222+
name: 'Custom width: 30'
223+
};
122224

123-
export const NoVisibleLabel = () => render({label: undefined, 'aria-label': 'Test aria label'});
225+
export const LabelPositionSide = {
226+
render: (args) => (
227+
<RenderSearchWithin {...args} />
228+
),
229+
args: {
230+
labelPosition: 'side'
231+
},
232+
name: 'labelPosition: side'
233+
};
124234

125-
export const NoLabels = () => render({label: undefined});
235+
export const NoVisibleLabel = {
236+
render: (args) => (
237+
<RenderSearchWithin {...args} />
238+
),
239+
args: {
240+
label: undefined,
241+
'aria-label': 'Test aria label'
242+
},
243+
name: 'no visible label'
244+
};
126245

127-
export const ExternalLabel = () => (
128-
<div style={{display: 'flex', flexDirection: 'column'}}>
129-
<span id="foo">External label</span>
130-
{render({label: undefined, 'aria-labelledby': 'foo'})}
131-
</div>
132-
);
246+
export const ExternalLabel = {
247+
render: (args) => (
248+
<div style={{display: 'flex', flexDirection: 'column'}}>
249+
<span id="foo">External label</span>
250+
<RenderSearchWithin {...args} />
251+
</div>
252+
),
253+
args: {
254+
label: undefined,
255+
'aria-labelledby': 'foo'
256+
},
257+
name: 'external label'
258+
};
133259

134-
export const AutoFocusSearchField = () => render({}, {autoFocus: true});
135-
AutoFocusSearchField.name = 'autoFocus: true on SearchField';
260+
export const AutoFocusSearchField = {
261+
render: (args) => (
262+
<RenderSearchWithin {...args} />
263+
),
264+
args: {
265+
searchFieldProps: {autoFocus: true}
266+
},
267+
name: 'autoFocus: true on SearchField'
268+
};
136269

137-
export const AutoFocusPicker = () => render({}, {}, {autoFocus: true});
138-
AutoFocusPicker.name = 'autoFocus: true on Picker';
270+
export const AutoFocusPicker = {
271+
render: (args) => (
272+
<RenderSearchWithin {...args} />
273+
),
274+
args: {
275+
pickerProps: {autoFocus: true}
276+
},
277+
name: 'autoFocus: true on Picker'
278+
};
139279

140-
export const ReverseChildrenOrder = () => renderReverse({});
280+
export const ReverseChildrenOrder = {
281+
render: (args) => (
282+
<RenderReverse {...args} />
283+
)
284+
};
141285

142-
export const ResizeSearchWithin = () => <ResizeSearchWithinApp />;
286+
export const ResizeSearchWithin = {
287+
render: (args) => (
288+
<ResizeSearchWithinApp {...args} />
289+
)
290+
};
143291

144-
export const ResizeSearchWithinNoLabel = () => <ResizeSearchWithinApp label={null} />;
292+
export const ResizeSearchWithinNoLabel = {
293+
render: (args) => (
294+
<ResizeSearchWithinApp {...args} />
295+
),
296+
args: {
297+
label: null
298+
}
299+
};
145300

146-
export const iconFilter = () => render({}, {icon: <Filter />});
147-
iconFilter.name = 'icon: Filter';
301+
export const iconFilter = {
302+
render: (args) => (
303+
<RenderSearchWithin {...args} />
304+
),
305+
args: {
306+
searchFieldProps: {icon: <Filter />}
307+
},
308+
name: 'icon: Filter'
309+
};
148310

149-
export const iconNull = () => render({}, {icon: null});
150-
iconNull.name = 'icon: null';
311+
export const iconNull = {
312+
render: (args) => (
313+
<RenderSearchWithin {...args} />
314+
),
315+
args: {
316+
searchFieldProps: {icon: null}
317+
},
318+
name: 'icon: null'
319+
};

0 commit comments

Comments
 (0)