fix(badge): fix the style issue in RTL mode (#38829)

* chore: update style

* docs(badge): add debug demo

* test: update snapshot

* test: offset solution

ref: https://github.com/ant-design/ant-design/pull/38828

* chore: update style

* Revert "test: offset solution"

This reverts commit aacf9c3378.

* Revert "docs(badge): add debug demo"

This reverts commit 52b0dab942.

* test: update snapshot
This commit is contained in:
Wuxh 2022-11-22 19:15:44 +08:00 committed by GitHub
parent 7739d74196
commit e93f660830
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -276,6 +276,15 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
}, },
[`${numberPrefixCls}-symbol`]: { verticalAlign: 'top' }, [`${numberPrefixCls}-symbol`]: { verticalAlign: 'top' },
}, },
// ====================== RTL =======================
'&-rtl': {
direction: 'rtl',
[`${componentCls}-count, ${componentCls}-dot, ${numberPrefixCls}-custom-component`]: {
insetInlineEnd: 'auto',
},
},
}, },
[`${ribbonWrapperPrefixCls}`]: { position: 'relative' }, [`${ribbonWrapperPrefixCls}`]: { position: 'relative' },
[`${ribbonPrefixCls}`]: { [`${ribbonPrefixCls}`]: {
@ -307,7 +316,8 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
borderEndEndRadius: 0, borderEndEndRadius: 0,
[`${ribbonPrefixCls}-corner`]: { [`${ribbonPrefixCls}-corner`]: {
insetInlineEnd: 0, insetInlineEnd: 0,
borderColor: 'currentcolor transparent transparent currentcolor', borderInlineEndColor: 'transparent',
borderBlockEndColor: 'transparent',
}, },
}, },
[`&${ribbonPrefixCls}-placement-start`]: { [`&${ribbonPrefixCls}-placement-start`]: {
@ -315,9 +325,15 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
borderEndStartRadius: 0, borderEndStartRadius: 0,
[`${ribbonPrefixCls}-corner`]: { [`${ribbonPrefixCls}-corner`]: {
insetInlineStart: 0, insetInlineStart: 0,
borderColor: 'currentcolor currentcolor transparent transparent', borderBlockEndColor: 'transparent',
borderInlineStartColor: 'transparent',
}, },
}, },
// ====================== RTL =======================
'&-rtl': {
direction: 'rtl',
},
}, },
}; };
}; };