Skip to content
Permalink
Browse files

feat: update types package to styled-system v5 format (#154)

* feat(types): update types for styled-system 5

Normalizes the type exports to match what we'd expect from styled-system

* feat(box): use new typings, add position, flexbox, and background props

* chore(media-object): use SpaceProps shorthand

* feat(text): update to styled-system 5

* feat(types): add textOverflow and whiteSpace props to typography

* fix(text): remove needless typings

* fix(box): update interface name

* fix(text): remove sizing props

* fix(text): re-add textDecoration

* test(box): update snapshot
  • Loading branch information...
TheSisb committed Oct 30, 2019
1 parent 553be6d commit 117c41e463b11440582e740c28cc067c06d16e67
Showing with 302 additions and 221 deletions.
  1. +3 −3 packages/paste-core/utilities/absolute/src/index.tsx
  2. +28 −12 packages/paste-core/utilities/box/__tests__/__snapshots__/box.test.tsx.snap
  3. +14 −36 packages/paste-core/utilities/box/src/index.tsx
  4. +2 −2 packages/paste-core/utilities/media-object/src/index.tsx
  5. +16 −29 packages/paste-core/utilities/text/src/index.tsx
  6. +10 −0 packages/paste-types/README.md
  7. +26 −0 packages/paste-types/src/style-props/background.ts
  8. +0 −6 packages/paste-types/src/style-props/backgroundColor.ts
  9. +45 −22 packages/paste-types/src/style-props/border.ts
  10. +0 −6 packages/paste-types/src/style-props/boxShadow.ts
  11. +2 −0 packages/paste-types/src/style-props/flexbox.ts
  12. +0 −29 packages/paste-types/src/style-props/font.ts
  13. +7 −6 packages/paste-types/src/style-props/index.ts
  14. +39 −0 packages/paste-types/src/style-props/layout.ts
  15. +24 −0 packages/paste-types/src/style-props/position.ts
  16. +12 −0 packages/paste-types/src/style-props/shadow.ts
  17. +0 −34 packages/paste-types/src/style-props/sizing.ts
  18. +27 −0 packages/paste-types/src/style-props/space.ts
  19. +0 −22 packages/paste-types/src/style-props/spacing.ts
  20. +39 −0 packages/paste-types/src/style-props/typography.ts
  21. +0 −6 packages/paste-types/src/style-props/zIndex.ts
  22. +2 −2 packages/paste-website/src/components/callout/types.ts
  23. +5 −5 packages/paste-website/src/components/tokens-example/index.tsx
  24. +1 −1 packages/paste-website/src/pages/utilities/box/index.mdx
@@ -1,6 +1,6 @@
import styled from '@emotion/styled';
import {top, right, bottom, left, zIndex, TopProps, BottomProps, LeftProps, RightProps, styleFn} from 'styled-system';
import {Box, BoxProps} from '@twilio-paste/box';
import {top, right, bottom, left, zIndex, styleFn} from 'styled-system';
import {Box} from '@twilio-paste/box';

const LEFT_OPTIONS = [
'fill',
@@ -66,7 +66,7 @@ export type Presets =
| 'right_bottom'
| 'right_fill';

export interface AbsoluteProps extends TopProps, BottomProps, LeftProps, RightProps, BoxProps {
export interface AbsoluteProps extends Box {
preset?: Presets;
}

@@ -15,8 +15,9 @@ exports[`Backgrounds it should render responsive values 1`] = `
}

.emotion-0 {
background-color: #b3d3e9;
box-sizing: border-box;
min-width: 0;
background-color: #b3d3e9;
}

@media screen and (min-width:25rem) {
@@ -51,8 +52,9 @@ exports[`Backgrounds it should render single values 1`] = `
}

.emotion-0 {
background-color: #0075c3;
box-sizing: border-box;
min-width: 0;
background-color: #0075c3;
}

<div
@@ -81,11 +83,12 @@ exports[`Borders it should render responsive values 1`] = `
}

.emotion-0 {
box-sizing: border-box;
min-width: 0;
border-style: dashed;
border-color: #005ea6;
border-width: 1px;
border-radius: 0;
min-width: 0;
}

@media screen and (min-width:25rem) {
@@ -129,11 +132,12 @@ exports[`Borders it should render single values 1`] = `
}

.emotion-0 {
box-sizing: border-box;
min-width: 0;
border-style: solid;
border-color: #005ea6;
border-width: 1px;
border-radius: 4px;
min-width: 0;
}

<div
@@ -162,8 +166,9 @@ exports[`Shadows it should render responsive values 1`] = `
}

.emotion-0 {
box-shadow: 0 2px 4px 0 rgba(40,42,43,0.3);
box-sizing: border-box;
min-width: 0;
box-shadow: 0 2px 4px 0 rgba(40,42,43,0.3);
}

@media screen and (min-width:25rem) {
@@ -198,8 +203,9 @@ exports[`Shadows it should render single values 1`] = `
}

