@patternfly/react-core 6.0.0-alpha.24 → 6.0.0-alpha.25

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.23","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.24","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.23","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.24","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.23","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.24","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.24",
+  "version": "6.0.0-alpha.25",
   "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",
@@ -73,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "8ea069949f2c22f8122ffecab5451f278edfb8f7"
+  "gitHead": "251bb4ff8328de0dd6b6b6302329e6b15854b802"
 }

package/src/components/Brand/examples/Brand.css

@@ -0,0 +1,12 @@
+.show-dark,
+:where(.pf-v5-theme-dark) .show-light {
+  display: none;
+}
+
+:where(.pf-v5-theme-dark) .show-dark {
+  display: revert;
+}
+
+:where(.pf-v5-theme-dark) .show-dark .pf-m-picture {
+  display: inline-flex;
+}

package/src/components/Brand/examples/Brand.md

@@ -5,16 +5,18 @@ cssPrefix: null
 propComponents: ['Brand']
 ---
 
-import pfLogo from '../../assets/pfLogo.svg';
-import logoXl from '../../assets/pf-c-brand--logo-on-xl.svg';
-import logoLg from '../../assets/pf-c-brand--logo-on-lg.svg';
-import logoMd from '../../assets/pf-c-brand--logo-on-md.svg';
-import logoSm from '../../assets/pf-c-brand--logo-on-sm.svg';
-import logo from '../../assets/pf-c-brand--logo.svg';
-import logoBase from '../../assets/pf-c-brand--logo-base.jpg';
+import './Brand.css';
+import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
+import pfLogoDark from '../../assets/PF-HorizontalLogo-Reverse.svg';
+import pfLogoSm from '../../assets/PF-IconLogo-color.svg';
+import pfLogoSmDark from '../../assets/PF-IconLogo-Reverse.svg';
 
 ## Examples
 
