feat(core): implement IconButton block

webapp/packages/core/src/app/Notifications/NotificationsItem/Snackbar/Snackbar.tsx

@@ -7,10 +7,9 @@
  */
 
 import { useEffect, useState } from 'react';
-import { Button as ReakitButton } from 'reakit/Button';
 import styled, { use } from 'reshadow';
 
-import { Icon, Button } from '@dbeaver/core/blocks';
+import { Button, IconButton } from '@dbeaver/core/blocks';
 import { ENotificationType } from '@dbeaver/core/eventsLog';
 import { useTranslate } from '@dbeaver/core/localization';
 import { useStyles } from '@dbeaver/core/theming';
@@ -66,9 +65,7 @@ export function Snackbar({
         {type && <NotificationMark type={type} />}
         <message as="div">{text}</message>
         {!closeAfter && onClose && (
-          <ReakitButton onClick={onClose}>
-            <Icon name="cross" viewBox="0 0 16 16" />
-          </ReakitButton>
+          <IconButton onClick={onClose} name="cross" viewBox="0 0 16 16" />
         )}
       </notification-header>
       <notification-body as="div">

webapp/packages/core/src/app/Notifications/NotificationsItem/Snackbar/styles.ts

@@ -47,22 +47,6 @@ export const SNACKBAR_STYLES = composes(
       display: flex;
     }
 
-    ReakitButton {
-      color: rgba(0, 0, 0, 0.45);
-      outline: none;
-      border: none;
-      background: none;
-      cursor: pointer;
-      padding: 0;
-      margin: 4px;
-      height: 16px;
-
-      & Icon {
-        width: 16px;
-        height: 16px;
-      }
-    }
-
     message {
       flex: 1;
       overflow: auto;
@@ -98,11 +82,15 @@ export const SNACKBAR_STYLES = composes(
     }
 
     actions {
+      display: flex;
       margin-top: 24px;
 
       & Button {
-        margin-left: auto;
-        display: block;
+        margin-left: 16px;
+
+        &:first-child {
+          margin-left: auto;
+        }
       }
     }
   `

webapp/packages/core/src/blocks/IconButton.tsx

@@ -0,0 +1,35 @@
+import { Button, ButtonProps } from 'reakit/Button';
+import styled, { css } from 'reshadow';
+
+import { Icon } from './Icons/Icon';
+
+const styles = css`
+  Button {
+    color: rgba(0, 0, 0, 0.45);
+    outline: none;
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 0;
+    margin: 4px;
+    height: 16px;
+
+    & Icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+`;
+
+type Props = {
+  name: string;
+  viewBox: string;
+}
+
+export function IconButton({ name, viewBox, ...rest }: Props & ButtonProps) {
+  return styled(styles)(
+    <Button {...rest}>
+      <Icon name={name} viewBox={viewBox} />
+    </Button>
+  );
+}

webapp/packages/core/src/blocks/index.ts

@@ -17,3 +17,4 @@ export * from './SubmittingForm';
 export * from './SanitizedHTML/SanitizedHTML';
 export * from './ItemList';
 export * from './PropertiesTable';
+export * from './IconButton';

webapp/packages/data-export-plugin/src/ExportNotification/ExportNotification.tsx

@@ -8,11 +8,10 @@
 
 import { observer } from 'mobx-react';
 import { useEffect, useState } from 'react';
-import { Button as ReakitButton } from 'reakit/Button';
 import styled, { use, css } from 'reshadow';
 
 import { SNACKBAR_STYLES } from '@dbeaver/core/app';
-import { Icon, Button, Loader } from '@dbeaver/core/blocks';
+import { Button, Loader, IconButton } from '@dbeaver/core/blocks';
 import { useController } from '@dbeaver/core/di';
 import { NotificationComponentProps } from '@dbeaver/core/eventsLog';
 import { useTranslate } from '@dbeaver/core/localization';
@@ -25,18 +24,6 @@ const styles = css`
   Loader {
     margin-right: 16px;
   }
-  actions {
-    display: flex;
-  }
-  fill {
-    flex: 1;
-  }
-  Button {
-    margin-left: 16px !important;
-  }
-  actions Button {
-    display: flex;
-  }
   source-name {
     composes: theme-typography--body2 from global;
     padding-top: 16px;
@@ -66,9 +53,7 @@ export const ExportNotification = observer(function ExportNotification({
         <Loader loading={controller.isPending} hideMessage />
         <message as="div">{translate(controller.status)}</message>
         {!controller.isPending && (
-          <ReakitButton onClick={controller.delete}>
-            <Icon name="cross" viewBox="0 0 16 16" />
-          </ReakitButton>
+          <IconButton onClick={controller.delete} name="cross" viewBox="0 0 16 16" />
         )}
       </notification-header>
       <notification-body as="div">
@@ -77,7 +62,6 @@ export const ExportNotification = observer(function ExportNotification({
           <pre>{controller.task?.context.sourceName}</pre>
         </source-name>
         <actions as="div">
-          <fill as="div" />
           {controller.isSuccess && (
             <>
               <Button