.emotion-0 {
box-shadow: 0 2px 4px 0 rgba(40,42,43,0.3);
box-sizing: border-box;
min-width: 0;
box-shadow: 0 2px 4px 0 rgba(40,42,43,0.3);
}

<div
@@ -228,6 +234,8 @@ exports[`Sizes it should render responsive values 1`] = `
}

.emotion-0 {
box-sizing: border-box;
min-width: 0;
width: 5.5rem;
min-width: 0;
max-width: 12rem;
@@ -285,6 +293,8 @@ exports[`Sizes it should render single values 1`] = `
}

.emotion-0 {
box-sizing: border-box;
min-width: 0;
width: 5.5rem;
min-width: 0;
max-width: 12rem;
@@ -321,8 +331,9 @@ exports[`Spaces (A) it should render responsive values 1`] = `
}

.emotion-0 {
margin: 0.25rem;
box-sizing: border-box;
min-width: 0;
margin: 0.25rem;
}

@media screen and (min-width:25rem) {
@@ -357,8 +368,9 @@ exports[`Spaces (A) it should render single values 1`] = `
}

.emotion-0 {
margin: 0.25rem;
box-sizing: border-box;
min-width: 0;
margin: 0.25rem;
}

<div
@@ -387,11 +399,12 @@ exports[`Spaces (B) it should render single values 1`] = `
}

.emotion-0 {
box-sizing: border-box;
min-width: 0;
margin-top: 0.25rem;
margin-right: 0.25rem;
margin-bottom: 0.5rem;
margin-left: 0.5rem;
min-width: 0;
}

<div
@@ -420,11 +433,12 @@ exports[`Spaces (B)it should render responsive values 1`] = `
}

.emotion-0 {
box-sizing: border-box;
min-width: 0;
margin-top: 0.25rem;
margin-right: 0.25rem;
margin-bottom: 0.5rem;
margin-left: 0.5rem;
min-width: 0;
}

@media screen and (min-width:25rem) {
@@ -462,8 +476,9 @@ exports[`ZIndex it should render responsive values 1`] = `
}

.emotion-0 {
z-index: 10;
box-sizing: border-box;
min-width: 0;
z-index: 10;
}

@media screen and (min-width:25rem) {
@@ -498,8 +513,9 @@ exports[`ZIndex it should render single values 1`] = `
}

.emotion-0 {
z-index: 10;
box-sizing: border-box;
min-width: 0;
z-index: 10;
}

<div
@@ -1,37 +1,16 @@
import styled from '@emotion/styled';
import {compose, layout, space, background, border, boxShadow, position, flexbox, system} from 'styled-system';
import {
compose,
space,
layout,
flexbox,
background,
border,
boxShadow,
zIndex,
DisplayProps,
OverflowProps,
system,
} from 'styled-system';

import {
SizingProps,
SpacingProps,
BackgroundColorProps,
LayoutProps,
SpaceProps,
BackgroundProps,
BorderProps,
BoxShadowProps,
ZIndexProps,
ShadowProps,
PositionProps,
FlexboxProps,
} from '@twilio-paste/types';

export interface BoxProps
extends SizingProps,
SpacingProps,
BackgroundColorProps,
BorderProps,
BoxShadowProps,
ZIndexProps,
// styled-system
DisplayProps,
OverflowProps {
interface Box extends LayoutProps, SpaceProps, BackgroundProps, BorderProps, ShadowProps, PositionProps, FlexboxProps {
as?: keyof JSX.IntrinsicElements;
}

@@ -49,7 +28,11 @@ const borderColor = system({
},
});

