chore: [TECH-1539] Use Capture-UI IconButton

src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js

@@ -6,14 +6,14 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { withStyles } from '@material-ui/core/styles';
-import IconButton from '@material-ui/core/IconButton';
+import { IconButton } from 'capture-ui';
 import { IconCross24, Button } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import isDefined from 'd2-utilizr/lib/isDefined';
 
-const styles = theme => ({
+const styles = () => ({
     closeButton: {
-        height: theme.spacing.unit * 4,
+        marginTop: '5px',
     },
     actionContainer: {
         paddingRight: 2,
@@ -58,7 +58,7 @@ class Index extends React.Component<Props> {
         const { feedback, classes } = this.props;
 
         return (
-            <span>
+            <>
                 {
                     (() => {
                         if (!feedback.action) {
@@ -75,15 +75,12 @@ class Index extends React.Component<Props> {
                     })()
                 }
                 <IconButton
-                    key="close"
-                    aria-label="Close"
-                    color="inherit"
                     className={classes.closeButton}
                     onClick={this.handleClose}
                 >
                     <IconCross24 />
                 </IconButton>
-            </span>
+            </>
         );
     }
 

src/core_modules/capture-core/components/ListView/ColumnSelector/ColumnSelector.component.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { IconButton } from '@material-ui/core';
+import { IconButton } from 'capture-ui';
 import { IconSettings24, Tooltip } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import { ColumnSelectorDialog } from './ColumnSelectorDialog.component';

src/core_modules/capture-core/components/ListView/Main/ListViewMain.component.js

@@ -25,6 +25,7 @@ const getStyles = (theme: Theme) => ({
     },
     topBarButtonContainer: {
         display: 'flex',
+        gap: '6px',
         alignItems: 'center',
     },
     paginationContainer: {

src/core_modules/capture-core/components/ListView/Menu/ListViewMenu.component.js

@@ -1,8 +1,9 @@
 // @flow
 import React, { useCallback, memo, type ComponentType } from 'react';
+import { IconButton } from 'capture-ui';
 import { withStyles } from '@material-ui/core/styles';
 import { Divider, IconMore24 } from '@dhis2/ui';
-import { IconButton, Paper, MenuList, MenuItem } from '@material-ui/core';
+import { Paper, MenuList, MenuItem } from '@material-ui/core';
 
 import { MenuPopper } from '../../Popper/Popper.component';
 import type { Props } from './listViewMenu.types';
@@ -32,7 +33,7 @@ const getStyles = () => ({
 const ListViewMenuPlain = ({ customMenuContents = [], classes }: Props) => {
     const renderPopperAction = useCallback((togglePopper: Function) => (
         <IconButton
-            data-test="list-view-menu-button"
+            dataTest="list-view-menu-button"
             onClick={togglePopper}
         >
             <IconMore24 />

src/core_modules/capture-core/components/Pagination/withDefaultNavigation.js

@@ -4,13 +4,13 @@
  */
 import * as React from 'react';
 import { withStyles } from '@material-ui/core/styles';
-
-import IconButton from '@material-ui/core/IconButton';
+import { IconButton } from 'capture-ui';
 import { IconChevronLeft24, IconChevronRight24 } from '@dhis2/ui';
 
 const styles = (theme: Theme) => ({
     root: {
         flexShrink: 0,
+        display: 'flex',
         color: theme.palette.text.secondary,
     },
 });
@@ -81,23 +81,23 @@ const getNavigation = (InnerComponent: React.ComponentType<any>) =>
                     className={classes.root}
                 >
                     <IconButton
-                        data-test={'search-pagination-first-page'}
+                        dataTest={'search-pagination-first-page'}
                         onClick={this.handleFirstPageButtonClick}
                         disabled={currentPage <= 1}
                         aria-label="First Page"
                     >
                         {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
                     </IconButton>
                     <IconButton
-                        data-test={'search-pagination-previous-page'}
+                        dataTest={'search-pagination-previous-page'}
                         onClick={this.handleBackButtonClick}
                         disabled={currentPage <= 1}
                         aria-label="Previous Page"
                     >
                         {theme.direction === 'rtl' ? <IconChevronRight24 /> : <IconChevronLeft24 />}
                     </IconButton>
                     <IconButton
-                        data-test={'search-pagination-next-page'}
+                        dataTest={'search-pagination-next-page'}
                         onClick={this.handleNextButtonClick}
                         disabled={nextPageButtonDisabled}
                         aria-label="Next Page"

src/core_modules/capture-core/components/Section/SectionHeaderSimple.component.js

@@ -1,8 +1,8 @@
 // @flow
-import { IconChevronDown24, IconChevronUp24, colors } from '@dhis2/ui';
+import { colors } from '@dhis2/ui';
 import React, { Component } from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import IconButton from '@material-ui/core/IconButton';
+import { ChevronIcon } from 'capture-ui';
 
 const styles = () => ({
     container: {
@@ -87,14 +87,13 @@ class SectionHeaderSimplePlain extends Component<Props> {
                         (() => {
                             if (onChangeCollapseState) {
                                 return (
-                                    <IconButton
-                                        data-test="collapsible-button"
+                                    <ChevronIcon
+                                        open={!this.props.isCollapsed}
+                                        onOpen={this.handleChangeCollapse}
+                                        onClose={this.handleChangeCollapse}
                                         disabled={!this.props.isCollapseButtonEnabled}
-                                        title={this.props.isCollapsed ? 'Open' : 'Close'}
-                                        onClick={this.handleChangeCollapse}
-                                    >
-                                        {this.props.isCollapsed ? <IconChevronDown24 /> : <IconChevronUp24 />}
-                                    </IconButton>
+                                        dataTest={'collapsible-button'}
+                                    />
                                 );
                             }
                             return null;

src/core_modules/capture-ui/AgeField/AgeField.component.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { isValidPositiveInteger } from 'capture-core-utils/validators/form';
 import i18n from '@dhis2/d2-i18n';
 import classNames from 'classnames';
-import IconButton from '@material-ui/core/IconButton';
+import { IconButton } from 'capture-ui';
 import { IconCross24 } from '@dhis2/ui';
 import { AgeNumberInput } from '../internal/AgeInput/AgeNumberInput.component';
 import { AgeDateInput } from '../internal/AgeInput/AgeDateInput.component';
@@ -249,7 +249,7 @@ class D2AgeFieldPlain extends Component<Props> {
                 {this.renderNumberInput(currentValues, 'months', 'Months')}
                 {this.renderNumberInput(currentValues, 'days', 'Days')}
                 <div className={ageClearClass}>
-                    <IconButton style={{ width: 42, height: 42 }} disabled={!!disabled} onClick={this.onClear}>
+                    <IconButton disabled={!!disabled} onClick={this.onClear}>
                         <IconCross24 />
                     </IconButton>
 

src/core_modules/capture-ui/AgeField/ageField.module.css

@@ -10,6 +10,7 @@
 .containerHorizontal {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
 }
 
 .ageNumberInputContainer {

src/core_modules/capture-ui/CoordinateField/CoordinateField.component.js

@@ -5,7 +5,7 @@ import i18n from '@dhis2/d2-i18n';
 import { Map, TileLayer, Marker, withLeaflet } from 'react-leaflet';
 import { ReactLeafletSearch } from 'react-leaflet-search-unpolyfilled';
 import { IconCross24, Button } from '@dhis2/ui';
-import IconButton from '@material-ui/core/IconButton';
+import { IconButton } from 'capture-ui';
 import { AddLocationIcon } from '../Icons';
 import { CoordinateInput } from '../internal/CoordinateInput/CoordinateInput.component';
 import defaultClasses from './coordinateField.module.css';
@@ -125,12 +125,10 @@ export class CoordinateField extends React.Component<Props, State> {
                 <IconButton
                     disabled={!!disabled}
                     style={{ height: 42, width: 42, borderRadius: 0, padding: 0 }}
-                    classes={{ root: classNames(defaultClasses.mapIcon, mapIconCustomClass) }}
+                    className={classNames(defaultClasses.mapIcon, mapIconCustomClass)}
+                    onClick={this.openMap}
                 >
-                    <AddLocationIcon
-                        onClick={this.openMap}
-
-                    />
+                    <AddLocationIcon />
                 </IconButton>
 
             </div>

src/core_modules/capture-ui/CoordinateField/coordinateField.module.css

@@ -27,10 +27,11 @@
 .mapIconContainerWithMargin {
     position: relative;
     display: flex;
+    overflow: hidden;
     align-items: center;
     justify-content: center;
-    height: 41px;
-    width: 41px;
+    height: 40.5px;
+    width: 40.5px;
     border: 1px solid #a0adba;
     border-radius: 4px 0px 0px 4px;
     color: #212934;

src/core_modules/capture-ui/IconButton/IconButton.component.js

@@ -1,33 +1,49 @@
 // @flow
-import React, { useCallback } from 'react';
+import React from 'react';
 import cx from 'classnames';
-import classes from './iconButton.module.css';
+import { withStyles } from '@material-ui/core/styles';
+import { colors } from '@dhis2/ui';
 import type { Props } from './iconButton.types';
 
-export const IconButton = ({ children, className, dataTest, onClick, ...passOnProps }: Props) => {
-    const handleKeyDown = useCallback((event: SyntheticKeyboardEvent<HTMLSpanElement>) => {
-        if ([' ', 'Enter', 'Spacebar'].includes(event.key)) {
-            onClick(event);
-        }
-    }, [onClick]);
+const styles = {
+    button: {
+        cursor: 'pointer',
+        borderRadius: '3px',
+        border: 'none',
+        background: 'transparent',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '2px',
+        justifyContent: 'center',
+        color: colors.grey700,
+        '&:hover': {
+            background: colors.grey200,
+            color: colors.grey800,
+        },
+        '&:focus': {
+            outline: 'solid',
+            background: colors.grey200,
+            color: colors.grey800,
+        },
+        '&.disabled': {
+            color: colors.grey500,
+            cursor: 'not-allowed',
+        },
+    },
+};
 
-    const handleMouseDown = useCallback((event: SyntheticMouseEvent<HTMLSpanElement>) => {
-        event.preventDefault();
-    }, []);
+const IconButtonPlain = ({ children, className, dataTest, onClick, disabled, classes, ...passOnProps }: Props) => (
+    <button
+        {...passOnProps}
+        onClick={onClick}
+        disabled={disabled}
+        data-test={dataTest}
+        className={cx(classes.button, { disabled, ...(className ? { [className]: true } : {}) })}
+        type="button"
+        tabIndex="0"
+    >
+        {children}
+    </button>
+);
 
-    return (
-        <span
-            {...passOnProps}
-            onClick={onClick}
-            data-test={dataTest}
-            className={cx(classes.button, className)}
-            type="button"
-            role="button"
-            tabIndex="0"
-            onKeyDown={handleKeyDown}
-            onMouseDown={handleMouseDown}
-        >
-            {children}
-        </span>
-    );
-};
+export const IconButton = withStyles(styles)(IconButtonPlain);

src/core_modules/capture-ui/IconButton/iconButton.module.css

@@ -8,3 +8,4 @@
     outline-width: 1px;
     outline-offset: 0px;
 }
+

src/core_modules/capture-ui/IconButton/iconButton.types.js

@@ -4,5 +4,7 @@ export type Props = {
     children: React$Node,
     className?: string,
     dataTest?: string,
-    onClick: (event: SyntheticKeyboardEvent<HTMLSpanElement> | SyntheticMouseEvent<HTMLSpanElement> | SyntheticTouchEvent<HTMLSpanElement>) => void,
+    disabled?: boolean,
+    onClick: (event: SyntheticKeyboardEvent<HTMLButtonElement> | SyntheticMouseEvent<HTMLButtonElement> | SyntheticTouchEvent<HTMLButtonElement>) => void,
+    ...CssClasses,
 };

src/core_modules/capture-ui/Icons/ChevronIcon.component.js

@@ -0,0 +1,88 @@
+// @flow
+import React, { useState, useEffect } from 'react';
+import { IconButton } from 'capture-ui';
+import cx from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import { colors, spacersNum, IconChevronUp24 } from '@dhis2/ui';
+
+type ChevronIconProps = {
+    open: boolean,
+    dataTest?: string,
+    onOpen: () => void,
+    onClose: () => void,
+    disabled?: boolean,
+    ...CssClasses,
+};
+
+const styles = {
+    toggleButton: {
+        margin: `0 0 0 ${spacersNum.dp4}px`,
+        height: '24px',
+        borderRadius: '3px',
+        color: colors.grey600,
+        '&:hover': {
+            background: colors.grey200,
+            color: colors.grey800,
+        },
+        '&.open': {
+            animation: 'flipOpen 200ms normal forwards linear',
+        },
+        '&.close': {
+            animation: 'flipClose 200ms normal forwards linear',
+        },
+        '&.closeinit': {
+            transform: 'rotateX(180deg)',
+        },
+        '&.disabled': {
+            color: colors.grey400,
+            cursor: 'not-allowed',
+        },
+    },
+    '@keyframes flipOpen': {
+        from: { transform: 'rotateX(180deg)' },
+        to: { transform: 'rotateX(0)' },
+    },
+    '@keyframes flipClose': {
+        from: { transform: 'rotateX(0)' },
+        to: { transform: 'rotateX(180deg)' },
+    },
+};
+
+const ChevronIconPlain = ({ open, onOpen, onClose, dataTest, disabled, classes }: ChevronIconProps) => {
+    const [postEffectOpen, setPostEffectOpenStatus] = useState(open);
+    const [animationsReady, setAnimationsReadyStatus] = useState(false);
+
+    const handleClick = () => {
+        if (disabled) {
+            return null;
+        }
+        return open ? onClose() : onOpen();
+    };
+
+    useEffect(() => {
+        if (!animationsReady) {
+            setAnimationsReadyStatus(true);
+        }
+
+        setPostEffectOpenStatus(open);
+    }, [open, animationsReady]);
+
+    return (
+        <IconButton
+            dataTest={dataTest}
+            className={cx(classes.toggleButton, {
+                closeinit: !animationsReady && !postEffectOpen,
+                open: animationsReady && postEffectOpen,
+                close: animationsReady && !postEffectOpen,
+                disabled,
+            })}
+            onClick={handleClick}
+            disabled={disabled}
+        >
+            <IconChevronUp24 />
+        </IconButton>
+    );
+};
+
+export const ChevronIcon = withStyles(styles)(ChevronIconPlain);
+