fix(Placeholder): replace shape prop in Placeholder.Image

Signed-off-by: Oleksandr Fediashov <[email protected]>
Semantic-Org · Oct 2, 2018 · 39fa4f6 · 39fa4f6
1 parent 7323e92
commit 39fa4f6
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 13 deletions.
diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageShapeRectangular.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageShapeRectangular.js
@@ -6,21 +6,21 @@ const PlaceholderExampleImageShapeRectangular = () => (
     <Card>
       <Card.Content>
         <Placeholder>
-          <Placeholder.Image shape='rectangular' />
+          <Placeholder.Image rectangular />
         </Placeholder>
       </Card.Content>
     </Card>
     <Card>
       <Card.Content>
         <Placeholder>
-          <Placeholder.Image shape='rectangular' />
+          <Placeholder.Image rectangular />
         </Placeholder>
       </Card.Content>
     </Card>
     <Card>
       <Card.Content>
         <Placeholder>
-          <Placeholder.Image shape='rectangular' />
+          <Placeholder.Image rectangular />
         </Placeholder>
       </Card.Content>
     </Card>

diff --git a/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageShapeSquare.js b/docs/src/examples/elements/Placeholder/Content/PlaceholderExampleImageShapeSquare.js
@@ -6,21 +6,21 @@ const PlaceholderExampleImageShapeSquare = () => (
     <Card>
       <Card.Content>
         <Placeholder>
-          <Placeholder.Image shape='square' />
+          <Placeholder.Image square />
         </Placeholder>
       </Card.Content>
     </Card>
     <Card>
       <Card.Content>
         <Placeholder>
-          <Placeholder.Image shape='square' />
+          <Placeholder.Image square />
         </Placeholder>
       </Card.Content>
     </Card>
     <Card>
       <Card.Content>
         <Placeholder>
-          <Placeholder.Image shape='square' />
+          <Placeholder.Image square />
         </Placeholder>
       </Card.Content>
     </Card>

diff --git a/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleCard.js b/docs/src/examples/elements/Placeholder/Types/PlaceholderExampleCard.js
@@ -49,7 +49,7 @@ export default class PlaceholderExampleCard extends Component {
             <Card key={card.header}>
               {loading ? (
                 <Placeholder>
-                  <Placeholder.Image shape='square' />
+                  <Placeholder.Image square />
                 </Placeholder>
               ) : (
                 <Image src={card.avatar} />

diff --git a/src/elements/Placeholder/PlaceholderImage.d.ts b/src/elements/Placeholder/PlaceholderImage.d.ts
@@ -12,7 +12,10 @@ export interface StrictPlaceholderImageProps {
   className?: string
 
   /** An image can modify size correctly with responsive styles. */
-  shape?: 'square' | 'rectangular'
+  square?: boolean
+
+  /** An image can modify size correctly with responsive styles. */
+  rectangular?: boolean
 }
 
 interface PlaceholderImageComponent extends React.StatelessComponent<PlaceholderImageProps> {}

diff --git a/src/elements/Placeholder/PlaceholderImage.js b/src/elements/Placeholder/PlaceholderImage.js
@@ -2,14 +2,19 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import { customPropTypes, getElementType, getUnhandledProps, useKeyOnly } from '../../lib'
 
 /**
  * A placeholder can contain an image.
  */
 function PlaceholderImage(props) {
-  const { className, shape } = props
-  const classes = cx(shape, 'image', className)
+  const { className, square, rectangular } = props
+  const classes = cx(
+    useKeyOnly(square, 'square'),
+    useKeyOnly(rectangular, 'rectangular'),
+    'image',
+    className,
+  )
   const rest = getUnhandledProps(PlaceholderImage, props)
   const ElementType = getElementType(PlaceholderImage, props)
 
@@ -24,7 +29,10 @@ PlaceholderImage.propTypes = {
   className: PropTypes.string,
 
   /** An image can modify size correctly with responsive styles. */
-  shape: PropTypes.oneOf(['square', 'rectangular']),
+  square: customPropTypes.every([customPropTypes.disallow(['rectangular']), PropTypes.bool]),
+
+  /** An image can modify size correctly with responsive styles. */
+  rectangular: customPropTypes.every([customPropTypes.disallow(['square']), PropTypes.bool]),
 }
 
 export default PlaceholderImage
diff --git a/test/specs/elements/Placeholder/PlaceholderImage-test.js b/test/specs/elements/Placeholder/PlaceholderImage-test.js
@@ -3,5 +3,7 @@ import * as common from 'test/specs/commonTests'
 
 describe('PlaceholderImage', () => {
   common.isConformant(PlaceholderImage)
-  common.propValueOnlyToClassName(PlaceholderImage, 'shape', ['square', 'rectangular'])
+
+  common.propKeyOnlyToClassName(PlaceholderImage, 'square')
+  common.propKeyOnlyToClassName(PlaceholderImage, 'rectangular')
 })