Skip to content

Commit

Permalink
chore(table): added listbox to sticky example to validate z-index UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArtBlue
ArtBlue committed Oct 16, 2024
1 parent 9521879 commit 82fe1dd
Show file tree
Hide file tree
Showing 3 changed files with 198 additions and 2 deletions.
2 changes: 1 addition & 1 deletion dist/table/table.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
.table--frozen-header thead {
position: sticky;
top: 0;
z-index: 1;
z-index: 3;
}

.table--freeze-column-1 tr td:nth-child(-n + 1),
Expand Down
196 changes: 196 additions & 0 deletions src/modules/table.marko
View file
Original file line number Diff line number Diff line change
Expand Up @@ -801,6 +801,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
<th class="table-cell">Seller</th>
<th class="table-cell">Item</th>
<th class="table-cell">Status</th>
<th class="table-cell">List Count</th>
<th class="table-cell table-cell--numeric">List Price</th>
<th class="table-cell table-cell--numeric">Quantity Available</th>
<th class="table-cell">Orders</th>
Expand Down Expand Up @@ -831,6 +832,45 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
<td class="table-cell">
<span class="signal signal--recent">Ready to Ship</span>
</td>
<td class="table-cell">
<span class="listbox-button">
<button class="listbox-button__control btn btn--form" type="button" aria-haspopup="listbox" aria-expanded="false" aria-controls="nid-bbv-20">
<span class="btn__cell">
<span class="btn__label">Selected:</span>
<span class="btn__text">-</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
</button>
<div role="listbox" class="listbox__options listbox-button__listbox" tabindex="-1" id="nid-bbv-20">
<div class="listbox__option" role="option" id="nid-bbv-21">
<span class="listbox__value">Option 1</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" id="nid-bbv-22">
<span class="listbox__value">Option 2</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" id="nid-bbv-23">
<span class="listbox__value">Option 3</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
<select hidden="" class="listbox__native">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</span>
</td>
<td class="table-cell table-cell--numeric">$287.96</td>
<td class="table-cell table-cell--numeric">300</td>
<td class="table-cell">
Expand Down Expand Up @@ -866,6 +906,45 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
<td class="table-cell">
<span class="signal signal--recent">Ready to Ship</span>
</td>
<td class="table-cell">
<span class="listbox-button listbox-button--expanded">
<button class="listbox-button__control btn btn--form" type="button" aria-haspopup="listbox" aria-expanded="true" aria-controls="nid-bbv-20">
<span class="btn__cell">
<span class="btn__label">Selected:</span>
<span class="btn__text">-</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
</button>
<div role="listbox" class="listbox__options listbox-button__listbox" tabindex="-1" id="nid-bbv-20">
<div class="listbox__option" role="option" id="nid-bbv-21">
<span class="listbox__value">Option 1</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" id="nid-bbv-22">
<span class="listbox__value">Option 2</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" id="nid-bbv-23">
<span class="listbox__value">Option 3</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
<select hidden="" class="listbox__native">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</span>
</td>
<td class="table-cell table-cell--numeric">$89.85</td>
<td class="table-cell table-cell--numeric">45</td>
<td class="table-cell">
Expand Down Expand Up @@ -899,6 +978,45 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
<td class="table-cell">
<span class="signal signal--time-sensitive">Backorder</span>
</td>
<td class="table-cell">
<span class="listbox-button">
<button class="listbox-button__control btn btn--form" type="button" aria-haspopup="listbox" aria-expanded="false" aria-controls="nid-bbv-20">
<span class="btn__cell">
<span class="btn__label">Selected:</span>
<span class="btn__text">-</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
</button>
<div role="listbox" class="listbox__options listbox-button__listbox" tabindex="-1" id="nid-bbv-20">
<div class="listbox__option" role="option" id="nid-bbv-21">
<span class="listbox__value">Option 1</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" id="nid-bbv-22">
<span class="listbox__value">Option 2</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" id="nid-bbv-23">
<span class="listbox__value">Option 3</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
<select hidden="" class="listbox__native">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</span>
</td>
<td class="table-cell table-cell--numeric">$499.99</td>
<td class="table-cell table-cell--numeric">345</td>
<td class="table-cell">
Expand Down Expand Up @@ -932,6 +1050,45 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
<td class="table-cell">
<span class="signal signal--time-neutral">Preparing</span>
</td>
<td class="table-cell">
<span class="listbox-button">
<button class="listbox-button__control btn btn--form" type="button" aria-haspopup="listbox" aria-expanded="false" aria-controls="nid-bbv-20">
<span class="btn__cell">
<span class="btn__label">Selected:</span>
<span class="btn__text">-</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
</button>
<div role="listbox" class="listbox__options listbox-button__listbox" tabindex="-1" id="nid-bbv-20">
<div class="listbox__option" role="option" id="nid-bbv-21">
<span class="listbox__value">Option 1</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" id="nid-bbv-22">
<span class="listbox__value">Option 2</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" id="nid-bbv-23">
<span class="listbox__value">Option 3</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
<select hidden="" class="listbox__native">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</span>
</td>
<td class="table-cell table-cell--numeric">$499.99</td>
<td class="table-cell table-cell--numeric">399</td>
<td class="table-cell">
Expand Down Expand Up @@ -965,6 +1122,45 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
<td class="table-cell">
<span class="signal signal--trustworthy">Restocking</span>
</td>
<td class="table-cell">
<span class="listbox-button">
<button class="listbox-button__control btn btn--form" type="button" aria-haspopup="listbox" aria-expanded="false" aria-controls="nid-bbv-20">
<span class="btn__cell">
<span class="btn__label">Selected:</span>
<span class="btn__text">-</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
</button>
<div role="listbox" class="listbox__options listbox-button__listbox" tabindex="-1" id="nid-bbv-20">
<div class="listbox__option" role="option" id="nid-bbv-21">
<span class="listbox__value">Option 1</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" id="nid-bbv-22">
<span class="listbox__value">Option 2</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="listbox__option" role="option" id="nid-bbv-23">
<span class="listbox__value">Option 3</span>
<svg aria-hidden="true" class="icon icon--16" focusable="false">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
<select hidden="" class="listbox__native">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
</span>
</td>
<td class="table-cell table-cell--numeric">$519.99</td>
<td class="table-cell table-cell--numeric">205</td>
<td class="table-cell">
Expand Down
2 changes: 1 addition & 1 deletion src/sass/table/table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ $density-relaxed-img-radius: 8px;
.table--frozen-header thead {
position: sticky;
top: 0;
z-index: 1;
z-index: 3;
}

.table--freeze-column-1 tr th:nth-child(-n + 1),
Expand Down

0 comments on commit 82fe1dd

Please sign in to comment.