Dim plus sign on disabled button

[charliepark]

Fixes #2255

With this PR, we're adding a ternary to the CSS display logic; if the button is disabled, we use the -disabled color; otherwise, we use the -secondary color.

In this screenshot, the top button is enabled; the bottom is disabled.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	May 22, 2024 4:21pm

[charliepark]

Because we're now pulling the disabled prop out of the ...props spread on line 16, we need to add it in as an explicit prop in the Button component on 17.

[david-crespo]

Another way would be to not pull it out and use props.disabled on line 19. either way is fine

[david-crespo]

Line 45 is also the same selector, just done as a legacy string. Might as well pull out const addNicButton to use in all three spots.

[david-crespo]

I went to go remind myself why we have to set this color at all instead of relying on the default text color of the button — the problem was that the default text accent looks too bright next to the text when used to fill a nearly solid icon (Eugene has this in the design, we didn't make it up ourselves).

overridden	default

However, the disabled text color for the button is text-accent-disabled anyway, so we can get away with only overriding the color when it's not disabled.

diff --git a/app/ui/lib/CreateButton.tsx b/app/ui/lib/CreateButton.tsx
index 989efeef..7f6e9431 100644
--- a/app/ui/lib/CreateButton.tsx
+++ b/app/ui/lib/CreateButton.tsx
@@ -13,10 +13,12 @@ import { AddRoundel12Icon } from '@oxide/design-system/icons/react'
 
 import { Button, buttonStyle, type ButtonProps } from '~/ui/lib/Button'
 
-export const CreateButton = ({ children, disabled, ...props }: ButtonProps) => (
-  <Button size="sm" className="shrink-0" disabled={disabled} {...props}>
+export const CreateButton = ({ children, ...props }: ButtonProps) => (
+  <Button size="sm" className="shrink-0" {...props}>
     <AddRoundel12Icon
-      className={cn(disabled ? 'text-accent-disabled' : 'text-accent-secondary', 'mr-2')}
+      // dim the icon color from the default (text accent) because it looks a
+      // lot brighter than text, but default disabled color is fine
+      className={cn('mr-2', { 'text-accent-secondary': !props.disabled })}
     />
     {children}
   </Button>