breaking(Popup): switch to Popper.js (Semantic-Org#3532)

* breaking(Popup): switch to Popper.js * chore(package): update react-hot-loader * update UTs * fix offset, update docs * rework docs
mbakiev · Jun 17, 2019 · ee2bb8e · ee2bb8e
1 parent 7defef1
commit ee2bb8e
Show file tree

Hide file tree

Showing 29 changed files with 598 additions and 838 deletions.
diff --git a/docs/src/App.js b/docs/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { hot } from 'react-hot-loader'
+import { hot } from 'react-hot-loader/root'
 import { Router, Switch } from 'react-static'
 import Routes from 'react-static-routes'
 
@@ -11,4 +11,4 @@ const App = () => (
   </Router>
 )
 
-export default hot(module)(App)
+export default hot(App)
diff --git a/docs/src/components/Document.js b/docs/src/components/Document.js
@@ -16,9 +16,7 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
         href={`https://cdn.jsdelivr.net/npm/semantic-ui@${versions.sui}/dist/semantic.min.css`}
       />
 
-      <script
-        src='https://cdn.jsdelivr.net/npm/@babel/[email protected]/dist/polyfill.min.js'
-      />
+      <script src='https://cdn.jsdelivr.net/npm/@babel/[email protected]/dist/polyfill.min.js' />
       <script
         src={`https://cdnjs.cloudflare.com/ajax/libs/anchor-js/${versions.anchor}/anchor.min.js`}
       />
@@ -57,9 +55,15 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) =
         }.js`}
       />
       <script
-        src={`https://cdn.jsdelivr.net/npm/react-dom@${versions.react}/umd/react-dom${
-          dev ? '.development' : '.production.min'
-        }.js`}
+        src={
+          dev
+            ? ` https://cdn.jsdelivr.net/npm/@hot-loader/react-dom@${
+                versions.react
+              }/umd/react-dom.development.js`
+            : `https://cdn.jsdelivr.net/npm/react-dom@${
+                versions.react
+              }/umd/react-dom.production.min.js`
+        }
       />
       <script
         src={`https://cdn.jsdelivr.net/npm/react-dom@${

diff --git a/docs/src/examples/modules/Popup/Types/PopupExample.js b/docs/src/examples/modules/Popup/Types/PopupExample.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { Button, Popup } from 'semantic-ui-react'
 
 const PopupExample = () => (
-  <Popup trigger={<Button icon='add' />} content='Add users to your feed' />
+  <Popup content='Add users to your feed' trigger={<Button icon='add' />} />
 )
 
 export default PopupExample
diff --git a/...modules/Popup/Types/PopupExampleTitled.js → ...modules/Popup/Types/PopupExampleHeader.js b/...modules/Popup/Types/PopupExampleTitled.js → ...modules/Popup/Types/PopupExampleHeader.js
@@ -19,17 +19,17 @@ const users = [
   },
 ]
 
