chore: updated components to use standalone checkbox/radio (patternfl…

…y#5355)
mattnolting · May 18, 2023 · 5aeb2f8 · 5aeb2f8
1 parent 0980412
commit 5aeb2f8
Show file tree

Hide file tree

Showing 20 changed files with 147 additions and 90 deletions.
diff --git a/src/patternfly/components/Check/check-input.hbs b/src/patternfly/components/Check/check-input.hbs
@@ -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}}>
diff --git a/src/patternfly/components/Check/check.hbs b/src/patternfly/components/Check/check.hbs
@@ -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}}>
diff --git a/src/patternfly/components/Check/examples/Check.md b/src/patternfly/components/Check/examples/Check.md
@@ -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}}
 ```
 

diff --git a/src/patternfly/components/DataList/data-list-check.hbs b/src/patternfly/components/DataList/data-list-check.hbs
@@ -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>
diff --git a/src/patternfly/components/Dropdown/dropdown-toggle-check.hbs b/src/patternfly/components/Dropdown/dropdown-toggle-check.hbs
@@ -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"') ''))
+    }}{{/check-input}}
+  {{/check}}
   {{#if dropdown-toggle-check--IsProgress}}
     {{> dropdown-toggle-progress}}
   {{/if}}

diff --git a/src/patternfly/components/Table/Tree-table/table-tr--tree.hbs b/src/patternfly/components/Table/Tree-table/table-tr--tree.hbs
@@ -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}}

diff --git a/src/patternfly/components/Table/table-check.hbs b/src/patternfly/components/Table/table-check.hbs
@@ -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>
diff --git a/src/patternfly/components/Table/templates/table--radio.hbs b/src/patternfly/components/Table/templates/table--radio.hbs
@@ -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}}
diff --git a/src/patternfly/demos/DataList/data-list-actionable-data-list.hbs b/src/patternfly/demos/DataList/data-list-actionable-data-list.hbs
@@ -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"}}
@@ -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"}}
@@ -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"}}
@@ -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"}}

diff --git a/src/patternfly/demos/DataList/data-list-expandable-compact-table.hbs b/src/patternfly/demos/DataList/data-list-expandable-compact-table.hbs
@@ -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
@@ -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>
@@ -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>
@@ -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>
@@ -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>

diff --git a/src/patternfly/demos/DataList/data-list-expandable-data-list.hbs b/src/patternfly/demos/DataList/data-list-expandable-data-list.hbs
@@ -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"}}
@@ -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"}}
@@ -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"}}
@@ -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"}}
@@ -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"}}

diff --git a/src/patternfly/demos/Skeleton/table-skeleton.hbs b/src/patternfly/demos/Skeleton/table-skeleton.hbs
@@ -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

diff --git a/src/patternfly/demos/Table/table-compact-table.hbs b/src/patternfly/demos/Table/table-compact-table.hbs
@@ -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>
@@ -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>
@@ -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>
@@ -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>

diff --git a/src/patternfly/demos/Table/table-empty-state-table.hbs b/src/patternfly/demos/Table/table-empty-state-table.hbs
@@ -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