From 6487ed36832418154cf7fa0a49c1f8206ffb46e6 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 27 Jan 2021 16:30:15 -0800 Subject: [PATCH 1/3] =?UTF-8?q?FormGroup.js=20=E2=86=92=20FormGroup.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/{FormGroup.js => FormGroup.tsx} | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) rename src/{FormGroup.js => FormGroup.tsx} (71%) diff --git a/src/FormGroup.js b/src/FormGroup.tsx similarity index 71% rename from src/FormGroup.js rename to src/FormGroup.tsx index ff5f54cf5b9..3e4e6ed293f 100644 --- a/src/FormGroup.js +++ b/src/FormGroup.tsx @@ -1,17 +1,25 @@ import PropTypes from 'prop-types' import styled from 'styled-components' -import {COMMON, get, TYPOGRAPHY} from './constants' +import {COMMON, get, TYPOGRAPHY, SystemCommonProps, SystemTypographyProps} from './constants' import theme from './theme' -import sx from './sx' +import sx, {SxProp} from './sx' -const FormGroup = styled.div` +const FormGroup = styled.div` margin: ${get('space.3')} 0; font-weight: ${get('fontWeights.normal')}; ${COMMON}; ${sx}; ` -FormGroup.Label = styled.label` +FormGroup.defaultProps = {theme} + +FormGroup.propTypes = { + children: PropTypes.node, + ...COMMON.propTypes, + ...sx.propTypes +} + +FormGroup.Label = styled.label` display: block; margin: 0 0 ${get('space.2')}; font-size: ${get('fontSizes.1')}; @@ -24,18 +32,11 @@ FormGroup.Label = styled.label` FormGroup.Label.defaultProps = { theme } + FormGroup.Label.propTypes = { ...TYPOGRAPHY.propTypes, ...COMMON.propTypes, ...sx.propTypes } -FormGroup.Label.displayName = 'FormGroup.Label' - -FormGroup.defaultProps = {theme} -FormGroup.propTypes = { - children: PropTypes.node, - ...COMMON.propTypes, - ...sx.propTypes -} export default FormGroup From 78ad965b63459a192c8438ee2d3fb53a8c05f44c Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 1 Feb 2021 14:15:44 -0800 Subject: [PATCH 2/3] Fix FormGroup types --- src/FormGroup.tsx | 13 +++++++++---- src/__tests__/{FormGroup.js => FormGroup.tsx} | 4 ++-- .../{FormGroup.js.snap => FormGroup.tsx.snap} | 0 3 files changed, 11 insertions(+), 6 deletions(-) rename src/__tests__/{FormGroup.js => FormGroup.tsx} (91%) rename src/__tests__/__snapshots__/{FormGroup.js.snap => FormGroup.tsx.snap} (100%) diff --git a/src/FormGroup.tsx b/src/FormGroup.tsx index 3e4e6ed293f..07a0df6530a 100644 --- a/src/FormGroup.tsx +++ b/src/FormGroup.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components' import {COMMON, get, TYPOGRAPHY, SystemCommonProps, SystemTypographyProps} from './constants' import theme from './theme' import sx, {SxProp} from './sx' +import {ComponentProps} from './utils/types' const FormGroup = styled.div` margin: ${get('space.3')} 0; @@ -19,7 +20,7 @@ FormGroup.propTypes = { ...sx.propTypes } -FormGroup.Label = styled.label` +const Label = styled.label` display: block; margin: 0 0 ${get('space.2')}; font-size: ${get('fontSizes.1')}; @@ -29,14 +30,18 @@ FormGroup.Label = styled.label +export type FormGroupLabelProps = ComponentProps +export default Object.assign(FormGroup, {Label}) diff --git a/src/__tests__/FormGroup.js b/src/__tests__/FormGroup.tsx similarity index 91% rename from src/__tests__/FormGroup.js rename to src/__tests__/FormGroup.tsx index fea467ae141..e25226f13d0 100644 --- a/src/__tests__/FormGroup.js +++ b/src/__tests__/FormGroup.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {FormGroup, TextInput} from '..' +import {FormGroup} from '..' import {COMMON, TYPOGRAPHY} from '../constants' import {behavesAsComponent, checkExports} from '../utils/testing' import {render as HTMLRender, cleanup} from '@testing-library/react' @@ -18,7 +18,7 @@ describe('FormGroup', () => { const {container} = HTMLRender( Example text - + ) const results = await axe(container) diff --git a/src/__tests__/__snapshots__/FormGroup.js.snap b/src/__tests__/__snapshots__/FormGroup.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/FormGroup.js.snap rename to src/__tests__/__snapshots__/FormGroup.tsx.snap From 56e2828eb48c1d79869fd5c99383246be0d992f1 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 2 Feb 2021 11:04:18 -0800 Subject: [PATCH 3/3] Rename Label component --- src/FormGroup.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/FormGroup.tsx b/src/FormGroup.tsx index 07a0df6530a..85050fe6719 100644 --- a/src/FormGroup.tsx +++ b/src/FormGroup.tsx @@ -20,7 +20,7 @@ FormGroup.propTypes = { ...sx.propTypes } -const Label = styled.label` +const FormGroupLabel = styled.label` display: block; margin: 0 0 ${get('space.2')}; font-size: ${get('fontSizes.1')}; @@ -30,18 +30,18 @@ const Label = styled.label` ${sx}; ` -Label.displayName = 'FormGroup.Label' +FormGroupLabel.displayName = 'FormGroup.Label' -Label.defaultProps = { +FormGroupLabel.defaultProps = { theme } -Label.propTypes = { +FormGroupLabel.propTypes = { ...TYPOGRAPHY.propTypes, ...COMMON.propTypes, ...sx.propTypes } export type FormGroupProps = ComponentProps -export type FormGroupLabelProps = ComponentProps -export default Object.assign(FormGroup, {Label}) +export type FormGroupLabelProps = ComponentProps +export default Object.assign(FormGroup, {Label: FormGroupLabel})