diff --git a/docs/lib/Components/LayoutPage.js b/docs/lib/Components/LayoutPage.js index bbf36ab6c..402bc9b4f 100644 --- a/docs/lib/Components/LayoutPage.js +++ b/docs/lib/Components/LayoutPage.js @@ -44,7 +44,8 @@ export default class LayoutsPage extends React.Component { sm: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), md: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), lg: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - xl: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) + xl: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + xxl: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) }`} @@ -73,6 +74,7 @@ Col.propTypes = { md: columnProps, lg: columnProps, xl: columnProps, + xxl: columnProps, // override the predefined width (the ones above) with your own custom widths. // see https://github.com/reactstrap/reactstrap/issues/297#issuecomment-273556116 widths: PropTypes.array, diff --git a/docs/lib/examples/ContainerResponsive.js b/docs/lib/examples/ContainerResponsive.js index cd2c8a94f..b482f6c64 100644 --- a/docs/lib/examples/ContainerResponsive.js +++ b/docs/lib/examples/ContainerResponsive.js @@ -9,6 +9,7 @@ const Example = (props) => { .container-md .container-lg .container-xl + .container-xxl .container-fluid ); diff --git a/src/Col.js b/src/Col.js index 601ce165b..9e3090cc0 100644 --- a/src/Col.js +++ b/src/Col.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { mapToCssModules, tagPropType, isObject } from './utils'; -const colWidths = ['xs', 'sm', 'md', 'lg', 'xl']; +const colWidths = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']; const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); const columnProps = PropTypes.oneOfType([ @@ -24,6 +24,7 @@ const propTypes = { md: columnProps, lg: columnProps, xl: columnProps, + xxl: columnProps, className: PropTypes.string, cssModule: PropTypes.object, widths: PropTypes.array, diff --git a/src/Label.js b/src/Label.js index fabf2653c..9c562f6a5 100644 --- a/src/Label.js +++ b/src/Label.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { mapToCssModules, tagPropType, isObject } from './utils'; -const colWidths = ['xs', 'sm', 'md', 'lg', 'xl']; +const colWidths = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']; const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); @@ -32,6 +32,7 @@ const propTypes = { md: columnProps, lg: columnProps, xl: columnProps, + xxl: columnProps, widths: PropTypes.array, }; diff --git a/src/Row.js b/src/Row.js index 66b7ebc07..5f09d8665 100644 --- a/src/Row.js +++ b/src/Row.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { mapToCssModules, tagPropType, deprecated } from './utils'; -const rowColWidths = ['xs', 'sm', 'md', 'lg', 'xl']; +const rowColWidths = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']; const rowColsPropType = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); const propTypes = { @@ -16,7 +16,8 @@ const propTypes = { sm: rowColsPropType, md: rowColsPropType, lg: rowColsPropType, - xl: rowColsPropType + xl: rowColsPropType, + xxl: rowColsPropType }; const defaultProps = { diff --git a/types/lib/Col.d.ts b/types/lib/Col.d.ts index 1cc090ad4..6d93e76c9 100644 --- a/types/lib/Col.d.ts +++ b/types/lib/Col.d.ts @@ -20,6 +20,7 @@ export interface ColProps extends React.HTMLAttributes { md?: ColumnProps; lg?: ColumnProps; xl?: ColumnProps; + xxl?: ColumnProps; // custom widths widths?: string[]; diff --git a/types/lib/Label.d.ts b/types/lib/Label.d.ts index cfae900d7..5a21c603a 100644 --- a/types/lib/Label.d.ts +++ b/types/lib/Label.d.ts @@ -18,6 +18,7 @@ export interface LabelProps md?: ColumnProps; lg?: ColumnProps; xl?: ColumnProps; + xxl?: ColumnProps; // custom widths widths?: string[]; diff --git a/types/lib/Row.d.ts b/types/lib/Row.d.ts index 17e93bc93..5d66dd91e 100644 --- a/types/lib/Row.d.ts +++ b/types/lib/Row.d.ts @@ -15,6 +15,7 @@ export interface RowProps md?: number | string; lg?: number | string; xl?: number | string; + xxl?: number | string; } declare class Row extends React.Component {} diff --git a/types/reactstrap-tests.tsx b/types/reactstrap-tests.tsx index 2b4d51d68..415592c9d 100644 --- a/types/reactstrap-tests.tsx +++ b/types/reactstrap-tests.tsx @@ -2150,6 +2150,9 @@ const ExampleResponsiveContainer = (props: any) => { .container-xl + + .container-xxl + .container-fluid