particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wizard: Add v5 PF slug to classNames

Browse source 
This adds v5 PF slug to classNames throughout the code base, making the formatting work properly.
This commit is contained in:
regexowl 2024-11-25 09:42:09 +01:00 • committed by Klara Simickova
parent 4f728874f7
commit d8bb3485d8
26 changed files with 122 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/Components/CreateImageWizard/CreateImageWizard.scss
View file

@ -15,11 +15,11 @@
}
.pf-c-form {
--pf-c-form--GridGap: var(--pf-global--spacer--md);
--pf-c-form--GridGap: var(--pf-v5-global--spacer--md);
}
.pf-c-form__group-label {
--pf-c-form__group-label--PaddingBottom: var(--pf-global--spacer--xs);
--pf-c-form__group-label--PaddingBottom: var(--pf-v5-global--spacer--xs);
}
.tiles {
@ -33,9 +33,9 @@
.pf-c-tile:focus {
--pf-c-tile__title--Color: var(--pf-c-tile__title--Color);
--pf-c-tile__icon--Color: var(---pf-global--Color--100);
--pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
--pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
--pf-c-tile__icon--Color: var(---pf-v5-global--Color--100);
--pf-c-tile--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
--pf-c-tile--before--BorderColor: var(--pf-v5-global--BorderColor--100);
}
.pf-c-tile.pf-m-selected:focus {
@ -48,12 +48,12 @@
height: 1em;
}
.pf-u-min-width {
--pf-u-min-width--MinWidth: 18ch;
.pf-v5-u-min-width {
--pf-v5-u-min-width--MinWidth: 18ch;
}
.pf-u-max-width {
--pf-u-max-width--MaxWidth: 26rem;
.pf-v5-u-max-width {
--pf-v5-u-max-width--MaxWidth: 26rem;
}
ul.pf-m-plain {

2
src/Components/CreateImageWizard/steps/FileSystem/FileSystemAutomaticPartitionInformation.tsx
View file

@ -27,7 +27,7 @@ const FileSystemAutomaticPartition = () => {
icon={<ExternalLinkAltIcon />}
iconPosition="right"
href={FILE_SYSTEM_CUSTOMIZATION_URL}
className="pf-u-pl-0"
className="pf-v5-u-pl-0"
>
Customizing file systems during the image creation
</Button>

4
src/Components/CreateImageWizard/steps/FileSystem/FileSystemConfiguration.tsx
View file

@ -65,7 +65,7 @@ const FileSystemConfiguration = () => {
icon={<ExternalLinkAltIcon />}
iconPosition="right"
href={FILE_SYSTEM_CUSTOMIZATION_URL}
className="pf-u-pl-0"
className="pf-v5-u-pl-0"
>
Read more about manual configuration here
</Button>
@ -83,7 +83,7 @@ const FileSystemConfiguration = () => {
<Button
ouiaId="add-partition"
data-testid="file-system-add-partition"
className="pf-u-text-align-left"
className="pf-v5-u-text-align-left"
variant="link"
icon={<PlusCircleIcon />}
onClick={handleAddPartition}

2
src/Components/CreateImageWizard/steps/FileSystem/FileSystemTable.tsx
View file

@ -54,7 +54,7 @@ export const MinimumSizePopover = () => {
variant="plain"
aria-label="File system configuration info"
aria-describedby="file-system-configuration-info"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
>
<HelpIcon />
</Button>

16
src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx
View file

@ -98,7 +98,7 @@ const TargetEnvironment = () => {
<div className="tiles">
{supportedEnvironments?.includes('aws') && (
<Tile
className="tile pf-u-mr-sm"
className="tile pf-v5-u-mr-sm"
data-testid="upload-aws"
title="Amazon Web Services"
icon={
@ -120,7 +120,7 @@ const TargetEnvironment = () => {
)}
{supportedEnvironments?.includes('gcp') && (
<Tile
className="tile pf-u-mr-sm"
className="tile pf-v5-u-mr-sm"
data-testid="upload-google"
title="Google Cloud Platform"
icon={
@ -144,7 +144,7 @@ const TargetEnvironment = () => {
)}
{supportedEnvironments?.includes('azure') && (
<Tile
className="tile pf-u-mr-sm"
className="tile pf-v5-u-mr-sm"
data-testid="upload-azure"
title="Microsoft Azure"
icon={
@ -168,7 +168,7 @@ const TargetEnvironment = () => {
)}
{supportedEnvironments?.includes('oci') && (
<Tile
className="tile pf-u-mr-sm"
className="tile pf-v5-u-mr-sm"
data-testid="upload-oci"
title="Oracle Cloud Infrastructure"
icon={
@ -193,7 +193,7 @@ const TargetEnvironment = () => {
<>
<FormGroup
label={<Text component={TextVariants.small}>Private cloud</Text>}
className="pf-u-mt-sm"
className="pf-v5-u-mt-sm"
data-testid="target-private"
>
<Checkbox
@ -243,7 +243,7 @@ const TargetEnvironment = () => {
}
>
<Button
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
variant="plain"
aria-label="About OVA file"
isInline
@ -267,7 +267,7 @@ const TargetEnvironment = () => {
/>
)}
<Radio
className="pf-u-mt-sm"
className="pf-v5-u-mt-sm"
name="vsphere-radio"
aria-label="VMware vSphere radio button VMDK"
id="vsphere-radio-vmdk"
@ -290,7 +290,7 @@ const TargetEnvironment = () => {
}
>
<Button
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
variant="plain"
aria-label="About VMDK file"
isInline

2
src/Components/CreateImageWizard/steps/Oscap/Oscap.tsx
View file

@ -76,7 +76,7 @@ const OpenSCAPFGLabel = () => {
variant="plain"
aria-label="About OpenSCAP"
isInline
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0 pf-u-pr-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0 pf-v5-u-pr-0"
>
<HelpIcon />
</Button>

12
src/Components/CreateImageWizard/steps/Oscap/OscapProfileInformation.tsx
View file

@ -102,7 +102,7 @@ export const OscapProfileInformation = ({
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Profile description:
</TextListItem>
@ -111,7 +111,7 @@ export const OscapProfileInformation = ({
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Operating system:
</TextListItem>
@ -120,7 +120,7 @@ export const OscapProfileInformation = ({
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Reference ID:
</TextListItem>
@ -132,7 +132,7 @@ export const OscapProfileInformation = ({
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Kernel arguments:
</TextListItem>
@ -145,7 +145,7 @@ export const OscapProfileInformation = ({
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Disabled services:
</TextListItem>
@ -158,7 +158,7 @@ export const OscapProfileInformation = ({
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Enabled services:
</TextListItem>

10
src/Components/CreateImageWizard/steps/Packages/Packages.tsx
View file

@ -541,7 +541,7 @@ const Packages = () => {
</EmptyStateActions>
<EmptyStateActions>
<Button
className="pf-u-pt-md"
className="pf-v5-u-pt-md"
variant="link"
isInline
component="a"
@ -1035,10 +1035,10 @@ const Packages = () => {
variant="plain"
aria-label="About included packages"
component="span"
className="pf-u-p-0"
className="pf-v5-u-p-0"
isInline
>
<HelpIcon className="pf-u-ml-xs" />
<HelpIcon className="pf-v5-u-ml-xs" />
</Button>
</Popover>
</Td>
@ -1308,7 +1308,7 @@ const Packages = () => {
variant="plain"
aria-label="About included repositories"
component="span"
className="pf-u-p-0"
className="pf-v5-u-p-0"
size="sm"
isInline
>
@ -1339,7 +1339,7 @@ const Packages = () => {
variant="plain"
aria-label="About other repositories"
component="span"
className="pf-u-p-0"
className="pf-v5-u-p-0"
size="sm"
isInline
>

2
src/Components/CreateImageWizard/steps/Packages/components/PackageInfoNotAvailablePopover.tsx
View file

@ -23,7 +23,7 @@ const PackageInfoNotAvailablePopover = () => {
<Button
variant="plain"
aria-label="Package description"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
>
<HelpIcon />
</Button>

6
src/Components/CreateImageWizard/steps/Registration/ActivationKeyInformation.tsx
View file

@ -80,7 +80,7 @@ const ActivationKeyInformation = (): JSX.Element => {
<Button
variant="plain"
aria-label="About additional repositories"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
>
<HelpIcon />
</Button>
@ -88,7 +88,7 @@ const ActivationKeyInformation = (): JSX.Element => {
</TextListItem>
<TextListItem
component={TextListItemVariants.dd}
className="pf-u-display-flex pf-u-align-items-flex-end"
className="pf-v5-u-display-flex pf-v5-u-align-items-flex-end"
>
{activationKeyInfo.body?.additionalRepositories &&
activationKeyInfo.body?.additionalRepositories?.length > 0 ? (
@ -126,7 +126,7 @@ const ActivationKeyInformation = (): JSX.Element => {
data-testid="repositories-popover-button"
variant="link"
aria-label="Show additional repositories"
className="pf-u-pl-0 pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-0 pf-v5-u-pt-0 pf-v5-u-pb-0"
>
{activationKeyInfo.body?.additionalRepositories?.length}{' '}
repositories

2
src/Components/CreateImageWizard/steps/Registration/ActivationKeysList.tsx
View file

@ -76,7 +76,7 @@ export const PopoverActivation = () => {
variant="plain"
aria-label="Activation key popover"
aria-describedby="subscription-activation-key"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0 pf-u-pr-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0 pf-v5-u-pr-0"
>
<HelpIcon />
</Button>

6
src/Components/CreateImageWizard/steps/Registration/Registration.tsx
View file

@ -48,7 +48,7 @@ const InsightsPopover = () => {
>
<Button
variant="plain"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
aria-label="About remote host configuration (rhc)"
isInline
>
@ -87,7 +87,7 @@ const RhcPopover = () => {
>
<Button
variant="plain"
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0"
aria-label="About remote host configuration (rhc)"
isInline
>
@ -152,7 +152,7 @@ const Registration = () => {
body={
showOptions && (
<Checkbox
className="pf-u-ml-lg"
className="pf-v5-u-ml-lg"
label={
<>
Enable predictive analytics and management capabilities

6
src/Components/CreateImageWizard/steps/Repositories/RepositoriesStatus.tsx
View file

@ -74,11 +74,11 @@ const RepositoriesStatus = ({
<Alert
variant={repoStatus === 'Invalid' ? 'danger' : 'warning'}
title={repoStatus}
className="pf-u-pb-sm"
className="pf-v5-u-pb-sm"
isInline
isPlain
/>
<p className="pf-u-pb-md">Cannot fetch {repoUrl}</p>
<p className="pf-v5-u-pb-md">Cannot fetch {repoUrl}</p>
{(repoIntrospections || repoFailCount) && (
<>
<DescriptionList
@ -124,7 +124,7 @@ const RepositoriesStatus = ({
</>
}
>
<Button variant="link" className="pf-u-p-0 pf-u-font-size-sm">
<Button variant="link" className="pf-v5-u-p-0 pf-v5-u-font-size-sm">
{repoStatus === 'Invalid' && (
<ExclamationCircleIcon className="error" />
)}

2
src/Components/CreateImageWizard/steps/Repositories/components/Empty.tsx
View file

@ -42,7 +42,7 @@ export default function Empty({ hasFilterValue, refetch }: EmptyProps) {
component="a"
target="_blank"
href={CONTENT_URL}
className="pf-u-mr-sm"
className="pf-v5-u-mr-sm"
>
Go to repositories
</Button>

4
src/Components/CreateImageWizard/steps/Review/ReviewStep.tsx
View file

@ -105,7 +105,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
data-testid={testId}
component="span"
onClick={() => revisitStep(stepId)}
className="pf-u-p-0 pf-u-font-weight-bold"
className="pf-v5-u-p-0 pf-v5-u-font-weight-bold"
isInline
>
Revisit step <ArrowRightIcon />
@ -123,7 +123,7 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width pf-v5-u-text-align-left"
className="pf-v5-u-min-width pf-v5-u-text-align-left"
>
<Button variant="link" component="span" isInline>
{label}

38
src/Components/CreateImageWizard/steps/Review/ReviewStepTextLists.tsx
View file

@ -76,7 +76,7 @@ import { PopoverActivation } from '../Registration/ActivationKeysList';
const ExpirationWarning = () => {
return (
<div className="pf-u-mr-sm pf-u-font-size-sm pf-v5-u-warning-color-200">
<div className="pf-v5-u-mr-sm pf-v5-u-font-size-sm pf-v5-u-warning-color-200">
<ExclamationTriangleIcon /> Expires 14 days after creation
</div>
);
@ -105,7 +105,7 @@ export const ImageOutputList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Release
</TextListItem>
@ -131,7 +131,7 @@ export const FSCList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Configuration type
</TextListItem>
@ -155,7 +155,7 @@ export const FSCList = () => {
variant="link"
aria-label="File system configuration info"
aria-describedby="file-system-configuration-info"
className="pf-u-pt-0 pf-u-pb-0"
className="pf-v5-u-pt-0 pf-v5-u-pb-0"
>
View partitions
</Button>
@ -225,7 +225,7 @@ export const TargetEnvAWSList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Image type
</TextListItem>
@ -267,7 +267,7 @@ export const TargetEnvGCPList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Image type
</TextListItem>
@ -330,7 +330,7 @@ export const TargetEnvAzureList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Image type
</TextListItem>
@ -387,7 +387,7 @@ export const TargetEnvOciList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Object Storage URL
</TextListItem>
@ -405,7 +405,7 @@ export const TargetEnvOtherList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Image type
</TextListItem>
@ -485,7 +485,7 @@ export const ContentList = ({
<>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Repository snapshot
</TextListItem>
@ -509,7 +509,7 @@ export const ContentList = ({
<Button
variant="link"
aria-label="Snapshot method"
className="pf-u-p-0"
className="pf-v5-u-p-0"
isDisabled={noRepositoriesSelected || isLoading || isError}
isLoading={isLoading}
>
@ -552,7 +552,7 @@ export const ContentList = ({
<Button
variant="link"
aria-label="About custom repositories"
className="pf-u-p-0"
className="pf-v5-u-p-0"
>
{customRepositories?.length +
recommendedRepositories.length || 0}
@ -564,7 +564,7 @@ export const ContentList = ({
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Additional packages
</TextListItem>
@ -583,7 +583,7 @@ export const ContentList = ({
<Button
variant="link"
aria-label="About packages"
className="pf-u-p-0"
className="pf-v5-u-p-0"
>
{packages?.length + groups?.length}
</Button>
@ -615,7 +615,7 @@ export const RegisterLaterList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Registration type
</TextListItem>
@ -644,7 +644,7 @@ export const RegisterNowList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Registration type
</TextListItem>
@ -708,7 +708,7 @@ export const DetailsList = () => {
<>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Blueprint name
</TextListItem>
@ -721,7 +721,7 @@ export const DetailsList = () => {
<>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
Description
</TextListItem>
@ -747,7 +747,7 @@ export const FirstBootList = () => {
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-u-min-width"
className="pf-v5-u-min-width"
>
First boot script
</TextListItem>

2
src/Components/ImagesTable/EmptyState.tsx
View file

@ -99,7 +99,7 @@ const EmptyImagesTable = () => {
iconPosition="right"
isInline
href={CREATING_IMAGES_WITH_IB_SERVICE_URL}
className="pf-u-pt-md"
className="pf-v5-u-pt-md"
>
Image builder for RPM-DNF documentation
</Button>

48
src/Components/ImagesTable/ImageDetails.tsx
View file

@ -40,7 +40,7 @@ const SourceNotFoundPopover = () => {
<Alert
variant="danger"
title="Source name cannot be loaded"
className="pf-u-pb-md"
className="pf-v5-u-pb-md"
isInline
isPlain
/>
@ -63,7 +63,7 @@ const SourceNotFoundPopover = () => {
</>
}
>
<Button variant="link" className="pf-u-p-0 pf-u-font-size-sm">
<Button variant="link" className="pf-v5-u-p-0 pf-v5-u-font-size-sm">
<div className="failure-button">Source name cannot be loaded</div>
</Button>
</Popover>
@ -140,8 +140,10 @@ export const AwsDetails = ({ compose }: AwsDetailsPropTypes) => {
return (
<>
<div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
<DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
<div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
Build Information
</div>
<DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
<DescriptionListGroup>
<DescriptionListTerm>UUID</DescriptionListTerm>
<DescriptionListDescription>
@ -190,7 +192,7 @@ export const AwsDetails = ({ compose }: AwsDetailsPropTypes) => {
</DescriptionList>
<>
<br />
<div className="pf-u-font-weight-bold pf-u-pb-md">
<div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
Cloud Provider Identifiers
</div>
</>
@ -229,8 +231,10 @@ export const AzureDetails = ({ compose }: AzureDetailsPropTypes) => {
return (
<>
<div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
<DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
<div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
Build Information
</div>
<DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
<DescriptionListGroup>
<DescriptionListTerm>UUID</DescriptionListTerm>
<DescriptionListDescription>
@ -264,10 +268,10 @@ export const AzureDetails = ({ compose }: AzureDetailsPropTypes) => {
</DescriptionListGroup>
</DescriptionList>
<br />
<div className="pf-u-font-weight-bold pf-u-pb-md">
<div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
Cloud Provider Identifiers
</div>
<DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
<DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
<DescriptionListGroup>
<DescriptionListTerm>Image name</DescriptionListTerm>
<DescriptionListDescription>
@ -314,8 +318,10 @@ export const GcpDetails = ({ compose }: GcpDetailsPropTypes) => {
return (
<>
<div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
<DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
<div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
Build Information
</div>
<DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
<DescriptionListGroup>
<DescriptionListTerm>UUID</DescriptionListTerm>
<DescriptionListDescription>
@ -351,10 +357,10 @@ export const GcpDetails = ({ compose }: GcpDetailsPropTypes) => {
)}
</DescriptionList>
<br />
<div className="pf-u-font-weight-bold pf-u-pb-md">
<div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
Cloud Provider Identifiers
</div>
<DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
<DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
<DescriptionListGroup>
<DescriptionListTerm>Image name</DescriptionListTerm>
<DescriptionListDescription>
@ -393,8 +399,10 @@ export const OciDetails = ({ compose }: OciDetailsPropTypes) => {
return (
<>
<div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
<DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
<div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
Build Information
</div>
<DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
<DescriptionListGroup>
<DescriptionListTerm>UUID</DescriptionListTerm>
<DescriptionListDescription>
@ -414,10 +422,10 @@ export const OciDetails = ({ compose }: OciDetailsPropTypes) => {
</DescriptionListGroup>
</DescriptionList>
<br />
<div className="pf-u-font-weight-bold pf-u-pb-md">
<div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
Cloud Provider Identifiers
</div>
<DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
<DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
<DescriptionListGroup>
<DescriptionListTerm>Object Storage URL</DescriptionListTerm>
<DescriptionListDescription>
@ -445,8 +453,10 @@ type AwsS3DetailsPropTypes = {
export const AwsS3Details = ({ compose }: AwsS3DetailsPropTypes) => {
return (
<>
<div className="pf-u-font-weight-bold pf-u-pb-md">Build Information</div>
<DescriptionList isHorizontal isCompact className=" pf-u-pl-xl">
<div className="pf-v5-u-font-weight-bold pf-v5-u-pb-md">
Build Information
</div>
<DescriptionList isHorizontal isCompact className=" pf-v5-u-pl-xl">
<DescriptionListGroup>
<DescriptionListTerm>UUID</DescriptionListTerm>
<DescriptionListDescription>

2
src/Components/ImagesTable/ImagesTable.tsx
View file

@ -229,7 +229,7 @@ const ImagesTable = () => {
);
})}
</Table>
<Toolbar className="pf-u-mb-xl">
<Toolbar className="pf-v5-u-mb-xl">
<ToolbarContent>
<ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
<Pagination

4
src/Components/ImagesTable/Instance.tsx
View file

@ -316,7 +316,7 @@ export const OciInstance = ({ compose, isExpired }: OciInstancePropTypes) => {
iconPosition="right"
// TO DO update the link after documentation is up
href={FILE_SYSTEM_CUSTOMIZATION_URL}
className="pf-u-pl-0"
className="pf-v5-u-pl-0"
>
Read more about launching OCI images
</Button>
@ -325,7 +325,7 @@ export const OciInstance = ({ compose, isExpired }: OciInstancePropTypes) => {
>
<Button
variant="link"
className="pf-u-p-0 pf-u-font-size-sm"
className="pf-v5-u-p-0 pf-v5-u-font-size-sm"
isDisabled={data?.image_status.status === 'success' ? false : true}
>
Image link

14
src/Components/ImagesTable/Status.tsx
View file

@ -276,8 +276,8 @@ type StatusPropTypes = {
const Status = ({ icon, text }: StatusPropTypes) => {
return (
<Flex className="pf-u-align-items-baseline pf-m-nowrap">
<div className="pf-u-mr-sm">{icon}</div>
<Flex className="pf-v5-u-align-items-baseline pf-m-nowrap">
<div className="pf-v5-u-mr-sm">{icon}</div>
<p>{text}</p>
</Flex>
);
@ -312,8 +312,8 @@ const ErrorStatus = ({ icon, text, error }: ErrorStatusPropTypes) => {
}
return (
<Flex className="pf-u-align-items-baseline pf-m-nowrap">
<div className="pf-u-mr-sm">{icon}</div>
<Flex className="pf-v5-u-align-items-baseline pf-m-nowrap">
<div className="pf-v5-u-mr-sm">{icon}</div>
<Popover
data-testid="errorstatus-popover"
position="bottom"
@ -321,7 +321,7 @@ const ErrorStatus = ({ icon, text, error }: ErrorStatusPropTypes) => {
bodyContent={
<>
<Alert variant="danger" title={text} isInline isPlain />
<Text className="pf-u-pt-md pf-u-pb-md">{reason}</Text>
<Text className="pf-v5-u-pt-md pf-v5-u-pb-md">{reason}</Text>
<Panel isScrollable>
<PanelMain maxHeight="25rem">
<CodeBlock>
@ -336,14 +336,14 @@ const ErrorStatus = ({ icon, text, error }: ErrorStatusPropTypes) => {
reason + '\n\n' + detailsArray.join('\n')
)
}
className="pf-u-pl-0 pf-u-mt-md"
className="pf-v5-u-pl-0 pf-v5-u-mt-md"
>
Copy error text to clipboard <CopyIcon />
</Button>
</>
}
>
<Button variant="link" className="pf-u-p-0 pf-u-font-size-sm">
<Button variant="link" className="pf-v5-u-p-0 pf-v5-u-font-size-sm">
<div className="failure-button">{text}</div>
</Button>
</Popover>

6
src/Components/LandingPage/LandingPage.scss
View file

@ -1,13 +1,13 @@
.pf-c-form__group-label-help {
color: var(--pf-global--icon--Color--light);
color: var(--pf-v5-global--icon--Color--light);
}
.pf-c-form__group-label-help:active {
color: var(--pf-global--icon--Color--dark);
color: var(--pf-v5-global--icon--Color--dark);
}
.expand-section {
background-color: var(--pf-global--palette--white);
background-color: var(--pf-v5-global--palette--white);
}
.sidebar-panel {

18
src/Components/LandingPage/Quickstarts.tsx
View file

@ -13,13 +13,13 @@ export const Quickstarts = () => {
return (
<ExpandableSection
className="pf-m-light pf-u-mb-xl expand-section"
className="pf-m-light pf-v5-u-mb-xl expand-section"
toggleText="Help get started with new features"
onToggle={(_event, val) => setShowHint(val)}
isExpanded={showHint}
displaySize="lg"
>
<p className="pf-u-pt-sm">
<p className="pf-v5-u-pt-sm">
<Button
icon={<ArrowRightIcon />}
iconPosition="right"
@ -27,12 +27,12 @@ export const Quickstarts = () => {
isInline
component="a"
onClick={activateQuickstart('insights-launch-aws')}
className="pf-u-font-weight-bold"
className="pf-v5-u-font-weight-bold"
>
Launch an AWS Image
</Button>
</p>
<p className="pf-u-pt-sm">
<p className="pf-v5-u-pt-sm">
<Button
icon={<ArrowRightIcon />}
iconPosition="right"
@ -40,12 +40,12 @@ export const Quickstarts = () => {
isInline
component="a"
onClick={activateQuickstart('insights-launch-azure')}
className="pf-u-font-weight-bold"
className="pf-v5-u-font-weight-bold"
>
Launch an Azure Image
</Button>
</p>
<p className="pf-u-pt-sm">
<p className="pf-v5-u-pt-sm">
<Button
icon={<ArrowRightIcon />}
iconPosition="right"
@ -53,12 +53,12 @@ export const Quickstarts = () => {
isInline
component="a"
onClick={activateQuickstart('insights-launch-gcp')}
className="pf-u-font-weight-bold"
className="pf-v5-u-font-weight-bold"
>
Launch a GCP Image
</Button>
</p>
<p className="pf-u-pt-sm">
<p className="pf-v5-u-pt-sm">
<Button
icon={<ArrowRightIcon />}
iconPosition="right"
@ -66,7 +66,7 @@ export const Quickstarts = () => {
isInline
component="a"
onClick={activateQuickstart('insights-custom-repos')}
className="pf-u-font-weight-bold"
className="pf-v5-u-font-weight-bold"
>
Build an Image with Custom Content
</Button>

2
src/Components/ShareImageModal/RegionsSelect.tsx
View file

@ -224,7 +224,7 @@ const RegionsSelect = ({ composeId, handleClose }: RegionsSelectPropTypes) => {
<Button
variant="plain"
aria-label="About regions"
className="pf-u-pl-sm header-button"
className="pf-v5-u-pl-sm header-button"
isInline
>
<HelpIcon />

4
src/Components/sharedComponents/BetaLabel.scss
View file

@ -1,5 +1,5 @@
.beta-label {
--pf-c-label--BackgroundColor: var(--pf-global--palette--green-300);
--pf-c-label__content--before--BorderColor: var(--pf-global--palette--green-300);
--pf-c-label--BackgroundColor: var(--pf-v5-global--palette--green-300);
--pf-c-label__content--before--BorderColor: var(--pf-v5-global--palette--green-300);
margin-right: .5rem;
}

2
src/Components/sharedComponents/ImageBuilderHeader.tsx
View file

@ -84,7 +84,7 @@ const AboutImageBuilderPopover = () => {
<Button
variant="plain"
aria-label="About image builder"
className="pf-u-pl-sm header-button"
className="pf-v5-u-pl-sm header-button"
>
<HelpIcon />
</Button>