diff --git a/react-bootstrap/react-bootstrap-tests.tsx b/react-bootstrap/react-bootstrap-tests.tsx index 9b2e56cc4e..c6976d8a05 100644 --- a/react-bootstrap/react-bootstrap-tests.tsx +++ b/react-bootstrap/react-bootstrap-tests.tsx @@ -8,18 +8,18 @@ import * as React from 'react'; import { Component, CSSProperties } from 'react'; import { - Button, ButtonToolbar, Modal, Well, ButtonGroup, - DropdownButton, MenuItem, Panel, ListGroup, - ListGroupItem, Accordion, Tooltip, - OverlayTrigger, Popover, ProgressBar, - Nav, NavItem, Navbar, NavDropdown, - Tabs, Tab, Pager, PageItem, - Pagination, Alert, Carousel, - Grid, Row, Col, Thumbnail, Image, - Label, Badge, Jumbotron, PageHeader, - Glyphicon, Table, Form, FormGroup, - ControlLabel, FormControl, HelpBlock, - Radio, Checkbox, Media, InputGroup + Button, ButtonToolbar, Modal, Well, ButtonGroup, + DropdownButton, MenuItem, Panel, ListGroup, + ListGroupItem, Accordion, Tooltip, + OverlayTrigger, Popover, ProgressBar, + Nav, NavItem, Navbar, NavDropdown, + Tabs, Tab, Pager, PageItem, + Pagination, Alert, Carousel, + Grid, Row, Col, Thumbnail, Image, + Label, Badge, Jumbotron, PageHeader, + Glyphicon, Table, Form, FormGroup, + ControlLabel, FormControl, HelpBlock, + Radio, Checkbox, Media, InputGroup } from 'react-bootstrap'; @@ -129,87 +129,87 @@ export class ReactBootstrapTest extends Component { // TODO: Start here
- - - - - - + + + + + + - - - - - + + + + + - - - - - + + + + + - - - - - + + + + +
- - - - - Dropdown link - Dropdown link - - - - - Dropdown link - Dropdown link - - - Dropdown link - Dropdown link - - + + + + + Dropdown link + Dropdown link + + + + + Dropdown link + Dropdown link + + + Dropdown link + Dropdown link + +
- - Action - Another action - Active Item - - Separated link - + + Action + Another action + Active Item + + Separated link +
-
-
    - Header - link - - Header - link - disabled - - link with title - - - link that alerts - -
-
+
+
    + Header + link + + Header + link + disabled + + link with title + + + link that alerts + +
+
@@ -219,569 +219,568 @@ export class ReactBootstrapTest extends Component {
-
- - Panel content - - - Panel content - -
+
+ + Panel content + + + Panel content + +
- - Panel content - + + Panel content +
-
- - Panel content - +
+ + Panel content + - - Panel content - + + Panel content + - - Panel content - + + Panel content + - - Panel content - + + Panel content + - - Panel content - + + Panel content + - - Panel content - -
+ + Panel content + +
- - Some default panel content here. - - Item 1 - Item 2 - … - - Some more panel content here. - + + Some default panel content here. + + Item 1 + Item 2 + … + + Some more panel content here. +
- - - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer - farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. - - - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer - farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. - - - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer - farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. - - + + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + + + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer + farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + +
-
- - - Modal title - +
+ + + Modal title + - - One fine body... - + + One fine body... + - - - - - - -
+ + + + + +
- ({})} style={style}> - - Modal heading - - -

Text in a modal

-

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

+ ({})} style={style}> + + Modal heading + + +

Text in a modal

+

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

-

Popover in a modal

-

there is a popover here

+

Popover in a modal

+

there is a popover here

-

Tooltips in a modal

-

there is a tooltip here

+

Tooltips in a modal

+

there is a tooltip here

-
+
-

Overflowing text to show scroll behavior

-

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

-

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

-

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

-

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

-

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

-

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

