Remove card-table action area (#2016)

In .card-tables there was an action area that had a darker background. Now this area only contains the delete action. Also, users mistakenly assumed that the hovered area could be clicked. It has therefore been removed and the icons themselves have received a hover effect.

gradle/changelog/remove_table_action.yaml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: Remove card-table action area ([#2016](https://github.com/scm-manager/scm-manager/pull/2016))

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -4205,7 +4205,7 @@ exports[`Storyshots GroupEntry Default 1`] = `
             type="button"
           >
             <i
-              className="fas fa-fw fa-download has-text-inherit is-medium pr-5"
+              className="fas fa-fw fa-download has-text-inherit is-medium"
               onKeyPress={[Function]}
             />
              
@@ -4279,7 +4279,7 @@ exports[`Storyshots GroupEntry With long texts 1`] = `
             type="button"
           >
             <i
-              className="fas fa-fw fa-download has-text-inherit is-medium pr-5"
+              className="fas fa-fw fa-download has-text-inherit is-medium"
               onKeyPress={[Function]}
             />
              

scm-ui/ui-components/src/buttons/Button.tsx

@@ -70,7 +70,13 @@ const Button: FC<InnerProps> = ({
   innerRef
 }) => {
   const renderIcon = () => {
-    return <>{icon ? <Icon name={icon} color="inherit" className="is-medium pr-5" /> : null}</>;
+    return (
+      <>
+        {icon ? (
+          <Icon name={icon} color="inherit" className={classNames("is-medium", { "pr-5": label || children })} />
+        ) : null}
+      </>
+    );
   };
 
   const classes = classNames(

scm-ui/ui-styles/src/components/_main.scss

@@ -633,6 +633,7 @@ ul.is-separated {
     &:first-child {
       border-left: 3px solid;
     }
+    // Deprecated
     &.is-darker {
       background-color: $white-ter;
     }
@@ -902,6 +903,10 @@ form .field:not(.is-grouped) {
   border-bottom-right-radius: unset;
 }
 
+.is-vertical-align-middle {
+  vertical-align: middle !important
+}
+
 // radio
 //overwrite bulma's default margin
 .radio + .radio {

scm-ui/ui-webapp/src/containers/Notifications.tsx

@@ -31,7 +31,7 @@ import {
   useClearNotifications,
   useDismissNotification,
   useNotifications,
-  useNotificationSubscription
+  useNotificationSubscription,
 } from "@scm-manager/ui-api";
 import { Notification, NotificationCollection } from "@scm-manager/ui-types";
 import {
@@ -42,7 +42,7 @@ import {
   Notification as InfoNotification,
   ToastArea,
   ToastNotification,
-  ToastType
+  ToastType,
 } from "@scm-manager/ui-components";
 import HeaderDropDown, { Column, OnlyMobileWrappingColumn, Table } from "../components/HeaderDropDown";
 
@@ -77,11 +77,11 @@ const NotificationEntry: FC<EntryProps> = ({ notification, removeToast }) => {
       <OnlyMobileWrappingColumn className="has-text-right">
         <DateFromNow date={notification.createdAt} />
       </OnlyMobileWrappingColumn>
-      <DismissColumn className="is-darker is-clickable" onClick={remove}>
+      <DismissColumn>
         {isLoading ? (
           <div className="small-loading-spinner" aria-label={t("notifications.loading")} />
         ) : (
-          <Icon name="trash" color="secondary-most" title={t("notifications.dismiss")} />
+          <Button color="text" icon="trash" action={remove} title={t("notifications.dismiss")} className="px-1" />
         )}
       </DismissColumn>
     </tr>

scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx

@@ -27,7 +27,7 @@ import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { Branch, BranchDetails, Link, Repository } from "@scm-manager/ui-types";
-import { devices, Icon, SmallLoadingSpinner } from "@scm-manager/ui-components";
+import { Button, devices, SmallLoadingSpinner } from "@scm-manager/ui-components";
 import { binder } from "@scm-manager/ui-extensions";
 import DefaultBranchTag from "./DefaultBranchTag";
 import AheadBehindTag from "./AheadBehindTag";
@@ -68,14 +68,13 @@ const BranchRow: FC<Props> = ({ repository, baseUrl, branch, onDelete, details }
   let deleteButton;
   if ((branch?._links?.delete as Link)?.href) {
     deleteButton = (
-      <span
-        className="icon is-small is-hovered is-clickable"
-        onClick={() => onDelete(branch)}
-        onKeyDown={e => e.key === "Enter" && onDelete(branch)}
-        tabIndex={0}
-      >
-        <Icon name="trash" title={t("branch.delete.button")} />
-      </span>
+      <Button
+        color="text"
+        icon="trash"
+        action={() => onDelete(branch)}
+        title={t("branch.delete.button")}
+        className="px-2"
+      />
     );
   }
 
@@ -92,7 +91,7 @@ const BranchRow: FC<Props> = ({ repository, baseUrl, branch, onDelete, details }
   const extensionProps = { repository, branch, details };
   return (
     <AdaptTableFlow>
-      <td>
+      <td className="is-vertical-align-middle">
         <ReactLink to={to} title={branch.name}>
           {branch.name}
         </ReactLink>
@@ -102,11 +101,13 @@ const BranchRow: FC<Props> = ({ repository, baseUrl, branch, onDelete, details }
           </MobileFlowSpan>
         )}
       </td>
-      <td className="has-text-centered">{renderBranchTag()}</td>
+      <td className="is-vertical-align-middle has-text-centered">{renderBranchTag()}</td>
       {binder.hasExtension("repos.branches.row.details")
-        ? binder.getExtensions("repos.branches.row.details").map(e => <td>{React.createElement(e, extensionProps)}</td>)
+        ? binder
+            .getExtensions("repos.branches.row.details")
+            .map((e) => <td>{React.createElement(e, extensionProps)}</td>)
         : null}
-      <td className="is-darker has-text-centered">{deleteButton}</td>
+      <td className="is-vertical-align-middle has-text-centered">{deleteButton}</td>
     </AdaptTableFlow>
   );
 };

scm-ui/ui-webapp/src/repos/permissions/components/DeletePermissionButton.tsx

@@ -24,7 +24,7 @@
 import React, { FC, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Namespace, Permission, Repository } from "@scm-manager/ui-types";
-import { ConfirmAlert, ErrorNotification, Icon } from "@scm-manager/ui-components";
+import { Button, ConfirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { useDeletePermission } from "@scm-manager/ui-api";
 
 type Props = {
@@ -63,13 +63,13 @@ const DeletePermissionButton: FC<Props> = ({ namespaceOrRepository, permission,
             className: "is-outlined",
             label: t("permission.delete-permission-button.confirm-alert.submit"),
             isLoading,
-            onClick: () => deletePermission()
+            onClick: () => deletePermission(),
           },
           {
             label: t("permission.delete-permission-button.confirm-alert.cancel"),
             onClick: () => null,
-            autofocus: true
-          }
+            autofocus: true,
+          },
         ]}
         close={() => setShowConfirmAlert(false)}
       />
@@ -79,12 +79,12 @@ const DeletePermissionButton: FC<Props> = ({ namespaceOrRepository, permission,
   return (
     <>
       <ErrorNotification error={error} />
-      <Icon
-        name="trash"
-        onClick={action}
-        onEnter={action}
-        tabIndex={0}
+      <Button
+        color="text"
+        icon="trash"
+        action={action}
         title={t("permission.delete-permission-button.label")}
+        className="px-2"
       />
     </>
   );

scm-ui/ui-webapp/src/repos/permissions/containers/SinglePermission.tsx

@@ -118,7 +118,7 @@ const SinglePermission: FC<Props> = ({
       <VCenteredTd>
         <Button label={t("permission.advanced-button.label")} action={() => setShowAdvancedDialog(true)} />
       </VCenteredTd>
-      <VCenteredTd className="is-darker has-text-centered">
+      <VCenteredTd className="has-text-centered">
         {permission._links.delete ? (
           <DeletePermissionButton permission={permission} namespaceOrRepository={namespaceOrRepository} />
         ) : null}

scm-ui/ui-webapp/src/repos/tags/components/TagRow.tsx

@@ -26,7 +26,7 @@ import { Link as RouterLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { Tag, Link } from "@scm-manager/ui-types";
-import { DateFromNow, Icon } from "@scm-manager/ui-components";
+import { Button, DateFromNow } from "@scm-manager/ui-components";
 
 type Props = {
   tag: Tag;
@@ -41,21 +41,14 @@ const TagRow: FC<Props> = ({ tag, baseUrl, onDelete }) => {
   let deleteButton;
   if ((tag?._links?.delete as Link)?.href) {
     deleteButton = (
-      <span
-        className="icon is-small is-clickable"
-        onClick={() => onDelete(tag)}
-        onKeyDown={e => e.key === "Enter" && onDelete(tag)}
-        tabIndex={0}
-      >
-        <Icon name="trash" className="fas" title={t("tag.delete.button")} />
-      </span>
+      <Button color="text" icon="trash" action={() => onDelete(tag)} title={t("tag.delete.button")} className="px-2" />
     );
   }
 
   const to = `${baseUrl}/${encodeURIComponent(tag.name)}/info`;
   return (
     <tr>
-      <td>
+      <td className="is-vertical-align-middle">
         <RouterLink to={to} title={tag.name}>
           {tag.name}
           <span className={classNames("has-text-secondary", "is-ellipsis-overflow", "ml-2", "is-size-7")}>
@@ -63,7 +56,7 @@ const TagRow: FC<Props> = ({ tag, baseUrl, onDelete }) => {
           </span>
         </RouterLink>
       </td>
-      <td className="is-darker has-text-centered">{deleteButton}</td>
+      <td className="is-vertical-align-middle has-text-centered">{deleteButton}</td>
     </tr>
   );
 };

scm-ui/ui-webapp/src/users/components/apiKeys/ApiKeyEntry.tsx

@@ -23,7 +23,7 @@
  */
 
 import React, { FC } from "react";
-import { DateFromNow, Icon } from "@scm-manager/ui-components";
+import { Button, DateFromNow } from "@scm-manager/ui-components";
 import { ApiKey } from "@scm-manager/ui-types";
 import { useTranslation } from "react-i18next";
 import { DeleteFunction } from "@scm-manager/ui-api";
@@ -37,18 +37,20 @@ export const ApiKeyEntry: FC<Props> = ({ apiKey, onDelete }) => {
   const [t] = useTranslation("users");
   let deleteButton;
   if (apiKey?._links?.delete) {
-    deleteButton = <Icon name="trash" title={t("apiKey.delete")} color="inherit" onClick={() => onDelete(apiKey)} />;
+    deleteButton = (
+      <Button color="text" icon="trash" action={() => onDelete(apiKey)} title={t("apiKey.delete")} className="px-2" />
+    );
   }
 
   return (
     <>
       <tr>
-        <td>{apiKey.displayName}</td>
-        <td>{apiKey.permissionRole}</td>
-        <td className="is-hidden-mobile">
+        <td className="is-vertical-align-middle">{apiKey.displayName}</td>
+        <td className="is-vertical-align-middle">{apiKey.permissionRole}</td>
+        <td className="is-vertical-align-middle is-hidden-mobile">
           <DateFromNow date={apiKey.created} />
         </td>
-        <td className="is-darker has-text-centered">{deleteButton}</td>
+        <td className="is-vertical-align-middle has-text-centered">{deleteButton}</td>
       </tr>
     </>
   );

scm-ui/ui-webapp/src/users/components/publicKeys/PublicKeyEntry.tsx

@@ -23,7 +23,7 @@
  */
 
 import React, { FC } from "react";
-import { DateFromNow, Icon } from "@scm-manager/ui-components";
+import { Button, DateFromNow } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 import { Link, PublicKey } from "@scm-manager/ui-types";
 import { DeleteFunction } from "@scm-manager/ui-api";
@@ -39,18 +39,24 @@ export const PublicKeyEntry: FC<Props> = ({ publicKey, onDelete }) => {
   let deleteButton;
   if (publicKey?._links?.delete) {
     deleteButton = (
-      <Icon name="trash" title={t("publicKey.delete")} color="inherit" onClick={() => onDelete(publicKey)} />
+      <Button
+        color="text"
+        icon="trash"
+        action={() => onDelete(publicKey)}
+        title={t("publicKey.delete")}
+        className="px-2"
+      />
     );
   }
 
   return (
     <>
       <tr>
-        <td>{publicKey.displayName}</td>
-        <td className="is-hidden-mobile">
+        <td className="is-vertical-align-middle">{publicKey.displayName}</td>
+        <td className="is-vertical-align-middle is-hidden-mobile">
           <DateFromNow date={publicKey.created} />
         </td>
-        <td className="is-hidden-mobile">
+        <td className="is-vertical-align-middle is-hidden-mobile">
           {publicKey._links?.raw ? (
             <a title={t("publicKey.download")} href={(publicKey._links.raw as Link).href}>
               {publicKey.id}
@@ -59,7 +65,7 @@ export const PublicKeyEntry: FC<Props> = ({ publicKey, onDelete }) => {
             publicKey.id
           )}
         </td>
-        <td className="is-darker has-text-centered">{deleteButton}</td>
+        <td className="is-vertical-align-middle has-text-centered">{deleteButton}</td>
       </tr>
     </>
   );