fix: padding and alignment issues (#84)

* fix: dynamic margin

* test: update unit

* test: new baseline

src/utils/__tests__/style-formatter.spec.js

@@ -5,7 +5,7 @@ describe('style-formatter', () => {
   describe('getStyles', () => {
     let style;
     const defaultStyle =
-      'width: 100%;height: 100%;padding: 4px;transition: transform .1s ease-in-out;cursor: pointer;color: #ffffff;font-weight: bold;background-color: myPrimaryColor;border: none;';
+      'width: 100%;height: 100%;transition: transform .1s ease-in-out;cursor: pointer;color: #ffffff;font-weight: bold;background-color: myPrimaryColor;border: none;';
     const someColor = '#ffff00';
     const someColorExpression = 'rgb(255,255,0)';
     const someUrl = '/media/Logo/qlik.png';
@@ -226,7 +226,7 @@ describe('style-formatter', () => {
       expect(text.children[0].textContent).to.equal('Button');
       expect(text.style.whiteSpace).to.equal('nowrap');
       expect(text.style.fontFamily).to.equal('myFont');
-      expect(text.style.fontSize).to.equal('12.5px');
+      expect(text.style.fontSize).to.equal('11.75px');
       expect(text.style.display).to.equal('flex');
       expect(text.style.alignItems).to.equal('center');
       expect(text.style.justifyContent).to.equal('center');
@@ -251,7 +251,7 @@ describe('style-formatter', () => {
         button.children.push(child);
       };
       styleFormatter.createLabelAndIcon({ Theme, button, style });
-      expect(button.children[0].style.fontSize).to.equal('9.2px');
+      expect(button.children[0].style.fontSize).to.equal('9.399999999999999px');
     });
 
     it('should place icon first then label inside text element', () => {
@@ -262,6 +262,7 @@ describe('style-formatter', () => {
       const text = button.children[0];
       expect(text.children[0].style.textDecoration).to.equal('none');
       expect(text.children[1].textContent).to.equal('Button');
+      expect(button.children[0].style.fontSize).to.equal('11.25px');
     });
 
     it('should place label first then icon inside text element', () => {

src/utils/style-formatter.js

@@ -32,7 +32,7 @@ const getColor = ({ useColorExpression, colorExpression, color }, defaultColor,
 
 export default {
   getStyles({ style, disabled, Theme, element }) {
-    let styles = 'width: 100%;height: 100%;padding: 4px;transition: transform .1s ease-in-out;';
+    let styles = 'width: 100%;height: 100%;transition: transform .1s ease-in-out;';
     const { font, background, border } = style;
     const primaryColor = colorUtils.getDefaultColor(Theme);
     const palette = colorUtils.getPalette(Theme);
@@ -84,7 +84,8 @@ export default {
     style.font.style.underline && (textSpan.style.textDecoration = 'underline');
     text.appendChild(textSpan);
     // icon
-    if (isSense && style.icon.useIcon && style.icon.iconType !== '') {
+    const hasIcon = isSense && style.icon.useIcon && style.icon.iconType !== '';
+    if (hasIcon) {
       const iconSpan = document.createElement('span');
       iconSpan.style.textDecoration = 'none';
       iconSpan.style.fontSize = 'inherit';
@@ -101,11 +102,17 @@ export default {
     let newFontsize = (button.clientHeight / text.offsetHeight) * button.clientHeight;
     text.style.fontSize = `${newFontsize}px`;
     // 3. Adjust the font size to the width ratio between button container and text box
-    if (text.offsetWidth + 8 > button.clientWidth) {
-      newFontsize *= (button.clientWidth - 8) / text.offsetWidth;
+    if (text.offsetWidth > button.clientWidth) {
+      newFontsize *= button.clientWidth / text.offsetWidth;
     }
     // 4. Setting final font size by scaling with the font size from the layout + other font styling
-    text.style.fontSize = `${Math.max((newFontsize * style.font.size), 8)}px`;
+    if (hasIcon) {
+      text.style.fontSize = `${Math.max(newFontsize * style.font.size * 0.9, 8)}px`;
+      text.children[0].style.marginRight = `${text.offsetWidth * 0.04}px`;
+    } else {
+      text.style.fontSize = `${Math.max(newFontsize * style.font.size * 0.94, 8)}px`;
+    }
+    text.style.margin = '0 3%';
     text.style.display = 'flex';
     text.style.alignItems = 'center';
     text.style.justifyContent =