fix: fix styles after color updates

8base · Nov 1, 2019 · 5d3101e · 5d3101e
1 parent 8199aba
commit 5d3101e
Show file tree

Hide file tree

Showing 34 changed files with 38 additions and 13 deletions.
diff --git a/...ests__/__image_snapshots__/avatars-test-js-components-avatars-common-1-snap.png b/...ests__/__image_snapshots__/avatars-test-js-components-avatars-common-1-snap.png
diff --git a/...ts__/__image_snapshots__/checkbox-test-js-components-checkbox-common-1-snap.png b/...ts__/__image_snapshots__/checkbox-test-js-components-checkbox-common-1-snap.png
diff --git a/..._image_snapshots__/checkbox-test-js-components-checkbox-field-common-1-snap.png b/..._image_snapshots__/checkbox-test-js-components-checkbox-field-common-1-snap.png
diff --git a/...napshots__/date-input-test-js-components-date-input-common-open-date-1-snap.png b/...napshots__/date-input-test-js-components-date-input-common-open-date-1-snap.png
diff --git a/...ts__/__image_snapshots__/input-test-js-components-input-field-common-1-snap.png b/...ts__/__image_snapshots__/input-test-js-components-input-field-common-1-snap.png
diff --git a/.../__image_snapshots__/pagination-test-js-components-pagination-common-1-snap.png b/.../__image_snapshots__/pagination-test-js-components-pagination-common-1-snap.png
diff --git a/...ts__/__image_snapshots__/progress-test-js-components-progress-common-1-snap.png b/...ts__/__image_snapshots__/progress-test-js-components-progress-common-1-snap.png
diff --git a/..._image_snapshots__/radio-group-field-test-js-components-radio-common-1-snap.png b/..._image_snapshots__/radio-group-field-test-js-components-radio-common-1-snap.png
diff --git a/...apshots__/radio-group-field-test-js-components-radio-with-custom-gap-1-snap.png b/...apshots__/radio-group-field-test-js-components-radio-with-custom-gap-1-snap.png
diff --git a/...snapshots__/radio-test-js-components-radio-group-field-default-story-1-snap.png b/...snapshots__/radio-test-js-components-radio-group-field-default-story-1-snap.png
diff --git a/...s__/__image_snapshots__/select-test-js-components-select-common-open-1-snap.png b/...s__/__image_snapshots__/select-test-js-components-select-common-open-1-snap.png
diff --git a/...mage_snapshots__/switch-field-test-js-components-switch-field-common-1-snap.png b/...mage_snapshots__/switch-field-test-js-components-switch-field-common-1-snap.png
diff --git a/..._tests__/__image_snapshots__/switch-test-js-components-switch-common-1-snap.png b/..._tests__/__image_snapshots__/switch-test-js-components-switch-common-1-snap.png
diff --git a/...mage_snapshots__/table-test-js-components-table-with-selection-story-1-snap.png b/...mage_snapshots__/table-test-js-components-table-with-selection-story-1-snap.png
diff --git a/...s__/table-test-js-components-table-with-selection-story-all-selected-1-snap.png b/...s__/table-test-js-components-table-with-selection-story-all-selected-1-snap.png
diff --git a/e2e/__tests__/__image_snapshots__/tag-test-js-components-tag-common-1-snap.png b/e2e/__tests__/__image_snapshots__/tag-test-js-components-tag-common-1-snap.png
diff --git a/e2e/__tests__/__image_snapshots__/tag-test-js-components-tag-condensed-1-snap.png b/e2e/__tests__/__image_snapshots__/tag-test-js-components-tag-condensed-1-snap.png
diff --git a/...__/__image_snapshots__/tag-test-js-components-tag-with-large-content-1-snap.png b/...__/__image_snapshots__/tag-test-js-components-tag-with-large-content-1-snap.png
diff --git a/e2e/__tests__/__image_snapshots__/text-test-js-components-text-common-1-snap.png b/e2e/__tests__/__image_snapshots__/text-test-js-components-text-common-1-snap.png
diff --git a/...__image_snapshots__/text-test-js-components-text-with-kind-modifiers-1-snap.png b/...__image_snapshots__/text-test-js-components-text-with-kind-modifiers-1-snap.png
diff --git a/...e_snapshots__/tree-select-test-js-components-tree-select-common-open-1-snap.png b/...e_snapshots__/tree-select-test-js-components-tree-select-common-open-1-snap.png
diff --git a/...hots__/tree-select-test-js-components-tree-select-common-remove-item-1-snap.png b/...hots__/tree-select-test-js-components-tree-select-common-remove-item-1-snap.png
diff --git a/...shots__/tree-select-test-js-components-tree-select-common-select-all-1-snap.png b/...shots__/tree-select-test-js-components-tree-select-common-select-all-1-snap.png
diff --git a/...hots__/tree-select-test-js-components-tree-select-common-select-item-1-snap.png b/...hots__/tree-select-test-js-components-tree-select-common-select-item-1-snap.png
diff --git a/...ts__/tree-select-test-js-components-tree-select-common-unselect-item-1-snap.png b/...ts__/tree-select-test-js-components-tree-select-common-unselect-item-1-snap.png
diff --git a/src/components/Button/Button.theme.js b/src/components/Button/Button.theme.js
@@ -90,7 +90,16 @@ const getLinkStyles = (props: *) => {
 
 const getSizeStyles = (props) => {
   if (props.variant === 'link') {
-    return {};
+    switch (props.size) {
+      case 'sm': return {
+        fontSize: '1.2rem',
+        lineHeight: '1.4rem',
+        fontWeight: '400',
+      };
+      case 'lg':
+      case 'md':
+      default: return {};
+    }
   }
 
   switch (props.size) {
@@ -419,6 +428,17 @@ const [ButtonTag, theme] = createThemeTag(name, ({ COLORS, SIZES, FONTS }: *) =>
       '& i': {
         width: '20px',
         height: '20px',
+
+        '&:not(:last-child)': {
+          marginRight: '8px',
+        },
+      }} : {}),
+
+    ...(props.withIconAutosize && props.variant === 'link' && props.size === 'sm' ? {
+      '& i': {
+        width: '16px',
+        height: '16px',
+        marginRight: '8px',
       }} : {})
     ,
   }),

