Skip to content

Commit bb6485a

Browse files
levithomasonharel
authored andcommitted
fix(Portal): fix several event related behaviors (Semantic-Org#1273)
fix(Portal): fix several event related behaviors
1 parent 30d24e1 commit bb6485a

File tree

18 files changed

+458
-454
lines changed

18 files changed

+458
-454
lines changed

docs/app/Examples/modules/Dimmer/States/DimmerExampleActive.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from 'react'
2-
import { Dimmer, Segment } from 'semantic-ui-react'
2+
import { Dimmer, Image, Segment } from 'semantic-ui-react'
33

44
const DimmerExampleActive = () => (
55
<Segment>
66
<Dimmer active />
77

88
<p>
9-
<img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
9+
<Image src='/assets/images/wireframe/short-paragraph.png' />
1010
</p>
1111
<p>
12-
<img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
12+
<Image src='/assets/images/wireframe/short-paragraph.png' />
1313
</p>
1414
</Segment>
1515
)

docs/app/Examples/modules/Dimmer/Types/DimmerExampleContent.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@ export default class DimmerExampleDimmer extends Component {
2323
<Header as='h3'>Overlayable Section</Header>
2424

2525
<Image.Group size='small' className='ui small images'>
26-
<Image src='http://semantic-ui.com/images/wireframe/image.png' />
27-
<Image src='http://semantic-ui.com/images/wireframe/image.png' />
28-
<Image src='http://semantic-ui.com/images/wireframe/image.png' />
26+
<Image src='/assets/images/wireframe/image.png' />
27+
<Image src='/assets/images/wireframe/image.png' />
28+
<Image src='/assets/images/wireframe/image.png' />
2929
</Image.Group>
3030

31-
<Image size='medium' src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
31+
<Image size='medium' src='/assets/images/wireframe/media-paragraph.png' />
3232
</Dimmer.Dimmable>
3333

3434
<Button.Group>

docs/app/Examples/modules/Dimmer/Types/DimmerExampleDimmer.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ export default class DimmerExampleDimmer extends Component {
1818
<Header as='h3'>Overlayable Section</Header>
1919

2020
<Image.Group size='small' className='ui small images'>
21-
<Image src='http://semantic-ui.com/images/wireframe/image.png' />
22-
<Image src='http://semantic-ui.com/images/wireframe/image.png' />
23-
<Image src='http://semantic-ui.com/images/wireframe/image.png' />
21+
<Image src='/assets/images/wireframe/image.png' />
22+
<Image src='/assets/images/wireframe/image.png' />
23+
<Image src='/assets/images/wireframe/image.png' />
2424
</Image.Group>
2525

26-
<Image size='medium' src='http://semantic-ui.com/images/wireframe/media-paragraph.png' />
26+
<Image size='medium' src='/assets/images/wireframe/media-paragraph.png' />
2727
</Dimmer.Dimmable>
2828

2929
<Button.Group>

docs/app/Examples/modules/Dimmer/Usage/DimmerExampleEvents.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default class DimmerExampleEvents extends Component {
2626
onMouseEnter={this.handleShow}
2727
onMouseLeave={this.handleHide}
2828
size='medium'
29-
src='http://semantic-ui.com/images/wireframe/image.png'
29+
src='/assets/images/wireframe/image.png'
3030
/>
3131
)
3232
}

docs/app/Examples/modules/Dimmer/Usage/DimmerExampleLoader.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react'
2-
import { Button, Dimmer, Loader, Segment } from 'semantic-ui-react'
2+
import { Button, Dimmer, Image, Loader, Segment } from 'semantic-ui-react'
33

44
export default class DimmerExampleLoader extends Component {
55
state = {}
@@ -18,10 +18,10 @@ export default class DimmerExampleLoader extends Component {
1818
</Dimmer>
1919

2020
<p>
21-
<img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
21+
<Image src='/assets/images/wireframe/short-paragraph.png' />
2222
</p>
2323
<p>
24-
<img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
24+
<Image src='/assets/images/wireframe/short-paragraph.png' />
2525
</p>
2626
</Dimmer.Dimmable>
2727

docs/app/Examples/modules/Dimmer/Variations/DimmerExampleBlurring.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react'
2-
import { Button, Dimmer, Segment } from 'semantic-ui-react'
2+
import { Button, Dimmer, Image, Segment } from 'semantic-ui-react'
33

44
export default class DimmerExampleBlurring extends Component {
55
state = {}
@@ -16,10 +16,10 @@ export default class DimmerExampleBlurring extends Component {
1616
<Dimmer active={active} onClickOutside={this.handleHide} />
1717

1818
<p>
19-
<img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
19+
<Image src='/assets/images/wireframe/short-paragraph.png' />
2020
</p>
2121
<p>
22-
<img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
22+
<Image src='/assets/images/wireframe/short-paragraph.png' />
2323
</p>
2424
</Dimmer.Dimmable>
2525

docs/app/Examples/modules/Dimmer/Variations/DimmerExampleBlurringInverted.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react'
2-
import { Button, Dimmer, Segment } from 'semantic-ui-react'
2+
import { Button, Dimmer, Image, Segment } from 'semantic-ui-react'
33

44
export default class DimmerExampleBlurringInverted extends Component {
55
state = {}
@@ -16,10 +16,10 @@ export default class DimmerExampleBlurringInverted extends Component {
1616
<Dimmer active={active} inverted onClickOutside={this.handleHide} />
1717

1818
<p>
19-
<img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
19+
<Image src='/assets/images/wireframe/short-paragraph.png' />
2020
</p>
2121
<p>
22-
<img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
22+
<Image src='/assets/images/wireframe/short-paragraph.png' />
2323
</p>
2424
</Dimmer.Dimmable>
2525

docs/app/Examples/modules/Dimmer/Variations/DimmerExampleInverted.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react'
2-
import { Button, Dimmer, Segment } from 'semantic-ui-react'
2+
import { Button, Dimmer, Image, Segment } from 'semantic-ui-react'
33

44
export default class DimmerExampleInverted extends Component {
55
state = {}
@@ -16,10 +16,10 @@ export default class DimmerExampleInverted extends Component {
1616
<Dimmer active={active} inverted onClickOutside={this.handleHide} />
1717

1818
<p>
19-
<img src='http://semantic-ui.com/images/wireframe/paragraph.png' />
19+
<Image src='/assets/images/wireframe/paragraph.png' />
2020
</p>
2121
<p>
22-
<img src='http://semantic-ui.com/images/wireframe/paragraph.png' />
22+
<Image src='/assets/images/wireframe/paragraph.png' />
2323
</p>
2424
</Dimmer.Dimmable>
2525

docs/app/Examples/modules/Dimmer/Variations/DimmerExampleSimple.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from 'react'
2-
import { Dimmer, Segment } from 'semantic-ui-react'
2+
import { Dimmer, Image, Segment } from 'semantic-ui-react'
33

44
const DimmerExampleSimple = () => (
55
<Dimmer.Dimmable as={Segment} dimmed>
66
<Dimmer simple />
77

88
<p>
9-
<img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
9+
<Image src='/assets/images/wireframe/short-paragraph.png' />
1010
</p>
1111
<p>
12-
<img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
12+
<Image src='/assets/images/wireframe/short-paragraph.png' />
1313
</p>
1414
</Dimmer.Dimmable>
1515
)
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
import { Button, Grid, Popup } from 'semantic-ui-react'
3+
4+
const PopupExampleNested = () => (
5+
<Popup wide trigger={<Button content='Are you the one?' />} on='click'>
6+
<Grid divided columns='equal'>
7+
<Grid.Column>
8+
<Popup
9+
trigger={<Button color='blue' content='Blue Pill' fluid />}
10+
content='The story ends. You wake up in your bed and believe whatever you want to believe.'
11+
positioning='top center'
12+
size='tiny'
13+
inverted
14+
/>
15+
</Grid.Column>
16+
<Grid.Column>
17+
<Popup
18+
trigger={<Button color='red' content='Red Pill' fluid />}
19+
content='Stay in Wonderland, and I show you how deep the rabbit hole goes.'
20+
positioning='top center'
21+
size='tiny'
22+
inverted
23+
/>
24+
</Grid.Column>
25+
</Grid>
26+
</Popup>
27+
)
28+
29+
export default PopupExampleNested

docs/app/Examples/modules/Popup/Usage/index.js

+5
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ const PopupUsageExamples = () => (
1919
description='A popup can be triggered on focus.'
2020
examplePath='modules/Popup/Usage/PopupExampleFocus'
2121
/>
22+
<ComponentExample
23+
title='Nesting'
24+
description='A popup can be nested inside another.'
25+
examplePath='modules/Popup/Usage/PopupExampleNested'
26+
/>
2227
<ComponentExample
2328
title='Controlled'
2429
description='A popup can have its visibility controlled from outside.'

0 commit comments

Comments
 (0)