@patternfly/react-core 6.0.0-alpha.8 → 6.0.0-alpha.80

package/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ExpandableSection, ExpandableSectionVariant, Truncate } from '@patternfly/react-core';
+
+export const ExpandableTextDemo: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus.
+  Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient
+  montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla,
+  eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam,
+  tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus.
+  Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante
+  commodo tincidunt. Integer tincidunt at ipsum non aliquet.`;
+
+  return (
+    <ExpandableSection
+      variant={ExpandableSectionVariant.truncate}
+      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+      truncateMaxLines={-1}
+    >
+      {isExpanded ? content : <Truncate content={content} style={{ maxWidth: '10ch' }} />}
+    </ExpandableSection>
+  );
+};

package/src/demos/Filters/FilterDemos.md

@@ -21,9 +21,7 @@ Badge,
 Pagination,
 EmptyState,
 EmptyStateBody,
-EmptyStateHeader,
 EmptyStateFooter,
-EmptyStateIcon,
 EmptyStateActions,
 Title,
 Button,
@@ -39,34 +37,41 @@ import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 ### Search input
 
 ```ts file="./examples/FilterSearchInput.tsx"
+
 ```
 
 ### Single select
 
 ```ts file="./examples/FilterSingleSelect.tsx"
+
 ```
 
 ### Checkbox select
 
 ```ts file="./examples/FilterCheckboxSelect.tsx"
+
 ```
 
 ### Attribute search
 
 ```ts file="./examples/FilterAttributeSearch.tsx"
+
 ```
 
 ### Mixed select filter group
 
 ```ts file="./examples/FilterMixedSelectGroup.tsx"
+
 ```
 
 ### Single select filter group
 
 ```ts file="./examples/FilterSameSelectGroup.tsx"
+
 ```
 
 ### Faceted filter
 
 ```ts file="./examples/FilterFaceted.tsx"
