From 84f70f8e42cb68ce72d4b4e2877e368897144483 Mon Sep 17 00:00:00 2001
From: duncan <duncan@dtail-design.nl>
Date: Mon, 27 May 2024 15:23:05 +0000
Subject: [PATCH] fix(button): button nesting, make a button "a | div | button"
---
Makefile | 8 ++++
libs/shared/lib/components/buttons/index.tsx | 37 +++++++++----------
.../components/tooltip/tooltip.stories.tsx | 2 +-
.../lib/querybuilder/panel/QueryBuilder.tsx | 2 +-
.../pills/pilldropdown/PillDropdown.tsx | 2 +-
libs/shared/lib/sidebar/index.tsx | 2 +-
libs/shared/lib/vis/components/bar.tsx | 2 +-
.../lib/vis/components/config/panel.tsx | 2 +-
8 files changed, 31 insertions(+), 26 deletions(-)
diff --git a/Makefile b/Makefile
index 9d40cf028..368965e9c 100644
--- a/Makefile
+++ b/Makefile
@@ -20,6 +20,14 @@ push:
@pnpm push
clean:
+ rm -rf node_modules
+ rm -rf apps/web/node_modules
+ rm -rf libs/shared/node_modules
+ rm -rf libs/storybook/node_modules
+ rm -rf libs/config/node_modules
+ pnpm i
+
+cleanrm:
rm -rf pnpm-lock.yaml
rm -rf node_modules
rm -rf apps/web/node_modules
diff --git a/libs/shared/lib/components/buttons/index.tsx b/libs/shared/lib/components/buttons/index.tsx
index 2cfdfea12..38ea1a0c3 100644
--- a/libs/shared/lib/components/buttons/index.tsx
+++ b/libs/shared/lib/components/buttons/index.tsx
@@ -4,6 +4,7 @@ import Icon, { Sizes } from '../icon';
import { forwardRef } from 'react';
type ButtonProps = {
+ as?: 'button' | 'a' | 'div';
type?: 'primary' | 'secondary' | 'danger';
variant?: 'solid' | 'outline' | 'ghost';
size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
@@ -11,18 +12,19 @@ type ButtonProps = {
rounded?: boolean;
disabled?: boolean;
block?: boolean;
- onClick: (e: any) => void;
+ onClick?: (e: any) => void;
+ href?: string;
iconComponent?: React.ReactElement;
iconPosition?: 'leading' | 'trailing';
ariaLabel?: string;
children?: React.ReactNode;
- additionalClasses?: string;
- notAButton?: boolean;
+ className?: string;
};
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps & React.HTMLAttributes<HTMLButtonElement>>(
+export const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLDivElement, ButtonProps>(
(
{
+ as = 'button',
type = 'secondary',
variant = 'solid',
label,
@@ -30,16 +32,16 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps & React.HT
rounded = false,
disabled = false,
onClick,
+ href,
block = false,
iconComponent,
iconPosition = 'leading',
ariaLabel,
- additionalClasses,
+ className,
children,
- notAButton,
...props
},
- forwardRef,
+ forwardedRef,
) => {
let typeClass = useMemo(() => {
switch (type) {
@@ -114,30 +116,25 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps & React.HT
[iconComponent, label, children],
);
- additionalClasses = (additionalClasses || '') + (props.className || '');
+ const ButtonComponent = as;
+
+ const isAnchor = as === 'a';
- if (notAButton)
- return (
- <div
- className={`${styles.btn} ${typeClass} ${variantClass} ${sizeClass} ${blockClass} ${roundedClass} ${iconOnlyClass} ${additionalClasses}`}
- >
- {icon}
- </div>
- );
return (
- <button
+ <ButtonComponent
+ className={`${styles.btn} ${typeClass} ${variantClass} ${sizeClass} ${blockClass} ${roundedClass} ${iconOnlyClass} ${className}`}
onClick={onClick}
disabled={disabled}
aria-label={ariaLabel}
- ref={forwardRef}
+ href={isAnchor ? href : undefined}
+ ref={forwardedRef as React.RefObject<any>}
{...props}
- className={`${styles.btn} ${typeClass} ${variantClass} ${sizeClass} ${blockClass} ${roundedClass} ${iconOnlyClass} ${additionalClasses}`}
>
{iconPosition === 'leading' && icon}
{label && <span>{label}</span>}
{children && <span>{children}</span>}
{iconPosition === 'trailing' && icon}
- </button>
+ </ButtonComponent>
);
},
);
diff --git a/libs/shared/lib/components/tooltip/tooltip.stories.tsx b/libs/shared/lib/components/tooltip/tooltip.stories.tsx
index 955eb37c7..1335dde4a 100644
--- a/libs/shared/lib/components/tooltip/tooltip.stories.tsx
+++ b/libs/shared/lib/components/tooltip/tooltip.stories.tsx
@@ -25,7 +25,7 @@ const TooltipStory = (args: any) => {
<div className="flex justify-center items-center py-16">
<Tooltip {...args}>
<TooltipTrigger>
- <button className={'mx-auto'}>Hover over me</button>
+ <div className={'mx-auto'}>Hover over me</div>
</TooltipTrigger>
<TooltipContent side={args.side}>
<p>This is a tooltip</p>
diff --git a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
index 6fca5ec41..5c3b9a459 100644
--- a/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
+++ b/libs/shared/lib/querybuilder/panel/QueryBuilder.tsx
@@ -499,7 +499,7 @@ export const QueryBuilderInner = (props: QueryBuilderProps) => {
variant="ghost"
size="xs"
iconComponent={<Settings />}
- additionalClasses="query-settings"
+ className="query-settings"
onClick={(event) => {
event.stopPropagation();
if (toggleSettings === 'settings') setToggleSettings(undefined);
diff --git a/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdown.tsx b/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdown.tsx
index fae11e3ea..d96f52f5e 100644
--- a/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdown.tsx
+++ b/libs/shared/lib/querybuilder/pills/pilldropdown/PillDropdown.tsx
@@ -106,7 +106,7 @@ export const PillDropdown = (props: PillDropdownProps) => {
key={(attribute.handleData.attributeName || '') + i}
iconComponent={attribute?.handleData?.attributeDimension ? IconMap[attribute.handleData.attributeDimension] : undefined}
iconPosition="trailing"
- additionalClasses={`w-full ${attributesOfInterest[i] ? 'bg-secondary-100' : 'bg-white'} justify-between rounded-none text-[0.7em]`}
+ className={`w-full ${attributesOfInterest[i] ? 'bg-secondary-100' : 'bg-white'} justify-between rounded-none text-[0.7em]`}
variant="ghost"
size={'xs'}
label={attribute.handleData.attributeName}
diff --git a/libs/shared/lib/sidebar/index.tsx b/libs/shared/lib/sidebar/index.tsx
index aa1fb99bd..8f92890cf 100644
--- a/libs/shared/lib/sidebar/index.tsx
+++ b/libs/shared/lib/sidebar/index.tsx
@@ -35,7 +35,7 @@ export function Sidebar({ onTab, tab }: { onTab: (tab: SideNavTab) => void; tab:
onTab(t.name);
}
}}
- additionalClasses={tab === t.name ? 'bg-secondary-100' : ''}
+ className={tab === t.name ? 'bg-secondary-100' : ''}
/>
</TooltipTrigger>
<TooltipContent side={'right'}>{t.name}</TooltipContent>
diff --git a/libs/shared/lib/vis/components/bar.tsx b/libs/shared/lib/vis/components/bar.tsx
index 9cddc5594..269d25f57 100644
--- a/libs/shared/lib/vis/components/bar.tsx
+++ b/libs/shared/lib/vis/components/bar.tsx
@@ -39,7 +39,7 @@ export default function VisualizationBar({ manager, fullSize }: Props) {
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
- <Button type="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
+ <Button as={'a'} type="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
</TooltipTrigger>
<TooltipContent side={'top'}>
<p>Add visualization</p>
diff --git a/libs/shared/lib/vis/components/config/panel.tsx b/libs/shared/lib/vis/components/config/panel.tsx
index 22adadfbb..5aae132cd 100644
--- a/libs/shared/lib/vis/components/config/panel.tsx
+++ b/libs/shared/lib/vis/components/config/panel.tsx
@@ -52,7 +52,7 @@ export function ConfigPanel({ manager }: Props) {
'_blank',
)
}
- additionalClasses="block w-full"
+ className="block w-full"
/>
</div>
)}
--
GitLab