diff --git a/e2e/__tests__/__image_snapshots__/card-test-js-components-card-default-story-1-snap.png b/e2e/__tests__/__image_snapshots__/card-test-js-components-card-default-story-1-snap.png index 63dcf568..bfea847c 100644 Binary files a/e2e/__tests__/__image_snapshots__/card-test-js-components-card-default-story-1-snap.png and b/e2e/__tests__/__image_snapshots__/card-test-js-components-card-default-story-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/card-test-js-components-card-with-custom-paddings-1-snap.png b/e2e/__tests__/__image_snapshots__/card-test-js-components-card-with-custom-paddings-1-snap.png index d024900e..e37ef209 100644 Binary files a/e2e/__tests__/__image_snapshots__/card-test-js-components-card-with-custom-paddings-1-snap.png and b/e2e/__tests__/__image_snapshots__/card-test-js-components-card-with-custom-paddings-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/card-test-js-components-card-with-multiple-sections-1-snap.png b/e2e/__tests__/__image_snapshots__/card-test-js-components-card-with-multiple-sections-1-snap.png index 5b49b90d..ca381984 100644 Binary files a/e2e/__tests__/__image_snapshots__/card-test-js-components-card-with-multiple-sections-1-snap.png and b/e2e/__tests__/__image_snapshots__/card-test-js-components-card-with-multiple-sections-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-default-story-1-snap.png b/e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-default-story-1-snap.png index fdbdf4f3..76a674df 100644 Binary files a/e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-default-story-1-snap.png and b/e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-default-story-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-with-scroll-1-snap.png b/e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-with-scroll-1-snap.png index 5c247d1b..4517ff88 100644 Binary files a/e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-with-scroll-1-snap.png and b/e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-with-scroll-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-with-stretch-1-snap.png b/e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-with-stretch-1-snap.png index aeb7c92d..b39f1b44 100644 Binary files a/e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-with-stretch-1-snap.png and b/e2e/__tests__/__image_snapshots__/dialog-test-js-components-dialog-with-stretch-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/grid-test-js-components-grid-with-gap-1-snap.png b/e2e/__tests__/__image_snapshots__/grid-test-js-components-grid-with-gap-1-snap.png index 7ef3218e..9886b22a 100644 Binary files a/e2e/__tests__/__image_snapshots__/grid-test-js-components-grid-with-gap-1-snap.png and b/e2e/__tests__/__image_snapshots__/grid-test-js-components-grid-with-gap-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/logs-test-js-components-logs-with-dialog-1-snap.png b/e2e/__tests__/__image_snapshots__/logs-test-js-components-logs-with-dialog-1-snap.png index 73e7df77..f7e81ec7 100644 Binary files a/e2e/__tests__/__image_snapshots__/logs-test-js-components-logs-with-dialog-1-snap.png and b/e2e/__tests__/__image_snapshots__/logs-test-js-components-logs-with-dialog-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/logs-test-js-components-logs-with-stretch-1-snap.png b/e2e/__tests__/__image_snapshots__/logs-test-js-components-logs-with-stretch-1-snap.png index da99503c..1c2d0efb 100644 Binary files a/e2e/__tests__/__image_snapshots__/logs-test-js-components-logs-with-stretch-1-snap.png and b/e2e/__tests__/__image_snapshots__/logs-test-js-components-logs-with-stretch-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/menu-test-js-components-menu-common-1-snap.png b/e2e/__tests__/__image_snapshots__/menu-test-js-components-menu-common-1-snap.png index 76ffc8f7..ad7c9c93 100644 Binary files a/e2e/__tests__/__image_snapshots__/menu-test-js-components-menu-common-1-snap.png and b/e2e/__tests__/__image_snapshots__/menu-test-js-components-menu-common-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/paper-test-js-components-paper-default-story-1-snap.png b/e2e/__tests__/__image_snapshots__/paper-test-js-components-paper-default-story-1-snap.png index ae9748c1..59650e11 100644 Binary files a/e2e/__tests__/__image_snapshots__/paper-test-js-components-paper-default-story-1-snap.png and b/e2e/__tests__/__image_snapshots__/paper-test-js-components-paper-default-story-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/paper-test-js-components-paper-with-border-radius-1-snap.png b/e2e/__tests__/__image_snapshots__/paper-test-js-components-paper-with-border-radius-1-snap.png index a5766d6d..401f69b3 100644 Binary files a/e2e/__tests__/__image_snapshots__/paper-test-js-components-paper-with-border-radius-1-snap.png and b/e2e/__tests__/__image_snapshots__/paper-test-js-components-paper-with-border-radius-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/paper-test-js-components-paper-with-padding-1-snap.png b/e2e/__tests__/__image_snapshots__/paper-test-js-components-paper-with-padding-1-snap.png index 45ae5568..2bbb5f5d 100644 Binary files a/e2e/__tests__/__image_snapshots__/paper-test-js-components-paper-with-padding-1-snap.png and b/e2e/__tests__/__image_snapshots__/paper-test-js-components-paper-with-padding-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/text-test-js-components-text-with-kind-modifiers-1-snap.png b/e2e/__tests__/__image_snapshots__/text-test-js-components-text-with-kind-modifiers-1-snap.png index 257b306a..512a2893 100644 Binary files a/e2e/__tests__/__image_snapshots__/text-test-js-components-text-with-kind-modifiers-1-snap.png and b/e2e/__tests__/__image_snapshots__/text-test-js-components-text-with-kind-modifiers-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-open-1-snap.png b/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-open-1-snap.png index 3a8034b4..1937448d 100644 Binary files a/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-open-1-snap.png and b/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-open-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-remove-item-1-snap.png b/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-remove-item-1-snap.png index a306dc48..d09e4d04 100644 Binary files a/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-remove-item-1-snap.png and b/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-remove-item-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-select-all-1-snap.png b/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-select-all-1-snap.png index 6d847ff5..cea9d3ef 100644 Binary files a/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-select-all-1-snap.png and b/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-select-all-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-select-item-1-snap.png b/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-select-item-1-snap.png index da756826..a75df3bd 100644 Binary files a/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-select-item-1-snap.png and b/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-select-item-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-unselect-item-1-snap.png b/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-unselect-item-1-snap.png index 40a7e8eb..b3c756e0 100644 Binary files a/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-unselect-item-1-snap.png and b/e2e/__tests__/__image_snapshots__/tree-select-test-js-components-tree-select-common-unselect-item-1-snap.png differ diff --git a/src/components/Grid/Grid.stories.js b/src/components/Grid/Grid.stories.js index a42a15ba..cbaf0fba 100644 --- a/src/components/Grid/Grid.stories.js +++ b/src/components/Grid/Grid.stories.js @@ -138,6 +138,17 @@ export const withGap = () => ( + + + custom + + + + + + + + ); diff --git a/src/components/Grid/GridLayout.js b/src/components/Grid/GridLayout.js index d6ef3d84..f81920e4 100644 --- a/src/components/Grid/GridLayout.js +++ b/src/components/Grid/GridLayout.js @@ -9,7 +9,9 @@ type GridLayoutProps = { /** when true then stretch to full width */ stretch?: boolean, /** possbile spaces between grid items */ - gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'none', + gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'none' | 'custom', + /** custom grid-gap value (it is required if the gap set to custom) */ + customGap?: string, /** when true then set inline-grid */ inline?: boolean, /** possible paddings of the grid layout */ @@ -70,7 +72,7 @@ const [StyledTag, theme] = createThemeTag(name, { return style; }, - modifiers: { + modifiers: (props) => ({ gap: { xs: { gridGap: '4px', @@ -91,6 +93,9 @@ const [StyledTag, theme] = createThemeTag(name, { gridGap: '40px', }, none: {}, + custom: { + gridGap: props.customGap, + }, }, padding: { none: {}, @@ -115,7 +120,7 @@ const [StyledTag, theme] = createThemeTag(name, { width: '100%', maxWidth: '100%', }, - }, + }), }); class GridLayout extends React.PureComponent { diff --git a/src/components/Paper/Paper.theme.js b/src/components/Paper/Paper.theme.js index f06d076f..a3ee5357 100644 --- a/src/components/Paper/Paper.theme.js +++ b/src/components/Paper/Paper.theme.js @@ -11,7 +11,7 @@ const [PaperTag, theme] = createThemeTag(name, ({ COLORS, SIZES }: *) => ({ background: COLORS.WHITE, color: COLORS.BLACK, - boxShadow: '0 1px 3px 0 rgba(50,50,93,.14), 0 4px 6px 0 rgba(112,157,199,.08)', + boxShadow: '0px 2px 10px rgb(50 60 71 / 10%)', position: 'relative', overflow: 'hidden', }, diff --git a/src/components/Text/Text.js b/src/components/Text/Text.js index 8beb7e74..9cc5b4ae 100644 --- a/src/components/Text/Text.js +++ b/src/components/Text/Text.js @@ -23,7 +23,21 @@ type TextProps = { /** possible types of the css cursor property */ cursor?: 'pointer' | 'default' | 'auto', /** modern text kinds */ - kind?: 'overline-2' | 'overline-1' | 'small-2' | 'small-1' | 'body' | 'subtitle', + kind?: 'overline-2' | 'overline-1' | 'small-2' | 'small-1' | 'body' | 'subtitle' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5', +}; + +const TAG_NAMES = { + 'overline-2': 'span', + 'overline-1': 'span', + 'small-2': 'span', + 'small-1': 'span', + body: 'span', + subtitle: 'span', + h1: 'h1', + h2: 'h2', + h3: 'h3', + h4: 'h4', + h5: 'h5', }; function Text({ @@ -31,7 +45,7 @@ function Text({ children, ...rest }: TextProps) { - return { children || text }; + return { children || text }; } Text.defaultProps = { diff --git a/src/components/Text/Text.stories.js b/src/components/Text/Text.stories.js index b559c888..d7a6db57 100644 --- a/src/components/Text/Text.stories.js +++ b/src/components/Text/Text.stories.js @@ -30,6 +30,11 @@ common.story = { export const withKindModifiers = () => ( + H1 kind: { placeholderText } + H2 kind: { placeholderText } + H3 kind: { placeholderText } + H4 kind: { placeholderText } + H5 kind: { placeholderText } Subtitle kind: { placeholderText } Body kind: { placeholderText } Overline-1 kind: { placeholderText } diff --git a/src/components/Text/Text.theme.js b/src/components/Text/Text.theme.js index 26494210..2c0a5677 100644 --- a/src/components/Text/Text.theme.js +++ b/src/components/Text/Text.theme.js @@ -30,6 +30,21 @@ const [TextTag, theme] = createThemeTag(name, ({ COLORS, FONTS }: *): * => ({ subtitle: { ...FONTS.SUBTITLE, }, + h1: { + ...FONTS.H1, + }, + h2: { + ...FONTS.H2, + }, + h3: { + ...FONTS.H3, + }, + h4: { + ...FONTS.H4, + }, + h5: { + ...FONTS.H5, + }, }, color: fp.mapValues(