Mrc 4811 Checkbox + DropdownItem #5
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #5 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 1 2 +1
Lines 9 25 +16
Branches 1 7 +6
=========================================
+ Hits 9 25 +16 ☔ View full report in Codecov by Sentry. |
src/components/CheckBox.vue
Outdated
| .vnm-checked-div > .btn.disabled, .btn:disabled { | ||
| background-color: red; | ||
| border-color: red !important; | ||
| /* border-radius: 0; */ |
|
|
||
| .vnm-checked-div > .btn.disabled, .btn:disabled { | ||
| background-color: red; | ||
| border-color: red !important; |
There was a problem hiding this comment.
Is this doable without the !important? I wonder if that give us some issues if we want to use this somewhere else and override the styles?
There was a problem hiding this comment.
Similarly for the unchecked I guess. Is the issue that these are rendered as disabled buttons in the html and the browser/bootstrap has opinions about how to colour those? Why are the buttons disabled, and how are click events going to be handled once implemented? Are the buttons going to be enabled when behaviour is implemented, or do you just want to gain the styling which makes these look buttony without actually being working buttons (and will handle click events at the level of the enclosing div)? I'm wondering if that won't be very accessible, but not sure what you're planning.
There was a problem hiding this comment.
yep this was for the bootstrap, it was looking a little weird in hint, i have removed the disabled tags on the buttons! the !important should not affect anything else at all because this is in a style scoped tag, i think its probably good to stop anything from overriding the styles of this component
Just isolating these to keep the PRs a good chunk to review. you wont be able to see anything in the demo yet, this is just setting up for the BaseSelect!
You may find this and coming PRs easier to review because you have already reviewed chunks of them in the past!
The checkbox component just switches based on the
checkedprop.The dropdownItem component conditionally render the dropdown chevrons if the option has children and will conditionally render the checkbox if a checked prop is provided.
Note: I had to change the coverage provider to
istanbulbecausev8(which we use for Hint) is the one this time that is saying gibberish.istanbulworks pretty well for this one!