Merge pull request #8 from qlik-oss/feature/QPE-585

[QPE 585] Minor design fixes

src/data-table/data-cell.jsx

@@ -96,30 +96,25 @@ class DataCell extends React.PureComponent {
       textAlignment = textAlignmentProp;
     }
 
-    let cellStyle = {
-      fontFamily: styling.options.fontFamily,
-      ...styleBuilder.getStyle(),
-      paddingLeft: '4px',
-      textAlign: textAlignment
-
-    };
-    const { semaphoreColors } = styling;
+    const { semaphoreColors, semaphoreColors: { fieldsToApplyTo } } = styling;
     const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
-    const shouldHaveSemaphoreColors = semaphoreColors.fieldsToApplyTo.applyToAll || semaphoreColors.fieldsToApplyTo.specificFields.indexOf(measurement.parents.dimension1.header) !== -1;
+    const shouldHaveSemaphoreColors = fieldsToApplyTo.applyToMetric && (fieldsToApplyTo.applyToAll || fieldsToApplyTo.specificFields.indexOf(measurement.name) !== -1);
+    let cellStyle;
     if (isValidSemaphoreValue && shouldHaveSemaphoreColors) {
       const { backgroundColor, color } = getSemaphoreColors(measurement, semaphoreColors);
       cellStyle = {
         backgroundColor,
         color,
         fontFamily: styling.options.fontFamily,
-        fontSize: styleBuilder.getStyle().fontSize,
+        ...styleBuilder.getStyle(),
         paddingLeft: '4px',
         textAlign: textAlignment
       };
     }
 
     let cellClass = 'grid-cells';
-    const shouldUseSmallCells = isColumnPercentageBased && data.headers.measurements.length > 1;
+    const hasTwoDimensions = data.headers.dimension2 && data.headers.dimension2.length > 0;
+    const shouldUseSmallCells = isColumnPercentageBased && data.headers.measurements.length > 1 && hasTwoDimensions;
     if (shouldUseSmallCells) {
       cellClass = 'grid-cells-small';
     }
@@ -135,7 +130,6 @@ class DataCell extends React.PureComponent {
     );
   }
 }
-
 DataCell.propTypes = {
   data: PropTypes.shape({
     headers: PropTypes.shape({

src/initialize-transformed.js

@@ -279,7 +279,7 @@ async function initializeTransformed ({ $element, layout, component }) {
       },
       options: {
         backgroundColor: colors[`vColLib${layout.ColorSchema}`],
-        backgroundColorOdd: colors[`vColLib${layout.ColorSchemaP}`],
+        backgroundColorOdd: colors[`vColLib${layout.ColorSchema}P`],
         color: layout.BodyTextColorSchema,
         fontFamily: layout.FontFamily,
         fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize),
@@ -288,6 +288,7 @@ async function initializeTransformed ({ $element, layout, component }) {
       semaphoreColors: {
         fieldsToApplyTo: {
           applyToAll: layout.allsemaphores,
+          applyToMetric: layout.allmetrics,
           specificFields: [
             layout.conceptsemaphore1,
             layout.conceptsemaphore2,

src/main.less

@@ -3,6 +3,12 @@
   @TableBorder: 1px solid #d3d3d3;
   @KpiTableWidth: 230px;
 
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   .edit-mode {
     pointer-events: none;
   }