From 42e28416e850ede965d89622236a18b55cb869f4 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Wed, 8 Jan 2020 10:13:20 +0100 Subject: [PATCH 1/7] remove duplicate decorator --- .../components/src/stories/decorators/ThemeDecorator.tsx | 8 -------- packages/components/src/stories/decorators/index.ts | 1 - 2 files changed, 9 deletions(-) delete mode 100644 packages/components/src/stories/decorators/ThemeDecorator.tsx delete mode 100644 packages/components/src/stories/decorators/index.ts diff --git a/packages/components/src/stories/decorators/ThemeDecorator.tsx b/packages/components/src/stories/decorators/ThemeDecorator.tsx deleted file mode 100644 index 732a51816e3..00000000000 --- a/packages/components/src/stories/decorators/ThemeDecorator.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { ThemeProvider } from 'styled-components'; - -import theme from '@codesandbox/common/lib/theme'; - -export const ThemeDecorator = (fn: () => JSX.Element) => ( - {fn()} -); diff --git a/packages/components/src/stories/decorators/index.ts b/packages/components/src/stories/decorators/index.ts deleted file mode 100644 index 10b8fe9988e..00000000000 --- a/packages/components/src/stories/decorators/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ThemeDecorator'; From 1e65f7ad3429ba88e7a05c113f153ed44dd1d895 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Wed, 8 Jan 2020 10:20:35 +0100 Subject: [PATCH 2/7] add parent styles to layout decorator --- .../.storybook/decorators/LayoutDecorator.tsx | 15 ++++++++----- .../components/Element/element.stories.tsx | 22 +++++++++++++++++++ .../src/components/Element/index.tsx | 16 ++++++++++++++ .../src/components/Stack/stack.stories.tsx | 8 +++---- 4 files changed, 51 insertions(+), 10 deletions(-) create mode 100644 packages/components/src/components/Element/element.stories.tsx create mode 100644 packages/components/src/components/Element/index.tsx diff --git a/packages/components/.storybook/decorators/LayoutDecorator.tsx b/packages/components/.storybook/decorators/LayoutDecorator.tsx index 893eea70b80..f690fcbfdb1 100644 --- a/packages/components/.storybook/decorators/LayoutDecorator.tsx +++ b/packages/components/.storybook/decorators/LayoutDecorator.tsx @@ -3,25 +3,28 @@ import React from 'react'; import styled from 'styled-components'; const ColoredChildren = styled.div` - & > div > * { + & > *:first-child { + background: #343434; + } + & > * > * { --color: rgb(103, 126, 208); background: var(--color); min-height: 4em; min-width: 4em; } - & > div > *:nth-child(6n + 2) { + & > * > *:nth-child(6n + 2) { --color: rgb(217, 103, 219); } - & > div > *:nth-child(6n + 3) { + & > * > *:nth-child(6n + 3) { --color: rgb(77, 214, 115); } - & > div > *:nth-child(6n + 4) { + & > * > *:nth-child(6n + 4) { --color: rgb(248, 110, 91); } - & > div > *:nth-child(6n + 5) { + & > * > *:nth-child(6n + 5) { --color: rgb(94, 204, 211); } - & > div > *:nth-child(6n + 6) { + & > * > *:nth-child(6n + 6) { --color: rgb(0, 35, 208); } & > div > *:nth-child(6n + 7) { diff --git a/packages/components/src/components/Element/element.stories.tsx b/packages/components/src/components/Element/element.stories.tsx new file mode 100644 index 00000000000..fb8667ef119 --- /dev/null +++ b/packages/components/src/components/Element/element.stories.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { LayoutDecorator } from '../../../.storybook/decorators'; +import { Element } from '.'; + +export default { + title: 'components/Element', + component: Element, + decorators: [LayoutDecorator], +}; + +// replace the text inside with Text variants when available +export const Basic = () => ( + +
+ +); + +export const DefaultOpen = () => ( + +
+ +); diff --git a/packages/components/src/components/Element/index.tsx b/packages/components/src/components/Element/index.tsx new file mode 100644 index 00000000000..3a6d64b5d91 --- /dev/null +++ b/packages/components/src/components/Element/index.tsx @@ -0,0 +1,16 @@ +import styled from 'styled-components'; +import css from '@styled-system/css'; + +export const Element = styled.div<{ + margin?: number; + marginX?: number; + marginY?: number; + marginBottom?: number; +}>(props => + css({ + margin: props.margin || null, + marginX: props.marginX || null, + marginY: props.marginX || null, + marginBottom: props.marginBottom || null, + }) +); diff --git a/packages/components/src/components/Stack/stack.stories.tsx b/packages/components/src/components/Stack/stack.stories.tsx index 6bc215d46fd..d2ee7ab6e08 100644 --- a/packages/components/src/components/Stack/stack.stories.tsx +++ b/packages/components/src/components/Stack/stack.stories.tsx @@ -11,14 +11,14 @@ export default { // replace the text inside with Text variants when available export const Defaults = () => ( - +
); export const WithGap = () => ( - +
spacing token as gap
@@ -26,14 +26,14 @@ export const WithGap = () => ( ); export const Justify = () => ( - +
); export const Align = () => ( - +
From df4d8501d775698187a231c373514ad19045dc5d Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Wed, 8 Jan 2020 10:26:42 +0100 Subject: [PATCH 3/7] add min height to layout decorator --- packages/components/.storybook/decorators/LayoutDecorator.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/.storybook/decorators/LayoutDecorator.tsx b/packages/components/.storybook/decorators/LayoutDecorator.tsx index f690fcbfdb1..821440fc5f4 100644 --- a/packages/components/.storybook/decorators/LayoutDecorator.tsx +++ b/packages/components/.storybook/decorators/LayoutDecorator.tsx @@ -3,8 +3,9 @@ import React from 'react'; import styled from 'styled-components'; const ColoredChildren = styled.div` - & > *:first-child { + & > * { background: #343434; + min-height: 4em; } & > * > * { --color: rgb(103, 126, 208); From 1172b149e5769d8703073c8a3e7dab444c98edd5 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Wed, 8 Jan 2020 10:26:58 +0100 Subject: [PATCH 4/7] add common base element --- .../components/Element/element.stories.tsx | 20 +++++++++---------- .../src/components/Element/index.tsx | 4 +++- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/components/src/components/Element/element.stories.tsx b/packages/components/src/components/Element/element.stories.tsx index fb8667ef119..c5cbe57221a 100644 --- a/packages/components/src/components/Element/element.stories.tsx +++ b/packages/components/src/components/Element/element.stories.tsx @@ -8,15 +8,15 @@ export default { decorators: [LayoutDecorator], }; -// replace the text inside with Text variants when available -export const Basic = () => ( - -
- -); +export const Basic = () => content; + +export const AsProp = () => content; -export const DefaultOpen = () => ( - -
- +export const Margins = () => ( + <> + 2 on the space grid is 2*4px = 8px or 0.5em + left and right + top and bottom + prefer margin bottom when you can + ); diff --git a/packages/components/src/components/Element/index.tsx b/packages/components/src/components/Element/index.tsx index 3a6d64b5d91..68095a9b4cf 100644 --- a/packages/components/src/components/Element/index.tsx +++ b/packages/components/src/components/Element/index.tsx @@ -6,11 +6,13 @@ export const Element = styled.div<{ marginX?: number; marginY?: number; marginBottom?: number; + marginTop?: number; // prefer margin bottom to top }>(props => css({ margin: props.margin || null, marginX: props.marginX || null, - marginY: props.marginX || null, + marginY: props.marginY || null, marginBottom: props.marginBottom || null, + marginTop: props.marginTop || null, }) ); From 9db471a45aa9db6337a7011198463d702a4f4500 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Wed, 8 Jan 2020 10:34:12 +0100 Subject: [PATCH 5/7] use base element for other components --- packages/components/src/components/Collapsible/index.tsx | 5 +++-- packages/components/src/components/Example/index.tsx | 3 ++- packages/components/src/components/Grid/index.tsx | 5 +++-- packages/components/src/components/Stack/index.tsx | 3 ++- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/components/src/components/Collapsible/index.tsx b/packages/components/src/components/Collapsible/index.tsx index 030f24ac610..b3de61d8004 100644 --- a/packages/components/src/components/Collapsible/index.tsx +++ b/packages/components/src/components/Collapsible/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import css from '@styled-system/css'; +import { Element } from '../Element'; export const Header = styled.div( css({ @@ -81,12 +82,12 @@ export const Collapsible: React.FC = ({ const toggle = () => setOpen(!open); return ( -
+
{title}
{open ? {children} : null} -
+ ); }; diff --git a/packages/components/src/components/Example/index.tsx b/packages/components/src/components/Example/index.tsx index 4a7468ef24f..031094e7fc7 100644 --- a/packages/components/src/components/Example/index.tsx +++ b/packages/components/src/components/Example/index.tsx @@ -1,7 +1,8 @@ import React from 'react'; import styled from 'styled-components'; +import { Element } from '../Element'; -const H1 = styled.h1` +const H1 = styled(Element).attrs({ as: 'h1' })` color: red; `; diff --git a/packages/components/src/components/Grid/index.tsx b/packages/components/src/components/Grid/index.tsx index 945284699b1..86e6063fee7 100644 --- a/packages/components/src/components/Grid/index.tsx +++ b/packages/components/src/components/Grid/index.tsx @@ -1,10 +1,11 @@ import styled from 'styled-components'; import css from '@styled-system/css'; +import { Element } from '../Element'; const fontSize = 1; // rem = 16px const lineHeight = fontSize * 1.5; -export const Grid = styled.div<{ columnGap?: number; rowGap?: number }>( +export const Grid = styled(Element)<{ columnGap?: number; rowGap?: number }>( ({ columnGap, rowGap }) => css({ display: 'grid', @@ -19,7 +20,7 @@ export const Grid = styled.div<{ columnGap?: number; rowGap?: number }>( // valid combinations are // start | start + end | start + span | span // span + end is also possible but not implemented here -export const Column = styled.div<{ +export const Column = styled(Element)<{ start?: number; end?: number; span?: number; diff --git a/packages/components/src/components/Stack/index.tsx b/packages/components/src/components/Stack/index.tsx index eb78b4a413c..5016f60b66c 100644 --- a/packages/components/src/components/Stack/index.tsx +++ b/packages/components/src/components/Stack/index.tsx @@ -1,7 +1,8 @@ import styled from 'styled-components'; import css from '@styled-system/css'; +import { Element } from '../Element'; -export const Stack = styled.div<{ +export const Stack = styled(Element)<{ gap?: number; // theme.space token direction?: 'horizontal' | 'vertical'; justify?: string; From eb8cbf9db8b3074e3c6939862c7ba22d63953f17 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Wed, 8 Jan 2020 10:39:14 +0100 Subject: [PATCH 6/7] add all fontsizes + update example --- packages/common/src/design-language/typography.ts | 5 +++++ packages/components/src/components/Example/index.tsx | 10 +++++++--- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/common/src/design-language/typography.ts b/packages/common/src/design-language/typography.ts index cc6dd76667f..045a02e61c0 100644 --- a/packages/common/src/design-language/typography.ts +++ b/packages/common/src/design-language/typography.ts @@ -4,6 +4,11 @@ export const fontSizes = [ 11, 13, 16, + 19, + 24, + 28, + 33, + 40, ]; export const fontWeights = { diff --git a/packages/components/src/components/Example/index.tsx b/packages/components/src/components/Example/index.tsx index 031094e7fc7..6c24900eeeb 100644 --- a/packages/components/src/components/Example/index.tsx +++ b/packages/components/src/components/Example/index.tsx @@ -1,10 +1,14 @@ import React from 'react'; import styled from 'styled-components'; +import css from '@styled-system/css'; import { Element } from '../Element'; -const H1 = styled(Element).attrs({ as: 'h1' })` - color: red; -`; +const H1 = styled(Element).attrs({ as: 'h1' })( + css({ + color: 'reds.500', + fontSize: 7, + }) +); const ExampleComponent = () =>

I am an example component

; From a0cfc56b17b72aac1d6a6bf8595497c5b96794ae Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Wed, 8 Jan 2020 11:24:07 +0100 Subject: [PATCH 7/7] add Text, mutedForeground token --- .../components/src/components/Text/index.tsx | 23 +++++++ .../src/components/Text/text.stories.tsx | 69 +++++++++++++++++++ .../components/src/utils/polyfill-theme.ts | 1 + 3 files changed, 93 insertions(+) create mode 100644 packages/components/src/components/Text/index.tsx create mode 100644 packages/components/src/components/Text/text.stories.tsx diff --git a/packages/components/src/components/Text/index.tsx b/packages/components/src/components/Text/index.tsx new file mode 100644 index 00000000000..cef27e0aff4 --- /dev/null +++ b/packages/components/src/components/Text/index.tsx @@ -0,0 +1,23 @@ +import styled from 'styled-components'; +import css from '@styled-system/css'; +import { Element } from '../Element'; + +const variants = { + body: 'inherit', + muted: 'mutedForeground', + danger: 'errorForeground', +}; + +export const Text = styled(Element).attrs({ as: 'span' })<{ + size?: number; + align?: string; + weight?: string; + variant?: 'body' | 'muted' | 'danger'; +}>(({ size, align, weight, variant = 'body', ...props }) => + css({ + fontSize: size || 'inherit', // from theme.fontSizes + fontWeight: weight || null, // from theme.fontWeights + color: variants[variant], + textAlign: align || 'left', + }) +); diff --git a/packages/components/src/components/Text/text.stories.tsx b/packages/components/src/components/Text/text.stories.tsx new file mode 100644 index 00000000000..731c18530f0 --- /dev/null +++ b/packages/components/src/components/Text/text.stories.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { Text } from '.'; + +export default { + title: 'components/Text', + component: Text, +}; + +// replace the text inside with Text variants when available +export const Basic = () => ( + This is a static template with no bundling +); + +export const Variants = () => ( + <> + + body is the default variant which inherits color from it's container + +
+
+ + Use muted when you don't want to ask for too much attention + +
+
+ Now, we really want your atttention, hello! + +); + +export const Weight = () => ( + <> + thin: These are all the weights Inter supports +
+ light: These are all the weights Inter supports +
+
+ + normal (default): Most of our interface uses these 3 sizes + +
+ + medium: Most of our interface uses these 3 sizes + +
+ + semibold: Most of our interface uses these 3 sizes + +
+
+ bold: These are all the weights Inter supports +
+ + extrabold: These are all the weights Inter supports + +
+ black: These are all the weights Inter supports +
+ +); + +export const Size = () => ( + Takes the size from fontSizes tokens +); + +export const Align = () => ( + + sometimes, just sometimes you need to align right + +); diff --git a/packages/components/src/utils/polyfill-theme.ts b/packages/components/src/utils/polyfill-theme.ts index 61828c4fb1f..7146c879269 100644 --- a/packages/components/src/utils/polyfill-theme.ts +++ b/packages/components/src/utils/polyfill-theme.ts @@ -14,6 +14,7 @@ import deepmerge from 'deepmerge'; // In that case, we should check if it exists before overriding it const polyfillTheme = vsCodeTheme => deepmerge(vsCodeTheme, { + mutedForeground: vsCodeTheme.foreground, // todo: find a way to fill this value sideBar: { hoverBackground: vsCodeTheme.sideBar.border, },