From 3bd6896855000be32494328b3edbeaa743a06676 Mon Sep 17 00:00:00 2001 From: Piotr Kwiatkowski Date: Thu, 21 Feb 2019 14:41:35 +0000 Subject: [PATCH 1/3] Matched text color with other input type components --- packages/core/src/components/forms/_file-input.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/forms/_file-input.scss b/packages/core/src/components/forms/_file-input.scss index cce30086e8..acf16ccfb2 100644 --- a/packages/core/src/components/forms/_file-input.scss +++ b/packages/core/src/components/forms/_file-input.scss @@ -76,6 +76,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 +115,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(); From a936e03f3d18ca23560d58ce02bd865ceb5f65cf Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Tue, 26 Mar 2019 18:00:09 -0400 Subject: [PATCH 2/3] [WIP] address self review comments --- packages/core/src/common/classes.ts | 1 + .../src/components/forms/_file-input.scss | 14 ++++++++++++- .../core/src/components/forms/fileInput.tsx | 21 ++++++++++++++++++- 3 files changed, 34 insertions(+), 2 deletions(-) diff --git a/packages/core/src/common/classes.ts b/packages/core/src/common/classes.ts index 730aff545d..9a2aa63d1b 100644 --- a/packages/core/src/common/classes.ts +++ b/packages/core/src/common/classes.ts @@ -142,6 +142,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 index acf16ccfb2..d549ed6355 100644 --- 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(); @@ -129,6 +131,16 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) / @include pt-dark-button-active(); } } + + .#{ns}-file-input-has-selection { + & { + color: $pt-text-color; + } + + &.#{$ns}-dark & { + color: $pt-dark-text-color; + } + } } // hack to force the button shadow to display since diff --git a/packages/core/src/components/forms/fileInput.tsx b/packages/core/src/components/forms/fileInput.tsx index daf05282a7..eab59790bd 100644 --- a/packages/core/src/components/forms/fileInput.tsx +++ b/packages/core/src/components/forms/fileInput.tsx @@ -22,6 +22,13 @@ export interface IFileInputProps extends React.LabelHTMLAttributes { 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, From 7b3443c7401e157b42d2d1a6f75cd80ba77d2408 Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Sun, 31 Mar 2019 19:53:28 -0400 Subject: [PATCH 3/3] Fix scss --- .../src/components/forms/_file-input.scss | 20 +++++++++---------- .../core/src/components/forms/fileInput.tsx | 4 ++-- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/core/src/components/forms/_file-input.scss b/packages/core/src/components/forms/_file-input.scss index d549ed6355..5e32c1c0dd 100644 --- a/packages/core/src/components/forms/_file-input.scss +++ b/packages/core/src/components/forms/_file-input.scss @@ -60,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%; } @@ -131,16 +141,6 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) / @include pt-dark-button-active(); } } - - .#{ns}-file-input-has-selection { - & { - color: $pt-text-color; - } - - &.#{$ns}-dark & { - color: $pt-dark-text-color; - } - } } // hack to force the button shadow to display since diff --git a/packages/core/src/components/forms/fileInput.tsx b/packages/core/src/components/forms/fileInput.tsx index eab59790bd..db11de99d3 100644 --- a/packages/core/src/components/forms/fileInput.tsx +++ b/packages/core/src/components/forms/fileInput.tsx @@ -23,8 +23,8 @@ export interface IFileInputProps extends React.LabelHTMLAttributes