-

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

-

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

-

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

- - - - - +

Overflowing text to show scroll behavior

+

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

+

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

+

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

+

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+ + + + +
-
- - Tooltip right - +
+ + Tooltip right + - - Tooltip top - + + Tooltip top + - - Tooltip left - + + Tooltip left + - - Tooltip bottom - -
+ + Tooltip bottom + +
- - - - + + + + - - - + + + - - - + + + - - - - + + + +
-
- - And here's some amazing content. It's very engaging. right? - -
+
+ + And here's some amazing content. It's very engaging. right? + +
- - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + +
- - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - Holy guacamole! Check this info.}> - - - + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + + Holy guacamole! Check this info.}> + + +
- +
- +
-
- - - - -
+
+ + + + +
-
- - - - -
+
+ + + + +
- +
- - - - - + + + + +
- -
- -
- -
- -
-
-
+ +
+ -
- - - - React-Bootstrap - - - - - - - -
- -
- - - -
- -
- - Previous - {' '} - Next - -
- -
- - ← Previous Page - Next Page → - -
- -
- - ← Previous - Next → - -
- -
- - Tab 1 content - Tab 2 content - Tab 3 content - -
- -
- - - -
- - Previous - Next - + + + + React-Bootstrap + + + + + + +
- - ← Previous Page - Next Page → - + + +
- - ← Previous - Next → - + + Previous + {' '} + Next +
-
- -
- -
- - -
+ + ← Previous Page + Next Page → +
- - Holy guacamole! Best check yo self, you're not looking too good. - + + ← Previous + Next → +
- - - 900x500 - -

First slide label

-

Nulla vitae elit libero, a pharetra augue mollis interdum.

- - - - 900x500 - -

Second slide label

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- - - - 900x500 - -

Third slide label

-

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

- - - + + Tab 1 content + Tab 2 content + Tab 3 content +
- - - <{'Col xs={12} md={8}'} /> - <{'Col xs={6} md={4}'} /> - - - - <{'Col xs={6} md={4}'} /> - <{'Col xs={6} md={4}'} /> - <{'Col xs={6} md={4}'} /> - - - - <{'Col xs={6} xsOffset={6}'} /> - - - - <{'Col md={6} mdPush={6}'} /> - <{'Col md={6} mdPull={6}'} /> - - + + + + + + + + + Tab 1 content + + + Tab 2 content + + + + +
- - - - - - - - - - - - - + + Previous + Next +
- - Item 1 - Item 2 - ... - + + ← Previous Page + Next Page → +
- - Link 1 - Link 2 - - Trigger an alert - - + + ← Previous + Next → +
- - Link 1 - Link 2 - Link 3 - +
+ +
+ +
+ + +
- - Success - Info - Warning - Danger - + + Holy guacamole! Best check yo self, you're not looking too good. +
- - Some body text - Linked item - Danger styling - + + + 900x500 + +

First slide label

+

Nulla vitae elit libero, a pharetra augue mollis interdum.

+ + + + 900x500 + +

Second slide label

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+ + + + 900x500 + +

Third slide label

+

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

+ + +
-
-

Label

-

Label

-

Label

-

Label

-
Label
-

Label

-
+ + + <{'Col xs={12} md={8}'} /> + <{'Col xs={6} md={4}'} /> + + + + <{'Col xs={6} md={4}'} /> + <{'Col xs={6} md={4}'} /> + <{'Col xs={6} md={4}'} /> + + + + <{'Col xs={6} xsOffset={6}'} /> + + + + <{'Col md={6} mdPush={6}'} /> + <{'Col md={6} mdPull={6}'} /> + +
-
-   -   -   -   -   - -
+ + + + + + + + + + + + +
-

Badges 42

+ + Item 1 + Item 2 + ... +
- -

Hello, world!

-

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

-

