Add FileInput buttonText prop

packages/core/src/common/classes.ts

@@ -154,6 +154,7 @@ export const SWITCH_INNER_TEXT = `${SWITCH}-inner-text`;
 export const FILE_INPUT = `${NS}-file-input`;
 export const FILE_INPUT_HAS_SELECTION = `${NS}-file-input-has-selection`;
 export const FILE_UPLOAD_INPUT = `${NS}-file-upload-input`;
+export const FILE_UPLOAD_INPUT_CUSTOM_TEXT = `${NS}-file-upload-input-custom-text`;
 
 export const KEY = `${NS}-key`;
 export const KEY_COMBO = `${KEY}-combo`;

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

@@ -3,6 +3,7 @@
 
 @import "../../common/variables";
 @import "../button/common";
+@import "../../common/mixins";
 
 /*
 File input
@@ -78,6 +79,10 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) /
   .#{$ns}-large & {
     height: $pt-input-height-large;
   }
+
+  .#{$ns}-file-upload-input-custom-text::after {
+    content: attr(#{$ns}-button-text);
+  }
 }
 
 .#{$ns}-file-upload-input {
@@ -94,6 +99,7 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) /
   &::after {
     @include pt-button();
     @include pt-button-height($pt-button-height-small);
+    @include overflow-ellipsis();
     position: absolute;
     top: 0;
     right: 0;

packages/core/src/components/forms/file-input.md

@@ -1,7 +1,6 @@
 @# File input
 
-Use the standard `input type="file"` along with a `span` with class `@ns-file-upload-input`.
-Wrap that all in a `label` with class `@ns-file-input`.
+@reactExample FileInputExample
 
 @## Props
 
@@ -26,4 +25,7 @@ you must implement it separately in JS.
 
 @## CSS
 
+Use the standard `input type="file"` along with a `span` with class `@ns-file-upload-input`.
+Wrap that all in a `label` with class `@ns-file-input`.
+
 @css file-input

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

@@ -68,6 +68,12 @@ export interface IFileInputProps extends React.LabelHTMLAttributes<HTMLLabelElem
      * @default "Choose file..."
      */
     text?: React.ReactNode;
+
+    /**
+     * The button text.
+     * @default "Browse"
+     */
+    buttonText?: string;
 }
 
 // TODO: write tests (ignoring for now to get a build passing quickly)
@@ -83,6 +89,7 @@ export class FileInput extends React.PureComponent<IFileInputProps, {}> {
 
     public render() {
         const {
+            buttonText,
             className,
             disabled,
             fill,
@@ -105,10 +112,19 @@ export class FileInput extends React.PureComponent<IFileInputProps, {}> {
             className,
         );
 
+        const NS = Classes.getClassNamespace();
+
+        const uploadProps = {
+            [`${NS}-button-text`]: buttonText,
+            className: classNames(Classes.FILE_UPLOAD_INPUT, {
+                [Classes.FILE_UPLOAD_INPUT_CUSTOM_TEXT]: !!buttonText,
+            }),
+        };
+
         return (
             <label {...htmlProps} className={rootClasses}>
                 <input {...inputProps} onChange={this.handleInputChange} type="file" disabled={disabled} />
-                <span className={Classes.FILE_UPLOAD_INPUT}>{text}</span>
+                <span {...uploadProps}>{text}</span>
             </label>
         );
     }

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

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2019 Palantir Technologies, Inc. All rights reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+
+import { FileInput, FormGroup, H5, InputGroup } from "@blueprintjs/core";
+import { Example, IExampleProps } from "@blueprintjs/docs-theme";
+
+interface IFileInputExampleState {
+    buttonText?: string;
+    text?: string;
+}
+
+export class FileInputExample extends React.PureComponent<IExampleProps, IFileInputExampleState> {
+    public state: IFileInputExampleState = {};
+
+    public render() {
+        const { text, buttonText } = this.state;
+
+        return (
+            <Example options={this.renderOptions()} {...this.props}>
+                <FileInput text={text} buttonText={buttonText} />
+            </Example>
+        );
+    }
+
+    private renderOptions = () => {
+        const { text, buttonText } = this.state;
+
+        return (
+            <>
+                <H5>Props</H5>
+                <FormGroup label="Text">
+                    <InputGroup placeholder="Choose file..." onChange={this.handleTextChange} value={text} />
+                </FormGroup>
+                <FormGroup label="Button text">
+                    <InputGroup placeholder="Browse" onChange={this.handleButtonTextChange} value={buttonText} />
+                </FormGroup>
+            </>
+        );
+    };
+
+    private handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.setState({ text: e.target.value });
+    };
+
+    private handleButtonTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.setState({ buttonText: e.target.value });
+    };
+}

packages/docs-app/src/examples/core-examples/index.ts

@@ -32,6 +32,7 @@ export * from "./dividerExample";
 export * from "./drawerExample";
 export * from "./dropdownMenuExample";
 export * from "./editableTextExample";
+export * from "./fileInputExample";
 export * from "./focusExample";
 export * from "./formGroupExample";
 export * from "./hotkeyPiano";