Merge pull request #35 from jasonphillips/fix-dimmed-objectname

Fix dimmed ObjectName

src/object/ObjectName.js

@@ -13,8 +13,14 @@ import createStyles from '../styles/createStyles';
  */
 const ObjectName = ({ name, dimmed, styles }, { theme }) => {
   const themeStyles = createStyles('ObjectName', theme);
+  const appliedStyles = {
+    ...themeStyles.base,
+    ...(dimmed ? themeStyles['dimmed'] : {}),
+    ...styles,
+  };
+
   return (
-    <span style={{ ...themeStyles.base, ...(dimmed && styles.dimmed), ...styles }}>{name}</span>
+    <span style={appliedStyles}>{name}</span>
   );
 };
 

src/object/ObjectName.spec.js

@@ -4,6 +4,10 @@ import TestUtils from 'react-addons-test-utils';
 import expect from 'expect';
 import ObjectName from './ObjectName';
 
+import chromeLight from '../styles/themes/chromeLight';
+import makeTheme from '../styles/base';
+const defaultTheme = makeTheme(chromeLight);
+
 const renderer = TestUtils.createRenderer();
 
 const defaultProps = {};
@@ -18,6 +22,27 @@ describe('ObjectName', () => {
     expect(tree.type).toEqual('span');
   });
 
+  it('should apply default theme', () => {
+    renderer.render(<ObjectName name="testvalue" />);
+    const tree = renderer.getRenderOutput();
+
+    expect(tree.props.style).toInclude(defaultTheme.ObjectName.base);
+  });
+
+  it('should apply dimming if `dimmed` prop is true', () => {
+    renderer.render(<ObjectName name="testvalue" dimmed={true}/>);
+    const tree = renderer.getRenderOutput();
+
+    expect(tree.props.style).toInclude(defaultTheme.ObjectName.dimmed);
+  });
+
+  it('should not apply dimming if `dimmed` prop is false', () => {
+    renderer.render(<ObjectName name="testvalue" dimmed={false}/>);
+    const tree = renderer.getRenderOutput();
+
+    expect(tree.props.style).toExclude(defaultTheme.ObjectName.dimmed);
+  });
+
   it('Accepts and applies additional `style` prop', () => {
     // Test that a custom `style` props is passed and applied to <span/>
     const style = { color: 'blue' };