Merge pull request #26401 from r3nya/up-react-bootstrap

[react-bootstrap] Add bsSize property
This commit is contained in:
Nathan Shively-Sanders
2018-06-18 12:59:21 -07:00
committed by GitHub
5 changed files with 93 additions and 25 deletions
+1
View File
@@ -12,6 +12,7 @@
// Karol Janyst <https://github.com/LKay>
// Aaron Beall <https://github.com/aaronbeall>
// Johann Rakotoharisoa <https://github.com/jrakotoharisoa>
// Andrew Makarov <https://github.com/r3nya>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.6
+3 -2
View File
@@ -1,11 +1,12 @@
import * as React from 'react';
import { Button } from 'react-bootstrap';
declare namespace ToggleButton {
export interface ToggleButtonProps extends React.HTMLProps<ToggleButton> {
checked?: boolean;
name?: string;
value: number|string;
value: number | string;
}
}
declare class ToggleButton extends React.Component<ToggleButton.ToggleButtonProps> { }
declare class ToggleButton extends React.Component<ToggleButton.ToggleButtonProps & Button.ButtonProps> { }
export = ToggleButton;
+2 -1
View File
@@ -1,4 +1,5 @@
import * as React from 'react';
import { ButtonGroup } from 'react-bootstrap';
import { Omit } from "../index";
declare namespace ToggleButtonGroup {
@@ -34,5 +35,5 @@ declare namespace ToggleButtonGroup {
& Omit<React.HTMLProps<ToggleButtonGroup>, "defaultValue" | "type" | "value" | "onChange">;
}
declare class ToggleButtonGroup extends React.Component<ToggleButtonGroup.ToggleButtonGroupProps> { }
declare class ToggleButtonGroup extends React.Component<ToggleButtonGroup.ToggleButtonGroupProps & ButtonGroup.ButtonGroupProps> { }
export = ToggleButtonGroup;
@@ -209,8 +209,8 @@ export class ReactBootstrapIndividualComponentsTest extends React.Component {
<Table />
<Tabs />
<Thumbnail />
<ToggleButton value="foo" />
<ToggleButtonGroup type="checkbox" />
<ToggleButton value="foo" bsSize="small" />
<ToggleButtonGroup type="checkbox" bsSize="small" />
<ToggleButtonGroup type="radio" name="foo" />
<Tooltip />
<Well />
@@ -1,18 +1,56 @@
import * as React from 'react';
import { Component, CSSProperties } from 'react';
import {
Button, ButtonToolbar, Modal, Well, ButtonGroup,
DropdownButton, MenuItem, Panel, PanelGroup, ListGroup,
ListGroupItem, Accordion, Tooltip,
OverlayTrigger, Popover, ProgressBar,
Nav, NavItem, Navbar, NavDropdown,
Tabs, Tab, Pager, PageItem,
Pagination, Alert, Carousel, SafeAnchor,
Grid, Row, Col, Thumbnail, Image, ResponsiveEmbed,
Label, Badge, Jumbotron, PageHeader,
Glyphicon, Table, Form, FormGroup,
ControlLabel, FormControl, HelpBlock,
Radio, Checkbox, Media, InputGroup, ToggleButtonGroup,
Button,
ButtonToolbar,
Modal,
Well,
ButtonGroup,
DropdownButton,
MenuItem,
Panel,
PanelGroup,
ListGroup,
ListGroupItem,
Accordion,
Tooltip,
OverlayTrigger,
Popover,
ProgressBar,
Nav,
NavItem,
Navbar,
NavDropdown,
Tabs,
Tab,
Pager,
PageItem,
Pagination,
Alert,
Carousel,
SafeAnchor,
Grid,
Row,
Col,
Thumbnail,
Image,
ResponsiveEmbed,
Label,
Badge,
Jumbotron,
PageHeader,
Glyphicon,
Table,
Form,
FormGroup,
ControlLabel,
FormControl,
HelpBlock,
Radio,
Checkbox,
Media,
InputGroup,
ToggleButtonGroup,
ToggleButton
} from 'react-bootstrap';
@@ -1418,20 +1456,47 @@ export class ReactBootstrapTest extends Component {
<div>
<ButtonToolbar>
<ToggleButtonGroup type="checkbox" defaultValue={[1, 3]}>
<ToggleButton value={1}>Checkbox 1 (pre-checked)</ToggleButton>
<ToggleButton value={2}>Checkbox 2</ToggleButton>
<ToggleButton value={3}>Checkbox 3 (pre-checked)</ToggleButton>
<ToggleButtonGroup
type="checkbox"
defaultValue={[1, 3]}
bsSize="small"
>
<ToggleButton value={1} bsSize="small" active>
Checkbox 1 (pre-checked)
</ToggleButton>
<ToggleButton value={2}>
Checkbox 2
</ToggleButton>
<ToggleButton value={3}>
Checkbox 3 (pre-checked)
</ToggleButton>
</ToggleButtonGroup>
</ButtonToolbar>
<ButtonToolbar>
<ToggleButtonGroup type="radio" name="options" defaultValue={1}>
<ToggleButton value={1}>
<ToggleButtonGroup
type="radio"
name="options"
defaultValue={1}
>
<ToggleButton
value={1}
bsSize="large"
>
Radio 1 (pre-checked)
</ToggleButton>
<ToggleButton value={2}>Radio 2</ToggleButton>
<ToggleButton value={3}>Radio 3</ToggleButton>
<ToggleButton
value={2}
bsSize="small"
>
Radio 2
</ToggleButton>
<ToggleButton
value={3}
bsSize="xsmall"
>
Radio 3
</ToggleButton>
</ToggleButtonGroup>
</ButtonToolbar>
</div>