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

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.21","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.23","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.21","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.23","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.21","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.23","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.22",
+  "version": "6.0.0-alpha.24",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.10",
-    "@patternfly/react-styles": "^6.0.0-alpha.10",
-    "@patternfly/react-tokens": "^6.0.0-alpha.10",
+    "@patternfly/react-icons": "^6.0.0-alpha.11",
+    "@patternfly/react-styles": "^6.0.0-alpha.11",
+    "@patternfly/react-tokens": "^6.0.0-alpha.11",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.66",
+    "@patternfly/patternfly": "6.0.0-alpha.69",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -73,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "86a75d22746d3f69d3fe8aec947d39213e8b60d4"
+  "gitHead": "8ea069949f2c22f8122ffecab5451f278edfb8f7"
 }

package/src/components/FileUpload/FileUpload.tsx

@@ -16,6 +16,10 @@ export interface FileUploadProps
   'aria-label'?: string;
   /** Text for the browse button. */
   browseButtonText?: string;
+  /** ID or ID's of elements that describe the browse button. Typically this should refer
+   * to elements such as helper text when there are file restrictions.
+   */
+  browseButtonAriaDescribedby?: string;
   /** Additional children to render after (or instead of) the file preview. */
   children?: React.ReactNode;
   /** Additional classes added to the file upload container element. */

package/src/components/FileUpload/FileUploadField.tsx

@@ -19,6 +19,10 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
   'aria-label'?: string;
   /** Text for the browse button. */
   browseButtonText?: string;
+  /** ID or ID's of elements that describe the browse button. Typically this should refer
+   * to elements such as helper text when there are file restrictions.
+   */
+  browseButtonAriaDescribedby?: string;
   /** Additional children to render after (or instead of) the file preview. */
   children?: React.ReactNode;
   /** Additional classes added to the file upload field container element. */
@@ -108,6 +112,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
   filenamePlaceholder = 'Drag a file here or browse to upload',
   filenameAriaLabel = filename ? 'Read only filename' : filenamePlaceholder,
   browseButtonText = 'Browse...',
+  browseButtonAriaDescribedby,
   clearButtonText = 'Clear',
   isClearButtonDisabled = !filename && !value,
   containerRef = null as React.Ref<HTMLDivElement>,
@@ -141,16 +146,15 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
               name={name || `${id}-filename`}
               aria-label={filenameAriaLabel}
               placeholder={filenamePlaceholder}
-              aria-describedby={`${id}-browse-button`}
               value={filename}
             />
           </InputGroupItem>
           <InputGroupItem>
             <Button
-              id={`${id}-browse-button`}
               variant={ButtonVariant.control}
               onClick={onBrowseButtonClick}
               isDisabled={isDisabled}
+              aria-describedby={browseButtonAriaDescribedby}
             >
               {browseButtonText}
             </Button>

package/src/components/FileUpload/FileUploadHelperText.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
+import { css } from '@patternfly/react-styles';
+
+/** A container for helper text content. This sub-component should be passed as a child to
+ * the main file upload or file upload field component.
+ */
+
+export interface FileUploadHelperTextProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content to render inside the file upload helper text container. Typically this will be
+   * the helper text component.
+   */
+  children: React.ReactNode;
+  /** Additional classes added to the file upload helper text container element. */
+  className?: string;
+}
+
+export const FileUploadHelperText: React.FunctionComponent<FileUploadHelperTextProps> = ({
+  children,
+  className,
+  ...props
+}: FileUploadHelperTextProps) => (
+  <div className={css(`${styles.fileUpload}__helper-text`, className)} {...props}>
+    {children}
+  </div>
+);
+FileUploadHelperText.displayName = 'FileUploadHelperText';

package/src/components/FileUpload/__tests__/FileUploadField.test.tsx

