[Core] File input text styling for active selections (#3375)

palantir · Apr 1, 2019 · 2ab9a82 · 2ab9a82 · blueprint-bot · Apr 1, 2019
1 parent 7a5537b
commit 2ab9a82
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/packages/core/src/common/classes.ts b/packages/core/src/common/classes.ts
@@ -152,6 +152,7 @@ export const RADIO = `${NS}-radio`;
 export const SWITCH = `${NS}-switch`;
 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 KEY = `${NS}-key`;

diff --git a/packages/core/src/components/forms/_file-input.scss b/packages/core/src/components/forms/_file-input.scss
@@ -16,6 +16,7 @@ Markup:
 :disabled - Disabled
 .#{$ns}-large - Larger size
 .#{$ns}-fill - Take up full width of parent element
+.#{$ns}-file-input-has-selection - User has made a selection
 
 Styleguide file-input
 */
@@ -39,7 +40,8 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) /
     // unlike other form controls that directly style native elements,
     // pt-file-input wraps and hides the native element for better control over
     // visual styles. to disable, we need to disable the hidden child input, not
-    // the surrounding wrapper. see #689 for gory details.
+    // the surrounding wrapper. @see https://github.com/palantir/blueprint/issues/689
+    // for gory details.
     &:disabled + .#{$ns}-file-upload-input,
     &.#{$ns}-disabled + .#{$ns}-file-upload-input {
       @include pt-input-disabled();
@@ -58,6 +60,16 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) /
     }
   }
 
+  &.#{$ns}-file-input-has-selection {
+    .#{$ns}-file-upload-input {
+      color: $pt-text-color;
+    }
+
+    .#{$ns}-dark & .#{$ns}-file-upload-input {
+      color: $pt-dark-text-color;
+    }
+  }
+
   &.#{$ns}-fill {
     width: 100%;
   }
@@ -76,6 +88,7 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) /
   right: 0;
   left: 0;
   padding-right: $file-input-button-width + $input-padding-horizontal;
+  color: $pt-text-color-disabled;
   user-select: none;
 
   &::after {
@@ -114,7 +127,7 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) /
 
   .#{$ns}-dark & {
     @include pt-dark-input();
-    color: $pt-dark-text-color-muted;
+    color: $pt-dark-text-color-disabled;
 
     &::after {
       @include pt-dark-button();

diff --git a/packages/core/src/components/forms/fileInput.tsx b/packages/core/src/components/forms/fileInput.tsx
@@ -32,6 +32,13 @@ export interface IFileInputProps extends React.LabelHTMLAttributes<HTMLLabelElem
      */
     fill?: boolean;
 
+    /**
+     * Whether the user has made a selection in the input. This will affect the component's
+     * text styling. Make sure to set a non-empty value for the text prop as well.
+     * @default false
+     */
+    hasSelection?: boolean;
+
     /**
      * The props to pass to the child input.
      * `disabled` will be ignored in favor of the top-level prop.
@@ -69,16 +76,28 @@ export class FileInput extends React.PureComponent<IFileInputProps, {}> {
     public static displayName = `${DISPLAYNAME_PREFIX}.FileInput`;
 
     public static defaultProps: IFileInputProps = {
+        hasSelection: false,
         inputProps: {},
         text: "Choose file...",
     };
 
     public render() {
-        const { className, fill, disabled, inputProps, onInputChange, large, text, ...htmlProps } = this.props;
+        const {
+            className,
+            disabled,
+            fill,
+            hasSelection,
+            inputProps,
+            large,
+            onInputChange,
+            text,
+            ...htmlProps
+        } = this.props;
 
         const rootClasses = classNames(
             Classes.FILE_INPUT,
             {
+                [Classes.FILE_INPUT_HAS_SELECTION]: hasSelection,
                 [Classes.DISABLED]: disabled,
                 [Classes.FILL]: fill,
                 [Classes.LARGE]: large,