Browse Source

Fix UI inconsistencies

Update button colors, as well as cursor for menumultiselect.
master
TheoryOfNekomata 1 year ago
parent
commit
3e48a1cdcd
3 changed files with 13 additions and 9 deletions
  1. +3
    -3
      categories/action/react/src/components/ActionButton/index.tsx
  2. +1
    -1
      categories/multichoice/react/src/components/MenuMultiSelect/index.tsx
  3. +9
    -5
      categories/navigation/react/src/components/LinkButton/index.tsx

+ 3
- 3
categories/action/react/src/components/ActionButton/index.tsx View File

@@ -87,9 +87,9 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
'pr-2': compact || menuItem, 'pr-2': compact || menuItem,
}, },
{ {
'border-2 border-primary disabled:border-primary focus:border-secondary active:border-tertiary': variant !== 'bare',
'bg-negative text-primary disabled:text-primary focus:text-secondary active:text-tertiary': variant !== 'filled',
'bg-primary text-negative disabled:bg-primary focus:bg-secondary active:bg-tertiary': variant === 'filled',
'border-2 border-primary focus:border-secondary active:border-tertiary disabled:border-primary': variant !== 'bare',
'bg-negative text-primary focus:text-secondary active:text-tertiary disabled:text-primary': variant !== 'filled',
'bg-primary text-negative focus:bg-secondary active:bg-tertiary focus:text-negative active:text-negative disabled:bg-primary': variant === 'filled',
}, },
{ {
'h-10': size === 'small', 'h-10': size === 'small',


+ 1
- 1
categories/multichoice/react/src/components/MenuMultiSelect/index.tsx View File

@@ -96,7 +96,7 @@ export const MenuMultiSelect = React.forwardRef<
height: startingHeight, height: startingHeight,
}} }}
className={clsx( className={clsx(
'bg-negative rounded-inherit w-full peer block overflow-auto font-inherit',
'bg-negative rounded-inherit w-full peer block overflow-auto font-inherit cursor-pointer',
'focus:outline-0', 'focus:outline-0',
'disabled:opacity-50 disabled:cursor-not-allowed', 'disabled:opacity-50 disabled:cursor-not-allowed',
{ {


+ 9
- 5
categories/navigation/react/src/components/LinkButton/index.tsx View File

@@ -29,20 +29,24 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
block = false, block = false,
component: EnabledComponent = 'a', component: EnabledComponent = 'a',
disabled = false, disabled = false,
href,
...etcProps ...etcProps
}, },
forwardedRef, forwardedRef,
) => { ) => {
const Component = disabled ? 'span' : EnabledComponent;
const Component = disabled ? 'button' : EnabledComponent;
return ( return (
<Component <Component
{...etcProps} {...etcProps}
href={disabled ? undefined : href}
type={disabled ? 'button' : undefined}
ref={forwardedRef} ref={forwardedRef}
disabled={disabled || undefined}
className={clsx( className={clsx(
'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none no-underline m-0', 'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none no-underline m-0',
'focus:outline-0 focus:ring-4', 'focus:outline-0 focus:ring-4',
'active:ring-tertiary/50', 'active:ring-tertiary/50',
disabled && 'opacity-50 cursor-not-allowed',
'disabled:opacity-50 disabled:cursor-not-allowed',
{ {
'flex w-full': block, 'flex w-full': block,
'inline-flex max-w-full align-middle': !block, 'inline-flex max-w-full align-middle': !block,
@@ -54,9 +58,9 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
'pr-2': compact || menuItem, 'pr-2': compact || menuItem,
}, },
{ {
'border-2 border-primary focus:border-secondary active:border-tertiary': variant !== 'bare',
'bg-negative text-primary focus:text-secondary active:text-tertiary': variant !== 'filled',
'bg-primary text-negative focus:bg-secondary active:bg-tertiary focus:text-negative active:text-negative': variant === 'filled',
'border-2 border-primary focus:border-secondary active:border-tertiary disabled:border-primary': variant !== 'bare',
'bg-negative text-primary focus:text-secondary active:text-tertiary disabled:text-primary': variant !== 'filled',
'bg-primary text-negative focus:bg-secondary active:bg-tertiary focus:text-negative active:text-negative disabled:bg-primary': variant === 'filled',
}, },
{ {
'h-10': size === 'small', 'h-10': size === 'small',


Loading…
Cancel
Save