From 89876936d8965da4b251a2b5e84e5fee0b15f990 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 30 Dec 2019 11:29:41 +0100 Subject: [PATCH] [TableSortLabel] Sort asc by default (#19013) --- docs/pages/api/table-sort-label.md | 2 +- .../pages/components/tables/EnhancedTable.js | 6 ++--- .../pages/components/tables/EnhancedTable.tsx | 6 ++--- .../src/TableSortLabel/TableSortLabel.js | 5 ++-- .../src/TableSortLabel/TableSortLabel.test.js | 7 ----- tslint.json | 26 +++++++++---------- 6 files changed, 23 insertions(+), 29 deletions(-) diff --git a/docs/pages/api/table-sort-label.md b/docs/pages/api/table-sort-label.md index fcd273d9185150..ce80868cb3a170 100644 --- a/docs/pages/api/table-sort-label.md +++ b/docs/pages/api/table-sort-label.md @@ -27,7 +27,7 @@ A button based label for placing inside `TableCell` for column sorting. | active | bool | false | If `true`, the label will have the active styling (should be true for the sorted column). | | children | node | | Label contents, the arrow will be appended automatically. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| direction | 'asc'
| 'desc' | 'desc' | The current sort direction. | +| direction | 'asc'
| 'desc' | 'asc' | The current sort direction. | | hideSortIcon | bool | false | Hide sort icon when active is false. | | IconComponent | elementType | ArrowDownwardIcon | Sort icon to use. | diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js index 5edb0b1ee43bf0..d59aa3f73a9f55 100644 --- a/docs/src/pages/components/tables/EnhancedTable.js +++ b/docs/src/pages/components/tables/EnhancedTable.js @@ -99,7 +99,7 @@ function EnhancedTableHead(props) { > {headCell.label} @@ -221,8 +221,8 @@ export default function EnhancedTable() { const [rowsPerPage, setRowsPerPage] = React.useState(5); const handleRequestSort = (event, property) => { - const isDesc = orderBy === property && order === 'desc'; - setOrder(isDesc ? 'asc' : 'desc'); + const isAsc = orderBy === property && order === 'asc'; + setOrder(isAsc ? 'desc' : 'asc'); setOrderBy(property); }; diff --git a/docs/src/pages/components/tables/EnhancedTable.tsx b/docs/src/pages/components/tables/EnhancedTable.tsx index 45ed8603c69f1d..54645d21c50740 100644 --- a/docs/src/pages/components/tables/EnhancedTable.tsx +++ b/docs/src/pages/components/tables/EnhancedTable.tsx @@ -134,7 +134,7 @@ function EnhancedTableHead(props: EnhancedTableProps) { > {headCell.label} @@ -249,8 +249,8 @@ export default function EnhancedTable() { const [rowsPerPage, setRowsPerPage] = React.useState(5); const handleRequestSort = (event: React.MouseEvent, property: keyof Data) => { - const isDesc = orderBy === property && order === 'desc'; - setOrder(isDesc ? 'asc' : 'desc'); + const isAsc = orderBy === property && order === 'asc'; + setOrder(isAsc ? 'desc' : 'asc'); setOrderBy(property); }; diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.js index fe160a6207d747..c3845ebce2cb9d 100644 --- a/packages/material-ui/src/TableSortLabel/TableSortLabel.js +++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.js @@ -20,7 +20,7 @@ export const styles = theme => ({ '&:hover': { color: theme.palette.text.secondary, '& $icon': { - opacity: 1, + opacity: 0.5, }, }, '&$active': { @@ -36,6 +36,7 @@ export const styles = theme => ({ active: {}, /* Styles applied to the icon component. */ icon: { + fontSize: 18, marginRight: 4, marginLeft: 4, opacity: 0, @@ -63,7 +64,7 @@ const TableSortLabel = React.forwardRef(function TableSortLabel(props, ref) { children, classes, className, - direction = 'desc', + direction = 'asc', hideSortIcon = false, IconComponent = ArrowDownwardIcon, ...other diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js index 6dc81a39f6bc75..e741d93997a4ff 100644 --- a/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js +++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js @@ -48,13 +48,6 @@ describe('', () => { assert.strictEqual(iconChildren.length, 1); }); - it('by default should have desc direction class', () => { - const wrapper = shallow(); - const icon = wrapper.find(`.${classes.icon}`).first(); - assert.strictEqual(icon.hasClass(classes.iconDirectionAsc), false); - assert.strictEqual(icon.hasClass(classes.iconDirectionDesc), true); - }); - it('when given direction desc should have desc direction class', () => { const wrapper = shallow(); const icon = wrapper.find(`.${classes.icon}`).first(); diff --git a/tslint.json b/tslint.json index b52e1378e01e9c..d3f9df017d02c4 100644 --- a/tslint.json +++ b/tslint.json @@ -1,15 +1,15 @@ { - "defaultSeverity": "error", - "extends": ["dtslint/dtslint.json"], - "jsRules": {}, - "rules": { - "deprecation": true, - "file-name-casing": false, - "no-boolean-literal-compare": false, - "no-empty-interface": false, - "no-unnecessary-callback-wrapper": false, - "no-unnecessary-generics": false, - "no-redundant-jsdoc": false, - "semicolon": [true, "always", "ignore-bound-class-methods"] - } + "defaultSeverity": "error", + "extends": ["dtslint/dtslint.json"], + "jsRules": {}, + "rules": { + "deprecation": true, + "file-name-casing": false, + "no-boolean-literal-compare": false, + "no-empty-interface": false, + "no-unnecessary-callback-wrapper": false, + "no-unnecessary-generics": false, + "no-redundant-jsdoc": false, + "semicolon": [true, "always", "ignore-bound-class-methods"] + } }