[v4] [core] fix(EditableText): do not use disabled text colors (#4983)

palantir · Oct 22, 2021 · 86c7c9d · 86c7c9d · blueprint-bot · Oct 22, 2021
1 parent 04d29ad
commit 86c7c9d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 13 deletions.
diff --git 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
@@ -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"