feat: add tooltips to all icon buttons (#51)

This change adds hover and focus text to all icon buttons.
GoogleContainerTools · Jun 23, 2022 · 2758ca8 · 2758ca8
1 parent 09eafaa
commit 2758ca8
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 52 deletions.
diff --git a/plugins/cad/src/components/Controls/IconButton.tsx b/plugins/cad/src/components/Controls/IconButton.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  IconButton as MaterialIconButton,
+  makeStyles,
+  Tooltip,
+} from '@material-ui/core';
+import React, { ReactNode } from 'react';
+
+type IconButtonProps = {
+  title: string;
+  className?: string;
+  inTable?: boolean;
+  stopPropagation?: boolean;
+  children: ReactNode;
+  onClick?: () => void;
+};
+
+const useStyles = makeStyles({
+  inTableStyle: {
+    position: 'absolute',
+    transform: 'translateY(-50%)',
+  },
+});
+
+export const IconButton = ({
+  title,
+  className,
+  inTable,
+  stopPropagation,
+  onClick,
+  children,
+}: IconButtonProps) => {
+  const classes = useStyles();
+
+  const finalClassName =
+    className || (inTable ? classes.inTableStyle : undefined);
+
+  return (
+    <Tooltip title={title}>
+      <MaterialIconButton
+        size="small"
+        className={finalClassName}
+        onClick={e => {
+          if (!onClick) return;
+
+          if (stopPropagation) {
+            e.stopPropagation();
+          }
+
+          onClick();
+        }}
+      >
+        {children}
+      </MaterialIconButton>
+    </Tooltip>
+  );
+};
diff --git a/plugins/cad/src/components/Controls/index.ts b/plugins/cad/src/components/Controls/index.ts
@@ -16,6 +16,7 @@
 
 export { Autocomplete } from './Autocomplete';
 export { ConfirmationDialog } from './ConfirmationDialog';
+export { IconButton } from './IconButton';
 export { MultiSelect } from './MultiSelect';
 export { PackageIcon } from './PackageIcon';
 export { Select } from './Select';

diff --git a/plugins/cad/src/components/PackageRevisionPage/components/PackageRevisionResourcesTable.tsx b/plugins/cad/src/components/PackageRevisionPage/components/PackageRevisionResourcesTable.tsx
@@ -16,7 +16,7 @@
 
 import { Table, TableColumn } from '@backstage/core-components';
 import { errorApiRef, useApi } from '@backstage/core-plugin-api';
-import { Button, Divider, IconButton, Menu, MenuItem } from '@material-ui/core';
+import { Button, Divider, Menu, MenuItem } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
 import { startCase } from 'lodash';
@@ -36,6 +36,7 @@ import {
   updateResourceInResourcesMap,
 } from '../../../utils/packageRevisionResources';
 import { dumpYaml } from '../../../utils/yaml';
+import { IconButton } from '../../Controls';
 import { ResourceEditorDialog } from '../../ResourceEditorDialog';
 import { ResourceViewerDialog } from '../../ResourceViewerDialog';
 
