Robin Malfait
0c0601f87a
* update playground examples to use a shared `Button` * expose a `ui-focus-visible` variant * keep track of a `data-headlessui-focus-visible` attribute * do not set the `tabindex` The focus was always set, but the ring wasn't showing up. This was also focusing a ring when the browser decided not the add one. Let's make the browser decide when to show this or not. * update changelog
21 lines
631 B
TypeScript
21 lines
631 B
TypeScript
import { ComponentProps, forwardRef, ReactNode } from 'react'
|
|
|
|
function classNames(...classes: (string | false | undefined | null)[]) {
|
|
return classes.filter(Boolean).join(' ')
|
|
}
|
|
|
|
export let Button = forwardRef<
|
|
HTMLButtonElement,
|
|
ComponentProps<'button'> & { children?: ReactNode }
|
|
>(({ className, ...props }, ref) => (
|
|
<button
|
|
ref={ref}
|
|
type="button"
|
|
className={classNames(
|
|
'ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 flex items-center rounded-md border border-gray-300 bg-white px-2 py-1 ring-gray-500 ring-offset-gray-100 focus:outline-none',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|