fix: made minimum font size 8px (#83)

* fix: made minimum font size 8px

* test: added back changed unit test

* refactor: comments

Co-Authored-By: Max Gefvert <max.gefvert@gmail.com>

* refactor: changed to 0-1 instead of 0-100

* fix: change baseline picture

* fix: changed steps to step and updated integration test

* fix: change baseline image

src/ext.js

@@ -272,9 +272,9 @@ export default function ext({ translator }) {
                       type: 'number',
                       ref: 'style.font.size',
                       translation: 'properties.fontSize',
-                      min: 1,
-                      steps: 1,
-                      max: 100,
+                      min: 0.2,
+                      max: 1,
+                      step: 0.01,
                     },
                     useFontColorExpression: {
                       ref: 'style.font.useColorExpression',

src/object-properties.js

@@ -44,7 +44,7 @@ const properties = {
       /**
        * @type {number}
        */
-      size: 50,
+      size: 0.5,
       /**
        * @type {boolean}
        */

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

@@ -232,15 +232,26 @@ describe('style-formatter', () => {
       expect(text.style.justifyContent).to.equal('center');
     });
 
-    it('should set fontSize when text offsetWidth is bigger than button', () => {
+    it('should set fontSize to 8px for small font sizes', () => {
       button.appendChild = child => {
         child.setAttribute = sinon.spy();
         child.offsetHeight = 400;
         child.offsetWidth = 400;
         button.children.push(child);
       };
       styleFormatter.createLabelAndIcon({ Theme, button, style });
-      expect(button.children[0].style.fontSize).to.equal('2.875px');
+      expect(button.children[0].style.fontSize).to.equal('8px');
+    });
+
+    it('should set fontSize when text offsetWidth is bigger than button', () => {
+      button.appendChild = child => {
+        child.setAttribute = sinon.spy();
+        child.offsetHeight = 400;
+        child.offsetWidth = 125;
+        button.children.push(child);
+      };
+      styleFormatter.createLabelAndIcon({ Theme, button, style });
+      expect(button.children[0].style.fontSize).to.equal('9.2px');
     });
 
     it('should place icon first then label inside text element', () => {

src/utils/style-formatter.js

@@ -102,7 +102,7 @@ export default {
       newFontsize *= (button.clientWidth - 8) / text.offsetWidth;
     }
     // 4. Setting final font size by scaling with the font size from the layout + other font styling
-    text.style.fontSize = `${(newFontsize * style.font.size) / 100}px`;
+    text.style.fontSize = `${Math.max((newFontsize * style.font.size), 8)}px`;
     text.style.display = 'flex';
     text.style.alignItems = 'center';
     text.style.justifyContent =

test/integration/rendering.spec.js

@@ -7,7 +7,7 @@ describe('should render an', () => {
   const app = encodeURIComponent(process.env.APP_ID || '/apps/Executive_Dashboard.qvf');
 
   before(async () => {
-    await page.goto(`${process.testServer.url}/render/app/${app}?object=mtd`);
+    await page.goto(`${process.testServer.url}/render/app/${app}?object=CNaxMh`);
     await page.waitForSelector(content, { visible: true });
   });