Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v4] [core] feat: update input borders and separate buttons #5055

Merged
merged 7 commits into from
Dec 2, 2021
Merged

[v4] [core] feat: update input borders and separate buttons #5055

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1d18572
Move input styles out of blueprint.scss (now built-in)
johnly13 Dec 1, 2021
0dbb11a
Add gap between control group components
johnly13 Dec 1, 2021
f73326b
Remove redundant margin-right in numeric-input
johnly13 Dec 1, 2021
bf9a15c
Remove gap between numeric input buttons
johnly13 Dec 1, 2021
2a6ab33
Fix lint and use instead of rgb values
johnly13 Dec 2, 2021
6fb7d68
Add TagInputExample and fix TagInput active borders
johnly13 Dec 2, 2021
f9efb2e
Update time picker intent focus colors
johnly13 Dec 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 1 addition & 43 deletions packages/core/src/blueprint.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,6 @@ $dark-control-background-color-active: linear-gradient(0deg, rgba($white, 0.1),
$input-placeholder-color: $gray1;
$dark-input-placeholder-color: $gray4;

// Input variables and overrides
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved all of these overrides + styles to components/forms/*

$dark-input-intent-box-shadow-colors: (
"primary": $blue4,
"success": $green4,
"warning": $orange4,
"danger" : $red4,
);
$dark-input-shadow-color-focus: $blue4;

// Slider variable overrides
$button-box-shadow-overlay:
0 0 0 1px rgba($black, 0.5),
Expand Down Expand Up @@ -300,40 +291,7 @@ table.#{$ns}-html-table {
}
}

// Contrast for inputs
.#{$ns}-input {
// Use intent-styled box-shadows for default intent
box-shadow: input-transition-shadow($input-shadow-color-focus),
inset border-shadow(1, $gray2),
$pt-input-box-shadow;

&:focus {
box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
}

.#{$ns}-dark & {
box-shadow: dark-input-transition-shadow($dark-input-shadow-color-focus),
inset border-shadow(1, $gray3),
$pt-dark-input-box-shadow;

&:focus {
box-shadow: dark-input-transition-shadow($dark-input-shadow-color-focus, true),
$pt-dark-input-box-shadow;
}
}

&:disabled {
box-shadow: none;
}
}

@each $intent, $color in $dark-input-intent-box-shadow-colors {
&.#{$ns}-intent-#{$intent} {
.#{$ns}-input {
@include pt-dark-input-intent($color);
}
}
}
// Contrast for inputs - no overrides necessary, modern colors are now built-in

// Contrast for menus - no overrides necessary, modern colors are now built-in

Expand Down
19 changes: 15 additions & 4 deletions packages/core/src/common/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,18 +117,29 @@ $pt-transition-duration: 100ms !default;

// Light theme styles

$pt-input-box-shadow: inset border-shadow(0.15),
inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
$pt-input-box-shadow: inset 0 1px 1px rgba($black, 0.5),
inset 0 1px 0 rgba($black, 0.2),
inset -1px 0 0 rgba($black, 0.2),
inset 0 -1px 0 rgba($black, 0.2),
inset 1px 0 0 rgba($black, 0.2) !default;

$pt-dialog-box-shadow: $pt-elevation-shadow-4 !default;
$pt-popover-box-shadow: $pt-elevation-shadow-3 !default;
$pt-tooltip-box-shadow: $pt-popover-box-shadow !default;

// Dark theme styles

$pt-dark-input-box-shadow: inset border-shadow(0.3),
inset 0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity) !default;
$pt-dark-input-box-shadow: inset 0 1px 0 0 rgba($black, 0.6),
inset -1px 0 0 rgba($black, 0.6),
inset 1px 0 0 rgba($black, 0.6),
inset 0 -1px 0 0 $gray3 !default;

$pt-dark-dialog-box-shadow: $pt-dark-elevation-shadow-4 !default;
$pt-dark-popover-box-shadow: $pt-dark-elevation-shadow-3 !default;
$pt-dark-tooltip-box-shadow: $pt-dark-popover-box-shadow !default;
$pt-dark-input-intent-box-shadow-colors: (
"primary": $blue4,
"success": $green4,
"warning": $orange4,
"danger" : $red4,
) !default;
20 changes: 0 additions & 20 deletions packages/core/src/components/button/_button-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,24 +217,4 @@ Styleguide button-group
&.#{$ns}-align-left .#{$ns}-button {
text-align: left;
}

.#{$ns}-dark & {
// support wrapping buttons in a Blueprint.Tooltip, which adds a wrapper element
// in dark theme, we adjust the spacing between buttons for best visual results
&:not(.#{$ns}-minimal) {
// deeply nested selector necessary to target the appropriate popover
// wrapper, yet ensure we only style buttons within the target.
> .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
> .#{$ns}-button:not(:last-child) {
margin-right: $button-border-width;
}
}

&.#{$ns}-vertical {
> .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
> .#{$ns}-button:not(:last-child) {
margin-bottom: $button-border-width;
}
}
}
}
15 changes: 7 additions & 8 deletions packages/core/src/components/forms/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ $dark-input-color-disabled: $dark-button-color-disabled !default;
$dark-input-placeholder-color: $pt-dark-text-color-disabled !default;
$dark-input-background-color: rgba($black, 0.3) !default;
$dark-input-background-color-disabled: rgba($dark-gray5, 0.5) !default;
$dark-input-shadow-color-focus: $pt-intent-primary !default;
$dark-input-shadow-color-focus: $blue4 !default;

$control-indicator-size: $pt-icon-size-standard !default;
$control-indicator-size-large: $pt-icon-size-large !default;
Expand Down Expand Up @@ -59,8 +59,8 @@ $control-group-stack: (
@function input-transition-shadow($color: $input-shadow-color-focus, $focus: false) {
@if $focus {
@return
border-shadow(1, $color, 1px),
border-shadow(0.3, $color, 3px);
inset border-shadow(1, $color, 1px),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add inset focus border for light theme and reduce outer border to 2px
Screen Shot 2021-12-01 at 16 37 54

border-shadow(0.3, $color, 2px);
} @else {
@return
border-shadow(0, $color, 0),
Expand All @@ -71,9 +71,9 @@ $control-group-stack: (
@function dark-input-transition-shadow($color: $dark-input-shadow-color-focus, $focus: false) {
@if $focus {
@return
border-shadow(1, $color, 1px),
border-shadow(1, $color, 1px), // duplicating to minimize browser antialiasing in dark
border-shadow(0.3, $color, 3px);
inset border-shadow(1, $color, 1px),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add inset focus border for dark theme and reduce outer border to 2px
Screen Shot 2021-12-01 at 16 38 17

inset border-shadow(1, $color, 1px), // duplicating to minimize browser antialiasing in dark
border-shadow(0.3, $color, 2px);
} @else {
@return
border-shadow(0, $color, 0),
Expand Down Expand Up @@ -188,8 +188,7 @@ $control-group-stack: (
color: $dark-input-color;

&:focus {
box-shadow: dark-input-transition-shadow($dark-input-shadow-color-focus, true),
$pt-dark-input-box-shadow;
box-shadow: dark-input-transition-shadow($dark-input-shadow-color-focus, true);
}

&[readonly] {
Expand Down
69 changes: 4 additions & 65 deletions packages/core/src/components/forms/_control-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,12 +91,9 @@ Styleguide control-group
}

.#{$ns}-input {
// inherit radius since it's most likely to be zero
border-radius: inherit;
z-index: index($control-group-stack, "input-default");

&:focus {
border-radius: $pt-border-radius;
z-index: index($control-group-stack, "input-focus");
}

Expand Down Expand Up @@ -127,8 +124,6 @@ Styleguide control-group
.#{$ns}-html-select select,
.#{$ns}-select select {
@include new-render-layer();
// inherit radius since it's most likely to be zero
border-radius: inherit;
z-index: index($control-group-stack, "button-default");

&:focus {
Expand Down Expand Up @@ -195,57 +190,10 @@ Styleguide control-group
z-index: index($control-group-stack, "button-focus");
}

// have consecutive elements share a border
&:not(.#{$ns}-vertical) {
> *:not(.#{$ns}-divider) {
margin-right: -$button-border-width;
> :not(:last-child) {
margin-right: 2px;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

detach buttons from input
Screen Shot 2021-12-01 at 16 39 46

with focus:
Screen Shot 2021-12-01 at 16 39 58

}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed all logic for removing borders between consecutive components

> .#{$ns}-divider:not(:first-child) {
margin-left: $divider-margin + $button-border-width;
}

.#{$ns}-dark & {
> *:not(.#{$ns}-divider) {
margin-right: 0;
}


// consecutive buttons within a button group look okay out of the box, but
// we need need to make a small correction for non-grouped buttons. this
// replicates what's already done in dark theme button groups.
> .#{$ns}-button + .#{$ns}-button {
margin-left: $button-border-width;
}
}
}

// Add border radius inheritance to support components wrapped in a popover
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed all logic to unround border-radius for consecutive components

.#{$ns}-popover-wrapper,
.#{$ns}-popover-target {
border-radius: inherit;
}

// round the left corners of the left-most element
> :first-child {
border-radius: $pt-border-radius 0 0 $pt-border-radius;
}

// round the right corners of the right-most element
> :last-child {
border-radius: 0 $pt-border-radius $pt-border-radius 0;
margin-right: 0;
}

// round all the corners of the only child element
> :only-child {
border-radius: $pt-border-radius;
margin-right: 0;
}

// bring back border radius on these buttons
.#{$ns}-input-group .#{$ns}-button {
border-radius: $pt-border-radius;
}

// special handling of numeric input, which is a nested control group itself
Expand Down Expand Up @@ -307,17 +255,8 @@ Styleguide control-group
&.#{$ns}-vertical {
flex-direction: column;

> * {
margin-top: -$button-border-width;
}

> :first-child {
border-radius: $pt-border-radius $pt-border-radius 0 0;
margin-top: 0;
}

> :last-child {
border-radius: 0 0 $pt-border-radius $pt-border-radius;
> :not(:last-child) {
margin-bottom: 2px;
}
}
}
4 changes: 4 additions & 0 deletions packages/core/src/components/forms/_input-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,10 @@ $input-button-height-small: $pt-button-height-smaller !default;
&.#{$ns}-intent-#{$intent} {
.#{$ns}-input {
@include pt-input-intent($color);

.#{$ns}-dark & {
@include pt-dark-input-intent(map-get($pt-dark-input-intent-box-shadow-colors, $intent));
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use of $color4 for dark mode intent input within input group moved to here
Screen Shot 2021-12-01 at 16 41 41

}
}

> .#{$ns}-icon {
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/components/forms/_input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ Styleguide input
@include pt-input-intent($color);

.#{$ns}-dark & {
@include pt-dark-input-intent($color);
@include pt-dark-input-intent(map-get($pt-dark-input-intent-box-shadow-colors, $intent));
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as above but for non-input group dark inputs

}
}
}
Expand Down
22 changes: 0 additions & 22 deletions packages/core/src/components/forms/_numeric-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,13 @@
@import "./common";

.#{$ns}-numeric-input {

// 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 / 2 - 1);
min-height: 0;
padding: 0;
width: $pt-button-height;

&:first-child {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed all logic to unround border-radius for consecutive components in numeric input

border-radius: 0 $pt-border-radius 0 0;
}

&:last-child {
border-radius: 0 0 $pt-border-radius 0;
}
}

// fix button border radius when the buttons are on the left
.#{$ns}-button-group.#{$ns}-vertical {
&:first-child > .#{$ns}-button {
&:first-child {
border-radius: $pt-border-radius 0 0 0;
}

&:last-child {
border-radius: 0 0 0 $pt-border-radius;
}
}
}

&.#{$ns}-large .#{$ns}-button-group.#{$ns}-vertical > .#{$ns}-button {
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/tag-input/_tag-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ $tag-input-icon-padding-large: ($pt-input-height-large - $pt-icon-size-large) /
background-color: $input-background-color;
box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;

@each $intent, $color in $pt-intent-text-colors {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixes the colors for tag input active borders
Screen Shot 2021-12-02 at 16 20 41

@each $intent, $color in $pt-intent-colors {
&.#{$ns}-intent-#{$intent} {
box-shadow: input-transition-shadow($color, true), $input-box-shadow-focus;
}
Expand All @@ -138,7 +138,7 @@ $tag-input-icon-padding-large: ($pt-input-height-large - $pt-icon-size-large) /
box-shadow: dark-input-transition-shadow($dark-input-shadow-color-focus, true),
$pt-dark-input-box-shadow;

@each $intent, $color in $pt-intent-text-colors {
@each $intent, $color in $pt-dark-input-intent-box-shadow-colors {
&.#{$ns}-intent-#{$intent} {
box-shadow: input-transition-shadow($color, true), $pt-dark-input-box-shadow;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/datetime/src/_timepicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ $timepicker-control-width: $pt-grid-size * 3.3 !default;
@include pt-input-intent($color);

.#{$ns}-dark & {
@include pt-dark-input-intent($color);
@include pt-dark-input-intent(map-get($pt-dark-input-intent-box-shadow-colors, $intent));
}
}
}
Expand Down
2 changes: 2 additions & 0 deletions packages/demo-app/src/examples/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import { SwitchExample } from "./SwitchExample";
import { TableExample } from "./TableExample";
import { TabsExample } from "./TabsExample";
import { TagExample } from "./TagExample";
import { TagInputExample } from "./TagInputExample";
import { TextExample } from "./TextExample";
import { ToastExample } from "./ToastExample";
import { TooltipExample } from "./TooltipExample";
Expand Down Expand Up @@ -62,6 +63,7 @@ export class Examples extends React.PureComponent {
<TableExample />
<TabsExample />
<TagExample />
<TagInputExample />
<TextExample />
<ToastExample />
<TooltipExample />
Expand Down
Loading