[core] feat(NumericInput, FileInput): add "small" modifier prop (#6071)

Co-authored-by: Timur Misirpashaev <timurm@palantir.com>

packages/core/src/components/forms/_file-input.scss

@@ -16,6 +16,7 @@ Markup:
 
 :disabled - Disabled
 .#{$ns}-large - Larger size
+.#{$ns}-small - Smaller size
 .#{$ns}-fill - Take up full width of parent element
 .#{$ns}-file-input-has-selection - User has made a selection
 
@@ -24,8 +25,12 @@ Styleguide file-input
 
 $file-input-button-width: $pt-grid-size * 7 !default;
 $file-input-button-width-large: $pt-grid-size * 8.5 !default;
+$file-input-button-width-small: $pt-grid-size * 5.5 !default;
 $file-input-button-padding: ($pt-input-height - $pt-button-height-small) * 0.5 !default;
 $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) * 0.5 !default;
+// stylelint-disable max-line-length
+$file-input-button-padding-small: ($pt-input-height-small - $pt-button-height-smaller) * 0.5 !default;
+// stylelint-enable max-line-length
 
 .#{$ns}-file-input {
   cursor: pointer;
@@ -80,6 +85,11 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) *
     height: $pt-input-height-large;
   }
 
+  &.#{$ns}-small,
+  .#{$ns}-small & {
+    height: $pt-input-height-small;
+  }
+
   .#{$ns}-file-upload-input-custom-text::after {
     content: attr(#{$ns}-button-text);
   }
@@ -133,6 +143,18 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) *
     }
   }
 
+  .#{$ns}-small & {
+    @include pt-input-small();
+    padding-right: $file-input-button-width-small + $input-padding-horizontal;
+
+    &::after {
+      @include pt-button-height($pt-button-height-smaller);
+      line-height: $pt-button-height-smaller;
+      margin: $file-input-button-padding-small;
+      width: $file-input-button-width-small;
+    }
+  }
+
   .#{$ns}-dark & {
     @include pt-dark-input();
     color: $pt-dark-text-color-disabled;

packages/core/src/components/forms/_numeric-input.scss

@@ -5,13 +5,17 @@
   // we need a very-specific selector here to override specificicty of selectors defined elsewhere.
   .#{$ns}-button-group.#{$ns}-vertical > .#{$ns}-button {
     // let the buttons shrink to equal heights
-    flex: 1 1 ($pt-button-height * 0.5 - 1);
+    flex: 1 1 ($pt-button-height-small * 0.5 - 1);
     min-height: 0;
     padding: 0;
-    width: $pt-button-height;
+    width: $pt-button-height-small;
   }
 
   &.#{$ns}-large .#{$ns}-button-group.#{$ns}-vertical > .#{$ns}-button {
     width: $pt-button-height-large;
   }
+
+  &.#{$ns}-small .#{$ns}-button-group.#{$ns}-vertical > .#{$ns}-button {
+    width: $pt-button-height-small;
+  }
 }

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

@@ -67,6 +67,11 @@ export interface IFileInputProps extends React.LabelHTMLAttributes<HTMLLabelElem
      */
     onInputChange?: React.FormEventHandler<HTMLInputElement>;
 
+    /**
+     * Whether the file input should appear with small styling.
+     */
+    small?: boolean;
+
     /**
      * The text to display.
      *
@@ -108,6 +113,7 @@ export class FileInput extends AbstractPureComponent2<FileInputProps> {
             inputProps,
             large,
             onInputChange,
+            small,
             text,
             ...htmlProps
         } = this.props;
@@ -119,6 +125,7 @@ export class FileInput extends AbstractPureComponent2<FileInputProps> {
                 [Classes.DISABLED]: disabled,
                 [Classes.FILL]: fill,
                 [Classes.LARGE]: large,
+                [Classes.SMALL]: small,
             },
             className,
         );

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

@@ -144,6 +144,15 @@ export interface INumericInputProps extends InputSharedProps {
      */
     selectAllOnIncrement?: boolean;
 
