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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.3",
+  "version": "6.0.0-alpha.4",
   "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",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "da36134a3effa82a166c47f5b1c2689869a0f52a"
+  "gitHead": "a566e687735aab45907215a3ee70850908d12c70"
 }

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/Page/examples/page.css

@@ -1,3 +0,0 @@
-.pf-v5-c-page__sidebar-body {
-  color: var(--pf-v5-global--Color--light-100);
-}