- + + Link 1 + Link 2 + + Trigger an alert + + +
+ +
+ + Link 1 + Link 2 + Link 3 + +
+ +
+ + Success + Info + Warning + Danger + +
+ +
+ + Some body text + Linked item + Danger styling + +
+ +
+
+

Label

+

Label

+

Label

+

Label

+
Label
+

Label

+
+
+ +
+
+   +   +   +   +   + +
+
+ +
+

Badges 42

+
+ +
+ +

Hello, world!

+

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

+

+
@@ -789,7 +788,7 @@ export class ReactBootstrapTest extends Component {
- Example page header Subtext for header + Example page header Subtext for header
@@ -797,412 +796,407 @@ export class ReactBootstrapTest extends Component {
-
- Look I'm in a large well! - Look I'm in a small well! -
+
+ Look I'm in a large well! + Look I'm in a small well! +
-
- - - - - - - - - - - - - - - - -
+
+ + + + + + + + + + + + + + + + +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NumberFirst NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NumberFirst NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
- - - - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + +
NumberTable headingTable headingTable headingTable headingTable headingTable heading
NumberTable headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
- - Working example with validation - - - Validation is based on string length. - + + Working example with validation + + + Validation is based on string length. +
-
- - Text - - - - Email address - - - - Pass - - - - File - - [Optional] Block level help text - - - Checkbox - - - Radio - - - Select - - - - - - - Textarea - - -
-
- -
-
- - - @ - - - - - - - .00 - - - - - $ - - .00 - - - - - - - - - - - - - - - - - - - - - - - - - Item - - - - - - - - - - - - - - - - - - - - + + + Text + + + + Email address + + + + Pass + + + + File + + [Optional] Block level help text + + + Checkbox + + + Radio + + + Select + + + + + + + Textarea + +
-
- - - - - - - - - -
+
+ + + @ + + + + + + + .00 + + + + + $ + + .00 + + + + + + + + + + + + + + + + + + + + + + + + + Item + + + + + + + + + + + + + + + + + + + + +
-
- - Input with success - - Help text with validation state. - + + + + + + + + + + +
+
- - Input with warning - - - - - Input with error - - - - - Input with success and feedback icon - - - - - - Input with warning and feedback icon - - - - - - Input with error and feedback icon - - - - - - Input with success and custom feedback icon - - - - - - - - Input group with warning - - @ - - - - - -
- - - Input with error - - - - - - - - - - Input group with success - - - - @ +
+ + + Input with success - - - - - + Help text with validation state. + -
- - Input with warning - {' '} - - - - {' '} - - Input group with error - {' '} - - @ - - - - -
+ + Input with warning + + - - Checkbox with success - - - Radio with warning - - - Checkbox with error - + + Input with error + + - {/* This requires React 15's -less spaces to be exactly correct. */} - - - Checkbox - - {' '} - - with - - {' '} - - success - - - + + Input with success and feedback icon + + + + + + Input with warning and feedback icon + + + + + + Input with error and feedback icon + + + + + + Input with success and custom feedback icon + + + + + + + + Input group with warning + + @ + + + + + +
+ + + Input with error + + + + + + + + + + Input group with success + + + + @ + + + + + +
+ +
+ + Input with warning + {' '} + + + + {' '} + + Input group with error + {' '} + + @ + + + + +
+ + + Checkbox with success + + + Radio with warning + + + Checkbox with error + + + {/* This requires React 15's -less spaces to be exactly correct. */} + + + Checkbox + + {' '} + + with + + {' '} + + success + + +
-
- - Control Label - - - Help block message. - + + + Control Label + + + Help block message. + - - 1 - {' '} - 2 - {' '} - 3 - - - 1 - {' '} - 2 - {' '} - 3 - -
+ + 1 + {' '} + 2 + {' '} + 3 + + + 1 + {' '} + 2 + {' '} + 3 + +
-
+
- - Image - - - Top aligned media -

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

- + + Image + + + Top aligned media +

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

+

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+