feat(v5): Add XXL support (#5419)

Author: kyletsang

src/Col.tsx

@@ -36,15 +36,10 @@ export interface ColProps extends BsPrefixPropsWithChildren {
   md?: ColSpec;
   lg?: ColSpec;
   xl?: ColSpec;
+  xxl?: ColSpec;
 }
 
-const DEVICE_SIZES = [
-  'xl' as const,
-  'lg' as const,
-  'md' as const,
-  'sm' as const,
-  'xs' as const,
-];
+const DEVICE_SIZES = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'] as const;
 const colSize = PropTypes.oneOfType([
   PropTypes.bool,
   PropTypes.number,
@@ -108,6 +103,13 @@ const propTypes = {
    * @type {(boolean|"auto"|number|{ span: boolean|"auto"|number, offset: number, order: "first"|"last"|number })}
    */
   xl: column,
+
+  /**
+   * The number of columns to span on extra extra large devices (≥1400px)
+   *
+   * @type {(boolean|"auto"|number|{ span: boolean|"auto"|number, offset: number, order: "first"|"last"|number })}
+   */
+  xxl: column,
 };
 
 const Col: BsPrefixRefForwardingComponent<'div', ColProps> = React.forwardRef(

src/Container.tsx

@@ -9,14 +9,14 @@ import {
 } from './helpers';
 
 export interface ContainerProps extends BsPrefixPropsWithChildren {
-  fluid?: boolean | 'sm' | 'md' | 'lg' | 'xl';
+  fluid?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 }
 
 type Container = BsPrefixRefForwardingComponent<'div', ContainerProps>;
 
 const containerSizes = PropTypes.oneOfType([
   PropTypes.bool,
-  PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
 ]);
 
 const propTypes = {
@@ -27,7 +27,7 @@ const propTypes = {
 
   /**
    * Allow the Container to fill all of its available horizontal space.
-   * @type {(true|"sm"|"md"|"lg"|"xl")}
+   * @type {(true|"sm"|"md"|"lg"|"xl"|"xxl")}
    */
   fluid: containerSizes,
   /**

src/ListGroup.tsx

@@ -16,7 +16,7 @@ import {
 
 export interface ListGroupProps extends BsPrefixProps {
   variant?: 'flush';
-  horizontal?: boolean | 'sm' | 'md' | 'lg' | 'xl';
+  horizontal?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
   activeKey?: unknown;
   defaultActiveKey?: unknown;
   onSelect?: SelectCallback;
@@ -42,11 +42,11 @@ const propTypes = {
   /**
    * Changes the flow of the list group items from vertical to horizontal.
    * A value of `null` (the default) sets it to vertical for all breakpoints;
-   * Just including the prop sets it for all breakpoints, while `{sm|md|lg|xl}`
+   * Just including the prop sets it for all breakpoints, while `{sm|md|lg|xl|xxl}`
    * makes the list group horizontal starting at that breakpoint’s `min-width`.
-   * @type {(true|'sm'|'md'|'lg'|'xl')}
+   * @type {(true|'sm'|'md'|'lg'|'xl'|'xxl')}
    */
-  horizontal: PropTypes.oneOf([true, 'sm', 'md', 'lg', 'xl', undefined]),
+  horizontal: PropTypes.oneOf([true, 'sm', 'md', 'lg', 'xl', 'xxl', undefined]),
 
   /**
    * You can use a custom element type for this component.

src/Modal.tsx

@@ -39,7 +39,13 @@ export interface ModalProps
     | 'backdropTransition'
   > {
   size?: 'sm' | 'lg' | 'xl';
-  fullscreen?: true | 'sm-down' | 'md-down' | 'lg-down' | 'xl-down';
+  fullscreen?:
+    | true
+    | 'sm-down'
+    | 'md-down'
+    | 'lg-down'
+    | 'xl-down'
+    | 'xxl-down';
   bsPrefix?: string;
   centered?: boolean;
   backdropClassName?: string;
@@ -79,7 +85,7 @@ const propTypes = {
    * Renders a fullscreen modal. Specifying a breakpoint will render the modal
    * as fullscreen __below__ the breakpoint size.
    *
-   * @type (true|'sm-down'|'md-down'|'lg-down'|'xl-down')
+   * @type (true|'sm-down'|'md-down'|'lg-down'|'xl-down'|'xxl-down')
    */
   fullscreen: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 

src/ModalDialog.tsx

@@ -10,7 +10,13 @@ export interface ModalDialogProps
   extends React.HTMLAttributes<HTMLDivElement>,
     BsPrefixPropsWithChildren {
   size?: 'sm' | 'lg' | 'xl';
-  fullscreen?: true | 'sm-down' | 'md-down' | 'lg-down' | 'xl-down';
+  fullscreen?:
+    | true
+    | 'sm-down'
+    | 'md-down'
+    | 'lg-down'
+    | 'xl-down'
+    | 'xxl-down';
   centered?: boolean;
   scrollable?: boolean;
   contentClassName?: string;
@@ -32,7 +38,7 @@ const propTypes = {
    * Renders a fullscreen modal. Specifying a breakpoint will render the modal
    * as fullscreen __below__ the breakpoint size.
    *
-   * @type (true|'sm-down'|'md-down'|'lg-down'|'xl-down')
+   * @type (true|'sm-down'|'md-down'|'lg-down'|'xl-down'|'xxl-down')
    */
   fullscreen: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 

src/Navbar.tsx

@@ -23,7 +23,7 @@ const NavbarText = createWithBsPrefix('navbar-text', {
 
 export interface NavbarProps extends BsPrefixPropsWithChildren {
   variant?: 'light' | 'dark';
-  expand?: boolean | 'sm' | 'md' | 'lg' | 'xl';
+  expand?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
   bg?: string;
   fixed?: 'top' | 'bottom';
   sticky?: 'top' | 'bottom';
@@ -58,7 +58,7 @@ const propTypes = {
    * The breakpoint, below which, the Navbar will collapse.
    * When `true` the Navbar will always be expanded regardless of screen size.
    */
-  expand: PropTypes.oneOf([true, 'sm', 'md', 'lg', 'xl']).isRequired,
+  expand: PropTypes.oneOf([true, 'sm', 'md', 'lg', 'xl', 'xxl']).isRequired,
 
   /**
    * A convenience prop for adding `bg-*` utility classes since they are so commonly used here.

src/Row.tsx

@@ -33,11 +33,12 @@ export interface RowProps extends BsPrefixPropsWithChildren {
   md?: RowColumns;
   lg?: RowColumns;
   xl?: RowColumns;
+  xxl?: RowColumns;
 }
 
 type Row = BsPrefixRefForwardingComponent<'div', RowProps>;
 
-const DEVICE_SIZES = ['xl', 'lg', 'md', 'sm', 'xs'];
+const DEVICE_SIZES = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'] as const;
 const rowColWidth = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
 
 const rowColumns = PropTypes.oneOfType([
@@ -96,6 +97,14 @@ const propTypes = {
    * @type {(number|'auto'|{ cols: number|'auto' })}
    */
   xl: rowColumns,
+
+  /**
+   * The number of columns that will fit next to each other on extra extra large devices (≥1400px).
+   * Use `auto` to give columns their natural widths.
+   *
+   * @type {(number|'auto'|{ cols: number|'auto' })}
+   */
+  xxl: rowColumns,
 };
 
 const defaultProps = {

tests/simple-types-test.tsx

@@ -250,11 +250,12 @@ const MegaComponent = () => (
         md={1}
         lg={1}
         xl={1}
+        xxl={1}
         noGutters
         bsPrefix="row"
         className="justify-content-md-center"
       >
-        <Col xs lg="2" bsPrefix="col">
+        <Col xs sm md lg="2" xl xxl bsPrefix="col">
           1 of 3
         </Col>
         <Col md="auto">Variable width content</Col>
@@ -656,11 +657,13 @@ const MegaComponent = () => (
     <Modal fullscreen="md-down" />
     <Modal fullscreen="lg-down" />
     <Modal fullscreen="xl-down" />
+    <Modal fullscreen="xxl-down" />
     <Modal.Dialog fullscreen />
     <Modal.Dialog fullscreen="sm-down" />
     <Modal.Dialog fullscreen="md-down" />
     <Modal.Dialog fullscreen="lg-down" />
     <Modal.Dialog fullscreen="xl-down" />
+    <Modal.Dialog fullscreen="xxl-down" />
     <Modal.Dialog
       centered
       scrollable

www/src/examples/ListGroup/HorizontalResponsive.js

@@ -1,4 +1,4 @@
-['sm', 'md', 'lg', 'xl'].map((breakpoint, idx) => (
+['sm', 'md', 'lg', 'xl', 'xxl'].map((breakpoint, idx) => (
   <ListGroup horizontal={breakpoint} className="my-2" key={idx}>
     <ListGroup.Item>This ListGroup</ListGroup.Item>
     <ListGroup.Item>renders horizontally</ListGroup.Item>

www/src/examples/Modal/FullScreen.js

@@ -1,5 +1,5 @@
 function Example() {
-  const values = [true, 'sm-down', 'md-down', 'lg-down', 'xl-down'];
+  const values = [true, 'sm-down', 'md-down', 'lg-down', 'xl-down', 'xxl-down'];
   const [fullscreen, setFullscreen] = useState(true);
   const [show, setShow] = useState(false);
 

www/src/pages/components/list-group.mdx

@@ -89,7 +89,7 @@ Use the `horizontal` prop to make the ListGroup render horizontally. Currently *
   exampleClassName={styles.listGroup}
 />
 
-There are responsive variants to `horizontal`: setting it to `{sm|md|lg|xl}` makes the list group horizontal starting at that breakpoint’s `min-width`.
+There are responsive variants to `horizontal`: setting it to `{sm|md|lg|xl|xxl}` makes the list group horizontal starting at that breakpoint’s `min-width`.
 
 <ReactPlayground
   codeText={ListGroupHorizontalResponsive}

www/src/pages/components/navbar.js

@@ -102,9 +102,9 @@ export default withLayout(function NaπvbarSection({ data }) {
       <p>
         When the container is within your navbar, its horizontal padding is
         removed at breakpoints lower than your specified{' '}
-        <code>{`expand={'sm' | 'md' | 'lg' | 'xl'}`}</code> prop. This ensures
-        we’re not doubling up on padding unnecessarily on lower viewports when
-        your navbar is collapsed.
+        <code>{`expand={'sm' | 'md' | 'lg' | 'xl' | 'xxl'}`}</code> prop. This
+        ensures we’re not doubling up on padding unnecessarily on lower
+        viewports when your navbar is collapsed.
       </p>
       <ReactPlayground codeText={ContainerInside} />
 

www/src/pages/layout/grid.js

@@ -62,7 +62,7 @@ export default withLayout(function GridSection({ data }) {
       />
       <p>
         You can set breakpoints for the <code>fluid</code> prop. Setting it to a
-        breakpoint (<code>sm, md, lg, xl</code>) will set the{' '}
+        breakpoint (<code>sm, md, lg, xl, xxl</code>) will set the{' '}
         <code>Container</code> as fluid until the specified breakpoint.
       </p>
       <ReactPlayground
@@ -110,9 +110,9 @@ export default withLayout(function GridSection({ data }) {
         Responsive grids
       </LinkedHeading>
       <p>
-        The <code>Col</code> lets you specify column widths across 5 breakpoint
-        sizes (xs, sm, md, lg, and xl). For every breakpoint, you can specify
-        the amount of columns to span, or set the prop to{' '}
+        The <code>Col</code> lets you specify column widths across 6 breakpoint
+        sizes (xs, sm, md, lg, xl and xxl). For every breakpoint, you can
+        specify the amount of columns to span, or set the prop to{' '}
         <code>{'<Col lg={true} />'}</code> for auto layout widths.
       </p>
       <ReactPlayground
@@ -158,9 +158,10 @@ export default withLayout(function GridSection({ data }) {
 
       <p>
         The <code>Row</code> lets you specify column widths across 5 breakpoint
-        sizes (xs, sm, md, lg, and xl). For every breakpoint, you can specify
-        the amount of columns that will fit next to each other. You can also
-        specify <code>auto</code> to set the columns to their natural widths.
+        sizes (xs, sm, md, lg, xl and xxl). For every breakpoint, you can
+        specify the amount of columns that will fit next to each other. You can
+        also specify <code>auto</code> to set the columns to their natural
+        widths.
       </p>
       <ReactPlayground
         codeText={GridRowColLayout}