+
 ```

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -13,7 +13,6 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
@@ -22,8 +21,7 @@ import {
   ToolbarGroup,
   ToolbarFilter,
   ToolbarToggleGroup,
-  EmptyStateActions,
-  EmptyStateIcon
+  EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -591,27 +589,27 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
           <ToolbarGroup variant="filter-group">
             <ToolbarItem>{attributeDropdown}</ToolbarItem>
             <ToolbarFilter
-              chips={searchValue !== '' ? [searchValue] : ([] as string[])}
-              deleteChip={() => setSearchValue('')}
-              deleteChipGroup={() => setSearchValue('')}
+              labels={searchValue !== '' ? [searchValue] : ([] as string[])}
+              deleteLabel={() => setSearchValue('')}
+              deleteLabelGroup={() => setSearchValue('')}
               categoryName="Name"
               showToolbarItem={activeAttributeMenu === 'Servers'}
             >
               {searchInput}
             </ToolbarFilter>
             <ToolbarFilter
-              chips={statusSelection !== '' ? [statusSelection] : ([] as string[])}
-              deleteChip={() => setStatusSelection('')}
-              deleteChipGroup={() => setStatusSelection('')}
+              labels={statusSelection !== '' ? [statusSelection] : ([] as string[])}
+              deleteLabel={() => setStatusSelection('')}
+              deleteLabelGroup={() => setStatusSelection('')}
               categoryName="Status"
               showToolbarItem={activeAttributeMenu === 'Status'}
             >
               {statusSelect}
             </ToolbarFilter>
             <ToolbarFilter
-              chips={locationSelections}
-              deleteChip={(category, chip) => onLocationMenuSelect(undefined, chip as string)}
-              deleteChipGroup={() => setLocationSelections([])}
+              labels={locationSelections}
+              deleteLabel={(category, label) => onLocationMenuSelect(undefined, label as string)}
+              deleteLabelGroup={() => setLocationSelections([])}
               categoryName="Location"
               showToolbarItem={activeAttributeMenu === 'Location'}
             >
@@ -625,8 +623,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -651,7 +648,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -358,9 +358,9 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
         <ToolbarGroup variant="filter-group">
           <ToolbarFilter
-            chips={selections}
-            deleteChip={(category, chip) => onSelect(undefined, chip as string)}
-            deleteChipGroup={() => setSelections([])}
+            labels={selections}
+            deleteLabel={(category, label) => onSelect(undefined, label as string)}
+            deleteLabelGroup={() => setSelections([])}
             categoryName="Location"
           >
             {select}
@@ -377,7 +377,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -12,7 +12,6 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
@@ -21,7 +20,6 @@ import {
   ToolbarFilter,
   ToolbarToggleGroup,
   MenuGroup,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -306,11 +304,11 @@ export const FilterFaceted: React.FunctionComponent = () => {
     }
   };
 
-  const onChipDelete = (category: string, chip: string) => {
+  const onLabelDelete = (category: string, label: string) => {
     if (category === 'status') {
-      setStatusSelections(statusSelections.filter((selection) => selection !== chip));
+      setStatusSelections(statusSelections.filter((selection) => selection !== label));
     } else {
-      setLocationSelections(locationSelections.filter((selection) => selection !== chip));
+      setLocationSelections(locationSelections.filter((selection) => selection !== label));
     }
   };
 
@@ -419,18 +417,18 @@ export const FilterFaceted: React.FunctionComponent = () => {
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
         <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
           <ToolbarFilter
-            chips={statusSelections}
-            deleteChip={(category, chip) => onChipDelete(category as string, chip as string)}
-            deleteChipGroup={() => setStatusSelections([])}
+            labels={statusSelections}
+            deleteLabel={(category, label) => onLabelDelete(category as string, label as string)}
+            deleteLabelGroup={() => setStatusSelections([])}
             categoryName="Status"
             showToolbarItem={false}
           >
             <div />
           </ToolbarFilter>
           <ToolbarFilter
-            chips={locationSelections}
-            deleteChip={(category, chip) => onChipDelete(category as string, chip as string)}
-            deleteChipGroup={() => setLocationSelections([])}
+            labels={locationSelections}
+            deleteLabel={(category, label) => onLabelDelete(category as string, label as string)}
+            deleteLabelGroup={() => setLocationSelections([])}
             categoryName="Location"
           >
             {select}
@@ -442,8 +440,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -467,7 +464,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -12,7 +12,6 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
@@ -20,7 +19,6 @@ import {
   Badge,
   ToolbarFilter,
   ToolbarToggleGroup,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -470,17 +468,17 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
         <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
           <ToolbarFilter
-            chips={statusSelection !== '' ? [statusSelection] : ([] as string[])}
-            deleteChip={() => setStatusSelection('')}
-            deleteChipGroup={() => setStatusSelection('')}
+            labels={statusSelection !== '' ? [statusSelection] : ([] as string[])}
+            deleteLabel={() => setStatusSelection('')}
+            deleteLabelGroup={() => setStatusSelection('')}
             categoryName="Status"
           >
             {statusSelect}
           </ToolbarFilter>
           <ToolbarFilter
-            chips={locationSelections}
-            deleteChip={(category, chip) => onLocationMenuSelect(undefined, chip as string)}
-            deleteChipGroup={() => setLocationSelections([])}
+            labels={locationSelections}
+            deleteLabel={(category, label) => onLocationMenuSelect(undefined, label as string)}
+            deleteLabelGroup={() => setLocationSelections([])}
             categoryName="Location"
           >
             {locationSelect}
@@ -492,8 +490,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -517,7 +514,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterSameSelectGroup.tsx

@@ -12,13 +12,11 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
   Bullseye,
   ToolbarToggleGroup,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -465,8 +463,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -490,7 +487,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -13,12 +13,10 @@ import {
   Popper,
   Pagination,
   EmptyState,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateBody,
   Button,
   Bullseye,
-  EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -267,15 +265,14 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     <Toolbar id="search-input-filter-toolbar">
       <ToolbarContent>
         <ToolbarItem>{toolbarBulkSelect}</ToolbarItem>
-        <ToolbarItem variant="search-filter">{searchInput}</ToolbarItem>
+        <ToolbarItem>{searchInput}</ToolbarItem>
         <ToolbarItem variant="pagination">{toolbarPagination}</ToolbarItem>
       </ToolbarContent>
     </Toolbar>
   );
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader headingLevel="h4" titleText="No results found" icon={<EmptyStateIcon icon={SearchIcon} />} />
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -298,7 +295,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/Filters/examples/FilterSingleSelect.tsx

@@ -362,7 +362,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
       <Table aria-label="Selectable table">
         <Thead>
           <Tr>
-            <Th />
+            <Th screenReaderText="Row select" />
             <Th width={20}>{columnNames.name}</Th>
             <Th width={10}>{columnNames.threads}</Th>
             <Th width={10}>{columnNames.apps}</Th>

package/src/demos/HelperText.md

@@ -12,20 +12,21 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 ## Demos
 
-### Static variant with static text
+### Static helper text
 
-In this demo, the static variant of the helper text item component (the default) is used, and the text itself will always be visible to users and will never change.
+In this demo the text content of the helper text item will always be visible to users and will never change.
 
 The `aria-describedby` attribute is passed into the text input component and is linked to the `id` of the helper text component. This allows assistive technologies to notify users of the helper text content when the input receives focus, which can be helpful if a user navigates away from and then back to the input.
 
 Note that this demo does not validate the text input component. When it would need to be validated, there are other steps that would need to be taken to make it accessible, such as passing in `aria-invalid` and `aria-live` attributes to the appropriate components.
 
-```ts file='./examples/HelperText/HelperTextStaticVariantStaticText.tsx'
+```ts file='./examples/HelperText/HelperTextStatic.tsx'
+
 ```
 
