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:
'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:
'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> = {
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.
*/
function getLayoutClassName({ className = '' }: { className: string }): string {
function getLayoutClassName(className = ''): string {
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
);
}
@ -50,7 +50,7 @@ function ButtonInner({
<>
<span
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],
sizes[size]
)}
@ -72,7 +72,7 @@ export function Button({
...props
}: ButtonProps & JSX.IntrinsicElements['button']): JSX.Element {
return (
<button {...props} className={getLayoutClassName({ className })}>
<button {...props} className={getLayoutClassName(className)}>
<ButtonInner variant={variant} size={size}>
{children}
</ButtonInner>
@ -104,7 +104,7 @@ export const ButtonLink = forwardRef(function (
ref={ref}
href={href}
title={title}
className={getLayoutClassName({ className })}
className={getLayoutClassName(className)}
{...props}
>
<ButtonInner variant={variant} size={size}>