From b4042a2d1b03b61a436f9291e2402d8d3ddac77b Mon Sep 17 00:00:00 2001
From: Kamil Dzwonkowski <kamdzpl@gmail.com>
Date: Tue, 21 Feb 2017 01:04:27 +0100
Subject: [PATCH] breaking(Popup): rename `positioning` to `position` (#1342)

---
 .../Components/ComponentDoc/ComponentProps.js |  2 +-
 docs/app/Components/IconSearch/IconSearch.js  |  2 +-
 .../modules/Popup/Usage/PopupExampleClick.js  |  2 +-
 .../Popup/Usage/PopupExampleControlled.js     |  2 +-
 .../modules/Popup/Usage/PopupExampleNested.js |  4 ++--
 .../Popup/Variations/PopupExampleOffset.js    |  4 ++--
 .../Popup/Variations/PopupExamplePosition.js  | 16 +++++++--------
 src/modules/Popup/Popup.js                    | 20 +++++++++----------
 src/modules/Popup/index.d.ts                  |  4 ++--
 test/specs/modules/Popup/Popup-test.js        |  8 ++++----
 10 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/docs/app/Components/ComponentDoc/ComponentProps.js b/docs/app/Components/ComponentDoc/ComponentProps.js
index 1c30341393..63772078d5 100644
--- a/docs/app/Components/ComponentDoc/ComponentProps.js
+++ b/docs/app/Components/ComponentDoc/ComponentProps.js
@@ -43,7 +43,7 @@ export default class ComponentProps extends Component {
 
   renderRequired = item => item.required && (
     <Popup
-      positioning='right center'
+      position='right center'
       style={{ padding: '0.5em' }}
       trigger={<Icon size='small' color='red' name='asterisk' />}
       content='Required'
diff --git a/docs/app/Components/IconSearch/IconSearch.js b/docs/app/Components/IconSearch/IconSearch.js
index b1469bd3a5..b779eb45cc 100644
--- a/docs/app/Components/IconSearch/IconSearch.js
+++ b/docs/app/Components/IconSearch/IconSearch.js
@@ -81,7 +81,7 @@ export default class IconSearch extends Component {
       closeOnDocumentClick={false}
       style={{ width: '8em', textAlign: 'center' }}
       size='mini'
-      positioning='top center'
+      position='top center'
       content={this.state.copied ? 'Copied!' : 'Click to copy'}
       trigger={(
         <Grid.Column className='docs-icon-set-column' onClick={this.copy(name)}>
diff --git a/docs/app/Examples/modules/Popup/Usage/PopupExampleClick.js b/docs/app/Examples/modules/Popup/Usage/PopupExampleClick.js
index 985e14bffa..d7cd61cf67 100644
--- a/docs/app/Examples/modules/Popup/Usage/PopupExampleClick.js
+++ b/docs/app/Examples/modules/Popup/Usage/PopupExampleClick.js
@@ -6,7 +6,7 @@ const PopupExampleClick = () => (
     trigger={<Button color='red' icon='flask' content='Activate doomsday device' />}
     content={<Button color='green' content='Confirm the launch' />}
     on='click'
-    positioning='top right'
+    position='top right'
   />
 )
 
diff --git a/docs/app/Examples/modules/Popup/Usage/PopupExampleControlled.js b/docs/app/Examples/modules/Popup/Usage/PopupExampleControlled.js
index 34cea96a2e..d5837f7071 100644
--- a/docs/app/Examples/modules/Popup/Usage/PopupExampleControlled.js
+++ b/docs/app/Examples/modules/Popup/Usage/PopupExampleControlled.js
@@ -30,7 +30,7 @@ class PopupExampleControlled extends React.Component {
             open={this.state.isOpen}
             onClose={this.handleClose}
             onOpen={this.handleOpen}
-            positioning='top right'
+            position='top right'
           />
         </Grid.Column>
         <Grid.Column width={8}>
diff --git a/docs/app/Examples/modules/Popup/Usage/PopupExampleNested.js b/docs/app/Examples/modules/Popup/Usage/PopupExampleNested.js
index 5a0d39328a..50ec7b5a94 100644
--- a/docs/app/Examples/modules/Popup/Usage/PopupExampleNested.js
+++ b/docs/app/Examples/modules/Popup/Usage/PopupExampleNested.js
@@ -8,7 +8,7 @@ const PopupExampleNested = () => (
         <Popup
           trigger={<Button color='blue' content='Blue Pill' fluid />}
           content='The story ends. You wake up in your bed and believe whatever you want to believe.'
-          positioning='top center'
+          position='top center'
           size='tiny'
           inverted
         />
@@ -17,7 +17,7 @@ const PopupExampleNested = () => (
         <Popup
           trigger={<Button color='red' content='Red Pill' fluid />}
           content='Stay in Wonderland, and I show you how deep the rabbit hole goes.'
-          positioning='top center'
+          position='top center'
           size='tiny'
           inverted
         />
diff --git a/docs/app/Examples/modules/Popup/Variations/PopupExampleOffset.js b/docs/app/Examples/modules/Popup/Variations/PopupExampleOffset.js
index 960a1672f7..952de9927f 100644
--- a/docs/app/Examples/modules/Popup/Variations/PopupExampleOffset.js
+++ b/docs/app/Examples/modules/Popup/Variations/PopupExampleOffset.js
@@ -7,13 +7,13 @@ const PopupExampleOffset = () => (
       trigger={<Icon size='large' name='heart' circular />}
       content='Way off to the left'
       offset={50}
-      positioning='left center'
+      position='left center'
     />
     <Popup
       trigger={<Icon size='large' name='heart' circular />}
       content='As expected this popup is way off to the right'
       offset={50}
-      positioning='right center'
+      position='right center'
     />
   </div>
 )
diff --git a/docs/app/Examples/modules/Popup/Variations/PopupExamplePosition.js b/docs/app/Examples/modules/Popup/Variations/PopupExamplePosition.js
index 3f65081fee..db0173af48 100644
--- a/docs/app/Examples/modules/Popup/Variations/PopupExamplePosition.js
+++ b/docs/app/Examples/modules/Popup/Variations/PopupExamplePosition.js
@@ -8,21 +8,21 @@ const PopupExamplePosition = () => (
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the top left'
-          positioning='top left'
+          position='top left'
         />
       </Grid.Column>
       <Grid.Column textAlign='center'>
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the top center'
-          positioning='top center'
+          position='top center'
         />
       </Grid.Column>
       <Grid.Column textAlign='right'>
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the top right'
-          positioning='top right'
+          position='top right'
         />
       </Grid.Column>
     </Grid.Row>
@@ -31,14 +31,14 @@ const PopupExamplePosition = () => (
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the left center'
-          positioning='left center'
+          position='left center'
         />
       </Grid.Column>
       <Grid.Column floated='right' textAlign='right'>
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the right center'
-          positioning='right center'
+          position='right center'
         />
       </Grid.Column>
     </Grid.Row>
@@ -47,21 +47,21 @@ const PopupExamplePosition = () => (
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the bottom left'
-          positioning='bottom left'
+          position='bottom left'
         />
       </Grid.Column>
       <Grid.Column textAlign='center'>
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the bottom center'
-          positioning='bottom center'
+          position='bottom center'
         />
       </Grid.Column>
       <Grid.Column textAlign='right'>
         <Popup
           trigger={<Icon name='heart' color='red' size='large' circular />}
           content='I am positioned to the bottom right'
-          positioning='bottom right'
+          position='bottom right'
         />
       </Grid.Column>
     </Grid.Row>
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index 9f63ac4163..fcb0e856ea 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -104,8 +104,8 @@ export default class Popup extends Component {
      */
     onUnmount: PropTypes.func,
 
-    /** Positioning for the popover. */
-    positioning: PropTypes.oneOf(POSITIONS),
+    /** Position for the popover. */
+    position: PropTypes.oneOf(POSITIONS),
 
     /** Popup size. */
     size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium', 'big', 'massive')),
@@ -124,7 +124,7 @@ export default class Popup extends Component {
   }
 
   static defaultProps = {
-    positioning: 'top left',
+    position: 'top left',
     on: 'hover',
   }
 
@@ -223,20 +223,20 @@ export default class Popup extends Component {
 
   setPopupStyle() {
     if (!this.coords || !this.popupCoords) return
-    let positioning = this.props.positioning
-    let style = this.computePopupStyle(positioning)
+    let position = this.props.position
+    let style = this.computePopupStyle(position)
 
     // Lets detect if the popup is out of the viewport and adjust
     // the position accordingly
-    const positions = _.without(POSITIONS, positioning)
+    const positions = _.without(POSITIONS, position)
     for (let i = 0; !this.isStyleInViewport(style) && i < positions.length; i++) {
       style = this.computePopupStyle(positions[i])
-      positioning = positions[i]
+      position = positions[i]
     }
 
     // Append 'px' to every numerical values in the style
     style = _.mapValues(style, value => _.isNumber(value) ? value + 'px' : value)
-    this.setState({ style, positioning })
+    this.setState({ style, position })
   }
 
   getPortalProps() {
@@ -323,11 +323,11 @@ export default class Popup extends Component {
       wide,
     } = this.props
 
-    const { positioning, closed } = this.state
+    const { position, closed } = this.state
     const style = _.assign({}, this.state.style, this.props.style)
     const classes = cx(
       'ui',
-      positioning,
+      position,
       size,
       useKeyOrValueAndKey(wide, 'wide'),
       useKeyOnly(basic, 'basic'),
diff --git a/src/modules/Popup/index.d.ts b/src/modules/Popup/index.d.ts
index 6d5089715d..bbcc7c81d5 100644
--- a/src/modules/Popup/index.d.ts
+++ b/src/modules/Popup/index.d.ts
@@ -37,8 +37,8 @@ interface PopupProps extends PortalProps {
   /** Event triggering the popup. */
   on?: 'hover' | 'click' | 'focus';
 
-  /** Positioning for the popover. */
-  positioning?: 'top left' | 'top right' |
+  /** Position for the popover. */
+  position?: 'top left' | 'top right' |
     'bottom right' | 'bottom left' |
     'right center' | 'left center' |
     'top center' | 'bottom center';
diff --git a/test/specs/modules/Popup/Popup-test.js b/test/specs/modules/Popup/Popup-test.js
index ebd84fb0f6..08eb220cc5 100644
--- a/test/specs/modules/Popup/Popup-test.js
+++ b/test/specs/modules/Popup/Popup-test.js
@@ -82,7 +82,7 @@ describe('Popup', () => {
       wrapperMount(
         <Popup
           offset={50}
-          positioning='bottom right'
+          position='bottom right'
           content='foo'
           trigger={<button>foo</button>}
         />
@@ -95,7 +95,7 @@ describe('Popup', () => {
       wrapperMount(
         <Popup
           offset={50}
-          positioning='bottom left'
+          position='bottom left'
           content='foo'
           trigger={<button>foo</button>}
         />
@@ -106,13 +106,13 @@ describe('Popup', () => {
     })
   })
 
-  describe('positioning', () => {
+  describe('position', () => {
     POSITIONS.forEach(position => {
       it('is always within the viewport', () => {
         wrapperMount(
           <Popup
             content='_'
-            positioning={position}
+            position={position}
             trigger={<button>foo</button>}
             on='click'
           />