@@ -170,16 +171,10 @@ export const PackageRevisionResourcesTable = ({
         options.push(
           <IconButton
             key="delete"
-            size="small"
             title="Delete"
-            style={{
-              position: 'absolute',
-              transform: 'translateY(-50%)',
-            }}
-            onClick={event => {
-              event.stopPropagation();
-              deleteResource(resourceRow);
-            }}
+            inTable
+            stopPropagation
+            onClick={() => deleteResource(resourceRow)}
           >
             <DeleteIcon />
           </IconButton>,

diff --git a/plugins/cad/src/components/PackageRevisionPage/components/PackageRevisionsTable.tsx b/plugins/cad/src/components/PackageRevisionPage/components/PackageRevisionsTable.tsx
@@ -16,8 +16,6 @@
 
 import { Table, TableColumn } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
-import { IconButton, makeStyles } from '@material-ui/core';
-import { ClassNameMap } from '@material-ui/core/styles/withStyles';
 import React, { Fragment } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { packageRouteRef } from '../../../routes';
@@ -32,7 +30,7 @@ import {
   PackageResource,
   ResourceDiffStatus,
 } from '../../../utils/packageRevisionResources';
-import { PackageIcon } from '../../Controls';
+import { IconButton, PackageIcon } from '../../Controls';
 
 export type RevisionSummary = {
   revision: PackageRevision;
@@ -55,23 +53,13 @@ type PackageRevisionRow = {
   created: string;
 };
 
-const useStyles = makeStyles({
-  iconButton: {
-    position: 'absolute',
-    transform: 'translateY(-50%)',
-  },
-});
-
-const renderStatusColumn = (
-  revision: PackageRevisionRow,
-  classes: ClassNameMap,
-): JSX.Element => {
+const renderStatusColumn = (revision: PackageRevisionRow): JSX.Element => {
   const isUnpublishedRevision =
     revision.lifecycle !== PackageRevisionLifecycle.PUBLISHED;
 
   if (isUnpublishedRevision) {
     return (
-      <IconButton size="small" className={classes.iconButton}>
+      <IconButton title={`${revision.lifecycle} revision`} inTable>
         <PackageIcon lifecycle={revision.lifecycle} />
       </IconButton>
     );
@@ -80,11 +68,9 @@ const renderStatusColumn = (
   return <Fragment />;
 };
 
-const getTableColumns = (
-  classes: ClassNameMap,
-): TableColumn<PackageRevisionRow>[] => {
+const getTableColumns = (): TableColumn<PackageRevisionRow>[] => {
   const renderStatus = (row: PackageRevisionRow): JSX.Element =>
-    renderStatusColumn(row, classes);
+    renderStatusColumn(row);
 
   const columns: TableColumn<PackageRevisionRow>[] = [
     {
@@ -171,7 +157,6 @@ export const PackageRevisionsTable = ({
   repository,
   revisions,
 }: PackageRevisionsTableProps) => {
-  const classes = useStyles();
   const navigate = useNavigate();
 
   const packageRef = useRouteRef(packageRouteRef);
@@ -184,7 +169,7 @@ export const PackageRevisionsTable = ({
     }
   };
 
-  const columns = getTableColumns(classes);
+  const columns = getTableColumns();
   const data = revisions.map(mapToPackageRevisionRow);
 
   return (

diff --git a/plugins/cad/src/components/RepositoryPage/components/PackageSummaryTable.tsx b/plugins/cad/src/components/RepositoryPage/components/PackageSummaryTable.tsx
@@ -16,8 +16,6 @@
 
 import { Table, TableColumn } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
-import { IconButton, makeStyles } from '@material-ui/core';
-import { ClassNameMap } from '@material-ui/core/styles/withStyles';
 import React, { Fragment } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { packageRouteRef } from '../../../routes';
@@ -30,7 +28,7 @@ import { getSyncStatus, SyncStatus } from '../../../utils/configSync';
 import { formatCreationTimestamp } from '../../../utils/formatDate';
 import { PackageSummary } from '../../../utils/packageSummary';
 import { isDeploymentRepository } from '../../../utils/repository';
-import { PackageIcon } from '../../Controls';
+import { IconButton, PackageIcon } from '../../Controls';
 import { PackageLink } from '../../Links';
 import { SyncStatusVisual } from './SyncStatusVisual';
 
@@ -67,28 +65,18 @@ type PackageSummaryRow = {
 
 type NavigateToPackageRevision = (revision: PackageRevision) => void;
 
-const useStyles = makeStyles({
-  iconButton: {
-    position: 'absolute',
-    transform: 'translateY(-50%)',
-  },
-});
-
 const renderStatusColumn = (
   thisPackageRevisionRow: PackageSummaryRow,
-  classes: ClassNameMap,
 ): JSX.Element => {
   const unpublishedRevision = thisPackageRevisionRow.unpublished;
 
   if (unpublishedRevision) {
     return (
       <IconButton
-        size="small"
-        className={classes.iconButton}
-        onClick={e => {
-          e.stopPropagation();
-          unpublishedRevision.navigate();
-        }}
+        title={`${unpublishedRevision.lifecycle} revision`}
+        inTable
+        stopPropagation
+        onClick={() => unpublishedRevision.navigate()}
       >
         <PackageIcon lifecycle={unpublishedRevision.lifecycle} />
       </IconButton>
@@ -223,7 +211,6 @@ export const PackageRevisionsTable = ({
   repository,
   packages,
 }: PackageRevisionsTableProps) => {
-  const classes = useStyles();
   const navigate = useNavigate();
 
   const packageRef = useRouteRef(packageRouteRef);
@@ -238,7 +225,7 @@ export const PackageRevisionsTable = ({
   };
 
   const renderStatus = (row: PackageSummaryRow): JSX.Element =>
-    renderStatusColumn(row, classes);
+    renderStatusColumn(row);
 
   const includeSyncsColumn = isDeploymentRepository(repository);
   const columns = getTableColumns(

diff --git a/...ts/ResourceEditorDialog/components/FirstClassEditors/Controls/KeyValueEditorAccordion.tsx b/...ts/ResourceEditorDialog/components/FirstClassEditors/Controls/KeyValueEditorAccordion.tsx
@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-import { Button, IconButton, TextField } from '@material-ui/core';
+import { Button, TextField } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
 import React, { Fragment, useRef } from 'react';
 import { KubernetesKeyValueObject } from '../../../../../types/KubernetesResource';
 import { toLowerCase } from '../../../../../utils/string';
+import { IconButton } from '../../../../Controls';
 import { useEditorStyles } from '../styles';
 import { EditorAccordion, OnAccordionChange } from './EditorAccordion';
 
@@ -106,7 +107,6 @@ export const KeyValueEditorAccordion = ({
               fullWidth
             />
             <IconButton
-              size="small"
               title="Delete"
               className={classes.iconButton}
               onClick={() => {