Pass CheckboxGroup/RadioGroup prefixCls down to children (#10002)

Close #9950

components/checkbox/Group.tsx

@@ -41,7 +41,7 @@ export interface CheckboxGroupContext {
 export default class CheckboxGroup extends React.Component<CheckboxGroupProps, CheckboxGroupState> {
   static defaultProps = {
     options: [],
-    prefixCls: 'ant-checkbox-group',
+    prefixCls: 'ant-checkbox',
   };
 
   static propTypes = {
@@ -115,23 +115,25 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps, C
   render() {
     const { props, state } = this;
     const { prefixCls, className, style, options } = props;
+    const groupPrefixCls = `${prefixCls}-group`;
     let children = props.children;
     if (options && options.length > 0) {
       children = this.getOptions().map(option => (
         <Checkbox
+          prefixCls={prefixCls}
           key={option.value}
           disabled={'disabled' in option ? option.disabled : props.disabled}
           value={option.value}
           checked={state.value.indexOf(option.value) !== -1}
           onChange={() => this.toggleOption(option)}
-          className={`${prefixCls}-item`}
+          className={`${groupPrefixCls}-item`}
         >
           {option.label}
         </Checkbox>
       ));
     }
 
-    const classString = classNames(prefixCls, className);
+    const classString = classNames(groupPrefixCls, className);
     return (
       <div className={classString} style={style}>
         {children}

components/checkbox/__tests__/__snapshots__/group.test.js.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckboxGroup passes prefixCls down to checkbox 1`] = `
+<div
+  class="my-checkbox-group"
+>
+  <label
+    class="my-checkbox-group-item my-checkbox-wrapper"
+  >
+    <span
+      class="my-checkbox"
+    >
+      <input
+        class="my-checkbox-input"
+        type="checkbox"
+        value="Apple"
+      />
+      <span
+        class="my-checkbox-inner"
+      />
+    </span>
+    <span>
+      Apple
+    </span>
+  </label>
+  <label
+    class="my-checkbox-group-item my-checkbox-wrapper"
+  >
+    <span
+      class="my-checkbox"
+    >
+      <input
+        class="my-checkbox-input"
+        type="checkbox"
+        value="Orange"
+      />
+      <span
+        class="my-checkbox-inner"
+      />
+    </span>
+    <span>
+      Orange
+    </span>
+  </label>
+</div>
+`;

components/checkbox/__tests__/group.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, render } from 'enzyme';
 import Checkbox from '../index';
 
 describe('CheckboxGroup', () => {
@@ -51,4 +51,17 @@ describe('CheckboxGroup', () => {
     groupWrapper.find('.ant-checkbox-input').at(1).simulate('change');
     expect(onChangeGroup).toBeCalledWith(['Apple']);
   });
+
+  it('passes prefixCls down to checkbox', () => {
+    const options = [
+      { label: 'Apple', value: 'Apple' },
+      { label: 'Orange', value: 'Orange' },
+    ];
+
+    const wrapper = render(
+      <Checkbox.Group prefixCls="my-checkbox" options={options} />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });

components/radio/__tests__/__snapshots__/group.test.js.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Radio passes prefixCls down to radio 1`] = `
+<div
+  class="my-radio-group"
+>
+  <label
+    class="my-radio-wrapper"
+  >
+    <span
+      class="my-radio"
+    >
+      <input
+        class="my-radio-input"
+        type="radio"
+        value="Apple"
+      />
+      <span
+        class="my-radio-inner"
+      />
+    </span>
+    <span>
+      Apple
+    </span>
+  </label>
+  <label
+    class="my-radio-wrapper"
+  >
+    <span
+      class="my-radio"
+    >
+      <input
+        class="my-radio-input"
+        type="radio"
+        value="Orange"
+      />
+      <span
+        class="my-radio-inner"
+      />
+    </span>
+    <span>
+      Orange
+    </span>
+  </label>
+</div>
+`;

components/radio/__tests__/group.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { shallow, mount, render } from 'enzyme';
 import Radio from '../radio';
 import RadioGroup from '../group';
 
@@ -112,4 +112,17 @@ describe('Radio', () => {
       expect(el.props().name).toEqual(GROUP_NAME);
     }));
   });
+
+  it('passes prefixCls down to radio', () => {
+    const options = [
+      { label: 'Apple', value: 'Apple' },
+      { label: 'Orange', value: 'Orange' },
+    ];
+
+    const wrapper = render(
+      <RadioGroup prefixCls="my-radio" options={options} />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });

components/radio/group.tsx

@@ -20,6 +20,7 @@ function getCheckedValue(children: React.ReactNode) {
 export default class RadioGroup extends React.Component<RadioGroupProps, RadioGroupState> {
   static defaultProps = {
     disabled: false,
+    prefixCls: 'ant-radio',
   };
 
   static childContextTypes = {
@@ -89,9 +90,10 @@ export default class RadioGroup extends React.Component<RadioGroupProps, RadioGr
   }
   render() {
     const props = this.props;
-    const { prefixCls = 'ant-radio-group', className = '', options } = props;
+    const { prefixCls, className = '', options } = props;
-    const classString = classNames(prefixCls, {
+    const groupPrefixCls = `${prefixCls}-group`;
-      [`${prefixCls}-${props.size}`]: props.size,
+    const classString = classNames(groupPrefixCls, {
+      [`${groupPrefixCls}-${props.size}`]: props.size,
     }, className);
 
     let children: React.ReactChildren[] | React.ReactElement<any>[] | React.ReactNode = props.children;
@@ -103,6 +105,7 @@ export default class RadioGroup extends React.Component<RadioGroupProps, RadioGr
           return (
             <Radio
               key={index}
+              prefixCls={prefixCls}
               disabled={this.props.disabled}
               value={option}
               onChange={this.onRadioChange}
@@ -115,6 +118,7 @@ export default class RadioGroup extends React.Component<RadioGroupProps, RadioGr
           return (
             <Radio
               key={index}
+              prefixCls={prefixCls}
               disabled={option.disabled || this.props.disabled}
               value={option.value}
               onChange={this.onRadioChange}