mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 03:22:59 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

chore: add linter of not selector (#40264)

Browse Source 
* chore: add linter of not selector

* chore: update tree style

* fix: DatePicker

* fix: compact

* fix: compact vertical

* perf: style

* fix: vertical compact

Co-authored-by: MadCcc <1075746765@qq.com>
This commit is contained in:
二货爱吃白萝卜 2023-01-17 17:51:59 +08:00 committed by GitHub
parent 164ea65250
commit cc1870d8bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 135 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.dumi/theme/layouts/GlobalLayout.tsx
View File

@ -1,11 +1,16 @@
import React, { startTransition, useCallback, useEffect, useMemo } from 'react'; import {
import { createSearchParams, useOutlet, useSearchParams } from 'dumi'; createCache,
legacyNotSelectorLinter,
logicalPropertiesLinter,
StyleProvider,
} from '@ant-design/cssinjs';
import { ConfigProvider, theme as antdTheme } from 'antd'; import { ConfigProvider, theme as antdTheme } from 'antd';
import { createCache, StyleProvider, logicalPropertiesLinter } from '@ant-design/cssinjs';
import type { DirectionType } from 'antd/es/config-provider'; import type { DirectionType } from 'antd/es/config-provider';
import ThemeSwitch from '../common/ThemeSwitch'; import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
import type { ThemeName } from '../common/ThemeSwitch'; import React, { startTransition, useCallback, useEffect, useMemo } from 'react';
import useLocation from '../../hooks/useLocation'; import useLocation from '../../hooks/useLocation';
import type { ThemeName } from '../common/ThemeSwitch';
import ThemeSwitch from '../common/ThemeSwitch';
import type { SiteContextProps } from '../slots/SiteContext'; import type { SiteContextProps } from '../slots/SiteContext';
import SiteContext from '../slots/SiteContext'; import SiteContext from '../slots/SiteContext';
@ -102,7 +107,7 @@ const GlobalLayout: React.FC = () => {
); );
return ( return (
<StyleProvider cache={styleCache} linters={[logicalPropertiesLinter]}> <StyleProvider cache={styleCache} linters={[logicalPropertiesLinter, legacyNotSelectorLinter]}>
<SiteContext.Provider value={siteContextValue}> <SiteContext.Provider value={siteContextValue}>
<ConfigProvider <ConfigProvider
theme={{ theme={{

89
components/date-picker/style/index.ts
View File

@ -29,6 +29,7 @@ export interface ComponentToken {
} }
export type PickerPanelToken = { export type PickerPanelToken = {
pickerCellCls: string;
pickerCellInnerCls: string; pickerCellInnerCls: string;
pickerTextHeight: number; pickerTextHeight: number;
pickerPanelCellWidth: number; pickerPanelCellWidth: number;
@ -71,6 +72,7 @@ const genPikerPadding = (
const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
const { const {
componentCls, componentCls,
pickerCellCls,
pickerCellInnerCls, pickerCellInnerCls,
pickerPanelCellHeight, pickerPanelCellHeight,
motionDurationSlow, motionDurationSlow,
@ -117,8 +119,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
}, },
// >>> Hover // >>> Hover
[`&:hover:not(&-in-view), [`&:hover:not(${pickerCellCls}-in-view),
&:hover:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover-start):not(&-range-hover-end)`]: &:hover:not(${pickerCellCls}-selected):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end):not(${pickerCellCls}-range-hover-start):not(${pickerCellCls}-range-hover-end)`]:
{ {
[pickerCellInnerCls]: { [pickerCellInnerCls]: {
background: controlItemBgHover, background: controlItemBgHover,
@ -126,7 +128,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
}, },
// >>> Today // >>> Today
[`&-in-view:is(&-today) ${pickerCellInnerCls}`]: { [`&-in-view${pickerCellCls}-today ${pickerCellInnerCls}`]: {
'&::before': { '&::before': {
position: 'absolute', position: 'absolute',
top: 0, top: 0,
@ -141,7 +143,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
}, },
// >>> In Range // >>> In Range
'&-in-view:is(&-in-range)': { [`&-in-view${pickerCellCls}-in-range`]: {
position: 'relative', position: 'relative',
'&::before': { '&::before': {
@ -150,36 +152,36 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
}, },
// >>> Selected // >>> Selected
[`&-in-view:is(&-selected) ${pickerCellInnerCls}, [`&-in-view${pickerCellCls}-selected ${pickerCellInnerCls},
&-in-view:is(&-range-start) ${pickerCellInnerCls}, &-in-view${pickerCellCls}-range-start ${pickerCellInnerCls},
&-in-view:is(&-range-end) ${pickerCellInnerCls}`]: { &-in-view${pickerCellCls}-range-end ${pickerCellInnerCls}`]: {
color: colorTextLightSolid, color: colorTextLightSolid,
background: colorPrimary, background: colorPrimary,
}, },
[`&-in-view:is(&-range-start):not(&-range-start-single), [`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single),
&-in-view:is(&-range-end):not(&-range-end-single)`]: { &-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)`]: {
'&::before': { '&::before': {
background: controlItemBgActive, background: controlItemBgActive,
}, },
}, },
'&-in-view:is(&-range-start)::before': { [`&-in-view${pickerCellCls}-range-start::before`]: {
insetInlineStart: '50%', insetInlineStart: '50%',
}, },
'&-in-view:is(&-range-end)::before': { [`&-in-view${pickerCellCls}-range-end::before`]: {
insetInlineEnd: '50%', insetInlineEnd: '50%',
}, },
// >>> Range Hover // >>> Range Hover
[`&-in-view:is(&-range-hover-start):not(&-in-range):not(&-range-start):not(&-range-end), [`&-in-view${pickerCellCls}-range-hover-start:not(${pickerCellCls}-in-range):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end),
&-in-view:is(&-range-hover-end):not(&-in-range):not(&-range-start):not(&-range-end), &-in-view${pickerCellCls}-range-hover-end:not(${pickerCellCls}-in-range):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end),
&-in-view:is(&-range-hover-start):is(&-range-start-single), &-in-view${pickerCellCls}-range-hover-start${pickerCellCls}-range-start-single,
&-in-view:is(&-range-hover-start):is(&-range-start):is(&-range-end):is(&-range-end-near-hover), &-in-view${pickerCellCls}-range-hover-start${pickerCellCls}-range-start${pickerCellCls}-range-end${pickerCellCls}-range-end-near-hover,
&-in-view:is(&-range-hover-end):is(&-range-start):is(&-range-end):is(&-range-start-near-hover), &-in-view${pickerCellCls}-range-hover-end${pickerCellCls}-range-start${pickerCellCls}-range-end${pickerCellCls}-range-start-near-hover,
&-in-view:is(&-range-hover-end):is(&-range-end-single), &-in-view${pickerCellCls}-range-hover-end${pickerCellCls}-range-end-single,
&-in-view:is(&-range-hover):not(&-in-range)`]: { &-in-view${pickerCellCls}-range-hover:not(${pickerCellCls}-in-range)`]: {
'&::after': { '&::after': {
position: 'absolute', position: 'absolute',
top: '50%', top: '50%',
@ -202,22 +204,22 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
}, },
// Hover with in range // Hover with in range
[`&-in-view:is(&-in-range):is(&-range-hover)::before, [`&-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover::before,
&-in-view:is(&-range-start):is(&-range-hover)::before, &-in-view${pickerCellCls}-range-start${pickerCellCls}-range-hover::before,
&-in-view:is(&-range-end):is(&-range-hover)::before, &-in-view${pickerCellCls}-range-end${pickerCellCls}-range-hover::before,
&-in-view:is(&-range-start):not(&-range-start-single):is(&-range-hover-start)::before, &-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single)${pickerCellCls}-range-hover-start::before,
&-in-view:is(&-range-end):not(&-range-end-single):is(&-range-hover-end)::before, &-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)${pickerCellCls}-range-hover-end::before,
${componentCls}-panel ${componentCls}-panel
> :not(${componentCls}-date-panel) > :not(${componentCls}-date-panel)
&-in-view:is(&-in-range):is(&-range-hover-start)::before, &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-start::before,
${componentCls}-panel ${componentCls}-panel
> :not(${componentCls}-date-panel) > :not(${componentCls}-date-panel)
&-in-view:is(&-in-range):is(&-range-hover-end)::before`]: { &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-end::before`]: {
background: pickerBasicCellHoverWithRangeColor, background: pickerBasicCellHoverWithRangeColor,
}, },
// range start border-radius // range start border-radius
[`&-in-view:is(&-range-start):not(&-range-start-single):not(&-range-end) ${pickerCellInnerCls}`]: [`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single):not(${pickerCellCls}-range-end) ${pickerCellInnerCls}`]:
{ {
borderStartStartRadius: borderRadiusSM, borderStartStartRadius: borderRadiusSM,
borderEndStartRadius: borderRadiusSM, borderEndStartRadius: borderRadiusSM,
@ -226,7 +228,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
}, },
// range end border-radius // range end border-radius
[`&-in-view:is(&-range-end):not(&-range-end-single):not(&-range-start) ${pickerCellInnerCls}`]: [`&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single):not(${pickerCellCls}-range-start) ${pickerCellInnerCls}`]:
{ {
borderStartStartRadius: 0, borderStartStartRadius: 0,
borderEndStartRadius: 0, borderEndStartRadius: 0,
@ -234,16 +236,16 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
borderEndEndRadius: borderRadiusSM, borderEndEndRadius: borderRadiusSM,
}, },
'&-range-hover:is(&-range-end)::after': { [`&-range-hover${pickerCellCls}-range-end::after`]: {
insetInlineStart: '50%', insetInlineStart: '50%',
}, },
// Edge start // Edge start
[`tr > &-in-view:is(&-range-hover):first-child::after, [`tr > &-in-view${pickerCellCls}-range-hover:first-child::after,
tr > &-in-view:is(&-range-hover-end):first-child::after, tr > &-in-view${pickerCellCls}-range-hover-end:first-child::after,
&-in-view:is(&-start):is(&-range-hover-edge-start):is(&-range-hover-edge-start-near-range)::after, &-in-view${pickerCellCls}-start${pickerCellCls}-range-hover-edge-start${pickerCellCls}-range-hover-edge-start-near-range::after,
&-in-view:is(&-range-hover-edge-start):not(&-range-hover-edge-start-near-range)::after, &-in-view${pickerCellCls}-range-hover-edge-start:not(${pickerCellCls}-range-hover-edge-start-near-range)::after,
&-in-view:is(&-range-hover-start)::after`]: { &-in-view${pickerCellCls}-range-hover-start::after`]: {
insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: lineWidth, borderStartStartRadius: lineWidth,
@ -251,11 +253,11 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
}, },
// Edge end // Edge end
[`tr > &-in-view:is(&-range-hover):last-child::after, [`tr > &-in-view${pickerCellCls}-range-hover:last-child::after,
tr > &-in-view:is(&-range-hover-start):last-child::after, tr > &-in-view${pickerCellCls}-range-hover-start:last-child::after,
&-in-view:is(&-end):is(&-range-hover-edge-end):is(&-range-hover-edge-end-near-range)::after, &-in-view${pickerCellCls}-end${pickerCellCls}-range-hover-edge-end${pickerCellCls}-range-hover-edge-end-near-range::after,
&-in-view:is(&-range-hover-edge-end):not(&-range-hover-edge-end-near-range)::after, &-in-view${pickerCellCls}-range-hover-edge-end:not(${pickerCellCls}-range-hover-edge-end-near-range)::after,
&-in-view:is(&-range-hover-end)::after`]: { &-in-view${pickerCellCls}-range-hover-end::after`]: {
insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartEndRadius: lineWidth, borderStartEndRadius: lineWidth,
@ -275,7 +277,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
background: colorBgContainerDisabled, background: colorBgContainerDisabled,
}, },
}, },
[`&-disabled:is(&-today) ${pickerCellInnerCls}::before`]: { [`&-disabled${pickerCellCls}-today ${pickerCellInnerCls}::before`]: {
borderColor: colorTextDisabled, borderColor: colorTextDisabled,
}, },
}; };
@ -542,7 +544,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
}, },
// Hover with range start & end // Hover with range start & end
'&-range-hover:is(&-range-start)::after': { [`&-range-hover${componentCls}-range-start::after`]: {
insetInlineEnd: '50%', insetInlineEnd: '50%',
}, },
@ -602,7 +604,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
color: colorLinkActive, color: colorLinkActive,
}, },
'&:is(&-disabled)': { [`&${componentCls}-today-btn-disabled`]: {
color: colorTextDisabled, color: colorTextDisabled,
cursor: 'not-allowed', cursor: 'not-allowed',
}, },
@ -680,8 +682,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
// Clear cell style // Clear cell style
[`${componentCls}-cell`]: { [`${componentCls}-cell`]: {
[`&:hover ${pickerCellInnerCls}, [`&:hover ${pickerCellInnerCls},
&-selected ${pickerCellInnerCls}, &-selected ${pickerCellInnerCls},
${pickerCellInnerCls}`]: { ${pickerCellInnerCls}`]: {
background: 'transparent !important', background: 'transparent !important',
}, },
}, },
@ -1395,6 +1397,7 @@ export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): Pi
const { componentCls, controlHeightLG, controlHeightSM, colorPrimary, paddingXXS } = token; const { componentCls, controlHeightLG, controlHeightSM, colorPrimary, paddingXXS } = token;
return { return {
pickerCellCls: `${componentCls}-cell`,
pickerCellInnerCls: `${componentCls}-cell-inner`, pickerCellInnerCls: `${componentCls}-cell-inner`,
pickerTextHeight: controlHeightLG, pickerTextHeight: controlHeightLG,
pickerPanelCellWidth: controlHeightSM * 1.5, pickerPanelCellWidth: controlHeightSM * 1.5,

6
components/input-number/style/index.ts
View File

@ -54,7 +54,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
[componentCls]: { [componentCls]: {
...resetComponent(token), ...resetComponent(token),
...genBasicInputStyle(token), ...genBasicInputStyle(token),
...genStatusStyle(token), ...genStatusStyle(token, componentCls),
display: 'inline-block', display: 'inline-block',
width: controlWidth, width: controlWidth,
@ -308,7 +308,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
return { return {
[`${componentCls}-affix-wrapper`]: { [`${componentCls}-affix-wrapper`]: {
...genBasicInputStyle(token), ...genBasicInputStyle(token),
...genStatusStyle(token), ...genStatusStyle(token, `${componentCls}-affix-wrapper`),
// or number handler will cover form status // or number handler will cover form status
position: 'relative', position: 'relative',
display: 'inline-flex', display: 'inline-flex',
@ -324,7 +324,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
borderRadius: borderRadiusSM, borderRadius: borderRadiusSM,
}, },
'&:not(&-disabled):hover': { [`&:not(${componentCls}-affix-wrapper-disabled):hover`]: {
...genHoverStyle(token), ...genHoverStyle(token),
zIndex: 1, zIndex: 1,
}, },

14
components/input/style/index.ts
View File

@ -78,7 +78,7 @@ export const genInputSmallStyle = (token: InputToken): CSSObject => ({
borderRadius: token.borderRadiusSM, borderRadius: token.borderRadiusSM,
}); });
export const genStatusStyle = (token: InputToken): CSSObject => { export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject => {
const { const {
componentCls, componentCls,
colorError, colorError,
@ -90,7 +90,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
} = token; } = token;
return { return {
'&-status-error:not(&-disabled):not(&-borderless)&': { [`&-status-error:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
borderColor: colorError, borderColor: colorError,
'&:hover': { '&:hover': {
@ -111,7 +111,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
color: colorError, color: colorError,
}, },
}, },
'&-status-warning:not(&-disabled):not(&-borderless)&': { [`&-status-warning:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
borderColor: colorWarning, borderColor: colorWarning,
'&:hover': { '&:hover': {
@ -511,10 +511,10 @@ const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2; const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
return { return {
[`${componentCls}`]: { [componentCls]: {
...resetComponent(token), ...resetComponent(token),
...genBasicInputStyle(token), ...genBasicInputStyle(token),
...genStatusStyle(token), ...genStatusStyle(token, componentCls),
'&[type="color"]': { '&[type="color"]': {
height: token.controlHeight, height: token.controlHeight,
@ -594,7 +594,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
...genBasicInputStyle(token), ...genBasicInputStyle(token),
display: 'inline-flex', display: 'inline-flex',
'&:not(&-disabled):hover': { [`&:not(${componentCls}-affix-wrapper-disabled):hover`]: {
...genHoverStyle(token), ...genHoverStyle(token),
zIndex: 1, zIndex: 1,
[`${componentCls}-search-with-button &`]: { [`${componentCls}-search-with-button &`]: {
@ -672,7 +672,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
}, },
// status // status
...genStatusStyle(token), ...genStatusStyle(token, `${componentCls}-affix-wrapper`),
}, },
}; };
}; };

4
components/mentions/style/index.ts
View File

@ -42,7 +42,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
); );
return { return {
[`${componentCls}`]: { [componentCls]: {
...resetComponent(token), ...resetComponent(token),
...genBasicInputStyle(token), ...genBasicInputStyle(token),
@ -55,7 +55,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
whiteSpace: 'pre-wrap', whiteSpace: 'pre-wrap',
verticalAlign: 'bottom', verticalAlign: 'bottom',
...genStatusStyle(token), ...genStatusStyle(token, componentCls),
'&-disabled': { '&-disabled': {
'> textarea': { '> textarea': {

4
components/radio/style/index.tsx
View File

@ -405,7 +405,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
pointerEvents: 'none', pointerEvents: 'none',
}, },
'&-checked:not(&-disabled)': { [`&-checked:not(${componentCls}-button-wrapper-disabled)`]: {
zIndex: 1, zIndex: 1,
color: radioCheckedColor, color: radioCheckedColor,
background: radioButtonCheckedBg, background: radioButtonCheckedBg,
@ -438,7 +438,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
}, },
}, },
[`${componentCls}-group-solid &-checked:not(&-disabled)`]: { [`${componentCls}-group-solid &-checked:not(${componentCls}-button-wrapper-disabled)`]: {
color: radioSolidCheckedColor, color: radioSolidCheckedColor,
background: radioCheckedColor, background: radioCheckedColor,
borderColor: radioCheckedColor, borderColor: radioCheckedColor,

2
components/select/style/index.tsx
View File

@ -133,7 +133,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
display: 'inline-block', display: 'inline-block',
cursor: 'pointer', cursor: 'pointer',
[`&:not(&-customize-input) ${componentCls}-selector`]: { [`&:not(${componentCls}-customize-input) ${componentCls}-selector`]: {
...genSelectorStyle(token), ...genSelectorStyle(token),
...getSearchInputWithoutBorderStyle(token), ...getSearchInputWithoutBorderStyle(token),
}, },

20
components/style/compact-item-vertical.ts
View File

@ -3,10 +3,10 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import type { DerivativeToken, FullToken } from '../theme/internal'; import type { DerivativeToken, FullToken } from '../theme/internal';
import type { OverrideComponent } from '../theme/util/genComponentStyleHook'; import type { OverrideComponent } from '../theme/util/genComponentStyleHook';
function compactItemVerticalBorder(token: DerivativeToken): CSSObject { function compactItemVerticalBorder(token: DerivativeToken, parentCls: string): CSSObject {
return { return {
// border collapse // border collapse
'&-item:not(&-last-item)': { [`&-item:not(${parentCls}-last-item)`]: {
marginBottom: -token.lineWidth, marginBottom: -token.lineWidth,
}, },
@ -22,20 +22,20 @@ function compactItemVerticalBorder(token: DerivativeToken): CSSObject {
}; };
} }
function compactItemBorderVerticalRadius(prefixCls: string): CSSObject { function compactItemBorderVerticalRadius(prefixCls: string, parentCls: string): CSSObject {
return { return {
'&-item:not(&-first-item):not(&-last-item)': { [`&-item:not(${parentCls}-first-item):not(${parentCls}-last-item)`]: {
borderRadius: 0, borderRadius: 0,
}, },
'&-item&-first-item:not(&-last-item)': { [`&-item${parentCls}-first-item:not(${parentCls}-last-item)`]: {
[`&, &${prefixCls}-sm, &${prefixCls}-lg`]: { [`&, &${prefixCls}-sm, &${prefixCls}-lg`]: {
borderEndEndRadius: 0, borderEndEndRadius: 0,
borderEndStartRadius: 0, borderEndStartRadius: 0,
}, },
}, },
'&-item&-last-item:not(&-first-item)': { [`&-item${parentCls}-last-item:not(${parentCls}-first-item)`]: {
[`&, &${prefixCls}-sm, &${prefixCls}-lg`]: { [`&, &${prefixCls}-sm, &${prefixCls}-lg`]: {
borderStartStartRadius: 0, borderStartStartRadius: 0,
borderStartEndRadius: 0, borderStartEndRadius: 0,
@ -47,10 +47,12 @@ function compactItemBorderVerticalRadius(prefixCls: string): CSSObject {
export function genCompactItemVerticalStyle<T extends OverrideComponent>( export function genCompactItemVerticalStyle<T extends OverrideComponent>(
token: FullToken<T>, token: FullToken<T>,
): CSSInterpolation { ): CSSInterpolation {
const compactCls = `${token.componentCls}-compact-vertical`;
return { return {
[`${token.componentCls}-compact-vertical`]: { [compactCls]: {
...compactItemVerticalBorder(token), ...compactItemVerticalBorder(token, compactCls),
...compactItemBorderVerticalRadius(token.componentCls), ...compactItemBorderVerticalRadius(token.componentCls, compactCls),
}, },
}; };
} }

42
components/style/compact-item.ts
View File

@ -18,14 +18,19 @@ interface CompactItemOptions {
} }
// handle border collapse // handle border collapse
function compactItemBorder(token: DerivativeToken, options: CompactItemOptions): CSSObject { function compactItemBorder(
const childCombinator = options.borderElCls ? '> *' : ''; token: DerivativeToken,
const hoverEffects = ['hover', options.focus ? 'focus' : null, 'active'] parentCls: string,
options: CompactItemOptions,
): CSSObject {
const { focusElCls, focus, borderElCls } = options;
const childCombinator = borderElCls ? '> *' : '';
const hoverEffects = ['hover', focus ? 'focus' : null, 'active']
.filter(Boolean) .filter(Boolean)
.map((n) => `&:${n} ${childCombinator}`) .map((n) => `&:${n} ${childCombinator}`)
.join(','); .join(',');
return { return {
'&-item:not(&-last-item)': { [`&-item:not(${parentCls}-last-item)`]: {
marginInlineEnd: -token.lineWidth, marginInlineEnd: -token.lineWidth,
}, },
@ -34,9 +39,9 @@ function compactItemBorder(token: DerivativeToken, options: CompactItemOptions):
zIndex: 2, zIndex: 2,
}, },
...(options.focusElCls ...(focusElCls
? { ? {
[`&${options.focusElCls}`]: { [`&${focusElCls}`]: {
zIndex: 2, zIndex: 2,
}, },
} }
@ -50,15 +55,20 @@ function compactItemBorder(token: DerivativeToken, options: CompactItemOptions):
} }
// handle border-radius // handle border-radius
function compactItemBorderRadius(prefixCls: string, options: CompactItemOptions): CSSObject { function compactItemBorderRadius(
const childCombinator = options.borderElCls ? `> ${options.borderElCls}` : ''; prefixCls: string,
parentCls: string,
options: CompactItemOptions,
): CSSObject {
const { borderElCls } = options;
const childCombinator = borderElCls ? `> ${borderElCls}` : '';
return { return {
[`&-item:not(&-first-item):not(&-last-item) ${childCombinator}`]: { [`&-item:not(${parentCls}-first-item):not(${parentCls}-last-item) ${childCombinator}`]: {
borderRadius: 0, borderRadius: 0,
}, },
'&-item:not(&-last-item)&-first-item': { [`&-item:not(${parentCls}-last-item)${parentCls}-first-item`]: {
[`& ${childCombinator}, &${prefixCls}-sm ${childCombinator}, &${prefixCls}-lg ${childCombinator}`]: [`& ${childCombinator}, &${prefixCls}-sm ${childCombinator}, &${prefixCls}-lg ${childCombinator}`]:
{ {
borderStartEndRadius: 0, borderStartEndRadius: 0,
@ -66,7 +76,7 @@ function compactItemBorderRadius(prefixCls: string, options: CompactItemOptions)
}, },
}, },
'&-item:not(&-first-item)&-last-item': { [`&-item:not(${parentCls}-first-item)${parentCls}-last-item`]: {
[`& ${childCombinator}, &${prefixCls}-sm ${childCombinator}, &${prefixCls}-lg ${childCombinator}`]: [`& ${childCombinator}, &${prefixCls}-sm ${childCombinator}, &${prefixCls}-lg ${childCombinator}`]:
{ {
borderStartStartRadius: 0, borderStartStartRadius: 0,
@ -80,10 +90,14 @@ export function genCompactItemStyle<T extends OverrideComponent>(
token: FullToken<T>, token: FullToken<T>,
options: CompactItemOptions = { focus: true }, options: CompactItemOptions = { focus: true },
): CSSInterpolation { ): CSSInterpolation {
const { componentCls } = token;
const compactCls = `${componentCls}-compact`;
return { return {
[`${token.componentCls}-compact`]: { [compactCls]: {
...compactItemBorder(token, options), ...compactItemBorder(token, compactCls, options),
...compactItemBorderRadius(token.componentCls, options), ...compactItemBorderRadius(componentCls, compactCls, options),
}, },
}; };
} }

2
components/tag/style/index.ts
View File

@ -108,7 +108,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
borderColor: 'transparent', borderColor: 'transparent',
cursor: 'pointer', cursor: 'pointer',
'&:not(&-checked):hover': { [`&:not(${token.componentCls}-checkable-checked):hover`]: {
color: token.colorPrimary, color: token.colorPrimary,
backgroundColor: token.colorFillSecondary, backgroundColor: token.colorFillSecondary,
}, },

15
components/transfer/style/index.ts
View File

@ -226,7 +226,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
}, },
}, },
'&:not(&-disabled)': { [`&:not(${componentCls}-list-content-item-disabled)`]: {
'&:hover': { '&:hover': {
backgroundColor: token.controlItemBgHover, backgroundColor: token.controlItemBgHover,
cursor: 'pointer', cursor: 'pointer',
@ -237,12 +237,6 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
}, },
}, },
// Do not change hover style when `oneWay` mode
'&-show-remove &-item:not(&-item-disabled):hover': {
background: 'transparent',
cursor: 'default',
},
'&-checked': { '&-checked': {
backgroundColor: controlItemBgActive, backgroundColor: controlItemBgActive,
}, },
@ -252,6 +246,13 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
cursor: 'not-allowed', cursor: 'not-allowed',
}, },
}, },
// Do not change hover style when `oneWay` mode
[`&-show-remove ${componentCls}-list-content-item:not(${componentCls}-list-content-item-disabled):hover`]:
{
background: 'transparent',
cursor: 'default',
},
}, },
'&-pagination': { '&-pagination': {

4
components/tree/style/index.ts
View File

@ -88,7 +88,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
}, },
}, },
'&-focused:not(:hover):not(&-active-focused)': { [`&-focused:not(:hover):not(${treeCls}-active-focused)`]: {
...genFocusOutline(token), ...genFocusOutline(token),
}, },
@ -156,7 +156,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
...genFocusOutline(token), ...genFocusOutline(token),
}, },
[`&:not(&-disabled).filter-node ${treeCls}-title`]: { [`&:not(${treeNodeCls}-disabled).filter-node ${treeCls}-title`]: {
color: 'inherit', color: 'inherit',
fontWeight: 500, fontWeight: 500,
}, },

2
package.json
View File

@ -107,7 +107,7 @@
], ],
"dependencies": { "dependencies": {
"@ant-design/colors": "^7.0.0", "@ant-design/colors": "^7.0.0",
"@ant-design/cssinjs": "^1.4.0", "@ant-design/cssinjs": "^1.5.1",
"@ant-design/icons": "^5.0.0", "@ant-design/icons": "^5.0.0",
"@ant-design/react-slick": "~1.0.0", "@ant-design/react-slick": "~1.0.0",
"@babel/runtime": "^7.18.3", "@babel/runtime": "^7.18.3",

16
tests/shared/demoTest.tsx
View File

@ -1,11 +1,16 @@
/* eslint-disable react/jsx-no-constructed-context-values */ /* eslint-disable react/jsx-no-constructed-context-values */
import {
createCache,
legacyNotSelectorLinter,
logicalPropertiesLinter,
StyleProvider,
} from '@ant-design/cssinjs';
import glob from 'glob';
import * as React from 'react'; import * as React from 'react';
import { renderToString } from 'react-dom/server'; import { renderToString } from 'react-dom/server';
import glob from 'glob';
import { StyleProvider, createCache, logicalPropertiesLinter } from '@ant-design/cssinjs';
import { excludeWarning } from './excludeWarning';
import { render } from '../utils'; import { render } from '../utils';
import { TriggerMockContext } from './demoTestContext'; import { TriggerMockContext } from './demoTestContext';
import { excludeWarning } from './excludeWarning';
require('isomorphic-fetch'); require('isomorphic-fetch');
@ -73,7 +78,10 @@ function baseText(doInject: boolean, component: string, options: Options = {}) {
// Inject cssinjs cache to avoid create <style /> element // Inject cssinjs cache to avoid create <style /> element
Demo = ( Demo = (
<StyleProvider cache={createCache()} linters={[logicalPropertiesLinter]}> <StyleProvider
cache={createCache()}
linters={[logicalPropertiesLinter, legacyNotSelectorLinter]}
>
{Demo} {Demo}
</StyleProvider> </StyleProvider>
); );