Skip to content

Commit

Permalink
fix(comp:table): gap between expand trigger and text not working (#1637)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sallerli1
sallerli1 authored Aug 11, 2023
1 parent 4817f09 commit 0183341
Show file tree
Hide file tree
Showing 4 changed files with 147 additions and 12 deletions.
80 changes: 70 additions & 10 deletions packages/components/table/__tests__/__snapshots__/table.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,284 +36,344 @@ exports[`Table > basic work > render work 1`] = `
<tbody class=\\"ix-table-tbody\\">
<!---->
<tr class=\\"ix-table-row\\">
<td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><a>expandable</a></td>
<td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><span class=\\"ix-table-expandable-trigger-gap\\"></span><a>expandable</a></td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><label class=\\"ix-checkbox ix-checkbox-disabled\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" disabled=\\"\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
<!---->
<!---->
<!---->
</label>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->Edrward 0
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->18
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->London Park no. 0
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
<!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
<!----></span>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><a style=\\"margin-right: 8px;\\">Invite Edrward 0</a><a>Delete</a>
</td>
</tr>
<tr class=\\"ix-table-row\\">
<td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
<!---->
</button><a>expandable</a></td>
</button><span class=\\"ix-table-expandable-trigger-gap\\"></span><a>expandable</a></td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
<!---->
<!---->
<!---->
</label>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->Edrward 1
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->19
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->London Park no. 1
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
<!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
<!----></span>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><a style=\\"margin-right: 8px;\\">Invite Edrward 1</a><a>Delete</a>
</td>
</tr>
<tr class=\\"ix-table-row\\">
<td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
<!---->
</button><a>expandable</a></td>
</button><span class=\\"ix-table-expandable-trigger-gap\\"></span><a>expandable</a></td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
<!---->
<!---->
<!---->
</label>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->Edrward 2
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->20
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->London Park no. 2
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
<!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
<!----></span>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><a style=\\"margin-right: 8px;\\">Invite Edrward 2</a><a>Delete</a>
</td>
</tr>
<tr class=\\"ix-table-row\\">
<td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><a>expandable</a></td>
<td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><span class=\\"ix-table-expandable-trigger-gap\\"></span><a>expandable</a></td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><label class=\\"ix-checkbox ix-checkbox-disabled\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" disabled=\\"\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
<!---->
<!---->
<!---->
</label>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->Edrward 3
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->21
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->London Park no. 3
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
<!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
<!----></span>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><a style=\\"margin-right: 8px;\\">Invite Edrward 3</a><a>Delete</a>
</td>
</tr>
<tr class=\\"ix-table-row\\">
<td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
<!---->
</button><a>expandable</a></td>
</button><span class=\\"ix-table-expandable-trigger-gap\\"></span><a>expandable</a></td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
<!---->
<!---->
<!---->
</label>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->Edrward 4
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->22
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->London Park no. 4
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
<!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
<!----></span>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><a style=\\"margin-right: 8px;\\">Invite Edrward 4</a><a>Delete</a>
</td>
</tr>
<tr class=\\"ix-table-row\\">
<td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
<!---->
</button><a>expandable</a></td>
</button><span class=\\"ix-table-expandable-trigger-gap\\"></span><a>expandable</a></td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
<!---->
<!---->
<!---->
</label>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->Edrward 5
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->23
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->London Park no. 5
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
<!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
<!----></span>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><a style=\\"margin-right: 8px;\\">Invite Edrward 5</a><a>Delete</a>
</td>
</tr>
<tr class=\\"ix-table-row\\">
<td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><a>expandable</a></td>
<td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><span class=\\"ix-table-expandable-trigger-gap\\"></span><a>expandable</a></td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><label class=\\"ix-checkbox ix-checkbox-disabled\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" disabled=\\"\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
<!---->
<!---->
<!---->
</label>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->Edrward 6
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->24
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->London Park no. 6
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
<!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
<!----></span>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><a style=\\"margin-right: 8px;\\">Invite Edrward 6</a><a>Delete</a>
</td>
</tr>
<tr class=\\"ix-table-row\\">
<td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
<!---->
</button><a>expandable</a></td>
</button><span class=\\"ix-table-expandable-trigger-gap\\"></span><a>expandable</a></td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
<!---->
<!---->
<!---->
</label>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->Edrward 7
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->25
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->London Park no. 7
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
<!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
<!----></span>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><a style=\\"margin-right: 8px;\\">Invite Edrward 7</a><a>Delete</a>
</td>
</tr>
<tr class=\\"ix-table-row\\">
<td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
<!---->
</button><a>expandable</a></td>
</button><span class=\\"ix-table-expandable-trigger-gap\\"></span><a>expandable</a></td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
<!---->
<!---->
<!---->
</label>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->Edrward 8
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->26
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->London Park no. 8
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
<!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
<!----></span>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><a style=\\"margin-right: 8px;\\">Invite Edrward 8</a><a>Delete</a>
</td>
</tr>
<tr class=\\"ix-table-row\\">
<td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><a>expandable</a></td>
<td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><span class=\\"ix-table-expandable-trigger-gap\\"></span><a>expandable</a></td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><label class=\\"ix-checkbox ix-checkbox-disabled\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" disabled=\\"\\"><span class=\\"ix-checkbox-input-box\\"><div aria-hidden=\\"true\\" class=\\"ix-wave\\"></div></span></span>
<!---->
<!---->
<!---->
</label>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->Edrward 9
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->27
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!---->London Park no. 9
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><span class=\\"ix-tag ix-tag-normal ix-tag-success\\"><!----><!----><span class=\\"ix-tag-content\\">NICE</span>
<!----></span><span class=\\"ix-tag ix-tag-normal ix-tag-warning\\"><!----><!----><span class=\\"ix-tag-content\\">DEVELOPER</span>
<!----></span>
</td>
<td class=\\"ix-table-cell\\">
<!---->
<!----><a style=\\"margin-right: 8px;\\">Invite Edrward 9</a><a>Delete</a>
</td>
</tr>
Expand Down
Loading

0 comments on commit 0183341

Please sign in to comment.