-### Static variant with dynamic text
+### Dynamic helper text
 
-In this demo, the static variant of the helper text item component (the default) is used with the `hasIcon` prop passed in when there is an error, and the text itself dynamically updates based on the input value. When the input has a value of `johndoe`, an error is rendered to simulate a username already being taken, while an empty input renders other helper text. When the input is valid, no helper text is rendered.
+In this demo the text content of the helper text item dynamically updates based on the input value. When the input has a value of `johndoe`, an error is rendered to simulate a username already being taken, while an empty input renders default text. When the input is valid, no helper text is rendered.
 
 The `aria-describedby` attribute is passed into the text input component and is linked to the `id` of the helper text component. Similar to the static variant with static text demo, this allows assistive technologies to notify users of the helper text content when the navigating to the input.
 
@@ -33,16 +34,18 @@ An `aria-live` region is passed into the helper text component, which allows ass
 
 The `aria-invalid` attribute is also passed into the text input, which allows assistive technologies to notify users that an input is invalid. When this attribute is true, it's important that users are notified of what is causing the input to be invalid; in this case, `aria-describedby` and `aria-live` help accomplish this.
 
-```ts file='./examples/HelperText/HelperTextStaticVariantDynamicText.tsx'
+```ts file='./examples/HelperText/HelperTextDynamic.tsx'
+
 ```
 
-### Dynamic variant with static text
+### Static text and dynamic status
+
+In this demo the text content of the helper text item remains static and never changes, but the icons and styling will change as the validation of the input changes.
 
-In this demo, the helper text item components have the `isDynamic` prop passed in. While the text content of the components is static, the icons and styling will change as the validation of the input changes.
+The `aria-describedby` attribute is passed into the text input component and is linked to the `id` attribute of a helper text item that results in an invalid input. This will allow assistive technologies to only be notified of any outstanding criteria that has not been met when the input receives focus.
 
-The `aria-describedby` attribute is passed into the text input component and is linked to the id attribute of a helper text item that results in an invalid input. This will allow assistive technologies to only be notified of any outstanding criteria that has not been met when the input receives focus.
+Similar to the [with dynamic text example](/components/helper-text/react-demos#with-dynamic-text), the `aria-invalid` attribute is passed in, allowing assistive technologies to announce to users when at least 1 item is causing the input to be invalid.
 
-Similar to the static variant with dynamic text example, the `aria-invalid` attribute is passed in, allowing assistive technologies to announce to users when at least 1 item is causing the input to be invalid.
+```ts file='./examples/HelperText/HelperTextStaticTextDynamicVariant.tsx'
 
-```ts file='./examples/HelperText/HelperTextDynamicVariantStaticText.tsx'
 ```

package/src/demos/JumpLinks.md

@@ -4,14 +4,16 @@ section: components
 ---
 
 import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos
 
 JumpLinks has a scrollspy built-in to make your implementation easier. When implementing JumpLinks be sure to:
 
