fix(tabs): use border prop for bordered styling #8965
Conversation
| @@ -15,7 +15,7 @@ | |||
| } | |||
|
|
|||
| :host([bordered]) { | |||
| box-shadow: inset 0 1px 0 var(--calcite-color-border-1); | |||
| box-shadow: inset 0 1px 0 var(--calcite-internal-tabs-border-color); | |||
There was a problem hiding this comment.
Should we be using box-shadow as a border??
There was a problem hiding this comment.
I didn't want to affect the scope of this PR, but worth discussing. I know box-shadow + inset is used to achieve a border w/o affecting dimensions.
There was a problem hiding this comment.
Yeah we should discuss these type of styles where we are doing somewhat odd things to accomplish a border. The list component was doing the same thing (using margin and a box-shadow) to accomplish a border. I went ahead and changed it in that PR.
There was a problem hiding this comment.
I don't think there's anything inherently wrong with doing this - in certain places it can be helpful to maintain total height, provide a way to avoid having "compensatory padding" (when you have an active border and siblings don't) etc. Or, in cases where border is already used, to provide additional visuals. But, it probably shouldn't be the first option... I can see why it was used in Tabs in this way - I can see if a refactor is possible in #8800
|
This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions. |
Related Issue: #7180
Summary
🔳✨🔨
Note: this also fixes a regression from #8783 where non-bordered tabs displayed a border.