Changed RadioButtonGroup to support children rendering (#3566)

grommet · Nov 21, 2019 · b41bc12 · b41bc12
1 parent b6ca939
commit b41bc12
Show file tree

Hide file tree

Showing 10 changed files with 358 additions and 129 deletions.
diff --git a/src/js/components/RadioButton/RadioButton.js b/src/js/components/RadioButton/RadioButton.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { compose } from 'recompose';
 
 import { withTheme } from 'styled-components';
@@ -29,6 +29,7 @@ const RadioButton = ({
   theme,
   ...rest
 }) => {
+  const [hover, setHover] = useState();
   const normalizedLabel =
     typeof label === 'string' ? <span>{label}</span> : label;
 
@@ -48,10 +49,12 @@ const RadioButton = ({
           event.stopPropagation();
         }
       }}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
     >
       <StyledRadioButton
         as={Box}
-        margin={{ right: theme.radioButton.gap || 'small' }}
+        margin={label ? { right: theme.radioButton.gap || 'small' } : undefined}
       >
         <StyledRadioButtonInput
           {...rest}
@@ -66,7 +69,7 @@ const RadioButton = ({
           })}
         />
         {children ? (
-          children({ checked })
+          children({ checked, hover })
         ) : (
           <StyledRadioButtonBox
             focus={focus}

diff --git a/src/js/components/RadioButton/__tests__/__snapshots__/RadioButton-test.js.snap b/src/js/components/RadioButton/__tests__/__snapshots__/RadioButton-test.js.snap
@@ -19,7 +19,6 @@ exports[`RadioButton basic 1`] = `
   box-sizing: border-box;
   outline: none;
   max-width: 100%;
-  margin-right: 12px;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -87,12 +86,6 @@ exports[`RadioButton basic 1`] = `
   cursor: pointer;
 }
 
-@media only screen and (max-width:768px) {
-  .c2 {
-    margin-right: 6px;
-  }
-}
-
 @media only screen and (max-width:768px) {
   .c4 {
     border: solid 2px rgba(0,0,0,0.15);
@@ -105,6 +98,8 @@ exports[`RadioButton basic 1`] = `
   <label
     className="c1"
     onClick={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
   >
     <div
       className="c2 "
@@ -124,6 +119,8 @@ exports[`RadioButton basic 1`] = `
     className="c1"
     htmlFor="test id"
     onClick={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
   >
     <div
       className="c2 "
@@ -162,7 +159,6 @@ exports[`RadioButton checked 1`] = `
   box-sizing: border-box;
   outline: none;
   max-width: 100%;
-  margin-right: 12px;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -237,12 +233,6 @@ exports[`RadioButton checked 1`] = `
   fill: #7D4CDB;
 }
 
-@media only screen and (max-width:768px) {
-  .c2 {
-    margin-right: 6px;
-  }
-}
-
 @media only screen and (max-width:768px) {
   .c4 {
     border: solid 2px #7D4CDB;
@@ -255,6 +245,8 @@ exports[`RadioButton checked 1`] = `
   <label
     className="c1"
     onClick={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
   >
     <div
       className="c2 "
@@ -305,7 +297,6 @@ exports[`RadioButton children 1`] = `
   box-sizing: border-box;
   outline: none;
   max-width: 100%;
-  margin-right: 12px;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -364,12 +355,6 @@ exports[`RadioButton children 1`] = `
   cursor: pointer;
 }
 
-@media only screen and (max-width:768px) {
-  .c2 {
-    margin-right: 6px;
-  }
-}
-
 @media only screen and (max-width:768px) {
   .c4 {
     padding: 6px;
@@ -382,6 +367,8 @@ exports[`RadioButton children 1`] = `
   <label
     className="c1"
     onClick={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
   >
     <div
       className="c2 "
@@ -400,6 +387,8 @@ exports[`RadioButton children 1`] = `
   <label
     className="c1"
     onClick={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
   >
     <div
       className="c2 "
@@ -438,7 +427,6 @@ exports[`RadioButton disabled 1`] = `
   box-sizing: border-box;
   outline: none;
   max-width: 100%;
-  margin-right: 12px;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
@@ -540,12 +528,6 @@ exports[`RadioButton disabled 1`] = `
   fill: #7D4CDB;
 }
 
-@media only screen and (max-width:768px) {
-  .c2 {
-    margin-right: 6px;
-  }
-}
-
 @media only screen and (max-width:768px) {
   .c4 {
     border: solid 2px rgba(0,0,0,0.15);
@@ -565,6 +547,8 @@ exports[`RadioButton disabled 1`] = `
     className="c1"
     disabled={true}
     onClick={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
   >
     <div
       className="c2 "
@@ -585,6 +569,8 @@ exports[`RadioButton disabled 1`] = `
     className="c1"
     disabled={true}
     onClick={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
   >
     <div
       className="c2 "
@@ -628,47 +614,47 @@ exports[`RadioButton label 1`] = `
   -webkit-font-smoothing: antialiased;
 }
 
-.c2 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   box-sizing: border-box;
   outline: none;
   max-width: 100%;
-  margin-right: 12px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border: solid 2px rgba(0,0,0,0.15);
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  height: 24px;
+  width: 24px;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border-radius: 100%;
 }
 
-.c4 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   box-sizing: border-box;
   outline: none;
   max-width: 100%;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border: solid 2px rgba(0,0,0,0.15);
+  margin-right: 12px;
   min-width: 0;
   min-height: 0;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  height: 24px;
-  width: 24px;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  border-radius: 100%;
 }
 
 .c1 {
@@ -705,14 +691,14 @@ exports[`RadioButton label 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c2 {
-    margin-right: 6px;
+  .c4 {
+    border: solid 2px rgba(0,0,0,0.15);
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c4 {
-    border: solid 2px rgba(0,0,0,0.15);
+  .c2 {
+    margin-right: 6px;
   }
 }
 
@@ -722,6 +708,8 @@ exports[`RadioButton label 1`] = `
   <label
     className="c1"
     onClick={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
   >
     <div
       className="c2 "
@@ -743,6 +731,8 @@ exports[`RadioButton label 1`] = `
   <label
     className="c1"
     onClick={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
   >
     <div
       className="c2 "

diff --git a/src/js/components/RadioButtonGroup/README.md b/src/js/components/RadioButtonGroup/README.md
@@ -11,6 +11,19 @@ import { RadioButtonGroup } from 'grommet';
 
 ## Properties
 
+**children**
+
+Function that will be called to render the visual representation.
+      It will be passed an object indicating whether the button is checked. It
+      should return a react element.
+      For example:
+      `children={(option, { checked }) => <Box ...>{...}</Box>}`
+
+
+```
+function
+```
+
 **name**
 
 Required. The DOM name attribute value to use for the underlying <input/> 

diff --git a/src/js/components/RadioButtonGroup/RadioButtonGroup.js b/src/js/components/RadioButtonGroup/RadioButtonGroup.js
@@ -7,6 +7,7 @@ import { RadioButton } from '../RadioButton';
 const RadioButtonGroup = forwardRef(
   (
     {
+      children,
       gap = 'small',
       name,
       onChange,
@@ -93,7 +94,7 @@ const RadioButtonGroup = forwardRef(
               }}
               key={optionValue}
               name={name}
-              label={label}
+              label={!children ? label : undefined}
               disabled={disabled}
               checked={optionValue === value}
               focus={
@@ -105,7 +106,9 @@ const RadioButtonGroup = forwardRef(
               onChange={onChange}
               onFocus={onFocus}
               onBlur={onBlur}
-            />
+            >
+              {children ? state => children(optionsProp[index], state) : null}
+            </RadioButton>
           ))}
         </Box>
       </Keyboard>

diff --git a/src/js/components/RadioButtonGroup/__tests__/RadioButtonGroup-test.js b/src/js/components/RadioButtonGroup/__tests__/RadioButtonGroup-test.js
@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
 import { Grommet } from '../../Grommet';
+import { Box } from '../../Box';
 import { RadioButtonGroup } from '..';
 
 describe('RadioButtonGroup', () => {
@@ -68,4 +69,19 @@ describe('RadioButtonGroup', () => {
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  test('children', () => {
+    const child = ({ checked }) => (
+      <Box pad="small" background={checked ? 'accent-1' : 'control'} />
+    );
+    const component = renderer.create(
+      <Grommet>
+        <RadioButtonGroup name="test" options={['one', 'two']} value="one">
+          {child}
+        </RadioButtonGroup>
+      </Grommet>,
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });