From eac2e169f3f6a39a5b10e1b9511ce56874986f07 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 18 Mar 2019 14:59:06 +0200 Subject: [PATCH 1/3] fix(RadioGroup): use regular components instead of Label --- CHANGELOG.md | 1 + .../components/RadioGroup/RadioGroupItem.tsx | 67 +++++++++---------- .../RadioGroup/radioGroupItemStyles.ts | 16 ++--- .../RadioGroup/radioGroupItemVariables.ts | 6 ++ 4 files changed, 45 insertions(+), 45 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8721ea08be..03cdc83820 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased] +- Use regular components instead of `Label` in `RadioGroupItem` @layershifter ([#XXX](https://github.com/stardust-ui/react/pull/XXX)) ## [v0.23.1](https://github.com/stardust-ui/react/tree/v0.23.1) (2019-03-13) diff --git a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx index e92885eb85..bbb7a2d6a5 100644 --- a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx +++ b/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' @@ -96,7 +95,7 @@ class RadioGroupItem extends AutoControlledComponent< ReactProps, RadioGroupItemState > { - private elementRef: HTMLElement + private elementRef = React.createRef() static create: Function @@ -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 ( - - - + {Box.create(label, { + defaultProps: { + as: 'span', + }, + })} + + ) } - - 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' }) diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts index 9b920a075b..c0be44d34e 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts +++ b/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, }), diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts index 5064c4cad7..ff52c50f32 100644 --- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemVariables.ts +++ b/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)}`, }) From 7bd4f3e241e20e4aa51a39759f0c4eba65078fcf Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 18 Mar 2019 16:49:50 +0200 Subject: [PATCH 2/3] update CHANGELOG entry --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 03cdc83820..395d6aaa73 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,7 +16,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased] -- Use regular components instead of `Label` in `RadioGroupItem` @layershifter ([#XXX](https://github.com/stardust-ui/react/pull/XXX)) +- Use regular components instead of `Label` in `RadioGroupItem` @layershifter ([#1070](https://github.com/stardust-ui/react/pull/1070)) ## [v0.23.1](https://github.com/stardust-ui/react/tree/v0.23.1) (2019-03-13) From a9fce2fe655ad7a00e033d4148ba0c8a0d6421eb Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 18 Mar 2019 18:36:13 +0200 Subject: [PATCH 3/3] update entry and type --- CHANGELOG.md | 2 ++ packages/react/src/components/RadioGroup/RadioGroupItem.tsx | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 395d6aaa73..2203eb761a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased] + +### BREAKING CHANGES - Use regular components instead of `Label` in `RadioGroupItem` @layershifter ([#1070](https://github.com/stardust-ui/react/pull/1070)) diff --git a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx index bbb7a2d6a5..15133e97b3 100644 --- a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx +++ b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx @@ -36,7 +36,7 @@ export interface RadioGroupItemProps extends UIComponentProps, ChildrenComponent checkedChanged?: ComponentEventHandler /** The label of the radio item. */ - label?: React.ReactNode + label?: ShorthandValue /** Initial checked value. */ defaultChecked?: boolean @@ -111,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,