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

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.2","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.4","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.2","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.4","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.2","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.4","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.3",
+  "version": "6.0.0-alpha.5",
   "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.3",
-    "@patternfly/react-styles": "^6.0.0-alpha.3",
-    "@patternfly/react-tokens": "^6.0.0-alpha.3",
+    "@patternfly/react-icons": "^6.0.0-alpha.4",
+    "@patternfly/react-styles": "^6.0.0-alpha.4",
+    "@patternfly/react-tokens": "^6.0.0-alpha.4",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.28",
+    "@patternfly/patternfly": "6.0.0-alpha.38",
     "@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": "da36134a3effa82a166c47f5b1c2689869a0f52a"
+  "gitHead": "0213323de9e62364f8cd3f401bec86f1f34ee4fe"
 }

package/src/components/Avatar/Avatar.tsx

@@ -10,8 +10,6 @@ export interface AvatarProps
   src?: string;
   /** Attribute that specifies the alternate text of the image for the Avatar. */
   alt: string;
-  /** Border to add */
-  border?: 'light' | 'dark';
   /** Size variant of avatar. */
   size?: 'sm' | 'md' | 'lg' | 'xl';
 }
@@ -20,21 +18,9 @@ export const Avatar: React.FunctionComponent<AvatarProps> = ({
   className = '',
   src = '',
   alt,
-  border,
   size,
   ...props
 }: AvatarProps) => (
-  <img
-    src={src}
-    alt={alt}
-    className={css(
-      styles.avatar,
-      styles.modifiers[size],
-      border === 'light' && styles.modifiers.light,
-      border === 'dark' && styles.modifiers.dark,
-      className
-    )}
-    {...props}
-  />
+  <img src={src} alt={alt} className={css(styles.avatar, styles.modifiers[size], className)} {...props} />
 );
 Avatar.displayName = 'Avatar';

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

@@ -12,18 +12,21 @@ test('Renders simple avatar', () => {
   expect(screen.getByTestId('avatar').firstChild).toBeVisible();
 });
 
+// TODO: Need to be updated as part of issue #9880
 test('Renders without any modifier class when border and size props are not passed', () => {
   render(<Avatar alt="avatar" />);
   expect(screen.getByRole('img')).toHaveClass(styles.avatar, { exact: true });
 });
 