+The brand component does not have any built-in theme support. If a brand should be dynamically styled, you must manually set up the necessary logic on your own.
+
+These examples adjust styling when the PatternFly website is toggled between the light and dark theme.
+
 ### Basic
 
 ```ts file="./BrandBasic.tsx"

package/src/components/Brand/examples/BrandBasic.tsx

@@ -1,7 +1,15 @@
 import React from 'react';
 import { Brand } from '@patternfly/react-core';
-import pfLogo from '../../assets/pfLogo.svg';
+import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
+import pfLogoDark from '../../assets/PF-HorizontalLogo-Reverse.svg';
 
 export const BrandBasic: React.FunctionComponent = () => (
-  <Brand src={pfLogo} alt="Patternfly Logo" widths={{ default: '200px', md: '400px', xl: '600px' }} />
+  <>
+    <div className="show-light">
+      <Brand src={pfLogo} alt="Patternfly" widths={{ default: '200px', md: '400px', xl: '600px' }} />
+    </div>
+    <div className="show-dark">
+      <Brand src={pfLogoDark} alt="Patternfly" widths={{ default: '200px', md: '400px', xl: '600px' }} />
+    </div>
+  </>
 );

package/src/components/Brand/examples/BrandResponsive.tsx

@@ -1,19 +1,32 @@
 import React from 'react';
 import { Brand } from '@patternfly/react-core';
-import logoXl from '../../assets/pf-c-brand--logo-on-xl.svg';
 
-import logoLg from '../../assets/pf-c-brand--logo-on-lg.svg';
-import logoMd from '../../assets/pf-c-brand--logo-on-md.svg';
-import logoSm from '../../assets/pf-c-brand--logo-on-sm.svg';
-import logo from '../../assets/pf-c-brand--logo.svg';
-import logoBase from '../../assets/pf-c-brand--logo-base.jpg';
+import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
+import pfLogoDark from '../../assets/PF-HorizontalLogo-Reverse.svg';
+import pfLogoSm from '../../assets/PF-IconLogo-color.svg';
+import pfLogoSmDark from '../../assets/PF-IconLogo-Reverse.svg';
 
 export const BrandBasic: React.FunctionComponent = () => (
-  <Brand src={logoBase} alt="Fallback patternfly default logo" widths={{ default: '40px', sm: '60px', md: '220px' }}>
-    <source media="(min-width: 1200px)" srcSet={logoXl} />
-    <source media="(min-width: 992px)" srcSet={logoLg} />
-    <source media="(min-width: 768px)" srcSet={logoMd} />
-    <source media="(min-width: 576px)" srcSet={logoSm} />
-    <source srcSet={logo} />
-  </Brand>
+  <>
+    <div className="show-light">
+      <Brand src={pfLogo} alt="Patternfly" widths={{ default: '40px', sm: '60px', md: '220px' }}>
+        <source media="(min-width: 1200px)" srcSet={pfLogo} />
+        <source media="(min-width: 992px)" srcSet={pfLogo} />
+        <source media="(min-width: 768px)" srcSet={pfLogo} />
+        <source media="(min-width: 576px)" srcSet={pfLogoSm} />
+        <source media="(min-width: 320px)" srcSet={pfLogoSm} />
+        <source srcSet={pfLogo} />
+      </Brand>
+    </div>
+    <div className="show-dark">
+      <Brand src={pfLogoDark} alt="Patternfly" widths={{ default: '40px', sm: '60px', md: '220px' }}>
+        <source media="(min-width: 1200px)" srcSet={pfLogoDark} />
+        <source media="(min-width: 992px)" srcSet={pfLogoDark} />
+        <source media="(min-width: 768px)" srcSet={pfLogoDark} />
+        <source media="(min-width: 576px)" srcSet={pfLogoSmDark} />
+        <source media="(min-width: 320px)" srcSet={pfLogoSmDark} />
+        <source srcSet={pfLogoDark} />
+      </Brand>
+    </div>
+  </>
 );

package/src/components/Button/__tests__/Button.test.tsx

@@ -55,7 +55,7 @@ test('Renders with class pf-m-block when isBlock = true', () => {
   expect(screen.getByRole('button')).toHaveClass('pf-m-block');
 });
 
-xtest('Renders with class pf-m-clicked when isClicked = true', () => {
+test('Renders with class pf-m-clicked when isClicked = true', () => {
   render(<Button isClicked>Clicked Button</Button>);
   expect(screen.getByRole('button')).toHaveClass('pf-m-clicked');
 });

package/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Renders basic button 1`] = `
     aria-disabled="false"
     aria-label="basic button"
     class="pf-v5-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-27"
+    data-ouia-component-id="OUIA-Generated-Button-primary-28"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/HelperText/HelperTextItem.tsx

@@ -6,6 +6,13 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
+export enum HelperTextItemVariant {
+  default = 'default',
+  warning = 'warning',
+  error = 'error',
+  success = 'success'
+}
+
 export interface HelperTextItemProps extends React.HTMLProps<HTMLDivElement | HTMLLIElement> {
   /** Content rendered inside the helper text item. */
   children?: React.ReactNode;
@@ -13,34 +20,28 @@ export interface HelperTextItemProps extends React.HTMLProps<HTMLDivElement | HT
   className?: string;
   /** Sets the component type of the helper text item. */
   component?: 'div' | 'li';
-  /** Variant styling of the helper text item. */
+  /** Variant styling of the helper text item. Will also render a default icon, which can be overridden
+   * with the icon prop.
+   */
   variant?: 'default' | 'indeterminate' | 'warning' | 'success' | 'error';
-  /** Custom icon prefixing the helper text. This property will override the default icon paired with each helper text variant. */
+  /** Custom icon prefixing the helper text. This property will override the default icon when the variant property is passed in. */
   icon?: React.ReactNode;
-  /** Flag indicating the helper text item is dynamic. This prop should be used when the
-   * text content of the helper text item will never change, but the icon and styling will
-   * be dynamically updated via the `variant` prop.
-   */
-  isDynamic?: boolean;
-  /** Flag indicating the helper text should have an icon. Dynamic helper texts include icons by default while static helper texts do not. */
-  hasIcon?: boolean;
   /** ID for the helper text item. The value of this prop can be passed into a form component's
    * aria-describedby prop when you intend for only specific helper text items to be announced to
    * assistive technologies.
    */
   id?: string;
-  /** Text that is only accessible to screen readers in order to announce the status of a helper text item.
-   * This prop can only be used when the isDynamic prop is also passed in.
+  /** Text that is only accessible to screen readers in order to announce the variant of a helper text item.
+   * This prop can only be used when the variant prop has a value other than "default".
    */
   screenReaderText?: string;
 }
 
-const variantStyle = {
-  default: '',
-  indeterminate: styles.modifiers.indeterminate,
-  warning: styles.modifiers.warning,
-  success: styles.modifiers.success,
-  error: styles.modifiers.error
+const defaultVariantIcons = {
+  indeterminate: <MinusIcon />,
+  warning: <ExclamationTriangleIcon />,
+  success: <CheckCircleIcon />,
+  error: <ExclamationCircleIcon />
 };
 
 export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({
@@ -49,36 +50,28 @@ export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({
   component = 'div',
   variant = 'default',
   icon,
-  isDynamic = false,
-  hasIcon = isDynamic,
   id,
   screenReaderText = `${variant} status`,
   ...props
 }: HelperTextItemProps) => {
   const Component = component as any;
+  const isNotDefaultVariant = variant !== 'default';
+  const defaultIcon = isNotDefaultVariant && defaultVariantIcons[variant];
   return (
     <Component
-      className={css(styles.helperTextItem, variantStyle[variant], isDynamic && styles.modifiers.dynamic, className)}
+      className={css(styles.helperTextItem, isNotDefaultVariant && styles.modifiers[variant], className)}
       id={id}
       {...props}
     >
-      {icon && (
-        <span className={css(styles.helperTextItemIcon)} aria-hidden>
-          {icon}
-        </span>
-      )}
-      {hasIcon && !icon && (
+      {(defaultIcon || icon) && (
         <span className={css(styles.helperTextItemIcon)} aria-hidden>
-          {(variant === 'default' || variant === 'indeterminate') && <MinusIcon />}
-          {variant === 'warning' && <ExclamationTriangleIcon />}
-          {variant === 'success' && <CheckCircleIcon />}
-          {variant === 'error' && <ExclamationCircleIcon />}
+          {icon || defaultIcon}
         </span>
       )}
 
       <span className={css(styles.helperTextItemText)}>
         {children}
-        {isDynamic && <span className="pf-v5-screen-reader">: {screenReaderText};</span>}
+        {isNotDefaultVariant && <span className="pf-v5-screen-reader">: {screenReaderText};</span>}
       </span>
     </Component>
   );

package/src/components/HelperText/__tests__/HelperTextItem.test.tsx

@@ -30,6 +30,12 @@ test('Renders custom className', () => {
   expect(screen.getByText('help test text 1').parentElement).toHaveClass('custom');
 });
 
+test('Does not render screen reader text by default', () => {
+  render(<HelperTextItem>help test text 1</HelperTextItem>);
+
+  expect(screen.queryByText('status', { exact: false })).not.toBeInTheDocument();
+});
+
 Object.values(['indeterminate', 'warning', 'success', 'error']).forEach((variant) => {
   test(`Renders with class ${styles.modifiers[variant]} when variant = ${variant}`, () => {
     render(
@@ -39,6 +45,26 @@ Object.values(['indeterminate', 'warning', 'success', 'error']).forEach((variant
     );
     expect(screen.getByText('text').parentElement).toHaveClass(styles.modifiers[variant]);
   });
+
+  test(`Renders default screenreader text when variant = ${variant}`, () => {
+    render(
+      <HelperTextItem variant={variant as 'default' | 'indeterminate' | 'warning' | 'success' | 'error'}>
+        text
+      </HelperTextItem>
+    );
+    expect(screen.getByText(`: ${variant} status;`)).toBeInTheDocument();
+  });
+});
+
+test('Renders custom screen reader text', () => {
+  render(
+    <HelperTextItem variant="error" screenReaderText="danger">
+      help test text 1
+    </HelperTextItem>
+  );
+
+  expect(screen.queryByText(': error status;')).not.toBeInTheDocument();
+  expect(screen.getByText(': danger;')).toBeInTheDocument();
 });
 
 test('Renders id when id is passed', () => {
@@ -56,38 +82,26 @@ test('Renders with element passed to component prop', () => {
   expect(screen.getByText('help test text 1').parentElement?.tagName).toBe('LI');
 });
 
-test('Renders custom icon', () => {
-  render(<HelperTextItem icon={<div>test</div>}>help test text</HelperTextItem>);
-  expect(screen.getByText('test').parentElement).toHaveClass(styles.helperTextItemIcon);
-});
-
-test('Renders default icon when hasIcon = true and icon is not passed', () => {
-  render(<HelperTextItem hasIcon>help test text</HelperTextItem>);
-  expect(screen.getByText('help test text').parentElement?.querySelector('span')).toHaveClass(
-    styles.helperTextItemIcon
-  );
+test('Does not render an icon by default', () => {
+  render(<HelperTextItem>help test text</HelperTextItem>);
+  expect(screen.queryByText('help test text')?.previousSibling).not.toBeInTheDocument();
 });
 
-test('Renders custom icon when icon is passed and hasIcon = true', () => {
-  render(
-    <HelperTextItem hasIcon icon={<div>test</div>}>
-      help test text
-    </HelperTextItem>
-  );
-  expect(screen.getByText('test').parentElement).toHaveClass(styles.helperTextItemIcon);
+test('Renders a default icon when variant is passed and icon is not passed', () => {
+  render(<HelperTextItem variant="success">help test text</HelperTextItem>);
+  expect(screen.getByText('help test text').previousSibling).toHaveClass(styles.helperTextItemIcon);
 });
 
-test('Renders dynamic helper text', () => {
-  render(<HelperTextItem isDynamic>help test text</HelperTextItem>);
-  expect(screen.getByText('help test text').parentElement).toHaveClass(styles.modifiers.dynamic);
-  expect(screen.getByText('help test text').querySelector('span')).toHaveClass('pf-v5-screen-reader');
+test('Renders custom icon when icon prop is passed', () => {
+  render(<HelperTextItem icon={<div>icon content</div>}>help test text</HelperTextItem>);
+  expect(screen.getByText('icon content').parentElement).toHaveClass(styles.helperTextItemIcon);
 });
 
-test('Renders custom screenreader text when isDynamic = true and screenReaderText is passed', () => {
+test('Renders custom icon instead of variant icon when icon and variant are passed', () => {
   render(
-    <HelperTextItem isDynamic screenReaderText="sr test">
+    <HelperTextItem icon={<div>icon content</div>} variant="success">
       help test text
     </HelperTextItem>
   );
-  expect(screen.getByText('help test text').querySelector('span')).toHaveTextContent('sr test');
+  expect(screen.getByText('icon content').parentElement).toHaveClass(styles.helperTextItemIcon);
 });

package/src/components/HelperText/examples/HelperText.md

@@ -13,32 +13,22 @@ import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-
 
 ## Examples
 
-### Static
+### Basic
 
-```ts file="HelperTextStatic.tsx"
-```
-
-### Static with default icons
+```ts file="HelperTextBasic.tsx"
 
