npm - @patternfly/react-core - Versions diffs - 5.0.0-alpha.48 → 5.0.0-alpha.49 - Mend

@patternfly/react-core 5.0.0-alpha.48 → 5.0.0-alpha.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.48",
+  "version": "5.0.0-alpha.49",
   "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",
@@ -45,12 +45,12 @@
     "subpaths": "node scripts/createSubpaths.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.0.0-alpha.6",
+    "@patternfly/react-icons": "^5.0.0-alpha.7",
     "@patternfly/react-styles": "^5.0.0-alpha.5",
     "@patternfly/react-tokens": "^5.0.0-alpha.5",
-    "focus-trap": "6.9.2",
+    "focus-trap": "7.4.0",
     "react-dropzone": "^14.2.3",
-    "tslib": "^2.0.0"
+    "tslib": "^2.5.0"
   },
   "devDependencies": {
     "@patternfly/patternfly": "5.0.0-alpha.33",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "febfd27ce11f0858e9f6f333fb8703c31ae52e3f"
+  "gitHead": "ab1d27353a3aed7cc3c2b83c4278edc66a63c2de"
 }

package/src/components/ApplicationLauncher/examples/ApplicationLauncher.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Application launcher
 section: components
+subsection: menus
 cssPrefix: pf-c-app-launcher
 propComponents: ['ApplicationLauncher', 'ApplicationLauncherItem', 'ApplicationLauncherContent']
 ouia: true

package/src/components/Backdrop/Backdrop.tsx CHANGED Viewed

@@ -3,9 +3,9 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 export interface BackdropProps extends React.HTMLProps<HTMLDivElement> {
-  /** content rendered inside the backdrop */
+  /** Content rendered inside the backdrop */
   children?: React.ReactNode;
-  /** additional classes added to the button */
+  /** Additional classes added to the backdrop */
   className?: string;
 }

package/src/components/Backdrop/examples/Backdrop.md CHANGED Viewed

@@ -11,8 +11,3 @@ propComponents: ['Backdrop']
 ```ts isFullscreen file="./BackdropBasic.tsx"
 ```
-### With spinner
-```ts isFullscreen file="./BackdropSpinner.tsx"
-```

package/src/components/CalendarMonth/examples/CalendarMonth.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Calendar month
 section: components
+subsection: date-and-time
 cssPrefix: pf-c-calendar-month
 propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps']
 ---

package/src/components/Checkbox/examples/Checkbox.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Checkbox
 section: components
+subsection: forms
 cssPrefix: pf-c-check
 propComponents: ['Checkbox']
 ---

package/src/components/DatePicker/examples/DatePicker.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Date picker
 section: components
+subsection: date-and-time
 cssPrefix: pf-c-date-picker
 propComponents: ['DatePicker', 'CalendarFormat', 'DatePickerRef']
 beta: true

package/src/components/Dropdown/examples/Dropdown.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Dropdown
 section: components
+subsection: menus
 cssPrefix: pf-c-menu
 propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList', 'MenuToggle']
 beta: true

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

@@ -1,15 +1,16 @@
 ---
-id: File upload
+id: Simple file upload
 cssPrefix: pf-c-file-upload
 propComponents: ['FileUpload', 'FileUploadField']
 section: components
+subsection: file-upload
 ---
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
 ## Examples
-The basic `FileUpload` component can accept a file via browse or drag-and-drop, and behaves like a standard form field with its `value` and `onFileInputChange` event that is similar to `<input onChange="...">` prop. The `type` prop determines how the `FileUpload` component behaves upon accepting a file, what type of value it passes to its `onDataChange` event.
+The `FileUpload` component can accept a file via browse or drag-and-drop, and behaves like a standard form field with its `value` and `onFileInputChange` event that is similar to `<input onChange="...">` prop. The `type` prop determines how the `FileUpload` component behaves upon accepting a file, what type of value it passes to its `onDataChange` event.
 ### Text files

package/src/components/Form/examples/Form.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Form
 section: components
