[TableSortLabel] Sort asc by default (#19013)

mui · Dec 30, 2019 · 8987693 · 8987693
1 parent 83fb7f4
commit 8987693
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 29 deletions.
diff --git 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.
 | <span class="prop-name">active</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the label will have the active styling (should be true for the sorted column). |
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | Label contents, the arrow will be appended automatically. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">direction</span> | <span class="prop-type">'asc'<br>&#124;&nbsp;'desc'</span> | <span class="prop-default">'desc'</span> | The current sort direction. |
+| <span class="prop-name">direction</span> | <span class="prop-type">'asc'<br>&#124;&nbsp;'desc'</span> | <span class="prop-default">'asc'</span> | The current sort direction. |
 | <span class="prop-name">hideSortIcon</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Hide sort icon when active is false. |
 | <span class="prop-name">IconComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">ArrowDownwardIcon</span> | Sort icon to use. |
 

diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js
@@ -99,7 +99,7 @@ function EnhancedTableHead(props) {
           >
             <TableSortLabel
               active={orderBy === headCell.id}
-              direction={order}
+              direction={orderBy === headCell.id ? order : 'asc'}
               onClick={createSortHandler(headCell.id)}
             >
               {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
@@ -134,7 +134,7 @@ function EnhancedTableHead(props: EnhancedTableProps) {
           >
             <TableSortLabel
               active={orderBy === headCell.id}
-              direction={order}
+              direction={orderBy === headCell.id ? order : 'asc'}
               onClick={createSortHandler(headCell.id)}
             >
               {headCell.label}
@@ -249,8 +249,8 @@ export default function EnhancedTable() {
   const [rowsPerPage, setRowsPerPage] = React.useState(5);
 
   const handleRequestSort = (event: React.MouseEvent<unknown>, 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
@@ -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
@@ -48,13 +48,6 @@ describe('<TableSortLabel />', () => {
       assert.strictEqual(iconChildren.length, 1);
     });
 
-    it('by default should have desc direction class', () => {
-      const wrapper = shallow(<TableSortLabel />);
-      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(<TableSortLabel direction="desc" />);
       const icon = wrapper.find(`.${classes.icon}`).first();

diff --git 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"]
+  }
 }