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(