Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: updated components to use standalone checkbox/radio #5355

Merged
merged 4 commits into from
Jan 31, 2023
Merged

chore: updated components to use standalone checkbox/radio #5355

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6627156
chore: updated components to use standalone checkbox/radio
thatblindgeye Jan 26, 2023
c1cc030
chore: updated table and demos to use standalone check/radio
thatblindgeye Jan 26, 2023
d44922f
chore: updated datalist check att and disabled logic
thatblindgeye Jan 27, 2023
4bd178e
chore: added isDisabled to example
thatblindgeye Jan 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 3 additions & 6 deletions src/patternfly/components/DataList/data-list-check.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@
{{#if data-list-check--attribute}}
{{{data-list-check--attribute}}}
{{/if}}>
<input type="checkbox"
name="{{data-list--id}}-{{data-list-item--id}}-checkbox"
aria-labelledby="{{data-list--id}}-{{data-list-item--id}}"
{{#if checkbox--attribute}}
{{{checkbox--attribute}}}
{{/if}}>
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="' data-list--id '-' data-list-item--id '-checkbox" aria-labelledby="' data-list--id '-' data-list-item--id '"' checkbox--attribute)}}{{/check-input}}
thatblindgeye marked this conversation as resolved.
Show resolved Hide resolved
{{/check}}
</div>
22 changes: 7 additions & 15 deletions src/patternfly/components/Dropdown/dropdown-toggle-check.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,13 @@
{{#if dropdown-toggle-check--attribute}}
{{{dropdown-toggle-check--attribute}}}
{{/if}}>
<input type="checkbox" id="{{dropdown--id}}-toggle-check"
{{#if (concat dropdown-toggle--IsDisabled dropdown-toggle-check--IsInProgress)}}
disabled
{{/if}}
{{#if dropdown-toggle-check--aria-label}}
aria-label="{{dropdown-toggle-check--aria-label}}"
{{else}}
aria-label="Check"
{{/if}}
{{#if dropdown-toggle-check--CheckboxIsChecked}}
checked
{{/if}}
{{#if dropdown-toggle--split-button--text}}
aria-labelledby="{{dropdown--id}}-toggle-check {{dropdown--id}}-toggle-check-text"
{{/if}}>
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input
check-input--IsChecked=(concat dropdown-toggle-check--CheckboxIsChecked)
check--IsDisabled=(concat dropdown-toggle--IsDisabled dropdown-toggle-check--IsInProgress)
thatblindgeye marked this conversation as resolved.
Show resolved Hide resolved
check-input--attribute=(concat 'id="' dropdown--id '-toggle-check" aria-label="' (ternary dropdown-toggle-check--aria-label dropdown-toggle-check--aria-label 'check')'"' (ternary dropdown-toggle--split-button--text (concat 'aria-labelledby="' dropdown--id '-toggle-check ' dropdown--id '-toggle-check-text"') ''))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤯👍

}}{{/check-input}}
{{/check}}
{{#if dropdown-toggle-check--IsProgress}}
{{> dropdown-toggle-progress}}
{{/if}}
Expand Down
4 changes: 3 additions & 1 deletion src/patternfly/components/Table/Tree-table/table-tr--tree.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@
{{#if tree-view--HasCheckboxes}}
{{#> table-td table-td--type="span" table-td--check="true"}}
<label>
<input type="checkbox" name="{{table--id}}-checkrow-{{table-tr--tree--index}}" aria-labelledby="{{table--id}}-node-{{table-tr--tree--index}}">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="' table--id '-checkrow-' table-tr--tree--index '" aria-labelledby="' table--id '-node-' table-tr--tree--index '"')}}{{/check-input}}
{{/check}}
</label>
{{/table-td}}
{{/if}}
Expand Down
15 changes: 5 additions & 10 deletions src/patternfly/components/Table/table-check.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
<label>
<input type="checkbox"
{{#if table-check--name}}
name="{{table-check--name}}"
{{/if}}
{{#if table-check--aria-labelledby}}
aria-labelledby="{{table-check--aria-labelledby}}"
{{/if}}
{{#if table-check--aria-label}}
aria-label="{{table-check--aria-label}}"
{{/if}}>
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input
check-input--attribute=(concat (ternary table-check--name (concat 'name="' table-check--name '"') '') (ternary table-check--aria-labelledby (concat ' aria-labelledby="' table-check--aria-labelledby '"') '') (ternary table-check--aria-label (concat ' aria-label="' table-check--aria-label '"') ''))
}}{{/check-input}}
{{/check}}
</label>
4 changes: 3 additions & 1 deletion src/patternfly/components/Table/templates/table--radio.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
{{#> table-td table-td--check="true"}}
<label>
<input type="radio" name="{{table--id}}-radio" aria-labelledby="{{table--id}}-node{{table-tr--index}}">
{{#> radio radio--modifier="pf-m-standalone"}}
{{#> radio-input radio-input--attribute=(concat 'name="' table--id '-radio" aria-labelledby="' table--id '-node' table-tr--index '"')}}{{/radio-input}}
{{/radio}}
</label>
{{/table-td}}
20 changes: 15 additions & 5 deletions src/patternfly/demos/DataList/data-list-expandable-compact-table.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
{{#> table-thead}}
{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="check-all" aria-label="Select all rows">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute='name="check-all" aria-label="Select all rows"'}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--attribute='scope="col"'}}
Contributor
Expand All @@ -29,7 +31,9 @@
{{#> table-tbody}}
{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow1" aria-labelledby="{{table--id}}-name1">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow1" aria-labelledby="' table--id '-name1"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-td table-td--data-label="Contributor"}}
<span id="{{table--id}}-name1">Sam Jones</span>
Expand Down Expand Up @@ -58,7 +62,9 @@
{{/table-tr}}
{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow2" aria-labelledby="{{table--id}}-name2">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow2" aria-labelledby="' table--id '-name2"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Contributor"}}
<span id="{{table--id}}-name2">Amy Miller</span>
Expand Down Expand Up @@ -87,7 +93,9 @@
{{/table-tr}}
{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow3" aria-labelledby="{{table--id}}-name3">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow3" aria-labelledby="' table--id '-name3"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Contributor"}}
<span id="{{table--id}}-name3">Steve Wilson</span>
Expand Down Expand Up @@ -116,7 +124,9 @@
{{/table-tr}}
{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow4" aria-labelledby="{{table--id}}-name4">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow4" aria-labelledby="' table--id '-name4"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-td table-td--data-label="Contributor name"}}
<span id="{{table--id}}-name4">Emma Jackson</span>
Expand Down
4 changes: 3 additions & 1 deletion src/patternfly/demos/Skeleton/table-skeleton.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
{{#> table-thead}}
{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="check-all" aria-label="Select all rows">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute='name="check-all" aria-label="Select all rows"'}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--attribute='scope="col"'}}
Repositories
Expand Down
16 changes: 12 additions & 4 deletions src/patternfly/demos/Table/table-compact-table.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@
{{#> table-tbody}}
{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow1" aria-labelledby="{{table--id}}-name1">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow1" aria-labelledby="' table--id '-name1"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Contributor"}}
<span id="{{table--id}}-name1">Sam Jones</span>
Expand Down Expand Up @@ -58,7 +60,9 @@

{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow2" aria-labelledby="{{table--id}}-name2">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow2" aria-labelledby="' table--id '-name2"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Contributor"}}
<span id="{{table--id}}-name2">Amy Miller</span>
Expand Down Expand Up @@ -88,7 +92,9 @@

{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow3" aria-labelledby="{{table--id}}-name3">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow3" aria-labelledby="' table--id '-name3"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Contributor"}}
<span id="{{table--id}}-name3">Steve Wilson</span>
Expand Down Expand Up @@ -118,7 +124,9 @@

{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow4" aria-labelledby="{{table--id}}-name4">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow4" aria-labelledby="' table--id '-name4"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Contributor name"}}
<span id="{{table--id}}-name4">Emma Jackson</span>
Expand Down
4 changes: 3 additions & 1 deletion src/patternfly/demos/Table/table-empty-state-table.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
{{#> table-thead}}
{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="check-all" aria-label="Select all rows">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute='name="check-all" aria-label="Select all rows"'}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--attribute='scope="col"'}}
Repositories
Expand Down
20 changes: 15 additions & 5 deletions src/patternfly/demos/Table/table-expandable-table.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@
{{#> table-tr}}
{{#> table-td table-td--toggle="true" table-td--button--attribute=(concat 'aria-labelledby="' table--id '-node1 expandable-toggle1" id="expandable-toggle1" aria-label="Details" aria-controls="' table--id '-content1"')}}{{/table-td}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow1" aria-labelledby="{{table--id}}-node1">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow1" aria-labelledby="' table--id '-node1"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Repository name"}}
<div>
Expand Down Expand Up @@ -77,7 +79,9 @@
{{#> table-tr table-tr--expanded="true"}}
{{#> table-td table-td--toggle="true" table-td--button--attribute=(concat 'aria-labelledby="' table--id '-node2 expandable-toggle2" id="expandable-toggle2" aria-label="Details" aria-controls="' table--id '-content2"')}}{{/table-td}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow2" aria-labelledby="{{table--id}}-node2">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow2" aria-labelledby="' table--id '-node2"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-td table-td--data-label="Repository name"}}
<div>
Expand Down Expand Up @@ -129,7 +133,9 @@
{{#> table-tr}}
{{#> table-td table-td--toggle="true" table-td--button--attribute=(concat 'aria-labelledby="' table--id '-node3 expandable-toggle3" id="expandable-toggle3" aria-label="Details" aria-controls="' table--id '-content3"')}}{{/table-td}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow3" aria-labelledby="{{table--id}}-node3">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow3" aria-labelledby="' table--id '-node3"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Repository name"}}
<div>
Expand Down Expand Up @@ -175,7 +181,9 @@
{{#> table-tr}}
{{#> table-td table-td--toggle="true" table-td--button--attribute=(concat 'aria-labelledby="' table--id '-node4 expandable-toggle4" id="expandable-toggle4" aria-label="Details" aria-controls="' table--id '-content4"')}}{{/table-td}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow4" aria-labelledby="{{table--id}}-node4">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow4" aria-labelledby="' table--id '-node4"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Repository name"}}
<div>
Expand Down Expand Up @@ -221,7 +229,9 @@
{{#> table-tr}}
{{#> table-td table-td--toggle="true" table-td--button--attribute=(concat 'aria-labelledby="' table--id '-node5 expandable-toggle5" id="expandable-toggle5" aria-label="Details" aria-controls="' table--id '-content5"')}}{{/table-td}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow5" aria-labelledby="{{table--id}}-node5">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow5" aria-labelledby="' table--id '-node5"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-td table-td--data-label="Repository name"}}
<div>
Expand Down
4 changes: 3 additions & 1 deletion src/patternfly/demos/Table/table-loading-table.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
{{#> table-thead}}
{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="check-all" aria-label="Select all rows">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute='name="check-all" aria-label="Select all rows"'}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--attribute='scope="col"'}}
Repositories
Expand Down
20 changes: 15 additions & 5 deletions src/patternfly/demos/Table/table-simple-table.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@
{{#> table-tbody}}
{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow1" aria-labelledby="{{table--id}}-node1">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow1" aria-labelledby="' table--id '-node1"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Repository name"}}
<div>
Expand Down Expand Up @@ -55,7 +57,9 @@

{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow2" aria-labelledby="{{table--id}}-node2">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow2" aria-labelledby="' table--id '-node2"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Repository name"}}
<div>
Expand Down Expand Up @@ -85,7 +89,9 @@

{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow3" aria-labelledby="{{table--id}}-node3">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow3" aria-labelledby="' table--id '-node3"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Repository name"}}
<div>
Expand Down Expand Up @@ -115,7 +121,9 @@

{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow4" aria-labelledby="{{table--id}}-node4">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow4" aria-labelledby="' table--id '-node4"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Repository name"}}
<div>
Expand Down Expand Up @@ -145,7 +153,9 @@

{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow5" aria-labelledby="{{table--id}}-node5">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow5" aria-labelledby="' table--id '-node5"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-td table-td--data-label="Repository name"}}
<div>
Expand Down
20 changes: 15 additions & 5 deletions src/patternfly/demos/Table/table-sortable-table.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@
{{#> table-tbody}}
{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow1" aria-labelledby="{{table--id}}-node1">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow1" aria-labelledby="' table--id '-node1"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Repository name"}}
<div>
Expand Down Expand Up @@ -55,7 +57,9 @@

{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow2" aria-labelledby="{{table--id}}-node2">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow2" aria-labelledby="' table--id '-node2"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Repository name"}}
<div>
Expand Down Expand Up @@ -85,7 +89,9 @@

{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow3" aria-labelledby="{{table--id}}-node3">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow3" aria-labelledby="' table--id '-node3"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Repository name"}}
<div>
Expand Down Expand Up @@ -115,7 +121,9 @@

{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow4" aria-labelledby="{{table--id}}-node4">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow4" aria-labelledby="' table--id '-node4"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-th table-th--data-label="Repository name"}}
<div>
Expand Down Expand Up @@ -145,7 +153,9 @@

{{#> table-tr}}
{{#> table-td table-td--check="true"}}
<input type="checkbox" name="checkrow4" aria-labelledby="{{table--id}}-node5">
{{#> check check--modifier="pf-m-standalone"}}
{{#> check-input check-input--attribute=(concat 'name="checkrow5" aria-labelledby="' table--id '-node5"')}}{{/check-input}}
{{/check}}
{{/table-td}}
{{#> table-td table-td--data-label="Repository name"}}
<div>
Expand Down