Skip to content

Commit dd73698

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

File tree

15 files changed

+157
-109
lines changed

15 files changed

+157
-109
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-1
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;

‎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
);

‎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)