-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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.
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
Conversation
@@ -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 |
There was a problem hiding this comment.
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/*
@@ -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), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think these should all use $black
instead of 17, 20, 24
...
$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), |
|
||
$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), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add gap between control group componentsPreviews: documentation | landing | table | modern colors demo |
@@ -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), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
} | ||
|
There was a problem hiding this comment.
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
} | ||
} | ||
|
||
// Add border radius inheritance to support components wrapped in a popover |
There was a problem hiding this comment.
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
> *:not(.#{$ns}-divider) { | ||
margin-right: -$button-border-width; | ||
> :not(:last-child) { | ||
margin-right: 2px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -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)); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -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)); |
There was a problem hiding this comment.
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
@@ -11,27 +14,6 @@ | |||
min-height: 0; | |||
padding: 0; | |||
width: $pt-button-height; | |||
|
|||
&:first-child { |
There was a problem hiding this comment.
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
Remove redundant margin-right in numeric-inputPreviews: documentation | landing | table | modern colors demo |
Remove gap between numeric input buttonsPreviews: documentation | landing | table | modern colors demo |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -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), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think these should all use $black
instead of 17, 20, 24
...
$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), |
Fix lint and use instead of rgb valuesPreviews: documentation | landing | table | modern colors demo |
@@ -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 { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
added a tag input example to the demo app and updated the colors for tag input active borders |
Add TagInputExample and fix TagInput active bordersPreviews: documentation | landing | table | modern colors demo |
Update time picker intent focus colorsPreviews: documentation | landing | table | modern colors demo |
Fixes #4989
Changes proposed in this pull request:
NumericInput
)Reviewers should focus on:
Screenshot