@patternfly/react-core 6.0.0-alpha.17 → 6.0.0-alpha.19

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.16","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.18","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.16","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.18","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.16","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.18","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.17",
+  "version": "6.0.0-alpha.19",
   "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.8",
-    "@patternfly/react-styles": "^6.0.0-alpha.8",
-    "@patternfly/react-tokens": "^6.0.0-alpha.8",
+    "@patternfly/react-icons": "^6.0.0-alpha.9",
+    "@patternfly/react-styles": "^6.0.0-alpha.9",
+    "@patternfly/react-tokens": "^6.0.0-alpha.9",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.63",
+    "@patternfly/patternfly": "6.0.0-alpha.66",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "0dfe65d0151532b778faa4224b297f55eb577247"
+  "gitHead": "37065eb0c351bcf1dda075cc6836ab72a18fb170"
 }

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -165,7 +165,8 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
           helperText={progressHelperText}
         />
       </div>
-      <div className={styles.multipleFileUploadStatusItemClose}>
+      {/* TODO: Update with issue #9997.  Removed class "styles.multipleFileUploadStatusItemClose" that no longer exists */}
+      <div>
         <Button variant="plain" aria-label={buttonAriaLabel} onClick={onClearClick}>
           <TimesCircleIcon />
         </Button>

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

@@ -85,9 +85,7 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="buttonAriaLabel"
@@ -198,9 +196,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -313,9 +309,7 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -428,9 +422,7 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -560,9 +552,7 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -675,9 +665,7 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -788,9 +776,7 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="Remove from list"
@@ -903,9 +889,7 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
         </div>
       </div>
     </div>
-    <div
-      class="pf-v5-c-multiple-file-upload__status-item-close"
-    >
+    <div>
       <button
         aria-disabled="false"
         aria-label="Remove from list"

package/src/components/SimpleList/SimpleListItem.tsx

