fix: Input replace '.ant' with antCls (#36937)

* fix: Input replace '.ant' with antCls

* chore: update eslint rules
This commit is contained in:
MadCcc 2022-08-08 15:50:49 +08:00 committed by GitHub
parent 0cbd73fa8a
commit a5588f631e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -180,7 +180,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
}); });
export const genInputGroupStyle = (token: InputToken): CSSObject => { export const genInputGroupStyle = (token: InputToken): CSSObject => {
const { prefixCls } = token; const { prefixCls, antCls } = token;
return { return {
position: 'relative', position: 'relative',
@ -208,11 +208,11 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
}, },
// Fix https://github.com/ant-design/ant-design/issues/5754 // Fix https://github.com/ant-design/ant-design/issues/5754
'&-lg .ant-select-single .ant-select-selector': { [`&-lg ${antCls}-select-single ${antCls}-select-selector`]: {
height: token.controlHeightLG, height: token.controlHeightLG,
}, },
'&-sm .ant-select-single .ant-select-selector': { [`&-sm ${antCls}-select-single ${antCls}-select-selector`]: {
height: token.controlHeightSM, height: token.controlHeightSM,
}, },
@ -253,11 +253,11 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
transition: `all ${token.motionDurationSlow}`, transition: `all ${token.motionDurationSlow}`,
// Reset Select's style in addon // Reset Select's style in addon
'.ant-select': { [`${antCls}-select`]: {
margin: `-${token.inputPaddingVertical + 1}px -${token.inputPaddingHorizontal}px`, margin: `-${token.inputPaddingVertical + 1}px -${token.inputPaddingHorizontal}px`,
'&.ant-select-single:not(.ant-select-customize-input)': { [`&${antCls}-select-single:not(${antCls}-select-customize-input)`]: {
'.ant-select-selector': { [`${antCls}-select-selector`]: {
backgroundColor: 'inherit', backgroundColor: 'inherit',
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`, border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
boxShadow: 'none', boxShadow: 'none',
@ -265,17 +265,17 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
}, },
'&-open, &-focused': { '&-open, &-focused': {
'.ant-select-selector': { [`${antCls}-select-selector`]: {
color: token.colorPrimary, color: token.colorPrimary,
}, },
}, },
}, },
// https://github.com/ant-design/ant-design/issues/31333 // https://github.com/ant-design/ant-design/issues/31333
'.ant-cascader-picker': { [`${antCls}-cascader-picker`]: {
margin: `-9px -${token.inputPaddingHorizontal}px`, margin: `-9px -${token.inputPaddingHorizontal}px`,
backgroundColor: 'transparent', backgroundColor: 'transparent',
'.ant-cascader-input': { [`${antCls}-cascader-input`]: {
textAlign: 'start', textAlign: 'start',
border: 0, border: 0,
boxShadow: 'none', boxShadow: 'none',
@ -319,7 +319,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
borderEndEndRadius: 0, borderEndEndRadius: 0,
// Reset Select's style in addon // Reset Select's style in addon
'.ant-select .ant-select-selector': { [`${antCls}-select ${antCls}-select-selector`]: {
borderStartEndRadius: 0, borderStartEndRadius: 0,
borderEndEndRadius: 0, borderEndEndRadius: 0,
}, },
@ -342,7 +342,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
borderEndStartRadius: 0, borderEndStartRadius: 0,
// Reset Select's style in addon // Reset Select's style in addon
'.ant-select .ant-select-selector': { [`${antCls}-select ${antCls}-select-selector`]: {
borderStartStartRadius: 0, borderStartStartRadius: 0,
borderEndStartRadius: 0, borderEndStartRadius: 0,
}, },
@ -393,7 +393,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
display: 'inline-flex', display: 'inline-flex',
}, },
'& > .ant-picker-range': { [`& > ${antCls}-picker-range`]: {
display: 'inline-flex', display: 'inline-flex',
}, },
@ -408,9 +408,9 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
}, },
// reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input // reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker, Input
[`& > .ant-select > .ant-select-selector, [`& > ${antCls}-select > ${antCls}-select-selector,
& > .ant-select-auto-complete .${prefixCls}, & > ${antCls}-select-auto-complete .${prefixCls},
& > .ant-cascader-picker .${prefixCls}, & > ${antCls}-cascader-picker .${prefixCls},
& > .${prefixCls}-group-wrapper .${prefixCls}`]: { & > .${prefixCls}-group-wrapper .${prefixCls}`]: {
borderInlineEndWidth: token.controlLineWidth, borderInlineEndWidth: token.controlLineWidth,
borderRadius: 0, borderRadius: 0,
@ -424,34 +424,34 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
}, },
}, },
'& > .ant-select-focused': { [`& > ${antCls}-select-focused`]: {
zIndex: 1, zIndex: 1,
}, },
// update z-index for arrow icon // update z-index for arrow icon
'& > .ant-select > .ant-select-arrow': { [`& > ${antCls}-select > ${antCls}-select-arrow`]: {
zIndex: 1, // https://github.com/ant-design/ant-design/issues/20371 zIndex: 1, // https://github.com/ant-design/ant-design/issues/20371
}, },
[`& > *:first-child, [`& > *:first-child,
& > .ant-select:first-child > .ant-select-selector, & > ${antCls}-select:first-child > ${antCls}-select-selector,
& > .ant-select-auto-complete:first-child .${prefixCls}, & > ${antCls}-select-auto-complete:first-child .${prefixCls},
& > .ant-cascader-picker:first-child .${prefixCls}`]: { & > ${antCls}-cascader-picker:first-child .${prefixCls}`]: {
borderStartStartRadius: token.controlRadius, borderStartStartRadius: token.controlRadius,
borderEndStartRadius: token.controlRadius, borderEndStartRadius: token.controlRadius,
}, },
[`& > *:last-child, [`& > *:last-child,
& > .ant-select:last-child > .ant-select-selector, & > ${antCls}-select:last-child > ${antCls}-select-selector,
& > .ant-cascader-picker:last-child .${prefixCls}, & > ${antCls}-cascader-picker:last-child .${prefixCls},
& > .ant-cascader-picker-focused:last-child .${prefixCls}`]: { & > ${antCls}-cascader-picker-focused:last-child .${prefixCls}`]: {
borderInlineEndWidth: token.controlLineWidth, borderInlineEndWidth: token.controlLineWidth,
borderStartEndRadius: token.controlRadius, borderStartEndRadius: token.controlRadius,
borderEndEndRadius: token.controlRadius, borderEndEndRadius: token.controlRadius,
}, },
// https://github.com/ant-design/ant-design/issues/12493 // https://github.com/ant-design/ant-design/issues/12493
[`& > .ant-select-auto-complete .${prefixCls}`]: { [`& > ${antCls}-select-auto-complete .${prefixCls}`]: {
verticalAlign: 'top', verticalAlign: 'top',
}, },
@ -694,7 +694,7 @@ const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
}; };
const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => { const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
const { prefixCls } = token; const { prefixCls, antCls } = token;
const searchPrefixCls = `.${prefixCls}-search`; const searchPrefixCls = `.${prefixCls}-search`;
return { return {
[searchPrefixCls]: { [searchPrefixCls]: {
@ -734,10 +734,10 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
borderEndStartRadius: 0, borderEndStartRadius: 0,
}, },
[`${searchPrefixCls}-button:not(.ant-btn-primary)`]: { [`${searchPrefixCls}-button:not(${antCls}-btn-primary)`]: {
color: token.colorTextDescription, color: token.colorTextDescription,
'&.ant-btn-loading::before': { [`&${antCls}-btn-loading::before`]: {
insetInlineStart: 0, insetInlineStart: 0,
insetInlineEnd: 0, insetInlineEnd: 0,
insetBlockStart: 0, insetBlockStart: 0,