Skip to content

Commit da2b52b

Browse files
nuria1110nuria1110
committed
chore: address comments
1 parent b58a960 commit da2b52b

File tree

1 file changed

+102
-92
lines changed

1 file changed

+102
-92
lines changed

‎src/components/form/form-test.stories.tsx

+102-92
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ type StoryType = StoryObj<typeof Form>;
5252

5353
export const AllInputs: StoryType = ({ ...props }) => (
5454
<CarbonProvider validationRedesignOptIn>
55+
<Textbox label="Outside of Form" characterLimit={100} />
56+
<Textbox label="Outside of Form" characterLimit={100} />
57+
<Hr />
5558
<Form
5659
onSubmit={() => console.log("submit")}
5760
leftSideButtons={
@@ -64,103 +67,110 @@ export const AllInputs: StoryType = ({ ...props }) => (
6467
}
6568
{...props}
6669
>
67-
<Textbox label="Textbox" characterLimit={100} />
68-
<Number label="Number" />
69-
<Decimal label="Decimal" />
70-
<GroupedCharacter
71-
label="GroupedCharacter"
72-
groups={[2, 3, 2]}
73-
separator="-"
74-
/>
75-
<Password label="Password" characterLimit={100} />
76-
<Fieldset legend="Fieldset">
77-
<Textbox label="Textbox in Fieldset" />
78-
<Checkbox label="Checkbox in Fieldset" />
70+
<Box>
71+
<Textbox label="Textbox" characterLimit={100} />
72+
<Number label="Number" />
73+
<Decimal label="Decimal" />
74+
<GroupedCharacter
75+
label="GroupedCharacter"
76+
groups={[2, 3, 2]}
77+
separator="-"
78+
/>
79+
<Password label="Password" characterLimit={100} />
80+
<Fieldset legend="Fieldset">
81+
<Textbox label="Textbox in Fieldset" />
82+
<Checkbox label="Checkbox in Fieldset" />
83+
<Select
84+
name="simple-select"
85+
id="simple-select"
86+
label="Select in Fieldset"
87+
>
88+
<Option text="Amber" value="1" />
89+
<Option text="Black" value="2" />
90+
<Option text="Blue" value="3" />
91+
</Select>
92+
</Fieldset>
93+
<Hr />
94+
<Time
95+
value={{
96+
hours: "",
97+
minutes: "",
98+
}}
99+
onChange={() => {}}
100+
label="Time"
101+
/>
102+
<NumeralDate label="Numeral Date" />
103+
<RadioButtonGroup name="legend" legend="RadioButtonGroup">
104+
<RadioButton
105+
id="group-1-input-1"
106+
value="group-1-input-1"
107+
label="Radio Option 1"
108+
/>
109+
<RadioButton
110+
id="group-1-input-2"
111+
value="group-1-input-2"
112+
label="Radio Option 2"
113+
/>
114+
</RadioButtonGroup>
115+
<Checkbox label="Checkbox" />
116+
<CheckboxGroup legend="Checkbox Group">
117+
<Checkbox label="Checkbox-1" />
118+
<Checkbox label="Checkbox-2" />
119+
</CheckboxGroup>
120+
<DateInput name="date" label="Date" value="" onChange={() => {}} />
121+
<DateRange
122+
name="date"
123+
startLabel="Start Date"
124+
endLabel="End Date"
125+
value={["", ""]}
126+
onChange={() => {}}
127+
/>
128+
<InlineInputs label="Inline inputs">
129+
<Textbox onChange={() => {}} />
130+
<Textbox onChange={() => {}} />
131+
<Textbox onChange={() => {}} />
132+
</InlineInputs>
133+
<Search value="" onChange={() => {}} />
79134
<Select name="simple-select" id="simple-select" label="Simple Select">
80135
<Option text="Amber" value="1" />
81136
<Option text="Black" value="2" />
82137
<Option text="Blue" value="3" />
83138
</Select>
84-
</Fieldset>
85-
<Time
86-
value={{
87-
hours: "",
88-
minutes: "",
89-
}}
90-
onChange={() => {}}
91-
label="Time"
92-
/>
93-
<NumeralDate label="Numeral Date" />
94-
<RadioButtonGroup name="legend" legend="RadioButtonGroup">
95-
<RadioButton
96-
id="group-1-input-1"
97-
value="group-1-input-1"
98-
label="Radio Option 1"
99-
/>
100-
<RadioButton
101-
id="group-1-input-2"
102-
value="group-1-input-2"
103-
label="Radio Option 2"
104-
/>
105-
</RadioButtonGroup>
106-
<Checkbox label="Checkbox" />
107-
<CheckboxGroup legend="Checkbox Group">
108-
<Checkbox label="Checkbox-1" />
109-
<Checkbox label="Checkbox-2" />
110-
</CheckboxGroup>
111-
<DateInput name="date" label="Date" value="" onChange={() => {}} />
112-
<DateRange
113-
name="date"
114-
startLabel="Start Date"
115-
endLabel="End Date"
116-
value={["", ""]}
117-
onChange={() => {}}
118-
/>
119-
<InlineInputs label="Inline inputs">
120-
<Textbox onChange={() => {}} />
121-
<Textbox onChange={() => {}} />
122-
<Textbox onChange={() => {}} />
123-
</InlineInputs>
124-
<Search value="" onChange={() => {}} />
125-
<Select name="simple-select" id="simple-select" label="Simple Select">
126-
<Option text="Amber" value="1" />
127-
<Option text="Black" value="2" />
128-
<Option text="Blue" value="3" />
129-
</Select>
130-
<FilterableSelect
131-
name="filterable-select"
132-
id="filterable-select"
133-
label="Filterable Select"
134-
>
135-
<Option text="Amber" value="1" />
136-
<Option text="Black" value="2" />
137-
<Option text="Blue" value="3" />
138-
</FilterableSelect>
139-
<MultiSelect name="multi-select" id="multi-select" label="Multi Select">
140-
<Option text="Amber" value="1" />
141-
<Option text="Black" value="2" />
142-
<Option text="Blue" value="3" />
143-
</MultiSelect>
144-
<Textarea label="Textarea" name="textarea" characterLimit={100} />
145-
<TextEditor labelText="Text Editor" characterLimit={100} />
146-
<SimpleColorPicker
147-
name="simple-color-picker"
148-
legend="Simple Color Picker"
149-
>
150-
{[
151-
{ color: "transparent", label: "transparent" },
152-
{ color: "#0073C1", label: "blue" },
153-
{ color: "#582C83", label: "purple" },
154-
].map(({ color, label }) => (
155-
<SimpleColor
156-
value={color}
157-
key={color}
158-
aria-label={label}
159-
id={color}
160-
/>
161-
))}
162-
</SimpleColorPicker>
163-
<Switch name="switch" label="Switch" onChange={() => {}} />
139+
<FilterableSelect
140+
name="filterable-select"
141+
id="filterable-select"
142+
label="Filterable Select"
143+
>
144+
<Option text="Amber" value="1" />
145+
<Option text="Black" value="2" />
146+
<Option text="Blue" value="3" />
147+
</FilterableSelect>
148+
<MultiSelect name="multi-select" id="multi-select" label="Multi Select">
149+
<Option text="Amber" value="1" />
150+
<Option text="Black" value="2" />
151+
<Option text="Blue" value="3" />
152+
</MultiSelect>
153+
<Textarea label="Textarea" name="textarea" characterLimit={100} />
154+
<TextEditor labelText="Text Editor" characterLimit={100} />
155+
<SimpleColorPicker
156+
name="simple-color-picker"
157+
legend="Simple Color Picker"
158+
>
159+
{[
160+
{ color: "transparent", label: "transparent" },
161+
{ color: "#0073C1", label: "blue" },
162+
{ color: "#582C83", label: "purple" },
163+
].map(({ color, label }) => (
164+
<SimpleColor
165+
value={color}
166+
key={color}
167+
aria-label={label}
168+
id={color}
169+
/>
170+
))}
171+
</SimpleColorPicker>
172+
<Switch name="switch" label="Switch" onChange={() => {}} />
173+
</Box>
164174
</Form>
165175
</CarbonProvider>
166176
);

0 commit comments

Comments
 (0)