@patternfly/react-core 6.0.0-alpha.6 → 6.0.0-alpha.7

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.6",
+  "version": "6.0.0-alpha.7",
   "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": "cddbcdf996451d6157f6c191f67b736ddeb073b0"
+  "gitHead": "e9117354af65f496fe3166e6faea7b8721f08b62"
 }

package/src/components/List/ListItem.tsx

@@ -16,7 +16,7 @@ export const ListItem: React.FunctionComponent<ListItemProps> = ({
 }: ListItemProps) => (
   <li className={css(icon && styles.listItem)} {...props}>
     {icon && <span className={css(styles.listItemIcon)}>{icon}</span>}
-    {children}
+    <span className={icon && css(`${styles.list}__item-text`)}>{children}</span>
   </li>
 );
 ListItem.displayName = 'ListItem';

package/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap

@@ -5,7 +5,9 @@ exports[`ListItem should match snapshot (auto-generated) 1`] = `
   <li
     class=""
   >
-    ReactNode
+    <span>
+      ReactNode
+    </span>
   </li>
 </DocumentFragment>
 `;

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

@@ -25,7 +25,11 @@ exports[`List icon large list 1`] = `
           />
         </svg>
       </span>
-      Apple
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Apple
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -47,7 +51,11 @@ exports[`List icon large list 1`] = `
           />
         </svg>
       </span>
-      Banana
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Banana
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -69,7 +77,11 @@ exports[`List icon large list 1`] = `
           />
         </svg>
       </span>
-      Orange
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Orange
+      </span>
     </li>
   </ul>
 </DocumentFragment>
@@ -101,7 +113,11 @@ exports[`List icon list 1`] = `
           />
         </svg>
       </span>
-      Apple
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Apple
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -123,7 +139,11 @@ exports[`List icon list 1`] = `
           />
         </svg>
       </span>
-      Banana
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Banana
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -145,7 +165,11 @@ exports[`List icon list 1`] = `
           />
         </svg>
       </span>
-      Orange
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Orange
+      </span>
     </li>
   </ul>
 </DocumentFragment>
@@ -162,17 +186,23 @@ exports[`List inline list 1`] = `
       <li
         class=""
       >
-        First
+        <span>
+          First
+        </span>
       </li>
       <li
         class=""
       >
-        Second
+        <span>
+          Second
+        </span>
       </li>
       <li
         class=""
       >
-        Third
+        <span>
+          Third
+        </span>
       </li>
     </ul>
   </ul>
@@ -188,17 +218,23 @@ exports[`List ordered list 1`] = `
     <li
       class=""
     >
-      Apple
+      <span>
+        Apple
+      </span>
     </li>
     <li
       class=""
     >
-      Banana
+      <span>
+        Banana
+      </span>
     </li>
     <li
       class=""
     >
-      Orange
+      <span>
+        Orange
+      </span>
     </li>
   </ol>
 </DocumentFragment>
@@ -215,17 +251,23 @@ exports[`List simple list 1`] = `
       <li
         class=""
       >
-        First
+        <span>
+          First
+        </span>
       </li>
       <li
         class=""
       >
-        Second
+        <span>
+          Second
+        </span>
       </li>
       <li
         class=""
       >
-        Third
+        <span>
+          Third
+        </span>
       </li>
     </ul>
   </ul>

package/src/components/Masthead/examples/Masthead.md

@@ -7,7 +7,7 @@ propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand',
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import { Link } from '@reach/router';
-import pfIcon from '../../assets/pf-logo.svg';
+import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
 
 `Masthead` should contain the following components to maintain proper layout and formatting: `MastheadToggle`, `MastheadMain`, and `MastheadContent`.
 
@@ -17,173 +17,35 @@ import pfIcon from '../../assets/pf-logo.svg';
 
 ### Basic
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="basic-example">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadBasic.tsx"
 ```
 
 ### Basic with mixed content
 
