feat: add Anchor props to ButtonBase

[greatgitsby]

for commaai/connect#517

https://docs.solidjs.com/concepts/control-flow/dynamic

[github-actions]

Changes:

path	lines	diff
./components/material/ButtonBase.tsx	10	-24

Total lines: 4505 (-24)

[github-actions]

deployed preview: https://526.connect-d5y.pages.dev

Welcome to connect! Make sure to:

• read the contributing guidelines
• mark your PR as a draft until it's ready to review
• post the preview on Discord; feedback from users will speedup the PR review

Mobile

Desktop

[incognitojam]

I wonder whether TypeScript would still be able to autocomplete props if we changed type ButtonBaseProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & { ... } to also include JSX.AnchorHTMLAttributes and discriminate on whether href is supplied

EDIT: seems a bit difficult since the <Show> does not narrow the types in JSX

[greatgitsby]

i had a solution using TypeScript's typing system:

export type ButtonBaseProps<T> = T extends {
  href: string
}
  ? JSX.AnchorHTMLAttributes<HTMLAnchorElement> & {
      onClick?: (e: MouseEvent) => void
      activeClass?: string
    }
  : JSX.ButtonHTMLAttributes<HTMLButtonElement>

but yours is even more red! red diff wins!

[incognitojam]

Somehow this works which is pretty cool 🙂