-const PopupExampleTitled = () => (
-  <div>
-    {users.map(user => (
+const PopupExampleHeader = () => (
+  <React.Fragment>
+    {users.map((user) => (
       <Popup
+        content={user.bio}
         key={user.name}
-        trigger={<Image src={user.avatar} avatar />}
         header={user.name}
-        content={user.bio}
+        trigger={<Image src={user.avatar} avatar />}
       />
     ))}
-  </div>
+  </React.Fragment>
 )
 
-export default PopupExampleTitled
+export default PopupExampleHeader
diff --git a/docs/src/examples/modules/Popup/Types/PopupExampleHtml.js b/docs/src/examples/modules/Popup/Types/PopupExampleHtml.js
diff --git a/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js b/docs/src/examples/modules/Popup/Types/PopupExampleTrigger.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Popup, Card, Image, Rating } from 'semantic-ui-react'
+
+const PopupExampleTrigger = () => (
+  <Popup
+    trigger={
+      <Card>
+        <Image src='/images/movies/totoro-horizontal.jpg' />
+        <Card.Content>
+          <Card.Header>My Neighbor Totoro</Card.Header>
+          <Card.Description>
+            Two sisters move to the country with their father in order to be
+            closer to their hospitalized mother, and discover the surrounding
+            trees are inhabited by magical spirits.
+          </Card.Description>
+        </Card.Content>
+      </Card>
+    }
+  >
+    <Popup.Header>User Rating</Popup.Header>
+    <Popup.Content>
+      <Rating icon='star' defaultRating={3} maxRating={4} />
+    </Popup.Content>
+  </Popup>
+)
+
+export default PopupExampleTrigger
diff --git a/docs/src/examples/modules/Popup/Types/index.js b/docs/src/examples/modules/Popup/Types/index.js
@@ -10,14 +10,14 @@ const PopupTypesExamples = () => (
       examplePath='modules/Popup/Types/PopupExample'
     />
     <ComponentExample
-      title='Titled'
-      description='An element can specify popup content with a title.'
-      examplePath='modules/Popup/Types/PopupExampleTitled'
+      title='Header'
+      description='An element can specify popup content with a header.'
+      examplePath='modules/Popup/Types/PopupExampleHeader'
     />
     <ComponentExample
-      title='HTML'
-      description='An element can specify HTML for a popup.'
-      examplePath='modules/Popup/Types/PopupExampleHtml'
+      title='Trigger'
+      description='A trigger can be complex element.'
+      examplePath='modules/Popup/Types/PopupExampleTrigger'
     />
   </ExampleSection>
 )

diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js b/docs/src/examples/modules/Popup/Usage/PopupExampleActions.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { Button, Grid, Input, Popup } from 'semantic-ui-react'
+
+const PopupExampleActions = () => (
+  <Grid columns={1}>
+    <Grid.Column>
+      <Popup
+        trigger={<Button icon='add' content='Add a friend' />}
+        content='Sends an email invite to a friend.'
+        on='hover'
+      />
+      <Popup
+        trigger={
+          <Button color='red' icon='flask' content='Activate doomsday device' />
+        }
+        content={<Button color='green' content='Confirm the launch' />}
+        on='click'
+        position='top right'
+      />
+      <Popup
+        trigger={<Input icon='search' placeholder='Search...' />}
+        header='Movie Search'
+        content='You may search by genre, header, year and actors'
+        on='focus'
+      />
+    </Grid.Column>
+    <Grid.Column>
+      <Popup
+        trigger={<Button icon>Click me or Hover me</Button>}
+        header='Movie Search'
+        content='Multiple events can trigger a popup'
+        on={['hover', 'click']}
+      />
+    </Grid.Column>
+  </Grid>
+)
+
+export default PopupExampleActions
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleClick.js b/docs/src/examples/modules/Popup/Usage/PopupExampleClick.js
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js b/docs/src/examples/modules/Popup/Usage/PopupExampleContext.js
@@ -6,7 +6,7 @@ class PopupExampleContextControlled extends React.Component {
 
   render() {
     return (
-      <div>
+      <React.Fragment>
         <Popup
           trigger={<Button content='Trigger Popup' />}
           context={this.contextRef}
@@ -15,7 +15,7 @@ class PopupExampleContextControlled extends React.Component {
         />
         ---------->
         <strong ref={this.contextRef}>here</strong>
-      </div>
+      </React.Fragment>
     )
   }
 }

diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js b/docs/src/examples/modules/Popup/Usage/PopupExampleControlled.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Grid, Header, Popup } from 'semantic-ui-react'
+import { Button, Grid, Header, Popup, Segment } from 'semantic-ui-react'
 
 const timeoutLength = 2500
 
@@ -25,7 +25,8 @@ class PopupExampleControlled extends React.Component {
         <Grid.Column width={8}>
           <Popup
             trigger={<Button content='Open controlled popup' />}
-            content={`This message will self-destruct in ${timeoutLength / 1000} seconds!`}
+            content={`This message will self-destruct in ${timeoutLength /
+              1000} seconds!`}
             on='click'
             open={this.state.isOpen}
             onClose={this.handleClose}
@@ -35,7 +36,9 @@ class PopupExampleControlled extends React.Component {
         </Grid.Column>
         <Grid.Column width={8}>
           <Header>State</Header>
-          <pre>{JSON.stringify(this.state, null, 2)}</pre>
+          <Segment secondary>
+            <pre>{JSON.stringify(this.state, null, 2)}</pre>
+          </Segment>
         </Grid.Column>
       </Grid>
     )

diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleDefaultOpen.js b/docs/src/examples/modules/Popup/Usage/PopupExampleDefaultOpen.js
@@ -2,7 +2,12 @@ import React from 'react'
 import { Button, Popup } from 'semantic-ui-react'
 
 const PopupExampleDefaultOpen = () => (
-  <Popup open trigger={<Button content='Already Open' />} content='Hello' position='top center' />
+  <Popup
+    content='Hello'
+    open
+    position='top center'
+    trigger={<Button content='Already Open' />}
+  />
 )
 
 export default PopupExampleDefaultOpen
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleFocus.js b/docs/src/examples/modules/Popup/Usage/PopupExampleFocus.js
diff --git a/...up/Variations/PopupExampleHideOnScroll.js → ...s/Popup/Usage/PopupExampleHideOnScroll.js b/...up/Variations/PopupExampleHideOnScroll.js → ...s/Popup/Usage/PopupExampleHideOnScroll.js
@@ -2,19 +2,19 @@ import React from 'react'
 import { Button, Popup } from 'semantic-ui-react'
 
 const PopupExampleHideOnScroll = () => (
-  <div>
+  <React.Fragment>
     <Popup
-      trigger={<Button icon>Click me</Button>}
+      trigger={<Button>Click me</Button>}
       content='Hide the popup on any scroll event'
       on='click'
       hideOnScroll
     />
     <Popup
-      trigger={<Button icon>Hover me</Button>}
+      trigger={<Button>Hover me</Button>}
       content='Hide the popup on any scroll event'
       hideOnScroll
     />
-  </div>
+  </React.Fragment>
 )
 
 export default PopupExampleHideOnScroll
diff --git a/docs/src/examples/modules/Popup/Usage/PopupExampleHover.js b/docs/src/examples/modules/Popup/Usage/PopupExampleHover.js
diff --git a/...es/Popup/Variations/PopupExampleOffset.js → ...modules/Popup/Usage/PopupExampleOffset.js b/...es/Popup/Variations/PopupExampleOffset.js → ...modules/Popup/Usage/PopupExampleOffset.js
@@ -2,32 +2,32 @@ import React from 'react'
 import { Icon, Popup } from 'semantic-ui-react'
 
 const PopupExampleOffset = () => (
-  <div>
+  <React.Fragment>
     <Popup
       trigger={<Icon size='large' name='heart' circular />}
       content='Way off to the left'
-      horizontalOffset={50}
+      offset='0, 50px'
       position='left center'
     />
     <Popup
       trigger={<Icon size='large' name='heart' circular />}
       content='As expected this popup is way off to the right'
-      horizontalOffset={50}
+      offset='0, 50px'
       position='right center'
     />
     <Popup
       trigger={<Icon size='large' name='heart' circular />}
       content='Way off to the top'
-      verticalOffset={50}
+      offset='0, 50px'
       position='top center'
     />
     <Popup
       trigger={<Icon size='large' name='heart' circular />}
       content='As expected this popup is way off to the bottom'
-      verticalOffset={50}
+      offset='0, 50px'
       position='bottom center'
     />
-  </div>
+  </React.Fragment>
 )
 
 export default PopupExampleOffset