fix(Tag): close button not showing in select when text too long #443
Conversation
jdkahn
commented
Mar 12, 2019
jdkahn
commented
- set max width for the body to make sure the close button appears
- increase the icon left margin to not trigger the ellipses unnecessarily
Codecov Report
@@ Coverage Diff @@
## master #443 +/- ##
=======================================
Coverage 91.08% 91.08%
=======================================
Files 242 242
Lines 13590 13590
Branches 4210 4210
=======================================
Hits 12379 12379
Misses 1192 1192
Partials 19 19Continue to review full report at Codecov.
|
src/tag/scss/mixin.scss
Outdated
| @@ -35,7 +35,11 @@ | |||
| } | |||
|
|
|||
| > .#{$css-prefix}tag-close-btn { | |||
| margin-left: $_marginLeft; | |||
| @if $iconSize == "large" { | |||
There was a problem hiding this comment.
the value of $iconSize is a kind of value like '4px 8px 12px', not 'large medium small', so margin-left will always be $_marginLeft + 2px
| &.#{$css-prefix}tag-small > .#{$css-prefix}tag-body { | ||
| max-width: calc(100% - #{$tag-size-s-height}); | ||
| } | ||
|
|
There was a problem hiding this comment.
this wasn't necessary for select, since it doesn't use large tags, but i can add it because we don't know if it will need in the future
src/tag/scss/mixin.scss
Outdated
| @@ -20,7 +20,7 @@ | |||
| line-height: $height - $borderWidth * 2; | |||
| font-size: 0; | |||
|
|
|||
| $_marginLeft: $height / 4 - 1px; | |||
| $_marginLeft: $height / 4 + 3; | |||
There was a problem hiding this comment.
you mean +3px ?
Adding 3px to marginLeft looks like a hack. @tao1991123 is that ok?
There was a problem hiding this comment.
what if we did $_marginLeft: $iconSize? This seems to have the desired result without a fixed hack
There was a problem hiding this comment.
it seem that marginLeft equals to 0.5 * paddingRight
There was a problem hiding this comment.
agree with $_marginLeft: $iconSize
|
close #441 |
