fix(textarea): fixed the color of disabled textarea values

twilio-labs · May 3, 2021 · 87fc917 · 87fc917
1 parent ebd61de
commit 87fc917
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 0 deletions.
diff --git a/.changeset/itchy-countries-attend.md b/.changeset/itchy-countries-attend.md
@@ -0,0 +1,7 @@
+---
+'@twilio-paste/input': patch
+'@twilio-paste/textarea': patch
+'@twilio-paste/core': patch
+---
+
+Fix disabled value color in Safari.
diff --git a/packages/paste-core/components/textarea/__tests__/textarea.test.tsx b/packages/paste-core/components/textarea/__tests__/textarea.test.tsx
@@ -1,12 +1,15 @@
 import * as React from 'react';
 import {render} from 'react-dom';
+import {matchers} from 'jest-emotion';
 import {render as testRender, fireEvent} from '@testing-library/react';
 import {Label} from '@twilio-paste/label';
 import {HelpText} from '@twilio-paste/help-text';
 // @ts-ignore typescript doesn't like js imports
 import axe from '../../../../../.jest/axe-helper';
 import {TextArea} from '../src';
 
+expect.extend(matchers);
+
 const NOOP = (): void => {};
 
 const initialProps = {
@@ -35,6 +38,7 @@ describe('TextArea render', () => {
   it('should render as disabled', () => {
     const {getByRole} = testRender(<TextArea {...initialProps} disabled />);
     expect(getByRole('textbox').getAttribute('disabled')).toEqual('');
+    expect(getByRole('textbox')).toHaveStyleRule('-webkit-text-fill-color', 'colorTextWeaker', {target: ':disabled'});
   });
 
   it('should render an id', () => {

diff --git a/packages/paste-core/components/textarea/src/TextArea.tsx b/packages/paste-core/components/textarea/src/TextArea.tsx
@@ -60,6 +60,9 @@ const TextAreaElement = styled(TextareaAutosize)<TextAreaProps>((props) =>
     '&:disabled': {
       color: props.variant === 'inverse' ? 'colorTextInverseWeaker' : 'colorTextWeaker',
       cursor: 'not-allowed',
+      // Fixes value color in Safari
+      '-webkit-text-fill-color': props.variant === 'inverse' ? 'colorTextInverseWeaker' : 'colorTextWeaker',
+      '-webkit-opacity': '1',
     },
   })
 );

diff --git a/packages/paste-core/components/textarea/stories/textarea.stories.tsx b/packages/paste-core/components/textarea/stories/textarea.stories.tsx
@@ -197,6 +197,7 @@ export const TextareaDisabled = (): React.ReactNode => {
       <TextArea
         id={uid}
         placeholder="Placeholder"
+        value="Disabled text content..."
         disabled
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}
@@ -221,6 +222,7 @@ export const TextareaDisabledInverse = (): React.ReactNode => {
       <TextArea
         id={uid}
         placeholder="Placeholder"
+        value="Disabled text content..."
         disabled
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}