@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.30

package/src/demos/DataListDemo.md

@@ -25,411 +25,5 @@ import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle
 
 ### Expandable control in toolbar
 
-```js
-import React from 'react';
-import {
-  Button,
-  DataList,
-  DataListItem,
-  DataListItemRow,
-  DataListCell,
-  DataListAction,
-  DataListToggle,
-  DataListContent,
-  DataListItemCells,
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  MenuToggle,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem,
-  ToolbarExpandIconWrapper,
-  ToolbarContent,
-  SearchInput,
-  Tooltip,
-  Icon
-} from '@patternfly/react-core';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-
-class ExpandableDataList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expanded: ['ex-toggle1', 'ex-toggle3'],
-      isOpen1: false,
-      isOpen2: false,
-      isOpen3: false,
-      allExpanded: false
-    };
-
-    this.onToggleAll = () => {
-      this.setState(
-        {
-          allExpanded: !this.state.allExpanded
-        },
-        () => {
-          if (this.state.allExpanded) {
-            this.setState({
-              expanded: ['ex-toggle1', 'ex-toggle2', 'ex-toggle3']
-            });
-          } else {
-            this.setState({
-              expanded: []
-            });
-          }
-        }
-      );
-    };
-
-    this.onToggle1 = () => {
-      this.setState((prevState) => ({ isOpen1: !prevState.isOpen1 }));
-    };
-
-    this.onToggle2 = () => {
-      this.setState((prevState) => ({ isOpen2: !prevState.isOpen2 }));
-    };
-
-    this.onToggle3 = () => {
-      this.setState((prevState) => ({ isOpen3: !prevState.isOpen3 }));
-    };
-
-    this.onSelect1 = () => {
-      this.setState({
-        isOpen1: false
-      });
-    };
-
-    this.onSelect2 = () => {
-      this.setState({
-        isOpen2: false
-      });
-    };
-
-    this.onSelect3 = () => {
-      this.setState({
-        isOpen3: false
-      });
-    };
-  }
-
-  renderToolbar() {
-    return (
-      <React.Fragment>
-        <Toolbar>
-          <ToolbarContent>
-            <ToolbarGroup>
-              <ToolbarItem variant="expand-all" isAllExpanded={this.state.allExpanded}>
-                <Tooltip
-                  position="right"
-                  content={
-                    <div>
-                      {this.state.allExpanded && 'Collapse all rows'}
-                      {!this.state.allExpanded && 'Expand all rows'}
-                    </div>
-                  }
-                >
-                  <Button
-                    onClick={this.onToggleAll}
-                    variant="plain"
-                    aria-label={this.state.allExpanded ? 'Collapse all rows' : 'Expand all rows'}
-                  >
-                    <Icon shouldMirrorRTL>
-                      <ToolbarExpandIconWrapper>
-                        <AngleRightIcon />
-                      </ToolbarExpandIconWrapper>
-                    </Icon>
-                  </Button>
-                </Tooltip>
-              </ToolbarItem>
-              <ToolbarItem>
-                <SearchInput aria-label="search input example" />
-              </ToolbarItem>
-              <ToolbarItem>
-                <Button variant="secondary">Action</Button>
-              </ToolbarItem>
-              <ToolbarItem variant="separator" />
-              <ToolbarItem>
-                <Button variant="primary">Action</Button>
-              </ToolbarItem>
-            </ToolbarGroup>
-          </ToolbarContent>
-        </Toolbar>
-      </React.Fragment>
-    );
-  }
-
-  render() {
-    const { isOpen1, isOpen2, isOpen3 } = this.state;
-    const toggle = (id) => {
-      const expanded = this.state.expanded;
-      const index = expanded.indexOf(id);
-      const newExpanded =
-        index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];
-      this.setState(() => ({ expanded: newExpanded }));
-      if (newExpanded.length === 3) {
-        this.setState(() => ({ allExpanded: true }));
-      } else if (newExpanded.length === 0) {
-        this.setState(() => ({ allExpanded: false }));
-      }
-    };
-
-    return (
-      <React.Fragment>
-        {this.renderToolbar()}
-        <br />
-        <br />
-        <DataList aria-label="Expandable data list example">
-          <DataListItem aria-labelledby="ex-item1" isExpanded={this.state.expanded.includes('ex-toggle1')}>
-            <DataListItemRow>
-              <DataListToggle
-                onClick={() => toggle('ex-toggle1')}
-                isExpanded={this.state.expanded.includes('ex-toggle1')}
-                id="ex-toggle1"
-                aria-controls="ex-expand1"
-              />
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell isIcon key="icon">
-                    <CodeBranchIcon />
-                  </DataListCell>,
-                  <DataListCell key="primary content">
-                    <div id="ex-item1">Primary content</div>
-                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-                    <a href="#">link</a>
-                  </DataListCell>,
-                  <DataListCell key="secondary content">
-                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-                  </DataListCell>,
-                  <DataListCell key="secondary content 2">
-                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-                  </DataListCell>
-                ]}
-              />
-              <DataListAction
-                aria-labelledby="ex-item1 ex-action1"
-                id="ex-action1"
-                aria-label="Actions"
-                isPlainButtonAction
-              >
-                <Dropdown
-                  isOpen={isOpen1}
-                  onSelect={this.onSelect1}
-                  popperProps={{ position: 'right' }}
-                  onOpenChange={(isOpen) => this.setState({ isOpen1: isOpen })}
-                  toggle={(toggleRef) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      onClick={this.onToggle1}
-                      isExpanded={isOpen1}
-                      variant="plain"
-                      aria-label="Primary content kebab toggle"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
-                  )}
-                >
-                  <DropdownList>
-                    <DropdownItem value={0} key="action1">
-                      Action
-                    </DropdownItem>
-                    <DropdownItem
-                      value={1}
-                      key="link1"
-                      to="#default-link2"
-                      // Prevent the default onClick functionality for example purposes
-                      onClick={(ev) => ev.preventDefault()}
-                    >
-                      Link
-                    </DropdownItem>
-                    <DropdownItem value={2} isDisabled key="disabled action1">
-                      Disabled Action
-                    </DropdownItem>
-                    <DropdownItem value={3} isDisabled key="disabled link1" to="#default-link4">
-                      Disabled Link
-                    </DropdownItem>
-                  </DropdownList>
-                </Dropdown>
-              </DataListAction>
-            </DataListItemRow>
-            <DataListContent
-              aria-label="Primary Content Details"
-              id="ex-expand1"
-              isHidden={!this.state.expanded.includes('ex-toggle1')}
-            >
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
-                dolore magna aliqua.
-              </p>
-            </DataListContent>
-          </DataListItem>
-          <DataListItem aria-labelledby="ex-item2" isExpanded={this.state.expanded.includes('ex-toggle2')}>
-            <DataListItemRow>
-              <DataListToggle
-                onClick={() => toggle('ex-toggle2')}
-                isExpanded={this.state.expanded.includes('ex-toggle2')}
-                id="ex-toggle2"
-                aria-controls="ex-expand2"
-              />
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell isIcon key="icon">
-                    <CodeBranchIcon />
-                  </DataListCell>,
-                  <DataListCell key="secondary content">
-                    <div id="ex-item2">Secondary content</div>
-                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-                  </DataListCell>,
-                  <DataListCell key="secondary content 2">
-                    <span>Lorem ipsum dolor sit amet.</span>
-                  </DataListCell>,
-                  <DataListCell key="secondary content3">
-                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-                  </DataListCell>
-                ]}
-              />
-              <DataListAction
-                aria-labelledby="ex-item2 ex-action2"
-                id="ex-action2"
-                aria-label="Actions"
-                isPlainButtonAction
-              >
-                <Dropdown
-                  isOpen={isOpen2}
-                  onSelect={this.onSelect2}
-                  popperProps={{ position: 'right' }}
-                  onOpenChange={(isOpen) => this.setState({ isOpen2: isOpen })}
-                  toggle={(toggleRef) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      onClick={this.onToggle2}
-                      isExpanded={isOpen2}
-                      variant="plain"
-                      aria-label="Secondary content kebab toggle"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
-                  )}
-                >
-                  <DropdownList>
-                    <DropdownItem value={0} key="action2">
-                      Action
-                    </DropdownItem>
-                    <DropdownItem
-                      value={1}
-                      key="link2"
-                      to="#default-link2"
-                      // Prevent the default onClick functionality for example purposes
-                      onClick={(ev) => ev.preventDefault()}
-                    >
-                      Link
-                    </DropdownItem>
-                    <DropdownItem value={2} isDisabled key="disabled action2">
-                      Disabled Action
-                    </DropdownItem>
-                    <DropdownItem value={3} isDisabled key="disabled link2" to="#default-link4">
-                      Disabled Link
-                    </DropdownItem>
-                  </DropdownList>
-                </Dropdown>
-              </DataListAction>
-            </DataListItemRow>
-            <DataListContent
-              aria-label="Primary Content Details"
-              id="ex-expand2"
-              isHidden={!this.state.expanded.includes('ex-toggle2')}
-            >
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
-                dolore magna aliqua.
-              </p>
-            </DataListContent>
-          </DataListItem>
-          <DataListItem aria-labelledby="ex-item3" isExpanded={this.state.expanded.includes('ex-toggle3')}>
-            <DataListItemRow>
-              <DataListToggle
-                onClick={() => toggle('ex-toggle3')}
-                isExpanded={this.state.expanded.includes('ex-toggle3')}
-                id="ex-toggle3"
-                aria-controls="ex-expand3"
-              />
-              <DataListItemCells
-                dataListCells={[
-                  <DataListCell isIcon key="icon">
-                    <CodeBranchIcon />
-                  </DataListCell>,
-                  <DataListCell key="tertiary content">
-                    <div id="ex-item3">Tertiary content</div>
-                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-                  </DataListCell>,
-                  <DataListCell key="secondary content">
-                    <span>Lorem ipsum dolor sit amet.</span>
-                  </DataListCell>,
-                  <DataListCell key="secondary content 2">
-                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
-                  </DataListCell>
-                ]}
-              />
-              <DataListAction
-                aria-labelledby="ex-item3 ex-action3"
-                id="ex-action3"
-                aria-label="Actions"
-                isPlainButtonAction
-              >
-                <Dropdown
-                  isOpen={isOpen3}
-                  onSelect={this.onSelect3}
-                  popperProps={{ position: 'right' }}
-                  onOpenChange={(isOpen) => this.setState({ isOpen3: isOpen })}
-                  toggle={(toggleRef) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      onClick={this.onToggle3}
-                      isExpanded={isOpen3}
-                      variant="plain"
-                      aria-label="Tertiary content kebab toggle"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
-                  )}
-                >
-                  <DropdownList>
-                    <DropdownItem value={0} key="action3">
-                      Action
-                    </DropdownItem>
-                    <DropdownItem
-                      value={1}
-                      key="link3"
-                      to="#default-link2"
-                      // Prevent the default onClick functionality for example purposes
-                      onClick={(ev) => ev.preventDefault()}
-                    >
-                      Link
-                    </DropdownItem>
-                    <DropdownItem value={2} isDisabled key="disabled action3">
-                      Disabled Action
-                    </DropdownItem>
-                    <DropdownItem value={3} isDisabled key="disabled link3" to="#default-link4">
-                      Disabled Link
-                    </DropdownItem>
-                  </DropdownList>
-                </Dropdown>
-              </DataListAction>
-            </DataListItemRow>
-            <DataListContent
-              aria-label="Primary Content Details"
-              id="ex-expand3"
-              isHidden={!this.state.expanded.includes('ex-toggle3')}
-              hasNoPadding
-            >
-              This expanded section has no padding.
-            </DataListContent>
-          </DataListItem>
-        </DataList>
-      </React.Fragment>
-    );
-  }
-}
+```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
 ```

package/src/demos/ExpandableSection/ExpandableSection.md

@@ -0,0 +1,17 @@
+---
+id: Expandable section
+section: components
+---
+
+## Demos
+
+
+### Expandable text with character truncation
+
+You can truncate long sections of text and add a "Show more" link that allows users to expand and view the full text content.
+
+To specify the number of characters shown prior to truncation, use a `<Truncate>` component and pass a `maxWidth` to the `style` attribute.
+
+```ts file='./examples/ExpandableTextDemo.tsx'
+
+```

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/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';
@@ -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>

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';
@@ -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>

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';
@@ -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>

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>

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>

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/Masthead.md

@@ -12,7 +12,7 @@ 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';
-import pfLogo from './assets/pf-logo.svg';
+import pfLogo from './assets/PF-HorizontalLogo-Color.svg';
 import { Link } from '@reach/router';
 
 ## Demos