fix(data table): shared checkbox groups label id as a variable

salesforce-ux · Apr 20, 2018 · 7951b8a · 7951b8a
1 parent 98a9b4b
commit 7951b8a
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/ui/components/data-tables/responsive/example.jsx b/ui/components/data-tables/responsive/example.jsx
@@ -11,6 +11,8 @@ import classNames from 'classnames';
 // Partial(s)
 /// ////////////////////////////////////////
 
+const checkboxRadioGroupHeaderId = 'check-group-header';
+
 let Table = props => (
   <table
     className={classNames('slds-table slds-table_bordered', props.className)}
@@ -22,15 +24,15 @@ let Table = props => (
 let HeadRowData = props => (
   <tr className="slds-text-title_caps">
     <th className="slds-cell-shrink" scope="col">
-      <span className="slds-assistive-text" id="check-group-header">
+      <span className="slds-assistive-text" id={checkboxRadioGroupHeaderId}>
         Choose a row to select
       </span>
       <Checkbox
         hideLabel
         labelId={'check-button-label-all'}
         id={'checkbox-all'}
         label={'Select all'}
-        groupId="check-group-header"
+        groupId={checkboxRadioGroupHeaderId}
         checked={props.checked}
       />
     </th>
@@ -130,7 +132,7 @@ let RowData = props => (
         labelId={`check-button-label-0${props.index}`}
         id={`checkbox-0${props.index}`}
         label={`Select item ${props.index}`}
-        groupId="check-group-header"
+        groupId={checkboxRadioGroupHeaderId}
         checked={props.checked}
       />
     </td>