From f22122b1a5141808a8de46a149c9742631895ee7 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 20 Jan 2021 12:13:25 -0800 Subject: [PATCH 1/4] =?UTF-8?q?Label.js=20=E2=86=92=20Label.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/{Label.js => Label.tsx} | 26 ++++++++++++++----- src/__tests__/{Label.js => Label.tsx} | 0 .../{Label.js.snap => Label.tsx.snap} | 0 3 files changed, 19 insertions(+), 7 deletions(-) rename src/{Label.js => Label.tsx} (69%) rename src/__tests__/{Label.js => Label.tsx} (100%) rename src/__tests__/__snapshots__/{Label.js.snap => Label.tsx.snap} (100%) diff --git a/src/Label.js b/src/Label.tsx similarity index 69% rename from src/Label.js rename to src/Label.tsx index 6b68dbd4bce..29154636a24 100644 --- a/src/Label.js +++ b/src/Label.tsx @@ -1,9 +1,9 @@ import PropTypes from 'prop-types' import styled, {css} from 'styled-components' -import {variant, borderColor} from 'styled-system' +import {borderColor, BorderColorProps, variant} from 'styled-system' +import {COMMON, get, SystemCommonProps} from './constants' +import sx, {SxProp} from './sx' import theme from './theme' -import {COMMON, get} from './constants' -import sx from './sx' const outlineStyles = css` margin-top: -1px; // offsets the 1px border @@ -42,18 +42,29 @@ const sizeVariant = variant({ } }) -const Label = styled('span')` +const Label = styled.span< + { + variant?: 'small' | 'medium' | 'large' | 'xl' + dropshadow?: boolean + outline?: boolean + } & BorderColorProps & + SystemCommonProps & + SxProp +>` display: inline-block; font-weight: ${get('fontWeights.semibold')}; color: ${get('colors.white')}; border-radius: ${get('radii.3')}; + &:hover { text-decoration: none; } + ${sizeVariant} - ${COMMON} ${props => (props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '')}; - ${props => (props.outline ? outlineStyles : '')}; // must be last to override other values - ${sx}; + ${COMMON} + ${props => (props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '')} + ${props => (props.outline ? outlineStyles : '')} // must be last to override other values + ${sx} ` Label.defaultProps = { @@ -71,4 +82,5 @@ Label.propTypes = { ...sx.propTypes } +export type LabelProps = React.ComponentProps export default Label diff --git a/src/__tests__/Label.js b/src/__tests__/Label.tsx similarity index 100% rename from src/__tests__/Label.js rename to src/__tests__/Label.tsx diff --git a/src/__tests__/__snapshots__/Label.js.snap b/src/__tests__/__snapshots__/Label.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Label.js.snap rename to src/__tests__/__snapshots__/Label.tsx.snap From 58ebff99b9a2bbaf6a79d968a4b78a44a7ed6c91 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 20 Jan 2021 12:27:02 -0800 Subject: [PATCH 2/4] =?UTF-8?q?LabelGroup.js=20=E2=86=92=20LabelGroup.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/{LabelGroup.js => LabelGroup.tsx} | 10 ++++------ src/__tests__/{LabelGroup.js => LabelGroup.tsx} | 0 .../{LabelGroup.js.snap => LabelGroup.tsx.snap} | 0 3 files changed, 4 insertions(+), 6 deletions(-) rename src/{LabelGroup.js => LabelGroup.tsx} (58%) rename src/__tests__/{LabelGroup.js => LabelGroup.tsx} (100%) rename src/__tests__/__snapshots__/{LabelGroup.js.snap => LabelGroup.tsx.snap} (100%) diff --git a/src/LabelGroup.js b/src/LabelGroup.tsx similarity index 58% rename from src/LabelGroup.js rename to src/LabelGroup.tsx index db4d8de10c9..7b82e408a8e 100644 --- a/src/LabelGroup.js +++ b/src/LabelGroup.tsx @@ -1,10 +1,9 @@ -import React from 'react' import styled from 'styled-components' +import {COMMON, get, SystemCommonProps} from './constants' +import sx, {SxProp} from './sx' import theme from './theme' -import {COMMON, get} from './constants' -import sx from './sx' -const StyledLabelGroup = styled.span` +const LabelGroup = styled.span` ${COMMON} & * { margin-right: ${get('space.1')}; @@ -15,8 +14,6 @@ const StyledLabelGroup = styled.span` ${sx}; ` -const LabelGroup = ({children, ...rest}) => {children} - LabelGroup.defaultProps = { theme } @@ -26,4 +23,5 @@ LabelGroup.propTypes = { ...sx.propTypes } +export type LabelGroupProps = React.ComponentProps export default LabelGroup diff --git a/src/__tests__/LabelGroup.js b/src/__tests__/LabelGroup.tsx similarity index 100% rename from src/__tests__/LabelGroup.js rename to src/__tests__/LabelGroup.tsx diff --git a/src/__tests__/__snapshots__/LabelGroup.js.snap b/src/__tests__/__snapshots__/LabelGroup.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/LabelGroup.js.snap rename to src/__tests__/__snapshots__/LabelGroup.tsx.snap From 2531557171cd2e39b980a456d42e15880e16256f Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 21 Jan 2021 14:39:31 -0800 Subject: [PATCH 3/4] Add changeset --- .changeset/funny-kangaroos-worry.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/funny-kangaroos-worry.md diff --git a/.changeset/funny-kangaroos-worry.md b/.changeset/funny-kangaroos-worry.md new file mode 100644 index 00000000000..4d4dffd7d06 --- /dev/null +++ b/.changeset/funny-kangaroos-worry.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Migrate `Label` to TypeScript From 397a46fe1edee9c2bb71e6ceedafff8dc4e76cb2 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 21 Jan 2021 14:39:56 -0800 Subject: [PATCH 4/4] Add changeset --- .changeset/lovely-walls-cover.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/lovely-walls-cover.md diff --git a/.changeset/lovely-walls-cover.md b/.changeset/lovely-walls-cover.md new file mode 100644 index 00000000000..813c1f3f7ce --- /dev/null +++ b/.changeset/lovely-walls-cover.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Migrate `LabelGroup` to TypeScript