Merge pull request #153 from vrk-kpa/bugfix/icon-positioning

Bugfix/Simplify icon positioning - closes #148
vrk-kpa · Sep 18, 2019 · 10efe29 · 10efe29
2 parents 6bbc28f + 6a73f9e
commit 10efe29
Show file tree

Hide file tree

Showing 11 changed files with 12 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -34,8 +34,8 @@
     "test:tslint": "tslint --project tsconfig.json 'src/**/*.tsx'",
     "test:eslint": "eslint --config .eslintrc src/**/*.tsx",
     "test:stylelint": "stylelint ./src/**/*.{ts,tsx}",
-    "prettier": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
-    "prettier:check": "prettier-check 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
+    "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "prettier:check": "prettier-check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "validate": "npm-run-all test test:lint prettier:check",
     "prebuild": "rimraf dist",
     "build": "npm-run-all build:umd build:es2015 build:esm copyassets",

diff --git a/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -128,9 +128,6 @@ exports[`calling render with the same component on the same container does not r
 .c6 {
   display: inline-block;
   vertical-align: baseline;
-  -webkit-transform: translateY(0.1em);
-  -ms-transform: translateY(0.1em);
-  transform: translateY(0.1em);
 }
 
 .c4 {

diff --git a/src/core/Form/SearchInput/SearchInput.baseStyles.tsx b/src/core/Form/SearchInput/SearchInput.baseStyles.tsx
@@ -15,7 +15,7 @@ export const baseStyles = ({ theme = suomifiTheme }: SearchInputProps) => css`
       position: absolute;
       top: 50%;
       right: ${theme.spacing.m};
-      margin-top: -0.6em;
+      margin-top: -0.5em;
     }
   }
 `;
diff --git a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
@@ -183,9 +183,6 @@ exports[`calling render with the same component on the same container does not r
 .c7 {
   display: inline-block;
   vertical-align: baseline;
-  -webkit-transform: translateY(0.1em);
-  -ms-transform: translateY(0.1em);
-  transform: translateY(0.1em);
 }
 
 .c0 .fi-search-input_input-container {
@@ -200,7 +197,7 @@ exports[`calling render with the same component on the same container does not r
   position: absolute;
   top: 50%;
   right: 16px;
-  margin-top: -0.6em;
+  margin-top: -0.5em;
 }
 
 <label

diff --git a/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap b/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap
@@ -75,9 +75,6 @@ exports[`calling render with the same component on the same container does not r
 .c4 {
   display: inline-block;
   vertical-align: baseline;
-  -webkit-transform: translateY(0.1em);
-  -ms-transform: translateY(0.1em);
-  transform: translateY(0.1em);
   cursor: pointer;
 }
 

diff --git a/src/core/Icon/Icon.baseStyles.tsx b/src/core/Icon/Icon.baseStyles.tsx
@@ -6,7 +6,6 @@ export const iconBaseStyles = ({
 }: SuomifiIconProps) => css`
   display: inline-block;
   vertical-align: baseline;
-  transform: translateY(0.1em);
   ${!!mousePointer &&
     `cursor: pointer;
       & * {

diff --git a/src/core/Icon/__snapshots__/Icon.test.tsx.snap b/src/core/Icon/__snapshots__/Icon.test.tsx.snap
@@ -4,9 +4,6 @@ exports[`calling render with the same component on the same container does not r
 .c0 {
   display: inline-block;
   vertical-align: baseline;
-  -webkit-transform: translateY(0.1em);
-  -ms-transform: translateY(0.1em);
-  transform: translateY(0.1em);
 }
 
 <svg

diff --git a/src/core/Link/Link.baseStyles.ts b/src/core/Link/Link.baseStyles.ts
@@ -25,5 +25,6 @@ export const baseStyles = ({ theme = suomifiTheme }: LinkProps) => css`
 export const externalStyles = ({ theme = suomifiTheme }: LinkProps) => css`
   & .fi-link_icon {
     padding-left: ${theme.spacing.xs};
+    transform: translateY(0.1em);
   }
 `;
diff --git a/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap b/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap
@@ -61,9 +61,6 @@ exports[`calling render with the same component on the same container does not r
 .c5 {
   display: inline-block;
   vertical-align: baseline;
-  -webkit-transform: translateY(0.1em);
-  -ms-transform: translateY(0.1em);
-  transform: translateY(0.1em);
 }
 
 .c3 {
@@ -80,6 +77,9 @@ exports[`calling render with the same component on the same container does not r
 
 .c0 .fi-link_icon {
   padding-left: 4px;
+  -webkit-transform: translateY(0.1em);
+  -ms-transform: translateY(0.1em);
+  transform: translateY(0.1em);
 }
 
 .c1 {

diff --git a/src/core/Menu/Menu.baseStyles.tsx b/src/core/Menu/Menu.baseStyles.tsx
@@ -22,9 +22,10 @@ export const baseStyles = ({
       border-radius: ${theme.radius.basic};
       text-transform: uppercase;
       & > .fi-menu-language_icon {
-        height: 16px;
-        width: 16px;
-        margin-left: ${theme.spacing.xxs};
+        height: 1.2em;
+        width: 1.2em;
+        transform: translateY(0.3em); 
+        margin-left: ${theme.spacing.xs};
       }
     }
   }

diff --git a/src/core/Panel/__snapshots__/PanelExpansion.test.tsx.snap b/src/core/Panel/__snapshots__/PanelExpansion.test.tsx.snap
@@ -95,9 +95,6 @@ exports[`calling render with the same component on the same container does not r
 .c5 {
   display: inline-block;
   vertical-align: baseline;
-  -webkit-transform: translateY(0.1em);
-  -ms-transform: translateY(0.1em);
-  transform: translateY(0.1em);
 }
 
 .c0 {