Merge pull request #1222 from buildo/giogonzo-patch-1

Improve Meter.tsx styleability (closes #1223)

Author: FrancescoCioria

src/Meter/Examples.md

@@ -11,6 +11,7 @@ const ranges = [
 
 const meterProps = {
   ranges,
+  baseBackgroundColor: '#f8f8f8',
   style: { marginBottom: 20 }
 };
 
@@ -40,7 +41,7 @@ const ranges = [
 const meterProps = {
   ranges,
   baseFillingColor: '#CCCCCC',
-  baseBackgroundColor: '#FAFAFA',
+  baseBackgroundColor: '#F8F8F8',
   style: { marginBottom: 20 }
 };
 
@@ -86,6 +87,7 @@ const meterProps = {
   min: 400,
   max: 700,
   ranges,
+  baseBackgroundColor: '#f8f8f8',
   style: { marginBottom: 20 }
 };
 

src/Meter/Meter.tsx

@@ -158,13 +158,13 @@ export class Meter extends React.PureComponent<Meter.Props> {
     return {
       basisSize: `${computePercentage(value, min, max)}%`,
       fillingStyle: {
-        backgroundColor: range ? range.fillingColor : baseFillingColor
+        background: range && range.fillingColor || baseFillingColor
       },
       labelStyle: {
-        color: range ? range.labelColor : baseLabelColor
+        color: range && range.labelColor || baseLabelColor
       },
       barStyle: {
-        backgroundColor: range ? range.backgroundColor : baseBackgroundColor
+        background: range && range.backgroundColor || baseBackgroundColor
       }
     };
   }
@@ -185,7 +185,7 @@ export class Meter extends React.PureComponent<Meter.Props> {
     const formattedLabel = labelFormatter(value, min, max);
 
     return (
-      <FlexView {...{ id, className, style }} grow>
+      <FlexView {...{ id, className, style }} grow vAlignContent='center'>
         <FlexView
           className='bar'
           grow

src/Meter/meter.scss

@@ -1,15 +1,26 @@
 @import '../utils/theme/variables.scss';
 
+$height: 18px !default;
+$font-size: 14px !default;
+$font-weight: $brc-regular !default;
+$border-radius: 10px !default;
+$label-margin: 5px !default;
+
 .meter {
   .bar {
     overflow: hidden;
-    border-radius: 10px;
-    height: 18px;
-    background-color: $brc-paleGrey;
+    border-radius: $border-radius;
+    height: $height;
+
+    .filling {
+      border-bottom-left-radius: $border-radius;
+      border-top-left-radius: $border-radius;
+    }
   }
 
-  .filling {
-    border-bottom-left-radius: 10px;
-    border-top-left-radius: 10px;
+  .label {
+    font-size: $font-size;
+    font-weight: $font-weight;
+    padding-left: $label-margin;
   }
 }

test/components/Meter.test.tsx

@@ -58,11 +58,11 @@ describe('Meter', () => {
   });
 
   it('computes barStyle', () => {
-    expect(meter.find('.bar').prop('style').backgroundColor).toBe(ranges[0].backgroundColor);
+    expect(meter.find('.bar').prop('style').background).toBe(ranges[0].backgroundColor);
   });
 
   it('computes fillingStyle', () => {
-    expect(meter.find('.filling').prop('style').backgroundColor).toBe(ranges[0].fillingColor);
+    expect(meter.find('.filling').prop('style').background).toBe(ranges[0].fillingColor);
   });
 
   it('computes labelStyle', () => {
@@ -94,7 +94,7 @@ describe('Meter', () => {
     const meter = shallow(
       <Meter value={60} ranges={ranges} />
     );
-    expect(meter.find('.filling').prop('style').backgroundColor).toBe(ranges[0].fillingColor);
+    expect(meter.find('.filling').prop('style').background).toBe(ranges[0].fillingColor);
   });
 
   it('defaults to the base color as background color if there\'s no matching range', () => {
@@ -104,7 +104,7 @@ describe('Meter', () => {
     const meter = shallow(
       <Meter value={20} ranges={ranges} baseFillingColor='#ccc' />
     );
-    expect(meter.find('.filling').prop('style').backgroundColor).toBe('#ccc');
+    expect(meter.find('.filling').prop('style').background).toBe('#ccc');
   });
 
   it('doesn\'t define a background color if there\'s no matching range and no default is given', () => {
@@ -114,7 +114,7 @@ describe('Meter', () => {
     const meter = shallow(
       <Meter value={20} ranges={ranges} />
     );
-    expect(meter.find('.filling').prop('style').backgroundColor).toBeUndefined();
+    expect(meter.find('.filling').prop('style').background).toBeUndefined();
   });
 
   it('defaults to base color as bar background color should if there\'s no matching range', () => {
@@ -124,7 +124,7 @@ describe('Meter', () => {
     const meter = shallow(
       <Meter value={20} ranges={ranges} baseBackgroundColor='#ccc' />
     );
-    expect(meter.find('.bar').prop('style').backgroundColor).toBe('#ccc');
+    expect(meter.find('.bar').prop('style').background).toBe('#ccc');
   });
 
   it('doesn\'t define a bar background color if there\'s no matching range and no default is given', () => {
@@ -134,7 +134,31 @@ describe('Meter', () => {
     const meter = shallow(
       <Meter value={20} ranges={ranges} />
     );
-    expect(meter.find('.bar').prop('style').backgroundColor).toBeUndefined();
+    expect(meter.find('.bar').prop('style').background).toBeUndefined();
+  });
+
+  it('computes colors respecting base colors', () => {
+    const ranges = [
+      { startValue: 0, endValue: 50, fillingColor: 'yellow' },
+      { startValue: 50, endValue: 80 }
+    ];
+    const baseColors = {
+      baseBackgroundColor: 'red',
+      baseFillingColor: 'green',
+      baseLabelColor: 'blue',
+    };
+    const meter1 = shallow(
+      <Meter value={30} ranges={ranges} {...baseColors} />
+    );
+    expect(meter1.find('.bar').prop('style').background).toBe('red');
+    expect(meter1.find('.filling').prop('style').background).toBe('yellow');
+    expect(meter1.find('.label').prop('style').color).toBe('blue');
+    const meter2 = shallow(
+      <Meter value={60} ranges={ranges} {...baseColors} />
+    );
+    expect(meter2.find('.bar').prop('style').background).toBe('red');
+    expect(meter2.find('.filling').prop('style').background).toBe('green');
+    expect(meter2.find('.label').prop('style').color).toBe('blue');
   });
 
 });

test/components/__snapshots__/Meter.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Meter renders correctly 1`] = `
 <div
-  className="react-flex-view meter fancy-class-name"
+  className="react-flex-view align-content-center meter fancy-class-name"
   id="12345"
   style={
     Object {
@@ -23,7 +23,7 @@ exports[`Meter renders correctly 1`] = `
         "MozBoxFlex": "1 1 auto",
         "WebkitBoxFlex": "1 1 auto",
         "WebkitFlex": "1 1 auto",
-        "backgroundColor": "grey",
+        "background": "grey",
         "flex": "1 1 auto",
         "msFlex": "1 1 auto",
       }
@@ -36,7 +36,7 @@ exports[`Meter renders correctly 1`] = `
           "MozBoxFlex": "0 0 25%",
           "WebkitBoxFlex": "0 0 25%",
           "WebkitFlex": "0 0 25%",
-          "backgroundColor": "green",
+          "background": "green",
           "flex": "0 0 25%",
           "msFlex": "0 0 25%",
         }