archive/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-15 13:38:29 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(Space.Compact):Border cropping issue (#54596)

Browse source 
Co-authored-by: liuqiang <qiang.liu@xinjifamily.com>
This commit is contained in:
ug 2025-08-05 16:00:23 +08:00 • committed by GitHub
parent 5f75711a80
commit 81a86966d2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 22 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

16
components/style/compact-item-vertical.ts
View file

@ -1,17 +1,25 @@
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import type { AliasToken, FullToken, OverrideComponent, CSSUtil } from '../theme/internal';
import type { AliasToken, CSSUtil, FullToken, OverrideComponent } from '../theme/internal';
function compactItemVerticalBorder(token: AliasToken & CSSUtil, parentCls: string): CSSObject {
function compactItemVerticalBorder(
token: AliasToken & CSSUtil,
parentCls: string,
prefixCls: string,
): CSSObject {
return {
// border collapse
[`&-item:not(${parentCls}-last-item)`]: {
marginBottom: token.calc(token.lineWidth).mul(-1).equal(),
},
[`&-item:not(${prefixCls}-status-success)`]: {
zIndex: 2,
},
'&-item': {
'&:hover,&:focus,&:active': {
zIndex: 2,
zIndex: 3,
},
'&[disabled]': {
@ -50,7 +58,7 @@ export function genCompactItemVerticalStyle<T extends OverrideComponent>(
return {
[compactCls]: {
...compactItemVerticalBorder(token, compactCls),
...compactItemVerticalBorder(token, compactCls, token.componentCls),
...compactItemBorderVerticalRadius(token.componentCls, compactCls),
},
};

14
components/style/compact-item.ts
View file

@ -1,6 +1,6 @@
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import type { AliasToken, FullToken, OverrideComponent, CSSUtil } from '../theme/internal';
import type { AliasToken, CSSUtil, FullToken, OverrideComponent } from '../theme/internal';
interface CompactItemOptions {
focus?: boolean;
@ -21,6 +21,7 @@ function compactItemBorder(
token: AliasToken & CSSUtil,
parentCls: string,
options: CompactItemOptions,
prefixCls: string,
): CSSObject {
const { focusElCls, focus, borderElCls } = options;
const childCombinator = borderElCls ? '> *' : '';
@ -28,20 +29,25 @@ function compactItemBorder(
.filter(Boolean)
.map((n) => `&:${n} ${childCombinator}`)
.join(',');
return {
[`&-item:not(${parentCls}-last-item)`]: {
marginInlineEnd: token.calc(token.lineWidth).mul(-1).equal(),
},
[`&-item:not(${prefixCls}-status-success)`]: {
zIndex: 2,
},
'&-item': {
[hoverEffects]: {
zIndex: 2,
zIndex: 3,
},
...(focusElCls
? {
[`&${focusElCls}`]: {
zIndex: 2,
zIndex: 3,
},
}
: {}),
@ -95,7 +101,7 @@ export function genCompactItemStyle<T extends OverrideComponent>(
return {
[compactCls]: {
...compactItemBorder(token, compactCls, options),
...compactItemBorder(token, compactCls, options, componentCls),
...compactItemBorderRadius(componentCls, compactCls, options),
},
};