feat(Image) Add inline prop (#394)

Semantic-Org · Aug 14, 2016 · e1bbafd · e1bbafd
1 parent 8716116
commit e1bbafd
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/docs/app/Examples/views/Statistic/Content/StatisticValueExample.js b/docs/app/Examples/views/Statistic/Content/StatisticValueExample.js
@@ -3,8 +3,6 @@ import { Icon, Image, Statistic } from 'stardust'
 
 const { Group, Label, Value } = Statistic
 
-// TODO: Update <Image> usage after <Image> will be updated to v1 API
-
 const StatisticValueExample = () => (
   <Group>
     <Statistic>
@@ -30,7 +28,7 @@ const StatisticValueExample = () => (
 
     <Statistic>
       <Value>
-        <Image src='http://semantic-ui.com/images/avatar/small/joe.jpg' className='circular inline' />
+        <Image inline shape='circular' src='http://semantic-ui.com/images/avatar/small/joe.jpg' />
         42
       </Value>
       <Label>Team Members</Label>

diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js
@@ -19,7 +19,7 @@ import ImageGroup from './ImageGroup'
 function Image(props) {
   const {
     verticalAlign, alt, avatar, bordered, centered, className, disabled, floated, fluid,
-    hidden, height, href, shape, size, spaced, src, width, wrapped,
+    hidden, height, href, inline, shape, size, spaced, src, width, wrapped,
   } = props
 
   const classes = cx(
@@ -33,6 +33,7 @@ function Image(props) {
     useValueAndKey(floated, 'floated'),
     useKeyOnly(fluid, 'fluid'),
     useKeyOnly(hidden, 'hidden'),
+    useKeyOnly(inline, 'inline'),
     useKeyOrValueAndKey(spaced, 'spaced'),
     shape,
     className,
@@ -119,6 +120,9 @@ Image.propTypes = {
   /** Renders the Image as an <a> tag with this href */
   href: PropTypes.string,
 
+  /** An image may appear inline */
+  inline: PropTypes.bool,
+
   /** An image may appear rounded or circular */
   shape: PropTypes.oneOf(Image._meta.props.shape),
 

diff --git a/test/specs/elements/Image/Image-test.js b/test/specs/elements/Image/Image-test.js
@@ -17,6 +17,7 @@ describe('Image Component', () => {
   common.propKeyOnlyToClassName(Image, 'disabled')
   common.propKeyOnlyToClassName(Image, 'fluid')
   common.propKeyOnlyToClassName(Image, 'hidden')
+  common.propKeyOnlyToClassName(Image, 'inline')
 
   common.propKeyAndValueToClassName(Image, 'floated')
   common.propKeyOrValueToClassName(Image, 'spaced')