-1. Find the correct `scrollableSelector` for your page via [Firefox's debugging scrollable overflow](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Debug_Scrollable_Overflow) or by adding `hasOverflowScroll` to a [PageSection](/components/page#pagesection) or [PageGroup](/components/page#pagegroup).
+1. Find the correct scrollable element for your page via [Firefox's debugging scrollable overflow](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Debug_Scrollable_Overflow) or by adding `hasOverflowScroll` to a [PageSection](/components/page#pagesection) or [PageGroup](/components/page#pagegroup).
    - If you add `hasOverflowScroll` to a Page sub-component you should also add a relevant aria-label to that component as well.
-2. Provide `href`s to your JumpLinksItems which match the `id` of elements you want to spy on. If you wish to scroll to a different item than you're linking to use the `node` prop.
+2. Provide a reference to the scrollable element to `scrollableRef` prop or a CSS selector of the scrollable element to `scrollableSelector` prop.
+3. Provide `href`s to your JumpLinksItems which match the `id` of elements you want to spy on. If you wish to scroll to a different item than you're linking to use the `node` prop.
 
 ### Scrollspy with subsections
 
@@ -33,7 +35,7 @@ import {
   TextContent,
   getResizeObserver
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 
 ScrollspyH2 = () => {
@@ -70,8 +72,7 @@ ScrollspyH2 = () => {
         </Title>
         <Switch
           id="is-vertical"
-          label="Vertical"
-          labelOff="Horizontal"
+          label="Vertical jump links"
           isChecked={isVertical}
           onChange={(_event, check) => setIsVertical(check)}
         />
@@ -141,7 +142,7 @@ ScrollspyH2 = () => {
 
 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.
+This demo uses a `scrollableRef` prop on the JumpLinks component, which is a React ref to the `DrawerContent` component.
 
 ```js isFullscreen file="./examples/JumpLinks/JumpLinksWithDrawer.js"
 ```

package/src/demos/LabelGroupDemos.md

@@ -3,6 +3,7 @@ id: Label
 section: components
 ---
 
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
 ## Demos
@@ -10,9 +11,11 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 ### Editable labels with add dropdown
 
 ```ts file="../components/Label/examples/LabelGroupEditableAddDropdown.tsx"
+
 ```
 
 ### Editable labels with add modal
 
 ```ts file="../components/Label/examples/LabelGroupEditableAddModal.tsx"
+
 ```

package/src/demos/Masthead.md

@@ -3,12 +3,10 @@ id: Masthead
 section: components
 ---
 
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfIcon from './assets/pf-logo-small.svg';
@@ -17,10 +15,14 @@ import { Link } from '@reach/router';
 
 ## Demos
 
-### Masthead with utilities and user dropdown menu
+### Utilities and user dropdown menu
 
 Many mastheads contain utilities which collapse into a dropdown at smaller viewport widths. These utilities could include a notification badge to open and close a notification drawer, a link to app or user settings, a help icon which could launch quick starts or link to other resources, and many other utilities. In this demo, the notification badge does not collapse down into the mobile menu so that it is always visible even at narrower viewport widths.
 
 ```ts file='./examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx' isFullscreen
 
 ```
+### Horizontal nav
+```ts file='./examples/Masthead/MastheadWithHorizontalNav.tsx' isFullscreen
+
+```

package/src/demos/MultipleFileUploadDemos.md

@@ -4,6 +4,7 @@ section: components
 subsection: file-upload
 ---
 
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 ## Demos
@@ -13,4 +14,5 @@ import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 This demo shows how to add a modal to alert users that the file(s) they attempted to drop was of a non-acceptable type.
 
 ```ts file="./examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx"
+
 ```

package/src/demos/Nav.md

@@ -11,6 +11,8 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
+import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 
 ## Demos
 
@@ -44,16 +46,6 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 ```js file='./examples/Nav/NavHorizontalWithSubnav.tsx' isFullscreen
 ```
 
-### Tertiary nav (deprecated)
-
-```js file='./examples/Nav/deprecated/NavTertiary.tsx' isFullscreen
-```
-
-### Light nav (deprecated)
-
-```js file='./examples/Nav/deprecated/NavLight.tsx' isFullscreen
-```
-
 ### Manual nav
 
 ```js file='./examples/Nav/NavManual.tsx' isFullscreen
@@ -66,5 +58,5 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 
 ### Drilldown nav
 
-```js isBeta isFullscreen file="./examples/Nav/NavDrilldown.tsx"
+```js isFullscreen file="./examples/Nav/NavDrilldown.tsx"
 ```