+subsection: forms
 cssPrefix: pf-c-form
 propComponents:
   [

package/src/components/FormSelect/examples/FormSelect.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Form select
 section: components
+subsection: forms
 cssPrefix: pf-c-form-control
 propComponents: ['FormSelect', 'FormSelectOption', 'FormSelectOptionGroup']
 ouia: true

package/src/components/Menu/examples/Menu.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Menu
 section: components
+subsection: menus
 cssPrefix: pf-c-menu
 propComponents: ['Menu', 'MenuList', 'MenuItem', 'MenuItemAction', 'MenuContent', 'MenuInput', 'MenuGroup']
 ouia: true

package/src/components/MenuToggle/examples/MenuToggle.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Menu toggle
 section: components
+subsection: menus
 cssPrefix: pf-c-menu-toggle
 propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox', 'SplitButtonOptions']
 ---

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
-id: File upload - multiple
+id: Multiple file upload
 section: components
+subsection: file-upload
 cssPrefix: pf-c-multiple-file-upload
 propComponents:
   ['MultipleFileUpload', 'MultipleFileUploadMain', 'MultipleFileUploadStatus', 'MultipleFileUploadStatusItem']
@@ -8,7 +9,7 @@ propComponents:
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
-File upload - multiple is able to:
+Multiple file upload is able to:
 - Accept one or more files via browse or drag-and-drop
 - Provide their data to you using file objects via the `onFileDrop` callback prop

package/src/components/Progress/ProgressContainer.tsx CHANGED Viewed

@@ -103,23 +103,26 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
   return (
     <React.Fragment>
-      {tooltip ? (
-        <Tooltip position={tooltipPosition} content={tooltip} isVisible>
-          {Title}
-        </Tooltip>
-      ) : (
-        Title
+      {title &&
+        (tooltip ? (
+          <Tooltip position={tooltipPosition} content={tooltip} isVisible>
+            {Title}
+          </Tooltip>
+        ) : (
+          Title
+        ))}
+      {(measureLocation !== ProgressMeasureLocation.none || StatusIcon) && (
+        <div className={css(progressStyle.progressStatus)} aria-hidden="true">
+          {(measureLocation === ProgressMeasureLocation.top || measureLocation === ProgressMeasureLocation.outside) && (
+            <span className={css(progressStyle.progressMeasure)}>{label || `${value}%`}</span>
+          )}
+          {StatusIcon && (
+            <span className={css(progressStyle.progressStatusIcon)}>
+              <StatusIcon />
+            </span>
+          )}
+        </div>
       )}
-      <div className={css(progressStyle.progressStatus)} aria-hidden="true">
-        {(measureLocation === ProgressMeasureLocation.top || measureLocation === ProgressMeasureLocation.outside) && (
-          <span className={css(progressStyle.progressMeasure)}>{label || `${value}%`}</span>
-        )}
-        {variantToIcon.hasOwnProperty(variant) && (
-          <span className={css(progressStyle.progressStatusIcon)}>
-            <StatusIcon />
-          </span>
-        )}
-      </div>
       <ProgressBar role="progressbar" progressBarAriaProps={progressBarAriaProps} value={value}>
         {measureLocation === ProgressMeasureLocation.inside && `${value}%`}
       </ProgressBar>

package/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap CHANGED Viewed

@@ -6,11 +6,6 @@ exports[`Progress measure location inside 1`] = `
     class="pf-c-progress pf-m-inside pf-m-lg pf-m-singleline"
     id="inside-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="inside-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -43,11 +38,6 @@ exports[`Progress measure location inside and small should render large 1`] = `
     class="pf-c-progress pf-m-inside pf-m-lg pf-m-singleline"
     id="large-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="large-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -80,15 +70,6 @@ exports[`Progress measure location none 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="none-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="none-progress-description"
-    />
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__status"
-    />
     <div
       aria-valuemax="100"
       aria-valuemin="0"
@@ -115,11 +96,6 @@ exports[`Progress measure location outside 1`] = `
     class="pf-c-progress pf-m-outside pf-m-singleline"
     id="outside-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="outside-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -156,11 +132,6 @@ exports[`Progress measure location top 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="top-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="top-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -197,11 +168,6 @@ exports[`Progress size lg 1`] = `
     class="pf-c-progress pf-m-lg pf-m-singleline"
     id="lg-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="lg-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -238,11 +204,6 @@ exports[`Progress size md 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="md-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="md-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -279,11 +240,6 @@ exports[`Progress size sm 1`] = `
     class="pf-c-progress pf-m-sm pf-m-singleline"
     id="sm-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="sm-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -320,11 +276,6 @@ exports[`Progress variant danger 1`] = `
     class="pf-c-progress pf-m-danger pf-m-singleline"
     id="danger-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="danger-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -378,11 +329,6 @@ exports[`Progress variant success 1`] = `
     class="pf-c-progress pf-m-success pf-m-singleline"
     id="success-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="success-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -436,11 +382,6 @@ exports[`Progress variant warning 1`] = `
     class="pf-c-progress pf-m-warning pf-m-singleline"
     id="warning-progress"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="warning-progress-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -494,11 +435,6 @@ exports[`Progress with aria-valuetext 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="progress-aria-valuetext"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="progress-aria-valuetext-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -536,11 +472,6 @@ exports[`Simple progress 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="progress-simple-example"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="progress-simple-example-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -577,11 +508,6 @@ exports[`additional label 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="additional-label"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="additional-label-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -618,11 +544,6 @@ exports[`no value specified 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="no-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="no-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -659,11 +580,6 @@ exports[`value higher than maxValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="higher-max-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="higher-max-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -700,11 +616,6 @@ exports[`value lower than minValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="lower-min-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="lower-min-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -741,11 +652,6 @@ exports[`value scaled between minValue and maxValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="scaled-range-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="scaled-range-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -782,11 +688,6 @@ exports[`value scaled with maxValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="scaled-max-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="scaled-max-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"
@@ -823,11 +724,6 @@ exports[`value scaled with minValue 1`] = `
     class="pf-c-progress pf-m-singleline"
     id="scaled-min-value"
   >
-    <div
-      aria-hidden="true"
-      class="pf-c-progress__description"
-      id="scaled-min-value-description"
-    />
     <div
       aria-hidden="true"
       class="pf-c-progress__status"

package/src/components/Radio/examples/Radio.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Radio
 section: components
+subsection: forms
 cssPrefix: pf-c-radio
 propComponents: ['Radio']
 ouia: true

package/src/components/Select/examples/Select.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Select
 section: components
+subsection: menus
 cssPrefix: pf-c-select
 propComponents: ['Select', 'SelectOption', 'SelectGroup', 'SelectOptionObject', 'SelectViewMoreObject']
 ouia: true

package/src/components/TextArea/examples/TextArea.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Text area
 section: components
+subsection: forms
 cssPrefix: pf-c-form-control
 propComponents: ['TextArea']
 ---

package/src/components/TextInput/examples/TextInput.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Text input
 section: components
+subsection: forms
 cssPrefix: pf-c-form-control
 propComponents: ['TextInput']
 ---

package/src/components/TimePicker/examples/TimePicker.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Time picker
 section: components
+subsection: date-and-time
 cssPrefix: pf-c-time-picker
 propComponents: ['TimePicker']
 beta: true

package/src/demos/Card/Card.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
 id: Card view
-section: demos
+section: patterns
 ---
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';

package/src/demos/ComposableMenu/ComposableMenu.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
-id: Composable menu
-section: demos
+id: Custom menus
+section: components
+subsection: menus
 ---
 import { Link } from '@reach/router';
@@ -26,7 +27,7 @@ import styles from '@patternfly/react-styles/css/components/Menu/menu';
 ## Demos
-Composable menus currently require consumer keyboard handling and use of our undocumented [popper.js](https://popper.js.org/) wrapper component called Popper. We understand this is inconvientent boilerplate and these examples will be updated to use [Dropdown](/components/dropdown) in a future release.
+Custom menus can be constructed using a composable approach by combining the [Menu](/components/menus/menu) and [Menu toggle](/components/menus/menu-toggle) components in unique ways. Composable menus currently require consumer keyboard handling and use of our undocumented [popper.js](https://popper.js.org/) wrapper component called Popper. We understand this is inconvientent boilerplate and these examples will be updated to use [Dropdown](/components/dropdown) in a future release.
 ### Composable simple dropdown

package/src/demos/DatePicker/DatePicker.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
-id: Date picker
+id: Date range picker
 section: components
+subsection: date-and-time
 beta: true
 ---

package/src/demos/DateTimePicker.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Date and time picker
-section: demos
+section: components
+subsection: date-and-time
 beta: true
 ---

package/src/demos/Filters/FilterDemos.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
 id: Filters
-section: demos
+section: patterns
 ---
 import {

package/src/demos/MultipleFileUploadDemos.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
-id: File upload - multiple
+id: Multiple file upload
 section: components
+subsection: file-upload
 ---
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';

package/src/demos/PasswordGenerator.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
 id: Password generator
-section: demos
+section: components
 ---
 import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';

package/src/demos/PasswordStrength.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
 id: Password strength
-section: demos
+section: components
 ---
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';

package/src/demos/PrimaryDetail.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
 id: Primary-detail
-section: demos
+section: patterns
 ---
 import {

package/src/deprecated/components/ContextSelector/examples/ContextSelector.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Context selector
 section: components
+subsection: menus
 propComponents: ['ContextSelector', 'ContextSelectorItem', 'ContextSelectorFooter']
 ouia: true

package/src/deprecated/components/Dropdown/examples/Dropdown.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Dropdown
 section: components
+subsection: menus
 cssPrefix: pf-c-dropdown
 propComponents:
   [

package/src/deprecated/components/OptionsMenu/examples/OptionsMenu.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Options menu
 section: components
+subsection: menus
 cssPrefix: pf-c-options-menu
 propComponents: ['OptionsMenu', 'OptionsMenuItem', 'OptionsMenuSeparator', 'OptionsMenuToggle', 'OptionsMenuToggleWithText']
 ouia: true

package/src/next/components/Select/examples/Select.md CHANGED Viewed

@@ -1,6 +1,7 @@
 ---
 id: Select
 section: components
+subsection: menus
 cssPrefix: pf-c-menu
 propComponents: ['Select', SelectGroup, 'SelectOption', 'SelectList']
 beta: true

package/src/components/Backdrop/examples/BackdropSpinner.tsx DELETED Viewed

@@ -1,10 +0,0 @@
-import React from 'react';
-import { Backdrop, Spinner, Bullseye } from '@patternfly/react-core';
-export const BackdropSpinner: React.FunctionComponent = () => (
-  <Backdrop>
-    <Bullseye>
-      <Spinner aria-label="Backdrop content" aria-valuetext="Loading..." />
-    </Bullseye>
-  </Backdrop>
-);