(feat) Use IconButton component for icon-only buttons (#331)

openmrs · Jul 22, 2024 · 1302729 · 1302729
1 parent c978d65
commit 1302729
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 116 deletions.
diff --git a/src/components/dashboard/dashboard.component.tsx b/src/components/dashboard/dashboard.component.tsx
@@ -5,6 +5,7 @@ import {
   DataTable,
   DataTableSkeleton,
   Dropdown,
+  IconButton,
   InlineLoading,
   InlineNotification,
   Table,
@@ -21,6 +22,7 @@ import {
   Tile,
 } from '@carbon/react';
 import { Add, DocumentImport, Download, Edit, TrashCan } from '@carbon/react/icons';
+import { type KeyedMutator, preload } from 'swr';
 import {
   ConfigurableLink,
   navigate,
@@ -31,9 +33,7 @@ import {
   useConfig,
   useLayoutType,
   usePagination,
-  type FetchResponse,
 } from '@openmrs/esm-framework';
-import { type KeyedMutator, preload } from 'swr';
 import type { ConfigObject } from '../../config-schema';
 import type { Form as TypedForm } from '../../types';
 import { deleteForm } from '../../forms.resource';
@@ -84,6 +84,7 @@ function CustomTag({ condition }: { condition?: boolean }) {
 }
 
 function ActionButtons({ form, mutate, responsiveSize, t }: ActionButtonsProps) {
+  const defaultEnterDelayInMs = 300;
   const { clobdata } = useClobdata(form);
   const formResources = form?.resources;
   const [isDeletingForm, setIsDeletingForm] = useState(false);
@@ -97,28 +98,31 @@ function ActionButtons({ form, mutate, responsiveSize, t }: ActionButtonsProps)
   );
 
   const handleDeleteForm = useCallback(
-    (formUuid: string) => {
-      deleteForm(formUuid)
-        .then(async (res: FetchResponse) => {
-          if (res.status === 204) {
-            showSnackbar({
-              title: t('formDeleted', 'Form deleted'),
-              kind: 'success',
-              isLowContrast: true,
-              subtitle: `${form.name} ` + t('formDeletedSuccessfully', 'deleted successfully'),
-            });
-
-            await mutate();
-          }
-        })
-        .catch((e: Error) =>
+    async (formUuid: string) => {
+      try {
+        const res = await deleteForm(formUuid);
+        if (res.status === 204) {
+          showSnackbar({
+            title: t('formDeleted', 'Form deleted'),
+            kind: 'success',
+            isLowContrast: true,
+            subtitle: t('formDeletedMessage', 'The form "{{- formName}}" has been deleted successfully', {
+              formName: form.name,
+            }),
+          });
+          await mutate();
+        }
+      } catch (e: unknown) {
+        if (e instanceof Error) {
           showSnackbar({
             title: t('errorDeletingForm', 'Error deleting form'),
             kind: 'error',
             subtitle: e?.message,
-          }),
-        )
-        .finally(() => setIsDeletingForm(false));
+          });
+        }
+      } finally {
+        setIsDeletingForm(false);
+      }
     },
     [form.name, mutate, t],
   );
@@ -133,64 +137,63 @@ function ActionButtons({ form, mutate, responsiveSize, t }: ActionButtonsProps)
 
   const ImportButton = () => {
     return (
-      <Button
-        renderIcon={DocumentImport}
-        onClick={() => navigate({ to: `${window.spaBase}/form-builder/edit/${form.uuid}` })}
-        kind={'ghost'}
+      <IconButton
+        align="center"
+        enterDelayMs={defaultEnterDelayInMs}
         iconDescription={t('import', 'Import')}
-        hasIconOnly
+        kind="ghost"
+        onClick={() => navigate({ to: `${window.spaBase}/form-builder/edit/${form.uuid}` })}
         size={responsiveSize}
-      />
+      >
+        <DocumentImport />
+      </IconButton>
     );
   };
 
   const EditButton = () => {
     return (
-      <Button
-        enterDelayMs={300}
-        renderIcon={Edit}
+      <IconButton
+        enterDelayMs={defaultEnterDelayInMs}
+        kind="ghost"
+        label={t('editSchema', 'Edit schema')}
         onClick={() =>
           navigate({
             to: `${window.spaBase}/form-builder/edit/${form.uuid}`,
           })
         }
-        kind={'ghost'}
-        iconDescription={t('editSchema', 'Edit schema')}
-        hasIconOnly
         size={responsiveSize}
-        tooltipAlignment="center"
-      />
+      >
+        <Edit />
+      </IconButton>
     );
   };
 
   const DownloadSchemaButton = () => {
     return (
       <a download={`${form?.name}.json`} href={window.URL.createObjectURL(downloadableSchema)}>
-        <Button
-          enterDelayMs={300}
-          renderIcon={Download}
-          kind={'ghost'}
-          iconDescription={t('downloadSchema', 'Download schema')}
-          hasIconOnly
+        <IconButton
+          enterDelayMs={defaultEnterDelayInMs}
+          kind="ghost"
+          label={t('downloadSchema', 'Download schema')}
           size={responsiveSize}
-          tooltipAlignment="center"
-        />
+        >
+          <Download />
+        </IconButton>
       </a>
     );
   };
 
   const DeleteButton = () => {
     return (
-      <Button
-        enterDelayMs={300}
-        renderIcon={TrashCan}
+      <IconButton
+        enterDelayMs={defaultEnterDelayInMs}
+        kind="ghost"
+        label={t('deleteSchema', 'Delete schema')}
         onClick={launchDeleteFormModal}
-        kind={'ghost'}
-        iconDescription={t('deleteSchema', 'Delete schema')}
-        hasIconOnly
         size={responsiveSize}
-        tooltipAlignment="center"
-      />
+      >
+        <TrashCan />
+      </IconButton>
     );
   };
 

diff --git a/src/components/dashboard/delete-form.modal.tsx b/src/components/dashboard/delete-form.modal.tsx
@@ -13,7 +13,7 @@ const DeleteFormModal: React.FC<DeleteFormModalProps> = ({ closeModal, isDeletin
   const { t } = useTranslation();
   return (
     <>
-      <ModalHeader closeModal={closeModal} title={t('deleteForm', 'Delete form')} />
+      <ModalHeader className={styles.modalHeader} closeModal={closeModal} title={t('deleteForm', 'Delete form')} />
       <Form onSubmit={(event: SyntheticEvent) => event.preventDefault()}>
         <ModalBody>
           <p>{t('deleteFormConfirmation', 'Are you sure you want to delete this form?')}</p>

diff --git a/src/components/form-editor/form-editor.component.tsx b/src/components/form-editor/form-editor.component.tsx
@@ -6,6 +6,7 @@ import {
   CopyButton,
   FileUploader,
   Grid,
+  IconButton,
   InlineLoading,
   InlineNotification,
   Tab,
@@ -62,6 +63,7 @@ const ErrorNotification = ({ error, title }: ErrorProps) => {
 };
 
 const FormEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
+  const defaultEnterDelayInMs = 300;
   const { formUuid } = useParams<{ formUuid: string }>();
   const { blockRenderingWithErrors, dataTypeToRenderingMap } = useConfig<ConfigObject>();
   const isNewSchema = !formUuid;
@@ -320,36 +322,34 @@ const FormEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
               </div>
               {schema ? (
                 <>
-                  <Button
-                    enterDelayMs={300}
-                    renderIcon={isMaximized ? Minimize : Maximize}
-                    kind={'ghost'}
-                    iconDescription={
+                  <IconButton
+                    enterDelayInMs={defaultEnterDelayInMs}
+                    kind="ghost"
+                    label={
                       isMaximized ? t('minimizeEditor', 'Minimize editor') : t('maximizeEditor', 'Maximize editor')
                     }
-                    hasIconOnly
-                    size="md"
-                    tooltipAlignment="start"
                     onClick={handleToggleMaximize}
-                  />
+                    size="md"
+                  >
+                    {isMaximized ? <Minimize /> : <Maximize />}
+                  </IconButton>
                   <CopyButton
                     align="top"
                     className="cds--btn--md"
-                    enterDelayMs={300}
+                    enterDelayInMs={defaultEnterDelayInMs}
                     iconDescription={t('copySchema', 'Copy schema')}
                     kind="ghost"
                     onClick={handleCopySchema}
                   />
                   <a download={`${form?.name}.json`} href={window.URL.createObjectURL(downloadableSchema)}>
-                    <Button
-                      enterDelayMs={300}
-                      renderIcon={Download}
-                      kind={'ghost'}
-                      iconDescription={t('downloadSchema', 'Download schema')}
-                      hasIconOnly
+                    <IconButton
+                      enterDelayInMs={defaultEnterDelayInMs}
+                      kind="ghost"
+                      label={t('downloadSchema', 'Download schema')}
                       size="md"
-                      tooltipAlignment="start"
-                    />
+                    >
+                      <Download />
+                    </IconButton>
                   </a>
                 </>
               ) : null}

diff --git a/src/components/interactive-builder/draggable-question.component.tsx b/src/components/interactive-builder/draggable-question.component.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import { useTranslation } from 'react-i18next';
-import { Button, CopyButton } from '@carbon/react';
+import { CopyButton, IconButton } from '@carbon/react';
 import { Draggable, Edit, TrashCan } from '@carbon/react/icons';
 import { showModal } from '@openmrs/esm-framework';
 import type { Question, Schema } from '../../types';
@@ -29,6 +29,7 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
   schema,
   sectionIndex,
 }) => {
+  const defaultEnterDelayInMs = 300;
   const { t } = useTranslation();
   const draggableId = `question-${pageIndex}-${sectionIndex}-${questionIndex}`;
 
@@ -71,15 +72,15 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
     <div className={dragStyles} style={style}>
       <div className={styles.iconAndName}>
         <div ref={setNodeRef} {...attributes} {...listeners}>
-          <Button
+          <IconButton
             className={styles.dragIcon}
-            enterDelayMs={300}
-            hasIconOnly
-            iconDescription={t('reorderQuestion', 'Reorder question')}
+            enterDelayMs={defaultEnterDelayInMs}
+            label={t('reorderQuestion', 'Reorder question')}
             kind="ghost"
-            renderIcon={(props) => <Draggable size={16} {...props} />}
             size="md"
-          />
+          >
+            <Draggable />
+          </IconButton>
         </div>
         <p className={styles.questionLabel}>{question.label}</p>
       </div>
@@ -92,24 +93,24 @@ const DraggableQuestion: React.FC<DraggableQuestionProps> = ({
           kind="ghost"
           onClick={() => !isDragging && handleDuplicateQuestion(question, pageIndex, sectionIndex)}
         />
-        <Button
-          enterDelayMs={300}
-          hasIconOnly
-          iconDescription={t('editQuestion', 'Edit question')}
+        <IconButton
+          enterDelayMs={defaultEnterDelayInMs}
+          label={t('editQuestion', 'Edit question')}
           kind="ghost"
           onClick={launchEditQuestionModal}
-          renderIcon={(props) => <Edit size={16} {...props} />}
           size="md"
-        />
-        <Button
-          enterDelayMs={300}
-          hasIconOnly
-          iconDescription={t('deleteQuestion', 'Delete question')}
+        >
+          <Edit />
+        </IconButton>
+        <IconButton
+          enterDelayMs={defaultEnterDelayInMs}
+          label={t('deleteQuestion', 'Delete question')}
           kind="ghost"
           onClick={launchDeleteQuestionModal}
-          renderIcon={(props) => <TrashCan size={16} {...props} />}
           size="md"
-        />
+        >
+          <TrashCan />
+        </IconButton>
       </div>
     </div>
   );

diff --git a/src/components/interactive-builder/editable-value.component.tsx b/src/components/interactive-builder/editable-value.component.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@carbon/react';
+import { IconButton } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
 import ValueEditor from './value-editor.component';
 import styles from './editable-value.scss';
@@ -37,17 +37,17 @@ const EditableValue: React.FC<EditableValueProps> = ({ elementType, id, value, o
   return (
     <>
       <h1 className={styles[`${elementType}` + 'Label']}>{value}</h1>
-      <Button
-        kind="ghost"
-        size="sm"
+      <IconButton
         enterDelayMs={300}
-        iconDescription={t('editButton', 'Edit {{elementType}}', {
+        kind="ghost"
+        label={t('editButton', 'Edit {{elementType}}', {
           elementType: elementType,
         })}
         onClick={() => setEditing(true)}
-        renderIcon={(props) => <Edit size={16} {...props} />}
-        hasIconOnly
-      />
+        size="md"
+      >
+        <Edit />
+      </IconButton>
     </>
   );
 };