feat: activity bar and fixes

src/components/activity_bar/activity_bar.tsx

@@ -0,0 +1,118 @@
+/** @jsxImportSource @emotion/react */
+
+import {
+  ButtonGroup,
+  Classes,
+  Colors,
+  Icon,
+  type TooltipProps,
+} from '@blueprintjs/core';
+import { css } from '@emotion/react';
+import { cloneElement, type MouseEvent, type ReactNode } from 'react';
+
+import { Button, type ButtonProps } from '../button/index.js';
+
+export interface ActivityBarProps {
+  children: ReactNode;
+}
+
+export interface ActivityBarItemProps
+  extends Pick<ButtonProps, 'id' | 'icon' | 'active' | 'tag' | 'tagProps'> {
+  tooltip?: TooltipProps['content'];
+  tooltipProps?: Omit<TooltipProps, 'content'>;
+  onClick?: (event: MouseEvent) => void;
+  disabled?: boolean;
+}
+
+export function ActivityBar(props: ActivityBarProps) {
+  const { children } = props;
+
+  return (
+    <ButtonGroup
+      vertical
+      large
+      minimal
+      style={{
+        flexWrap: 'wrap-reverse',
+      }}
+    >
+      {children}
+    </ButtonGroup>
+  );
+}
+
+export function ActivityBarItem(props: ActivityBarItemProps) {
+  const {
+    active = false,
+    icon,
+    onClick,
+    tooltip,
+    tooltipProps,
+    ...otherProps
+  } = props;
+
+  const resizedIcon =
+    !icon || typeof icon === 'string'
+      ? icon
+      : cloneElement(icon, {
+          className: icon.props.className
+            ? `${icon.props.className} bp5-icon`
+            : 'bp5-icon',
+        });
+
+  return (
+    <Button
+      type="button"
+      css={css`
+        .${Classes.ICON} {
+          color: ${Colors.DARK_GRAY3};
+        }
+        .bp5-icon {
+          width: 20px;
+          height: 20px;
+          font-size: 14px;
+        }
+        .bp5-tag {
+          font-size: 12px;
+          line-height: 14px;
+          min-width: 18px;
+          min-height: 18px;
+        }
+      `}
+      style={{
+        fontSize: '1.125em',
+        width: 'fit-content',
+      }}
+      active={active}
+      icon={
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: 0,
+            height: 0,
+            marginRight: 0,
+          }}
+        >
+          <Icon icon={resizedIcon} size={20} />
+        </div>
+      }
+      onClick={onClick}
+      tooltipProps={
+        !tooltip
+          ? undefined
+          : {
+              content: tooltip,
+              placement: 'left',
+              compact: false,
+              interactionKind: 'hover',
+              ...tooltipProps,
+            }
+      }
+      {...otherProps}
+    />
+  );
+}
+
+ActivityBar.Item = ActivityBarItem;

src/components/activity_bar/index.ts

@@ -0,0 +1 @@
+export * from './activity_bar.js';

src/components/index.ts

@@ -13,6 +13,7 @@ export * from './root-layout/index.js';
 export * from './split-pane/index.js';
 export * from './table/index.js';
 export * from './toolbar/index.js';
+export * from './activity_bar/index.js';
 export * from './utils/index.js';
 export * from './selected-total/index.js';
 export * as ValueRenderers from './value-renderers/index.js';

src/components/toolbar/Toolbar.tsx

@@ -40,10 +40,7 @@ interface ToolbarBaseProps {
 }
 export interface ToolbarProps
   extends ToolbarBaseProps,
