Add FileInput buttonText prop

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

@@ -3,6 +3,7 @@
 
 @import "../../common/variables";
 @import "../button/common";
+@import "../../common/mixins";
 
 /*
 File input
@@ -94,6 +95,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;
@@ -102,7 +104,7 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) /
     width: $file-input-button-width;
     text-align: center;
     line-height: $pt-button-height-small;
-    content: "Browse";
+    content: attr(#{$ns}-button-text);
   }
 
   &:hover::after {
@@ -143,6 +145,11 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) /
   }
 }
 
+#blueprint-documentation [data-example-id="file-input"] .#{$ns}-file-upload-input::after {
+  content: "Browse";
+}
+
+
 // hack to force the button shadow to display since
 // it doesn't render correct via the `pt-button` mixin
 // stylelint-disable-next-line

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

@@ -3,6 +3,9 @@
 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
 
 This component is a lightweight wrapper around the underlying `<label>` element

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)
@@ -76,13 +82,27 @@ export class FileInput extends React.PureComponent<IFileInputProps, {}> {
     public static displayName = `${DISPLAYNAME_PREFIX}.FileInput`;
 
     public static defaultProps: IFileInputProps = {
+        buttonText: "Browse",
         hasSelection: false,
         inputProps: {},
         text: "Choose file...",
     };
 
+    private input: HTMLSpanElement | null = null;
+
+    public componentDidMount() {
+        this.changeButtonText(this.props.buttonText);
+    }
+
+    public componentWillReceiveProps(newProps: IFileInputProps) {
+        if (this.props.buttonText !== newProps.buttonText) {
+            this.changeButtonText(newProps.buttonText);
+        }
+    }
+
     public render() {
         const {
+            buttonText,
             className,
             disabled,
             fill,
@@ -108,11 +128,26 @@ export class FileInput extends React.PureComponent<IFileInputProps, {}> {
         return (
             <label {...htmlProps} className={rootClasses}>
                 <input {...inputProps} onChange={this.handleInputChange} type="file" disabled={disabled} />
-                <span className={Classes.FILE_UPLOAD_INPUT}>{text}</span>
+                <span ref={this.createRef} className={Classes.FILE_UPLOAD_INPUT}>
+                    {text}
+                </span>
             </label>
         );
     }
 
+    private createRef = (input: HTMLSpanElement | null) => {
+        if (input !== null) {
+            this.input = input;
+        }
+    };
+
+    private changeButtonText = (text: string) => {
+        if (this.input) {
+            const NS = Classes.getClassNamespace();
+            this.input.setAttribute(`${NS}-button-text`, text);
+        }
+    };
+
     private handleInputChange = (e: React.FormEvent<HTMLInputElement>) => {
         Utils.safeInvoke(this.props.onInputChange, e);
         Utils.safeInvoke(this.props.inputProps.onChange, e);

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";