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 all 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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/patternfly/components/Check/check-input.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
{{#if check-input--IsChecked}}
checked
{{/if}}
{{#if check-input--IsDisabled}}
disabled
{{/if}}
{{#if check-input--attribute}}
{{{check-input--attribute}}}
{{/if}}
{{#if check--IsDisabled}}
disabled
{{/if}}>
5 changes: 4 additions & 1 deletion src/patternfly/components/Check/check.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,8 @@
{{#if check--attribute}}
{{{check--attribute}}}
{{/if}}>
{{> @partial-block}}
{{> @partial-block
check-input--IsDisabled=check--IsDisabled
check-label--IsDisabled=check--IsDisabled
}}
</{{#if check--type}}{{check--type}}{{else}}div{{/if}}>
12 changes: 6 additions & 6 deletions src/patternfly/components/Check/examples/Check.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,13 @@ cssPrefix: pf-c-check

### Disabled
```hbs
{{#> check}}
{{#> check-input check-input--attribute='id="check-disabled" name="check-disabled" disabled'}}{{/check-input}}
{{#> check-label check-label--modifier="pf-m-disabled" check-label--attribute='for="check-disabled"'}}Check disabled{{/check-label}}
{{#> check check--isDisabled="true"}}
{{#> check-input check-input--attribute='id="check-disabled" name="check-disabled"'}}{{/check-input}}
{{#> check-label check-label--attribute='for="check-disabled"'}}Check disabled{{/check-label}}
{{/check}}
{{#> check}}
{{#> check-input check-input--attribute='id="check-disabled-2" name="check-disabled-2" checked disabled'}}{{/check-input}}
{{#> check-label check-label--modifier="pf-m-disabled" check-label--attribute='for="check-disabled-2"'}}Check disabled checked{{/check-label}}
{{#> check check--IsDisabled="true"}}
{{#> check-input check-input--attribute='id="check-disabled-2" name="check-disabled-2" checked'}}{{/check-input}}
{{#> check-label check-label--attribute='for="check-disabled-2"'}}Check disabled checked{{/check-label}}
{{/check}}
```

Expand Down
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 '"' data-list-check-checkbox--attribute)}}{{/check-input}}
{{/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-input--IsDisabled=(concat dropdown-toggle--IsDisabled dropdown-toggle-check--IsInProgress)
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}}
8 changes: 4 additions & 4 deletions src/patternfly/demos/DataList/data-list-actionable-data-list.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{{#> data-list-item data-list-item--id="item-1"}}
{{#> data-list-item-row}}
{{#> data-list-item-control}}
{{#> data-list-check checkbox--attribute=(concat 'type="checkbox" name="check-action-check1" aria-labelledby="' data-list--id '-item-1"')}}{{/data-list-check}}
{{#> data-list-check data-list-check-checkbox--attribute=(concat 'type="checkbox" name="check-action-check1" aria-labelledby="' data-list--id '-item-1"')}}{{/data-list-check}}
{{/data-list-item-control}}
{{#> data-list-item-content}}
{{#> data-list-cell data-list-cell--modifier="pf-m-align-left"}}
Expand All @@ -16,7 +16,7 @@
{{#> data-list-item data-list-item--id="item-2"}}
{{#> data-list-item-row}}
{{#> data-list-item-control}}
{{#> data-list-check checkbox--attribute=(concat 'type="checkbox" name="check-action-check2" aria-labelledby="' data-list--id '-item-2"')}}{{/data-list-check}}
{{#> data-list-check data-list-check-checkbox--attribute=(concat 'type="checkbox" name="check-action-check2" aria-labelledby="' data-list--id '-item-2"')}}{{/data-list-check}}
{{/data-list-item-control}}
{{#> data-list-item-content}}
{{#> data-list-cell data-list-cell--modifier="pf-m-align-left"}}
Expand All @@ -30,7 +30,7 @@
{{#> data-list-item data-list-item--id="item-3"}}
{{#> data-list-item-row}}
{{#> data-list-item-control}}
{{#> data-list-check checkbox--attribute=(concat 'type="checkbox" name="check-action-check3" aria-labelledby="' data-list--id '-item-3"')}}{{/data-list-check}}
{{#> data-list-check data-list-check-checkbox--attribute=(concat 'type="checkbox" name="check-action-check3" aria-labelledby="' data-list--id '-item-3"')}}{{/data-list-check}}
{{/data-list-item-control}}
{{#> data-list-item-content}}
{{#> data-list-cell data-list-cell--modifier="pf-m-align-left pf-m-flex-2"}}
Expand All @@ -44,7 +44,7 @@
{{#> data-list-item data-list-item--id="item-4"}}
{{#> data-list-item-row}}
{{#> data-list-item-control}}
{{#> data-list-check checkbox--attribute=(concat 'type="checkbox" name="check-action-check4" aria-labelledby="' data-list--id '-item-4"')}}{{/data-list-check}}
{{#> data-list-check data-list-check-checkbox--attribute=(concat 'type="checkbox" name="check-action-check4" aria-labelledby="' data-list--id '-item-4"')}}{{/data-list-check}}
{{/data-list-item-control}}
{{#> data-list-item-content}}
{{#> data-list-cell data-list-cell--modifier="pf-m-align-left pf-m-flex-2"}}
Expand Down
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
10 changes: 5 additions & 5 deletions src/patternfly/demos/DataList/data-list-expandable-data-list.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
{{#> data-list-item-row}}
{{#> data-list-item-control}}
{{#> data-list-toggle button--attribute=(concat 'aria-labelledby="ex-toggle1 ' data-list--id '-item1" id="ex-toggle1" aria-label="Toggle details for" aria-expanded="false" aria-controls="content-1"')}}{{/data-list-toggle}}
{{#> data-list-check checkbox--attribute=(concat 'type="checkbox" name="check-expandable-check1" aria-labelledby="' data-list--id '-item-1"')}}{{/data-list-check}}
{{#> data-list-check data-list-check-checkbox--attribute=(concat 'type="checkbox" name="check-expandable-check1" aria-labelledby="' data-list--id '-item-1"')}}{{/data-list-check}}
{{/data-list-item-control}}
{{#> data-list-item-content}}
{{#> data-list-cell data-list-cell--modifier="pf-m-align-left"}}
Expand All @@ -23,7 +23,7 @@
{{#> data-list-item-row}}
{{#> data-list-item-control}}
{{#> data-list-toggle button--attribute=(concat 'aria-labelledby="ex-toggle2 ' data-list--id '-item2" id="ex-toggle2" aria-label="Toggle details for" aria-expanded="false" aria-controls="content-2"')}}{{/data-list-toggle}}
{{#> data-list-check checkbox--attribute=(concat 'type="checkbox" name="check-expandable-check2" aria-labelledby="' data-list--id '-item-2"')}}{{/data-list-check}}
{{#> data-list-check data-list-check-checkbox--attribute=(concat 'type="checkbox" name="check-expandable-check2" aria-labelledby="' data-list--id '-item-2"')}}{{/data-list-check}}
{{/data-list-item-control}}
{{#> data-list-item-content}}
{{#> data-list-cell data-list-cell--modifier="pf-m-align-left"}}
Expand All @@ -42,7 +42,7 @@
{{#> data-list-item-row}}
{{#> data-list-item-control}}
{{#> data-list-toggle button--attribute=(concat 'aria-labelledby="ex-toggle3 ' data-list--id '-item3" id="ex-toggle3" aria-label="Toggle details for" aria-expanded="false" aria-controls="content-3"')}}{{/data-list-toggle}}
{{#> data-list-check checkbox--attribute=(concat 'type="checkbox" name="check-expandable-check3" aria-labelledby="' data-list--id '-item-3"')}}{{/data-list-check}}
{{#> data-list-check data-list-check-checkbox--attribute=(concat 'type="checkbox" name="check-expandable-check3" aria-labelledby="' data-list--id '-item-3"')}}{{/data-list-check}}
{{/data-list-item-control}}
{{#> data-list-item-content}}
{{#> data-list-cell data-list-cell--modifier="pf-m-align-left"}}
Expand All @@ -60,7 +60,7 @@
{{#> data-list-item-row}}
{{#> data-list-item-control}}
{{#> data-list-toggle button--attribute=(concat 'aria-labelledby="ex-toggle4 ' data-list--id '-item4" id="ex-toggle4" aria-label="Toggle details for" aria-expanded="false" aria-controls="content-4"')}}{{/data-list-toggle}}
{{#> data-list-check checkbox--attribute=(concat 'type="checkbox" name="check-expandable-check4" aria-labelledby="' data-list--id '-item-4"')}}{{/data-list-check}}
{{#> data-list-check data-list-check-checkbox--attribute=(concat 'type="checkbox" name="check-expandable-check4" aria-labelledby="' data-list--id '-item-4"')}}{{/data-list-check}}
{{/data-list-item-control}}
{{#> data-list-item-content}}
{{#> data-list-cell data-list-cell--modifier="pf-m-align-left"}}
Expand All @@ -79,7 +79,7 @@
{{#> data-list-item-row}}
{{#> data-list-item-control}}
{{#> data-list-toggle button--attribute=(concat 'aria-labelledby="ex-toggle5 ' data-list--id '-item5" id="ex-toggle5" aria-label="Toggle details for" aria-expanded="false" aria-controls="content-5"')}}{{/data-list-toggle}}
{{#> data-list-check checkbox--attribute=(concat 'type="checkbox" name="check-expandable-check5" aria-labelledby="' data-list--id '-item-5"')}}{{/data-list-check}}
{{#> data-list-check data-list-check-checkbox--attribute=(concat 'type="checkbox" name="check-expandable-check5" aria-labelledby="' data-list--id '-item-5"')}}{{/data-list-check}}
{{/data-list-item-control}}
{{#> data-list-item-content}}
{{#> data-list-cell data-list-cell--modifier="pf-m-align-left"}}
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
Loading