[core] feat(EditableText): new HTML prop "contentId" (#4935)

packages/core/src/components/editable-text/editableText.tsx

@@ -113,6 +113,9 @@ export interface IEditableTextProps extends IntentProps, Props {
     /** Text value of controlled input. */
     value?: string;
 
+    /** ID attribute to pass to the underlying element that contains the text contents. This allows for referencing via aria attributes */
+    contentId?: string;
+
     /** Callback invoked when user cancels input with the `esc` key. Receives last confirmed value. */
     onCancel?(value: string): void;
 
@@ -204,7 +207,7 @@ export class EditableText extends AbstractPureComponent2<EditableTextProps, IEdi
     }
 
     public render() {
-        const { alwaysRenderInput, disabled, multiline } = this.props;
+        const { alwaysRenderInput, disabled, multiline, contentId } = this.props;
         const value = this.props.value ?? this.state.value;
         const hasValue = value != null && value !== "";
 
@@ -243,11 +246,18 @@ export class EditableText extends AbstractPureComponent2<EditableTextProps, IEdi
         // and size the container element responsively
         const shouldHideContents = alwaysRenderInput && !this.state.isEditing;
 
+        const spanProps: React.HTMLProps<HTMLSpanElement> = contentId != null ? { id: contentId } : {};
+
         return (
             <div className={classes} onFocus={this.handleFocus} tabIndex={tabIndex}>
                 {alwaysRenderInput || this.state.isEditing ? this.renderInput(value) : undefined}
                 {shouldHideContents ? undefined : (
-                    <span className={Classes.EDITABLE_TEXT_CONTENT} ref={this.refHandlers.content} style={contentStyle}>
+                    <span
+                        {...spanProps}
+                        className={Classes.EDITABLE_TEXT_CONTENT}
+                        ref={this.refHandlers.content}
+                        style={contentStyle}
+                    >
                         {hasValue ? value : this.props.placeholder}
                     </span>
                 )}

packages/core/test/editable-text/editableTextTests.tsx

@@ -47,6 +47,11 @@ describe("<EditableText>", () => {
         assert.strictEqual(editable.text(), "placeholder");
     });
 
+    it("passes an ID to the underlying span", () => {
+        const editable = shallow(<EditableText disabled={true} isEditing={true} contentId="my-id" />).find("span");
+        assert.strictEqual(editable.prop("id"), "my-id");
+    });
+
     describe("when editing", () => {
         it('renders <input type="text"> when editing', () => {
             const input = shallow(<EditableText isEditing={true} />).find("input");