-    Pick<
-      ButtonGroupProps,
-      'children' | 'minimal' | 'large' | 'vertical' | 'fill'
-    > {
+    Pick<ButtonGroupProps, 'children' | 'vertical'> {
   popoverInteractionKind?: PopoverInteractionType;
 }
 
@@ -67,26 +64,17 @@ export interface ToolbarPopoverItemProps extends PopoverProps {
 const border = '1px solid rgb(247, 247, 247)';
 
 export function Toolbar(props: ToolbarProps) {
-  const {
-    children,
-    disabled,
-    intent,
-    large,
-    vertical,
-    popoverInteractionKind,
-    minimal,
-    fill,
-  } = props;
+  const { children, disabled, intent, vertical, popoverInteractionKind } =
+    props;
 
   const contextValue = useMemo(
     () => ({
       intent,
-      large,
       vertical,
       disabled,
       popoverInteractionKind,
     }),
-    [intent, large, vertical, disabled, popoverInteractionKind],
+    [intent, vertical, disabled, popoverInteractionKind],
   );
   const ref = useRef<HTMLDivElement>(null);
 
@@ -123,13 +111,12 @@ export function Toolbar(props: ToolbarProps) {
   return (
     <ToolbarProvider value={contextValue}>
       <ButtonGroup
-        fill={fill}
+        ref={ref}
         // Reset because of layout effect above
         // TODO: remove once the workaround is no longer needed
         key={String(vertical)}
         vertical={vertical}
-        large={large}
-        minimal={minimal}
+        minimal
         style={{
           flexWrap: 'wrap',
           borderRight: vertical ? border : undefined,
@@ -157,7 +144,6 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
   const {
     intent: toolbarIntent,
     disabled: toolbarDisabled,
-    large,
     vertical,
   } = useToolbarContext();
   const intent = itemIntent ?? toolbarIntent;
@@ -180,15 +166,15 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
           color: ${Colors.DARK_GRAY3};
         }
         .bp5-icon {
-          width: ${large ? '20px' : '16px'};
-          height: ${large ? '20px' : '16px'};
-          font-size: ${large ? '14px' : '12px'};
+          width: 16px;
+          height: 16px;
+          font-size: 12px;
         }
         .bp5-tag {
-          font-size: ${large ? '12px' : '10px'};
-          line-height: ${large ? '14px' : '12px'};
-          min-width: ${large ? '18px' : '15px'};
-          min-height: ${large ? '18px' : '15px'};
+          font-size: 10px;
+          line-height: 12px;
+          min-width: 12px;
+          min-height: 12px;
         }
       `}
       intent={intent}
@@ -210,18 +196,18 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
             marginRight: 0,
           }}
         >
-          <Icon icon={resizedIcon} size={large ? 20 : 16} />
+          <Icon icon={resizedIcon} size={16} />
           {isPopover && (
             <Icon
               icon="caret-right"
-              size={large ? 14 : 9}
+              size={9}
               style={{
                 transform: 'rotate(45deg)',
                 position: 'absolute',
                 bottom: 0,
                 right: 0,
-                width: large ? 14 : 9,
-                height: large ? 14 : 9,
+                width: 9,
+                height: 9,
               }}
             />
           )}
@@ -237,7 +223,7 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) {
               content: tooltip,
               placement: vertical ? 'right' : 'bottom',
               intent,
-              compact: !large,
+              compact: true,
               interactionKind: 'hover',
               ...tooltipProps,
             }
@@ -259,7 +245,7 @@ Toolbar.PopoverItem = function ToolbarPopoverItem(
       disabled={disabled}
       placement={vertical ? 'right-start' : 'bottom-start'}
       interactionKind={popoverInteractionKind}
-      hasBackdrop
+      hasBackdrop={popoverInteractionKind === 'click'}
       hoverCloseDelay={0}
       css={css`
         .${Classes.ICON} {

src/components/toolbar/toolbarContext.ts

@@ -5,7 +5,6 @@ import type { PopoverInteractionType } from './Toolbar.js';
 
 export interface ToolbarContext {
   intent?: Intent;
-  large?: boolean;
   vertical?: boolean;
   disabled?: boolean;
   popoverInteractionKind?: PopoverInteractionType;

stories/components/activity_bar.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta } from '@storybook/react';
+import { type ReactElement, useState } from 'react';
+
+import {
+  ActivityBar,
+  ActivityBarItem,
+  type ActivityBarItemProps,
+  type ActivityBarProps,
+  type ToolbarProps,
+} from '../../src/components/index.js';
+
+export default {
+  title: 'Components / ActivityBar',
+  component: ActivityBar,
+  argTypes: {
+    onClick: { action: 'handle' },
+  },
+} as Meta<ToolbarProps>;
+
+type ActivityBarStoryItem = Pick<
+  ActivityBarItemProps,
+  'tooltip' | 'icon' | 'disabled'
+> & {
+  id: string;
+  content?: ReactElement;
+};
+
+const itemsBlueprintIcons: ActivityBarStoryItem[] = [
+  { id: 'phone', icon: 'phone', tooltip: 'Phone' },
+  { id: 'add-column-left', icon: 'add-column-left', tooltip: 'Add left' },
+  { id: 'add-column-right', icon: 'add-column-right', tooltip: 'Right' },
+  {
+    id: 'redo',
+    icon: 'redo',
+    tooltip: 'Redo',
+  },
+  { id: 'undo', icon: 'undo', tooltip: 'Undo' },
+  { id: 'paperclip', icon: 'paperclip', tooltip: 'Attachment' },
+  { id: 'help', icon: 'help', tooltip: 'Help' },
+  { id: 'lab-test', icon: 'lab-test', tooltip: 'Lab', disabled: true },
+  { id: 'trash', icon: 'trash', tooltip: 'Trash' },
+];
+
+export function Control(props: ActivityBarProps & { onClick: () => void }) {
+  const { onClick, ...activityBarProps } = props;
+  const [active, setActive] = useState<string | null>(null);
+
+  return (
+    <div
+      style={{
+        border: '1px solid #f7f7f7',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'row-reverse',
+      }}
+    >
+      <ActivityBar {...activityBarProps}>
+        {itemsBlueprintIcons.map((item) => (
+          <ActivityBarItem
+            key={item.id}
+            {...item}
+            onClick={() => {
+              setActive(item.id);
+              onClick();
+            }}
+            active={item.id === active}
+          />
+        ))}
+      </ActivityBar>
+    </div>
+  );
+}

stories/components/toolbar.stories.tsx

@@ -21,9 +21,6 @@ export default {
     vertical: false,
     intent: 'none',
     disabled: false,
-    minimal: true,
-    large: false,
-    fill: false,
   },
   argTypes: {
     onClick: { action: 'handle' },
@@ -560,28 +557,3 @@ export function TooltipHelpContentStory({ intent }: ToolbarProps) {
 }
 
 TooltipHelpContentStory.storyName = 'TooltipHelpContent';
-
-export function PanelToolbar() {
-  const [selected, setSelected] = useState<string>();
-  return (
-    <div
-      style={{
-        display: 'flex',
-        height: '100%',
-      }}
-    >
-      <Toolbar vertical large fill>
-        {itemsBlueprintIcons.map((item) => (
-          <Toolbar.Item
-            key={item.id}
-            id={item.id}
-            icon={item.icon}
-            active={selected === item.id}
-            onClick={() => setSelected(item.id)}
-          />
-        ))}
-      </Toolbar>
-      <div>{selected ?? 'Select an item in the toolbar'}</div>
-    </div>
-  );
-}