From df7e74afb9d3e56e23d46b3eccd6caed965032b2 Mon Sep 17 00:00:00 2001
From: _0Steven <42909981+00-Steven@users.noreply.github.com>
Date: Fri, 1 Nov 2024 00:29:57 +0100
Subject: [PATCH] Makes input buttons gray out when disabled, instead of solely
 disabling the input part you get after clicking. (#87588)

## About The Pull Request

While fiddling with NTNRC netadmin mode, I noticed that while renaming
is blocked on `strong = TRUE` channels like `#cargobus`, it doesn't gray
out the button like for deleting the channel.
Instead, clicking it still opens the input menu!... But that part _is_
disabled, thus being just an uninteractable black bar.

So in this pr we just make input buttons' `onClick` not work if
`disabled`, and apply `Button--disabled` to itself if so.
## Why It's Good For The Game

Grayed out button is much better than uninteractable black bar,
especially when normal disabled buttons are _also_ grayed out.
## Changelog
:cl:
fix: NTNRC "rename channel" button is now grayed out when unusable.
fix: Genetics console "create advanced injector" button is now grayed
out when unusable.
/:cl:
---
 tgui/docs/component-reference.md         | 1 +
 tgui/packages/tgui/components/Button.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/tgui/docs/component-reference.md b/tgui/docs/component-reference.md
index 3e085d72084..dd57bf8047f 100644
--- a/tgui/docs/component-reference.md
+++ b/tgui/docs/component-reference.md
@@ -256,6 +256,7 @@ commit, while escape cancels.
 
 - See inherited props: [Box](#box)
 - `fluid`: fill available horizontal space
+- `disabled: boolean` - Disables and greys out the button.
 - `onCommit: (e, value) => void`: function that is called after the user
   defocuses the input or presses enter
 - `currentValue: string`: default string to display when the input is shown
diff --git a/tgui/packages/tgui/components/Button.tsx b/tgui/packages/tgui/components/Button.tsx
index 82493ce6edf..86e9e26cc48 100644
--- a/tgui/packages/tgui/components/Button.tsx
+++ b/tgui/packages/tgui/components/Button.tsx
@@ -315,10 +315,15 @@ const ButtonInput = (props: InputProps) => {
       className={classes([
         'Button',
         fluid && 'Button--fluid',
+        disabled && 'Button--disabled',
         'Button--color--' + color,
       ])}
       {...rest}
-      onClick={() => setInInput(true)}
+      onClick={() => {
+        if (!disabled) {
+          setInInput(true);
+        }
+      }}
     >
       {icon && <Icon name={icon} rotation={iconRotation} spin={iconSpin} />}
       <div>{toDisplay}</div>