Skip to content

Commit 2d9ff5f

Browse files
akg2011-codeLaffery
akg2011-code
and
Laffery
authored
fix(module:space): nzSpaceItem margin in rtl (#7801)
* fix(module:space): nzSpaceItem margin in rtl - Change 'margin-right' to 'margin-inline-end' and 'margin-bottom' to 'margin-block-end' for support any direction * fix(module:space): edit test cases nzSpaceItem margin in rtl * Update space.component.ts --------- Co-authored-by: Laffery <49607541+Laffery@users.noreply.github.com>
1 parent 2cbe7d6 commit 2d9ff5f

2 files changed

Lines changed: 30 additions & 30 deletions

File tree

‎components/space/space.component.spec.ts‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ describe('Space', () => {
3131
items.forEach((item, i) => {
3232
const element = item.nativeElement as HTMLElement;
3333
if (i < items.length - 1) {
34-
expect(element.style.marginRight).toBe('8px');
34+
expect(element.style.marginInlineEnd).toBe('8px');
3535
} else {
36-
expect(element.style.marginRight).toBe('');
36+
expect(element.style.marginInlineEnd).toBe('');
3737
}
3838
});
3939

@@ -45,9 +45,9 @@ describe('Space', () => {
4545
items.forEach((item, i) => {
4646
const element = item.nativeElement as HTMLElement;
4747
if (i < items.length - 1) {
48-
expect(element.style.marginRight).toBe('8px');
48+
expect(element.style.marginInlineEnd).toBe('8px');
4949
} else {
50-
expect(element.style.marginRight).toBe('');
50+
expect(element.style.marginInlineEnd).toBe('');
5151
}
5252
});
5353
});
@@ -57,9 +57,9 @@ describe('Space', () => {
5757
items.forEach((item, i) => {
5858
const element = item.nativeElement as HTMLElement;
5959
if (i < items.length - 1) {
60-
expect(element.style.marginRight).toBe('8px');
60+
expect(element.style.marginInlineEnd).toBe('8px');
6161
} else {
62-
expect(element.style.marginRight).toBe('');
62+
expect(element.style.marginInlineEnd).toBe('');
6363
}
6464
});
6565

@@ -69,9 +69,9 @@ describe('Space', () => {
6969
items.forEach((item, i) => {
7070
const element = item.nativeElement as HTMLElement;
7171
if (i < items.length - 1) {
72-
expect(element.style.marginRight).toBe('16px');
72+
expect(element.style.marginInlineEnd).toBe('16px');
7373
} else {
74-
expect(element.style.marginRight).toBe('');
74+
expect(element.style.marginInlineEnd).toBe('');
7575
}
7676
});
7777

@@ -81,9 +81,9 @@ describe('Space', () => {
8181
items.forEach((item, i) => {
8282
const element = item.nativeElement as HTMLElement;
8383
if (i < items.length - 1) {
84-
expect(element.style.marginRight).toBe('24px');
84+
expect(element.style.marginInlineEnd).toBe('24px');
8585
} else {
86-
expect(element.style.marginRight).toBe('');
86+
expect(element.style.marginInlineEnd).toBe('');
8787
}
8888
});
8989
});
@@ -97,9 +97,9 @@ describe('Space', () => {
9797
items.forEach((item, i) => {
9898
const element = item.nativeElement as HTMLElement;
9999
if (i < items.length - 1) {
100-
expect(element.style.marginRight).toBe('36px');
100+
expect(element.style.marginInlineEnd).toBe('36px');
101101
} else {
102-
expect(element.style.marginRight).toBe('');
102+
expect(element.style.marginInlineEnd).toBe('');
103103
}
104104
});
105105

@@ -109,9 +109,9 @@ describe('Space', () => {
109109
items.forEach((item, i) => {
110110
const element = item.nativeElement as HTMLElement;
111111
if (i < items.length - 1) {
112-
expect(element.style.marginRight).toBe('18px');
112+
expect(element.style.marginInlineEnd).toBe('18px');
113113
} else {
114-
expect(element.style.marginRight).toBe('');
114+
expect(element.style.marginInlineEnd).toBe('');
115115
}
116116
});
117117
});
@@ -129,11 +129,11 @@ describe('Space', () => {
129129
items.forEach((item, i) => {
130130
const element = item.nativeElement as HTMLElement;
131131
if (i < items.length - 1) {
132-
expect(element.style.marginRight).toBeFalsy();
133-
expect(element.style.marginBottom).toBeTruthy();
132+
expect(element.style.marginInlineEnd).toBeFalsy();
133+
expect(element.style.marginBlockEnd).toBeTruthy();
134134
} else {
135-
expect(element.style.marginRight).toBeFalsy();
136-
expect(element.style.marginBottom).toBeFalsy();
135+
expect(element.style.marginInlineEnd).toBeFalsy();
136+
expect(element.style.marginBlockEnd).toBeFalsy();
137137
}
138138
});
139139

@@ -145,11 +145,11 @@ describe('Space', () => {
145145
items.forEach((item, i) => {
146146
const element = item.nativeElement as HTMLElement;
147147
if (i < items.length - 1) {
148-
expect(element.style.marginRight).toBeTruthy();
149-
expect(element.style.marginBottom).toBeFalsy();
148+
expect(element.style.marginInlineEnd).toBeTruthy();
149+
expect(element.style.marginBlockEnd).toBeFalsy();
150150
} else {
151-
expect(element.style.marginRight).toBeFalsy();
152-
expect(element.style.marginBottom).toBeFalsy();
151+
expect(element.style.marginInlineEnd).toBeFalsy();
152+
expect(element.style.marginBlockEnd).toBeFalsy();
153153
}
154154
});
155155
});
@@ -189,15 +189,15 @@ describe('Space', () => {
189189
items.forEach((item, i) => {
190190
const element = item.nativeElement as HTMLElement;
191191
if (i < items.length - 1) {
192-
expect(element.style.marginRight).toBe('4px');
192+
expect(element.style.marginInlineEnd).toBe('4px');
193193
} else {
194-
expect(element.style.marginRight).toBe('');
194+
expect(element.style.marginInlineEnd).toBe('');
195195
}
196196
});
197197

198198
splits.forEach(item => {
199199
const element = item.nativeElement as HTMLElement;
200-
expect(element.style.marginRight).toBe('4px');
200+
expect(element.style.marginInlineEnd).toBe('4px');
201201
});
202202

203203
component.show = true;
@@ -211,7 +211,7 @@ describe('Space', () => {
211211

212212
splits.forEach(item => {
213213
const element = item.nativeElement as HTMLElement;
214-
expect(element.style.marginRight).toBe('4px');
214+
expect(element.style.marginInlineEnd).toBe('4px');
215215
});
216216
});
217217
});

‎components/space/space.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,16 @@ const SPACE_SIZE: Record<NzSpaceType, number> = {
4343
@for (item of items; track item; let last = $last; let index = $index) {
4444
<div
4545
class="ant-space-item"
46-
[style.margin-bottom.px]="nzDirection === 'vertical' ? (last ? null : spaceSize) : null"
47-
[style.margin-right.px]="nzDirection === 'horizontal' ? (last ? null : spaceSize) : null"
46+
[style.margin-block-end.px]="nzDirection === 'vertical' ? (last ? null : spaceSize) : null"
47+
[style.margin-inline-end.px]="nzDirection === 'horizontal' ? (last ? null : spaceSize) : null"
4848
>
4949
<ng-container [ngTemplateOutlet]="item"></ng-container>
5050
</div>
5151
@if (nzSplit && !last) {
5252
<span
5353
class="ant-space-split"
54-
[style.margin-bottom.px]="nzDirection === 'vertical' ? (last ? null : spaceSize) : null"
55-
[style.margin-right.px]="nzDirection === 'horizontal' ? (last ? null : spaceSize) : null"
54+
[style.margin-block-end.px]="nzDirection === 'vertical' ? (last ? null : spaceSize) : null"
55+
[style.margin-inline-end.px]="nzDirection === 'horizontal' ? (last ? null : spaceSize) : null"
5656
>
5757
<ng-template [nzStringTemplateOutlet]="nzSplit" [nzStringTemplateOutletContext]="{ $implicit: index }">{{
5858
nzSplit

0 commit comments

Comments
 (0)