fix(pf4,suir): Make sort icons consistent among all dual-list selectors

Signed-off-by: Boaz Shuster <[email protected]>

Author: boaz0

packages/pf4-component-mapper/src/files/dual-list-select.js

@@ -18,8 +18,8 @@ import {
 } from '@patternfly/react-core';
 
 import {
-  SortAlphaDownIcon,
-  SortAlphaUpIcon,
+  PficonSortCommonAscIcon,
+  PficonSortCommonDescIcon,
   SearchIcon,
   AngleDoubleLeftIcon,
   AngleDoubleRightIcon,
@@ -93,7 +93,7 @@ const Toolbar = ({ sortTitle, onFilter, onSort, sortDirection, value, placeholde
       </DataToolbarItem>
       <DataToolbarItem>
         <Button onClick={onSort} title={sortTitle} variant="plain">
-          {!sortDirection ? <SortAlphaDownIcon size="md" /> : <SortAlphaUpIcon size="md" />}
+          {!sortDirection ? <PficonSortCommonAscIcon size="md" /> : <PficonSortCommonDescIcon size="md" />}
         </Button>
       </DataToolbarItem>
     </DataToolbarContent>

packages/pf4-component-mapper/src/tests/dual-list-select.test.js

@@ -7,8 +7,8 @@ import { FormGroup, TextInput } from '@patternfly/react-core';
 import { DataToolbar } from '@patternfly/react-core/dist/js/experimental';
 import {
   SearchIcon,
-  SortAlphaUpIcon,
-  SortAlphaDownIcon,
+  PficonSortCommonAscIcon,
+  PficonSortCommonDescIcon,
   AngleDoubleLeftIcon,
   AngleDoubleRightIcon,
   AngleLeftIcon,
@@ -71,8 +71,8 @@ describe('DualListSelect', () => {
     expect(wrapper.find(DataToolbar)).toHaveLength(2);
     expect(wrapper.find(TextInput)).toHaveLength(2);
     expect(wrapper.find(SearchIcon)).toHaveLength(2);
-    expect(wrapper.find(SortAlphaUpIcon)).toHaveLength(2);
-    expect(wrapper.find(SortAlphaDownIcon)).toHaveLength(0);
+    expect(wrapper.find(PficonSortCommonDescIcon)).toHaveLength(2);
+    expect(wrapper.find(PficonSortCommonAscIcon)).toHaveLength(0);
     expect(wrapper.find(AngleRightIcon)).toHaveLength(1);
     expect(wrapper.find(AngleLeftIcon)).toHaveLength(1);
     expect(wrapper.find(AngleDoubleRightIcon)).toHaveLength(1);
@@ -396,7 +396,7 @@ describe('DualListSelect', () => {
     ).toEqual('zebras');
     await act(async () => {
       wrapper
-        .find(SortAlphaUpIcon)
+        .find(PficonSortCommonDescIcon)
         .first()
         .parent()
         .props()
@@ -422,7 +422,7 @@ describe('DualListSelect', () => {
     ).toEqual('cats');
     await act(async () => {
       wrapper
-        .find(SortAlphaDownIcon)
+        .find(PficonSortCommonAscIcon)
         .first()
         .parent()
         .props()
@@ -469,7 +469,7 @@ describe('DualListSelect', () => {
     ).toEqual('zebras');
     await act(async () => {
       wrapper
-        .find(SortAlphaUpIcon)
+        .find(PficonSortCommonDescIcon)
         .last()
         .parent()
         .props()
@@ -495,7 +495,7 @@ describe('DualListSelect', () => {
     ).toEqual('cats');
     await act(async () => {
       wrapper
-        .find(SortAlphaDownIcon)
+        .find(PficonSortCommonAscIcon)
         .last()
         .parent()
         .props()

packages/suir-component-mapper/demo/demo-schemas/dual-list-select-schema.js

@@ -0,0 +1,34 @@
+const dualListSchemaDDF = {
+  title: 'Testing dual list',
+  fields: [
+    {
+      component: 'dual-list-select',
+      name: 'dual-list-select',
+      label: 'choose favorite animal',
+      options: [
+        {
+          value: 'cats',
+          label: 'cats'
+        },
+        {
+          value: 'cats_1',
+          label: 'cats_1'
+        },
+        {
+          value: 'cats_2',
+          label: 'cats_2'
+        },
+        {
+          value: 'zebras',
+          label: 'zebras'
+        },
+        {
+          value: 'pigeons',
+          label: 'pigeons'
+        }
+      ]
+    }
+  ]
+};
+
+export default dualListSchemaDDF;

packages/suir-component-mapper/demo/index.js

@@ -5,7 +5,7 @@ import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-rend
 import { componentMapper, FormTemplate } from '../src';
 import demoSchema from '@data-driven-forms/common/src/demoschema';
 import fieldArraySchema from './demo-schemas/field-array-schema';
-
+import dualListSchema from './demo-schemas/dual-list-select-schema';
 import wizardSchema from './demo-schemas/wizard-schema';
 import { Button } from 'semantic-ui-react';
 
@@ -29,6 +29,7 @@ const App = () => {
           <Button onClick={() => setSchema(demoSchema)}>Demo schema</Button>
           <Button onClick={() => setSchema(fieldArraySchema)}>Field array</Button>
           <Button onClick={() => setSchema(wizardSchema)}>Wizard</Button>
+          <Button onClick={() => setSchema(dualListSchema)}>Dual list</Button>
         </div>
         <div style={{ padding: 32 }}>
           <FormRenderer

packages/suir-component-mapper/src/files/dual-list-select.js

@@ -102,8 +102,8 @@ Toolbar.propTypes = {
 };
 
 Toolbar.defaultProps = {
-  sortUpIcon: 'sort up',
-  sortDownIcon: 'sort down'
+  sortUpIcon: 'sort amount up',
+  sortDownIcon: 'sort amount down'
 };
 
 const useDualListStyles = createUseStyles({
@@ -120,6 +120,11 @@ const useDualListStyles = createUseStyles({
     '&>label': {
       display: 'inline-block !important'
     }
+  },
+  '@media screen and (max-width: 767px)': {
+    transferButton: {
+      transform: 'rotate(90deg)'
+    }
   }
 });
 
@@ -192,7 +197,7 @@ const DualList = ({
         className={clsx(classes.formField, labelClassName)}
       />
       <Grid key="0">
-        <GridColumn mobile={16} tablet={16} computer={7}>
+        <GridColumn mobile={16} tablet={7} computer={7}>
           <Grid>
             <GridColumn mobile={16} tablet={16}>
               <Header sub {...OptionsHeaderProps}>
@@ -224,7 +229,7 @@ const DualList = ({
             </GridColumn>
           </Grid>
         </GridColumn>
-        <GridColumn className={clsx(classes.dualListButtons, buttonGridClassName)} {...ButtonGridProps} mobile={16} tablet={16} computer={2}>
+        <GridColumn className={clsx(classes.dualListButtons, buttonGridClassName)} {...ButtonGridProps} mobile={16} tablet={2} computer={2}>
           <Grid>
             <GridColumn tablet={16} mobile={4}>
               <Button
@@ -276,7 +281,7 @@ const DualList = ({
             </GridColumn>
           </Grid>
         </GridColumn>
-        <GridColumn mobile={16} tablet={16} computer={7}>
+        <GridColumn mobile={16} tablet={7} computer={7}>
           <Grid>
             <GridColumn tablet={16}>
               <Header sub {...ValuesHeaderProps}>

packages/suir-component-mapper/src/tests/dual-list-select.test.js

@@ -367,7 +367,7 @@ describe('DualListSelect', () => {
     ).toEqual('zebras');
     await act(async () => {
       wrapper
-        .findWhere((node) => node.prop('icon') === 'sort up')
+        .findWhere((node) => node.prop('icon') === 'sort amount up')
         .first()
         .find('button')
         .simulate('click');
@@ -392,7 +392,7 @@ describe('DualListSelect', () => {
     ).toEqual('cats');
     await act(async () => {
       wrapper
-        .findWhere((node) => node.prop('icon') === 'sort down')
+        .findWhere((node) => node.prop('icon') === 'sort amount down')
         .find('button')
         .first()
         .simulate('click');
@@ -438,7 +438,7 @@ describe('DualListSelect', () => {
     ).toEqual('zebras');
     await act(async () => {
       wrapper
-        .findWhere((node) => node.prop('icon') === 'sort up')
+        .findWhere((node) => node.prop('icon') === 'sort amount up')
         .last()
         .find('button')
         .simulate('click');
@@ -463,7 +463,7 @@ describe('DualListSelect', () => {
     ).toEqual('cats');
     await act(async () => {
       wrapper
-        .findWhere((node) => node.prop('icon') === 'sort down')
+        .findWhere((node) => node.prop('icon') === 'sort amount down')
         .find('button')
         .last()
         .simulate('click');