Differentiate focused buttons in confirmation dialog (#2050)

Users need to understand which option they are choosing in an confirmation dialog. Buttons for primary and secondary actions should be visually discernible when one is focused/hovered.
The changes remove default-styling from buttons in confirmation dialogues. The style is set in the element using this dialog to better visually separate the primary and secondary action.

Resolves #2049

gradle/changelog/differentiate_focused_buttons.yaml

@@ -0,0 +1,2 @@
+- type: changed
+  description: Visually separate focused and hovered buttons in confirmation dialogues ([#2050](https://github.com/scm-manager/scm-manager/pull/2050))

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

@@ -16885,7 +16885,7 @@ exports[`Storyshots Modal/ConfirmAlert Autofocus 1`] = `
           className="control"
         >
           <button
-            className="button is-info is-outlined"
+            className="button"
             onClick={[Function]}
             onKeyDown={[Function]}
             tabIndex={0}
@@ -16963,7 +16963,7 @@ exports[`Storyshots Modal/ConfirmAlert Default 1`] = `
           className="control"
         >
           <button
-            className="button is-info is-outlined"
+            className="button is-outlined"
             onClick={[Function]}
             onKeyDown={[Function]}
             tabIndex={0}
@@ -16975,7 +16975,7 @@ exports[`Storyshots Modal/ConfirmAlert Default 1`] = `
           className="control"
         >
           <button
-            className="button is-info"
+            className="button"
             onClick={[Function]}
             onKeyDown={[Function]}
             tabIndex={0}

scm-ui/ui-components/src/modals/ConfirmAlert.stories.tsx

@@ -46,11 +46,11 @@ const buttons = [
 
 const buttonsWithAutofocus = [
   {
-    className: "is-outlined",
     label: "Cancel",
     onClick: () => null
   },
   {
+    className: "is-info",
     label: "I should be focused",
     autofocus: true
   }

scm-ui/ui-components/src/modals/ConfirmAlert.tsx

@@ -68,7 +68,7 @@ export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close }) => {
       {buttons.map((button, index) => (
         <p className="control" key={index}>
           <button
-            className={classNames("button", "is-info", button.className, button.isLoading ? "is-loading" : "")}
+            className={classNames("button", button.className, button.isLoading ? "is-loading" : "")}
             key={index}
             onClick={() => handleClickButton(button)}
             onKeyDown={e => e.key === "Enter" && handleClickButton(button)}

scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx

@@ -65,11 +65,11 @@ const DeleteRepositoryRole: FC<Props> = ({ confirmDialog = true, role }: Props)
         message={t("repositoryRole.delete.confirmAlert.message")}
         buttons={[
           {
-            className: "is-outlined",
             label: t("repositoryRole.delete.confirmAlert.submit"),
             onClick: deleteRoleCallback
           },
           {
+            className: "is-info",
             label: t("repositoryRole.delete.confirmAlert.cancel"),
             onClick: () => null,
             autofocus: true

scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx

@@ -60,11 +60,11 @@ export const DeleteGroup: FC<Props> = ({ confirmDialog = true, group }) => {
         message={t("deleteGroup.confirmAlert.message")}
         buttons={[
           {
-            className: "is-outlined",
             label: t("deleteGroup.confirmAlert.submit"),
             onClick: deleteGroupCallback
           },
           {
+            className: "is-info",
             label: t("deleteGroup.confirmAlert.cancel"),
             onClick: () => null,
             autofocus: true

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

@@ -75,12 +75,12 @@ const BranchTable: FC<Props> = ({ repository, baseUrl, branches, type, branchesD
           message={t("branch.delete.confirmAlert.message", { branch: branchToBeDeleted?.name })}
           buttons={[
             {
-              className: "is-outlined",
               label: t("branch.delete.confirmAlert.submit"),
               isLoading,
               onClick: () => deleteBranch()
             },
             {
+              className: "is-info",
               label: t("branch.delete.confirmAlert.cancel"),
               onClick: () => abortDelete(),
               autofocus: true

scm-ui/ui-webapp/src/repos/branches/containers/DeleteBranch.tsx

@@ -54,12 +54,12 @@ const DeleteBranch: FC<Props> = ({ repository, branch }: Props) => {
         message={t("branch.delete.confirmAlert.message", { branch: branch.name })}
         buttons={[
           {
-            className: "is-outlined",
             label: t("branch.delete.confirmAlert.submit"),
             onClick: () => remove(branch),
             isLoading
           },
           {
+            className: "is-info",
             label: t("branch.delete.confirmAlert.cancel"),
             onClick: () => null,
             autofocus: true

scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx

@@ -53,11 +53,11 @@ const ArchiveRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
       message={t("archiveRepo.confirmAlert.message")}
       buttons={[
         {
-          className: "is-outlined",
           label: t("archiveRepo.confirmAlert.submit"),
           onClick: () => archiveRepoCallback()
         },
         {
+          className: "is-info",
           label: t("archiveRepo.confirmAlert.cancel"),
           onClick: () => null,
           autofocus: true

scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx

@@ -65,11 +65,11 @@ const DeleteRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
         message={t("deleteRepo.confirmAlert.message")}
         buttons={[
           {
-            className: "is-outlined",
             label: t("deleteRepo.confirmAlert.submit"),
             onClick: () => deleteRepoCallback()
           },
           {
+            className: "is-info",
             label: t("deleteRepo.confirmAlert.cancel"),
             onClick: () => null,
             autofocus: true

scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx

@@ -53,13 +53,13 @@ const UnarchiveRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
       message={t("unarchiveRepo.confirmAlert.message")}
       buttons={[
         {
-          className: "is-outlined",
           label: t("unarchiveRepo.confirmAlert.submit"),
           isLoading,
           onClick: () => unarchiveRepoCallback(),
           autofocus: true
         },
         {
+          className: "is-info",
           label: t("unarchiveRepo.confirmAlert.cancel"),
           onClick: () => null
         }

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

@@ -60,12 +60,12 @@ const DeletePermissionButton: FC<Props> = ({ namespaceOrRepository, permission,
         message={t("permission.delete-permission-button.confirm-alert.message")}
         buttons={[
           {
-            className: "is-outlined",
             label: t("permission.delete-permission-button.confirm-alert.submit"),
             isLoading,
             onClick: () => deletePermission(),
           },
           {
+            className: "is-info",
             label: t("permission.delete-permission-button.confirm-alert.cancel"),
             onClick: () => null,
             autofocus: true,

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

@@ -74,12 +74,12 @@ const TagTable: FC<Props> = ({ repository, baseUrl, tags }) => {
           message={t("tag.delete.confirmAlert.message", { tag: tagToBeDeleted?.name })}
           buttons={[
             {
-              className: "is-outlined",
               label: t("tag.delete.confirmAlert.submit"),
               isLoading,
               onClick: () => deleteTag()
             },
             {
+              className: "is-info",
               label: t("tag.delete.confirmAlert.cancel"),
               onClick: () => abortDelete(),
               autofocus: true

scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx

@@ -52,12 +52,12 @@ const DeleteTag: FC<Props> = ({ tag, repository }) => {
           message={t("tag.delete.confirmAlert.message", { tag: tag.name })}
           buttons={[
             {
-              className: "is-outlined",
               label: t("tag.delete.confirmAlert.submit"),
               isLoading,
               onClick: () => remove(tag)
             },
             {
+              className: "is-info",
               label: t("tag.delete.confirmAlert.cancel"),
               onClick: () => null,
               autofocus: true

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

@@ -59,7 +59,6 @@ export const ApiKeyEntry: FC<Props> = ({ apiKey, onDelete }) => {
           message={t("apiKey.deleteConfirmAlert.message")}
           buttons={[
             {
-              className: "is-outlined",
               label: t("apiKey.deleteConfirmAlert.submit"),
               onClick: () => {
                 onDelete(apiKey);
@@ -67,6 +66,7 @@ export const ApiKeyEntry: FC<Props> = ({ apiKey, onDelete }) => {
               },
             },
             {
+              className: "is-info",
               label: t("apiKey.deleteConfirmAlert.cancel"),
               onClick: () => setShowModal(false),
               autofocus: true,

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

@@ -74,7 +74,6 @@ export const PublicKeyEntry: FC<Props> = ({ publicKey, onDelete }) => {
           message={t("publicKey.deleteConfirmAlert.message")}
           buttons={[
             {
-              className: "is-outlined",
               label: t("publicKey.deleteConfirmAlert.submit"),
               onClick: () => {
                 onDelete(publicKey);
@@ -82,6 +81,7 @@ export const PublicKeyEntry: FC<Props> = ({ publicKey, onDelete }) => {
               },
             },
             {
+              className: "is-info",
               label: t("publicKey.deleteConfirmAlert.cancel"),
               onClick: () => setShowModal(false),
               autofocus: true,

scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx

@@ -60,11 +60,11 @@ const DeleteUser: FC<Props> = ({ confirmDialog = true, user }) => {
         message={t("deleteUser.confirmAlert.message")}
         buttons={[
           {
-            className: "is-outlined",
             label: t("deleteUser.confirmAlert.submit"),
             onClick: deleteUserCallback
           },
           {
+            className: "is-info",
             label: t("deleteUser.confirmAlert.cancel"),
             onClick: () => null,
             autofocus: true