feat(Radio): prop children

fluent-org · Jul 9, 2019 · 9093783 · 9093783
1 parent 72f6cc6
commit 9093783
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git a/packages/fluent-ui.com/src/docs/components/Radio/README.md b/packages/fluent-ui.com/src/docs/components/Radio/README.md
@@ -23,6 +23,24 @@ components: Radio
 }
 ```
 
+## With Label
+
+```jsx
+() => {
+  const [checked, set] = React.useState('a')
+  function handleChange(c) {
+    set(c)
+  }
+  return (
+    <>
+      <Radio value='a' checked={checked === 'a'} onChange={handleChange}>aaa</Radio>
+      <Radio value='b' checked={checked === 'b'} onChange={handleChange}>bbb</Radio>
+      <Radio value='c' checked={checked === 'c'} onChange={handleChange}>ccc</Radio>
+    </>
+  )
+}
+```
+
 ## Disabled
 
 ```jsx

diff --git a/packages/fluent-ui/src/Checkbox/Checkbox.styled.ts b/packages/fluent-ui/src/Checkbox/Checkbox.styled.ts
@@ -4,6 +4,7 @@ export const StyledLabel = styled.label<{ disabled?: boolean }>`
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
+  vertical-align: middle;
   cursor: ${({ disabled }): string => (disabled ? 'not-allowed' : 'pointer')};
 `
 

diff --git a/packages/fluent-ui/src/Radio/Radio.tsx b/packages/fluent-ui/src/Radio/Radio.tsx
@@ -1,33 +1,38 @@
 import * as React from 'react'
 import { StyledRadioWrapper, StyledRadio, StyledCircle } from './Radio.styled'
+import { StyledLabel, StyledLabelText } from '../Checkbox/Checkbox.styled'
 
 interface RadioProps {
   checked?: boolean
   value?: string
   onChange?: (checked: string) => void
   disabled?: boolean
+  children?: React.ReactNode
 }
 
 const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
   (
-    { checked, value, onChange, disabled }: RadioProps,
+    { checked, value, onChange, disabled, children }: RadioProps,
     ref
   ): React.ReactElement => {
     function handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
       onChange && onChange(e.target.value)
     }
     return (
-      <StyledRadioWrapper checked={checked} disabled={disabled}>
-        {checked && <StyledCircle disabled={disabled} />}
-        <StyledRadio
-          ref={ref}
-          type="radio"
-          checked={checked}
-          value={value}
-          onChange={handleChange}
-          disabled={disabled}
-        />
-      </StyledRadioWrapper>
+      <StyledLabel disabled={disabled}>
+        <StyledRadioWrapper checked={checked} disabled={disabled}>
+          {checked && <StyledCircle disabled={disabled} />}
+          <StyledRadio
+            ref={ref}
+            type="radio"
+            checked={checked}
+            value={value}
+            onChange={handleChange}
+            disabled={disabled}
+          />
+        </StyledRadioWrapper>
+        <StyledLabelText>{children}</StyledLabelText>
+      </StyledLabel>
     )
   }
 )