@@ -77,6 +77,7 @@ class SimpleListItem extends React.Component<SimpleListItemProps> {
                 className={css(
                   styles.simpleListItemLink,
                   isCurrentItem && styles.modifiers.current,
+                  !isButton && styles.modifiers.link,
                   componentClassName
                 )}
                 onClick={(evt: React.MouseEvent) => {

package/src/components/SimpleList/examples/SimpleList.md

@@ -10,15 +10,23 @@ propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
 ### Simple list
 
 ```ts file="SimpleListBasic.tsx"
+
+```
+
+### Simple list with links
+
+```ts file="SimpleListLinks.tsx"
+
 ```
 
 ### Grouped list
 
 ```ts file="SimpleListGrouped.tsx"
+
 ```
 
 ### Uncontrolled simple list
 
 ```ts file="SimpleListUncontrolled.tsx"
-```
 
+```

package/src/components/SimpleList/examples/SimpleListBasic.tsx

@@ -6,9 +6,7 @@ export const SimpleListBasic: React.FunctionComponent = () => {
     <SimpleListItem key="item1" isActive>
       List item 1
     </SimpleListItem>,
-    <SimpleListItem key="item2" component="a" href="#">
-      List item 2
-    </SimpleListItem>,
+    <SimpleListItem key="item2">List item 2</SimpleListItem>,
     <SimpleListItem key="item3">List item 3</SimpleListItem>
   ];
 

package/src/components/SimpleList/examples/SimpleListLinks.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SimpleList, SimpleListItem } from '@patternfly/react-core';
+
+export const SimpleListLinks: React.FunctionComponent = () => {
+  const items = [
+    <SimpleListItem key="item1" component="a" href="#" isActive>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2" component="a" href="#">
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item3" component="a" href="#">
+      List item 3
+    </SimpleListItem>
+  ];
+
+  return <SimpleList aria-label="Simple List Links Example">{items}</SimpleList>;
+};

package/src/components/Toolbar/ToolbarChipGroupContent.tsx

@@ -74,7 +74,8 @@ class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentPro
       <div
         className={css(
           styles.toolbarContent,
-          !isHidden && !collapseListedFilters && styles.modifiers.chipContainer,
+          // TODO: Update with issue issue #9677
+          // !isHidden && !collapseListedFilters && styles.modifiers.chipContainer,
           isHidden && styles.modifiers.hidden,
           className
         )}

package/src/components/Toolbar/ToolbarExpandableContent.tsx

@@ -61,7 +61,8 @@ class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentP
       >
         <ToolbarGroup>{children}</ToolbarGroup>
         {numberOfFilters > 0 && (
-          <ToolbarGroup className={styles.modifiers.chipContainer}>
+          // TODO: Update with issue issue #9677. Removed 'chipContainer' modifier
+          <ToolbarGroup>
             <ToolbarGroup ref={chipContainerRef} />
             {showClearFiltersButton && !customChipGroupContent && (
               <ToolbarItem>

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -82,7 +82,8 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
           <div
             className={css(
               styles.toolbarGroup,
-              variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
+              // TODO: Update with issue #9677.  Removed "buttonGroup" modifier
+              variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
               formatBreakpointMods(align, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
-import cssWidth from '@patternfly/react-tokens/dist/esm/c_toolbar__item_Width';
+// TODO: Update with issue #9677
+// import cssWidth from '@patternfly/react-tokens/dist/esm/c_toolbar__item_Width';
 
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
 import { Divider } from '../Divider';
@@ -84,7 +85,8 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   variant,
   visibility,
   spacer,
-  widths,
+  // TODO: Update with issue #9677
+  // widths,
   align,
   alignSelf,
   alignItems,
@@ -95,16 +97,17 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
-    return <Divider className={css(styles.modifiers.vertical, className)} {...props} />;
+    return <Divider className={css(className)} orientation={{ default: 'vertical' }} {...props} />;
   }
 
-  const widthStyles: any = {};
-  if (widths) {
-    Object.entries(widths || {}).map(
-      ([breakpoint, value]) =>
-        (widthStyles[`${cssWidth.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value)
-    );
-  }
+  // TODO: Update with issue #9677
+  // const widthStyles: any = {};
+  // if (widths) {
+  //   Object.entries(widths || {}).map(
+  //     ([breakpoint, value]) =>
+  //       (widthStyles[`${cssWidth.name}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value)
+  //   );
+  // }
 
   return (
     <PageContext.Consumer>
@@ -113,15 +116,8 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
           className={css(
             styles.toolbarItem,
             variant &&
-              styles.modifiers[
-                toCamel(variant) as
-                  | 'bulkSelect'
-                  | 'overflowMenu'
-                  | 'pagination'
-                  | 'searchFilter'
-                  | 'label'
-                  | 'chipGroup'
-              ],
+              // TODO: Update with issue #9677.  Removed "bulkSleect", "overflowMenu" and "searchFilter" modifiers
+              styles.modifiers[toCamel(variant) as 'pagination' | 'label' | 'chipGroup'],
             isAllExpanded && styles.modifiers.expanded,
             isOverflowContainer && styles.modifiers.overflowContainer,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
@@ -138,7 +134,8 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
           {...(variant === 'label' && { 'aria-hidden': true })}
           id={id}
           {...props}
-          {...(widths && { style: { ...widthStyles, ...props.style } as React.CSSProperties })}
+          // TODO: Update with issue #9677
+          // {...(widths && { style: { ...widthStyles, ...props.style } as React.CSSProperties })}
         >
           {children}
         </div>

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -162,8 +162,8 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                         className={css(
                           styles.toolbarGroup,
                           styles.modifiers.toggleGroup,
-                          variant &&
-                            styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
+                          // TODO: Update with issue #9677.  Removed "buttonGroup" modifier
+                          variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
                           formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`ToolbarItem should map width breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-toolbar__item"
-    style="--pf-v5-c-toolbar__item--Width: 100px; --pf-v5-c-toolbar__item--Width-on-sm: 80px; --pf-v5-c-toolbar__item--Width-on-md: 150px; --pf-v5-c-toolbar__item--Width-on-lg: 200px; --pf-v5-c-toolbar__item--Width-on-xl: 250px; --pf-v5-c-toolbar__item--Width-on-2xl: 300px;"
+    widths="[object Object]"
   >
     Test
   </div>