From 86c7c9dc78851f47f6964b444a5049d3694d53f5 Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adi.dahiya14@gmail.com>
Date: Fri, 22 Oct 2021 12:18:18 -0400
Subject: [PATCH] [v4] [core] fix(EditableText): do not use disabled text
 colors (#4983)

---
 packages/core/src/blueprint.scss                     | 12 ------------
 .../examples/core-examples/editableTextExample.tsx   |  9 ++++++++-
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/blueprint.scss b/packages/core/src/blueprint.scss
index 5da64e305d..f4bbedb055 100644
--- a/packages/core/src/blueprint.scss
+++ b/packages/core/src/blueprint.scss
@@ -276,18 +276,6 @@ $tree-intent-icon-colors-modern: (
   }
 }
 
-
-// Contrast for disabled editable text
-.#{$ns}-editable-text.#{$ns}-disabled {
-  > .#{$ns}-editable-text-content {
-    color: $pt-text-color-disabled;
-
-    .#{$ns}-dark & {
-      color: $pt-dark-text-color-disabled;
-    }
-  }
-}
-
 // Contrast for HTML tables
 table.#{$ns}-html-table {
   &.#{$ns}-html-table-striped {
diff --git a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx b/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
index 67cccf0a9f..fde4c2bc1c 100644
--- a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
@@ -26,6 +26,7 @@ const INPUT_ID = "EditableTextExample-max-length";
 export interface IEditableTextExampleState {
     alwaysRenderInput?: boolean;
     confirmOnEnterKey?: boolean;
+    disabled?: boolean;
     intent?: Intent;
     maxLength?: number;
     report?: string;
@@ -34,12 +35,15 @@ export interface IEditableTextExampleState {
 
 export class EditableTextExample extends React.PureComponent<IExampleProps, IEditableTextExampleState> {
     public state: IEditableTextExampleState = {
-        alwaysRenderInput: true,
+        alwaysRenderInput: false,
         confirmOnEnterKey: false,
+        disabled: false,
         report: "",
         selectAllOnFocus: false,
     };
 
+    private toggleDisabled = handleBooleanChange((disabled: boolean) => this.setState({ disabled }));
+
     private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
 
     private toggleSelectAll = handleBooleanChange(selectAllOnFocus => this.setState({ selectAllOnFocus }));
@@ -54,6 +58,7 @@ export class EditableTextExample extends React.PureComponent<IExampleProps, IEdi
                 <H1>
                     <EditableText
                         alwaysRenderInput={this.state.alwaysRenderInput}
+                        disabled={this.state.disabled}
                         intent={this.state.intent}
                         maxLength={this.state.maxLength}
                         placeholder="Edit title..."
@@ -62,6 +67,7 @@ export class EditableTextExample extends React.PureComponent<IExampleProps, IEdi
                 </H1>
                 <EditableText
                     alwaysRenderInput={this.state.alwaysRenderInput}
+                    disabled={this.state.disabled}
                     intent={this.state.intent}
                     maxLength={this.state.maxLength}
                     maxLines={12}
@@ -94,6 +100,7 @@ export class EditableTextExample extends React.PureComponent<IExampleProps, IEdi
                         value={this.state.maxLength || ""}
                     />
                 </FormGroup>
+                <Switch checked={this.state.disabled} label="Disabled" onChange={this.toggleDisabled} />
                 <Switch
                     checked={this.state.selectAllOnFocus}
                     label="Select all on focus"