fix(RadioGroup): use regular components instead of Label (#1070)

* fix(RadioGroup): use regular components instead of Label

* update CHANGELOG entry

* update entry and type

Author: layershifter

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- Use regular components instead of `Label` in `RadioGroupItem` @layershifter ([#1070](https://github.com/stardust-ui/react/pull/1070))
+
 <!--------------------------------[ v0.23.1 ]------------------------------- -->
 ## [v0.23.1](https://github.com/stardust-ui/react/tree/v0.23.1) (2019-03-13)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.23.0...v0.23.1)

packages/react/src/components/RadioGroup/RadioGroupItem.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
 import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
 
@@ -11,11 +10,11 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
-  rtlTextContainer,
 } from '../../lib'
-import Label from '../Label/Label'
+import Box from '../Box/Box'
 import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types'
 import Icon from '../Icon/Icon'
+import Ref from '../Ref/Ref'
 import { Accessibility } from '../../lib/accessibility/types'
 import { radioGroupItemBehavior } from '../../lib/accessibility'
 
@@ -37,7 +36,7 @@ export interface RadioGroupItemProps extends UIComponentProps, ChildrenComponent
   checkedChanged?: ComponentEventHandler<RadioGroupItemProps>
 
   /** The label of the radio item. */
-  label?: React.ReactNode
+  label?: ShorthandValue
 
   /** Initial checked value. */
   defaultChecked?: boolean
@@ -96,7 +95,7 @@ class RadioGroupItem extends AutoControlledComponent<
   ReactProps<RadioGroupItemProps>,
   RadioGroupItemState
 > {
-  private elementRef: HTMLElement
+  private elementRef = React.createRef<HTMLElement>()
 
   static create: Function
 
@@ -112,7 +111,7 @@ class RadioGroupItem extends AutoControlledComponent<
     defaultChecked: PropTypes.bool,
     disabled: PropTypes.bool,
     icon: customPropTypes.itemShorthand,
-    label: customPropTypes.nodeContent,
+    label: customPropTypes.itemShorthand,
     name: PropTypes.string,
     onBlur: PropTypes.func,
     onClick: PropTypes.func,
@@ -133,29 +132,39 @@ class RadioGroupItem extends AutoControlledComponent<
   componentDidUpdate(prevProps, prevState) {
     const checked = this.state.checked
     if (checked !== prevState.checked) {
-      checked && this.props.shouldFocus && this.elementRef.focus()
+      checked && this.props.shouldFocus && this.elementRef.current.focus()
       _.invoke(this.props, 'checkedChanged', undefined, { ...this.props, checked })
     }
   }
 
-  componentDidMount() {
-    this.elementRef = ReactDOM.findDOMNode(this) as HTMLElement
+  handleFocus = (e: React.SyntheticEvent) => {
+    this.setState({ isFromKeyboard: isFromKeyboard() })
+    _.invoke(this.props, 'onFocus', e, this.props)
+  }
+
+  handleBlur = (e: React.SyntheticEvent) => {
+    this.setState({ isFromKeyboard: false })
+    _.invoke(this.props, 'onBlur', e, this.props)
+  }
+
+  handleClick = e => {
+    _.invoke(this.props, 'onClick', e, this.props)
   }
 
   renderComponent({ ElementType, classes, unhandledProps, styles, accessibility }) {
     const { label, icon } = this.props
 
     return (
-      <ElementType
-        {...accessibility.attributes.root}
-        {...accessibility.keyHandlers.root}
-        {...unhandledProps}
-        onFocus={this.handleFocus}
-        onBlur={this.handleBlur}
-        onClick={this.handleClick}
-        className={classes.root}
-      >
-        <Label styles={styles.label}>
+      <Ref innerRef={this.elementRef}>
+        <ElementType
+          {...accessibility.attributes.root}
+          {...accessibility.keyHandlers.root}
+          {...unhandledProps}
+          onFocus={this.handleFocus}
+          onBlur={this.handleBlur}
+          onClick={this.handleClick}
+          className={classes.root}
+        >
           {Icon.create(icon || '', {
             defaultProps: {
               circular: true,
@@ -164,25 +173,15 @@ class RadioGroupItem extends AutoControlledComponent<
               styles: styles.icon,
             },
           })}
-          {rtlTextContainer.createFor({ element: label })}
-        </Label>
-      </ElementType>
+          {Box.create(label, {
+            defaultProps: {
+              as: 'span',
+            },
+          })}
+        </ElementType>
+      </Ref>
     )
   }
-
-  private handleFocus = (e: React.SyntheticEvent) => {
-    this.setState({ isFromKeyboard: isFromKeyboard() })
-    _.invoke(this.props, 'onFocus', e, this.props)
-  }
-
-  private handleBlur = (e: React.SyntheticEvent) => {
-    this.setState({ isFromKeyboard: false })
-    _.invoke(this.props, 'onBlur', e, this.props)
-  }
-
-  private handleClick = e => {
-    _.invoke(this.props, 'onClick', e, this.props)
-  }
 }
 
 RadioGroupItem.create = createShorthandFactory({ Component: RadioGroupItem, mappedProp: 'label' })

packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts

@@ -10,20 +10,14 @@ const radioStyles: ComponentSlotStylesInput<
   RadioGroupItemProps & RadioGroupItemState,
   RadioGroupItemVariables
 > = {
-  root: ({ props }): ICSSInJSStyle => ({
-    outline: 0,
-    ...(!props.vertical && {
-      display: 'inline-block',
-    }),
-  }),
-
-  label: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    cursor: 'pointer',
-    display: 'inline-flex',
+  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     alignItems: 'baseline',
+    cursor: 'pointer',
+    display: p.vertical ? 'flex' : 'inline-flex',
     fontWeight: 400,
     minHeight: '2.5rem',
-    backgroundColor: 'transparent',
+    outline: 0,
+    padding: v.padding,
     ...(p.disabled && {
       color: v.colorDisabled,
     }),

packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts

@@ -1,3 +1,5 @@
+import { pxToRem } from '../../../../lib'
+
 export type RadioGroupItemVariables = {
   color: string
   colorChecked: string
@@ -8,6 +10,8 @@ export type RadioGroupItemVariables = {
 
   colorBackground: string
   colorBackgroundChecked: string
+
+  padding: string
 }
 
 export default (siteVars: any): RadioGroupItemVariables => ({
@@ -20,4 +24,6 @@ export default (siteVars: any): RadioGroupItemVariables => ({
 
   colorBackground: siteVars.colors.white,
   colorBackgroundChecked: siteVars.colors.primary[500],
+
+  padding: `0 ${pxToRem(4)}`,
 })