My extension docs
diff --git a/packages/module/src/CloseButton/CloseButton.tsx b/packages/module/src/CloseButton/CloseButton.tsx
index 535b16e4..2921dc38 100644
--- a/packages/module/src/CloseButton/CloseButton.tsx
+++ b/packages/module/src/CloseButton/CloseButton.tsx
@@ -25,7 +25,7 @@ const CloseButton: React.FunctionComponent<CloseButtonProps> = ({
}: CloseButtonProps) => {
const classes = useStyles();
return (
- <Button
+ <Button icon={<CloseIcon />}
aria-label={props['aria-label'] || 'Close'}
className={clsx(classes.closeButton, className)}
data-test-id={dataTestID}
@@ -33,9 +33,7 @@ const CloseButton: React.FunctionComponent<CloseButtonProps> = ({
variant={ButtonVariant.plain}
ouiaId={ouiaId}
{...props}
- >
- <CloseIcon />
- </Button>
+ />
);
};
diff --git a/packages/module/src/ContentHeader/ContentHeader.tsx b/packages/module/src/ContentHeader/ContentHeader.tsx
index 61b2be14..8f06aae4 100644
--- a/packages/module/src/ContentHeader/ContentHeader.tsx
+++ b/packages/module/src/ContentHeader/ContentHeader.tsx
@@ -59,7 +59,7 @@ export const ContentHeader: React.FunctionComponent<React.PropsWithChildren<Cont
const classes = useStyles();
return (
- <PageSection>
+ <PageSection hasBodyWrapper={false}>
{ breadcrumbs && (
<div className="pf-v6-u-mb-md">
{breadcrumbs}
diff --git a/packages/module/src/ContentHeader/__snapshots__/ContentHeader.test.tsx.snap b/packages/module/src/ContentHeader/__snapshots__/ContentHeader.test.tsx.snap
index 03fde7a4..9cbc1b7f 100644
--- a/packages/module/src/ContentHeader/__snapshots__/ContentHeader.test.tsx.snap
+++ b/packages/module/src/ContentHeader/__snapshots__/ContentHeader.test.tsx.snap
@@ -7,57 +7,6 @@ exports[`Contentheader component should render 1`] = `
<div>
<section
class="pf-v6-c-page__main-section"
- >
- <div
- class="pf-v6-c-page__main-body"
- >
- <div
- class="pf-v6-l-flex"
- >
- <div
- class="pf-m-flex-1"
- >
- <div
- class="pf-v6-l-split pf-m-gutter"
- >
- <div
- class="pf-v6-l-split__item"
- >
- <h1
- class="pf-v6-c-content--h1 pf-v6-u-mb-sm"
- data-ouia-component-id="ContentHeader-title"
- data-ouia-component-type="PF6/Content"
- data-ouia-safe="true"
- data-pf-content="true"
- >
- My title
- </h1>
- </div>
- <div
- class="pf-v6-l-split__item pf-m-fill"
- />
- </div>
- <p
- class="pf-v6-c-content--p"
- data-ouia-component-id="ContentHeader-subtitle"
- data-ouia-component-type="PF6/Content"
- data-ouia-safe="true"
- data-pf-content="true"
- >
- This is a subtitle for your content header
- </p>
- </div>
- </div>
- </div>
- </section>
- </div>
- </body>,
- "container": <div>
- <section
- class="pf-v6-c-page__main-section"
- >
- <div
- class="pf-v6-c-page__main-body"
>
<div
class="pf-v6-l-flex"
@@ -96,6 +45,49 @@ exports[`Contentheader component should render 1`] = `
</p>
</div>
</div>
+ </section>
+ </div>
+ </body>,
+ "container": <div>
+ <section
+ class="pf-v6-c-page__main-section"
+ >
+ <div
+ class="pf-v6-l-flex"
+ >
+ <div
+ class="pf-m-flex-1"
+ >
+ <div
+ class="pf-v6-l-split pf-m-gutter"
+ >
+ <div
+ class="pf-v6-l-split__item"
+ >
+ <h1
+ class="pf-v6-c-content--h1 pf-v6-u-mb-sm"
+ data-ouia-component-id="ContentHeader-title"
+ data-ouia-component-type="PF6/Content"
+ data-ouia-safe="true"
+ data-pf-content="true"
+ >
+ My title
+ </h1>
+ </div>
+ <div
+ class="pf-v6-l-split__item pf-m-fill"
+ />
+ </div>
+ <p
+ class="pf-v6-c-content--p"
+ data-ouia-component-id="ContentHeader-subtitle"
+ data-ouia-component-type="PF6/Content"
+ data-ouia-safe="true"
+ data-pf-content="true"
+ >
+ This is a subtitle for your content header
+ </p>
+ </div>
</div>
</section>
</div>,
diff --git a/packages/module/src/MultiContentCard/MultiContentCard.test.tsx b/packages/module/src/MultiContentCard/MultiContentCard.test.tsx
index 13b21433..cc3baa34 100644
--- a/packages/module/src/MultiContentCard/MultiContentCard.test.tsx
+++ b/packages/module/src/MultiContentCard/MultiContentCard.test.tsx
@@ -7,7 +7,7 @@ import MultiContentCard, { MultiContentCardDividerVariant } from './MultiContent
const cards = [
<Card isFullHeight isPlain key="card-1">
<CardHeader>
- <Content component={ContentVariants.h3}>Getting Started</Content>
+ <Content component={ContentVariants.h4}>Getting Started</Content>
</CardHeader>
<CardBody>
<Content className="pf-v6-u-font-size-sm pf-v6-u-font-weight-bold pf-v6-u-mb-sm pf-v6-u-link-color-hover">
@@ -35,7 +35,7 @@ const cards = [
</CardFooter>
</Card>,
<Card isFullHeight isPlain key="card-2">
- <CardBody className="pf-v6-u-pt-3xl-on-md">
+ <CardBody>
<Content className="pf-v6-u-font-size-sm pf-v6-u-font-weight-bold pf-v6-u-mb-sm pf-v6-u-link-color-hover">
<Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
<LockIcon />
@@ -59,7 +59,7 @@ const cards = [
</Card>,
<Card isFullHeight isPlain key="card-3">
<CardHeader>
- <Content component={ContentVariants.h3}>Next Steps</Content>
+ <Content component={ContentVariants.h4}>Next Steps</Content>
</CardHeader>
<CardBody>
<Content className="pf-v6-u-font-size-sm pf-v6-u-font-weight-bold pf-v6-u-mb-sm pf-v6-u-link-color-hover">
diff --git a/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap
index 6be06285..bc6de051 100644
--- a/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap
+++ b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap
@@ -28,15 +28,15 @@ exports[`MultiContentCard component should render basic multi content card 1`] =
<div
class="pf-v6-c-card__header-main"
>
- <h3
- class="pf-v6-c-content--h3"
+ <h4
+ class="pf-v6-c-content--h4"
data-ouia-component-id="OUIA-Generated-Content-1"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
>
Getting Started
- </h3>
+ </h4>
</div>
</div>
<div
@@ -164,7 +164,7 @@ exports[`MultiContentCard component should render basic multi content card 1`] =
id=""
>
<div
- class="pf-v6-c-card__body pf-v6-u-pt-3xl-on-md"
+ class="pf-v6-c-card__body"
>
<div
class="pf-v6-c-content pf-v6-u-font-size-sm pf-v6-u-font-weight-bold pf-v6-u-mb-sm pf-v6-u-link-color-hover"
@@ -272,15 +272,15 @@ exports[`MultiContentCard component should render basic multi content card 1`] =
<div
class="pf-v6-c-card__header-main"
>
- <h3
- class="pf-v6-c-content--h3"
+ <h4
+ class="pf-v6-c-content--h4"
data-ouia-component-id="OUIA-Generated-Content-7"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
>
Next Steps
- </h3>
+ </h4>
</div>
</div>
<div
@@ -538,15 +538,15 @@ exports[`MultiContentCard component should render expandable multi content card
<div
class="pf-v6-c-card__header-main"
>
- <h3
- class="pf-v6-c-content--h3"
+ <h4
+ class="pf-v6-c-content--h4"
data-ouia-component-id="OUIA-Generated-Content-11"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
>
Getting Started
- </h3>
+ </h4>
</div>
</div>
<div
@@ -674,7 +674,7 @@ exports[`MultiContentCard component should render expandable multi content card
id=""
>
<div
- class="pf-v6-c-card__body pf-v6-u-pt-3xl-on-md"
+ class="pf-v6-c-card__body"
>
<div
class="pf-v6-c-content pf-v6-u-font-size-sm pf-v6-u-font-weight-bold pf-v6-u-mb-sm pf-v6-u-link-color-hover"
@@ -782,15 +782,15 @@ exports[`MultiContentCard component should render expandable multi content card
<div
class="pf-v6-c-card__header-main"
>
- <h3
- class="pf-v6-c-content--h3"
+ <h4
+ class="pf-v6-c-content--h4"
data-ouia-component-id="OUIA-Generated-Content-17"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
>
Next Steps
- </h3>
+ </h4>
</div>
</div>
<div
@@ -1015,15 +1015,15 @@ exports[`MultiContentCard component should render multi content card with a sing
<div
class="pf-v6-c-card__header-main"
>
- <h3
- class="pf-v6-c-content--h3"
+ <h4
+ class="pf-v6-c-content--h4"
data-ouia-component-id="OUIA-Generated-Content-31"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
>
Getting Started
- </h3>
+ </h4>
</div>
</div>
<div
@@ -1151,7 +1151,7 @@ exports[`MultiContentCard component should render multi content card with a sing
id=""
>
<div
- class="pf-v6-c-card__body pf-v6-u-pt-3xl-on-md"
+ class="pf-v6-c-card__body"
>
<div
class="pf-v6-c-content pf-v6-u-font-size-sm pf-v6-u-font-weight-bold pf-v6-u-mb-sm pf-v6-u-link-color-hover"
@@ -1262,15 +1262,15 @@ exports[`MultiContentCard component should render multi content card with a sing
<div
class="pf-v6-c-card__header-main"
>
- <h3
- class="pf-v6-c-content--h3"
+ <h4
+ class="pf-v6-c-content--h4"
data-ouia-component-id="OUIA-Generated-Content-37"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
>
Next Steps
- </h3>
+ </h4>
</div>
</div>
<div
@@ -1397,15 +1397,15 @@ exports[`MultiContentCard component should render multi content card with divide
<div
class="pf-v6-c-card__header-main"
>
- <h3
- class="pf-v6-c-content--h3"
+ <h4
+ class="pf-v6-c-content--h4"
data-ouia-component-id="OUIA-Generated-Content-21"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
>
Getting Started
- </h3>
+ </h4>
</div>
</div>
<div
@@ -1536,7 +1536,7 @@ exports[`MultiContentCard component should render multi content card with divide
id=""
>
<div
- class="pf-v6-c-card__body pf-v6-u-pt-3xl-on-md"
+ class="pf-v6-c-card__body"
>
<div
class="pf-v6-c-content pf-v6-u-font-size-sm pf-v6-u-font-weight-bold pf-v6-u-mb-sm pf-v6-u-link-color-hover"
@@ -1647,15 +1647,15 @@ exports[`MultiContentCard component should render multi content card with divide
<div
class="pf-v6-c-card__header-main"
>
- <h3
- class="pf-v6-c-content--h3"
+ <h4
+ class="pf-v6-c-content--h4"
data-ouia-component-id="OUIA-Generated-Content-27"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
>
Next Steps
- </h3>
+ </h4>
</div>
</div>
<div
diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx
index 60985f18..4a33bb3a 100644
--- a/packages/module/src/ServiceCard/ServiceCard.tsx
+++ b/packages/module/src/ServiceCard/ServiceCard.tsx
@@ -1,15 +1,15 @@
import React from 'react';
-import { Card, CardBody, CardFooter, CardHeader, Text, TextContent, TextVariants, Flex, FlexItem, CardProps } from '@patternfly/react-core';
+import { Card, CardBody, CardFooter, CardHeader, Content, ContentVariants, Flex, FlexItem } from '@patternfly/react-core';
import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText';
import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
import { createUseStyles } from 'react-jss';
import clsx from 'clsx';
-export interface ServiceCardProps extends CardProps {
+export interface ServiceCardProps {
/** Service card title */
title: string;
- /** Optional Service card subtitle */
- subtitle?: string;
+ /** Service card subtitle */
+ subtitle: string;
/** Service card description */
description: string;
/** Service card icon */
@@ -31,7 +31,7 @@ const useStyles = createUseStyles({
height: '100%'
},
image: {
- marginRight: 'var(--pf-v5-global--spacer--md)',
+ marginRight: 'var(--pf-t--global--spacer--md)',
width: 48
}
});
@@ -58,10 +58,10 @@ const ServiceCard: React.FunctionComponent<ServiceCardProps> = ({
{icon}
</FlexItem>
<FlexItem>
- <TextContent>
- <Text component={TextVariants.h2} ouiaId={`${ouiaId}-title`}>{title}</Text>
- {subtitle ? subtitle : null}
- </TextContent>
+ <Content>
+ <Content component={ContentVariants.h2} ouiaId={`${ouiaId}-title`}>{title}</Content>
+ {subtitle ?? null}
+ </Content>
</FlexItem>
</Flex>
</CardHeader>
@@ -70,7 +70,7 @@ const ServiceCard: React.FunctionComponent<ServiceCardProps> = ({
<CardFooter data-ouia-component-id={`${ouiaId}-footer`}>
{ helperText ?
( <HelperText data-ouia-component-id={`${ouiaId}-helper-text`}>
- <HelperTextItem variant="indeterminate" className="pf-v5-u-mb-lg">
+ <HelperTextItem className="pf-v6-u-mb-lg">
{helperText}
</HelperTextItem>
</HelperText>) : null
diff --git a/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap b/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap
index 1c3d8882..d7b1b9ab 100644
--- a/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap
+++ b/packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap
@@ -1,110 +1,110 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ServiceCard component should render ServiceCard component 1`] = `
+exports[`LogSnippet component should render LogSnippet component 1`] = `
{
"asFragment": [Function],
"baseElement": <body>
<div>
<div
- class="pf-v5-c-card"
+ class="pf-v6-c-card card-0-2-1"
data-ouia-component-id="ServiceCard-card"
- data-ouia-component-type="PF5/Card"
+ data-ouia-component-type="PF6/Card"
data-ouia-safe="true"
id=""
>
<div
- class="pf-v5-c-card__header"
+ class="pf-v6-c-card__header"
>
<div
- class="pf-v5-c-card__header-main"
+ class="pf-v6-c-card__header-main"
>
<div
- class="pf-v5-l-flex pf-m-row pf-m-align-items-center"
+ class="image-0-2-2"
>
- <div
- class="image-0-2-2"
- >
- /
- </div>
- <div
- class=""
+ /
+ </div>
+ <div
+ class="pf-v6-c-content"
+ data-ouia-component-id="OUIA-Generated-Content-1"
+ data-ouia-component-type="PF6/Content"
+ data-ouia-safe="true"
+ data-pf-content="true"
+ >
+ <h2
+ class="pf-v6-c-content--h2"
+ data-ouia-component-id="ServiceCard-title"
+ data-ouia-component-type="PF6/Content"
+ data-ouia-safe="true"
+ data-pf-content="true"
>
- <div
- class="pf-v5-c-content"
- >
- <h2
- class=""
- data-ouia-component-id="ServiceCard-title"
- data-ouia-component-type="PF5/Text"
- data-ouia-safe="true"
- data-pf-content="true"
- >
- Example
- </h2>
- A basic example
- </div>
- </div>
+ Example
+ </h2>
+ A basic example
</div>
</div>
</div>
<div
- class="pf-v5-c-card__body"
+ class="pf-v6-c-card__body"
data-ouia-component-id="ServiceCard-description"
>
This is a basic ServiceCard Example
</div>
+ <div
+ class="pf-v6-c-card__footer"
+ data-ouia-component-id="ServiceCard-footer"
+ />
</div>
</div>
</body>,
"container": <div>
<div
- class="pf-v5-c-card"
+ class="pf-v6-c-card card-0-2-1"
data-ouia-component-id="ServiceCard-card"
- data-ouia-component-type="PF5/Card"
+ data-ouia-component-type="PF6/Card"
data-ouia-safe="true"
id=""
>
<div
- class="pf-v5-c-card__header"
+ class="pf-v6-c-card__header"
>
<div
- class="pf-v5-c-card__header-main"
+ class="pf-v6-c-card__header-main"
>
<div
- class="pf-v5-l-flex pf-m-row pf-m-align-items-center"
+ class="image-0-2-2"
>
- <div
- class="image-0-2-2"
- >
- /
- </div>
- <div
- class=""
+ /
+ </div>
+ <div
+ class="pf-v6-c-content"
+ data-ouia-component-id="OUIA-Generated-Content-1"
+ data-ouia-component-type="PF6/Content"
+ data-ouia-safe="true"
+ data-pf-content="true"
+ >
+ <h2
+ class="pf-v6-c-content--h2"
+ data-ouia-component-id="ServiceCard-title"
+ data-ouia-component-type="PF6/Content"
+ data-ouia-safe="true"
+ data-pf-content="true"
>
- <div
- class="pf-v5-c-content"
- >
- <h2
- class=""
- data-ouia-component-id="ServiceCard-title"
- data-ouia-component-type="PF5/Text"
- data-ouia-safe="true"
- data-pf-content="true"
- >
- Example
- </h2>
- A basic example
- </div>
- </div>
+ Example
+ </h2>
+ A basic example
</div>
</div>
</div>
<div
- class="pf-v5-c-card__body"
+ class="pf-v6-c-card__body"
data-ouia-component-id="ServiceCard-description"
>
This is a basic ServiceCard Example
</div>
+ <div
+ class="pf-v6-c-card__footer"
+ data-ouia-component-id="ServiceCard-footer"
+ />
</div>
</div>,
"debug": [Function],
diff --git a/packages/module/src/TagCount/TagCount.tsx b/packages/module/src/TagCount/TagCount.tsx
index a9b6381f..c5b7e122 100644
--- a/packages/module/src/TagCount/TagCount.tsx
+++ b/packages/module/src/TagCount/TagCount.tsx
@@ -42,12 +42,22 @@ const TagCount: React.FunctionComponent<TagCountProps> = ({
const classes = useStyles(!count);
const tagClasses = clsx(classes.buttonTagCount, className);
return (
- <Button aria-label="Tag count" {...props} variant="plain" isDisabled={!count} className={tagClasses} ouiaId={ouiaId} {...props}>
- <Icon iconSize={iconSize} data-ouia-component-id={`${ouiaId}-icon`}>
- <TagIcon className={classes.tagIcon} />
- </Icon>
- <span className={classes.tagText} data-ouia-component-id={`${ouiaId}-text`}>{count}</span>
- </Button>
+ <Button
+ icon={
+ <>
+ <Icon iconSize={iconSize} data-ouia-component-id={`${ouiaId}-icon`}>
+ <TagIcon className={classes.tagIcon} />
+ </Icon>
+ <span className={classes.tagText} data-ouia-component-id={`${ouiaId}-text`}>{count}</span>
+ </>
+ }
+ aria-label="Tag count"
+ {...props}
+ variant="plain"
+ isDisabled={!count}
+ className={tagClasses}
+ ouiaId={ouiaId}
+ />
);
};
diff --git a/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap b/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap
index 36e2bd5f..0360027f 100644
--- a/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap
+++ b/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`TagCount component should render a disabled tag count with no value 1`]
type="button"
>
<span
- class="pf-v6-c-button__text"
+ class="pf-v6-c-button__icon pf-m-start"
>
<span
class="pf-v6-c-icon"
@@ -60,7 +60,7 @@ exports[`TagCount component should render a disabled tag count with no value 1`]
type="button"
>
<span
- class="pf-v6-c-button__text"
+ class="pf-v6-c-button__icon pf-m-start"
>
<span
class="pf-v6-c-icon"
@@ -160,7 +160,7 @@ exports[`TagCount component should render a tag count of 11 1`] = `
type="button"
>
<span
- class="pf-v6-c-button__text"
+ class="pf-v6-c-button__icon pf-m-start"
>
<span
class="pf-v6-c-icon"
@@ -205,7 +205,7 @@ exports[`TagCount component should render a tag count of 11 1`] = `
type="button"
>
<span
- class="pf-v6-c-button__text"
+ class="pf-v6-c-button__icon pf-m-start"
>
<span
class="pf-v6-c-icon"