update sort iconography

This commit is contained in:
John Mitchell
2020-01-10 16:05:44 -05:00
parent 78cc2742b2
commit 15cb92d58e
3 changed files with 30 additions and 28 deletions

View File

@@ -180,10 +180,10 @@ describe('<DataListToolbar />', () => {
integerFields: ['page', 'page_size', 'id'], integerFields: ['page', 'page_size', 'id'],
}; };
const downNumericIconSelector = 'SortNumericDownIcon'; const forwardNumericIconSelector = 'SortNumericDownIcon';
const upNumericIconSelector = 'SortNumericUpIcon'; const reverseNumericIconSelector = 'SortNumericDownAltIcon';
const downAlphaIconSelector = 'SortAlphaDownIcon'; const forwardAlphaIconSelector = 'SortAlphaDownIcon';
const upAlphaIconSelector = 'SortAlphaUpIcon'; const reverseAlphaIconSelector = 'SortAlphaDownAltIcon';
const numericColumns = [{ name: 'ID', key: 'id' }]; const numericColumns = [{ name: 'ID', key: 'id' }];
@@ -202,8 +202,8 @@ describe('<DataListToolbar />', () => {
/> />
); );
const downNumericIcon = toolbar.find(downNumericIconSelector); const reverseNumericIcon = toolbar.find(reverseNumericIconSelector);
expect(downNumericIcon.length).toBe(1); expect(reverseNumericIcon.length).toBe(1);
toolbar = mountWithContexts( toolbar = mountWithContexts(
<DataListToolbar <DataListToolbar
@@ -213,8 +213,8 @@ describe('<DataListToolbar />', () => {
/> />
); );
const upNumericIcon = toolbar.find(upNumericIconSelector); const forwardNumericIcon = toolbar.find(forwardNumericIconSelector);
expect(upNumericIcon.length).toBe(1); expect(forwardNumericIcon.length).toBe(1);
toolbar = mountWithContexts( toolbar = mountWithContexts(
<DataListToolbar <DataListToolbar
@@ -224,8 +224,8 @@ describe('<DataListToolbar />', () => {
/> />
); );
const downAlphaIcon = toolbar.find(downAlphaIconSelector); const reverseAlphaIcon = toolbar.find(reverseAlphaIconSelector);
expect(downAlphaIcon.length).toBe(1); expect(reverseAlphaIcon.length).toBe(1);
toolbar = mountWithContexts( toolbar = mountWithContexts(
<DataListToolbar <DataListToolbar
@@ -235,8 +235,8 @@ describe('<DataListToolbar />', () => {
/> />
); );
const upAlphaIcon = toolbar.find(upAlphaIconSelector); const forwardAlphaIcon = toolbar.find(forwardAlphaIconSelector);
expect(upAlphaIcon.length).toBe(1); expect(forwardAlphaIcon.length).toBe(1);
}); });
test('should render additionalControls', () => { test('should render additionalControls', () => {

View File

@@ -14,9 +14,9 @@ import {
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { import {
SortAlphaDownIcon, SortAlphaDownIcon,
SortAlphaUpIcon, SortAlphaDownAltIcon,
SortNumericDownIcon, SortNumericDownIcon,
SortNumericUpIcon, SortNumericDownAltIcon,
} from '@patternfly/react-icons'; } from '@patternfly/react-icons';
import { parseQueryString } from '@util/qs'; import { parseQueryString } from '@util/qs';
@@ -117,10 +117,12 @@ class Sort extends React.Component {
let SortIcon; let SortIcon;
if (isNumeric) { if (isNumeric) {
SortIcon = SortIcon =
sortOrder === 'ascending' ? SortNumericUpIcon : SortNumericDownIcon; sortOrder === 'ascending'
? SortNumericDownIcon
: SortNumericDownAltIcon;
} else { } else {
SortIcon = SortIcon =
sortOrder === 'ascending' ? SortAlphaUpIcon : SortAlphaDownIcon; sortOrder === 'ascending' ? SortAlphaDownIcon : SortAlphaDownAltIcon;
} }
return ( return (

View File

@@ -170,10 +170,10 @@ describe('<Sort />', () => {
}); });
test('It displays correct sort icon', () => { test('It displays correct sort icon', () => {
const downNumericIconSelector = 'SortNumericDownIcon'; const forwardNumericIconSelector = 'SortNumericDownIcon';
const upNumericIconSelector = 'SortNumericUpIcon'; const reverseNumericIconSelector = 'SortNumericDownAltIcon';
const downAlphaIconSelector = 'SortAlphaDownIcon'; const forwardAlphaIconSelector = 'SortAlphaDownIcon';
const upAlphaIconSelector = 'SortAlphaUpIcon'; const reverseAlphaIconSelector = 'SortAlphaDownAltIcon';
const qsConfigNumDown = { const qsConfigNumDown = {
namespace: 'item', namespace: 'item',
@@ -208,15 +208,15 @@ describe('<Sort />', () => {
/> />
); );
const downNumericIcon = sort.find(downNumericIconSelector); const reverseNumericIcon = sort.find(reverseNumericIconSelector);
expect(downNumericIcon.length).toBe(1); expect(reverseNumericIcon.length).toBe(1);
sort = mountWithContexts( sort = mountWithContexts(
<Sort qsConfig={qsConfigNumUp} columns={numericColumns} onSort={onSort} /> <Sort qsConfig={qsConfigNumUp} columns={numericColumns} onSort={onSort} />
); );
const upNumericIcon = sort.find(upNumericIconSelector); const forwardNumericIcon = sort.find(forwardNumericIconSelector);
expect(upNumericIcon.length).toBe(1); expect(forwardNumericIcon.length).toBe(1);
sort = mountWithContexts( sort = mountWithContexts(
<Sort <Sort
@@ -226,14 +226,14 @@ describe('<Sort />', () => {
/> />
); );
const downAlphaIcon = sort.find(downAlphaIconSelector); const reverseAlphaIcon = sort.find(reverseAlphaIconSelector);
expect(downAlphaIcon.length).toBe(1); expect(reverseAlphaIcon.length).toBe(1);
sort = mountWithContexts( sort = mountWithContexts(
<Sort qsConfig={qsConfigAlphaUp} columns={alphaColumns} onSort={onSort} /> <Sort qsConfig={qsConfigAlphaUp} columns={alphaColumns} onSort={onSort} />
); );
const upAlphaIcon = sort.find(upAlphaIconSelector); const forwardAlphaIcon = sort.find(forwardAlphaIconSelector);
expect(upAlphaIcon.length).toBe(1); expect(forwardAlphaIcon.length).toBe(1);
}); });
}); });