fix(table): fix overflow menu hover style, remove hi, update checkbox id
MODIFY
src/components/data-table-v2/_data-table-v2-core.scss
src/components/data-table-v2/_data-table-v2-core.scss
margin-right: 0;
}
+ .bx--table-overflow {
+ &:hover {
.bx--overflow-menu {
+ opacity: 1;
+ }
+ }
+ }
+
+ .bx--overflow-menu {
+ opacity: 0;
+
&:focus {
outline: 0;
+ opacity: 1;
.bx--overflow-menu__icon {
box-shadow: inset 0px 0px 0px 1px $brand-01;

RENAME
src/components/data-table-v2/data-tabl-v2--pagination.html
src/components/data-table-v2/data-table-v2--pagination.html
<thead>
<tr>
<th>
- <input data-event="select-all" id="bx--checkbox-20" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
+ <input data-event="select-all" id="bx--checkbox-30" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
<label for="bx--checkbox-20" class="bx--checkbox-label" aria-label="Label name">
<span class="bx--checkbox-appearance">
<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<tbody>
<tr>
<td>
- <input data-event="select" id="bx--checkbox-13" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
+ <input data-event="select" id="bx--checkbox-33" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
<label for="bx--checkbox-13" class="bx--checkbox-label" aria-label="Label name">
<span class="bx--checkbox-appearance">
<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
</tr>
<tr class="expandable-row">
<td>
- <input data-event="select" id="bx--checkbox-14" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
+ <input data-event="select" id="bx--checkbox-34" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
<label for="bx--checkbox-14" class="bx--checkbox-label" aria-label="Label name">
<span class="bx--checkbox-appearance">
<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
</tr>
<tr>
<td>
- <input data-event="select" id="bx--checkbox-15" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
+ <input data-event="select" id="bx--checkbox-35" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
<label for="bx--checkbox-15" class="bx--checkbox-label" aria-label="Label name">
<span class="bx--checkbox-appearance">
<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
</tr>
<tr>
<td>
- <input data-event="select" id="bx--checkbox-11" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
+ <input data-event="select" id="bx--checkbox-41" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
<label for="bx--checkbox-11" class="bx--checkbox-label" aria-label="Label name">
<span class="bx--checkbox-appearance">
<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
</tr>
<tr>
<td>
- <input data-event="select" id="bx--checkbox-12" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
+ <input data-event="select" id="bx--checkbox-52" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
<label for="bx--checkbox-12" class="bx--checkbox-label" aria-label="Label name">
<span class="bx--checkbox-appearance">
<svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">

MODIFY
src/components/data-table-v2/data-table-v2-expandable.html
src/components/data-table-v2/data-table-v2-expandable.html
</svg>
</div>
</div>
-
- <div class="icon-content">
- <p>hi</p>
- </div>
</div>
<table class="bx--data-table-v2">

fix(table): fix overflow menu hover style, remove hi, update checkbox id (#377)