diff --git a/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap index a2e327c5d7..5de290439d 100644 --- a/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/pagination/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -5660,6 +5660,683 @@ Array [ , +
, + , +
, + , ] `; diff --git a/components/pagination/__tests__/__snapshots__/demo.test.ts.snap b/components/pagination/__tests__/__snapshots__/demo.test.ts.snap index 8b8852043b..8ba426887e 100644 --- a/components/pagination/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/pagination/__tests__/__snapshots__/demo.test.ts.snap @@ -4093,5 +4093,476 @@ Array [ , +
, + , +
, + , ] `; diff --git a/components/pagination/demo/wireframe.tsx b/components/pagination/demo/wireframe.tsx index ba97dcd1a6..c9cf3d7d44 100644 --- a/components/pagination/demo/wireframe.tsx +++ b/components/pagination/demo/wireframe.tsx @@ -6,6 +6,10 @@ const App: React.FC = () => (
+
+ +
+ ); diff --git a/components/pagination/style/index.ts b/components/pagination/style/index.ts index 310a30b045..787225261e 100644 --- a/components/pagination/style/index.ts +++ b/components/pagination/style/index.ts @@ -94,16 +94,6 @@ const genPaginationDisabledStyle: GenerateStyle = (t [`&${componentCls}-disabled`]: { cursor: 'not-allowed', - [`&${componentCls}-mini`]: { - [` - &:hover ${componentCls}-item:not(${componentCls}-item-active), - &:active ${componentCls}-item:not(${componentCls}-item-active), - &:hover ${componentCls}-item-link, - &:active ${componentCls}-item-link - `]: { - backgroundColor: 'transparent', - }, - }, [`${componentCls}-item`]: { cursor: 'not-allowed', @@ -189,30 +179,36 @@ const genPaginationMiniStyle: GenerateStyle = (token lineHeight: `${token.itemSizeSM - 2}px`, }, - [`&${componentCls}-mini ${componentCls}-item:not(${componentCls}-item-active)`]: { - backgroundColor: 'transparent', - borderColor: 'transparent', - '&:hover': { - backgroundColor: token.colorBgTextHover, + [`&${componentCls}-mini:not(${componentCls}-disabled) ${componentCls}-item:not(${componentCls}-item-active)`]: + { + backgroundColor: 'transparent', + borderColor: 'transparent', + '&:hover': { + backgroundColor: token.colorBgTextHover, + }, + '&:active': { + backgroundColor: token.colorBgTextActive, + }, }, - '&:active': { - backgroundColor: token.colorBgTextActive, - }, - }, [`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: { minWidth: token.itemSizeSM, height: token.itemSizeSM, margin: 0, lineHeight: `${token.itemSizeSM}px`, - [`&:hover ${componentCls}-item-link`]: { - backgroundColor: token.colorBgTextHover, - }, - [`&:active ${componentCls}-item-link`]: { - backgroundColor: token.colorBgTextActive, - }, - [`&${componentCls}-disabled:hover ${componentCls}-item-link`]: { - backgroundColor: 'transparent', + }, + + [`&${componentCls}-mini:not(${componentCls}-disabled)`]: { + [`${componentCls}-prev, ${componentCls}-next`]: { + [`&:hover ${componentCls}-item-link`]: { + backgroundColor: token.colorBgTextHover, + }, + [`&:active ${componentCls}-item-link`]: { + backgroundColor: token.colorBgTextActive, + }, + [`&${componentCls}-disabled:hover ${componentCls}-item-link`]: { + backgroundColor: 'transparent', + }, }, }, @@ -375,16 +371,6 @@ const genPaginationJumpStyle: GenerateStyle = (token opacity: 0, }, }, - - '&:focus-visible': { - [`${componentCls}-item-link-icon`]: { - opacity: 1, - }, - [`${componentCls}-item-ellipsis`]: { - opacity: 0, - }, - ...genFocusOutline(token), - }, }, [` @@ -439,10 +425,6 @@ const genPaginationJumpStyle: GenerateStyle = (token transition: `border ${token.motionDurationMid}`, }, - [`&:focus-visible ${componentCls}-item-link`]: { - ...genFocusOutline(token), - }, - [`&:hover ${componentCls}-item-link`]: { backgroundColor: token.colorBgTextHover, }, @@ -538,10 +520,6 @@ const genPaginationItemStyle: GenerateStyle = (token }, }, - // cannot merge with `&:hover` - // see https://github.com/ant-design/ant-design/pull/34002 - ...genFocusStyle(token), - '&-active': { fontWeight: token.fontWeightStrong, backgroundColor: token.itemActiveBg, @@ -635,7 +613,7 @@ const genBorderedStyle: GenerateStyle = (token) => { const { componentCls } = token; return { - [`${componentCls}${componentCls}-disabled`]: { + [`${componentCls}${componentCls}-disabled:not(${componentCls}-mini)`]: { '&, &:hover': { [`${componentCls}-item-link`]: { borderColor: token.colorBorder, @@ -680,7 +658,7 @@ const genBorderedStyle: GenerateStyle = (token) => { }, }, - [componentCls]: { + [`${componentCls}:not(${componentCls}-mini)`]: { [`${componentCls}-prev, ${componentCls}-next`]: { '&:hover button': { borderColor: token.colorPrimaryHover, @@ -727,6 +705,36 @@ const genBorderedStyle: GenerateStyle = (token) => { }; }; +const genPaginationFocusStyle: GenerateStyle = (token) => { + const { componentCls } = token; + + return { + [`${componentCls}:not(${componentCls}-disabled)`]: { + [`${componentCls}-item`]: { + ...genFocusStyle(token), + }, + + [`${componentCls}-jump-prev, ${componentCls}-jump-next`]: { + '&:focus-visible': { + [`${componentCls}-item-link-icon`]: { + opacity: 1, + }, + [`${componentCls}-item-ellipsis`]: { + opacity: 0, + }, + ...genFocusOutline(token), + }, + }, + + [`${componentCls}-prev, ${componentCls}-next`]: { + [`&:focus-visible ${componentCls}-item-link`]: { + ...genFocusOutline(token), + }, + }, + }, + }; +}; + // ============================== Export ============================== export default genComponentStyleHook( 'Pagination', @@ -747,6 +755,7 @@ export default genComponentStyleHook( ); return [ genPaginationStyle(paginationToken), + genPaginationFocusStyle(paginationToken), token.wireframe && genBorderedStyle(paginationToken), ]; }, diff --git a/package.json b/package.json index 0fcaa470df..1f508bb5bf 100644 --- a/package.json +++ b/package.json @@ -313,11 +313,11 @@ "size-limit": [ { "path": "./dist/antd.min.js", - "limit": "386 KiB" + "limit": "390 KiB" }, { "path": "./dist/antd-with-locales.min.js", - "limit": "446 KiB" + "limit": "449 KiB" } ], "tnpm": {