@@ -1,6 +1,6 @@
 import { FileUploadField } from '../FileUploadField';
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 test('simple fileuploadfield', () => {
   const browserBtnClickHandler = jest.fn();
@@ -25,3 +25,19 @@ test('simple fileuploadfield', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Renders without aria-describedby on browse button by default', () => {
+  render(<FileUploadField id="file-upload-field" browseButtonText="Upload" />);
+
+  expect(screen.getByRole('button', { name: 'Upload' })).not.toHaveAccessibleDescription();
+});
+
+test('Renders without aria-describedby on browse button by default', () => {
+  render(
+    <FileUploadField id="file-upload-field" browseButtonText="Upload" browseButtonAriaDescribedby="helper-text">
+      <div id="helper-text">Helper text</div>
+    </FileUploadField>
+  );
+
+  expect(screen.getByRole('button', { name: 'Upload' })).toHaveAccessibleDescription('Helper text');
+});

package/src/components/FileUpload/__tests__/FileUploadHelperText.test.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { FileUploadHelperText } from '../FileUploadHelperText';
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
+
+test(`Renders only with class ${styles.fileUpload}__helper-text by default`, () => {
+  render(<FileUploadHelperText>Content</FileUploadHelperText>);
+
+  expect(screen.getByText('Content')).toHaveClass(`${styles.fileUpload}__helper-text`, { exact: true });
+});
+
+test(`Renders with custom class when className is passed in`, () => {
+  render(<FileUploadHelperText className="test">Content</FileUploadHelperText>);
+
+  expect(screen.getByText('Content')).toHaveClass('test');
+});
+
+test(`Spreads props when passed in`, () => {
+  render(<FileUploadHelperText id="test-id">Content</FileUploadHelperText>);
+
+  expect(screen.getByText('Content')).toHaveAttribute('id', 'test-id');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<FileUploadHelperText>Content</FileUploadHelperText>);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -19,7 +19,6 @@ exports[`simple fileupload 1`] = `
             class="pf-v5-c-form-control pf-m-readonly"
           >
             <input
-              aria-describedby="simple-text-file-browse-button"
               aria-invalid="false"
               aria-label="Drag a file here or browse to upload"
               data-ouia-component-id="OUIA-Generated-TextInputBase-1"
@@ -43,7 +42,6 @@ exports[`simple fileupload 1`] = `
             data-ouia-component-id="OUIA-Generated-Button-control-1"
             data-ouia-component-type="PF5/Button"
             data-ouia-safe="true"
-            id="simple-text-file-browse-button"
             type="button"
           >
             Browse...

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -18,7 +18,6 @@ exports[`simple fileuploadfield 1`] = `
             class="pf-v5-c-form-control pf-m-readonly"
           >
             <input
-              aria-describedby="custom-file-upload-browse-button"
               aria-invalid="false"
               aria-label="Do something custom with this!"
               data-ouia-component-id="OUIA-Generated-TextInputBase-1"
@@ -42,7 +41,6 @@ exports[`simple fileuploadfield 1`] = `
             data-ouia-component-id="OUIA-Generated-Button-control-1"
             data-ouia-component-type="PF5/Button"
             data-ouia-safe="true"
-            id="custom-file-upload-browse-button"
             type="button"
           >
             Browse...

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadHelperText.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-file-upload__helper-text"
+  >
+    Content
+  </div>
+</DocumentFragment>
+`;

package/src/components/FileUpload/examples/FileUpload.md

@@ -7,6 +7,7 @@ subsection: file-upload
 ---
 
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 ## Examples
 
@@ -22,11 +23,18 @@ Pressing _Clear_ button triggers `onClearClick` event.
 ```ts file="./FileUploadSimpleText.tsx"
 ```
 
-A user can always type instead of selecting a file, but by default, once a user selects a text file from their disk they are not allowed to edit it (to prevent unintended changes to a format-sensitive file). This behavior can be changed with the `allowEditingUploadedText` prop.
-Typing/pasting text in the box will call `onTextChange` with a string, and a string value is expected for the `value` prop. :
+### With helper text
+
+You can pass in the `<FileUploadHelperText` sub-component via the `children` property to `<FileUpload>`.
+
+```ts file="./FileUploadWithHelperText.tsx"
+```
 
 ### Text file with edits allowed
 
+A user can always type instead of selecting a file, but by default, once a user selects a text file from their disk they are not allowed to edit it (to prevent unintended changes to a format-sensitive file). This behavior can be changed with the `allowEditingUploadedText` prop.
+Typing/pasting text in the box will call `onTextChange` with a string, and a string value is expected for the `value` prop. :
+
 ```ts file="./FileUploadTextWithEdits.tsx"
 ```
 

package/src/components/FileUpload/examples/FileUploadCustomPreview.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FileUpload } from '@patternfly/react-core';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
-import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const [value, setValue] = React.useState<File>();
@@ -29,7 +28,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
       browseButtonText="Upload"
     >
       {value && (
-        <div className={spacing.mMd}>
+        <div>
           <FileUploadIcon width="2em" height="2em" /> Custom preview here for your {value.size}-byte file named{' '}
           {value.name}
         </div>

package/src/components/FileUpload/examples/FileUploadCustomUpload.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { FileUploadField, Checkbox } from '@patternfly/react-core';
-import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { FileUploadField, FileUploadHelperText, HelperText, HelperTextItem, Checkbox } from '@patternfly/react-core';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const properties = [
@@ -9,7 +8,8 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
     'isDragActive',
     'isLoading',
     'hideDefaultPreview',
-    'children',
+    'hasCustomFilePreview',
+    'hasHelperText',
     'hasPlaceholderText'
   ];
 
@@ -19,7 +19,8 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const [isLoading, setIsLoading] = React.useState(false);
   const [isDragActive, setIsDragActive] = React.useState(false);
   const [hideDefaultPreview, setHideDefaultPreview] = React.useState(false);
-  const [children, setChildren] = React.useState(false);
+  const [hasCustomFilePreview, setHasCustomFilePreview] = React.useState(false);
+  const [hasHelperText, setHasHelperText] = React.useState(false);
   const [hasPlaceholderText, setHasPlaceholderText] = React.useState(false);
   const [checkedState, setCheckedState] = React.useState([
     filename,
@@ -27,7 +28,8 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
     isLoading,
     isDragActive,
     hideDefaultPreview,
-    children,
+    hasCustomFilePreview,
+    hasHelperText,
     hasPlaceholderText
   ]);
 
@@ -68,8 +70,12 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
         }
         break;
 
-      case 'children':
-        checked ? setChildren(true) : setChildren(false);
+      case 'hasCustomFilePreview':
+        checked ? setHasCustomFilePreview(true) : setHasCustomFilePreview(false);
+        break;
+
+      case 'hasHelperText':
+        checked ? setHasHelperText(true) : setHasHelperText(false);
         break;
 
       case 'hasPlaceholderText':
@@ -108,10 +114,16 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
         isDragActive={isDragActive}
         hideDefaultPreview={hideDefaultPreview}
         browseButtonText="Upload"
+        browseButtonAriaDescribedby={hasHelperText ? 'custom-upload-helpText' : undefined}
         textAreaPlaceholder={hasPlaceholderText ? 'File preview' : ''}
       >
-        {children && (
-          <div className={spacing.mMd}>(A custom preview of the uploaded file can be passed as children)</div>
+        {hasCustomFilePreview && <div>(A custom preview of the uploaded file can be passed as children)</div>}
+        {hasHelperText && (
+          <FileUploadHelperText>
+            <HelperText>
+              <HelperTextItem id="custom-upload-helpText">Upload a CSV file</HelperTextItem>
+            </HelperText>
+          </FileUploadHelperText>
         )}
       </FileUploadField>
     </div>

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import {
   FileUpload,
+  FileUploadHelperText,
   Form,
   FormGroup,
-  FormHelperText,
   HelperText,
   HelperTextItem,
-  DropEvent
+  DropEvent,
+  Icon
 } from '@patternfly/react-core';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
@@ -68,14 +70,25 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
           }}
           validated={isRejected ? 'error' : 'default'}
           browseButtonText="Upload"
-        />
-        <FormHelperText>
-          <HelperText>
-            <HelperTextItem variant={isRejected ? 'error' : 'default'}>
-              {isRejected ? 'Must be a CSV file no larger than 1 KB' : 'Upload a CSV file'}
-            </HelperTextItem>
-          </HelperText>
-        </FormHelperText>
+          browseButtonAriaDescribedby="restricted-file-example-helpText"
+        >
+          <FileUploadHelperText>
+            <HelperText isLiveRegion>
+              <HelperTextItem id="restricted-file-example-helpText" variant={isRejected ? 'error' : 'default'}>
+                {isRejected ? (
+                  <>
+                    <Icon status="danger">
+                      <ExclamationCircleIcon />
+                    </Icon>
+                    Must be a CSV file no larger than 1 KB
+                  </>
+                ) : (
+                  'Upload a CSV file'
+                )}
+              </HelperTextItem>
+            </HelperText>
+          </FileUploadHelperText>
+        </FileUpload>
       </FormGroup>
     </Form>
   );

package/src/components/FileUpload/examples/FileUploadWithHelperText.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { FileUpload, FileUploadHelperText, HelperText, HelperTextItem, DropEvent } from '@patternfly/react-core';
+
+export const FileUploadWithHelperText: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [filename, setFilename] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const handleFileInputChange = (_, file: File) => {
+    setFilename(file.name);
+  };
+
+  const handleTextChange = (_event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => {
+    setValue(value);
+  };
+
+  const handleDataChange = (_event: DropEvent, value: string) => {
+    setValue(value);
+  };
+
+  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setFilename('');
+    setValue('');
+  };
+
+  const handleFileReadStarted = (_event: DropEvent, _fileHandle: File) => {
+    setIsLoading(true);
+  };
+
+  const handleFileReadFinished = (_event: DropEvent, _fileHandle: File) => {
+    setIsLoading(false);
+  };
+
+  return (
+    <FileUpload
+      id="file-upload-helper-text"
+      type="text"
+      value={value}
+      filename={filename}
+      filenamePlaceholder="Drag and drop a file or upload one"
+      onFileInputChange={handleFileInputChange}
+      onDataChange={handleDataChange}
+      onTextChange={handleTextChange}
+      onReadStarted={handleFileReadStarted}
+      onReadFinished={handleFileReadFinished}
+      onClearClick={handleClear}
+      isLoading={isLoading}
+      allowEditingUploadedText={false}
+      browseButtonText="Upload"
+      browseButtonAriaDescribedby="helper-text-example-helpText"
+    >
+      <FileUploadHelperText>
+        <HelperText>
+          <HelperTextItem id="helper-text-example-helpText">Upload a CSV file</HelperTextItem>
+        </HelperText>
+      </FileUploadHelperText>
+    </FileUpload>
+  );
+};

package/src/components/FileUpload/index.ts

@@ -1,2 +1,3 @@
 export * from './FileUploadField';
 export * from './FileUpload';
+export * from './FileUploadHelperText';

package/src/components/Tabs/TabContent.tsx

@@ -27,10 +27,10 @@ export interface TabContentProps extends Omit<React.HTMLProps<HTMLElement>, 'ref
   ouiaSafe?: boolean;
 }
 
-// TODO: Update with issue #9909
-// const variantStyle = {
-//   default: ''
-// };
+const variantStyle = {
+  default: '',
+  secondary: styles.modifiers.secondary
+};
 
 const TabContentBase: React.FunctionComponent<TabContentProps> = ({
   id,
@@ -56,27 +56,30 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({
 
     return (
       <TabsContextConsumer>
-        {({ variant }: TabsContextProps) => (
-          <section
-            ref={innerRef}
-            hidden={children ? null : child.props.eventKey !== activeKey}
-            // TODO: Update "variant" with issue #9909
-            className={
-              children
-                ? css(styles.tabContent, className, variant)
-                : css(styles.tabContent, child.props.className, variant)
-            }
-            id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
-            aria-label={ariaLabel}
-            aria-labelledby={labelledBy}
-            role="tabpanel"
-            tabIndex={0}
-            {...getOUIAProps('TabContent', ouiaId, ouiaSafe)}
-            {...props}
-          >
-            {children || child.props.children}
-          </section>
-        )}
+        {({ variant }: TabsContextProps) => {
+          const variantClass = variantStyle[variant];
+
+          return (
+            <section
+              ref={innerRef}
+              hidden={children ? null : child.props.eventKey !== activeKey}
+              className={
+                children
+                  ? css(styles.tabContent, className, variantClass)
+                  : css(styles.tabContent, child.props.className, variantClass)
+              }
+              id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
+              aria-label={ariaLabel}
+              aria-labelledby={labelledBy}
+              role="tabpanel"
+              tabIndex={0}
+              {...getOUIAProps('TabContent', ouiaId, ouiaSafe)}
+              {...props}
+            >
+              {children || child.props.children}
+            </section>
+          );
+        }}
       </TabsContextConsumer>
     );
   }

package/src/components/Tabs/TabTitleIcon.tsx

@@ -14,7 +14,7 @@ export const TabTitleIcon: React.FunctionComponent<TabTitleIconProps> = ({
   className = '',
   ...props
 }: TabTitleIconProps) => (
-  <span className={css(styles.tabsItemIcon, className)} {...props}>
+  <span className={css(`${styles.tabs}__item-icon`, className)} {...props}>
     {children}
   </span>
 );