From 3de3fa42e0cdd759af97e9d5dff486caf2192eda Mon Sep 17 00:00:00 2001 From: zombiej Date: Wed, 18 Dec 2019 21:28:05 +0800 Subject: [PATCH 1/8] tmp lock bisheng for ci test --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 40646155e8..39ed4be7e7 100644 --- a/package.json +++ b/package.json @@ -165,7 +165,7 @@ "antd-theme-generator": "^1.1.6", "babel-eslint": "^10.0.1", "babel-plugin-add-react-displayname": "^0.0.5", - "bisheng": "^1.3.3", + "bisheng": "~1.3.3", "bisheng-plugin-antd": "^1.3.1", "bisheng-plugin-description": "^0.1.4", "bisheng-plugin-react": "^1.1.0", From e0aeb4f4a915f61234ed319de551b2df77427989 Mon Sep 17 00:00:00 2001 From: vagusX Date: Thu, 19 Dec 2019 11:51:12 +0800 Subject: [PATCH 2/8] fix: poweroff icon in button (#20338) --- .../__tests__/__snapshots__/demo.test.js.snap | 21 ++++++++++++++++++- components/button/demo/loading.md | 3 ++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.js.snap index 6cde49862f..f520e7f46f 100644 --- a/components/button/__tests__/__snapshots__/demo.test.js.snap +++ b/components/button/__tests__/__snapshots__/demo.test.js.snap @@ -607,7 +607,26 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = ` class="ant-btn ant-btn-primary" type="button" > - poweroff + + + Click me! diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md index aae327d94b..d8c9e13b19 100644 --- a/components/button/demo/loading.md +++ b/components/button/demo/loading.md @@ -15,6 +15,7 @@ A loading indicator can be added to a button by setting the `loading` property o ```jsx import { Button } from 'antd'; +import { PoweroffOutlined } from '@ant-design/icons'; class App extends React.Component { state = { @@ -45,7 +46,7 @@ class App extends React.Component { + +`; + +exports[`renders ./components/skeleton/demo/complex.md correctly 1`] = ` +
+
+ +
+
+

+
    +
  • +
  • +
  • +
  • +
+

+
+`; + +exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
- -`; - -exports[`renders ./components/skeleton/demo/children.md correctly 1`] = ` -
+
-

- Ant Design, a design language -

-

- We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. -

-
- -
-`; - -exports[`renders ./components/skeleton/demo/complex.md correctly 1`] = ` -
-
- -
-
-

-
    -
  • -
  • -
  • -
  • -
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+
+
+ + + +
+
+
+
+ +
+ +

`; diff --git a/components/skeleton/__tests__/__snapshots__/index.test.js.snap b/components/skeleton/__tests__/__snapshots__/index.test.js.snap index 32a6cb6ca9..bb87f3bc68 100644 --- a/components/skeleton/__tests__/__snapshots__/index.test.js.snap +++ b/components/skeleton/__tests__/__snapshots__/index.test.js.snap @@ -310,6 +310,46 @@ exports[`Skeleton button element size 3`] = ` `; +exports[`Skeleton input element active 1`] = ` +
+ +
+`; + +exports[`Skeleton input element size 1`] = ` +
+ +
+`; + +exports[`Skeleton input element size 2`] = ` +
+ +
+`; + +exports[`Skeleton input element size 3`] = ` +
+ +
+`; + exports[`Skeleton paragraph rows 1`] = `
{ ); const genSkeletonButton = props => mount(); const genSkeletonAvatar = props => mount(); + const genSkeletonInput = props => mount(); mountTest(Skeleton); @@ -112,4 +113,19 @@ describe('Skeleton', () => { expect(wrapperSquare.render()).toMatchSnapshot(); }); }); + + describe('input element', () => { + it('active', () => { + const wrapper = genSkeletonInput({ active: true }); + expect(wrapper.render()).toMatchSnapshot(); + }); + it('size', () => { + const wrapperSmall = genSkeletonInput({ size: 'small' }); + expect(wrapperSmall.render()).toMatchSnapshot(); + const wrapperDefault = genSkeletonInput({ size: 'default' }); + expect(wrapperDefault.render()).toMatchSnapshot(); + const wrapperLarge = genSkeletonInput({ size: 'large' }); + expect(wrapperLarge.render()).toMatchSnapshot(); + }); + }); }); diff --git a/components/skeleton/demo/button.md b/components/skeleton/demo/element.md similarity index 76% rename from components/skeleton/demo/button.md rename to components/skeleton/demo/element.md index 9c221157f0..b15d01c942 100644 --- a/components/skeleton/demo/button.md +++ b/components/skeleton/demo/element.md @@ -1,17 +1,17 @@ --- order: 2 title: - zh-CN: 骨架按钮和头像 + zh-CN: 骨架按钮、头像和输入框。 en-US: Skeleton button and avatar --- ## zh-CN -骨架按钮和头像。 +骨架按钮、头像和输入框。 ## en-US -Skeleton button and avatar. +Skeleton button, avatar and input. ```jsx import { Skeleton, Switch, Form, Radio } from 'antd'; @@ -20,8 +20,10 @@ class Demo extends React.Component { state = { buttonActive: false, avatarActive: false, + inputActive: false, buttonSize: 'default', avatarSize: 'default', + inputSize: 'default', buttonShape: 'default', avatarShape: 'circle', }; @@ -42,8 +44,10 @@ class Demo extends React.Component { const { buttonActive, avatarActive, + inputActive, buttonSize, avatarSize, + inputSize, buttonShape, avatarShape, } = this.state; @@ -93,6 +97,22 @@ class Demo extends React.Component {
+
+
+
+ + + + + + Default + Large + Small + + +
+ +
); } diff --git a/components/skeleton/index.en-US.md b/components/skeleton/index.en-US.md index 4144839fd9..4464d13a16 100644 --- a/components/skeleton/index.en-US.md +++ b/components/skeleton/index.en-US.md @@ -54,3 +54,10 @@ Provide a placeholder while you wait for content to load, or to visualise conten | active | Show animation effect | boolean | false | | size | Set the size of button | Enum{ 'large', 'small', 'default' } | - | | shape | Set the shape of button | Enum{ 'circle', 'round', 'default' } | - | + +### SkeletonInputProps + +| Property | Description | Type | Default | +| -------- | ---------------------- | ----------------------------------- | ------- | +| active | Show animation effect | boolean | false | +| size | Set the size of button | Enum{ 'large', 'small', 'default' } | - | diff --git a/components/skeleton/index.tsx b/components/skeleton/index.tsx index db815cef87..87f2c398fe 100644 --- a/components/skeleton/index.tsx +++ b/components/skeleton/index.tsx @@ -1,9 +1,11 @@ import Skeleton from './Skeleton'; import SkeletonButton from './Button'; import SkeletonAvatar from './Avatar'; +import SkeletonInput from './Input'; export { SkeletonProps } from './Skeleton'; Skeleton.Button = SkeletonButton; Skeleton.Avatar = SkeletonAvatar; +Skeleton.Input = SkeletonInput; export default Skeleton; diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md index 060e94d565..79d91cc891 100644 --- a/components/skeleton/index.zh-CN.md +++ b/components/skeleton/index.zh-CN.md @@ -55,3 +55,10 @@ cols: 1 | active | 是否展示动画效果 | boolean | false | | size | 设置按钮的大小 | Enum{ 'large', 'small', 'default' } | - | | shape | 指定按钮的形状 | Enum{ 'circle', 'round', 'default' } | - | + +### SkeletonInputProps + +| 属性 | 说明 | 类型 | 默认值 | +| ------ | ---------------- | ----------------------------------- | ------ | +| active | 是否展示动画效果 | boolean | false | +| size | 设置按钮的大小 | Enum{ 'large', 'small', 'default' } | - | diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less index f3c20710e4..de38c80423 100644 --- a/components/skeleton/style/index.less +++ b/components/skeleton/style/index.less @@ -6,6 +6,7 @@ @skeleton-title-prefix-cls: ~'@{skeleton-prefix-cls}-title'; @skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph'; @skeleton-button-prefix-cls: ~'@{skeleton-prefix-cls}-button'; +@skeleton-input-prefix-cls: ~'@{skeleton-prefix-cls}-input'; .@{skeleton-prefix-cls} { display: table; @@ -86,35 +87,45 @@ .@{skeleton-button-prefix-cls} { .skeleton-color(); } + + .@{skeleton-input-prefix-cls} { + .skeleton-color(); + } } // Skeleton element &-element { display: inline-block; - // Button .@{skeleton-button-prefix-cls} { - display: inline-block; - vertical-align: top; - background: @skeleton-color; - border-radius: @border-radius-base; - - .skeleton-element-button-size(@btn-height-base); - - &-lg { - .skeleton-element-button-size(@btn-height-lg); - } - - &-sm { - .skeleton-element-button-size(@btn-height-sm); - } + .skeleton-element-button(); } .@{skeleton-avatar-prefix-cls} { .skeleton-element-avatar(); } + + .@{skeleton-input-prefix-cls} { + .skeleton-element-input(); + } } } +// Button +.skeleton-element-button() { + display: inline-block; + vertical-align: top; + background: @skeleton-color; + border-radius: @border-radius-base; + .skeleton-element-button-size(@btn-height-base); + + &-lg { + .skeleton-element-button-size(@btn-height-lg); + } + + &-sm { + .skeleton-element-button-size(@btn-height-sm); + } +} // Avatar .skeleton-element-avatar() { display: inline-block; @@ -132,6 +143,23 @@ } } +// Input +.skeleton-element-input() { + display: inline-block; + vertical-align: top; + background: @skeleton-color; + + .skeleton-element-input-size(@input-height-base); + + &-lg { + .skeleton-element-input-size(@input-height-lg); + } + + &-sm { + .skeleton-element-input-size(@input-height-sm); + } +} + .skeleton-element-avatar-size(@size) { width: @size; .skeleton-element-common-size(@size); @@ -155,6 +183,11 @@ } } +.skeleton-element-input-size(@size) { + width: 100%; + .skeleton-element-common-size(@size); +} + .skeleton-element-common-size(@size) { height: @size; line-height: @size; From 4ca79ffc0766785bc1036717f6dbeeedb5c861ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Thu, 19 Dec 2019 14:47:12 +0800 Subject: [PATCH 4/8] docs: components and documentation in two pages (#20330) * :memo: Add documentation in header nav * site: fix header active item and menu items * :lipstick: better components menu group style * :lipstick: more details of site menu style * :white_check_mark: fix eslint error --- docs/react/migration-v4.en-US.md | 2 +- docs/react/migration-v4.zh-CN.md | 2 +- site/theme/en-US.js | 3 +- site/theme/static/common.less | 59 ++++++++++++++----- site/theme/template/Content/MainContent.jsx | 65 ++++++++------------- site/theme/template/Layout/Header.jsx | 7 ++- site/theme/template/utils.jsx | 54 ++++++++--------- site/theme/zh-CN.js | 5 +- 8 files changed, 106 insertions(+), 91 deletions(-) diff --git a/docs/react/migration-v4.en-US.md b/docs/react/migration-v4.en-US.md index 298fef8807..ed61d99981 100644 --- a/docs/react/migration-v4.en-US.md +++ b/docs/react/migration-v4.en-US.md @@ -1,5 +1,5 @@ --- -order: 1 +order: 7 title: V3 to V4 --- diff --git a/docs/react/migration-v4.zh-CN.md b/docs/react/migration-v4.zh-CN.md index 09666b512b..eaa3412148 100644 --- a/docs/react/migration-v4.zh-CN.md +++ b/docs/react/migration-v4.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 1 +order: 7 title: 从 v3 到 v4 --- diff --git a/site/theme/en-US.js b/site/theme/en-US.js index 99cac573fc..d2ee67ba1a 100644 --- a/site/theme/en-US.js +++ b/site/theme/en-US.js @@ -3,8 +3,7 @@ module.exports = { messages: { 'app.header.search': 'Search...', 'app.header.menu.home': 'Home', - 'app.header.menu.practice': 'Practice', - 'app.header.menu.pattern': 'Patterns', + 'app.header.menu.documentation': 'Documentation', 'app.header.menu.components': 'Components', 'app.header.menu.spec': 'Guidelines', 'app.header.menu.resource': 'Resources', diff --git a/site/theme/static/common.less b/site/theme/static/common.less index 6ba4a6bafe..ecb078f86a 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -38,6 +38,7 @@ a { z-index: 1; &-inner { + height: 100%; max-height: 100vh; overflow-x: hidden; overflow-y: hidden; @@ -46,22 +47,56 @@ a { &:hover &-inner { overflow-y: auto; } + + > div, + > div > div { + height: 100%; + } } .aside-container { + height: 100%; padding-bottom: 48px; font-family: Avenir, @font-family, sans-serif; - &.ant-menu-inline .ant-menu-submenu-title h4, - &.ant-menu-inline > .ant-menu-item, - &.ant-menu-inline .ant-menu-item a { - overflow: hidden; - font-size: 14px; - text-overflow: ellipsis; - } + &.ant-menu-inline { + .ant-menu-submenu-title h4, + > .ant-menu-item, + .ant-menu-item a { + overflow: hidden; + font-weight: 500; + font-size: 14px; + text-overflow: ellipsis; + } - &.ant-menu-inline .ant-menu-item-group-title { - padding-left: 56px; + .ant-menu-item-group-title { + margin-top: 16px; + margin-bottom: 16px; + font-size: 13px; + + &::after { + position: relative; + top: 12px; + display: block; + width: calc(100% - 20px); + height: 1px; + background: @border-color-split; + content: ''; + } + } + + > .ant-menu-item, + > .ant-menu-submenu > .ant-menu-submenu-title, + > .ant-menu-item-group > .ant-menu-item-group-title, + > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item { + padding-left: 40px !important; + } + + .ant-menu-item-group:first-child { + .ant-menu-item-group-title { + margin-top: 0; + } + } } a[disabled] { @@ -112,12 +147,6 @@ a { .ant-menu-item > a:hover { color: @primary-color; } - - .menu-antd-components-count { - margin-left: 0.5em; - color: @disabled-color; - font-size: 12px; - } } #react-content { diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index a776eee9da..0ce0d8cd16 100644 --- a/site/theme/template/Content/MainContent.jsx +++ b/site/theme/template/Content/MainContent.jsx @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Link } from 'bisheng/router'; import { Row, Col, Menu, Affix } from 'antd'; -import { FormattedMessage, injectIntl } from 'react-intl'; +import { injectIntl } from 'react-intl'; import classNames from 'classnames'; import get from 'lodash/get'; import MobileMenu from 'rc-drawer'; @@ -25,15 +25,18 @@ function getModuleData(props) { .filter(item => item) .slice(0, 2) .join('/'); - const moduleData = - moduleName === 'components' || - moduleName === 'docs/react' || - moduleName === 'changelog' || - moduleName === 'changelog-cn' - ? [...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog] - : props.picked[moduleName]; const excludedSuffix = utils.isZhCN(props.location.pathname) ? 'en-US.md' : 'zh-CN.md'; - return moduleData.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix)); + let data; + switch (moduleName) { + case 'docs/react': + case 'changelog': + case 'changelog-cn': + data = [...props.picked['docs/react'], ...props.picked.changelog]; + break; + default: + data = props.picked[moduleName]; + } + return data.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix)); } function fileNameToPath(filename) { @@ -52,24 +55,6 @@ const getSideBarOpenKeys = nextProps => { return shouldOpenKeys; }; -const getSubMenuTitle = menuItem => { - if (menuItem.title !== 'Components') { - return menuItem.title; - } - let count = 0; - menuItem.children.forEach(item => { - if (item.children) { - count += item.children.length; - } - }); - return ( -

- - {count} -

- ); -}; - class MainContent extends Component { static contextTypes = { isMobile: PropTypes.bool.isRequired, @@ -128,21 +113,19 @@ class MainContent extends Component { themeConfig.typeOrder, ); return menuItems.map(menuItem => { + if (menuItem.type === 'type') { + return ( + + {menuItem.children + .sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0)) + .map(leaf => this.generateMenuItem(false, leaf, footerNavIcons))} + + ); + } if (menuItem.children) { return ( - - {menuItem.children.map(child => { - if (child.type === 'type') { - return ( - - {child.children - .sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0)) - .map(leaf => this.generateMenuItem(false, leaf, footerNavIcons))} - - ); - } - return this.generateMenuItem(false, child, footerNavIcons); - })} + + {menuItem.children.map(child => this.generateMenuItem(false, child, footerNavIcons))} ); } @@ -298,7 +281,7 @@ class MainContent extends Component { }); const menuChild = ( + + + + + diff --git a/site/theme/template/utils.jsx b/site/theme/template/utils.jsx index bfcc26f4e0..a1d1d84294 100644 --- a/site/theme/template/utils.jsx +++ b/site/theme/template/utils.jsx @@ -9,34 +9,34 @@ export function getMenuItems(moduleData, locale, categoryOrder, typeOrder) { menuMeta.sort(sortFn).forEach(meta => { if (!meta.category) { menuItems.push(meta); - } else { - const category = meta.category[locale] || meta.category; - let group = menuItems.filter(i => i.title === category)[0]; - if (!group) { - group = { - type: 'category', - title: category, - children: [], - order: categoryOrder[category], - }; - menuItems.push(group); - } - if (meta.type) { - let type = group.children.filter(i => i.title === meta.type)[0]; - if (!type) { - type = { - type: 'type', - title: meta.type, - children: [], - order: typeOrder[meta.type], - }; - group.children.push(type); - } - type.children.push(meta); - } else { - group.children.push(meta); - } + return; } + if (meta.category === 'Components' && meta.type) { + let type = menuItems.find(i => i.title === meta.type); + if (!type) { + type = { + type: 'type', + title: meta.type, + children: [], + order: typeOrder[meta.type], + }; + menuItems.push(type); + } + type.children.push(meta); + return; + } + const category = meta.category[locale] || meta.category; + let group = menuItems.find(i => i.title === category); + if (!group) { + group = { + type: 'category', + title: category, + children: [], + order: categoryOrder[category], + }; + menuItems.push(group); + } + group.children.push(meta); }); return menuItems .map(i => { diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js index 21653a4858..eefac53602 100644 --- a/site/theme/zh-CN.js +++ b/site/theme/zh-CN.js @@ -3,10 +3,9 @@ module.exports = { messages: { 'app.header.search': '全文本搜索...', 'app.header.menu.home': '首页', - 'app.header.menu.practice': '实践', - 'app.header.menu.pattern': '模式', + 'app.header.menu.documentation': '文档', 'app.header.menu.components': '组件', - 'app.header.menu.spec': '设计语言', + 'app.header.menu.spec': '设计', 'app.header.menu.resource': '资源', 'app.header.menu.mobile': '移动版', 'app.header.menu.pro.v4': 'Ant Design Pro v4', From 4ce683a8b2294e76aa09ce6b57ac33f4d2b85892 Mon Sep 17 00:00:00 2001 From: zombiej Date: Thu, 19 Dec 2019 16:10:36 +0800 Subject: [PATCH 5/8] test: Update test case --- .../date-picker/__tests__/__snapshots__/other.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/date-picker/__tests__/__snapshots__/other.test.js.snap b/components/date-picker/__tests__/__snapshots__/other.test.js.snap index c25add3453..469bb7cf41 100644 --- a/components/date-picker/__tests__/__snapshots__/other.test.js.snap +++ b/components/date-picker/__tests__/__snapshots__/other.test.js.snap @@ -986,7 +986,7 @@ exports[`Picker format by locale week 1`] = ` placeholder="请选择周" readonly="" size="12" - value="2000-52周" + value="1999-52周" /> Date: Thu, 19 Dec 2019 16:23:30 +0800 Subject: [PATCH 6/8] fix: Form select error style (#20345) --- components/form/style/index.less | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/components/form/style/index.less b/components/form/style/index.less index c5d81a8d4c..89fd3361c1 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -248,14 +248,14 @@ //select .@{ant-prefix}-select { - &-selection { + .@{ant-prefix}-select-selector { border-color: @warning-color; &:hover { border-color: @warning-color; } } - &-open .@{ant-prefix}-select-selection, - &-focused .@{ant-prefix}-select-selection { + &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector, + &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector { .active(@warning-color); } } @@ -289,14 +289,14 @@ //select .@{ant-prefix}-select { - &-selection { + .@{ant-prefix}-select-selector { border-color: @error-color; &:hover { border-color: @error-color; } } - &-open .@{ant-prefix}-select-selection, - &-focused .@{ant-prefix}-select-selection { + &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector, + &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selector { .active(@error-color); } } @@ -308,7 +308,7 @@ } .@{ant-prefix}-input-group-addon .@{ant-prefix}-select { - &-selection { + &-selector { border-color: transparent; box-shadow: none; } From a33acaacf40b65b147156d1b78482687f701c82b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 19 Dec 2019 16:35:04 +0800 Subject: [PATCH 7/8] fix: datePicker popup z-index should over modal (#20346) --- components/date-picker/style/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less index 9f694329e6..b73dfbb9e9 100644 --- a/components/date-picker/style/index.less +++ b/components/date-picker/style/index.less @@ -160,7 +160,7 @@ &-dropdown { .reset-component; position: absolute; - z-index: @zindex-picker-panel; + z-index: @zindex-picker; &-hidden { display: none; From bfe12945624cf50c22c55b13ed194a7d6ba28327 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 19 Dec 2019 17:48:56 +0800 Subject: [PATCH 8/8] 4.0 table (#20350) * chore: Update table style * chore: diff table filter hover color * style lint --- components/table/style/index.less | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/components/table/style/index.less b/components/table/style/index.less index d72135a00b..29d3babad5 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -7,6 +7,7 @@ @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown'; @table-header-icon-color: #bfbfbf; @table-header-icon-color-hover: darken(@table-header-icon-color, 10%); +@table-header-sort-active-filter-bg: lighten(@table-header-sort-active-bg, 2%); @table-selection-column-width: 60px; @@ -159,6 +160,10 @@ &:hover { background: @table-header-sort-active-bg; + + .@{table-prefix-cls}-filter-trigger-container { + background: @table-header-sort-active-filter-bg; + } } } @@ -226,10 +231,12 @@ flex: none; align-items: stretch; align-self: stretch; + cursor: pointer; transition: background-color 0.3s; &-open, - &:hover { + &:hover, + thead th.@{table-prefix-cls}-column-has-sorters:hover &:hover { background: @table-header-filter-active-bg; } }