-test('Renders with class name pf-m-light when "light" is passed as border prop', () => {
-  render(<Avatar alt="avatar" border="light" />);
+// TODO: Need to be updated/removed as part of issue #9880
+xtest('Renders with class name pf-m-light when "light" is passed as border prop', () => {
+  render(<Avatar alt="avatar" />);
   expect(screen.getByRole('img')).toHaveClass('pf-m-light');
 });
 
-test('Renders with class name pf-m-dark when "dark" is passed as border prop', () => {
-  render(<Avatar alt="avatar" border="dark" />);
+// TODO: Need to be updated/removed as part of issue #9880
+xtest('Renders with class name pf-m-dark when "dark" is passed as border prop', () => {
+  render(<Avatar alt="avatar" />);
   expect(screen.getByRole('img')).toHaveClass('pf-m-dark');
 });
 

package/src/components/Avatar/examples/Avatar.md

@@ -54,7 +54,8 @@ import React from 'react';
 import { Avatar } from '@patternfly/react-core';
 import avatarImg from '../../assets/avatarImg.svg';
 
-<Avatar src={avatarImg} alt="avatar" border="light" />;
+// TODO: Need to be updated/removed as part of issue #9880
+<Avatar src={avatarImg} alt="avatar" />;
 ```
 
 ### Bordered - dark
@@ -64,5 +65,6 @@ import React from 'react';
 import { Avatar } from '@patternfly/react-core';
 import avatarImgDark from '../../assets/avatarImgDark.svg';
 
-<Avatar src={avatarImgDark} alt="avatar" border="dark" />;
+// TODO: Need to be updated/removed as part of issue #9880
+<Avatar src={avatarImgDark} alt="avatar" />;
 ```

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -31,8 +31,6 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
   toggleId?: string;
   /** Display size variant. Set to "lg" for disclosure styling. */
   displaySize?: 'default' | 'lg';
-  /** Forces active state. */
-  isActive?: boolean;
   /** Indicates the expandable section has a detached toggle. */
   isDetached?: boolean;
   /** Flag to indicate if the content is expanded. */
@@ -103,7 +101,6 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
     toggleTextCollapsed: '',
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onToggle: (event, isExpanded): void => undefined,
-    isActive: false,
     isDetached: false,
     displaySize: 'default',
     isWidthLimited: false,
@@ -182,8 +179,6 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
   render() {
     const {
       onToggle: onToggleProp,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      isActive,
       className,
       toggleText,
       toggleTextExpanded,
@@ -253,7 +248,6 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
         className={css(
           styles.expandableSection,
           propOrStateIsExpanded && styles.modifiers.expanded,
-          isActive && styles.modifiers.active,
           displaySize === 'lg' && styles.modifiers.displayLg,
           isWidthLimited && styles.modifiers.limitWidth,
           isIndented && styles.modifiers.indented,

package/src/components/Page/PageSection.tsx

@@ -5,7 +5,8 @@ import { formatBreakpointMods } from '../../helpers/util';
 import { PageContext } from './PageContext';
 
 export enum PageSectionVariants {
-  default = 'default'
+  default = 'default',
+  secondary = 'secondary'
 }
 
 export enum PageSectionTypes {
@@ -22,8 +23,8 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the section */
   className?: string;
-  /** Section background color variant */
-  variant?: 'default';
+  /** Section background color variant. This will only apply when the type prop has the "default" value. */
+  variant?: 'default' | 'secondary';
   /** Section type variant */
   type?: 'default' | 'nav' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard';
   /** Enables the page section to fill the available vertical space */
@@ -74,7 +75,8 @@ const variantType = {
 };
 
 const variantStyle = {
-  [PageSectionVariants.default]: ''
+  [PageSectionVariants.default]: '',
+  [PageSectionVariants.secondary]: styles.modifiers.secondary
 };
 
 export const PageSection: React.FunctionComponent<PageSectionProps> = ({
@@ -112,7 +114,7 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
         variantType[type],
         formatBreakpointMods(padding, styles),
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
-        variantStyle[variant],
+        type === PageSectionTypes.default && variantStyle[variant],
         isFilled === false && styles.modifiers.noFill,
         isFilled === true && styles.modifiers.fill,
         isWidthLimited && styles.modifiers.limitWidth,

package/src/components/Page/examples/Page.md

@@ -16,7 +16,6 @@ propComponents:
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import './page.css';
 import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 ## Examples

package/src/components/Page/examples/PageHorizontalNav.tsx

@@ -35,7 +35,7 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
   return (
     <Page header={header}>
       <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
+      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
       <PageSection>Section 3</PageSection>
     </Page>
   );

package/src/components/Page/examples/PageVerticalNav.tsx

@@ -62,7 +62,7 @@ export const PageVerticalNav: React.FunctionComponent = () => {
   return (
     <Page header={header} sidebar={sidebar}>
       <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
+      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
       <PageSection>Section 3</PageSection>
     </Page>
   );

package/src/components/Pagination/Pagination.tsx

@@ -119,10 +119,10 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
     xl?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
     '2xl'?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
   };
-  /** Flag indicating if pagination is compact. */
-  isCompact?: boolean;
   /** Flag indicating if pagination is disabled. */
   isDisabled?: boolean;
+  /** Flag indicating if pagination is compact. */
+  isCompact?: boolean;
   /** Flag indicating if pagination should not be sticky on mobile. */
   isStatic?: boolean;
   /** Flag indicating if pagination should stick to its position (based on variant). */
@@ -285,7 +285,6 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
         variant === PaginationVariant.bottom && styles.modifiers.bottom,
         usePageInsets && styles.modifiers.pageInsets,
         formatBreakpointMods(inset, styles),
-        isCompact && styles.modifiers.compact,
         isStatic && styles.modifiers.static,
         isSticky && styles.modifiers.sticky,
         className

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

@@ -19,7 +19,7 @@ describe('Pagination', () => {
     });
 
     test('should render correctly compact', () => {
-      const { asFragment } = render(<Pagination itemCount={20} isCompact />);
+      const { asFragment } = render(<Pagination itemCount={20} />);
       expect(asFragment()).toMatchSnapshot();
     });