Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit 82fe1dd

Browse files
ArtBlueArtBlue
committed
chore(table): added listbox to sticky example to validate z-index UI
1 parent 9521879 commit 82fe1dd

File tree

3 files changed

+198
-2
lines changed

3 files changed

+198
-2
lines changed

‎dist/table/table.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
.table--frozen-header thead {
6969
position: sticky;
7070
top: 0;
71-
z-index: 1;
71+
z-index: 3;
7272
}
7373

7474
.table--freeze-column-1 tr td:nth-child(-n + 1),

‎src/modules/table.marko‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -801,6 +801,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
801801
<th class="table-cell">Seller</th>
802802
<th class="table-cell">Item</th>
803803
<th class="table-cell">Status</th>
804+
<th class="table-cell">List Count</th>
804805
<th class="table-cell table-cell--numeric">List Price</th>
805806
<th class="table-cell table-cell--numeric">Quantity Available</th>
806807
<th class="table-cell">Orders</th>
@@ -831,6 +832,45 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
831832
<td class="table-cell">
832833
<span class="signal signal--recent">Ready to Ship</span>
833834
</td>
835+
<td class="table-cell">
836+
<span class="listbox-button">
837+
<button class="listbox-button__control btn btn--form" type="button" aria-haspopup="listbox" aria-expanded="false" aria-controls="nid-bbv-20">
838+
<span class="btn__cell">
839+
<span class="btn__label">Selected:</span>
840+
<span class="btn__text">-</span>
841+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
842+
<use href="#icon-chevron-down-16"></use>
843+
</svg>
844+
</span>
845+
</button>
846+
847+
<div role="listbox" class="listbox__options listbox-button__listbox" tabindex="-1" id="nid-bbv-20">
848+
<div class="listbox__option" role="option" id="nid-bbv-21">
849+
<span class="listbox__value">Option 1</span>
850+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
851+
<use href="#icon-tick-16"></use>
852+
</svg>
853+
</div>
854+
<div class="listbox__option" role="option" id="nid-bbv-22">
855+
<span class="listbox__value">Option 2</span>
856+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
857+
<use href="#icon-tick-16"></use>
858+
</svg>
859+
</div>
860+
<div class="listbox__option" role="option" id="nid-bbv-23">
861+
<span class="listbox__value">Option 3</span>
862+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
863+
<use href="#icon-tick-16"></use>
864+
</svg>
865+
</div>
866+
</div>
867+
<select hidden="" class="listbox__native">
868+
<option value="1"></option>
869+
<option value="2"></option>
870+
<option value="3"></option>
871+
</select>
872+
</span>
873+
</td>
834874
<td class="table-cell table-cell--numeric">$287.96</td>
835875
<td class="table-cell table-cell--numeric">300</td>
836876
<td class="table-cell">
@@ -866,6 +906,45 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
866906
<td class="table-cell">
867907
<span class="signal signal--recent">Ready to Ship</span>
868908
</td>
909+
<td class="table-cell">
910+
<span class="listbox-button listbox-button--expanded">
911+
<button class="listbox-button__control btn btn--form" type="button" aria-haspopup="listbox" aria-expanded="true" aria-controls="nid-bbv-20">
912+
<span class="btn__cell">
913+
<span class="btn__label">Selected:</span>
914+
<span class="btn__text">-</span>
915+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
916+
<use href="#icon-chevron-down-16"></use>
917+
</svg>
918+
</span>
919+
</button>
920+
921+
<div role="listbox" class="listbox__options listbox-button__listbox" tabindex="-1" id="nid-bbv-20">
922+
<div class="listbox__option" role="option" id="nid-bbv-21">
923+
<span class="listbox__value">Option 1</span>
924+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
925+
<use href="#icon-tick-16"></use>
926+
</svg>
927+
</div>
928+
<div class="listbox__option" role="option" id="nid-bbv-22">
929+
<span class="listbox__value">Option 2</span>
930+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
931+
<use href="#icon-tick-16"></use>
932+
</svg>
933+
</div>
934+
<div class="listbox__option" role="option" id="nid-bbv-23">
935+
<span class="listbox__value">Option 3</span>
936+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
937+
<use href="#icon-tick-16"></use>
938+
</svg>
939+
</div>
940+
</div>
941+
<select hidden="" class="listbox__native">
942+
<option value="1"></option>
943+
<option value="2"></option>
944+
<option value="3"></option>
945+
</select>
946+
</span>
947+
</td>
869948
<td class="table-cell table-cell--numeric">$89.85</td>
870949
<td class="table-cell table-cell--numeric">45</td>
871950
<td class="table-cell">
@@ -899,6 +978,45 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
899978
<td class="table-cell">
900979
<span class="signal signal--time-sensitive">Backorder</span>
901980
</td>
981+
<td class="table-cell">
982+
<span class="listbox-button">
983+
<button class="listbox-button__control btn btn--form" type="button" aria-haspopup="listbox" aria-expanded="false" aria-controls="nid-bbv-20">
984+
<span class="btn__cell">
985+
<span class="btn__label">Selected:</span>
986+
<span class="btn__text">-</span>
987+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
988+
<use href="#icon-chevron-down-16"></use>
989+
</svg>
990+
</span>
991+
</button>
992+
993+
<div role="listbox" class="listbox__options listbox-button__listbox" tabindex="-1" id="nid-bbv-20">
994+
<div class="listbox__option" role="option" id="nid-bbv-21">
995+
<span class="listbox__value">Option 1</span>
996+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
997+
<use href="#icon-tick-16"></use>
998+
</svg>
999+
</div>
1000+
<div class="listbox__option" role="option" id="nid-bbv-22">
1001+
<span class="listbox__value">Option 2</span>
1002+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
1003+
<use href="#icon-tick-16"></use>
1004+
</svg>
1005+
</div>
1006+
<div class="listbox__option" role="option" id="nid-bbv-23">
1007+
<span class="listbox__value">Option 3</span>
1008+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
1009+
<use href="#icon-tick-16"></use>
1010+
</svg>
1011+
</div>
1012+
</div>
1013+
<select hidden="" class="listbox__native">
1014+
<option value="1"></option>
1015+
<option value="2"></option>
1016+
<option value="3"></option>
1017+
</select>
1018+
</span>
1019+
</td>
9021020
<td class="table-cell table-cell--numeric">$499.99</td>
9031021
<td class="table-cell table-cell--numeric">345</td>
9041022
<td class="table-cell">
@@ -932,6 +1050,45 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
9321050
<td class="table-cell">
9331051
<span class="signal signal--time-neutral">Preparing</span>
9341052
</td>
1053+
<td class="table-cell">
1054+
<span class="listbox-button">
1055+
<button class="listbox-button__control btn btn--form" type="button" aria-haspopup="listbox" aria-expanded="false" aria-controls="nid-bbv-20">
1056+
<span class="btn__cell">
1057+
<span class="btn__label">Selected:</span>
1058+
<span class="btn__text">-</span>
1059+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
1060+
<use href="#icon-chevron-down-16"></use>
1061+
</svg>
1062+
</span>
1063+
</button>
1064+
1065+
<div role="listbox" class="listbox__options listbox-button__listbox" tabindex="-1" id="nid-bbv-20">
1066+
<div class="listbox__option" role="option" id="nid-bbv-21">
1067+
<span class="listbox__value">Option 1</span>
1068+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
1069+
<use href="#icon-tick-16"></use>
1070+
</svg>
1071+
</div>
1072+
<div class="listbox__option" role="option" id="nid-bbv-22">
1073+
<span class="listbox__value">Option 2</span>
1074+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
1075+
<use href="#icon-tick-16"></use>
1076+
</svg>
1077+
</div>
1078+
<div class="listbox__option" role="option" id="nid-bbv-23">
1079+
<span class="listbox__value">Option 3</span>
1080+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
1081+
<use href="#icon-tick-16"></use>
1082+
</svg>
1083+
</div>
1084+
</div>
1085+
<select hidden="" class="listbox__native">
1086+
<option value="1"></option>
1087+
<option value="2"></option>
1088+
<option value="3"></option>
1089+
</select>
1090+
</span>
1091+
</td>
9351092
<td class="table-cell table-cell--numeric">$499.99</td>
9361093
<td class="table-cell table-cell--numeric">399</td>
9371094
<td class="table-cell">
@@ -965,6 +1122,45 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";
9651122
<td class="table-cell">
9661123
<span class="signal signal--trustworthy">Restocking</span>
9671124
</td>
1125+
<td class="table-cell">
1126+
<span class="listbox-button">
1127+
<button class="listbox-button__control btn btn--form" type="button" aria-haspopup="listbox" aria-expanded="false" aria-controls="nid-bbv-20">
1128+
<span class="btn__cell">
1129+
<span class="btn__label">Selected:</span>
1130+
<span class="btn__text">-</span>
1131+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
1132+
<use href="#icon-chevron-down-16"></use>
1133+
</svg>
1134+
</span>
1135+
</button>
1136+
1137+
<div role="listbox" class="listbox__options listbox-button__listbox" tabindex="-1" id="nid-bbv-20">
1138+
<div class="listbox__option" role="option" id="nid-bbv-21">
1139+
<span class="listbox__value">Option 1</span>
1140+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
1141+
<use href="#icon-tick-16"></use>
1142+
</svg>
1143+
</div>
1144+
<div class="listbox__option" role="option" id="nid-bbv-22">
1145+
<span class="listbox__value">Option 2</span>
1146+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
1147+
<use href="#icon-tick-16"></use>
1148+
</svg>
1149+
</div>
1150+
<div class="listbox__option" role="option" id="nid-bbv-23">
1151+
<span class="listbox__value">Option 3</span>
1152+
<svg aria-hidden="true" class="icon icon--16" focusable="false">
1153+
<use href="#icon-tick-16"></use>
1154+
</svg>
1155+
</div>
1156+
</div>
1157+
<select hidden="" class="listbox__native">
1158+
<option value="1"></option>
1159+
<option value="2"></option>
1160+
<option value="3"></option>
1161+
</select>
1162+
</span>
1163+
</td>
9681164
<td class="table-cell table-cell--numeric">$519.99</td>
9691165
<td class="table-cell table-cell--numeric">205</td>
9701166
<td class="table-cell">

‎src/sass/table/table.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ $density-relaxed-img-radius: 8px;
7171
.table--frozen-header thead {
7272
position: sticky;
7373
top: 0;
74-
z-index: 1;
74+
z-index: 3;
7575
}
7676

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

0 commit comments

Comments
 (0)