Skip to content
Permalink
Browse files

feat(box): polish and fix (#125)

* chore(types): refactor into smaller files and remove shorthands

* fix(box): add missing types

* chore(website): deprecate usage of shorthand spacing

* fix(box): add missing props

* chore: update yarn.lock

* chore(box): update story

* refactor(theme): export properly types theme variants

* refactor(storybook): use theme constant exports

* fix(storybook): they nuked the types pkg for knobs!?

* refactor(website): use theme pkg constant exports

* fix(box): checkpoint docs update

* feat(box): update props

BREAKING CHANGE: many Box API changes

* fix(theme-tokens): add sizes key for styled-system responsiveness

* fix(absolute): update to newer Box

* fix(types): allow for responsive values via array

* fix(box): update story and light tweaks to OverflowProps

* chore: update yarn.lock file

* fix(types): many more types fixes

refactor: moved ValueOf into types package

* fix(box): eslint error in story

* fix(box): using the correct BorderProps definition

fix: we shouldn't allow users to pass the `border` shorthand, it circumvents tokens

* fix: lint errors

* fix(website): update box docs

* fix(storybook): use theme breakpoints
  • Loading branch information...
TheSisb committed Oct 9, 2019
1 parent 5d39595 commit d151badadfa4db8ade1425df9336e0155ce09619
Showing with 1,512 additions and 1,130 deletions.
  1. +0 −5 .storybook/addons/theme-switcher-addon/constants.js
  2. +4 −8 .storybook/addons/theme-switcher-addon/index.js
  3. +6 −5 .storybook/addons/theme-switcher-addon/register.js
  4. +7 −8 package.json
  5. +1 −6 packages/paste-core/utilities/absolute/src/index.tsx
  6. +40 −27 packages/paste-core/utilities/box/src/index.tsx
  7. +80 −42 packages/paste-core/utilities/box/stories/index.stories.tsx
  8. +1 −0 packages/paste-theme-tokens/src/default/index.ts
  9. +1 −0 packages/paste-theme-tokens/src/sendgrid/index.ts
  10. +2 −0 packages/paste-theme/package.json
  11. +10 −0 packages/paste-theme/src/constants.ts
  12. +2 −1 packages/paste-theme/src/index.tsx
  13. +8 −7 packages/paste-theme/src/themeProvider.tsx
  14. +3 −0 packages/paste-theme/tsconfig.build.json
  15. +2 −1 packages/paste-types/package.json
  16. +3 −1 packages/paste-types/src/index.ts
  17. +6 −0 packages/paste-types/src/style-props/backgroundColor.ts
  18. +34 −0 packages/paste-types/src/style-props/border.ts
  19. +6 −0 packages/paste-types/src/style-props/boxShadow.ts
  20. +24 −0 packages/paste-types/src/style-props/font.ts
  21. +7 −0 packages/paste-types/src/style-props/index.ts
  22. +34 −0 packages/paste-types/src/style-props/sizing.ts
  23. +22 −0 packages/paste-types/src/style-props/spacing.ts
  24. +6 −0 packages/paste-types/src/style-props/zIndex.ts
  25. +0 −114 packages/paste-types/src/tokenProps.ts
  26. 0 packages/{paste-website/types/utils.ts → paste-types/src/utils/index.ts}
  27. +1 −1 packages/paste-website/src/components/DoDont.tsx
  28. +6 −6 packages/paste-website/src/components/ThemeSwitcher.tsx
  29. +5 −4 packages/paste-website/src/components/Typography.tsx
  30. +1 −1 packages/paste-website/src/components/empty-state/InDevelopment.tsx
  31. +1 −1 packages/paste-website/src/components/empty-state/NotBuilt.tsx
  32. +1 −1 packages/paste-website/src/components/empty-state/NotFound.tsx
  33. +2 −2 packages/paste-website/src/components/input/index.tsx
  34. +1 −1 packages/paste-website/src/components/label/index.tsx
  35. +5 −5 packages/paste-website/src/components/shortcodes/component-header/index.tsx
  36. +4 −2 packages/paste-website/src/components/shortcodes/live-preview/index.tsx
  37. +2 −2 packages/paste-website/src/components/site-wrapper/SiteFooter.tsx
  38. +8 −7 packages/paste-website/src/components/site-wrapper/SiteHeader.tsx
  39. +7 −5 packages/paste-website/src/components/tokens-example/index.tsx
  40. +7 −8 packages/paste-website/src/components/tokens-list/index.tsx
  41. +0 −9 packages/paste-website/src/constants.ts
  42. +8 −8 packages/paste-website/src/context/ActiveSiteThemeContext.tsx
  43. +92 −68 packages/paste-website/src/pages/components/button/index.mdx
  44. +17 −10 packages/paste-website/src/pages/tokens/how-to-compose-custom-ui-with-tokens.mdx
  45. +33 −29 packages/paste-website/src/pages/tokens/index.mdx
  46. +217 −2 packages/paste-website/src/pages/utilities/box/index.mdx
  47. +785 −733 yarn.lock
@@ -1,10 +1,5 @@
export const THEME_STORAGE_KEY = 'ThemeSwitcher/Theme';

export const Themes = {
CONSOLE: 'console',
SENDGRID: 'sendgrid',
};

export const ADDON_CODENAME = 'twilio/theme-switcher';

export const Events = {
@@ -1,12 +1,12 @@
/* This file contains the code for the addon's decorator that wraps each story */
import * as React from 'react';
import {Theme} from '@twilio-paste/theme';
import {Theme, ThemeVariants} from '@twilio-paste/theme';
import addonsAPI, {makeDecorator} from '@storybook/addons';
import {Events, Themes, THEME_STORAGE_KEY} from './constants';
import {Events, THEME_STORAGE_KEY} from './constants';

class ThemeWrapper extends React.Component {
state = {
theme: localStorage.getItem(THEME_STORAGE_KEY) || Themes.CONSOLE,
theme: localStorage.getItem(THEME_STORAGE_KEY) || ThemeVariants.CONSOLE,
};

componentDidMount() {
@@ -26,11 +26,7 @@ class ThemeWrapper extends React.Component {
};

render() {
return (
<Theme.Provider theme={this.state.theme} customBreakpoints={[]}>
{this.props.children}
</Theme.Provider>
);
return <Theme.Provider theme={this.state.theme}>{this.props.children}</Theme.Provider>;
}
}

@@ -1,20 +1,21 @@
/* This file contains the code for the addon's panel */
import * as React from 'react';
import addonAPI from '@storybook/addons';
import {Themes, Events, ADDON_CODENAME, THEME_STORAGE_KEY} from './constants';
import {ThemeVariants} from '@twilio-paste/theme';
import {Events, ADDON_CODENAME, THEME_STORAGE_KEY} from './constants';

function findKeyByValue(value) {
return Object.keys(Themes).find(key => Themes[key] === value);
return Object.keys(ThemeVariants).find(key => ThemeVariants[key] === value);
}

class ThemeSwitcherPanel extends React.Component {
state = {
theme: localStorage.getItem(THEME_STORAGE_KEY) || Themes.CONSOLE,
theme: localStorage.getItem(THEME_STORAGE_KEY) || ThemeVariants.CONSOLE,
};

onChangeTheme = e => {
const {channel} = this.props;
const theme = Themes[e.target.value];
const theme = ThemeVariants[e.target.value];

this.setState({
theme,
@@ -39,7 +40,7 @@ class ThemeSwitcherPanel extends React.Component {
const {theme} = this.state;

// Get all theme options
const options = Object.keys(Themes).map((value, i) => (
const options = Object.keys(ThemeVariants).map((value, i) => (
<option key={i} value={value}>
{value.toLowerCase()}
</option>
@@ -63,21 +63,20 @@
"@commitlint/config-conventional": "8.0.0",
"@emotion/babel-preset-css-prop": "^10.0.14",
"@expo/spawn-async": "^1.5.0",
"@storybook/addon-actions": "^5.1.9",
"@storybook/addon-info": "^5.1.9",
"@storybook/addon-knobs": "^5.1.9",
"@storybook/addon-links": "^5.1.9",
"@storybook/addon-storyshots": "^5.1.9",
"@storybook/addons": "^5.1.9",
"@storybook/react": "^5.1.9",
"@storybook/addon-actions": "^5.2.3",
"@storybook/addon-info": "^5.2.3",
"@storybook/addon-knobs": "^5.2.3",
"@storybook/addon-links": "^5.2.3",
"@storybook/addon-storyshots": "^5.2.3",
"@storybook/addons": "^5.2.3",
"@storybook/react": "^5.2.3",
"@types/enzyme": "^3.10.1",
"@types/jest": "^24.0.15",
"@types/react": "^16.8.23",
"@types/react-dom": "^16.8.4",
"@types/react-test-renderer": "^16.8.2",
"@types/storybook__addon-actions": "^3.4.3",
"@types/storybook__addon-info": "^4.1.2",
"@types/storybook__addon-knobs": "^5.0.2",
"@types/storybook__react": "^4.0.2",
"@types/styled-system": "^4.1.0",
"@types/webpack": "^4.4.34",
@@ -1,7 +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 {ThemeShape} from '@twilio-paste/theme-tokens';

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

export interface ZIndexProps {
zIndex?: keyof ThemeShape['zIndices'];
}

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

@@ -1,43 +1,51 @@
import styled from '@emotion/styled';
import {
space,
width,
minWidth,
maxWidth,
height,
minHeight,
maxHeight,
borders,
display,
DisplayProps,
borders,
BorderProps,
height,
maxWidth,
minWidth,
space,
boxShadow,
zIndex,
overflow,
OverflowProps,
style,
width,
} from 'styled-system';

import {
SpacingProps,
BackgroundColorProps,
BorderRadiusProps,
BorderWidthProps,
WidthProps,
HeightProps,
MaxWidthProps,
MinWidthProps,
BorderColorProps,
BorderStyleProps,
MaxWidthProps,
HeightProps,
MinHeightProps,
MaxHeightProps,
SpacingProps,
BackgroundColorProps,
BorderProps,
BoxShadowProps,
ZIndexProps,
} from '@twilio-paste/types';

export interface BoxProps
extends DisplayProps,
BorderProps,
HeightProps,
MaxWidthProps,
extends WidthProps,
MinWidthProps,
WidthProps,
MaxWidthProps,
HeightProps,
MinHeightProps,
MaxHeightProps,
SpacingProps,
BackgroundColorProps,
BorderColorProps,
BorderRadiusProps,
BorderStyleProps,
BorderWidthProps {
BorderProps,
BoxShadowProps,
ZIndexProps,
// styled-system
DisplayProps,
OverflowProps {
as?: keyof JSX.IntrinsicElements;
}

@@ -114,11 +122,16 @@ const Box = styled.div<BoxProps>`
${borderTopLeftRadius};
${borderTopRightRadius};
${display};
${height};
${maxWidth};
${width};
${minWidth};
${maxWidth};
${height};
${minHeight};
${maxHeight};
${boxShadow};
${space};
${width};
${zIndex};
${overflow};
`;

Box.defaultProps = {
@@ -7,9 +7,17 @@ import {Box} from '../src';

const backgroundColorOptions = Object.keys(DefaultTheme.backgroundColors);
const spaceOptions = Object.keys(DefaultTheme.space);
const widthOptions = Object.keys(DefaultTheme.widths);
const minWidthOptions = Object.keys(DefaultTheme.minWidths);
const maxWidthOptions = Object.keys(DefaultTheme.maxWidths);
const heightOptions = Object.keys(DefaultTheme.heights);
const minHeightOptions = Object.keys(DefaultTheme.minHeights);
const maxHeightOptions = Object.keys(DefaultTheme.maxHeights);
const borderRadiusOptions = Object.keys(DefaultTheme.radii);
const borderColorOptions = Object.keys(DefaultTheme.borderColors);
const borderWidthOptions = Object.keys(DefaultTheme.borderWidths);
const boxShadowOptions = Object.keys(DefaultTheme.shadows);
const zIndexOptions = Object.keys(DefaultTheme.zIndices);

const demoString = `I'm some text in a box`;

@@ -19,83 +27,113 @@ storiesOf('Utilities|Box', module)
const backgroudColorValue = select(
'backgroundColor',
backgroundColorOptions,
'colorBackgroundBody'
'colorBackgroundPrimaryLight'
) as keyof ThemeShape['backgroundColors'];

const borderRadiusValue = select('borderRadius', borderRadiusOptions, '') as keyof ThemeShape['radii'];

const borderBottomLeftRadiusValue = select(
'borderBottomLeftRadius',
borderRadiusOptions,
''
) as keyof ThemeShape['radii'];

const borderBottomRightRadiusValue = select(
'borderBottomRightRadius',
const borderRadiusValue = select(
'borderRadius',
borderRadiusOptions,
''
'borderRadius20'
) as keyof ThemeShape['radii'];

const borderTopLeftRadiusValue = select(
'borderTopLeftRadius',
borderRadiusOptions,
''
) as keyof ThemeShape['radii'];

const borderTopRightRadiusValue = select(
'borderTopRightRadius',
borderRadiusOptions,
''
) as keyof ThemeShape['radii'];
const borderBottomLeftRadiusValue = select(
'borderBottomLeftRadius',
borderRadiusOptions,
''
) as keyof ThemeShape['radii'];

const borderColorValue = select('borderColor', borderColorOptions, '') as keyof ThemeShape['borderColors'];

const borderStyleValue = text('borderStyle', '');
const borderBottomRightRadiusValue = select(
'borderBottomRightRadius',
borderRadiusOptions,
''
) as keyof ThemeShape['radii'];

const borderWidthValue = select('borderWidth', borderWidthOptions, '') as keyof ThemeShape['borderWidths'];

const borderBottomWidthValue = select(
'borderBottomWidth',
const borderTopWidthValue = select('borderTopWidth', borderWidthOptions, '') as keyof ThemeShape['borderWidths'];
const borderRightWidthValue = select(
'borderRightWidth',
borderWidthOptions,
''
) as keyof ThemeShape['borderWidths'];

const borderLeftWidthValue = select('borderLeftWidth', borderWidthOptions, '') as keyof ThemeShape['borderWidths'];

const borderRightWidthValue = select(
'borderRightWidth',
const borderBottomWidthValue = select(
'borderBottomWidth',
borderWidthOptions,
''
) as keyof ThemeShape['borderWidths'];

const borderTopWidthValue = select('borderTopWidth', borderWidthOptions, '') as keyof ThemeShape['borderWidths'];

const paddingValue = select('padding', spaceOptions, '') as keyof ThemeShape['space'];

const marginValue = select('margin', spaceOptions, '') as keyof ThemeShape['space'];

const displayValue = text('display', '');
const borderLeftWidthValue = select('borderLeftWidth', borderWidthOptions, '') as keyof ThemeShape['borderWidths'];
const borderColorValue = select(
'borderColor',
borderColorOptions,
'colorBorderPrimaryDark'
) as keyof ThemeShape['borderColors'];
const borderStyleValue = text('borderStyle', 'solid');

const paddingValue = select('padding', spaceOptions, 'space20') as keyof ThemeShape['space'];
const marginValue = select('margin', spaceOptions, 'space40') as keyof ThemeShape['space'];

const widthValue = select('width', widthOptions, '') as keyof ThemeShape['widths'];
const minWidthValue = select('minWidth', minWidthOptions, '') as keyof ThemeShape['minWidths'];
const maxWidthValue = select('maxWidth', maxWidthOptions, '') as keyof ThemeShape['maxWidths'];
const heightValue = select('height', heightOptions, 'size10') as keyof ThemeShape['heights'];
const minHeightValue = select('minHeight', minHeightOptions, '') as keyof ThemeShape['minHeights'];
const maxHeightValue = select('maxHeight', maxHeightOptions, '') as keyof ThemeShape['maxHeights'];

const boxShadowValue = select('boxShadow', boxShadowOptions, '') as keyof ThemeShape['shadows'];
const zIndexValue = select('zIndex', zIndexOptions, '') as keyof ThemeShape['zIndices'];
const displayValue = text('display', 'block');
const overflowValue = text('overflow', 'hidden');

return (
<Box
backgroundColor={backgroudColorValue}
borderRadius={borderRadiusValue}
borderTopLeftRadius={borderTopLeftRadiusValue}
borderTopRightRadius={borderTopRightRadiusValue}
borderBottomLeftRadius={borderBottomLeftRadiusValue}
borderBottomRightRadius={borderBottomRightRadiusValue}
borderWidth={borderWidthValue}
borderTopWidth={borderTopWidthValue}
borderRightWidth={borderRightWidthValue}
borderBottomWidth={borderBottomWidthValue}
borderColor={borderColorValue}
borderLeftWidth={borderLeftWidthValue}
borderRadius={borderRadiusValue}
borderRightWidth={borderRightWidthValue}
borderStyle={borderStyleValue}
borderTopLeftRadius={borderTopLeftRadiusValue}
borderTopRightRadius={borderTopRightRadiusValue}
borderTopWidth={borderTopWidthValue}
borderWidth={borderWidthValue}
display={displayValue}
borderColor={borderColorValue}
width={widthValue}
minWidth={minWidthValue}
maxWidth={maxWidthValue}
height={heightValue}
minHeight={minHeightValue}
maxHeight={maxHeightValue}
margin={marginValue}
padding={paddingValue}
boxShadow={boxShadowValue}
display={displayValue}
zIndex={zIndexValue}
overflow={overflowValue}
>
<Text textColor="colorText">{demoString}</Text>
</Box>
);
})
.add('Responsive', () => {
return (
<Box
backgroundColor={['colorBackgroundPrimaryLight', 'colorBackgroundPrimary']}
padding={['space20', 'space70']}
height={['size10', 'size20']}
>
<Text>{demoString}</Text>
<Text textColor="colorText">
DO NOTE: width is not currently responsive due to a bug in Styled System v4. To be fixed in an upgrade.
</Text>
</Box>
);
});

1 comment on commit d151bad

@now

This comment has been minimized.

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