const Box = styled.div<BoxProps>(
const Box = styled.div<Box>(
{
boxSizing: 'border-box',
minWidth: 0,
},
compose(
space,
layout,
@@ -59,14 +42,9 @@ const Box = styled.div<BoxProps>(
border,
borderColor,
boxShadow,
zIndex
position
)
);

Box.displayName = 'Box';

Box.defaultProps = {
minWidth: 'size0',
};

export {Box};
@@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import {space, Theme} from 'styled-system';
import {themeGet} from '@styled-system/theme-get';
import {MarginProps, PaddingProps} from '@twilio-paste/types';
import {SpaceProps} from '@twilio-paste/types';

export interface MediaObjectProps extends Theme {
isCentered?: boolean;
@@ -33,7 +33,7 @@ MediaFigure.defaultProps = {
spacing: 'space20',
};

export interface MediaBodyProps extends Theme, MarginProps, PaddingProps {}
export interface MediaBodyProps extends Theme, SpaceProps {}

const MediaBody = styled.div<MediaBodyProps>`
flex: 1;
@@ -1,28 +1,11 @@
import styled from '@emotion/styled';
import {
compose,
display,
DisplayProps,
FontStyleProps,
LetterSpacingProps,
space,
system,
typography,
TextAlignProps,
} from 'styled-system';
import {FontProps, SpacingProps, TextColorProps, TextDecorationProps} from '@twilio-paste/types';
import {compose, space, display, verticalAlign, overflow, typography, system} from 'styled-system';
import {SpaceProps, Display, VerticalAlign, OverflowProps, TypographyProps} from '@twilio-paste/types';

interface Text
extends SpacingProps,
FontProps,
TextColorProps,
TextDecorationProps,
// styled system
DisplayProps,
FontStyleProps,
LetterSpacingProps,
TextAlignProps {
as: keyof JSX.IntrinsicElements;
interface Text extends SpaceProps, OverflowProps, TypographyProps {
as?: keyof JSX.IntrinsicElements;
display?: Display;
verticalAlign?: VerticalAlign;
}

const textColor = system({
@@ -34,22 +17,26 @@ const textColor = system({
const textDecoration = system({textDecoration: true});

const Text = styled.span<Text>(
{margin: 0, padding: 0},
{
margin: 0,
padding: 0,
},
compose(
display,
space,
textColor,
display,
verticalAlign,
overflow,
textDecoration,
typography
typography,
textColor
)
);

Text.displayName = 'Text';

Text.defaultProps = {
fontSize: 'fontSize20',
lineHeight: 'lineHeight20',
textColor: 'colorText',
};

Text.displayName = 'Text';
export {Text};
@@ -1,3 +1,13 @@
# @twilio-paste/types

Typescript typings used in multiple Paste packages

## Notes

This package exports types mimicking the styled-system high level grouping here: https://styled-system.com/api. There are cases where we differ from styled-system due to our token implementation. Specifically:

- We don't have a `color` grouping. You can either:
- Use the `BackgroundColor` and `TextColor` types that are exported individually
- Use `TypographyProps` (which includes textColor) or `BackgroundProps` (which includes backgroundColor)
- The `Shadow` typing forbids `textShadow` currently, until we have tokens for those.
- The `background` and `border` shorthands are also forbidden because it makes it tough to type as tokens.
@@ -0,0 +1,26 @@
// https://styled-system.com/api/#background
import * as CSS from 'csstype';
import {ThemeShape} from '@twilio-paste/theme-tokens';
import {ResponsiveValue, TLengthStyledSystem} from 'styled-system';

// Tokens
export type BackgroundColor = ResponsiveValue<keyof ThemeShape['backgroundColors']>;

// CSS native
export type BackgroundImage = ResponsiveValue<CSS.BackgroundImageProperty>;
export type BackgroundSize = ResponsiveValue<CSS.BackgroundSizeProperty<TLengthStyledSystem>>;
export type BackgroundPosition = ResponsiveValue<CSS.BackgroundPositionProperty<TLengthStyledSystem>>;
export type BackgroundRepeat = ResponsiveValue<CSS.BackgroundRepeatProperty>;

/* Styled-system grouping
* ---
* We add `backgroundColor` here, not in the `color` interface grouping like styled-system does
*/
export interface BackgroundProps {
background?: never;
backgroundColor?: BackgroundColor;
backgroundImage?: BackgroundImage;
backgroundSize?: BackgroundSize;
backgroundPosition?: BackgroundPosition;
backgroundRepeat?: BackgroundRepeat;
}

This file was deleted.

1 comment on commit 117c41e

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.