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

johnly13 · 2021-12-01T21:35:17Z

Fixes #4989

Changes proposed in this pull request:

Update default borders
Detach buttons for control groups with buttons (e.g. NumericInput)
Inset border focus states

Reviewers should focus on:

Screenshot

johnly13 · 2021-12-01T21:35:46Z

packages/core/src/blueprint.scss

@@ -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


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

johnly13 · 2021-12-01T21:36:32Z

packages/core/src/common/_variables.scss

@@ -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 0px 1px 1px rgba(17, 20, 24, 0.5),


Updated default borders for light theme

I think these should all use $black instead of 17, 20, 24...

Suggested change

$pt-input-box-shadow: inset 0px 1px 1px rgba(17, 20, 24, 0.5),

$pt-input-box-shadow: inset 0px 1px 1px rgba($black, 0.5),

johnly13 · 2021-12-01T21:37:02Z

packages/core/src/common/_variables.scss


 $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(17, 20, 24, 0.6),


Updated default borders for dark theme

blueprint-bot · 2021-12-01T21:37:04Z

Add gap between control group components

Previews: documentation | landing | table | modern colors demo

johnly13 · 2021-12-01T21:38:02Z

packages/core/src/components/forms/_common.scss

@@ -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),


add inset focus border for light theme and reduce outer border to 2px

johnly13 · 2021-12-01T21:38:30Z

packages/core/src/components/forms/_common.scss

-      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),


add inset focus border for dark theme and reduce outer border to 2px

johnly13 · 2021-12-01T21:39:06Z

packages/core/src/components/forms/_control-group.scss

}
-

removed all logic for removing borders between consecutive components

johnly13 · 2021-12-01T21:39:23Z

packages/core/src/components/forms/_control-group.scss

-    }
-  }
-
-  // Add border radius inheritance to support components wrapped in a popover


removed all logic to unround border-radius for consecutive components

johnly13 · 2021-12-01T21:40:16Z

packages/core/src/components/forms/_control-group.scss

-    > *:not(.#{$ns}-divider) {
-      margin-right: -$button-border-width;
+    > :not(:last-child) {
+      margin-right: 2px;


detach buttons from input

with focus:

johnly13 · 2021-12-01T21:41:52Z

packages/core/src/components/forms/_input-group.scss

@@ -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));


use of $color4 for dark mode intent input within input group moved to here

johnly13 · 2021-12-01T21:42:05Z

packages/core/src/components/forms/_input.scss

@@ -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));


same as above but for non-input group dark inputs

johnly13 · 2021-12-01T21:43:15Z

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

@@ -11,27 +14,6 @@
    min-height: 0;
    padding: 0;
    width: $pt-button-height;
-
-    &:first-child {


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

blueprint-bot · 2021-12-01T21:48:40Z

Remove redundant margin-right in numeric-input

Previews: documentation | landing | table | modern colors demo

blueprint-bot · 2021-12-01T22:28:04Z

Remove gap between numeric input buttons

Previews: documentation | landing | table | modern colors demo

adidahiya

the focus style changes generally look ok... for example here's a danger intent numeric input:

but there seems to be a problem with tag input styles, this doesn't seem right:

adidahiya · 2021-12-02T15:43:14Z

packages/core/src/common/_variables.scss

@@ -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 0px 1px 1px rgba(17, 20, 24, 0.5),


I think these should all use $black instead of 17, 20, 24...

Suggested change

$pt-input-box-shadow: inset 0px 1px 1px rgba(17, 20, 24, 0.5),

$pt-input-box-shadow: inset 0px 1px 1px rgba($black, 0.5),

blueprint-bot · 2021-12-02T20:05:13Z

Fix lint and use instead of rgb values

Previews: documentation | landing | table | modern colors demo

johnly13 · 2021-12-02T21:22:17Z

packages/core/src/components/tag-input/_tag-input.scss

@@ -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 {


fixes the colors for tag input active borders

johnly13 · 2021-12-02T21:24:40Z

added a tag input example to the demo app and updated the colors for tag input active borders

blueprint-bot · 2021-12-02T21:27:06Z

Add TagInputExample and fix TagInput active borders

Previews: documentation | landing | table | modern colors demo

blueprint-bot · 2021-12-02T21:41:13Z

Update time picker intent focus colors

Previews: documentation | landing | table | modern colors demo

johnly13 added 2 commits December 1, 2021 14:04

Move input styles out of blueprint.scss (now built-in)

1d18572

Add gap between control group components

0dbb11a

johnly13 requested a review from adidahiya December 1, 2021 21:35

johnly13 commented Dec 1, 2021

View reviewed changes

Remove redundant margin-right in numeric-input

f73326b

johnly13 commented Dec 1, 2021

View reviewed changes

aycai mentioned this pull request Dec 1, 2021

[v4] Input and button borders don't match when combined #4989

Closed

Remove gap between numeric input buttons

bf9a15c

adidahiya suggested changes Dec 2, 2021

View reviewed changes

Fix lint and use instead of rgb values

2a6ab33

Add TagInputExample and fix TagInput active borders

6fb7d68

johnly13 commented Dec 2, 2021

View reviewed changes

Update time picker intent focus colors

f9efb2e

adidahiya approved these changes Dec 2, 2021

View reviewed changes

adidahiya changed the title ~~[v4] [core] Update Input borders and separate buttons~~ [v4] [core] feat: update input borders and separate buttons Dec 2, 2021

adidahiya merged commit ec0b016 into next Dec 2, 2021

adidahiya deleted the jl/v4-input-revisions branch December 2, 2021 22:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

johnly13 commented Dec 1, 2021 •

edited by adidahiya

Loading

johnly13 Dec 1, 2021

johnly13 Dec 1, 2021

adidahiya Dec 2, 2021

johnly13 Dec 1, 2021

blueprint-bot commented Dec 1, 2021

johnly13 Dec 1, 2021

johnly13 Dec 1, 2021

johnly13 Dec 1, 2021

johnly13 Dec 1, 2021

johnly13 Dec 1, 2021

johnly13 Dec 1, 2021

johnly13 Dec 1, 2021

johnly13 Dec 1, 2021

blueprint-bot commented Dec 1, 2021

blueprint-bot commented Dec 1, 2021

adidahiya left a comment

adidahiya Dec 2, 2021

blueprint-bot commented Dec 2, 2021

johnly13 Dec 2, 2021

johnly13 commented Dec 2, 2021

blueprint-bot commented Dec 2, 2021

blueprint-bot commented Dec 2, 2021

	$pt-input-box-shadow: inset 0px 1px 1px rgba(17, 20, 24, 0.5),
	$pt-input-box-shadow: inset 0px 1px 1px rgba($black, 0.5),

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

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

Conversation

johnly13 commented Dec 1, 2021 • edited by adidahiya Loading

Fixes #4989

Changes proposed in this pull request:

Reviewers should focus on:

Screenshot

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blueprint-bot commented Dec 1, 2021

Add gap between control group components

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blueprint-bot commented Dec 1, 2021

Remove redundant margin-right in numeric-input

blueprint-bot commented Dec 1, 2021

Remove gap between numeric input buttons

adidahiya left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

blueprint-bot commented Dec 2, 2021

Fix lint and use instead of rgb values

Choose a reason for hiding this comment

johnly13 commented Dec 2, 2021

blueprint-bot commented Dec 2, 2021

Add TagInputExample and fix TagInput active borders

blueprint-bot commented Dec 2, 2021

Update time picker intent focus colors

johnly13 commented Dec 1, 2021 •

edited by adidahiya

Loading