From b1c7cebe99427195b6ee75cf85fd2d3d214f808e Mon Sep 17 00:00:00 2001 From: Daniel Kostro Date: Thu, 17 Oct 2024 13:21:15 +0200 Subject: [PATCH 1/4] feat: remove fill, large and minimal props from Toolbar component It was decided we want to restrict the Toolbar component to the ways we actually intend to use it, and not broaden its scope too much. BREAKING-CHANGE: the `fill`, `large` and `minimal` props have been removed from the Toolbar component --- src/components/toolbar/Toolbar.tsx | 49 ++++++++---------------- src/components/toolbar/toolbarContext.ts | 1 - stories/components/toolbar.stories.tsx | 28 -------------- 3 files changed, 17 insertions(+), 61 deletions(-) diff --git a/src/components/toolbar/Toolbar.tsx b/src/components/toolbar/Toolbar.tsx index ab2fc5c8..a61a6481 100644 --- a/src/components/toolbar/Toolbar.tsx +++ b/src/components/toolbar/Toolbar.tsx @@ -40,10 +40,7 @@ interface ToolbarBaseProps { } export interface ToolbarProps extends ToolbarBaseProps, - Pick< - ButtonGroupProps, - 'children' | 'minimal' | 'large' | 'vertical' | 'fill' - > { + Pick { 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(null); @@ -123,13 +111,11 @@ export function Toolbar(props: ToolbarProps) { return ( - + {isPopover && ( )} @@ -237,7 +222,7 @@ Toolbar.Item = function ToolbarItem(props: ToolbarItemProps) { content: tooltip, placement: vertical ? 'right' : 'bottom', intent, - compact: !large, + compact: true, interactionKind: 'hover', ...tooltipProps, } diff --git a/src/components/toolbar/toolbarContext.ts b/src/components/toolbar/toolbarContext.ts index baa6f7ae..9ae3ed6b 100644 --- a/src/components/toolbar/toolbarContext.ts +++ b/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; diff --git a/stories/components/toolbar.stories.tsx b/stories/components/toolbar.stories.tsx index 2020e3b3..35de56cc 100644 --- a/stories/components/toolbar.stories.tsx +++ b/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(); - return ( -
- - {itemsBlueprintIcons.map((item) => ( - setSelected(item.id)} - /> - ))} - -
{selected ?? 'Select an item in the toolbar'}
-
- ); -} From ea1879340b4ffe5c70552bafed98fab55e9a15c3 Mon Sep 17 00:00:00 2001 From: Daniel Kostro Date: Thu, 17 Oct 2024 14:13:26 +0200 Subject: [PATCH 2/4] fix: Toolbar should have a backdrop only with "click" as the interaction kind Closes: https://github.com/zakodium-oss/react-science/issues/775 --- src/components/toolbar/Toolbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/toolbar/Toolbar.tsx b/src/components/toolbar/Toolbar.tsx index a61a6481..c9e0b062 100644 --- a/src/components/toolbar/Toolbar.tsx +++ b/src/components/toolbar/Toolbar.tsx @@ -244,7 +244,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} { From 6fd3edf885c0f72fc69d10f4ea50be3dbb5c4532 Mon Sep 17 00:00:00 2001 From: Daniel Kostro Date: Thu, 17 Oct 2024 15:14:15 +0200 Subject: [PATCH 3/4] feat: add ActivityBar component --- src/components/activity_bar/activity_bar.tsx | 118 +++++++++++++++++++ src/components/activity_bar/index.ts | 1 + src/components/index.ts | 1 + stories/components/activity_bar.stories.tsx | 73 ++++++++++++ 4 files changed, 193 insertions(+) create mode 100644 src/components/activity_bar/activity_bar.tsx create mode 100644 src/components/activity_bar/index.ts create mode 100644 stories/components/activity_bar.stories.tsx diff --git a/src/components/activity_bar/activity_bar.tsx b/src/components/activity_bar/activity_bar.tsx new file mode 100644 index 00000000..66d8d832 --- /dev/null +++ b/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 { + tooltip?: TooltipProps['content']; + tooltipProps?: Omit; + onClick?: (event: MouseEvent) => void; + disabled?: boolean; +} + +export function ActivityBar(props: ActivityBarProps) { + const { children } = props; + + return ( + + {children} + + ); +} + +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 ( +