feat(bs5): Support xxl breakpoint

Support xxl breakpoint in Col, Label, Row
reactstrap · Oct 27, 2021 · 4fb7cdd · 4fb7cdd
1 parent a580f23
commit 4fb7cdd
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 5 deletions.
diff --git 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])
 }`}
           </PrismCode>
         </pre>
@@ -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
@@ -9,6 +9,7 @@ const Example = (props) => {
       <Container className="themed-container" fluid="md">.container-md</Container>
       <Container className="themed-container" fluid="lg">.container-lg</Container>
       <Container className="themed-container" fluid="xl">.container-xl</Container>
+      <Container className="themed-container" fluid="xxl">.container-xxl</Container>
       <Container className="themed-container" fluid={true}>.container-fluid</Container>
     </>
   );

diff --git 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
@@ -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
@@ -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
@@ -20,6 +20,7 @@ export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
   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
@@ -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
@@ -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<RowProps> {}

diff --git a/types/reactstrap-tests.tsx b/types/reactstrap-tests.tsx
@@ -2150,6 +2150,9 @@ const ExampleResponsiveContainer = (props: any) => {
       <Container className="themed-container" fluid="xl">
         .container-xl
       </Container>
+      <Container className="themed-container" fluid="xxl">
+        .container-xxl
+      </Container>
       <Container className="themed-container" fluid={true}>
         .container-fluid
       </Container>