Skip to content

Commit 954c627

Browse files
fix(Form): add gap between columns (#5832)
1 parent f90ce16 commit 954c627

File tree

3 files changed

+42
-16
lines changed

3 files changed

+42
-16
lines changed

packages/main/src/components/Form/Form.module.css

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,26 @@
66
display: grid;
77
align-items: center;
88
row-gap: 0.25rem;
9-
column-gap: 0.5rem;
9+
column-gap: 0;
1010

11-
/* first row padding if form title is set*/
12-
& > [ui5-title] ~ [data-row-index-label='2']:has(+ [data-row-index='3']) {
13-
margin-block-start: 0.5rem;
11+
--_ui5wcr_form_label_text_align: end;
12+
13+
[data-component-name='FormGroupTitle'] {
14+
margin-inline: 1rem;
1415
}
15-
& > [ui5-title] ~ [data-row-index-label='2'] + [data-row-index='2'] {
16-
margin-block-start: 0.5rem;
16+
17+
[data-label-span='12'] {
18+
margin-inline: 1rem;
1719
}
1820

19-
--_ui5wcr_form_label_text_align: end;
21+
[data-component-name='FormItemLabel']:not([data-label-span='12']) {
22+
margin-inline-start: 1rem;
23+
margin-inline-end: 0.5rem;
24+
25+
& ~ [data-component-name='FormItemContent'] {
26+
margin-inline-end: 1rem;
27+
}
28+
}
2029
}
2130

2231
@container (max-width: 599px) {
@@ -70,11 +79,20 @@
7079
font-size: var(--sapGroup_Title_FontSize);
7180
height: 2.75rem;
7281
line-height: 2.75rem;
73-
}
82+
padding-inline: 1rem;
7483

75-
.labelSpan12 {
76-
--_ui5wcr_form_content_span: 12;
77-
--_ui5wcr_form_label_text_align: start;
78-
--_ui5wcr_form_label_span: 12;
79-
row-gap: 0;
84+
&:not(:has(~ [data-component-name='FormGroupTitle'])) {
85+
margin-block-end: 0.5rem;
86+
}
87+
88+
&:not(
89+
:has(
90+
~ [data-component-name='FormGroupTitle']:not(:empty)
91+
+ [data-component-name='FormItemLabel'][data-row-index-label='3']
92+
)
93+
):has(
94+
~ [data-component-name='FormGroupTitle']:empty + [data-component-name='FormItemLabel'][data-row-index-label='3']
95+
) {
96+
margin-block-end: 0.5rem;
97+
}
8098
}

packages/main/src/components/FormGroup/FormGroupTitle.module.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
font-family: var(--sapFontHeaderFamily);
66
color: var(--sapGroup_TitleTextColor);
77
font-size: var(--sapFontHeader6Size);
8-
margin: 0;
98
text-overflow: ellipsis;
109
white-space: nowrap;
1110
overflow: hidden;

packages/main/src/components/FormItem/index.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ function FormItemLabel({ label, style, className, rowIndex }: FormItemLabelProps
5454
data-label-span={labelSpan}
5555
showColon={!!label}
5656
data-row-index-label={rowIndex}
57+
data-component-name="FormItemLabel"
5758
>
5859
{label}
5960
</Label>
@@ -62,7 +63,13 @@ function FormItemLabel({ label, style, className, rowIndex }: FormItemLabelProps
6263

6364
if (isValidElement(label)) {
6465
const { showColon, wrappingType, style: labelStyle, children } = label.props;
65-
return cloneElement<LabelPropTypes & { 'data-label-span'?: number; 'data-row-index-label'?: number }>(
66+
return cloneElement<
67+
LabelPropTypes & {
68+
'data-label-span'?: number;
69+
'data-row-index-label'?: number;
70+
'data-component-name'?: string;
71+
}
72+
>(
6673
label,
6774
{
6875
showColon: showColon ?? true,
@@ -73,7 +80,8 @@ function FormItemLabel({ label, style, className, rowIndex }: FormItemLabelProps
7380
...(labelStyle || {})
7481
},
7582
'data-label-span': labelSpan,
76-
'data-row-index-label': rowIndex
83+
'data-row-index-label': rowIndex,
84+
'data-component-name': 'FormItemLabel'
7785
},
7886
children ?? ''
7987
);
@@ -159,6 +167,7 @@ const FormItem = (props: FormItemPropTypes) => {
159167
}}
160168
data-label-span={labelSpan}
161169
data-row-index={calculatedGridRowStart}
170+
data-component-name="FormItemContent"
162171
>
163172
{flattenFragments(children).map((child, index) => {
164173
// @ts-expect-error: type can't be string because of `isValidElement`

0 commit comments

Comments
 (0)