From ca20ade2db7c4a7c8c48379a1f618b53274aa5eb Mon Sep 17 00:00:00 2001 From: Timur Misirpashaev Date: Fri, 14 Apr 2023 23:50:10 -0400 Subject: [PATCH 01/10] add small prop to numeric and file inputs --- packages/core/src/components/forms/fileInput.tsx | 7 +++++++ .../core/src/components/forms/numericInput.tsx | 15 +++++++++++++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/forms/fileInput.tsx b/packages/core/src/components/forms/fileInput.tsx index c94e359506..6f7e055a73 100644 --- a/packages/core/src/components/forms/fileInput.tsx +++ b/packages/core/src/components/forms/fileInput.tsx @@ -67,6 +67,11 @@ export interface IFileInputProps extends React.LabelHTMLAttributes; + /** + * Whether the file input should appear with small styling. + */ + small?: boolean; + /** * The text to display. * @@ -108,6 +113,7 @@ export class FileInput extends AbstractPureComponent2 { inputProps, large, onInputChange, + small, text, ...htmlProps } = this.props; @@ -119,6 +125,7 @@ export class FileInput extends AbstractPureComponent2 { [Classes.DISABLED]: disabled, [Classes.FILL]: fill, [Classes.LARGE]: large, + [Classes.SMALL]: small, }, className, ); diff --git a/packages/core/src/components/forms/numericInput.tsx b/packages/core/src/components/forms/numericInput.tsx index 7d9ecfae9e..4e0a1b6253 100644 --- a/packages/core/src/components/forms/numericInput.tsx +++ b/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 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 ( @@ -452,6 +462,7 @@ export class NumericInput extends AbstractPureComponent2 ); From 28e156ae9b92d4c37072d83ec0da443d8ee3df0f Mon Sep 17 00:00:00 2001 From: Timur Misirpashaev Date: Sat, 15 Apr 2023 00:38:45 -0400 Subject: [PATCH 02/10] format --- packages/core/src/components/forms/numericInput.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/forms/numericInput.tsx b/packages/core/src/components/forms/numericInput.tsx index 4e0a1b6253..22e30ee577 100644 --- a/packages/core/src/components/forms/numericInput.tsx +++ b/packages/core/src/components/forms/numericInput.tsx @@ -316,7 +316,11 @@ export class NumericInput extends AbstractPureComponent2 From 1332500a516a2560cac90b1be2f82da7548a5320 Mon Sep 17 00:00:00 2001 From: Timur Misirpashaev Date: Tue, 18 Apr 2023 01:21:58 -0400 Subject: [PATCH 03/10] add examples and modify sass --- .../src/components/forms/_file-input.scss | 20 +++++++++++++++++++ .../src/components/forms/_numeric-input.scss | 8 ++++++-- .../core/src/components/forms/fileInput.tsx | 2 +- 3 files changed, 27 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/forms/_file-input.scss b/packages/core/src/components/forms/_file-input.scss index 5b78e24293..2ae18179d9 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}-small - Smaller size .#{$ns}-fill - Take up full width of parent element .#{$ns}-file-input-has-selection - User has made a selection @@ -26,6 +27,8 @@ $file-input-button-width: $pt-grid-size * 7 !default; $file-input-button-width-large: $pt-grid-size * 8.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; +$file-input-button-width-small: $pt-grid-size * 5.5 !default; +$file-input-button-padding-small: ($pt-input-height-small-$pt-button-height-smaller) * 0.5 !default; .#{$ns}-file-input { cursor: pointer; @@ -80,6 +83,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 +141,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; diff --git a/packages/core/src/components/forms/_numeric-input.scss b/packages/core/src/components/forms/_numeric-input.scss index 35cbe93aab..fff5724355 100644 --- a/packages/core/src/components/forms/_numeric-input.scss +++ b/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; + } } diff --git a/packages/core/src/components/forms/fileInput.tsx b/packages/core/src/components/forms/fileInput.tsx index 6f7e055a73..c6264ca092 100644 --- a/packages/core/src/components/forms/fileInput.tsx +++ b/packages/core/src/components/forms/fileInput.tsx @@ -141,7 +141,7 @@ export class FileInput extends AbstractPureComponent2 { return ( ); From 321df0f691c40af9cc8f5f398b3c2c11e274af6c Mon Sep 17 00:00:00 2001 From: Timur Misirpashaev Date: Tue, 18 Apr 2023 01:23:43 -0400 Subject: [PATCH 04/10] add docs app changes --- .../core-examples/fileInputExample.tsx | 23 ++++++++++++++----- .../numericInputBasicExample.tsx | 11 ++++++--- 2 files changed, 25 insertions(+), 9 deletions(-) diff --git a/packages/docs-app/src/examples/core-examples/fileInputExample.tsx b/packages/docs-app/src/examples/core-examples/fileInputExample.tsx index 133613cb61..444ca60c71 100644 --- a/packages/docs-app/src/examples/core-examples/fileInputExample.tsx +++ b/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, Switch, InputGroup } 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 { - public state: IFileInputExampleState = {}; + public state: IFileInputExampleState = { + small: false, + large: false, + }; public render() { - const { text, buttonText } = this.state; + const { text, buttonText, small, large } = this.state; return ( - + ); } 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 + + ); }; @@ -59,4 +66,8 @@ export class FileInputExample extends React.PureComponent) => { 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 }) })); } diff --git a/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx b/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx index 11ea8bc923..a7059e8331 100644 --- a/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx +++ b/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx @@ -71,6 +71,7 @@ export class NumericInputBasicExample extends React.PureComponent 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({ @@ -120,8 +125,6 @@ export class NumericInputBasicExample extends React.PureComponent this.setState({ fill })); - private toggleLargeSize = handleBooleanChange(large => this.setState({ large })); - private toggleNumericCharsOnly = handleBooleanChange(allowNumericCharactersOnly => this.setState({ allowNumericCharactersOnly }), ); @@ -155,6 +158,7 @@ export class NumericInputBasicExample extends React.PureComponentProps {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)} From 920c40df785cd990aa1db35d17d0aa3c78a9bf5a Mon Sep 17 00:00:00 2001 From: Timur Misirpashaev Date: Tue, 18 Apr 2023 01:24:35 -0400 Subject: [PATCH 05/10] add space back --- packages/core/src/components/forms/fileInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/forms/fileInput.tsx b/packages/core/src/components/forms/fileInput.tsx index c6264ca092..6f7e055a73 100644 --- a/packages/core/src/components/forms/fileInput.tsx +++ b/packages/core/src/components/forms/fileInput.tsx @@ -141,7 +141,7 @@ export class FileInput extends AbstractPureComponent2 { return ( ); From 5a1bbc614d7861ea465af9afbbab96c7cb9cf989 Mon Sep 17 00:00:00 2001 From: Timur Misirpashaev Date: Tue, 18 Apr 2023 01:26:53 -0400 Subject: [PATCH 06/10] fix formatting --- .../docs-app/src/examples/core-examples/fileInputExample.tsx | 2 +- .../src/examples/core-examples/numericInputBasicExample.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/docs-app/src/examples/core-examples/fileInputExample.tsx b/packages/docs-app/src/examples/core-examples/fileInputExample.tsx index 444ca60c71..77e0ac9eb5 100644 --- a/packages/docs-app/src/examples/core-examples/fileInputExample.tsx +++ b/packages/docs-app/src/examples/core-examples/fileInputExample.tsx @@ -36,7 +36,7 @@ export class FileInputExample extends React.PureComponent - + ); } diff --git a/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx b/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx index a7059e8331..9b06d9c2de 100644 --- a/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx +++ b/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx @@ -99,7 +99,7 @@ export class NumericInputBasicExample extends React.PureComponent 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 }) })); @@ -158,7 +158,7 @@ export class NumericInputBasicExample extends React.PureComponent Date: Tue, 18 Apr 2023 01:37:33 -0400 Subject: [PATCH 07/10] lint --- packages/core/src/components/forms/_file-input.scss | 4 +++- .../src/examples/core-examples/fileInputExample.tsx | 8 ++++---- .../examples/core-examples/numericInputBasicExample.tsx | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/core/src/components/forms/_file-input.scss b/packages/core/src/components/forms/_file-input.scss index 2ae18179d9..d5d75d6924 100644 --- a/packages/core/src/components/forms/_file-input.scss +++ b/packages/core/src/components/forms/_file-input.scss @@ -28,7 +28,9 @@ $file-input-button-width-large: $pt-grid-size * 8.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; $file-input-button-width-small: $pt-grid-size * 5.5 !default; -$file-input-button-padding-small: ($pt-input-height-small-$pt-button-height-smaller) * 0.5 !default; + +$pt-input-height-small-difference: $pt-input-height-small - $pt-input-height-smaller; +$file-input-button-padding-small: $pt-input-height-small-difference * 0.5 !default; .#{$ns}-file-input { cursor: pointer; diff --git a/packages/docs-app/src/examples/core-examples/fileInputExample.tsx b/packages/docs-app/src/examples/core-examples/fileInputExample.tsx index 77e0ac9eb5..f1fa503d64 100644 --- a/packages/docs-app/src/examples/core-examples/fileInputExample.tsx +++ b/packages/docs-app/src/examples/core-examples/fileInputExample.tsx @@ -15,7 +15,7 @@ import * as React from "react"; -import { FileInput, FormGroup, H5, Switch, InputGroup } from "@blueprintjs/core"; +import { FileInput, FormGroup, H5, InputGroup, Switch } from "@blueprintjs/core"; import { Example, ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme"; interface IFileInputExampleState { @@ -27,8 +27,8 @@ interface IFileInputExampleState { export class FileInputExample extends React.PureComponent { public state: IFileInputExampleState = { - small: false, large: false, + small: false, }; public render() { @@ -53,8 +53,8 @@ export class FileInputExample extends React.PureComponent - - + + ); }; diff --git a/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx b/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx index 9b06d9c2de..5acd6ddf88 100644 --- a/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx +++ b/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx @@ -71,13 +71,13 @@ export class NumericInputBasicExample extends React.PureComponent Date: Tue, 18 Apr 2023 01:42:41 -0400 Subject: [PATCH 08/10] fix compilation error --- packages/core/src/components/forms/_file-input.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/forms/_file-input.scss b/packages/core/src/components/forms/_file-input.scss index d5d75d6924..aebc5093bf 100644 --- a/packages/core/src/components/forms/_file-input.scss +++ b/packages/core/src/components/forms/_file-input.scss @@ -29,7 +29,7 @@ $file-input-button-padding: ($pt-input-height - $pt-button-height-small) * 0.5 ! $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) * 0.5 !default; $file-input-button-width-small: $pt-grid-size * 5.5 !default; -$pt-input-height-small-difference: $pt-input-height-small - $pt-input-height-smaller; +$pt-input-height-small-difference: $pt-input-height-small - $pt-button-height-smaller; $file-input-button-padding-small: $pt-input-height-small-difference * 0.5 !default; .#{$ns}-file-input { From ecd3c86afbd0d44d9aaf22ddded1dad4367c9247 Mon Sep 17 00:00:00 2001 From: Timur Misirpashaev Date: Tue, 18 Apr 2023 10:31:23 -0400 Subject: [PATCH 09/10] inline and disable max-line-length check --- packages/core/src/components/forms/_file-input.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/forms/_file-input.scss b/packages/core/src/components/forms/_file-input.scss index aebc5093bf..6a4b564771 100644 --- a/packages/core/src/components/forms/_file-input.scss +++ b/packages/core/src/components/forms/_file-input.scss @@ -28,9 +28,9 @@ $file-input-button-width-large: $pt-grid-size * 8.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; $file-input-button-width-small: $pt-grid-size * 5.5 !default; - -$pt-input-height-small-difference: $pt-input-height-small - $pt-button-height-smaller; -$file-input-button-padding-small: $pt-input-height-small-difference * 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; From ef73c6cc5afe72b1fd3dfc87589dedc964fdacf6 Mon Sep 17 00:00:00 2001 From: Timur Misirpashaev Date: Tue, 18 Apr 2023 10:36:20 -0400 Subject: [PATCH 10/10] reorder --- packages/core/src/components/forms/_file-input.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/forms/_file-input.scss b/packages/core/src/components/forms/_file-input.scss index 6a4b564771..8bb06c0694 100644 --- a/packages/core/src/components/forms/_file-input.scss +++ b/packages/core/src/components/forms/_file-input.scss @@ -25,9 +25,9 @@ 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; -$file-input-button-width-small: $pt-grid-size * 5.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