-```ts file="HelperTextStaticWithDefaultIcon.tsx"
 ```
 
-### Static with custom icons
+### With custom icons
 
-```ts file="HelperTextStaticWithCustomIcon.tsx"
-```
+```ts file="HelperTextWithCustomIcon.tsx"
 
-### Multiple static
-
-```ts file="HelperTextMultipleStatic.tsx"
 ```
 
-### Dynamic
+### Multiple items
 
-```ts file="HelperTextDynamic.tsx"
-```
+You can pass multiple `<HelperTextItem>` components inside a single `<Helpertext>` container.
 
-### Dynamic list
+```ts file="HelperTextMultipleItems.tsx"
 
-```ts file="HelperTextDynamicList.tsx"
 ```

package/src/components/HelperText/examples/{HelperTextStatic.tsx → HelperTextBasic.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HelperText, HelperTextItem } from '@patternfly/react-core';
 
-export const HelperTextStatic: React.FunctionComponent = () => (
+export const HelperTextBasic: React.FunctionComponent = () => (
   <React.Fragment>
     <HelperText>
       <HelperTextItem>This is default helper text</HelperTextItem>

package/src/components/HelperText/examples/HelperTextMultipleItems.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextMultipleItems: React.FunctionComponent = () => (
+  <HelperText component="ul">
+    <HelperTextItem component="li">This is default helper text</HelperTextItem>
+    <HelperTextItem component="li">This is another default helper text in the same HelperText block</HelperTextItem>
+    <HelperTextItem component="li">And this is more default text in the same HelperText block</HelperTextItem>
+  </HelperText>
+);

package/src/components/HelperText/examples/{HelperTextStaticWithCustomIcon.tsx → HelperTextWithCustomIcon.tsx}

@@ -6,7 +6,7 @@ import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
-export const HelperTextStaticWithCustomIcon: React.FunctionComponent = () => (
+export const HelperTextWithCustomIcon: React.FunctionComponent = () => (
   <React.Fragment>
     <HelperText>
       <HelperTextItem icon={<InfoIcon />}>This is default helper text</HelperTextItem>

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -63,7 +63,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
     if (fileUploadShouldFail) {
       const corruptedFiles = files.map((file) => ({ ...file, lastModified: 'foo' as unknown as number }));
       // eslint-disable-next-line
-      setCurrentFiles((prevFiles) => [...prevFiles, ...corruptedFiles as any]);
+      setCurrentFiles((prevFiles) => [...prevFiles, ...(corruptedFiles as any)]);
     } else {
       setCurrentFiles((prevFiles) => [...prevFiles, ...files]);
     }
@@ -101,7 +101,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
     if (fileResult?.loadError) {
       return (
         <HelperText isLiveRegion>
-          <HelperTextItem variant={'error'}>{fileResult.loadError.toString()}</HelperTextItem>
+          <HelperTextItem variant="error">{fileResult.loadError.toString()}</HelperTextItem>
         </HelperText>
       );
     }

package/src/components/assets/PF-HorizontalLogo-Reverse.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-HorizontalLogo-Reverse </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-HorizontalLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(-0.000000, 0.000000)">
+            <path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.401297433"></path>
+            <path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
+        </g>
+        <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
+            <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
+            <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
+            <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
+            <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
+            <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
+            <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
+            <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+            <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+            <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
+        </g>
+    </g>
+</svg>

package/src/components/assets/PF-IconLogo-Reverse.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="158px" height="158px" viewBox="0 0 158 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-IconLogo-Reverse </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-IconLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group">
+            <path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.4"></path>
+            <path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
+        </g>
+    </g>
+</svg>

package/src/components/assets/PF-IconLogo-color.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="158px" height="158px" viewBox="0 0 158 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-IconLogo-color </title>
+    <defs>
+        <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#2B9AF3" offset="0%"></stop>
+            <stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-IconLogo-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Logo">
+            <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" id="Rectangle-Copy-17" fill="#0066CC"></path>
+            <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" id="Path-2" fill="url(#linearGradient-1)"></path>
+            <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" id="Path-2" fill="url(#linearGradient-1)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
+        </g>
+    </g>
+</svg>

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/examples/HelperText/{HelperTextStaticVariantDynamicText.tsx → HelperTextDynamic.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
 
-export const HelperTextStaticVariantDynamicText: React.FunctionComponent = () => {
+export const HelperTextDynamic: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
   const [inputValidation, setInputValidation] = React.useState('default');
 
@@ -35,7 +35,7 @@ export const HelperTextStaticVariantDynamicText: React.FunctionComponent = () =>
         <FormHelperText>
           <HelperText id="helper-text2" aria-live="polite">
             {inputValidation !== 'success' && (
-              <HelperTextItem variant={inputValidation as any} hasIcon={inputValidation === 'error'}>
+              <HelperTextItem variant={inputValidation as any}>
                 {inputValidation === 'default' ? 'Please enter a username' : 'Username already exists'}
               </HelperTextItem>
             )}

package/src/demos/examples/HelperText/{HelperTextStaticVariantStaticText.tsx → HelperTextStatic.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
 
-export const HelperTextStaticVariantStaticText: React.FunctionComponent = () => {
+export const HelperTextStaticText: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
 
   const handleInputChange = (_event, inputValue: string) => {
@@ -21,7 +21,7 @@ export const HelperTextStaticVariantStaticText: React.FunctionComponent = () =>
         />
         <FormHelperText>
           <HelperText id="helper-text1">
-            <HelperTextItem variant={'default'}>Enter your middle name or your middle initial</HelperTextItem>
+            <HelperTextItem>Enter your middle name or your middle initial</HelperTextItem>
           </HelperText>
         </FormHelperText>
       </FormGroup>