CB-4038 add action icon button (#2064)

* CB-4038 add action icon button

* CB-4038 update styles in image value panel

* CB-4038 keep default styles export

---------

Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>

webapp/packages/core-blocks/src/ActionIconButton.tsx

@@ -0,0 +1,19 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2023 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { observer } from 'mobx-react-lite';
+
+import style from './ActionIconButton.m.css';
+import { IconButton, type IconButtonProps } from './IconButton';
+import { s } from './s';
+import { useS } from './useS';
+
+export const ActionIconButton: React.FC<IconButtonProps> = observer(function ActionIconButton(props) {
+  const styles = useS(style);
+
+  return <IconButton {...props} className={s(styles, { actionIconButton: true }, props.className)} />;
+});

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

@@ -5,17 +5,19 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { observer } from 'mobx-react-lite';
+import type React from 'react';
 import { Button, ButtonProps } from 'reakit/Button';
 import styled from 'reshadow';
 
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 
 import { Icon } from './Icon';
+import IconButtonStyles from './IconButton.m.css';
 import { s } from './s';
 import { StaticImage } from './StaticImage';
 import { useS } from './useS';
 import { useStyles } from './useStyles';
-import IconButtonStyles from './IconButton.m.css';
 
 interface Props {
   name: string;
@@ -24,7 +26,9 @@ interface Props {
   style?: ComponentStyle;
 }
 
-export function IconButton({ name, img, viewBox, style, className, ...rest }: Props & ButtonProps) {
+export type IconButtonProps = Props & ButtonProps;
+
+export const IconButton: React.FC<IconButtonProps> = observer(function IconButton({ name, img, viewBox, style, className, ...rest }) {
   const styles = useS(IconButtonStyles);
 
   return styled(useStyles(style))(
@@ -33,4 +37,4 @@ export function IconButton({ name, img, viewBox, style, className, ...rest }: Pr
       {!img && <Icon className={s(styles, { icon: true })} name={name} viewBox={viewBox} />}
     </Button>,
   );
-}
+});

webapp/packages/core-blocks/src/Menu/ACTION_ICON_BUTTON_STYLES.ts

@@ -1,21 +0,0 @@
-/*
- * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2023 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-import { css } from 'reshadow';
-
-export const ACTION_ICON_BUTTON_STYLES = css`
-  IconButton {
-    composes: theme-form-element-radius theme-ripple from global;
-
-    padding: 4px !important;
-    margin: 2px !important;
-    width: 24px !important;
-    height: 24px !important;
-    overflow: hidden;
-    flex-shrink: 0;
-  }
-`;

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

@@ -35,8 +35,6 @@ export * from './localization/useTranslate';
 export * from './ConnectionImageWithMask/ConnectionImageWithMask';
 export { default as ConnectionImageWithMaskSvgStyles } from './ConnectionImageWithMask/ConnectionImageWithMaskSvg.m.css';
 
-export * from './Menu/ACTION_ICON_BUTTON_STYLES';
-export { default as ActionIconButtonStyles } from './ActionIconButton.m.css';
 export * from './Menu/Menu';
 export { default as MenuStyles } from './Menu/Menu.m.css';
 export * from './Menu/MenuBarSmallItem';
@@ -182,7 +180,9 @@ export * from './ExceptionMessage';
 export { default as ExceptionMessageStyles } from './ExceptionMessage.m.css';
 export * from './getComputed';
 export * from './IconButton';
+export * from './ActionIconButton';
 export { default as IconButtonStyles } from './IconButton.m.css';
+export { default as ActionIconButtonStyles } from './ActionIconButton.m.css';
 export * from './IconOrImage';
 export * from './s';
 export * from './SContext';

webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx

@@ -8,7 +8,7 @@
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 
-import { ActionIconButtonStyles, Button, Container, Fill, IconButton, s, useObservableRef, useS, useTranslate } from '@cloudbeaver/core-blocks';
+import { ActionIconButton, Button, Container, Fill, s, useObservableRef, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { selectFiles } from '@cloudbeaver/core-browser';
 import { useService } from '@cloudbeaver/core-di';
 import { NotificationService } from '@cloudbeaver/core-events';
@@ -44,33 +44,14 @@ const Tools = observer<IToolsProps>(function Tools({ loading, stretch, onToggleS
   return (
     <Container gap dense keepSize>
       <Container keepSize flexStart center>
-        {onSave && (
-          <IconButton
-            title={translate('ui_download')}
-            className={ActionIconButtonStyles.actionIconButton}
-            name="/icons/export.svg"
-            disabled={loading}
-            img
-            onClick={onSave}
-          />
-        )}
-        {onUpload && (
-          <IconButton
-            title={translate('ui_upload')}
-            className={ActionIconButtonStyles.actionIconButton}
-            name="/icons/import.svg"
-            disabled={loading}
-            img
-            onClick={onUpload}
-          />
-        )}
+        {onSave && <ActionIconButton title={translate('ui_download')} name="/icons/export.svg" disabled={loading} img onClick={onSave} />}
+        {onUpload && <ActionIconButton title={translate('ui_upload')} name="/icons/import.svg" disabled={loading} img onClick={onUpload} />}
       </Container>
       <Fill />
       {onToggleStretch && (
         <Container keepSize flexEnd center>
-          <IconButton
+          <ActionIconButton
             title={translate(stretch ? 'data_viewer_presentation_value_image_original_size' : 'data_viewer_presentation_value_image_fit')}
-            className={ActionIconButtonStyles.actionIconButton}
             name={stretch ? 'img-original-size' : 'img-fit-size'}
             onClick={onToggleStretch}
           />

webapp/packages/plugin-navigation-tree-filters/src/NavigationTreeFiltersDialog/FiltersTableItem.tsx

@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { ActionIconButtonStyles, IconButton, s, TableColumnValue, TableItem, useS } from '@cloudbeaver/core-blocks';
+import { ActionIconButton, s, TableColumnValue, TableItem, useS } from '@cloudbeaver/core-blocks';
 
 import styles from './FiltersTableItem.m.css';
 
@@ -20,13 +20,13 @@ interface Props {
 }
 
 export const FiltersTableItem = observer<Props>(function FiltersTableItem({ id, name, disabled, className, onDelete }) {
-  const style = useS(ActionIconButtonStyles, styles);
+  const style = useS(styles);
 
   return (
     <TableItem className={s(style, { tableItem: true }, className)} item={id} title={name} disabled={disabled} selectDisabled={disabled}>
       <TableColumnValue>{name}</TableColumnValue>
       <TableColumnValue className={s(style, { deleteColumnCell: true })} flex>
-        <IconButton className={s(ActionIconButtonStyles, { actionIconButton: true })} name="cross-bold" onClick={() => onDelete(id)} />
+        <ActionIconButton name="cross-bold" onClick={() => onDelete(id)} />
       </TableColumnValue>
     </TableItem>
   );

webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeTools.tsx

@@ -10,9 +10,8 @@ import React, { useState } from 'react';
 import styled from 'reshadow';
 
 import {
-  ActionIconButtonStyles,
+  ActionIconButton,
   Fill,
-  IconButton,
   IconButtonStyles,
   PlaceholderElement,
   s,
@@ -56,7 +55,7 @@ export const ElementsTreeTools = observer<React.PropsWithChildren<Props>>(functi
   const translate = useTranslate();
   const [opened, setOpen] = useState(false);
   const deprecatedStyles = useStyles(style);
-  const styles = useS(ElementsTreeToolsStyles, ElementsTreeToolsIconButtonStyles, ActionIconButtonStyles);
+  const styles = useS(ElementsTreeToolsStyles, ElementsTreeToolsIconButtonStyles);
 
   useCaptureViewContext(context => {
     context?.set(DATA_CONTEXT_NAV_TREE_ROOT, tree.baseRoot);
@@ -70,21 +69,21 @@ export const ElementsTreeTools = observer<React.PropsWithChildren<Props>>(functi
       <div className={s(styles, { tools: true })}>
         <div className={s(styles, { actions: true })}>
           {tree.settings?.configurable && (
-            <IconButton
+            <ActionIconButton
               name="/icons/settings_cog_sm.svg"
               title={translate('ui_settings')}
-              className={s(styles, { primary: true, actionIconButton: true, opened })}
+              className={s(styles, { primary: true, opened })}
               img
               onClick={() => setOpen(!opened)}
             />
           )}
           <Fill />
           <ElementsTreeToolsMenu tree={tree} />
-          <IconButton
+          <ActionIconButton
             name="/icons/refresh_sm.svg#root"
             title={translate('app_navigationTree_refresh')}
             disabled={loading}
-            className={s(styles, { primary: true, actionIconButton: true, loading })}
+            className={s(styles, { primary: true, loading })}
             img
             onClick={() => tree.refresh(root)}
           />