Merge branch 'master' into v5-merge-master

Author: kyletsang

CONTRIBUTING.md

@@ -46,15 +46,16 @@ desired change easier.
 
 ## Documentation
 
-Please update the docs with any API changes, the code and docs should always be
-in sync.
+Please update the docs with any API changes, the code and docs should always be in sync.
 
-Component prop documentation is generated automatically from the React components
-and their leading comments. Please make sure to provide comments for any `propTypes` you add
-or change in a Component.
+The main documentation lives in the `www` folder which is a Gatsby project that uses [MDX](https://www.gatsbyjs.com/docs/how-to/routing/mdx/). The long-form documentation for components, including interactive examples and guides, is found within the `pages/components` directory.
+
+Separately, component prop API documentation is generated automatically from the React components in the `src` directory and their leading comments. This is the documentation that shows up in the tables at the bottom of component doc pages, e.g. [here](https://react-bootstrap.github.io/components/accordion/#api). Please make sure to provide [TSDOC-style](https://tsdoc.org/) comments\* for any `propTypes` you add or change in a component.
+
+Here's an example of well-documented `propTypes`:
 
 ```js
-propTypes: {
+const propTypes = {
   /**
    * Sets the visibility of the Component
    */
@@ -65,15 +66,15 @@ propTypes: {
    * @type {func}
    * @required
    */
-  onHide: myCustomPropType
-}
+  onHide: myCustomPropType,
+};
 ```
 
-There are a few caveats to this format that differ from conventional JSDoc comments.
+\*Note: there are a few caveats to this format that differ from conventional TSDoc comments:
 
-- Only specific doclets (the @ things) should be used, and only when the data cannot be parsed from the component itself
-  - `@type`: Override the "type", use the same names as the default React PropTypes: string, func, bool, number, object. You can express enum and oneOfType types, Like `{("optionA"|"optionB")}`.
-  - `@required`: to mark a prop as required (use the normal React isRequired if possible)
+- Only specific doclets (the @ things, a.k.a Block Tags) should be used, and only when the data cannot be parsed from the component itself.
+  - `@type`: An optional type override. Use the same names as the default React PropTypes: string, func, bool, number, object. This can be helpful to express enums and `oneOfType` types, e.g. `{("optionA"|"optionB")}`.
+  - `@required`: Mark a prop as required (use the normal React `isRequired` if possible)
   - `@private`: Will hide the prop in the documentation
 - All description text should be above the doclets.
 

package.json

@@ -32,7 +32,7 @@
     "url": "git+https://github.com/react-bootstrap/react-bootstrap.git"
   },
   "scripts": {
-    "bootstrap": "yarn && yarn --cwd www",
+    "bootstrap": "yarn --network-timeout 100000 && yarn --cwd www --network-timeout 100000",
     "build": "node tools/build.js",
     "build-docs": "yarn --cwd www build",
     "build-types": "yarn tsc -d --emitDeclarationOnly --outDir types",
@@ -77,42 +77,42 @@
     "warning": "^4.0.3"
   },
   "devDependencies": {
-    "@4c/rollout": "^2.2.0",
+    "@4c/rollout": "^2.2.1",
     "@4c/tsconfig": "^0.3.1",
-    "@babel/cli": "^7.13.10",
-    "@babel/core": "^7.13.10",
+    "@babel/cli": "^7.13.16",
+    "@babel/core": "^7.14.0",
     "@babel/preset-typescript": "^7.13.0",
-    "@babel/register": "^7.13.8",
+    "@babel/register": "^7.13.16",
     "@react-bootstrap/babel-preset": "^2.0.0",
     "@react-bootstrap/eslint-config": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.17.0",
-    "@typescript-eslint/parser": "^4.17.0",
+    "@typescript-eslint/eslint-plugin": "^4.22.1",
+    "@typescript-eslint/parser": "^4.22.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-istanbul": "^6.0.0",
-    "chai": "^4.3.3",
-    "chalk": "^4.1.0",
+    "chai": "^4.3.4",
+    "chalk": "^4.1.1",
     "cherry-pick": "^0.5.0",
-    "codecov": "^3.8.1",
+    "codecov": "^3.8.2",
     "conventional-changelog-cli": "^2.1.1",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.3",
-    "dtslint": "^4.0.7",
+    "dtslint": "^4.0.9",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
-    "eslint": "^7.21.0",
+    "eslint": "^7.26.0",
     "eslint-config-4catalyzer-typescript": "^3.0.3",
     "eslint-import-resolver-node": "^0.3.4",
     "eslint-import-resolver-webpack": "^0.13.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-mocha": "^8.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.23.2",
     "execa": "^5.0.0",
-    "fs-extra": "^9.1.0",
-    "husky": "^5.1.3",
-    "karma": "^6.2.0",
+    "fs-extra": "^10.0.0",
+    "husky": "^6.0.0",
+    "karma": "^6.3.2",
     "karma-chrome-launcher": "^3.1.0",
     "karma-cli": "^2.0.0",
     "karma-coverage": "^2.0.3",
@@ -122,19 +122,19 @@
     "karma-sinon-chai": "^2.0.2",
     "karma-sourcemap-loader": "^0.3.8",
     "karma-webpack": "^5.0.0",
-    "lint-staged": "^10.5.4",
+    "lint-staged": "^11.0.0",
     "lodash": "^4.17.21",
-    "mocha": "^8.3.1",
-    "prettier": "^2.2.1",
+    "mocha": "^8.4.0",
+    "prettier": "^2.3.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-test-renderer": "^16.14.0",
     "simulant": "^0.2.2",
     "sinon": "^9.2.4",
-    "sinon-chai": "^3.5.0",
+    "sinon-chai": "^3.6.0",
     "stream-browserify": "^3.0.0",
-    "typescript": "^4.2.3",
-    "webpack": "^5.24.4"
+    "typescript": "^4.2.4",
+    "webpack": "^5.36.2"
   },
   "peerDependencies": {
     "react": ">=16.14.0",

src/Nav.tsx

@@ -31,6 +31,7 @@ export interface NavProps
   justify?: boolean;
   onSelect?: SelectCallback;
   navbar?: boolean;
+  navbarScroll?: boolean;
 }
 
 const propTypes = {
@@ -98,6 +99,11 @@ const propTypes = {
    */
   navbar: PropTypes.bool,
 
+  /**
+   * Enable vertical scrolling within the toggleable contents of a collapsed Navbar.
+   */
+  navbarScroll: PropTypes.bool,
+
   as: PropTypes.elementType,
 
   /** @private */
@@ -120,6 +126,7 @@ const Nav: BsPrefixRefForwardingComponent<'div', NavProps> = React.forwardRef<
     fill,
     justify,
     navbar,
+    navbarScroll,
     className,
     activeKey,
     ...props
@@ -149,6 +156,7 @@ const Nav: BsPrefixRefForwardingComponent<'div', NavProps> = React.forwardRef<
       className={classNames(className, {
         [bsPrefix]: !isNavbar,
         [`${navbarBsPrefix}-nav`]: isNavbar,
+        [`${navbarBsPrefix}-nav-scroll`]: isNavbar && navbarScroll,
         [`${cardHeaderBsPrefix}-${variant}`]: !!cardHeaderBsPrefix,
         [`${bsPrefix}-${variant}`]: !!variant,
         [`${bsPrefix}-fill`]: fill,

test/NavSpec.js

@@ -73,6 +73,21 @@ describe('<Nav>', () => {
     ).assertSingle('div.navbar-nav');
   });
 
+  it('should handle navbarScroll only if within navbar', () => {
+    mount(
+      <Navbar>
+        <Nav navbarScroll />
+      </Navbar>,
+    ).assertSingle('div.navbar-nav.navbar-nav-scroll');
+  });
+
+  it('should not add navbarScroll when not within navbar', () => {
+    const wrapper = mount(<Nav navbarScroll />);
+
+    const nav = wrapper.find('div.nav');
+    expect(nav.hasClass('navbar-nav-scroll')).to.not.be.true;
+  });
+
   it('should be card header aware', () => {
     mount(
       <CardHeader>

www/gatsby-config.js

@@ -1,7 +1,6 @@
 const { cleanDoclets } = require('gatsby-transformer-react-docgen/doclets');
 const path = require('path');
 const remarkSlug = require('remark-slug');
-const Fiber = require('fibers');
 
 const defaultDescriptions = require('./src/defaultPropDescriptions');
 
@@ -63,14 +62,7 @@ module.exports = {
       },
     },
     'gatsby-plugin-catch-links',
-    {
-      resolve: 'gatsby-plugin-sass',
-      options: {
-        sassOptions: {
-          fiber: Fiber,
-        },
-      },
-    },
+    'gatsby-plugin-sass',
     {
       resolve: 'gatsby-plugin-astroturf',
       options: { extension: '.module.scss' },

www/package.json

@@ -30,9 +30,9 @@
     }
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-brands-svg-icons": "^5.15.2",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
@@ -45,10 +45,9 @@
     "common-tags": "^1.8.0",
     "copy-text-to-clipboard": "^3.0.1",
     "docsearch.js": "^2.6.3",
-    "dom-helpers": "^5.2.0",
-    "fibers": "^5.0.0",
+    "dom-helpers": "^5.2.1",
     "formik": "^2.2.6",
-    "gatsby": "^2.32.11",
+    "gatsby": "^2.32.13",
     "gatsby-plugin-astroturf": "^0.2.1",
     "gatsby-plugin-catch-links": "^2.10.0",
     "gatsby-plugin-mdx": "^1.10.1",
@@ -67,12 +66,12 @@
     "prismjs": "^1.23.0",
     "prop-types": "^15.7.2",
     "react": "^16.14.0",
-    "react-docgen": "^5.3.1",
+    "react-docgen": "^5.4.0",
     "react-dom": "^16.14.0",
     "react-helmet": "^6.1.0",
     "react-live": "^2.2.3",
     "remark-slug": "^6.0.0",
-    "sass": "^1.32.8",
+    "sass": "^1.32.12",
     "shakespeare-data": "^3.0.0",
     "yup": "^0.32.9"
   }

www/plugins/gatsby-plugin-sorted-assets/package.json

@@ -4,8 +4,8 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "fs-extra": "^9.0.0",
-    "lodash": "^4.17.11",
+    "fs-extra": "^10.0.0",
+    "lodash": "^4.17.21",
     "toposort": "^2.0.2"
   },
   "peerDependencies": {

www/plugins/gatsby-plugin-sorted-assets/yarn.lock

@@ -2,20 +2,14 @@
 # yarn lockfile v1
 
 
-at-least-node@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
-  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
-
-fs-extra@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.0.tgz#b6afc31036e247b2466dc99c29ae797d5d4580a3"
-  integrity sha512-pmEYSk3vYsG/bF651KPUXZ+hvjpgWYw/Gc7W9NFUe3ZVLczKKWIij3IKpOrQcdw4TILtibFslZ0UmR8Vvzig4g==
+fs-extra@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
+  integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==
   dependencies:
-    at-least-node "^1.0.0"
     graceful-fs "^4.2.0"
     jsonfile "^6.0.1"
-    universalify "^1.0.0"
+    universalify "^2.0.0"
 
 graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.3"
@@ -31,10 +25,10 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-lodash@^4.17.11:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 toposort@^2.0.2:
   version "2.0.2"
@@ -44,3 +38,8 @@ universalify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
   integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==
+
+universalify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
+  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==

www/src/examples/Form/CheckInline.js

@@ -1,8 +1,20 @@
 <Form>
   {['checkbox', 'radio'].map((type) => (
     <div key={`inline-${type}`} className="mb-3">
-      <Form.Check inline label="1" type={type} id={`inline-${type}-1`} />
-      <Form.Check inline label="2" type={type} id={`inline-${type}-2`} />
+      <Form.Check
+        inline
+        label="1"
+        name="group1"
+        type={type}
+        id={`inline-${type}-1`}
+      />
+      <Form.Check
+        inline
+        label="2"
+        name="group1"
+        type={type}
+        id={`inline-${type}-2`}
+      />
       <Form.Check
         inline
         disabled

www/src/examples/Navbar/NavScroll.js

@@ -0,0 +1,32 @@
+<Navbar bg="light" expand="lg">
+  <Navbar.Brand href="#">Navbar scroll</Navbar.Brand>
+  <Navbar.Toggle aria-controls="navbarScroll" />
+  <Navbar.Collapse id="navbarScroll">
+    <Nav
+      className="mr-auto my-2 my-lg-0"
+      style={{ maxHeight: '100px' }}
+      navbarScroll
+    >
+      <Nav.Link href="#action1">Home</Nav.Link>
+      <Nav.Link href="#action2">Link</Nav.Link>
+      <NavDropdown title="Link" id="navbarScrollingDropdown">
+        <NavDropdown.Item href="#action3">Action</NavDropdown.Item>
+        <NavDropdown.Item href="#action4">Another action</NavDropdown.Item>
+        <NavDropdown.Divider />
+        <NavDropdown.Item href="#action5">Something else here</NavDropdown.Item>
+      </NavDropdown>
+      <Nav.Link href="#" disabled>
+        Link
+      </Nav.Link>
+    </Nav>
+    <Form className="d-flex">
+      <FormControl
+        type="search"
+        placeholder="Search"
+        className="mr-2"
+        aria-label="Search"
+      />
+      <Button variant="outline-success">Search</Button>
+    </Form>
+  </Navbar.Collapse>
+</Navbar>;