fix(fuselage): ensure TextAreaInput matches global disabled styling

packages/fuselage/src/components/InputBox/InputBox.styles.scss

@@ -36,6 +36,8 @@
   &.disabled {
     cursor: not-allowed;
     pointer-events: none;
+    // Added background-color to match design system standards for disabled inputs
+    background-color: #{$input-colors-disabled-background-color} !important;
   }
 }
 
@@ -80,6 +82,8 @@
   &:disabled,
   &.disabled {
     color: #{$disabled-color};
+    // Ensures textareas and inputs get the disabled background color
+    background-color: #{$input-colors-disabled-background-color};
   }
 }
 
@@ -248,6 +252,7 @@
   &:disabled,
   &.disabled {
     cursor: not-allowed;
+    background-color: #{$input-colors-disabled-background-color};
   }
 
   @include with-icon-addon-colors(
@@ -311,4 +316,4 @@
 
   @include typography.use-font-scale(p2m);
   @include typography.use-text-ellipsis;
-}
+}

packages/fuselage/src/components/TextAreaInput/TextAreaInput.spec.tsx

@@ -1,9 +1,35 @@
-import { render } from '../../testing';
+import { render, screen } from '../../testing';
 
 import TextAreaInput from './TextAreaInput';
 
 describe('[TextAreaInput]', () => {
-  it('renders without crashing', () => {
-    render(<TextAreaInput />);
-  });
-});
+	it('renders without crashing', () => {
+		render(<TextAreaInput />);
+	});
+
+	it('should have the disabled attribute when the disabled prop is true', () => {
+		render(<TextAreaInput disabled />);
+
+		const textArea = screen.getByRole('textbox');
+
+		expect(textArea).toBeDisabled();
+		expect(textArea).toHaveAttribute('disabled');
+	});
+
+	it('should be read-only when the readOnly prop is true', () => {
+		render(<TextAreaInput readOnly />);
+
+		const textArea = screen.getByRole('textbox');
+
+		// Note: readOnly elements are NOT 'disabled', but they are 'readOnly'
+		expect(textArea).not.toBeDisabled();
+		expect(textArea).toHaveAttribute('readonly');
+	});
+
+	it('should render an addon when provided', () => {
+		render(<TextAreaInput addon={<span data-testid='addon'>icon</span>} />);
+
+		const addon = screen.getByTestId('addon');
+		expect(addon).toBeInTheDocument();
+	});
+});