Skip to content

Commit

Permalink
docs(styles): add the missing checkboxes in Table examples [ci visual] (
Browse files Browse the repository at this point in the history 
#5600)
  • Loading branch information
@InnaAtanasova
InnaAtanasova authored Aug 27, 2024
1 parent 3eace4d commit 6adff4e
Show file tree
Hide file tree
Showing 7 changed files with 98 additions and 66 deletions.
16 changes: 12 additions & 4 deletions packages/styles/stories/Components/table/checkbox.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Table With Checkbox</h4>
<tr class="fd-table__row">
<th class="fd-table__cell fd-table__cell--checkbox" scope="col">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-table__checkbox" id="Ai4ez611">
<label class="fd-checkbox__label fd-table__checkbox-label" for="Ai4ez611"></label>
<label class="fd-checkbox__label fd-table__checkbox-label" for="Ai4ez611">
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
</label>
</th>
<th class="fd-table__cell" scope="col">Column Header</th>
<th class="fd-table__cell" scope="col">Column Header</th>
Expand All @@ -19,7 +21,9 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Table With Checkbox</h4>
<tr class="fd-table__row" aria-selected="true">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" checked class="fd-checkbox fd-table__checkbox" id="Ai4ez615">
<label class="fd-checkbox__label fd-table__checkbox-label" for="Ai4ez615"></label>
<label class="fd-checkbox__label fd-table__checkbox-label" for="Ai4ez615">
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
</label>
</td>
<td class="fd-table__cell"><a class="fd-link"><span>[email protected]</span></a></td>
<td class="fd-table__cell"><span class="fd-table__text">First Name</span></td>
Expand All @@ -29,7 +33,9 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Table With Checkbox</h4>
<tr class="fd-table__row">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-table__checkbox" id="Ai4ez617">
<label class="fd-checkbox__label fd-table__checkbox-label" for="Ai4ez617"></label>
<label class="fd-checkbox__label fd-table__checkbox-label" for="Ai4ez617">
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
</label>
</td>
<td class="fd-table__cell"><a class="fd-link"><span>[email protected]</span></a></td>
<td class="fd-table__cell">First Name</td>
Expand All @@ -39,7 +45,9 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Table With Checkbox</h4>
<tr class="fd-table__row">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-table__checkbox" id="Gi4ez611">
<label class="fd-checkbox__label fd-table__checkbox-label" for="Gi4ez611"></label>
<label class="fd-checkbox__label fd-table__checkbox-label" for="Gi4ez611">
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
</label>
</td>
<td class="fd-table__cell"><a class="fd-link"><span>[email protected]</span></a></td>
<td class="fd-table__cell">First Name</td>
Expand Down
16 changes: 12 additions & 4 deletions packages/styles/stories/Components/table/condensed-checkbox.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Table With Checkbox Condense
<tr class="fd-table__row">
<th class="fd-table__cell fd-table__cell--checkbox" scope="col">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-table__checkbox" id="Ai4JH2BF87">
<label class="fd-checkbox__label fd-table__checkbox-label" for="Ai4JH2BF87"></label>
<label class="fd-checkbox__label fd-table__checkbox-label" for="Ai4JH2BF87">
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
</label>
</th>
<th class="fd-table__cell" scope="col">Column Header</th>
<th class="fd-table__cell" scope="col">Column Header</th>
Expand All @@ -19,7 +21,9 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Table With Checkbox Condense
<tr class="fd-table__row" aria-selected="true">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" checked class="fd-checkbox fd-table__checkbox" id="Ai4JHf87">
<label class="fd-checkbox__label fd-table__checkbox-label" for="Ai4JHf87"></label>
<label class="fd-checkbox__label fd-table__checkbox-label" for="Ai4JHf87">
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
</label>
</td>
<td class="fd-table__cell"><a class="fd-link"><span>[email protected]</span></a></td>
<td class="fd-table__cell"><span class="fd-table__text">First Name</span></td>
Expand All @@ -29,7 +33,9 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Table With Checkbox Condense
<tr class="fd-table__row">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-table__checkbox" id="Ai4Jj67">
<label class="fd-checkbox__label fd-table__checkbox-label" for="Ai4Jj67"></label>
<label class="fd-checkbox__label fd-table__checkbox-label" for="Ai4Jj67">
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
</label>
</td>
<td class="fd-table__cell"><a class="fd-link"><span>[email protected]</span></a></td>
<td class="fd-table__cell">First Name</td>
Expand All @@ -39,7 +45,9 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Table With Checkbox Condense
<tr class="fd-table__row">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox fd-table__checkbox" id="AGjtJj67">
<label class="fd-checkbox__label fd-table__checkbox-label" for="AGjtJj67"></label>
<label class="fd-checkbox__label fd-table__checkbox-label" for="AGjtJj67">
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
</label>
</td>
<td class="fd-table__cell"><a class="fd-link"><span>[email protected]</span></a></td>
<td class="fd-table__cell">First Name</td>
Expand Down
14 changes: 7 additions & 7 deletions packages/styles/stories/Components/table/grid-table.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<div class="fd-form-item">
<input aria-checked="false" aria-label="Select all rows" class="fd-checkbox" id="fd-gEAc87vXrAR"
type="checkbox" value="" tabindex="-1" /><label for="fd-gEAc87vXrAR"
class="fd-form-label fd-checkbox__label"></label>
class="fd-form-label fd-checkbox__label"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</div>
</th>
<th id="fd-KWRjZC5EqkW" class="fd-table__cell fd-table__cell--focusable" tabindex="-1">
Expand Down Expand Up @@ -46,7 +46,7 @@
<div class="fd-form-item">
<input aria-checked="false" aria-label="Select row" class="fd-checkbox" id="fd-7EMZOUrG2eK"
name="Notebook Basic 15" type="checkbox" value="" tabindex="-1" />
<label for="fd-7EMZOUrG2eK" class="fd-form-label fd-checkbox__label"></label>
<label for="fd-7EMZOUrG2eK" class="fd-form-label fd-checkbox__label"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</div>
</td>
<td class="fd-table__cell fd-table__cell--focusable" tabindex="-1">
Expand Down Expand Up @@ -87,7 +87,7 @@
<div class="fd-form-item">
<input aria-checked="false" aria-label="Heavy Weight" class="fd-checkbox" id="fd-tF03y4hjeLT"
type="checkbox" value="" tabindex="-1" /><label for="fd-tF03y4hjeLT"
class="fd-form-label fd-checkbox__label"></label>
class="fd-form-label fd-checkbox__label"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</div>
</td>
<td class="fd-table__cell fd-table__cell--focusable" tabindex="-1">
Expand Down Expand Up @@ -116,7 +116,7 @@
<div class="fd-form-item">
<input aria-checked="false" aria-label="Select row" class="fd-checkbox" id="fd-LbUmEre6JKj"
name="Notebook Basic 17" type="checkbox" value="" tabindex="-1" />
<label for="fd-LbUmEre6JKj" class="fd-form-label fd-checkbox__label"></label>
<label for="fd-LbUmEre6JKj" class="fd-form-label fd-checkbox__label"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</div>
</td>
<td class="fd-table__cell fd-table__cell--focusable" tabindex="-1">
Expand Down Expand Up @@ -157,7 +157,7 @@
<div class="fd-form-item">
<input aria-checked="false" aria-label="Heavy Weight" class="fd-checkbox" id="fd-9WXDOs3SBLH"
type="checkbox" value="" tabindex="-1" /><label for="fd-9WXDOs3SBLH"
class="fd-form-label fd-checkbox__label"></label>
class="fd-form-label fd-checkbox__label"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</div>
</td>
<td class="fd-table__cell fd-table__cell--focusable" tabindex="-1">
Expand Down Expand Up @@ -186,7 +186,7 @@
<div class="fd-form-item">
<input aria-checked="false" aria-label="Select row" class="fd-checkbox" id="fd-Cmvc_Hc7N3_"
name="Notebook Basic 18" type="checkbox" value="" tabindex="-1" />
<label for="fd-Cmvc_Hc7N3_" class="fd-form-label fd-checkbox__label"></label>
<label for="fd-Cmvc_Hc7N3_" class="fd-form-label fd-checkbox__label"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</div>
</td>
<td class="fd-table__cell fd-table__cell--focusable" tabindex="-1">
Expand Down Expand Up @@ -227,7 +227,7 @@
<div class="fd-form-item">
<input aria-checked="false" aria-label="Heavy Weight" class="fd-checkbox" id="fd-Rzaro06MMoH"
type="checkbox" value="" tabindex="-1" /><label for="fd-Rzaro06MMoH"
class="fd-form-label fd-checkbox__label"></label>
class="fd-form-label fd-checkbox__label"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</div>
</td>
<td class="fd-table__cell fd-table__cell--focusable" tabindex="-1">
Expand Down
8 changes: 4 additions & 4 deletions packages/styles/stories/Components/table/nav-indicators.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Table with Navigation Indica
<tr class="fd-table__row">
<th class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox" id="kqqzPI44">
<label class="fd-checkbox__label" for="kqqzPI44"></label>
<label class="fd-checkbox__label" for="kqqzPI44"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</th>
<th class="fd-table__cell" scope="col">Column Header</th>
<th class="fd-table__cell" scope="col">Column Header</th>
Expand All @@ -20,7 +20,7 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Table with Navigation Indica
<tr class="fd-table__row fd-table__row--activable fd-table__row--hoverable" aria-selected="true">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" checked class="fd-checkbox" id="EWuzWh33">
<label class="fd-checkbox__label" for="EWuzWh33"></label>
<label class="fd-checkbox__label" for="EWuzWh33"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</td>
<td class="fd-table__cell"><a class="fd-link"><span>[email protected]</span></a></td>
<td class="fd-table__cell"><span class="fd-table__text">First Name</span></td>
Expand All @@ -33,7 +33,7 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Table with Navigation Indica
<tr class="fd-table__row fd-table__row--activable fd-table__row--hoverable" aria-selected="true">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" checked class="fd-checkbox" id="EWuzWh334">
<label class="fd-checkbox__label" for="EWuzWh334"></label>
<label class="fd-checkbox__label" for="EWuzWh334"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</td>
<td class="fd-table__cell"><a class="fd-link"><span>[email protected]</span></a></td>
<td class="fd-table__cell"><span class="fd-table__text">First Name</span></td>
Expand All @@ -46,7 +46,7 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Table with Navigation Indica
<tr class="fd-table__row fd-table__row--activable fd-table__row--hoverable">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox" id="EWuzWh335">
<label class="fd-checkbox__label" for="EWuzWh335"></label>
<label class="fd-checkbox__label" for="EWuzWh335"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</td>
<td class="fd-table__cell"><a class="fd-link"><span>[email protected]</span></a></td>
<td class="fd-table__cell">First Name</td>
Expand Down
8 changes: 4 additions & 4 deletions packages/styles/stories/Components/table/responsive-table.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Responsive Table</h4>
<tr class="fd-table__row">
<th class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox" id="kqqzPI">
<label class="fd-checkbox__label" for="kqqzPI"></label>
<label class="fd-checkbox__label" for="kqqzPI"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</th>
<th class="fd-table__cell" scope="col">Name</th>
<th class="fd-table__cell" scope="col">Status</th>
Expand All @@ -20,7 +20,7 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Responsive Table</h4>
<tr class="fd-table__row fd-table__row--activable fd-table__row--hoverable">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox" id="EWuzWh">
<label class="fd-checkbox__label" for="EWuzWh"></label>
<label class="fd-checkbox__label" for="EWuzWh"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</td>
<td class="fd-table__cell">Banana</td>
<td class="fd-table__cell">
Expand All @@ -37,7 +37,7 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Responsive Table</h4>
<tr class="fd-table__row fd-table__row--activable fd-table__row--hoverable">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox" id="19j0Sc">
<label class="fd-checkbox__label" for="19j0Sc"></label>
<label class="fd-checkbox__label" for="19j0Sc"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</td>
<td class="fd-table__cell">Pineapple</td>
<td class="fd-table__cell">
Expand All @@ -54,7 +54,7 @@ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Responsive Table</h4>
<tr class="fd-table__row fd-table__row--activable fd-table__row--hoverable">
<td class="fd-table__cell fd-table__cell--checkbox">
<input aria-label="checkbox" type="checkbox" class="fd-checkbox" id="a7SfGX">
<label class="fd-checkbox__label" for="a7SfGX"></label>
<label class="fd-checkbox__label" for="a7SfGX"><span class="fd-checkbox__checkmark" aria-hidden="true"></span></label>
</td>
<td class="fd-table__cell">Orange</td>
<td class="fd-table__cell">
Expand Down
Loading

0 comments on commit 6adff4e

Please sign in to comment.