diff --git a/src/components/Form/__snapshots__/Form.test.js.snap b/src/components/Form/__snapshots__/Form.test.js.snap
@@ -42,7 +42,6 @@ exports[`<Form /> should shallow form error 1`] = `
       color="SECONDARY_TEXT_COLOR"
       ellipsis={false}
       kind="body"
-      weight="normal"
     >
       Some error
     </Text>

diff --git a/src/components/Icon/Icon.js b/src/components/Icon/Icon.js
@@ -62,7 +62,7 @@ const Icon = ({ name, className, children, title, ...rest }: IconProps) => {
                   modifiers={ rest }
                   className={ className }
                 >
-                  <Glyph width="100%" height="100%" />
+                  <Glyph />
                 </IconSvgTag>
               </When>
             </Choose>

diff --git a/src/components/Icon/Icon.theme.js b/src/components/Icon/Icon.theme.js
@@ -29,6 +29,12 @@ const [IconWrapperTag, themeWrapper] = createThemeTag(`${name}Wrapper`, ({ COLOR
 
 
 const [IconSvgTag, themeSvg] = createThemeTag(`${name}Svg`, {
+  root: {
+    '& > svg': {
+      height: '100%',
+      width: '100%',
+    },
+  },
   modifiers: {
     size: {
       xs: {

diff --git a/src/components/Icon/__snapshots__/Icon.test.js.snap b/src/components/Icon/__snapshots__/Icon.test.js.snap
@@ -47,14 +47,10 @@ exports[`<Icon /> should shallow input 1`] = `
               title="Alert icon"
             >
               <Alert
-                height="100%"
                 viewBox="0 0 35 31"
-                width="100%"
               >
                 <svg
-                  height="100%"
                   viewBox="0 0 35 31"
-                  width="100%"
                 >
                   <g
                     fill="none"

diff --git a/src/components/Link/Link.theme.js b/src/components/Link/Link.theme.js
@@ -7,7 +7,7 @@ import { createThemeTag } from '../../theme/createThemeTag';
 const name = 'link';
 
 const [LinkTag, theme] = createThemeTag(name, ({ COLORS, FONTS }) => ({
-  root: {
+  root: props => ({
     cursor: 'pointer',
     ...FONTS.LINK,
     fontSize: 'inherit',
@@ -16,7 +16,13 @@ const [LinkTag, theme] = createThemeTag(name, ({ COLORS, FONTS }) => ({
     '&:hover': {
       textDecoration: 'underline',
     },
-  },
+
+    ...((props.color === 'BLUE_30' || props.color === 'BLUE' || props.color === 'PRIMARY') ? {
+      '&:active': {
+        color: COLORS.BLUE_10,
+      },
+    } : {}),
+  }),
   modifiers: {
     color: fp.mapValues(
       (color) => ({ color }),

diff --git a/src/components/Pagination/Pagination.theme.js b/src/components/Pagination/Pagination.theme.js
@@ -42,7 +42,7 @@ const [PaginationItemTag, themePaginationItem] = createThemeTag(`${name}Item`, (
 
       '&:before': {
         content: '\'\'',
-        backgroundColor: COLORS.BLUE_10,
+        backgroundColor: COLORS.PRIMARY,
         borderRadius: 18,
         position: 'absolute',
         left: '- calc((28px - 100%) / 2)',

diff --git a/src/components/Text/Text.js b/src/components/Text/Text.js
@@ -35,8 +35,6 @@ function Text({
 }
 
 Text.defaultProps = {
-  color: 'PRIMARY_TEXT_COLOR',
-  weight: 'normal',
   kind: 'body',
   ellipsis: false,
 };

diff --git a/src/theme/colors.js b/src/theme/colors.js
@@ -44,7 +44,7 @@ const DEFINE_PALETTE = {
 const PALETTE = {
   ...DEFINE_PALETTE,
 
-  PRIMARY: DEFINE_PALETTE.BLUE_10,
+  PRIMARY: DEFINE_PALETTE.BLUE_30,
   SECONDARY: DEFINE_PALETTE.GREEN_40,
   SUCCESS: DEFINE_PALETTE.GREEN_10,
   DANGER: DEFINE_PALETTE.RED_30,