Skip to content

Commit 5b88b66

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

File tree

15 files changed

+153
-110
lines changed

15 files changed

+153
-110
lines changed

‎src/__internal__/fieldset/fieldset.style.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ type StyledFieldsetProps = {
88

99
const StyledFieldset = styled.fieldset<StyledFieldsetProps>`
1010
margin: 0;
11-
margin-bottom: var(--fieldSpacing);
11+
12+
[data-element="form-content"] & {
13+
margin-bottom: var(--fieldSpacing);
14+
}
15+
1216
${margin}
1317
border: none;
1418
padding: 0;

‎src/__internal__/form-field/form-field.style.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@ import { space } from "styled-system";
33
import { baseTheme } from "../../style/themes";
44

55
const FormFieldStyle = styled.div`
6-
margin-bottom: var(--fieldSpacing);
76
& + & {
87
margin-top: 16px;
98
}
109
10+
[data-element="form-content"] & {
11+
margin-top: 0;
12+
margin-bottom: var(--fieldSpacing);
13+
}
14+
1115
&&& {
1216
${space}
1317
}

‎src/components/checkbox/checkbox.style.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,10 @@ export interface StyledCheckboxProps extends ValidationProps, MarginProps {
2525
}
2626

2727
const StyledCheckbox = styled.div<StyledCheckboxProps>`
28-
margin-bottom: var(--fieldSpacing);
28+
[data-element="form-content"] & {
29+
margin-bottom: var(--fieldSpacing);
30+
}
31+
2932
${margin}
3033
${({
3134
disabled,

‎src/components/date-range/date-range.style.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ export interface StyledDateRangeProps {
1010
labelsInline?: boolean;
1111
}
1212
const StyledDateRange = styled.div<StyledDateRangeProps>`
13-
margin-bottom: var(--fieldSpacing);
13+
[data-element="form-content"] & {
14+
margin-bottom: var(--fieldSpacing);
15+
}
16+
1417
${margin}
1518
1619
& ${StyledDateInput} {

‎src/components/date/date.style.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@ interface StyledDateInputProps
2222
}
2323

2424
const StyledDateInput = styled.div<StyledDateInputProps>`
25-
margin-bottom: var(--fieldSpacing);
25+
[data-element="form-content"] & {
26+
margin-bottom: var(--fieldSpacing);
27+
}
28+
2629
${margin}
2730
2831
& ${StyledInputPresentation} {

‎src/components/fieldset/fieldset.style.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ export interface StyledFieldsetProps {
1111

1212
const FieldsetStyle = styled.fieldset<StyledFieldsetProps>`
1313
margin: 0;
14-
margin-bottom: var(--fieldSpacing);
14+
15+
[data-element="form-content"] & {
16+
margin-bottom: var(--fieldSpacing);
17+
}
18+
1519
${margin}
1620
border: none;
1721
padding: 0;
@@ -24,7 +28,6 @@ const FieldsetStyle = styled.fieldset<StyledFieldsetProps>`
2428
}
2529
2630
&&&& ${FormFieldStyle} {
27-
margin-top: 0;
2831
margin-bottom: -1px;
2932
}
3033

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

+98-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,106 @@ 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 name="simple-select" id="simple-select" label="Simple Select">
84+
<Option text="Amber" value="1" />
85+
<Option text="Black" value="2" />
86+
<Option text="Blue" value="3" />
87+
</Select>
88+
</Fieldset>
89+
<Hr />
90+
<Time
91+
value={{
92+
hours: "",
93+
minutes: "",
94+
}}
95+
onChange={() => {}}
96+
label="Time"
97+
/>
98+
<NumeralDate label="Numeral Date" />
99+
<RadioButtonGroup name="legend" legend="RadioButtonGroup">
100+
<RadioButton
101+
id="group-1-input-1"
102+
value="group-1-input-1"
103+
label="Radio Option 1"
104+
/>
105+
<RadioButton
106+
id="group-1-input-2"
107+
value="group-1-input-2"
108+
label="Radio Option 2"
109+
/>
110+
</RadioButtonGroup>
111+
<Checkbox label="Checkbox" />
112+
<CheckboxGroup legend="Checkbox Group">
113+
<Checkbox label="Checkbox-1" />
114+
<Checkbox label="Checkbox-2" />
115+
</CheckboxGroup>
116+
<DateInput name="date" label="Date" value="" onChange={() => {}} />
117+
<DateRange
118+
name="date"
119+
startLabel="Start Date"
120+
endLabel="End Date"
121+
value={["", ""]}
122+
onChange={() => {}}
123+
/>
124+
<InlineInputs label="Inline inputs">
125+
<Textbox onChange={() => {}} />
126+
<Textbox onChange={() => {}} />
127+
<Textbox onChange={() => {}} />
128+
</InlineInputs>
129+
<Search value="" onChange={() => {}} />
79130
<Select name="simple-select" id="simple-select" label="Simple Select">
80131
<Option text="Amber" value="1" />
81132
<Option text="Black" value="2" />
82133
<Option text="Blue" value="3" />
83134
</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={() => {}} />
135+
<FilterableSelect
136+
name="filterable-select"
137+
id="filterable-select"
138+
label="Filterable Select"
139+
>
140+
<Option text="Amber" value="1" />
141+
<Option text="Black" value="2" />
142+
<Option text="Blue" value="3" />
143+
</FilterableSelect>
144+
<MultiSelect name="multi-select" id="multi-select" label="Multi Select">
145+
<Option text="Amber" value="1" />
146+
<Option text="Black" value="2" />
147+
<Option text="Blue" value="3" />
148+
</MultiSelect>
149+
<Textarea label="Textarea" name="textarea" characterLimit={100} />
150+
<TextEditor labelText="Text Editor" characterLimit={100} />
151+
<SimpleColorPicker
152+
name="simple-color-picker"
153+
legend="Simple Color Picker"
154+
>
155+
{[
156+
{ color: "transparent", label: "transparent" },
157+
{ color: "#0073C1", label: "blue" },
158+
{ color: "#582C83", label: "purple" },
159+
].map(({ color, label }) => (
160+
<SimpleColor
161+
value={color}
162+
key={color}
163+
aria-label={label}
164+
id={color}
165+
/>
166+
))}
167+
</SimpleColorPicker>
168+
<Switch name="switch" label="Switch" onChange={() => {}} />
169+
</Box>
164170
</Form>
165171
</CarbonProvider>
166172
);

‎src/components/form/form.style.ts

-4
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,6 @@ export const StyledFormContent = styled.div<StyledFormContentProps>(
3030
css`
3131
--fieldSpacing: ${fieldSpacing};
3232
33-
${StyledFormField} {
34-
margin-top: var(--spacing000);
35-
}
36-
3733
// field spacing is also applied to form field here so we need to override
3834
${StyledInlineInputs} ${StyledFormField},
3935
${StyledInlineInputs} ${StyledSelect},

‎src/components/inline-inputs/inline-inputs.style.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,10 @@ const StyledContentContainer = styled.div<InlineInputsProps>`
9191
`;
9292

9393
const StyledInlineInputs = styled.div<InlineInputsProps>`
94-
margin-bottom: var(--fieldSpacing);
94+
[data-element="form-content"] & {
95+
margin-bottom: var(--fieldSpacing);
96+
}
97+
9598
${margin}
9699
97100
display: ${({ labelInline }) => (labelInline ? `flex` : `block`)};

‎src/components/radio-button/radio-button.style.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ const RadioButtonStyle = styled(CheckboxStyle)<
1717
> & { inline?: boolean }
1818
>`
1919
${({ disabled, fieldHelpInline, reverse, size, inline }) => css`
20-
margin-bottom: var(--spacing150);
20+
&& {
21+
margin-bottom: var(--spacing150);
22+
}
2123
2224
:last-of-type {
2325
margin-bottom: 0;

‎src/components/search/search.style.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,10 @@ const StyledSearch = styled.div<StyledSearchProps>`
3434
: "var(--colorsUtilityMajor300)";
3535
3636
return css`
37-
margin-bottom: var(--fieldSpacing);
37+
[data-element="form-content"] & {
38+
margin-bottom: var(--fieldSpacing);
39+
}
40+
3841
${margin}
3942
width: ${searchWidth ? `${searchWidth}` : "100%"};
4043
max-width: ${maxWidth ? `${maxWidth}` : "100%"};

‎src/components/select/select.style.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ export interface StyledSelectProps
1616

1717
const StyledSelect = styled.div<StyledSelectProps>`
1818
${({ hasTextCursor, disabled, readOnly, theme, transparent, isOpen }) => css`
19-
margin-bottom: var(--fieldSpacing);
19+
[data-element="form-content"] & {
20+
margin-bottom: var(--fieldSpacing);
21+
}
22+
2023
${margin}
2124
2225
position: relative;

‎src/components/switch/switch.style.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,12 @@ export const ErrorBorder = styled.span`
5353

5454
const StyledSwitch = styled.div`
5555
${({ fieldHelpInline, labelInline, reverse, size }: StyledSwitchProps) => css`
56-
margin-bottom: var(--fieldSpacing);
56+
[data-element="form-content"] & {
57+
margin-bottom: var(--fieldSpacing);
58+
}
59+
5760
${margin}
61+
5862
${FieldLineStyle} {
5963
display: flex;
6064
flex-flow: ${labelInline ? "row wrap" : "column wrap"};

‎src/components/text-editor/text-editor.style.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@ export const StyledTextEditor = styled(Box)`
2424
`;
2525

2626
export const StyledTextEditorWrapper = styled.div<StyledTextEditorWrapperProps>`
27-
margin-bottom: var(--fieldSpacing);
27+
[data-element="form-content"] & {
28+
margin-bottom: var(--fieldSpacing);
29+
}
30+
2831
${margin}
2932
`;
3033

‎src/components/textarea/textarea.style.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ export interface StyledTextAreaProps extends Pick<TextareaProps, "minHeight"> {
1717
}
1818

1919
const StyledTextarea = styled.div<StyledTextAreaProps>`
20-
margin-bottom: var(--fieldSpacing);
20+
[data-element="form-content"] & {
21+
margin-bottom: var(--fieldSpacing);
22+
}
23+
2124
${margin};
2225
2326
${StyledInput} {

0 commit comments

Comments
 (0)