feat(Icon): Add verticalAlign prop support [#135989699]

pivotal-cf · Dec 15, 2016 · a0c75f8 · a0c75f8
1 parent 4e40a91
commit a0c75f8
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/library/spec/pivotal-ui-react/iconography/iconography_spec.js b/library/spec/pivotal-ui-react/iconography/iconography_spec.js
@@ -24,4 +24,21 @@ describe('iconography', function() {
     expect('.svgicon').toHaveClass('foo');
     expect('.svgicon').toHaveAttr('id', 'bar');
   });
+
+  describe('verticalAlign', () => {
+    it('if verticalAlign is not specified it applies the .svg-middle', () => {
+      ReactDOM.render(<Icon src='add'/>, root);
+      expect('.svgicon').toHaveClass('svg-middle');
+    });
+
+    it('if verticalAlign=baseline it applies the .svg-middle class', () => {
+      ReactDOM.render(<Icon src='add' verticalAlign='middle'/>, root);
+      expect('.svgicon').toHaveClass('svg-middle');
+    });
+
+    it('if verticalAlign=baseline it applies the .svg-baseline class', () => {
+      ReactDOM.render(<Icon src='add' verticalAlign='baseline'/>, root);
+      expect('.svgicon').toHaveClass('svg-baseline');
+    });
+  });
 });
diff --git a/library/src/pivotal-ui-react/iconography/iconography.js b/library/src/pivotal-ui-react/iconography/iconography.js
@@ -14,18 +14,20 @@ class SvgIcon extends Svg {
 class Icon extends React.Component {
   static propTypes = {
     src: types.string.isRequired,
-    style: types.object
+    style: types.object,
+    verticalAlign: types.oneOf(['middle', 'baseline'])
   };
 
   static defaultProps = {
     size: 'inherit',
-    style: {}
+    style: {},
+    verticalAlign: 'middle'
   };
 
   render() {
-    const {src, style, ...others} = this.props;
+    const {src, style, verticalAlign, ...others} = this.props;
 
-    const props = mergeProps(others, {className: 'svgicon'});
+    const props = mergeProps(others, {className: `svgicon svg-${verticalAlign}`});
     return (
       <span {...props}>
         <SvgIcon {...{src, style, className: `icon-${src}`, key: src}}/>

diff --git a/library/src/pivotal-ui/components/iconography/iconography.scss b/library/src/pivotal-ui/components/iconography/iconography.scss
@@ -2,9 +2,17 @@
   display: inline-flex;
   line-height: inherit;
   align-self: center;
+  position: relative;
+  height: 1em;
+  width: 1em;
 }
 
 .svgicon svg {
   height: 1em;
   width: 1em;
-}
+}
+
+.svgicon.svg-baseline svg {
+  bottom: -0.15em;
+  position: absolute;
+}
diff --git a/styleguide/docs/react/iconography.js b/styleguide/docs/react/iconography.js
@@ -42,6 +42,7 @@ Icons by default will be sized based on the local font size. You can override th
  -------------      | --------------| --------------------------------------------------------------------------
  `src`       | String  | Name of the svg to load
  `style` | Object | React Style Object
+ `verticalAlign` | Optional enum | Alignment of icon. Options: ['middle', 'baseline']. Defaults to 'middle' if nothing provided
 
 For a full list of available icons, go to [http://pivotalicons.cfapps.io](http://pivotalicons.cfapps.io).