refactor(checkbox): update checkbox to 7.x (carbon-design-system#514)

* refactor(checkbox): update checkbox to 7.x * fix(checkbox): update checkbox story to use fieldset * fix(a11y): update a11y test for checkbox
joshblack · Apr 12, 2017 · 997c7b1 · 997c7b1
1 parent e16b173
commit 997c7b1
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 33 deletions.
diff --git a/.storybook/components/CheckboxStory.js b/.storybook/components/CheckboxStory.js
@@ -4,8 +4,6 @@ import Checkbox from '../../components/Checkbox';
 
 const checkboxEvents = {
   className: 'some-class',
-  labelText: 'Checkbox',
-  id: 'checkbox-1',
   onChange: action('onChange'),
 };
 
@@ -19,7 +17,11 @@ storiesOf('Checkbox', module)
       checked property instead.
     `,
     () => (
-      <Checkbox defaultChecked {...checkboxEvents} />
+      <fieldset className="bx--fieldset">
+        <legend className="bx--label">Favorite Colors</legend>
+        <Checkbox defaultChecked {...checkboxEvents} id="red" labelText="Red" />
+        <Checkbox defaultChecked {...checkboxEvents} id="blue" labelText="Blue" />
+      </fieldset>
     ),
   )
   .addWithInfo(
@@ -30,7 +32,11 @@ storiesOf('Checkbox', module)
       unchecked. To use the component in a controlled way, you should set the checked property instead.
     `,
     () => (
-      <Checkbox {...checkboxEvents} />
+      <fieldset className="bx--fieldset">
+        <legend className="bx--label">Favorite Colors</legend>
+        <Checkbox {...checkboxEvents} id="red" labelText="Red" />
+        <Checkbox {...checkboxEvents} id="blue" labelText="Blue" />
+      </fieldset>
     )
   )
   .addWithInfo(
@@ -40,5 +46,9 @@ storiesOf('Checkbox', module)
       The example below shows a disabled Checkbox component.
     `,
     () => (
-      <Checkbox disabled {...checkboxEvents} />
+      <fieldset disabled className="bx--fieldset">
+        <legend className="bx--label">Favorite Colors</legend>
+        <Checkbox {...checkboxEvents} id="red" labelText="Red" />
+        <Checkbox {...checkboxEvents} id="blue" labelText="Blue" />
+      </fieldset>
   ));
diff --git a/a11y/baselines/Checkbox.json b/a11y/baselines/Checkbox.json
@@ -67,8 +67,8 @@
                     "ruleId": "1088",
                     "help": "idhi_accessibility_check_g1088.html",
                     "msgArgs": [],
-                    "xpath": "/html[1]/body[1]/label[1]/input[1]",
-                    "snippet": "<input style=\"\" id=\"test id\" class=\"bx--checkbox bx--checkbox--svg\" type=\"checkbox\">",
+                    "xpath": "/html[1]/body[1]/div[1]/label[1]/input[1]",
+                    "snippet": "<input style=\"\" id=\"test id\" class=\"bx--checkbox\" type=\"checkbox\">",
                     "bounds": {
                         "left": 0,
                         "top": 0,
@@ -93,9 +93,9 @@
         "reportLevels": [
             "violation"
         ],
-        "startScan": 1491324747939
+        "startScan": 1491838931853
     },
-    "scanID": "95b1a0ca-ffee-4649-a9e4-4b7003b54257",
+    "scanID": "dd4610e0-9991-4fd0-a373-d58c6a6c7d19",
     "toolID": "@ibma/aat-v1.1.0",
     "label": "Checkbox"
 }
diff --git a/components/Checkbox.js b/components/Checkbox.js
@@ -19,30 +19,32 @@ const defaultProps = {
 const Checkbox = ({ className, id, labelText, onChange, ...other }) => {
   let input;
   const wrapperClasses = classNames(
-    'bx--checkbox__label',
-    [className]: className,
+    'bx--checkbox-label',
+    className
   );
 
   return (
-    <label htmlFor={id} className={wrapperClasses}>
-      <input
-        {...other}
-        type="checkbox"
-        onChange={evt => { onChange(input.checked, id, evt); }}
-        className="bx--checkbox bx--checkbox--svg"
-        id={id}
-        ref={el => { input = el; }}
-      />
-
-      <span className="bx--checkbox__appearance">
-        <Icon
-          className="bx--checkbox__checkmark"
-          description="checkmark"
-          name="checkmark"
+    <div className="bx--form-item bx--checkbox-wrapper">
+      <label htmlFor={id} className={wrapperClasses}>
+        <input
+          {...other}
+          type="checkbox"
+          onChange={evt => { onChange(input.checked, id, evt); }}
+          className="bx--checkbox"
+          id={id}
+          ref={el => { input = el; }}
         />
-      </span>
-      <span className="bx--checkbox__label-text">{labelText}</span>
-    </label>
+
+        <span className="bx--checkbox-appearance">
+          <Icon
+            className="bx--checkbox-checkmark"
+            description="checkmark"
+            name="checkmark"
+          />
+        </span>
+        <span className="bx--checkbox-label-text">{labelText}</span>
+      </label>
+    </div>
   );
 };
 

diff --git a/components/__tests__/Checkbox-test.js b/components/__tests__/Checkbox-test.js
@@ -15,7 +15,7 @@ describe('Checkbox', () => {
       });
 
       it('has the expected classes', () => {
-        expect(label.hasClass('bx--checkbox__label')).toEqual(true);
+        expect(label.hasClass('bx--checkbox-label')).toEqual(true);
       });
 
       it('has the expected htmlFor value', () => {
@@ -29,20 +29,20 @@ describe('Checkbox', () => {
       describe('firstSpan', () => {
         const span1 = label.find('span').first();
         it('has the expected className', () => {
-          expect(span1.props().className).toEqual('bx--checkbox__appearance');
+          expect(span1.props().className).toEqual('bx--checkbox-appearance');
         });
 
         it('has expected children', () => {
           const icon = span1.childAt(0);
-          expect(icon.props().className).toEqual('bx--checkbox__checkmark');
+          expect(icon.props().className).toEqual('bx--checkbox-checkmark');
           expect(icon.props().name).toEqual('checkmark');
         });
       });
 
       describe('secondSpan', () => {
         const span2 = label.find('span').last();
         it('has the expected className', () => {
-          expect(span2.props().className).toEqual('bx--checkbox__label-text');
+          expect(span2.props().className).toEqual('bx--checkbox-label-text');
         });
         it('has the expected labelText', () => {
           expect(span2.props().children).toEqual('testingLabel');