+    /**
+     * If set to `true`, the input will display with smaller styling.
+     * This is equivalent to setting `Classes.SMALL` via className on the
+     * parent control group and on the child input group.
+     *
+     * @default false
+     */
+    small?: boolean;
+
     /**
      * The increment between successive values when no modifier keys are held.
      *
@@ -218,6 +227,7 @@ export class NumericInput extends AbstractPureComponent2<HTMLInputProps & Numeri
         minorStepSize: 0.1,
         selectAllOnFocus: false,
         selectAllOnIncrement: false,
+        small: false,
         stepSize: 1,
     };
 
@@ -305,8 +315,12 @@ export class NumericInput extends AbstractPureComponent2<HTMLInputProps & Numeri
     private getCurrentValueAsNumber = () => Number(parseStringToStringNumber(this.state.value, this.props.locale));
 
     public render() {
-        const { buttonPosition, className, fill, large } = this.props;
-        const containerClasses = classNames(Classes.NUMERIC_INPUT, { [Classes.LARGE]: large }, className);
+        const { buttonPosition, className, fill, large, small } = this.props;
+        const containerClasses = classNames(
+            Classes.NUMERIC_INPUT,
+            { [Classes.LARGE]: large, [Classes.SMALL]: small },
+            className,
+        );
         const buttons = this.renderButtons();
         return (
             <ControlGroup className={containerClasses} fill={fill}>
@@ -452,6 +466,7 @@ export class NumericInput extends AbstractPureComponent2<HTMLInputProps & Numeri
                 onKeyPress={this.handleInputKeyPress}
                 onPaste={this.handleInputPaste}
                 rightElement={this.props.rightElement}
+                small={this.props.small}
                 value={this.state.value}
             />
         );

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

@@ -15,29 +15,34 @@
 
 import * as React from "react";
 
-import { FileInput, FormGroup, H5, InputGroup } from "@blueprintjs/core";
-import { Example, ExampleProps } from "@blueprintjs/docs-theme";
+import { FileInput, FormGroup, H5, InputGroup, Switch } from "@blueprintjs/core";
+import { Example, ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 
 interface IFileInputExampleState {
     buttonText?: string;
     text?: string;
+    large?: boolean;
+    small?: boolean;
 }
 
 export class FileInputExample extends React.PureComponent<ExampleProps, IFileInputExampleState> {
-    public state: IFileInputExampleState = {};
+    public state: IFileInputExampleState = {
+        large: false,
+        small: false,
+    };
 
     public render() {
-        const { text, buttonText } = this.state;
+        const { text, buttonText, small, large } = this.state;
 
         return (
             <Example options={this.renderOptions()} {...this.props}>
-                <FileInput text={text} buttonText={buttonText} />
+                <FileInput text={text} buttonText={buttonText} small={small} large={large} />
             </Example>
         );
     }
 
     private renderOptions = () => {
-        const { text, buttonText } = this.state;
+        const { text, buttonText, small, large } = this.state;
 
         return (
             <>
@@ -48,6 +53,8 @@ export class FileInputExample extends React.PureComponent<ExampleProps, IFileInp
                 <FormGroup label="Button text">
                     <InputGroup placeholder="Browse" onChange={this.handleButtonTextChange} value={buttonText} />
                 </FormGroup>
+                <Switch label="Large" onChange={this.handleLargeChange} checked={large} />
+                <Switch label="Small" onChange={this.handleSmallChange} checked={small} />
             </>
         );
     };
@@ -59,4 +66,8 @@ export class FileInputExample extends React.PureComponent<ExampleProps, IFileInp
     private handleButtonTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.setState({ buttonText: e.target.value });
     };
+
+    private handleSmallChange = handleBooleanChange(small => this.setState({ small, ...(small && { large: false }) }));
+
+    private handleLargeChange = handleBooleanChange(large => this.setState({ large, ...(large && { small: false }) }));
 }

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

@@ -77,6 +77,7 @@ export class NumericInputBasicExample extends React.PureComponent<ExampleProps,
         minorStepSize: 0.1,
         selectAllOnFocus: false,
         selectAllOnIncrement: false,
+        small: false,
         stepSize: 1,
         value: "",
     };
@@ -99,6 +100,10 @@ export class NumericInputBasicExample extends React.PureComponent<ExampleProps,
         this.setState({ leftIcon: leftIcon ? "dollar" : undefined }),
     );
 
+    private handleSmallChange = handleBooleanChange(small => this.setState({ small, ...(small && { large: false }) }));
+
+    private handleLargeChange = handleBooleanChange(large => this.setState({ large, ...(large && { small: false }) }));
+
     private toggleLeftElement = handleBooleanChange(leftElement =>
         this.setState({
             leftElement: leftElement ? (
@@ -120,8 +125,6 @@ export class NumericInputBasicExample extends React.PureComponent<ExampleProps,
 
     private toggleFullWidth = handleBooleanChange(fill => this.setState({ fill }));
 
-    private toggleLargeSize = handleBooleanChange(large => this.setState({ large }));
-
     private toggleNumericCharsOnly = handleBooleanChange(allowNumericCharactersOnly =>
         this.setState({ allowNumericCharactersOnly }),
     );
@@ -155,14 +158,16 @@ export class NumericInputBasicExample extends React.PureComponent<ExampleProps,
             leftIcon,
             leftElement,
             locale,
+            small,
         } = this.state;
 
         return (
             <>
                 <H5>Props</H5>
                 {this.renderSwitch("Disabled", disabled, this.toggleDisabled)}
                 {this.renderSwitch("Fill", fill, this.toggleFullWidth)}
-                {this.renderSwitch("Large", large, this.toggleLargeSize)}
+                {this.renderSwitch("Large", large, this.handleLargeChange)}
+                {this.renderSwitch("Small", small, this.handleSmallChange)}
                 {this.renderSwitch("Left icon", leftIcon != null, this.toggleLeftIcon)}
                 {this.renderSwitch("Left element", leftElement != null, this.toggleLeftElement)}
                 {this.renderSwitch("Numeric characters only", allowNumericCharactersOnly, this.toggleNumericCharsOnly)}