3ae5393dd7
* Tweak toaster look and feel * Add icons, tweak plus icon names * Rename commandBarMeta to commandBarConfig * Refactor command bar, add support for icons * Create a tailwind plugin for aria-pressed button state * Remove overlay from behind command bar * Clean up toolbar * Button and other style tweaks * Icon tweaks follow-up: make old icons work with new sizing * Delete unused static icons * More CSS tweaks * Small CSS tweak to project sidebar * Add command bar E2E test * fumpt * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * fix typo in a comment * Fix icon padding (built version only) * Update onboarding and warning banner icons padding * Misc minor style fixes --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
109 lines
3.0 KiB
TypeScript
109 lines
3.0 KiB
TypeScript
import { ActionIcon, ActionIconProps } from './ActionIcon'
|
|
import React from 'react'
|
|
import { paths } from '../Router'
|
|
import { Link } from 'react-router-dom'
|
|
import type { LinkProps } from 'react-router-dom'
|
|
|
|
interface BaseActionButtonProps {
|
|
icon?: ActionIconProps
|
|
className?: string
|
|
}
|
|
|
|
type ActionButtonAsButton = BaseActionButtonProps &
|
|
Omit<
|
|
React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
keyof BaseActionButtonProps
|
|
> & {
|
|
Element: 'button'
|
|
}
|
|
|
|
type ActionButtonAsLink = BaseActionButtonProps &
|
|
Omit<LinkProps, keyof BaseActionButtonProps> & {
|
|
Element: 'link'
|
|
}
|
|
|
|
type ActionButtonAsExternal = BaseActionButtonProps &
|
|
Omit<LinkProps, keyof BaseActionButtonProps> & {
|
|
Element: 'externalLink'
|
|
}
|
|
|
|
type ActionButtonAsElement = BaseActionButtonProps &
|
|
Omit<React.HTMLAttributes<HTMLElement>, keyof BaseActionButtonProps> & {
|
|
Element: React.ComponentType<React.HTMLAttributes<HTMLButtonElement>>
|
|
}
|
|
|
|
type ActionButtonProps =
|
|
| ActionButtonAsButton
|
|
| ActionButtonAsLink
|
|
| ActionButtonAsExternal
|
|
| ActionButtonAsElement
|
|
|
|
export const ActionButton = (props: ActionButtonProps) => {
|
|
const classNames = `action-button m-0 group mono text-sm flex items-center gap-2 rounded-sm border-solid border border-chalkboard-30 hover:border-chalkboard-40 dark:border-chalkboard-70 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 p-[3px] text-chalkboard-100 dark:text-chalkboard-10 ${
|
|
props.icon ? 'pr-2' : 'px-2'
|
|
} ${props.className ? props.className : ''}`
|
|
|
|
switch (props.Element) {
|
|
case 'button': {
|
|
// Note we have to destructure 'className' and 'Element' out of props
|
|
// because we don't want to pass them to the button element;
|
|
// the same is true for the other cases below.
|
|
const { Element, icon, children, className: _className, ...rest } = props
|
|
return (
|
|
<button className={classNames} {...rest}>
|
|
{props.icon && <ActionIcon {...icon} />}
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
case 'link': {
|
|
const {
|
|
Element,
|
|
to,
|
|
icon,
|
|
children,
|
|
className: _className,
|
|
...rest
|
|
} = props
|
|
return (
|
|
<Link to={to || paths.INDEX} className={classNames} {...rest}>
|
|
{icon && <ActionIcon {...icon} />}
|
|
{children}
|
|
</Link>
|
|
)
|
|
}
|
|
case 'externalLink': {
|
|
const {
|
|
Element,
|
|
to,
|
|
icon,
|
|
children,
|
|
className: _className,
|
|
...rest
|
|
} = props
|
|
return (
|
|
<Link
|
|
to={to || paths.INDEX}
|
|
className={classNames}
|
|
{...rest}
|
|
target="_blank"
|
|
>
|
|
{icon && <ActionIcon {...icon} />}
|
|
{children}
|
|
</Link>
|
|
)
|
|
}
|
|
default: {
|
|
const { Element, icon, children, className: _className, ...rest } = props
|
|
if (!Element) throw new Error('Element is required')
|
|
|
|
return (
|
|
<Element className={classNames} {...rest}>
|
|
{props.icon && <ActionIcon {...props.icon} />}
|
|
{children}
|
|
</Element>
|
|
)
|
|
}
|
|
}
|
|
}
|