-```ts
-import React from 'react';
-import {
-  Masthead,
-  MastheadToggle,
-  MastheadMain,
-  MastheadBrand,
-  MastheadContent,
-  Button,
-  Flex,
-  FlexItem
-} from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="basic-mixed">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <Flex>
-      <span>Testing text color</span>
-      <Button>testing</Button>
-      <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }}>
-        <Button>testing</Button>
-      </FlexItem>
-    </Flex>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadBasicMixedContent.tsx"
 ```
 
 ### Display inline
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="inline-masthead" display={{ default: 'inline' }}>
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadDisplayInline.tsx"
 ```
 
 ### Display stack
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="stack-masthead" display={{ default: 'stack' }}>
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadDisplayStack.tsx"
 ```
 
 ### Display stack, display inline responsive
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadDisplayStackInlineResponsive.tsx"
 ```
 
 ### Inset
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="inset-masthead" inset={{ default: 'insetSm' }}>
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadInsets.tsx"
 ```
 
 ### With icon router link
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button, Brand } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import { Link } from '@reach/router';
-import pfIcon from '../../assets/pf-logo.svg';
-
-<Masthead id="icon-router-link">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand component={props => <Link {...props} to="#" />}>
-      <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
-    </MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadIconRouterLink.tsx"
 ```

package/src/components/Masthead/examples/MastheadBasic.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadBasic: React.FunctionComponent = () => (
+  <Masthead id="basic-example">
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadBasicMixedContent.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  Masthead,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
+  Button,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadBasicMixedContent: React.FunctionComponent = () => (
+  <Masthead id="basic-mixed">
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <Flex>
+        <span>Content</span>
+        <Button>Primary</Button>
+        <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }}>
+          <Button variant="secondary">Secondary</Button>
+        </FlexItem>
+        <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }}>
+          <Button variant="tertiary">Tertiary</Button>
+        </FlexItem>
+      </Flex>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadDisplayInline.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadDisplayInline: React.FunctionComponent = () => (
+  <Masthead id="inline-masthead" display={{ default: 'inline' }}>
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadDisplayStack.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadDisplayStack: React.FunctionComponent = () => (
+  <Masthead id="stack-masthead" display={{ default: 'stack' }}>
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadDisplayStackInlineResponsive.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadDisplayStackInlineResponsive: React.FunctionComponent = () => (
+  <Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadIconRouterLink.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {
+  Masthead,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
+  Button,
+  Brand
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import { Link } from '@reach/router';
+import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
+
+export const MastheadIconRouterLink: React.FunctionComponent = () => (
+  <Masthead id="icon-router-link">
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component={(props) => <Link {...props} to="#" />}>
+        <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
+      </MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadInsets.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadInsets: React.FunctionComponent = () => (
+  <Masthead id="inset-masthead" inset={{ default: 'insetSm' }}>
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Text/examples/Text.md

@@ -51,7 +51,7 @@ Text components such as Text, TextList, TextListItem need to be placed within a
 
 ```
 
-### Visited
+### Link and visited link
 
 ```ts file="./TextVisited.tsx"
 

package/src/components/Text/examples/TextVisited.tsx

@@ -4,16 +4,16 @@ import { TextContent, Text, TextVariants } from '@patternfly/react-core';
 export const TextVisited: React.FunctionComponent = () => (
   <>
     <TextContent>
-      <Text component={TextVariants.h3}>Visited link example</Text>
+      <Text component={TextVariants.h3}>Link example</Text>
       <Text component={TextVariants.p}>
         <Text component={TextVariants.a} isVisitedLink href="#">
-          Visited link
+          Click to visit link
         </Text>
       </Text>
     </TextContent>
     <br />
     <TextContent isVisited>
-      <Text component={TextVariants.h3}>Visited content example</Text>
+      <Text component={TextVariants.h3}>Link content example</Text>
       <Text component={TextVariants.p}>
         <Text component={TextVariants.a} href="#">
           content link 1

package/src/components/Title/Title.tsx

@@ -12,15 +12,6 @@ export enum TitleSizes {
   '4xl' = '4xl'
 }
 
-enum headingLevelSizeMap {
-  h1 = '2xl',
-  h2 = 'xl',
-  h3 = 'lg',
-  h4 = 'md',
-  h5 = 'md',
-  h6 = 'md'
-}
-
 type Size = 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
 
 export interface TitleProps extends Omit<React.HTMLProps<HTMLHeadingElement>, 'size' | 'className'>, OUIAProps {
@@ -42,7 +33,7 @@ export const Title: React.FunctionComponent<TitleProps> = ({
   className = '',
   children = '',
   headingLevel: HeadingLevel,
-  size = headingLevelSizeMap[HeadingLevel],
+  size,
   ouiaId,
   ouiaSafe = true,
   ...props
@@ -52,7 +43,7 @@ export const Title: React.FunctionComponent<TitleProps> = ({
     <HeadingLevel
       {...ouiaProps}
       {...props}
-      className={css(styles.title, size && styles.modifiers[size as Size], className)}
+      className={css(styles.title, size ? styles.modifiers[size as Size] : styles.modifiers[HeadingLevel], className)}
     >
       {children}
     </HeadingLevel>