From 5f9c916297002c87c57289c9eb10708ef2ebc77a Mon Sep 17 00:00:00 2001 From: Jimmy Somsanith Date: Sun, 23 Jun 2019 10:57:02 +0200 Subject: [PATCH 1/6] Fix stories --- src/components/Radio.js | 98 +++++++++++++++++++++++++-------- src/components/Radio.stories.js | 29 ++++++++-- 2 files changed, 99 insertions(+), 28 deletions(-) diff --git a/src/components/Radio.js b/src/components/Radio.js index 6cae2c61..b33dda41 100644 --- a/src/components/Radio.js +++ b/src/components/Radio.js @@ -1,25 +1,56 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; +import { rgba } from 'polished'; import { color, typography } from './shared/styles'; const Label = styled.label` cursor: pointer; font-size: ${typography.size.s2}px; font-weight: ${typography.weight.bold}; - min-height: 1em; position: relative; - display: block; + display: inline-block; + height: 1em; +`; + +const OptionalText = styled.span` + display: inline-block; + line-height: 1em; + ${props => + props.hideLabel && + css` + border: 0px !important; + clip: rect(0 0 0 0) !important; + -webkit-clip-path: inset(100%) !important; + clip-path: inset(100%) !important; + height: 1px !important; + overflow: hidden !important; + padding: 0px !important; + position: absolute !important; + white-space: nowrap !important; + width: 1px !important; + `} `; const Error = styled.span` font-weight: ${typography.weight.regular}; + font-size: ${typography.size.s2}px; color: ${color.negative}; margin-left: 6px; + vertical-align: text-top; + height: 1em; + display: inline-block; + + ${props => + !props.error && + css` + margin: 0; + `} `; -const LabelText = styled.div``; -const SublabelText = styled.div` +const LabelText = styled.span``; + +const SubLabelText = styled.div` font-size: ${typography.size.s1}px; font-weight: ${typography.weight.regular}; margin-top: 4px; @@ -27,14 +58,14 @@ const SublabelText = styled.div` `; const Input = styled.input.attrs({ type: 'radio' })` - float: left; margin: 0 0.6em 0 0; - visibility: hidden; + opacity: 0; + vertical-align: text-top; & + ${LabelText} { - display: block; - line-height: 1; - overflow: hidden; + display: inline-block; + vertical-align: text-top; + line-height: 1.2; &:before, &:after { @@ -54,10 +85,18 @@ const Input = styled.input.attrs({ type: 'radio' })` box-shadow: ${color.mediumdark} 0 0 0 1px inset; } + &:focus + ${LabelText}:before { + box-shadow: ${color.primary} 0 0 0 1px inset; + } + &:checked + ${LabelText}:before { box-shadow: ${color.primary} 0 0 0 1px inset; } + &:checked:focus + ${LabelText}:before { + box-shadow: ${color.primary} 0 0 0 1px inset, ${rgba(color.primary, 0.3)} 0 0 5px 2px; + } + & + ${LabelText}:after { transform: scale3d(0, 0, 1); @@ -76,24 +115,38 @@ const Input = styled.input.attrs({ type: 'radio' })` } `; -export function Radio({ value, label, sublabel, error, className, ...props }) { +export function Radio({ id, label, subLabel, error, hideLabel, value, className, ...props }) { + const errorId = `${id}-error`; + const subLabelId = `${id}-subLabel`; return ( - +
+ + + {error} + + {subLabel} +
); } Radio.propTypes = { + id: PropTypes.string.isRequired, value: PropTypes.string, label: PropTypes.string, - sublabel: PropTypes.string, + hideLabel: PropTypes.bool, + subLabel: PropTypes.string, error: PropTypes.string, className: PropTypes.string, }; @@ -101,7 +154,8 @@ Radio.propTypes = { Radio.defaultProps = { value: '', label: null, - sublabel: null, + hideLabel: false, + subLabel: null, error: null, className: null, }; diff --git a/src/components/Radio.stories.js b/src/components/Radio.stories.js index 8bfdbfee..8197e8b7 100644 --- a/src/components/Radio.stories.js +++ b/src/components/Radio.stories.js @@ -9,11 +9,28 @@ storiesOf('Design System|forms/Radio', module) .addParameters({ component: Radio }) .add('all radios', () => (
- - - - + + + + )) - .add('unchecked', () => ) - .add('checked', () => ); + .add('unchecked', () => ( + + )) + .add('checked', () => ( + + )); From 98025969ca62f5527a7639eed6f4cd0b0838762a Mon Sep 17 00:00:00 2001 From: Jimmy Somsanith Date: Sun, 23 Jun 2019 14:12:20 +0200 Subject: [PATCH 2/6] Remove extra space in subLAbel --- src/components/Radio.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Radio.js b/src/components/Radio.js index b33dda41..12a871b3 100644 --- a/src/components/Radio.js +++ b/src/components/Radio.js @@ -53,7 +53,6 @@ const LabelText = styled.span``; const SubLabelText = styled.div` font-size: ${typography.size.s1}px; font-weight: ${typography.weight.regular}; - margin-top: 4px; color: ${color.mediumdark}; `; From 9973a0a3ca2e88a7efda17f722682ccd440daa08 Mon Sep 17 00:00:00 2001 From: Jimmy Somsanith Date: Sun, 23 Jun 2019 14:59:37 +0200 Subject: [PATCH 3/6] Fix style --- src/components/Radio.js | 59 ++++++++++++++++++++++------------------- 1 file changed, 32 insertions(+), 27 deletions(-) diff --git a/src/components/Radio.js b/src/components/Radio.js index 12a871b3..b5a2d97c 100644 --- a/src/components/Radio.js +++ b/src/components/Radio.js @@ -4,18 +4,23 @@ import styled, { css } from 'styled-components'; import { rgba } from 'polished'; import { color, typography } from './shared/styles'; +const RadioWrapper = styled.div` + display: flex; + align-items: center; + flex-wrap: wrap; +`; + const Label = styled.label` cursor: pointer; font-size: ${typography.size.s2}px; font-weight: ${typography.weight.bold}; position: relative; - display: inline-block; height: 1em; + display: flex; + align-items: center; `; const OptionalText = styled.span` - display: inline-block; - line-height: 1em; ${props => props.hideLabel && css` @@ -37,15 +42,9 @@ const Error = styled.span` font-size: ${typography.size.s2}px; color: ${color.negative}; margin-left: 6px; - vertical-align: text-top; height: 1em; - display: inline-block; - - ${props => - !props.error && - css` - margin: 0; - `} + display: flex; + align-items: center; `; const LabelText = styled.span``; @@ -54,26 +53,23 @@ const SubLabelText = styled.div` font-size: ${typography.size.s1}px; font-weight: ${typography.weight.regular}; color: ${color.mediumdark}; + margin-top: 4px; + width: 100%; `; const Input = styled.input.attrs({ type: 'radio' })` margin: 0 0.6em 0 0; opacity: 0; - vertical-align: text-top; & + ${LabelText} { - display: inline-block; - vertical-align: text-top; - line-height: 1.2; - &:before, &:after { transition: all 150ms ease-out; position: absolute; top: 0; left: 0; - height: 14px; - width: 14px; + height: 1em; + width: 1em; content: ''; display: block; border-radius: 3em; @@ -115,15 +111,26 @@ const Input = styled.input.attrs({ type: 'radio' })` `; export function Radio({ id, label, subLabel, error, hideLabel, value, className, ...props }) { - const errorId = `${id}-error`; - const subLabelId = `${id}-subLabel`; + let errorId; + let subLabelId; + let ariaDescribedBy; + + if (error) { + errorId = `${id}-error`; + ariaDescribedBy = errorId; + } + if (subLabel) { + subLabelId = `${id}-subLabel`; + ariaDescribedBy = `${ariaDescribedBy} ${subLabelId}`; + } + return ( -
+ - - {error} - - {subLabel} -
+ {error && {error}} + {subLabel && {subLabel}} + ); } From 88444e9c8187114c976f3b20d2602675af6a80d7 Mon Sep 17 00:00:00 2001 From: Jimmy Somsanith Date: Sun, 23 Jun 2019 15:04:35 +0200 Subject: [PATCH 4/6] Revert story to keep the same behavior as master --- src/components/Radio.stories.js | 21 ++++----------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/src/components/Radio.stories.js b/src/components/Radio.stories.js index 8197e8b7..e6926f72 100644 --- a/src/components/Radio.stories.js +++ b/src/components/Radio.stories.js @@ -9,23 +9,10 @@ storiesOf('Design System|forms/Radio', module) .addParameters({ component: Radio }) .add('all radios', () => (
- - - - + + + + )) .add('unchecked', () => ( From c133e3be689ed9cbd1dd5b698a5816ec8d5fad22 Mon Sep 17 00:00:00 2001 From: Jimmy Somsanith Date: Sun, 23 Jun 2019 23:14:02 +0200 Subject: [PATCH 5/6] Rename subLabel to description --- src/components/Radio.js | 18 +++++++++--------- src/components/Radio.stories.js | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/Radio.js b/src/components/Radio.js index b5a2d97c..db814216 100644 --- a/src/components/Radio.js +++ b/src/components/Radio.js @@ -49,7 +49,7 @@ const Error = styled.span` const LabelText = styled.span``; -const SubLabelText = styled.div` +const Description = styled.div` font-size: ${typography.size.s1}px; font-weight: ${typography.weight.regular}; color: ${color.mediumdark}; @@ -110,18 +110,18 @@ const Input = styled.input.attrs({ type: 'radio' })` } `; -export function Radio({ id, label, subLabel, error, hideLabel, value, className, ...props }) { +export function Radio({ id, label, description, error, hideLabel, value, className, ...props }) { let errorId; - let subLabelId; + let descriptionId; let ariaDescribedBy; if (error) { errorId = `${id}-error`; ariaDescribedBy = errorId; } - if (subLabel) { - subLabelId = `${id}-subLabel`; - ariaDescribedBy = `${ariaDescribedBy} ${subLabelId}`; + if (description) { + descriptionId = `${id}-description`; + ariaDescribedBy = `${ariaDescribedBy} ${descriptionId}`; } return ( @@ -140,7 +140,7 @@ export function Radio({ id, label, subLabel, error, hideLabel, value, className, {error && {error}} - {subLabel && {subLabel}} + {description && {description}} ); } @@ -150,7 +150,7 @@ Radio.propTypes = { value: PropTypes.string, label: PropTypes.string, hideLabel: PropTypes.bool, - subLabel: PropTypes.string, + description: PropTypes.string, error: PropTypes.string, className: PropTypes.string, }; @@ -159,7 +159,7 @@ Radio.defaultProps = { value: '', label: null, hideLabel: false, - subLabel: null, + description: null, error: null, className: null, }; diff --git a/src/components/Radio.stories.js b/src/components/Radio.stories.js index e6926f72..df04cbe6 100644 --- a/src/components/Radio.stories.js +++ b/src/components/Radio.stories.js @@ -12,7 +12,7 @@ storiesOf('Design System|forms/Radio', module) - + )) .add('unchecked', () => ( From 113b33e3b42a26cc4a14657058caefb34d679920 Mon Sep 17 00:00:00 2001 From: domyen Date: Mon, 24 Jun 2019 12:18:55 -0400 Subject: [PATCH 6/6] Cleanup Radio styling --- src/components/Radio.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/Radio.js b/src/components/Radio.js index db814216..bf91bdf4 100644 --- a/src/components/Radio.js +++ b/src/components/Radio.js @@ -4,12 +4,6 @@ import styled, { css } from 'styled-components'; import { rgba } from 'polished'; import { color, typography } from './shared/styles'; -const RadioWrapper = styled.div` - display: flex; - align-items: center; - flex-wrap: wrap; -`; - const Label = styled.label` cursor: pointer; font-size: ${typography.size.s2}px; @@ -54,17 +48,18 @@ const Description = styled.div` font-weight: ${typography.weight.regular}; color: ${color.mediumdark}; margin-top: 4px; + margin-left: calc(${typography.size.s2}px + 0.4em); width: 100%; `; const Input = styled.input.attrs({ type: 'radio' })` - margin: 0 0.6em 0 0; + margin: 0 0.4em 0 0; + font-size: initial; opacity: 0; & + ${LabelText} { &:before, &:after { - transition: all 150ms ease-out; position: absolute; top: 0; left: 0; @@ -93,6 +88,7 @@ const Input = styled.input.attrs({ type: 'radio' })` } & + ${LabelText}:after { + transition: all 150ms ease-out; transform: scale3d(0, 0, 1); height: 10px; @@ -110,6 +106,12 @@ const Input = styled.input.attrs({ type: 'radio' })` } `; +const RadioWrapper = styled.div` + display: flex; + align-items: center; + flex-wrap: wrap; +`; + export function Radio({ id, label, description, error, hideLabel, value, className, ...props }) { let errorId; let descriptionId;