[core] feat(InputGroup): support read-only modifier

packages/core/src/common/classes.ts

@@ -41,6 +41,7 @@ export const LOADING = `${NS}-loading`;
 export const MINIMAL = `${NS}-minimal`;
 export const OUTLINED = `${NS}-outlined`;
 export const MULTILINE = `${NS}-multiline`;
+export const READ_ONLY = `${NS}-read-only`;
 export const ROUND = `${NS}-round`;
 export const SELECTED = `${NS}-selected`;
 export const SMALL = `${NS}-small`;

packages/core/src/components/forms/inputGroup.tsx

@@ -57,7 +57,8 @@ export interface IInputGroupProps
     asyncControl?: boolean;
 
     /**
-     * Whether the input is non-interactive.
+     * Whether the input is disabled.
+     *
      * Note that `rightElement` must be disabled separately; this prop will not affect it.
      *
      * @default false
@@ -73,8 +74,8 @@ export interface IInputGroupProps
     inputRef?: React.Ref<HTMLInputElement>;
 
     /**
-     * Element to render on the left side of input.  This prop is mutually exclusive
-     * with `leftIcon`.
+     * Element to render on the left side of input.
+     * This prop is mutually exclusive with `leftIcon`.
      */
     leftElement?: JSX.Element;
 
@@ -94,6 +95,16 @@ export interface IInputGroupProps
     /** Placeholder text in the absence of any value. */
     placeholder?: string;
 
+    /**
+     * Whether the input is read-only.
+     *
+     * Note that `rightElement` must be disabled or made read-only separately;
+     * this prop will not affect it.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+
     /**
      * Element to render on right side of input.
      * For best results, use a minimal button, tag, or small spinner.
@@ -184,6 +195,7 @@ export class InputGroup extends AbstractPureComponent2<InputGroupProps2, IInputG
             inputRef,
             intent,
             large,
+            readOnly,
             round,
             small,
             tagName = "div",
@@ -193,6 +205,7 @@ export class InputGroup extends AbstractPureComponent2<InputGroupProps2, IInputG
             Classes.intentClass(intent),
             {
                 [Classes.DISABLED]: disabled,
+                [Classes.READ_ONLY]: readOnly,
                 [Classes.FILL]: fill,
                 [Classes.LARGE]: large,
                 [Classes.SMALL]: small,

packages/docs-app/src/examples/core-examples/inputGroupExample.tsx

@@ -34,6 +34,7 @@ import { Popover2, Tooltip2 } from "@blueprintjs/popover2";
 
 export interface IInputGroupExampleState {
     disabled: boolean;
+    readOnly: boolean;
     filterValue: string;
     large: boolean;
     small: boolean;
@@ -46,13 +47,16 @@ export class InputGroupExample extends React.PureComponent<ExampleProps, IInputG
         disabled: false,
         filterValue: "",
         large: false,
+        readOnly: false,
         showPassword: false,
         small: false,
         tagValue: "",
     };
 
     private handleDisabledChange = handleBooleanChange(disabled => this.setState({ disabled }));
 
+    private handleReadOnlyChange = handleBooleanChange(readOnly => this.setState({ readOnly }));
+
     private handleLargeChange = handleBooleanChange(large => this.setState({ large, ...(large && { small: false }) }));
 
     private handleSmallChange = handleBooleanChange(small => this.setState({ small, ...(small && { large: false }) }));
@@ -64,7 +68,7 @@ export class InputGroupExample extends React.PureComponent<ExampleProps, IInputG
     private handleTagChange = handleStringChange(tagValue => this.setState({ tagValue }));
 
     public render() {
-        const { disabled, filterValue, large, small, showPassword, tagValue } = this.state;
+        const { disabled, filterValue, large, readOnly, small, showPassword, tagValue } = this.state;
 
         const maybeSpinner = filterValue ? <Spinner size={IconSize.STANDARD} /> : undefined;
 
@@ -109,6 +113,7 @@ export class InputGroupExample extends React.PureComponent<ExampleProps, IInputG
                         leftIcon="filter"
                         onChange={this.handleFilterChange}
                         placeholder="Filter histogram..."
+                        readOnly={readOnly}
                         rightElement={maybeSpinner}
                         small={small}
                         value={filterValue}
@@ -118,6 +123,7 @@ export class InputGroupExample extends React.PureComponent<ExampleProps, IInputG
                     disabled={disabled}
                     large={large}
                     placeholder="Enter your password..."
+                    readOnly={readOnly}
                     rightElement={lockButton}
                     small={small}
                     type={showPassword ? "text" : "password"}
@@ -128,6 +134,7 @@ export class InputGroupExample extends React.PureComponent<ExampleProps, IInputG
                     leftElement={<Icon icon="tag" />}
                     onChange={this.handleTagChange}
                     placeholder="Find tags"
+                    readOnly={readOnly}
                     rightElement={resultsTag}
                     small={small}
                     value={tagValue}
@@ -136,6 +143,7 @@ export class InputGroupExample extends React.PureComponent<ExampleProps, IInputG
                     disabled={disabled}
                     large={large}
                     placeholder="Add people or groups..."
+                    readOnly={readOnly}
                     rightElement={permissionsMenu}
                     small={small}
                 />
@@ -144,11 +152,12 @@ export class InputGroupExample extends React.PureComponent<ExampleProps, IInputG
     }
 
     private renderOptions() {
-        const { disabled, large, small } = this.state;
+        const { disabled, readOnly, large, small } = this.state;
         return (
             <>
                 <H5>Props</H5>
                 <Switch label="Disabled" onChange={this.handleDisabledChange} checked={disabled} />
+                <Switch label="Read-only" onChange={this.handleReadOnlyChange} checked={readOnly} />
                 <Switch label="Large" onChange={this.handleLargeChange} checked={large} />
                 <Switch label="Small" onChange={this.handleSmallChange} checked={small} />
             </>