miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(nx-dev): improve button shadow handling in nx-dev (#18870)

Browse Source
This commit is contained in:
Benjamin Cabanes 2023-08-29 04:08:42 -04:00 committed by GitHub
parent 2383f7d92a
commit 53da4e67da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
nx-dev/ui-common/src/lib/button.tsx
View File

@ -20,7 +20,7 @@ const variantStyles: Record<AllowedVariants, string> = {
primary: primary:
'bg-blue-500 dark:bg-sky-500 text-white group-hover:bg-blue-600 dark:group-hover:bg-sky-600 group-focus:ring-2 group-focus:ring-blue-500 dark:group-focus:ring-sky-500 focus:group-ring-offset-2', 'bg-blue-500 dark:bg-sky-500 text-white group-hover:bg-blue-600 dark:group-hover:bg-sky-600 group-focus:ring-2 group-focus:ring-blue-500 dark:group-focus:ring-sky-500 focus:group-ring-offset-2',
secondary: secondary:
'border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 shadow-sm group-hover:bg-slate-50 dark:group-hover:bg-slate-700 group-focus:ring-2 group-focus:ring-blue-500 dark:group-focus:ring-sky-500 focus:ring-offset-2', 'border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 group-hover:bg-slate-50 dark:group-hover:bg-slate-700 group-focus:ring-2 group-focus:ring-blue-500 dark:group-focus:ring-sky-500 focus:ring-offset-2',
}; };
const sizes: Record<AllowedSizes, string> = { const sizes: Record<AllowedSizes, string> = {
large: 'space-x-4 px-4 py-2 text-lg', large: 'space-x-4 px-4 py-2 text-lg',
@ -31,9 +31,9 @@ const sizes: Record<AllowedSizes, string> = {
/** /**
* Shared layout containing specific button styles. * Shared layout containing specific button styles.
*/ */
function getLayoutClassName({ className = '' }: { className: string }): string { function getLayoutClassName(className = ''): string {
return cx( return cx(
'group relative inline-flex rounded border border-transparent shadow-sm font-medium opacity-100 focus:outline-none disabled:opacity-80 transition', 'group relative inline-flex opacity-100 focus:outline-none disabled:opacity-80 disabled:cursor-not-allowed transition',
className className
); );
} }
@ -50,7 +50,7 @@ function ButtonInner({
<> <>
<span <span
className={cx( className={cx(
'flex h-full w-full items-center justify-center whitespace-nowrap rounded-md border border-transparent transition', 'flex h-full w-full items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium shadow-sm transition',
variantStyles[variant], variantStyles[variant],
sizes[size] sizes[size]
)} )}
@ -72,7 +72,7 @@ export function Button({
...props ...props
}: ButtonProps & JSX.IntrinsicElements['button']): JSX.Element { }: ButtonProps & JSX.IntrinsicElements['button']): JSX.Element {
return ( return (
<button {...props} className={getLayoutClassName({ className })}> <button {...props} className={getLayoutClassName(className)}>
<ButtonInner variant={variant} size={size}> <ButtonInner variant={variant} size={size}>
{children} {children}
</ButtonInner> </ButtonInner>
@ -104,7 +104,7 @@ export const ButtonLink = forwardRef(function (
ref={ref} ref={ref}
href={href} href={href}
title={title} title={title}
className={getLayoutClassName({ className })} className={getLayoutClassName(className)}
{...props} {...props}
> >
<ButtonInner variant={variant} size={size}> <ButtonInner variant={variant} size={size}>