@patternfly/react-core 4.222.5 → 4.222.8

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.222.8 (2022-06-16)
+
+
+### Bug Fixes
+
+* **Table:** filterable table demo icon text spacing fix ([#7477](https://github.com/patternfly/patternfly-react/issues/7477)) ([e35387f](https://github.com/patternfly/patternfly-react/commit/e35387f42b355000ff66a79e1031eb6e9a7bb8c3))
+
+
+
+
+
+## 4.222.7 (2022-06-16)
+
+
+### Bug Fixes
+
+* **console:** add SUSE instruction for virt-viewer ([#7445](https://github.com/patternfly/patternfly-react/issues/7445)) ([2ac5adb](https://github.com/patternfly/patternfly-react/commit/2ac5adb581d673e0687f438baeb7859125bd30d4)), closes [#7519](https://github.com/patternfly/patternfly-react/issues/7519)
+
+
+
+
+
+## 4.222.6 (2022-06-16)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.222.5 (2022-06-15)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/umd/react-core.css

@@ -7226,7 +7226,8 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
   --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
   --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
@@ -7234,6 +7235,18 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -7338,6 +7351,7 @@ label.pf-c-check, .pf-c-check__label,
 
 .pf-c-dropdown.pf-m-expanded {
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
 }
 
 .pf-c-dropdown__toggle {
@@ -7589,6 +7603,60 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
 }
 
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
+  --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--Color);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover {
+  --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus {
+  --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active {
+  --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *::before {
+  border: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active {
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:first-child::before {
+  border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+  border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:last-child::before {
+  border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+  border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:first-child)::before {
+  border-left: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:last-child)::before {
+  border-right: 0;
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled).pf-m-action::before {
+  border: 0;
+}
+
 .pf-c-dropdown__toggle > .pf-c-badge {
   --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
   --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);

package/dist/umd/react-core.min.css

@@ -7226,7 +7226,8 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
   --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
   --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-dropdown__toggle--m-split-button--child--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
@@ -7234,6 +7235,18 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--Color: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -7338,6 +7351,7 @@ label.pf-c-check, .pf-c-check__label,
 
 .pf-c-dropdown.pf-m-expanded {
   --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth);
 }
 
 .pf-c-dropdown__toggle {
@@ -7589,6 +7603,60 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
 }
 
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) {
+  --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--Color);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover {
+  --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus {
+  --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active {
+  --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *::before {
+  border: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active {
+  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:first-child::before {
+  border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+  border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:last-child::before {
+  border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+  border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--child--BorderRadius);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:first-child)::before {
+  border-left: var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base) solid var(--pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:not(:last-child)::before {
+  border-right: 0;
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled).pf-m-action::before {
+  border: 0;
+}
+
 .pf-c-dropdown__toggle > .pf-c-badge {
   --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
   --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.222.5",
+  "version": "4.222.8",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.73.5",
-    "@patternfly/react-styles": "^4.72.5",
-    "@patternfly/react-tokens": "^4.74.5",
+    "@patternfly/react-icons": "^4.73.8",
+    "@patternfly/react-styles": "^4.72.8",
+    "@patternfly/react-tokens": "^4.74.8",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.196.8",
+    "@patternfly/patternfly": "4.197.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "5e748b4b49ef95edbf3bf15eb0684724f416f6c3"
+  "gitHead": "578849aa95888275b3834c63ffac16fb41ae0a2f"
 }

package/src/components/JumpLinks/examples/JumpLinks.md

@@ -9,89 +9,26 @@ propComponents: ['JumpLinks', 'JumpLinksItem']
 These examples are static because they have no element to scroll spy on that makes sense. Check out the [React demos](./react-demos) to see scroll spying in action!
 
 ### Basic
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<JumpLinks>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem isActive>Active section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksBasic.tsx'
 ```
 
 ### With centered list
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<JumpLinks isCentered>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem isActive>Active section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksWithCenteredList.tsx'
 ```
 
 ### With label
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<React.Fragment>
-  <JumpLinks label="Jump to section">
-    <JumpLinksItem>Inactive section</JumpLinksItem>
-    <JumpLinksItem isActive>Active section</JumpLinksItem>
-    <JumpLinksItem>Inactive section</JumpLinksItem>
-  </JumpLinks>
-  <JumpLinks isCentered label="Jump to section">
-    <JumpLinksItem>Inactive section</JumpLinksItem>
-    <JumpLinksItem isActive>Active section</JumpLinksItem>
-    <JumpLinksItem>Inactive section</JumpLinksItem>
-  </JumpLinks>
-</React.Fragment>
+```ts file='./JumpLinksWithLabel.tsx'
 ```
 
 ### Vertical
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<JumpLinks isVertical>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem isActive>Active section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksVertical.tsx'
 ```
 
 ### Vertical with label
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<JumpLinks isVertical label="Jump to section">
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem isActive>Active section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksVerticalWithLabel.tsx'
 ```
 
 ### Expandable vertical with subsection
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
-
-<JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem>
-    Section with active subsection
-    <JumpLinksList>
-      <JumpLinksItem isActive>Active subsection</JumpLinksItem>
-      <JumpLinksItem>Inactive subsection</JumpLinksItem>
-      <JumpLinksItem>Inactive subsection</JumpLinksItem>
-    </JumpLinksList>
-  </JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksExpandableVerticalWithSubsection.tsx'
 ```
 

package/src/components/JumpLinks/examples/JumpLinksBasic.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
+
+export const JumpLinksBasic: React.FunctionComponent = () => (
+  <JumpLinks>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem isActive>Active section</JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+  </JumpLinks>
+);

package/src/components/JumpLinks/examples/JumpLinksExpandableVerticalWithSubsection.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
+
+export const JumpLinksExpandableVerticalWithSubsection: React.FunctionComponent = () => (
+  <JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem>
+      Section with active subsection
+      <JumpLinksList>
+        <JumpLinksItem isActive>Active subsection</JumpLinksItem>
+        <JumpLinksItem>Inactive subsection</JumpLinksItem>
+        <JumpLinksItem>Inactive subsection</JumpLinksItem>
+      </JumpLinksList>
+    </JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+  </JumpLinks>
+);

package/src/components/JumpLinks/examples/JumpLinksVertical.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
+
+export const JumpLinksVertical: React.FunctionComponent = () => (
+  <JumpLinks isVertical>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem isActive>Active section</JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+  </JumpLinks>
+);

package/src/components/JumpLinks/examples/JumpLinksVerticalWithLabel.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
+
+export const JumpLinksVerticalWithLabel: React.FunctionComponent = () => (
+  <JumpLinks isVertical label="Jump to section">
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem isActive>Active section</JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+  </JumpLinks>
+);

package/src/components/JumpLinks/examples/JumpLinksWithCenteredList.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
+
+export const JumpLinksWithCenteredList: React.FunctionComponent = () => (
+  <JumpLinks isCentered>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem isActive>Active section</JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+  </JumpLinks>
+);

package/src/components/JumpLinks/examples/JumpLinksWithLabel.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
+
+export const JumpLinksWithLabel: React.FunctionComponent = () => (
+  <>
+    <JumpLinks label="Jump to section">
+      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem isActive>Active section</JumpLinksItem>
+      <JumpLinksItem>Inactive section</JumpLinksItem>
+    </JumpLinks>
+    <JumpLinks isCentered label="Jump to section">
+      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem isActive>Active section</JumpLinksItem>
+      <JumpLinksItem>Inactive section</JumpLinksItem>
+    </JumpLinks>
+  </>
+);

package/src/components/LabelGroup/examples/LabelGroup.md

@@ -13,196 +13,30 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 
 ### Basic
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<LabelGroup>
-  <Label icon={<InfoCircleIcon />}>Label 1</Label>
-  <Label icon={<InfoCircleIcon />} color="blue">
-    Label 2
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="green">
-    Label 3
-  </Label>
-</LabelGroup>;
+```ts file="LabelGroupBasic.tsx"
 ```
 
 ### Overflow
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<LabelGroup>
-  <Label icon={<InfoCircleIcon />}>Label 1</Label>
-  <Label icon={<InfoCircleIcon />} color="blue">
-    Label 2
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="green">
-    Label 3
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="orange">
-    Label 4
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="red">
-    Label 5
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="purple">
-    Label 6
-  </Label>
-</LabelGroup>;
+```ts file="LabelGroupOverflow.tsx"
 ```
 
 ### Category
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<LabelGroup categoryName="Group label">
-  <Label icon={<InfoCircleIcon />}>Label 1</Label>
-  <Label icon={<InfoCircleIcon />} color="blue">
-    Label 2
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="green">
-    Label 3
-  </Label>
-</LabelGroup>;
+```ts file="LabelGroupCategory.tsx"
 ```
 
 ### Category removable
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-CategoryLabelGroupRemovable = () => {
-  const [labels, setLabels] = React.useState([
-    ['Label 1', 'grey'],
-    ['Label 2', 'blue'],
-    ['Label 3', 'green'],
-    ['Label 4', 'orange'],
-    ['Label 5', 'red']
-  ]);
-  const deleteCategory = () => setLabels([]);
-
-  return (
-    <LabelGroup categoryName="Group label" isClosable onClick={deleteCategory}>
-      {labels.map(([labelText, labelColor]) => (
-        <Label icon={<InfoCircleIcon />} color={labelColor} key={labelText}>
-          {labelText}
-        </Label>
-      ))}
-    </LabelGroup>
-  );
-};
+```ts file="LabelGroupCategoryRemovable.tsx"
 ```
 
 ### Vertical category overflow removable
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-VerticalCategoryLabelGroupOverflowRemovable = () => {
-  const [labels, setLabels] = React.useState([
-    ['Label 1', 'grey'],
-    ['Label 2', 'blue'],
-    ['Label 3', 'green'],
-    ['Label 4', 'orange'],
-    ['Label 5', 'red']
-  ]);
-  const deleteCategory = () => setLabels([]);
-
-  return (
-    <LabelGroup categoryName="Group label with a very long name" isVertical isClosable onClick={deleteCategory}>
-      {labels.map(([labelText, labelColor]) => (
-        <Label icon={<InfoCircleIcon />} color={labelColor} key={labelText}>
-          {labelText}
-        </Label>
-      ))}
-    </LabelGroup>
-  );
-};
+```ts file="LabelGroupVerticalCategoryOverflowRemovable.tsx"
 ```
 
 ### Editable labels
 
-```js isBeta
-import React from 'react';
-import { LabelGroup, Label, TextArea } from '@patternfly/react-core';
-
-class EditableLabelGroup extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      label1: 'Editable label',
-      label2: 'Editable label 2',
-      label3: 'Editable label 3'
-    };
-    this.onEditCancel = (prevText, label) => {
-      this.setState({
-        [label]: prevText
-      });
-    };
-    this.onEditComplete = (newText, label) => {
-      this.setState({
-        [label]: newText
-      });
-    };
-  }
-
-  render() {
-    return (
-      <LabelGroup numLabels={5} isEditable>
-        <Label
-          color="blue"
-          onClose={Function.prototype}
-          onEditCancel={prevText => this.onEditCancel(prevText, 'label1')}
-          onEditComplete={newText => this.onEditComplete(newText, 'label1')}
-          isEditable
-          editableProps={{
-            'aria-label': 'Editable text',
-            id: 'editable-label-1'
-          }}
-        >
-          {this.state.label1}
-        </Label>
-        <Label color="green">Static label</Label>
-        <Label
-          color="blue"
-          onClose={Function.prototype}
-          onEditCancel={prevText => this.onEditCancel(prevText, 'label2')}
-          onEditComplete={newText => this.onEditComplete(newText, 'label2')}
-          isEditable
-          editableProps={{
-            'aria-label': 'Editable text 2',
-            id: 'editable-label-2'
-          }}
-        >
-          {this.state.label2}
-        </Label>
-        <Label
-          color="blue"
-          onClose={Function.prototype}
-          onEditCancel={prevText => this.onEditCancel(prevText, 'label3')}
-          onEditComplete={newText => this.onEditComplete(newText, 'label3')}
-          isEditable
-          editableProps={{
-            'aria-label': 'Editable text 3',
-            id: 'editable-label-3'
-          }}
-        >
-          {this.state.label3}
-        </Label>
-      </LabelGroup>
-    );
-  }
-}
+```ts file="LabelGroupEditableLabels.tsx" isBeta
 ```

package/src/components/LabelGroup/examples/LabelGroupBasic.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupBasic: React.FunctionComponent = () => (
+  <LabelGroup>
+    <Label icon={<InfoCircleIcon />}>Label 1</Label>
+    <Label icon={<InfoCircleIcon />} color="blue">
+      Label 2
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="green">
+      Label 3
+    </Label>
+  </LabelGroup>
+);

package/src/components/LabelGroup/examples/LabelGroupCategory.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupCategory: React.FunctionComponent = () => (
+  <LabelGroup categoryName="Group label">
+    <Label icon={<InfoCircleIcon />}>Label 1</Label>
+    <Label icon={<InfoCircleIcon />} color="blue">
+      Label 2
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="green">
+      Label 3
+    </Label>
+  </LabelGroup>
+);

package/src/components/LabelGroup/examples/LabelGroupCategoryRemovable.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupCategoryRemovable: React.FunctionComponent = () => {
+  const [labels, setLabels] = React.useState([
+    ['Label 1', 'grey'],
+    ['Label 2', 'blue'],
+    ['Label 3', 'green'],
+    ['Label 4', 'orange'],
+    ['Label 5', 'red']
+  ]);
+  const deleteCategory = () => setLabels([]);
+
+  return (
+    <LabelGroup categoryName="Group label" isClosable onClick={deleteCategory}>
+      {labels.map(([labelText, labelColor]) => (
+        <Label icon={<InfoCircleIcon />} color={labelColor as LabelProps['color']} key={labelText}>
+          {labelText}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};

package/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { LabelGroup, Label } from '@patternfly/react-core';
+
+export const LabelGroupEditableLabels: React.FunctionComponent = () => {
+  const [label1, setLabel1] = React.useState('Editable label');
+  const [label2, setLabel2] = React.useState('Editable label 2');
+  const [label3, setLabel3] = React.useState('Editable label 3');
+
+  return (
+    <LabelGroup numLabels={5} isEditable>
+      <Label
+        color="blue"
+        onClose={() => Function.prototype}
+        onEditCancel={prevText => setLabel1(prevText)}
+        onEditComplete={newText => setLabel1(newText)}
+        isEditable
+        editableProps={{
+          'aria-label': 'Editable text',
+          id: 'editable-label-1'
+        }}
+      >
+        {label1}
+      </Label>
+      <Label color="green">Static label</Label>
+      <Label
+        color="blue"
+        onClose={() => Function.prototype}
+        onEditCancel={prevText => setLabel2(prevText)}
+        onEditComplete={newText => setLabel2(newText)}
+        isEditable
+        editableProps={{
+          'aria-label': 'Editable text 2',
+          id: 'editable-label-2'
+        }}
+      >
+        {label2}
+      </Label>
+      <Label
+        color="blue"
+        onClose={() => Function.prototype}
+        onEditCancel={prevText => setLabel3(prevText)}
+        onEditComplete={newText => setLabel3(newText)}
+        isEditable
+        editableProps={{
+          'aria-label': 'Editable text 3',
+          id: 'editable-label-3'
+        }}
+      >
+        {label3}
+      </Label>
+    </LabelGroup>
+  );
+};

package/src/components/LabelGroup/examples/LabelGroupOverflow.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupOverflow: React.FunctionComponent = () => (
+  <LabelGroup>
+    <Label icon={<InfoCircleIcon />}>Label 1</Label>
+    <Label icon={<InfoCircleIcon />} color="blue">
+      Label 2
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="green">
+      Label 3
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="orange">
+      Label 4
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="red">
+      Label 5
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="purple">
+      Label 6
+    </Label>
+  </LabelGroup>
+);

package/src/components/LabelGroup/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupVerticalCategoryOverflowRemovable: React.FunctionComponent = () => {
+  const [labels, setLabels] = React.useState([
+    ['Label 1', 'grey'],
+    ['Label 2', 'blue'],
+    ['Label 3', 'green'],
+    ['Label 4', 'orange'],
+    ['Label 5', 'red']
+  ]);
+  const deleteCategory = () => setLabels([]);
+
+  return (
+    <LabelGroup categoryName="Group label with a very long name" isVertical isClosable onClick={deleteCategory}>
+      {labels.map(([labelText, labelColor]) => (
+        <Label icon={<InfoCircleIcon />} color={labelColor as LabelProps['color']} key={labelText}>
+          {labelText}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};

package/src/components/List/examples/List.md

@@ -5,97 +5,35 @@ cssPrefix: pf-c-list
 propComponents: ['List', 'ListItem']
 ---
 
-import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
-import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
+import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-
-<List>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListBasic.tsx"
 ```
 
 ### Inline
-```js
-import React from 'react';
-import { List, ListItem, ListVariant } from '@patternfly/react-core';
-
-<List variant={ListVariant.inline}>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListInline.tsx"
 ```
 
 ### Ordered
-```js
-import React from 'react';
-import { List, ListItem, ListComponent, OrderType } from '@patternfly/react-core';
-
-<List component={ListComponent.ol} type={OrderType.number}>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListOrdered.tsx"
 ```
 
 ### Plain
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-
-<List isPlain>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListPlain.tsx"
 ```
 
 ### With horizontal rules
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-
-<List isPlain isBordered>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListHorizontalRules.tsx"
 ```
 
 ### With icons
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
-import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
-
-<List isPlain>
-  <ListItem icon={<BookOpen />}>First</ListItem>
-  <ListItem icon={<Key />}>Second</ListItem>
-  <ListItem icon={<Desktop />}>Third</ListItem>
-</List>
+```ts file="./ListIcons.tsx"
 ```
 
 ### With large icons
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
-import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
-
-<List isPlain iconSize="large">
-  <ListItem icon={<BookOpen />}>First</ListItem>
-  <ListItem icon={<Key />}>Second</ListItem>
-  <ListItem icon={<Desktop />}>Third</ListItem>
-</List>
+```ts file="./ListLargeIcons.tsx"
 ```

package/src/components/List/examples/ListBasic.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+export const ListBasic: React.FunctionComponent = () => (
+  <List>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListHorizontalRules.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+export const ListHorizontalRules: React.FunctionComponent = () => (
+  <List isPlain isBordered>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListIcons.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
+
+export const ListIcons: React.FunctionComponent = () => (
+  <List isPlain>
+    <ListItem icon={<BookOpenIcon />}>First</ListItem>
+    <ListItem icon={<KeyIcon />}>Second</ListItem>
+    <ListItem icon={<DesktopIcon />}>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListInline.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem, ListVariant } from '@patternfly/react-core';
+
+export const ListInline: React.FunctionComponent = () => (
+  <List variant={ListVariant.inline}>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListLargeIcons.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
+
+export const ListLargeIcons: React.FunctionComponent = () => (
+  <List isPlain iconSize="large">
+    <ListItem icon={<BookOpenIcon />}>First</ListItem>
+    <ListItem icon={<KeyIcon />}>Second</ListItem>
+    <ListItem icon={<DesktopIcon />}>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListOrdered.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem, ListComponent, OrderType } from '@patternfly/react-core';
+
+export const ListOrdered: React.FunctionComponent = () => (
+  <List component={ListComponent.ol} type={OrderType.number}>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListPlain.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+export const ListPlain: React.FunctionComponent = () => (
+  <List isPlain>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/demos/JumpLinks.md

@@ -130,3 +130,13 @@ ScrollspyH2 = () => {
   );
 };
 ```
+
+
+### With drawer
+
+This demo shows how jump links can be used in combination with a drawer.
+
+The `scrollableSelector` prop passed to the jump links component is an `id` that was placed on the `DrawerContent` component.
+
+```js isFullscreen file="./examples/JumpLinks/JumpLinksWithDrawer.js"
+```

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import {
+  Button,
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  JumpLinks,
+  JumpLinksItem,
+  JumpLinksList,
+  PageSection,
+  Sidebar,
+  SidebarContent,
+  SidebarPanel,
+  TextContent,
+  getResizeObserver
+} from '@patternfly/react-core';
+import DashboardWrapper from '../DashboardWrapper';
+
+export const JumpLinksWithDrawer = () => {
+  const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
+
+  const [offsetHeight, setOffsetHeight] = React.useState(0);
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const drawerRef = React.useRef();
+
+  React.useEffect(() => {
+    const masthead = document.getElementsByClassName('pf-c-masthead')[0];
+    const drawerToggleSection = document.getElementsByClassName('pf-c-page__main-section')[0];
+
+    getResizeObserver(masthead, () => {
+      setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight);
+    });
+  }, []);
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  const onToggleClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const panelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
+          drawer-panel
+        </span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  return (
+    <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
+      <Drawer isExpanded={isExpanded}>
+        <DrawerContent panelContent={panelContent} id="jump-links-drawer-drawer-scrollable-container">
+          <DrawerContentBody hasPadding>
+            <Sidebar>
+              <SidebarPanel variant="sticky">
+                <JumpLinks
+                  isVertical={true}
+                  label="Jump to section"
+                  scrollableSelector="#jump-links-drawer-drawer-scrollable-container"
+                  offset={offsetHeight}
+                  expandable={{ default: 'expandable', md: 'nonExpandable' }}
+                >
+                  {headings.map(heading => (
+                    <JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
+                      {`${heading} section`}
+                      <JumpLinksList></JumpLinksList>
+                    </JumpLinksItem>
+                  ))}
+                </JumpLinks>
+              </SidebarPanel>
+              <SidebarContent>
+                <PageSection sticky="top" variant="light">
+                  <Button onClick={onToggleClick}>Toggle drawer</Button>
+                </PageSection>
+                <TextContent>
+                  {headings.map(heading => (
+                    <div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}>
+                      <h2 id={`jump-links-drawer-jump-links-${heading.toLowerCase()}`} tabIndex={-1}>
+                        {`${heading} section`}
+                      </h2>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim
+                        purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel.
+                        Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc
+                        viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit,
+                        tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus,
+                        vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper.
+                        Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla.
+                        Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros
+                        pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a
+                        accumsan. Nam pretium vitae leo vitae rhoncus.
+                      </p>
+                      <p>
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+                        deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+                        provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et
+                        dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum
+                        soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere
+                        possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
+                        aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
+                        molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+                        voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                      </p>
+                    </div>
+                  ))}
+                </TextContent>
+              </SidebarContent>
+            </Sidebar>
+          </DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </DashboardWrapper>
+  );
+};