{direction === 'ingress'
@@ -56,19 +57,21 @@ export const NetworkPolicyPeerIPBlock: React.FunctionComponent
{t('console-app~Exceptions')}
{ipBlock.except.map((exc, idx) => (
-
-
handleExceptionsChange(idx, event.currentTarget.value)}
- placeholder="10.2.1.0/12"
- aria-describedby="ports-help"
- name={`exception-${idx}`}
- id={`exception-${idx}`}
- value={exc.value}
- data-test="ipblock-exception-input"
- />
+
))}
}
className="pf-m-link--align-left"
onClick={() => {
ipBlock.except.push({ key: _.uniqueId('exception-'), value: '' });
@@ -97,7 +99,6 @@ export const NetworkPolicyPeerIPBlock: React.FunctionComponent
variant="link"
data-test="ipblock-add-exception"
>
-
diff --git a/frontend/packages/console-app/src/components/network-policies/network-policy-ports.tsx b/frontend/packages/console-app/src/components/network-policies/network-policy-ports.tsx
index 857b240d268..543c67af39e 100644
--- a/frontend/packages/console-app/src/components/network-policies/network-policy-ports.tsx
+++ b/frontend/packages/console-app/src/components/network-policies/network-policy-ports.tsx
@@ -34,7 +34,7 @@ export const NetworkPolicyPorts: React.FunctionComponent
{
const key = `port-${idx}`;
return (
-
+
TCP,
@@ -47,33 +47,34 @@ export const NetworkPolicyPorts: React.FunctionComponent onSingleChange({ ...port, protocol }, idx)}
data-test="port-protocol"
/>
-
+
);
})}
}
className="pf-m-link--align-left"
onClick={() => {
onChange([...ports, { key: _.uniqueId('port-'), port: '', protocol: 'TCP' }]);
@@ -82,7 +83,6 @@ export const NetworkPolicyPorts: React.FunctionComponent
-
diff --git a/frontend/packages/console-app/src/components/network-policies/network-policy-rule-config.tsx b/frontend/packages/console-app/src/components/network-policies/network-policy-rule-config.tsx
index d31b85dc69e..f5c1fa251ed 100644
--- a/frontend/packages/console-app/src/components/network-policies/network-policy-rule-config.tsx
+++ b/frontend/packages/console-app/src/components/network-policies/network-policy-rule-config.tsx
@@ -146,15 +146,14 @@ export const NetworkPolicyRuleConfigPanel: React.FunctionComponent
}
aria-label={t('console-app~Remove peer')}
className="co-create-networkpolicy__remove-peer"
onClick={() => removePeer(idx)}
type="button"
variant="plain"
data-test="remove-peer"
- >
-
-
+ />
}
/>
}
diff --git a/frontend/packages/console-app/src/components/nodes/NodeDetailsConditions.tsx b/frontend/packages/console-app/src/components/nodes/NodeDetailsConditions.tsx
index 4ec3ac67bf1..4cc83766fe4 100644
--- a/frontend/packages/console-app/src/components/nodes/NodeDetailsConditions.tsx
+++ b/frontend/packages/console-app/src/components/nodes/NodeDetailsConditions.tsx
@@ -15,30 +15,30 @@ const NodeDetailsConditions: React.FC
= ({ node }) =
-
-
-
- {t('console-app~Type')}
- {t('console-app~Status')}
- {t('console-app~Reason')}
- {t('console-app~Updated')}
- {t('console-app~Changed')}
+
+
+
+ {t('console-app~Type')}
+ {t('console-app~Status')}
+ {t('console-app~Reason')}
+ {t('console-app~Updated')}
+ {t('console-app~Changed')}
-
+
{_.map(node.status.conditions, (c, i) => (
-
-
+
+
- {c.status || '-'}
-
+ {c.status || '-'}
+
-
+
-
+
diff --git a/frontend/packages/console-app/src/components/nodes/NodeDetailsImages.tsx b/frontend/packages/console-app/src/components/nodes/NodeDetailsImages.tsx
index a481c8c4235..bbeb61db6a0 100644
--- a/frontend/packages/console-app/src/components/nodes/NodeDetailsImages.tsx
+++ b/frontend/packages/console-app/src/components/nodes/NodeDetailsImages.tsx
@@ -15,22 +15,22 @@ const NodeDetailsImages: React.FC = ({ node }) => {
-
-
-
- {t('console-app~Name')}
- {t('console-app~Size')}
+
+
+
+ {t('console-app~Name')}
+ {t('console-app~Size')}
-
+
{_.map(images, (image, i) => (
-
-
+
+
{image.names.find(
(name: string) => !name.includes('@') && !name.includes(''),
) || image.names[0]}
-
+
{units.humanize(image.sizeBytes, 'binaryBytes', true).string || '-'}
diff --git a/frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsx b/frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsx
index bd41051298c..49a9a083bd2 100644
--- a/frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsx
+++ b/frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsx
@@ -78,6 +78,8 @@ const NodeDetailsOverview: React.FC = ({ node }) => {
{canUpdate ? (
= ({ node }) => {
>
{_.size(node.spec.taints)}{' '}
{t('console-app~Taint', { count: _.size(node.spec.taints) })}
-
@@ -98,6 +99,8 @@ const NodeDetailsOverview: React.FC = ({ node }) => {
{canUpdate ? (
= ({ node }) => {
>
{_.size(node.metadata.annotations)}{' '}
{t('console-app~Annotation', { count: _.size(node.metadata.annotations) })}
-
diff --git a/frontend/packages/console-app/src/components/nodes/NodeLogs.tsx b/frontend/packages/console-app/src/components/nodes/NodeLogs.tsx
index 3882a0921c5..7364972518d 100644
--- a/frontend/packages/console-app/src/components/nodes/NodeLogs.tsx
+++ b/frontend/packages/console-app/src/components/nodes/NodeLogs.tsx
@@ -5,7 +5,6 @@ import {
EmptyState,
EmptyStateBody,
EmptyStateVariant,
- EmptyStateHeader,
EmptyStateFooter,
MenuToggle,
MenuToggleElement,
@@ -151,7 +150,7 @@ const LogControls: React.FC = ({
)}
-
+
= ({ obj: node }) => {
)}
{isLoadingLog ? (
!isJournal && !logFilename ? (
-
-
- {isLoadingFilenames ? (
-
+ {isLoadingFilenames ? (
+
{logFilenamesExist && (
{t('public~Select a log file above')}
diff --git a/frontend/packages/console-app/src/components/nodes/NodeLogsUnitFilter.tsx b/frontend/packages/console-app/src/components/nodes/NodeLogsUnitFilter.tsx
index 4e72f974b54..229cdd3f34d 100644
--- a/frontend/packages/console-app/src/components/nodes/NodeLogsUnitFilter.tsx
+++ b/frontend/packages/console-app/src/components/nodes/NodeLogsUnitFilter.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Chip, ChipGroup, TextInput, ToolbarItem } from '@patternfly/react-core';
+import { Label, LabelGroup, TextInput, ToolbarItem } from '@patternfly/react-core';
import * as _ from 'lodash';
import { useTranslation } from 'react-i18next';
import { getQueryArgument } from '@console/internal/components/utils';
@@ -71,13 +71,13 @@ const NodeLogsUnitFilter: React.FC = ({ onChangeUnit })
{values.length > 0 && (
-
+
{values?.map((v) => (
- deleteValue(v)}>
+ deleteValue(v)}>
{v}
-
+
))}
-
+
)}
diff --git a/frontend/packages/console-app/src/components/nodes/node-dashboard/ActivityCard.tsx b/frontend/packages/console-app/src/components/nodes/node-dashboard/ActivityCard.tsx
index bd7b403b1e3..77c1116e816 100644
--- a/frontend/packages/console-app/src/components/nodes/node-dashboard/ActivityCard.tsx
+++ b/frontend/packages/console-app/src/components/nodes/node-dashboard/ActivityCard.tsx
@@ -37,12 +37,7 @@ const ActivityCard: React.FC = () => {
const eventsLink = `${resourcePathFromModel(NodeModel, obj.metadata.name)}/events`;
const { t } = useTranslation();
return (
-
+
{
const zone = obj.metadata.labels?.['topology.kubernetes.io/zone'];
const { t } = useTranslation();
return (
-
+
{
const { obj } = React.useContext(NodeDashboardContext);
const { t } = useTranslation();
return (
-
+
{t('console-app~Status')}
diff --git a/frontend/packages/console-app/src/components/nodes/node-dashboard/UtilizationCard.tsx b/frontend/packages/console-app/src/components/nodes/node-dashboard/UtilizationCard.tsx
index 19b40afedca..4c1f1761acf 100644
--- a/frontend/packages/console-app/src/components/nodes/node-dashboard/UtilizationCard.tsx
+++ b/frontend/packages/console-app/src/components/nodes/node-dashboard/UtilizationCard.tsx
@@ -50,7 +50,7 @@ const UtilizationCard: React.FC = () => {
);
return (
-
+
= ({ identityPr
-
-
-
- {t('console-app~Name')}
- {t('console-app~Type')}
- {t('console-app~Mapping method')}
+
+
+
+ {t('console-app~Name')}
+ {t('console-app~Type')}
+ {t('console-app~Mapping method')}
-
+
{_.map(identityProviders, (idp) => (
-
-
+
+
{idp.name}
-
+
{idp.type}
-
+
{idp.mappingMethod || 'claim'}
diff --git a/frontend/packages/console-app/src/components/pdb/AvailabilityRequirementPopover.tsx b/frontend/packages/console-app/src/components/pdb/AvailabilityRequirementPopover.tsx
index de18958f383..655fb20b71e 100644
--- a/frontend/packages/console-app/src/components/pdb/AvailabilityRequirementPopover.tsx
+++ b/frontend/packages/console-app/src/components/pdb/AvailabilityRequirementPopover.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Text, Title, Stack, StackItem } from '@patternfly/react-core';
+import { Content, Title, Stack, StackItem } from '@patternfly/react-core';
import { useTranslation } from 'react-i18next';
import {
DOC_URL_PODDISRUPTIONBUDGET_POLICY,
@@ -19,21 +19,21 @@ const AvailabilityRequirementPopover: React.FC = () => {
{t('console-app~maxUnavailable')}
-
+
{t(
'console-app~An eviction is allowed if at most "maxUnavailable" pods selected by "selector" are unavailable after the eviction, i.e. even in absence of the evicted pod. For example, one can prevent all voluntary evictions by specifying 0. This is a mutually exclusive setting with "minAvailable".',
)}
-
+
{t('console-app~minAvailable')}
-
+
{t(
'console-app~An eviction is allowed if at least "minAvailable" pods selected by "selector" will still be available after the eviction, i.e. even in the absence of the evicted pod. So for example you can prevent all voluntary evictions by specifying "100%".',
)}
-
+
{t('console-app~More information:')}
diff --git a/frontend/packages/console-app/src/components/pdb/PDBAlert.tsx b/frontend/packages/console-app/src/components/pdb/PDBAlert.tsx
index ace06e8b7ba..819d56732c5 100644
--- a/frontend/packages/console-app/src/components/pdb/PDBAlert.tsx
+++ b/frontend/packages/console-app/src/components/pdb/PDBAlert.tsx
@@ -2,10 +2,7 @@ import * as React from 'react';
import { Label } from '@patternfly/react-core';
import { Trans, useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom-v5-compat';
-import {
- useK8sWatchResource,
- YellowExclamationTriangleIcon,
-} from '@console/dynamic-plugin-sdk/src/api/core-api';
+import { useK8sWatchResource } from '@console/dynamic-plugin-sdk/src/api/core-api';
import { resourcePathFromModel } from '@console/internal/components/utils/resource-link';
import { useTelemetry } from '@console/shared/src/hooks/useTelemetry';
import { PodDisruptionBudgetModel } from '../../models';
@@ -48,7 +45,7 @@ export const PDBAlert: React.FC = ({ namespace }) => {
return (
<>
{pdbCount > 0 && loaded && !loadError && (
-
{{ count: pdbCount }} PodDisruptionBudget violated
diff --git a/frontend/packages/console-app/src/components/pdb/PDBForm.tsx b/frontend/packages/console-app/src/components/pdb/PDBForm.tsx
index c638670b0c7..1effcc8cfe7 100644
--- a/frontend/packages/console-app/src/components/pdb/PDBForm.tsx
+++ b/frontend/packages/console-app/src/components/pdb/PDBForm.tsx
@@ -5,7 +5,7 @@ import {
Form,
TextInput,
FormGroup,
- Text,
+ Content,
Title,
ValidatedOptions,
Select,
@@ -78,7 +78,7 @@ const PDBForm: React.FC = ({
const [isDisabled, setDisabled] = React.useState(true);
const [labels, setLabels] = React.useState([]);
const [matchingSelector, setMatchingSelector] = React.useState(null);
- const [isOpen, setOpen] = React.useState(false);
+ const [isOpen, setIsOpen] = React.useState(false);
const items: RequirementItems = React.useMemo(
() => ({
maxUnavailable: t('console-app~maxUnavailable'),
@@ -127,7 +127,7 @@ const PDBForm: React.FC = ({
const handleAvailabilityRequirementKeyChange = (value: string) => {
setRequirement(value);
- setOpen(!isOpen);
+ setIsOpen(!isOpen);
setDisabled(false);
onFormValuesChange({
...formValues,
@@ -183,14 +183,14 @@ const PDBForm: React.FC = ({
{t('console-app~Selector')}
-
+
{t(
'console-app~Label query over pods whose evictions are managed by the disruption budget. Anull selector will match no pods, while an empty ({}) selector will select all pods within the namespace.',
)}
-
+
}
>
@@ -221,13 +221,13 @@ const PDBForm: React.FC = ({
setOpen(open)}
+ onOpenChange={(open) => setIsOpen(open)}
selected={selectedRequirement}
onSelect={(value: string) => handleAvailabilityRequirementKeyChange(value)}
toggle={(toggleRef: React.Ref) => (
@@ -235,7 +235,7 @@ const PDBForm: React.FC = ({
ref={toggleRef}
isExpanded={isOpen}
isFullWidth
- onClick={(open) => setOpen(open)}
+ onClick={() => setIsOpen(!isOpen)}
>
{selectedRequirement}
@@ -292,7 +292,7 @@ const PDBForm: React.FC = ({
)}
-
+
{
const { t } = useTranslation();
diff --git a/frontend/packages/console-app/src/components/quick-starts/QuickStartConfiguration.tsx b/frontend/packages/console-app/src/components/quick-starts/QuickStartConfiguration.tsx
index 68032912438..d2661887f3c 100644
--- a/frontend/packages/console-app/src/components/quick-starts/QuickStartConfiguration.tsx
+++ b/frontend/packages/console-app/src/components/quick-starts/QuickStartConfiguration.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import { QuickStart } from '@patternfly/quickstarts';
-import { DualListSelector, FormSection } from '@patternfly/react-core';
+import { FormSection } from '@patternfly/react-core';
+import { DualListSelector } from '@patternfly/react-core/deprecated';
import * as fuzzy from 'fuzzysearch';
import { useTranslation } from 'react-i18next';
import {
diff --git a/frontend/packages/console-app/src/components/tabs/Tabs.tsx b/frontend/packages/console-app/src/components/tabs/Tabs.tsx
index f7d3824d378..3d6fa33b989 100644
--- a/frontend/packages/console-app/src/components/tabs/Tabs.tsx
+++ b/frontend/packages/console-app/src/components/tabs/Tabs.tsx
@@ -33,7 +33,7 @@ export interface TabsProps
/** Additional classes added to the tabs */
className?: string;
/** Tabs background color variant */
- variant?: 'default' | 'light300';
+ variant?: 'default' | 'secondary';
/** The index of the active tab */
activeKey?: number | string;
/** The index of the default active tab. Set this for uncontrolled Tabs */
@@ -96,7 +96,7 @@ export interface TabsProps
const variantStyle = {
default: '',
- light300: styles.modifiers.colorSchemeLight_300,
+ secondary: styles.modifiers.secondary,
};
interface TabsState {
@@ -400,28 +400,35 @@ export class Tabs extends React.Component {
+
+
+ {toggleText && (
+
+ {toggleText}
+
+ )}
+
+ }
onClick={() => toggleTabs(!isExpandedLocal)}
variant="plain"
aria-label={toggleAriaLabel}
aria-expanded={isExpandedLocal}
id={`${randomId}-button`}
aria-labelledby={`${randomId}-text ${randomId}-button`}
- >
-
-
- {toggleText && (
-
- {toggleText}
-
- )}
-
+ />
)}
)}
{
onClick={this.scrollLeft}
disabled={disableLeftScrollButton}
aria-hidden={disableLeftScrollButton}
- >
-
+ />
{
onClick={this.scrollRight}
disabled={disableRightScrollButton}
aria-hidden={disableRightScrollButton}
- >
- = ({
placement,
nextButtonText,
backButtonText,
- showClose = true,
showStepBadge = true,
}) => {
const {
@@ -38,7 +36,6 @@ const StepComponent: React.FC = ({
heading={heading}
selector={selector}
placement={placement}
- showClose={showClose}
totalSteps={totalSteps}
showStepBadge={showStepBadge}
nextButtonText={nextButtonText}
diff --git a/frontend/packages/console-app/src/components/tour/TourStepComponent.scss b/frontend/packages/console-app/src/components/tour/TourStepComponent.scss
index 9a3ec019541..a81808c5214 100644
--- a/frontend/packages/console-app/src/components/tour/TourStepComponent.scss
+++ b/frontend/packages/console-app/src/components/tour/TourStepComponent.scss
@@ -1,3 +1,3 @@
-.co-tour-step-component > .pf-v5-c-modal-box__footer {
+.co-tour-step-component > .pf-v6-c-modal-box__footer {
display: block;
}
diff --git a/frontend/packages/console-app/src/components/tour/TourStepComponent.tsx b/frontend/packages/console-app/src/components/tour/TourStepComponent.tsx
index 6d97b930b46..2ab8411be93 100644
--- a/frontend/packages/console-app/src/components/tour/TourStepComponent.tsx
+++ b/frontend/packages/console-app/src/components/tour/TourStepComponent.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { ModalVariant } from '@patternfly/react-core';
+import { ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
+import { ModalVariant } from '@patternfly/react-core/deprecated';
import { useTranslation } from 'react-i18next';
import { Popover, PopoverPlacement, Modal, Spotlight } from '@console/shared';
import StepBadge from './steps/StepBadge';
@@ -13,7 +14,6 @@ type TourStepComponentProps = {
placement?: string;
heading: string;
content: React.ReactNode;
- showClose?: boolean;
step?: number;
totalSteps?: number;
showStepBadge?: boolean;
@@ -30,7 +30,6 @@ const TourStepComponent: React.FC = ({
content,
selector,
showStepBadge,
- showClose,
step,
totalSteps,
nextButtonText,
@@ -83,17 +82,16 @@ const TourStepComponent: React.FC = ({
- {stepContent}
+ {header}
+ {stepContent}
+ {footer}
);
};
diff --git a/frontend/packages/console-app/src/components/tour/steps/StepBadge.scss b/frontend/packages/console-app/src/components/tour/steps/StepBadge.scss
index 3f9a8b11599..0091c9e21f6 100644
--- a/frontend/packages/console-app/src/components/tour/steps/StepBadge.scss
+++ b/frontend/packages/console-app/src/components/tour/steps/StepBadge.scss
@@ -1,4 +1,4 @@
.co-step-badge {
font-size: 14px;
- color: var(--pf-v5-global--Color--200);
+ color: var(--pf-t--global--icon--color--subtle);
}
diff --git a/frontend/packages/console-app/src/components/user-preferences/UserPreferenceField.scss b/frontend/packages/console-app/src/components/user-preferences/UserPreferenceField.scss
index 2298b9b98e1..014f8f336de 100644
--- a/frontend/packages/console-app/src/components/user-preferences/UserPreferenceField.scss
+++ b/frontend/packages/console-app/src/components/user-preferences/UserPreferenceField.scss
@@ -1,5 +1,5 @@
.co-user-preference-field {
&--description {
- margin-bottom: var(--pf-v5-global--spacer--lg);
+ margin-bottom: var(--pf-t--global--spacer--lg);
}
}
diff --git a/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.scss b/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.scss
index d72cb41c2a9..72e565dde13 100644
--- a/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.scss
+++ b/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.scss
@@ -1,21 +1,20 @@
.co-user-preference-page {
display: flex;
min-height: 100%;
- background-color: var(--pf-v5-global--BackgroundColor--200);
overflow-y: auto;
flex-direction: column;
// Fix missing white background color above the header.
.ocs-page-layout__title {
margin-top: 0;
- padding-top: var(--pf-v5-global--spacer--lg);
+ padding-top: var(--pf-t--global--spacer--lg);
}
}
.co-user-preference-page-content {
display: flex;
flex-direction: row;
- background-color: var(--pf-v5-global--BackgroundColor--100);
+ background-color: var(--pf-t--global--background--color--primary--default);
min-height: 100%;
&__tabs {
@media (min-width: 769px) {
@@ -31,12 +30,12 @@
}
}
&__tab-content {
- margin: var(--pf-v5-global--spacer--lg);
+ margin: var(--pf-t--global--spacer--lg);
max-width: 100%;
}
//workaround for patternfly bug which causes the buttons to show even when isVertical prop is true
- .pf-v5-c-tabs__scroll-button {
+ .pf-v6-c-tabs__scroll-button {
display: none;
}
}
diff --git a/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.tsx b/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.tsx
index 50fbcfabfa3..d874072797e 100644
--- a/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.tsx
+++ b/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.tsx
@@ -142,7 +142,7 @@ const UserPreferencePage: React.FC = () => {
activeKey={activeTabId}
onSelect={handleTabClick}
isVertical
- variant="light300"
+ variant="secondary"
data-test="user-preferences tabs"
>
<>{userPreferenceTabs}
diff --git a/frontend/packages/console-app/src/components/user-preferences/language/LanguageDropdown.scss b/frontend/packages/console-app/src/components/user-preferences/language/LanguageDropdown.scss
index 58ee68bd93a..5f0d29f6127 100644
--- a/frontend/packages/console-app/src/components/user-preferences/language/LanguageDropdown.scss
+++ b/frontend/packages/console-app/src/components/user-preferences/language/LanguageDropdown.scss
@@ -1,3 +1,3 @@
.co-language-dropdown__system-default-checkbox {
- margin-bottom: var(--pf-v5-global--spacer--sm) !important;
+ margin-bottom: var(--pf-t--global--spacer--sm) !important;
}
diff --git a/frontend/packages/console-app/src/components/user-preferences/namespace/NamespaceDropdown.scss b/frontend/packages/console-app/src/components/user-preferences/namespace/NamespaceDropdown.scss
index 891efcdce6b..085b03cba9f 100644
--- a/frontend/packages/console-app/src/components/user-preferences/namespace/NamespaceDropdown.scss
+++ b/frontend/packages/console-app/src/components/user-preferences/namespace/NamespaceDropdown.scss
@@ -1,13 +1,16 @@
-.pf-v5-c-menu-toggle.co-user-preference__namespace-menu-toggle {
- padding: var(--pf-v5-global--spacer--form-element) var(--pf-v5-global--spacer--sm)
- var(--pf-v5-global--spacer--form-element) var(--pf-v5-global--spacer--sm) !important;
- background-color: var(--pf-v5-global--BackgroundColor--400);
+.pf-v6-c-menu-toggle.co-user-preference__namespace-menu-toggle {
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor) !important;
+ font-size: var(--pf-v6-c-menu-toggle--FontSize) !important;
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart) !important;
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd) !important;
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart) !important;
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd) !important;
&::before,
&::after {
- border-width: var(--pf-v5-global--BorderWidth--sm) !important;
+ border-width: var(--pf-t--global--border--width--regular) !important;
}
- .pf-v5-c-menu-toggle__text {
- font-size: var(--pf-v5-global--FontSize--md);
+ .pf-v6-c-menu-toggle__text {
+ font-size: var(--pf-v6-c-menu-toggle--FontSize) !important;
}
}
diff --git a/frontend/packages/console-app/src/components/user-preferences/namespace/NamespaceDropdown.tsx b/frontend/packages/console-app/src/components/user-preferences/namespace/NamespaceDropdown.tsx
index c271dc6a4f7..9b804bf44cf 100644
--- a/frontend/packages/console-app/src/components/user-preferences/namespace/NamespaceDropdown.tsx
+++ b/frontend/packages/console-app/src/components/user-preferences/namespace/NamespaceDropdown.tsx
@@ -2,14 +2,12 @@ import * as React from 'react';
import {
Skeleton,
EmptyState,
- EmptyStateIcon,
EmptyStateBody,
Divider,
Menu,
MenuItem,
MenuContent,
MenuList,
- EmptyStateHeader,
} from '@patternfly/react-core';
import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
import fuzzysearch from 'fuzzysearch';
@@ -103,12 +101,12 @@ const NamespaceDropdown: React.FC = () => {
? t('console-app~Projects failed to load. Check your connection and reload the page.')
: t('console-app~Namespaces failed to load. Check your connection and reload the page.');
const loadErrorState: JSX.Element = optionsLoadError ? (
-
- {t('console-app~Unable to load')}}
- icon={{t('console-app~Unable to load')}}
+ data-test={'dropdown console.preferredNamespace error'}
+ >
{loadErrorDescription}
) : null;
diff --git a/frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/_create-volume-snapshot.scss b/frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/_create-volume-snapshot.scss
index bda72ed4f88..4c44428052a 100644
--- a/frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/_create-volume-snapshot.scss
+++ b/frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/_create-volume-snapshot.scss
@@ -6,15 +6,15 @@
}
.co-volume-snapshot__form {
- margin: var(--pf-v5-global--spacer--md) 0;
+ margin: var(--pf-t--global--spacer--md) 0;
}
.co-volume-snapshot__details-body {
- margin-bottom: var(--pf-v5-global--spacer--md);
+ margin-bottom: var(--pf-t--global--spacer--md);
}
.co-volume-snapshot__alert-body {
- margin-top: var(--pf-v5-global--spacer--md);
+ margin-top: var(--pf-t--global--spacer--md);
}
.co-volume-snapshot__info {
diff --git a/frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/create-volume-snapshot.tsx b/frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/create-volume-snapshot.tsx
index e95fc217b18..b45f88dca03 100644
--- a/frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/create-volume-snapshot.tsx
+++ b/frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/create-volume-snapshot.tsx
@@ -268,15 +268,16 @@ const CreateSnapshotForm = withHandlePromise((props) => {
{t('console-app~Name')}
-
+
{pvcObj && (
@@ -301,7 +302,7 @@ const CreateSnapshotForm = withHandlePromise((props) => {
)}
-
+
> = ({ obj, activeColumnIDs })
+
diff --git a/frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md b/frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md
index f982fd0ef8b..54c70f795da 100644
--- a/frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md
+++ b/frontend/packages/console-dynamic-plugin-sdk/docs/console-extensions.md
@@ -1331,7 +1331,7 @@ This extension allows plugins to contribute an add action item to the add page o
| `groupId` | `string` | yes | IDs used to identify the action groups the action would belong to. |
| `href` | `string` | yes | The href to navigate to. |
| `callback` | `CodeRef<(props: Record) => void>` | yes | A callback that performs an action on click |
-| `icon` | `CodeRef` | yes | The perspective display icon. |
+| `icon` | `CodeRef` | yes | The perspective display icon. If possible, use a PatternFly icon for consistent icon colours and styling. |
| `accessReview` | `AccessReviewResourceAttributes[]` | yes | Optional access review to control visibility / enablement of the action. |
---
diff --git a/frontend/packages/console-dynamic-plugin-sdk/scripts/parsers/ConstructorTypeParser.ts b/frontend/packages/console-dynamic-plugin-sdk/scripts/parsers/ConstructorTypeParser.ts
index ce485debb73..849cd329d0b 100644
--- a/frontend/packages/console-dynamic-plugin-sdk/scripts/parsers/ConstructorTypeParser.ts
+++ b/frontend/packages/console-dynamic-plugin-sdk/scripts/parsers/ConstructorTypeParser.ts
@@ -3,7 +3,7 @@ import * as ts from 'typescript';
class ConstructorType extends tsj.BaseType {
getId() {
- return 'constructor';
+ return 'function Object() { [native code] }';
}
}
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/api/dynamic-core-api.ts b/frontend/packages/console-dynamic-plugin-sdk/src/api/dynamic-core-api.ts
index 2ded5c497df..26d89059423 100644
--- a/frontend/packages/console-dynamic-plugin-sdk/src/api/dynamic-core-api.ts
+++ b/frontend/packages/console-dynamic-plugin-sdk/src/api/dynamic-core-api.ts
@@ -134,7 +134,7 @@ export const VirtualizedTable: VirtualizedTableFC = require('@console/internal/c
*
* // Important: the kebab menu cell should include the id and className prop values below
- *
+ *
*
*
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/icons.scss b/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/icons.scss
index 34fbffe38f3..024daca6e77 100644
--- a/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/icons.scss
+++ b/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/icons.scss
@@ -1,14 +1,14 @@
.dps-icons {
&__green-check-icon {
- fill: var(--pf-v5-global--palette--green-500) !important;
+ fill: var(--pf-t--global--icon--color--status--success--default) !important;
}
&__red-exclamation-icon {
- fill: var(--pf-v5-global--danger-color--100) !important;
+ fill: var(--pf-t--global--icon--color--status--danger--default) !important;
}
&__yellow-exclamation-icon {
- fill: var(--pf-v5-global--warning-color--100) !important;
+ fill: var(--pf-t--global--icon--color--status--warning--default) !important;
}
&__blue-info-icon {
- fill: var(--pf-v5-global--palette--blue-300) !important;
+ fill: var(--pf-t--global--icon--color--status--info--default) !important;
}
}
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/icons.tsx b/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/icons.tsx
index 1f00d88c52f..2eeb304b4da 100644
--- a/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/icons.tsx
+++ b/frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/icons.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Icon } from '@patternfly/react-core';
+import { Icon, IconSize } from '@patternfly/react-core';
import {
CheckCircleIcon,
ExclamationCircleIcon,
@@ -13,7 +13,7 @@ import './icons.scss';
export type ColoredIconProps = {
className?: string;
title?: string;
- size?: 'sm' | 'md' | 'lg' | 'xl';
+ size?: IconSize;
dataTest?: string;
};
@@ -21,7 +21,7 @@ export type ColoredIconProps = {
* Component for displaying a green check mark circle icon.
* @param {string} [className] - (optional) additional class name for the component
* @param {string} [title] - (optional) icon title
- * @param {string} [size] - (optional) icon size: ('sm', 'md', 'lg', 'xl')
+ * @param {string} [size] - (optional) icon size: ('sm', 'md', 'lg', 'xl', '2xl', '3xl', 'headingSm', 'headingMd', 'headingLg', 'headingXl', 'heading_2xl', 'heading_3xl', 'bodySm', 'bodyDefault', 'bodyLg')
* @example
* ```tsx
* ) => void>;
- /** The perspective display icon. */
+ /** The perspective display icon. If possible, use a PatternFly icon for consistent icon colours and styling. */
icon?: CodeRef;
/** Optional access review to control visibility / enablement of the action. */
accessReview?: AccessReviewResourceAttributes[];
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/extensions/catalog.ts b/frontend/packages/console-dynamic-plugin-sdk/src/extensions/catalog.ts
index b61d6634ac6..d9d3b2984b7 100644
--- a/frontend/packages/console-dynamic-plugin-sdk/src/extensions/catalog.ts
+++ b/frontend/packages/console-dynamic-plugin-sdk/src/extensions/catalog.ts
@@ -185,7 +185,7 @@ export type CatalogItemAttribute = {
export type CatalogItemBadge = {
text: string;
- color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';
+ color?: 'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'grey';
icon?: React.ReactNode;
variant?: 'outline' | 'filled';
};
diff --git a/frontend/packages/console-plugin-sdk/src/__tests__/store.spec.ts b/frontend/packages/console-plugin-sdk/src/__tests__/store.spec.ts
index 5bb46b718dc..a483bf35a8e 100644
--- a/frontend/packages/console-plugin-sdk/src/__tests__/store.spec.ts
+++ b/frontend/packages/console-plugin-sdk/src/__tests__/store.spec.ts
@@ -237,7 +237,7 @@ describe('PluginStore', () => {
store.addDynamicPlugin(`${manifest.name}@${manifest.version}`, manifest, resolvedExtensions);
};
- describe('constructor', () => {
+ describe('function Object() { [native code] }', () => {
it('initializes static plugin information', () => {
const store = new PluginStore([
{
diff --git a/frontend/packages/console-plugin-shared/src/components/Markdown/MarkdownView.tsx b/frontend/packages/console-plugin-shared/src/components/Markdown/MarkdownView.tsx
index d1714ca5d3d..8b9d12d84cb 100644
--- a/frontend/packages/console-plugin-shared/src/components/Markdown/MarkdownView.tsx
+++ b/frontend/packages/console-plugin-shared/src/components/Markdown/MarkdownView.tsx
@@ -226,7 +226,7 @@ const IFrameMarkdownView: React.FC = ({
body {
background-color: transparent !important;
color: ${isEmpty ? '#999' : '#333'};
- font-family: var(--pf-v5-global--FontFamily--text);
+ font-family: var(--pf-t--global--font--family--body);
min-width: auto !important;
}
table {
@@ -236,7 +236,7 @@ const IFrameMarkdownView: React.FC = ({
}
td,
th {
- border-bottom: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--300);
+ border-bottom: var(--pf-t--global--border--width--divider--default) solid var(--pf-t--global--border--color--default);
padding: 10px;
vertical-align: top;
}
@@ -244,7 +244,7 @@ const IFrameMarkdownView: React.FC = ({
padding-top: 0;
}
- ${markup}
`;
+ ${markup}
`;
// update the iframe's content
React.useEffect(() => {
diff --git a/frontend/packages/console-shared/locales/en/console-shared.json b/frontend/packages/console-shared/locales/en/console-shared.json
index 0d235051ecc..6d30c3f5891 100644
--- a/frontend/packages/console-shared/locales/en/console-shared.json
+++ b/frontend/packages/console-shared/locales/en/console-shared.json
@@ -106,7 +106,6 @@
"Error": "Error",
"Fix the following errors:": "Fix the following errors:",
"true": "true",
- "false": "false",
"Select {{label}}": "Select {{label}}",
"Cluster does not have resource {{groupVersionKind}}": "Cluster does not have resource {{groupVersionKind}}",
"Ask OpenShift Lightspeed": "Ask OpenShift Lightspeed",
@@ -162,6 +161,7 @@
"Form view is disabled for this chart because the schema is not available": "Form view is disabled for this chart because the schema is not available",
"Getting started resources": "Getting started resources",
"Use our collection of resources to help you get started with the Console.": "Use our collection of resources to help you get started with the Console.",
+ "Expandable details": "Expandable details",
"More info": "More info",
"View all quick starts": "View all quick starts",
"Build with guided documentation": "Build with guided documentation",
diff --git a/frontend/packages/console-shared/src/components/actions/menu/ActionMenu.tsx b/frontend/packages/console-shared/src/components/actions/menu/ActionMenu.tsx
index 47cff983bd8..f45016912c8 100644
--- a/frontend/packages/console-shared/src/components/actions/menu/ActionMenu.tsx
+++ b/frontend/packages/console-shared/src/components/actions/menu/ActionMenu.tsx
@@ -13,6 +13,7 @@ type ActionMenuProps = {
isDisabled?: boolean;
variant?: ActionMenuVariant;
label?: string;
+ className?: string;
};
const ActionMenu: React.FC = ({
@@ -21,6 +22,7 @@ const ActionMenu: React.FC = ({
isDisabled,
variant = ActionMenuVariant.KEBAB,
label,
+ className,
}) => {
const isKebabVariant = variant === ActionMenuVariant.KEBAB;
const [isVisible, setVisible] = useSafetyFirst(isKebabVariant);
@@ -76,7 +78,7 @@ const ActionMenu: React.FC = ({
const menu = (
-
+
diff --git a/frontend/packages/console-shared/src/components/alerts/AlertSeverityIcon.tsx b/frontend/packages/console-shared/src/components/alerts/AlertSeverityIcon.tsx
index 461b44b7f6a..3af752376df 100644
--- a/frontend/packages/console-shared/src/components/alerts/AlertSeverityIcon.tsx
+++ b/frontend/packages/console-shared/src/components/alerts/AlertSeverityIcon.tsx
@@ -18,7 +18,7 @@ const AlertSeverityIcon: React.FC = ({
= ({
+ &.pf-v6-c-label {
+ --pf-v6-c-label--BackgroundColor: #d93f00;
+ --pf-v6-c-label--Color: var(--pf-t--color--white);
}
}
diff --git a/frontend/packages/console-shared/src/components/badges/EmptyStateResourceBadge.scss b/frontend/packages/console-shared/src/components/badges/EmptyStateResourceBadge.scss
index 33c5787e64a..65a599b9523 100644
--- a/frontend/packages/console-shared/src/components/badges/EmptyStateResourceBadge.scss
+++ b/frontend/packages/console-shared/src/components/badges/EmptyStateResourceBadge.scss
@@ -1,10 +1,8 @@
.ocs-empty-state-resource-badge {
- margin-bottom: var(--pf-v5-global--spacer--md);
+ margin-bottom: var(--pf-t--global--spacer--md);
&--badge {
- &.pf-v5-c-badge {
- --pf-v5-c-badge--Color: var(--pf-v5-global--palette--white);
- --pf-v5-c-badge--FontSize: var(--pf-v5-global--icon--FontSize--md);
- --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--Color--400);
+ &.pf-v6-c-badge {
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--lg);
}
}
}
diff --git a/frontend/packages/console-shared/src/components/catalog/CatalogBadges.scss b/frontend/packages/console-shared/src/components/catalog/CatalogBadges.scss
index 04c544727a9..2127afbea33 100644
--- a/frontend/packages/console-shared/src/components/catalog/CatalogBadges.scss
+++ b/frontend/packages/console-shared/src/components/catalog/CatalogBadges.scss
@@ -1,10 +1,10 @@
.odc-catalog-badges {
display: flex;
flex-wrap: wrap;
- margin-top: var(--pf-v5-global--spacer--sm);
+ margin-top: var(--pf-t--global--spacer--sm);
&__label {
- margin: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--xs)
- var(--pf-v5-global--spacer--xs) 0;
+ margin: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--xs)
+ var(--pf-t--global--spacer--xs) 0;
}
}
diff --git a/frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogEmptyState.tsx b/frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogEmptyState.tsx
index 8dcfbb1f56c..7fcf8d84589 100644
--- a/frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogEmptyState.tsx
+++ b/frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogEmptyState.tsx
@@ -3,10 +3,8 @@ import {
Button,
EmptyState,
EmptyStateBody,
- EmptyStateIcon,
EmptyStateVariant,
EmptyStateActions,
- EmptyStateHeader,
EmptyStateFooter,
} from '@patternfly/react-core';
import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -19,12 +17,12 @@ type CatalogEmptyStateProps = {
const CatalogEmptyState: React.FC = ({ onClear }) => {
const { t } = useTranslation();
return (
-
- {t('console-shared~No results found')}}
- icon={{t('console-shared~No results found')}}
+ variant={EmptyStateVariant.full}
+ >
{t(
'console-shared~No results match the filter criteria. Remove filters or clear all filters to show results.',
diff --git a/frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogToolbar.tsx b/frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogToolbar.tsx
index cab75261466..60b0eb00973 100644
--- a/frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogToolbar.tsx
+++ b/frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogToolbar.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { SearchInput } from '@patternfly/react-core';
+import { Flex, FlexItem, SearchInput } from '@patternfly/react-core';
import * as _ from 'lodash';
import { useTranslation } from 'react-i18next';
import { Dropdown } from '@console/internal/components/utils';
@@ -54,35 +54,40 @@ const CatalogToolbar = React.forwardRef(
{title}
-
- debouncedOnSearchKeywordChange(text)}
- onClear={() => onSearchKeywordChange('')}
- aria-label={t('console-shared~Filter by keyword...')}
- />
-
+
+ debouncedOnSearchKeywordChange(text)}
+ onClear={() => onSearchKeywordChange('')}
+ aria-label={t('console-shared~Filter by keyword...')}
+ />
+
+
+ {showGrouping && (
+
+
)}
-
+
{t('console-shared~{{totalItems}} items', { totalItems })}
diff --git a/frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogView.tsx b/frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogView.tsx
index b87f11e798a..d1e8cbc3670 100644
--- a/frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogView.tsx
+++ b/frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogView.tsx
@@ -1,5 +1,4 @@
import * as React from 'react';
-import * as cx from 'classnames';
import * as _ from 'lodash';
import { useTranslation } from 'react-i18next';
import { CatalogItem } from '@console/dynamic-plugin-sdk/src/extensions';
@@ -222,7 +221,7 @@ const CatalogView: React.FC
= ({
}, []);
return (
-
+
{showSidebar && (
{showCategories && (
diff --git a/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.scss b/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.scss
index 78464185a37..ef025b7eaea 100644
--- a/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.scss
+++ b/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.scss
@@ -4,8 +4,8 @@
}
&__sbo_alert {
- margin-left: var(--pf-v5-global--spacer--lg);
- margin-right: var(--pf-v5-global--spacer--lg);
- margin-bottom: var(--pf-v5-global--spacer--md);
+ margin-left: var(--pf-t--global--spacer--lg);
+ margin-right: var(--pf-t--global--spacer--lg);
+ margin-bottom: var(--pf-t--global--spacer--md);
}
}
diff --git a/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.tsx b/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.tsx
index aec965992de..8a578009df1 100644
--- a/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.tsx
+++ b/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsModal.tsx
@@ -48,7 +48,7 @@ const CatalogDetailsModal: React.FC
= ({ item, onClose
{to && (
= ({ item, onClose
return (
{isBindable && (
diff --git a/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsPanel.tsx b/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsPanel.tsx
index 4d3e7d0336c..c0355bbf73e 100644
--- a/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsPanel.tsx
+++ b/frontend/packages/console-shared/src/components/catalog/details/CatalogDetailsPanel.tsx
@@ -28,70 +28,68 @@ const CatalogDetailsPanel: React.FC
= ({ item }) => {
return (
-
-
-
- {details?.properties
- ?.filter((property) => !property?.isHidden)
- ?.map((property) => (
-
+
+ {details?.properties
+ ?.filter((property) => !property?.isHidden)
+ ?.map((property) => (
- {(details?.descriptions?.length || description) && (
-
-
- {!details?.descriptions?.[0]?.label && (
- {description}
}
- {details?.descriptions?.map((desc, index) => (
- // eslint-disable-next-line react/no-array-index-key
-
- {desc.label &&
- ))}
-
-
+ ))}
+ {!customPropertyPresent(details, providerLabel) && (
+
+ )}
+ {!customPropertyPresent(details, createdAtLabel) && (
+
)}
-
+ {(details?.descriptions?.length || description) && (
+
+
+ {!details?.descriptions?.[0]?.label && (
+ {description}
}
+ {details?.descriptions?.map((desc, index) => (
+ // eslint-disable-next-line react/no-array-index-key
+
+ {desc.label &&
+ ))}
+
+
+ )}
);
diff --git a/frontend/packages/console-shared/src/components/dashboard/DashboardGrid.tsx b/frontend/packages/console-shared/src/components/dashboard/DashboardGrid.tsx
index 64d59243609..33e9be14a6d 100644
--- a/frontend/packages/console-shared/src/components/dashboard/DashboardGrid.tsx
+++ b/frontend/packages/console-shared/src/components/dashboard/DashboardGrid.tsx
@@ -1,6 +1,5 @@
import * as React from 'react';
import { Grid, GridItem } from '@patternfly/react-core';
-import { global_breakpoint_lg as breakpointLG } from '@patternfly/react-tokens/dist/js/global_breakpoint_lg';
import { OverviewGridCard, OverviewGridProps } from '@console/dynamic-plugin-sdk';
import { useRefWidth } from '@console/internal/components/utils/ref-width-hook';
@@ -20,7 +19,7 @@ const mapCardsToGrid = (
const DashboardGrid: React.FC
= ({ mainCards, leftCards, rightCards }) => {
const [containerRef, width] = useRefWidth();
- const smallGrid = !!width && width <= parseInt(breakpointLG.value, 10);
+ const smallGrid = !!width && width <= 992; // 992px is equivalent of --pf-t--global--breakpoint--lg
const mainGridCards = React.useMemo(() => mapCardsToGrid(mainCards, 'main', smallGrid), [
mainCards,
diff --git a/frontend/packages/console-shared/src/components/dashboard/activity-card/EventItem.tsx b/frontend/packages/console-shared/src/components/dashboard/activity-card/EventItem.tsx
index 7ee96e166ef..7f225c18ce0 100644
--- a/frontend/packages/console-shared/src/components/dashboard/activity-card/EventItem.tsx
+++ b/frontend/packages/console-shared/src/components/dashboard/activity-card/EventItem.tsx
@@ -22,63 +22,59 @@ const EventItem: React.FC = React.memo(({ event, isExpanded, onT
const isWarning = typeFilter('warning', event);
const expanded = isExpanded(metadata.uid);
return (
-
-
- onToggle(metadata.uid)}
- isExpanded={expanded}
- id={metadata.uid}
- className={classNames('co-recent-item__toggle', {
- 'co-recent-item--warning': isWarning && expanded,
- })}
- >
-
-
- {lastTime ? (
- {timeFormatter.format(new Date(lastTime))}
- ) : (
- '-'
- )}
-
-
- {isWarning && (
-
-
- )}
- {!expanded && (
- <>
-
-
{message}
-
- )}
-
+
+ onToggle(metadata.uid)}
+ id={metadata.uid}
+ className={classNames('co-recent-item__toggle', {
+ 'co-recent-item--warning': isWarning && expanded,
+ })}
+ >
+
+
+ {lastTime ? (
+ {timeFormatter.format(new Date(lastTime))}
+ ) : (
+ '-'
+ )}
-
-
-
-
-
-
{message}
+
+ {isWarning && (
+
+
+ )}
+ {!expanded && (
+ <>
+
+
{message}
+
+ )}
-
-
-
+
+
+
+
);
}, propsAreEqual);
diff --git a/frontend/packages/console-shared/src/components/dashboard/activity-card/activity-card.scss b/frontend/packages/console-shared/src/components/dashboard/activity-card/activity-card.scss
index 346fd62cdfa..9ce3802d3cc 100644
--- a/frontend/packages/console-shared/src/components/dashboard/activity-card/activity-card.scss
+++ b/frontend/packages/console-shared/src/components/dashboard/activity-card/activity-card.scss
@@ -1,4 +1,3 @@
-@import '~@patternfly/patternfly/sass-utilities/colors';
@import '../../../styles/skeleton-screen';
@import '../../../../../../public/style/vars';
@@ -16,57 +15,56 @@
}
.co-activity-card__ongoing-title {
- border-bottom: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
- padding: 0.2rem var(--pf-v5-c-card--child--PaddingRight) 0.2rem
- var(--pf-v5-c-card--child--PaddingLeft);
+ border-bottom: var(--pf-t--global--border--width--divider--default) solid
+ var(--pf-t--global--border--color--default);
+ padding: 0.2rem var(--pf-v6-c-card--child--PaddingInlineEnd) 0.2rem
+ var(--pf-v6-c-card--child--PaddingInlineStart);
}
.co-activity-card__recent-more-link {
- padding: 0 var(--pf-v5-c-card--child--PaddingRight) var(--pf-v5-c-card--child--PaddingBottom)
- var(--pf-v5-c-card--child--PaddingLeft);
+ padding: 0 var(--pf-v6-c-card--child--PaddingInlineEnd)
+ var(--pf-v6-c-card--child--PaddingBlockEnd) var(--pf-v6-c-card--child--PaddingInlineStart);
}
-.co-activity-card__recent-accordion.pf-v5-c-accordion {
- box-shadow: none;
- padding-bottom: 0;
+.co-activity-card__recent-accordion.pf-v6-c-accordion {
padding: 0.75rem 0;
h5 {
- font-family: var(--pf-v5-global--FontFamily--text);
- font-size: var(--pf-v5-c-card__body--FontSize);
+ font-family: var(--pf-t--global--font--family--body);
+ font-size: var(--pf-v6-c-card__body--FontSize);
margin: 0;
}
.co-recent-item__content {
- .pf-v5-c-accordion {
- --pf-v5-c-accordion__expanded-content-body--PaddingRight: var(
- --pf-v5-c-card--child--PaddingRight
+ .pf-v6-c-accordion {
+ --pf-v6-c-accordion__expanded-content-body--PaddingRight: var(
+ --pf-v6-c-card--child--PaddingInlineEnd
);
- --pf-v5-c-accordion__expanded-content-body--PaddingLeft: var(
- --pf-v5-c-card--child--PaddingLeft
+ --pf-v6-c-accordion__expanded-content-body--PaddingLeft: var(
+ --pf-v6-c-card--child--PaddingInlineStart
);
}
- .pf-v5-c-accordion__expandable-content-body {
- padding-inline-start: var(--pf-v5-c-card--child--PaddingLeft);
- padding-inline-end: var(--pf-v5-c-card--child--PaddingRight);
+ .pf-v6-c-accordion__expandable-content-body {
+ padding-inline-start: var(--pf-v6-c-card--child--PaddingInlineStart);
+ padding-inline-end: var(--pf-v6-c-card--child--PaddingInlineEnd);
}
}
- .co-recent-item__toggle.pf-v5-c-accordion__toggle {
- --pf-v5-c-accordion__toggle--PaddingRight: var(--pf-v5-c-card--child--PaddingRight);
- --pf-v5-c-accordion__toggle--PaddingLeft: var(--pf-v5-c-card--child--PaddingLeft);
+ .co-recent-item__toggle.pf-v6-c-accordion__toggle {
+ --pf-v6-c-accordion__toggle--PaddingRight: var(--pf-v6-c-card--child--PaddingInlineEnd);
+ --pf-v6-c-accordion__toggle--PaddingLeft: var(--pf-v6-c-card--child--PaddingInlineStart);
line-height: 18px; // so .co-m-resource-icon and text are on same baseline
}
.co-recent-item--warning {
- border-left-color: var(--pf-v5-global--warning-color--100);
+ border-left-color: var(--pf-v6-pf-t--global--icon--color--status--warning--default);
}
- .pf-v5-c-accordion__toggle {
+ .pf-v6-c-accordion__toggle {
&,
&:active,
&:focus {
- .pf-v5-c-accordion__toggle-text {
- font-weight: var(--pf-v5-global--FontWeight--normal) !important;
+ .pf-v6-c-accordion__toggle-text {
+ font-weight: var(--pf-t--global--font--weight--body--default) !important;
}
}
}
@@ -81,12 +79,13 @@
}
.co-activity-card__recent-title {
- border-bottom: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+ border-bottom: var(--pf-t--global--border--width--divider--default) solid
+ var(--pf-t--global--border--color--default);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
- padding: 0.2rem var(--pf-v5-c-card--child--PaddingRight) 0.2rem
- var(--pf-v5-c-card--child--PaddingLeft);
+ padding: 0.2rem var(--pf-v6-c-card--child--PaddingInlineEnd) 0.2rem
+ var(--pf-v6-c-card--child--PaddingInlineStart);
}
.co-activity-item {
@@ -94,17 +93,18 @@
}
.co-activity-item__ongoing {
- margin: 1rem var(--pf-v5-c-card--child--PaddingRight) 1rem var(--pf-v5-c-card--child--PaddingLeft);
+ margin: 1rem var(--pf-v6-c-card--child--PaddingInlineEnd) 1rem
+ var(--pf-v6-c-card--child--PaddingInlineStart);
}
-.co-activity-item__progress.pf-v5-c-progress {
- --pf-v5-c-progress--GridGap: 0;
+.co-activity-item__progress.pf-v6-c-progress {
+ --pf-v6-c-progress--GridGap: 0;
padding-bottom: 0.2rem;
}
.co-activity-item__icon {
- padding-right: var(--pf-v5-global--spacer--xs);
+ padding-right: var(--pf-t--global--spacer--xs);
}
.co-recent-item__content-header {
@@ -114,7 +114,6 @@
}
.co-recent-item__content-message {
- color: var(--pf-v5-global--Color--100);
margin-top: 0.5rem;
word-wrap: break-word;
}
@@ -133,7 +132,7 @@
.co-recent-item__icon {
height: 18px !important;
- margin-right: var(--pf-v5-global--spacer--xs);
+ margin-right: var(--pf-t--global--spacer--xs);
min-width: 18px;
}
diff --git a/frontend/packages/console-shared/src/components/dashboard/dashboard.scss b/frontend/packages/console-shared/src/components/dashboard/dashboard.scss
index 46ae318e5ae..63ca316e35b 100644
--- a/frontend/packages/console-shared/src/components/dashboard/dashboard.scss
+++ b/frontend/packages/console-shared/src/components/dashboard/dashboard.scss
@@ -1,11 +1,10 @@
@import '../../../../../public/style/vars';
.co-dashboard-body {
- background-color: var(--pf-v5-global--BackgroundColor--200);
flex: 1 0 auto;
- padding: $pf-v5-global-gutter;
- @media (min-width: $pf-v5-global--breakpoint--xl) {
- padding: $pf-v5-global-gutter--md;
+ padding: $pf-v6-global-gutter;
+ @media (min-width: $pf-v6-global--breakpoint--xl) {
+ padding: $pf-v6-global-gutter--md;
}
}
diff --git a/frontend/packages/console-shared/src/components/dashboard/inventory-card/InventoryCard.tsx b/frontend/packages/console-shared/src/components/dashboard/inventory-card/InventoryCard.tsx
index 4777102d895..d32e72775fc 100644
--- a/frontend/packages/console-shared/src/components/dashboard/inventory-card/InventoryCard.tsx
+++ b/frontend/packages/console-shared/src/components/dashboard/inventory-card/InventoryCard.tsx
@@ -1,4 +1,5 @@
import * as React from 'react';
+import { Icon } from '@patternfly/react-core';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom-v5-compat';
import {
@@ -39,8 +40,7 @@ export const InventoryItemStatus: React.FC
= ({
}) => {
const body = (
<>
- {count}
- {icon}
+ {count} {icon}
);
return (
diff --git a/frontend/packages/console-shared/src/components/dashboard/inventory-card/InventoryItem.tsx b/frontend/packages/console-shared/src/components/dashboard/inventory-card/InventoryItem.tsx
index 97f50edcded..1371fb53464 100644
--- a/frontend/packages/console-shared/src/components/dashboard/inventory-card/InventoryItem.tsx
+++ b/frontend/packages/console-shared/src/components/dashboard/inventory-card/InventoryItem.tsx
@@ -93,10 +93,9 @@ export const InventoryItem: React.FC = React.memo(
headingLevel="h5"
className="co-inventory-card__accordion"
>
-
+
@@ -119,7 +118,7 @@ export const InventoryItem: React.FC = React.memo(
)}
-
+
diff --git a/frontend/packages/console-shared/src/components/dashboard/inventory-card/inventory-card.scss b/frontend/packages/console-shared/src/components/dashboard/inventory-card/inventory-card.scss
index be41717cd74..b0ac28faaa0 100644
--- a/frontend/packages/console-shared/src/components/dashboard/inventory-card/inventory-card.scss
+++ b/frontend/packages/console-shared/src/components/dashboard/inventory-card/inventory-card.scss
@@ -1,4 +1,3 @@
-@import '~@patternfly/patternfly/sass-utilities/colors';
@import '../../../styles/skeleton-screen';
.co-inventory-card__item {
@@ -28,50 +27,61 @@
display: flex;
flex-shrink: 0;
margin-left: 1.8rem;
+
+ &,
+ > a {
+ display: inline-flex;
+ align-items: center;
+
+ .co-inventory-card__status-count {
+ margin-right: var(--pf-t--global--spacer--sm);
+ }
+ }
}
.co-inventory-card__status-icon--question {
- color: $pf-v5-color-black-300;
+ color: var(--pf-t--global--icon--color--severity--undefined--default);
}
.co-inventory-card__status-icon--progress {
- color: $pf-v5-color-black-600;
+ color: var(--pf-t--global--icon--color--severity--minor--default);
}
-.co-inventory-card__accordion.pf-v5-c-accordion {
- border-bottom: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+.co-inventory-card__accordion.pf-v6-c-accordion {
+ border-bottom: var(--pf-t--global--border--width--regular) solid
+ var(--pf-t--global--border--color--default);
box-shadow: none;
padding: 0;
h5 {
- font-size: var(--pf-v5-c-card__body--FontSize);
- font-weight: var(--pf-v5-global--FontWeight--normal);
+ font-size: var(--pf-v6-c-card__body--FontSize);
+ font-weight: var(--pf-t--global--font--weight--body--default);
margin: 0;
}
- .co-inventory-card__accordion-toggle.pf-v5-c-accordion__toggle {
- --pf-v5-c-accordion__toggle--PaddingTop: 0;
- --pf-v5-c-accordion__toggle--PaddingRight: var(--pf-v5-c-card--child--PaddingRight);
- --pf-v5-c-accordion__toggle--PaddingBottom: 0;
- --pf-v5-c-accordion__toggle--PaddingLeft: 0;
+ .co-inventory-card__accordion-toggle.pf-v6-c-accordion__toggle {
+ --pf-v6-c-accordion__toggle--PaddingTop: 0;
+ --pf-v6-c-accordion__toggle--PaddingRight: var(--pf-v6-c-card--child--PaddingInlineEnd);
+ --pf-v6-c-accordion__toggle--PaddingBottom: 0;
+ --pf-v6-c-accordion__toggle--PaddingLeft: 0;
border-left: none;
- .pf-v5-c-accordion__toggle-text {
+ .pf-v6-c-accordion__toggle-text {
width: 100%;
}
}
- .co-inventory-card__accordion-body.pf-v5-c-accordion__expanded-content {
- --pf-v5-c-accordion__expanded-content-body--PaddingTop: 1rem;
- --pf-v5-c-accordion__expanded-content-body--PaddingRight: var(
- --pf-v5-c-card--child--PaddingRight
+ .co-inventory-card__accordion-body.pf-v6-c-accordion__expanded-content {
+ --pf-v6-c-accordion__expanded-content-body--PaddingTop: 1rem;
+ --pf-v6-c-accordion__expanded-content-body--PaddingRight: var(
+ --pf-v6-c-card--child--PaddingInlineEnd
);
- --pf-v5-c-accordion__expanded-content-body--PaddingBottom: 1rem;
- --pf-v5-c-accordion__expanded-content-body--PaddingLeft: var(
- --pf-v5-c-card--child--PaddingRight
+ --pf-v6-c-accordion__expanded-content-body--PaddingBottom: 1rem;
+ --pf-v6-c-accordion__expanded-content-body--PaddingLeft: var(
+ --pf-v6-c-card--child--PaddingInlineEnd
);
- --pf-v5-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 1rem;
+ --pf-v6-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 1rem;
border-left: none;
}
diff --git a/frontend/packages/console-shared/src/components/dashboard/launcher-card/launcher-card.scss b/frontend/packages/console-shared/src/components/dashboard/launcher-card/launcher-card.scss
index 8c247a38315..28ae8cff825 100644
--- a/frontend/packages/console-shared/src/components/dashboard/launcher-card/launcher-card.scss
+++ b/frontend/packages/console-shared/src/components/dashboard/launcher-card/launcher-card.scss
@@ -4,7 +4,7 @@
}
.co-launcher-card__item {
- padding-bottom: var(--pf-v5-global--spacer--sm);
+ padding-bottom: var(--pf-t--global--spacer--sm);
}
.co-launcher-card__item:last-of-type {
diff --git a/frontend/packages/console-shared/src/components/dashboard/resource-quota-card/quota-summary.scss b/frontend/packages/console-shared/src/components/dashboard/resource-quota-card/quota-summary.scss
index 44b625a54bd..80ff135919b 100644
--- a/frontend/packages/console-shared/src/components/dashboard/resource-quota-card/quota-summary.scss
+++ b/frontend/packages/console-shared/src/components/dashboard/resource-quota-card/quota-summary.scss
@@ -1,3 +1,3 @@
.co-resource-quota__summary {
- padding: var(--pf-v5-global--spacer--form-element) 0;
+ padding: var(--pf-t--global--spacer--form-element) 0;
}
diff --git a/frontend/packages/console-shared/src/components/dashboard/status-card/AlertsBody.tsx b/frontend/packages/console-shared/src/components/dashboard/status-card/AlertsBody.tsx
index 4963a9c66e4..8a114c5b8ab 100644
--- a/frontend/packages/console-shared/src/components/dashboard/status-card/AlertsBody.tsx
+++ b/frontend/packages/console-shared/src/components/dashboard/status-card/AlertsBody.tsx
@@ -1,11 +1,5 @@
import * as React from 'react';
-import {
- EmptyState,
- EmptyStateVariant,
- EmptyStateIcon,
- EmptyStateBody,
- EmptyStateHeader,
-} from '@patternfly/react-core';
+import { EmptyState, EmptyStateVariant, EmptyStateBody } from '@patternfly/react-core';
import { UnknownIcon } from '@patternfly/react-icons/dist/esm/icons/unknown-icon';
import { useTranslation } from 'react-i18next';
import { AlertsBodyProps } from '@console/dynamic-plugin-sdk/src/api/internal-types';
@@ -16,10 +10,11 @@ const AlertsBody: React.FC = ({ error = false, children }) => {
(error || !!React.Children.toArray(children).length) && (
{error ? (
-
-
{t('console-shared~Alerts could not be loaded.')}
) : (
diff --git a/frontend/packages/console-shared/src/components/dashboard/status-card/HealthItem.tsx b/frontend/packages/console-shared/src/components/dashboard/status-card/HealthItem.tsx
index 7825133de3c..e9be2d8b6e6 100644
--- a/frontend/packages/console-shared/src/components/dashboard/status-card/HealthItem.tsx
+++ b/frontend/packages/console-shared/src/components/dashboard/status-card/HealthItem.tsx
@@ -6,11 +6,14 @@ import { HealthItemProps } from '@console/dynamic-plugin-sdk/src/api/internal-ty
import { SecondaryStatus } from '../../status';
import { HealthState, healthStateMapping, healthStateMessage } from './states';
-const HealthItemIcon: React.FC = ({ state, dataTest }) => (
-
- {(healthStateMapping[state] || healthStateMapping[HealthState.UNKNOWN]).icon}
-
-);
+const HealthItemIcon: React.FC = ({ state, dataTest }) => {
+ const Icon = (healthStateMapping[state] || healthStateMapping[HealthState.UNKNOWN]).icon;
+ return (
+
+ {React.cloneElement(Icon, { size: 'heading_2xl' })}
+
+ );
+};
const HealthItem: React.FC = React.memo(
({
@@ -37,7 +40,7 @@ const HealthItem: React.FC = React.memo(
>
{state === HealthState.LOADING ? (
-
+
{t('public~Loading {{title}} status', { title })}
diff --git a/frontend/packages/console-shared/src/components/dashboard/status-card/operator-body.scss b/frontend/packages/console-shared/src/components/dashboard/status-card/operator-body.scss
index 5f7985009d1..5e2b16ee398 100644
--- a/frontend/packages/console-shared/src/components/dashboard/status-card/operator-body.scss
+++ b/frontend/packages/console-shared/src/components/dashboard/status-card/operator-body.scss
@@ -12,7 +12,7 @@
height: 100%;
width: 100%;
}
- margin-bottom: var(--pf-v5-global--spacer--xs);
+ margin-bottom: var(--pf-t--global--spacer--xs);
}
.co-status__operator-detail {
diff --git a/frontend/packages/console-shared/src/components/dashboard/status-card/states.tsx b/frontend/packages/console-shared/src/components/dashboard/status-card/states.tsx
index 578bd0f143a..94b342a5d34 100644
--- a/frontend/packages/console-shared/src/components/dashboard/status-card/states.tsx
+++ b/frontend/packages/console-shared/src/components/dashboard/status-card/states.tsx
@@ -87,7 +87,7 @@ export const healthStateMapping: { [key in HealthState]: HealthStateMappingValue
};
export type HealthStateMappingValues = {
- icon: React.ReactNode;
+ icon: React.ReactElement;
priority: number;
health: HealthState;
};
diff --git a/frontend/packages/console-shared/src/components/dashboard/status-card/status-card.scss b/frontend/packages/console-shared/src/components/dashboard/status-card/status-card.scss
index 7bee166cff8..175644bcadb 100644
--- a/frontend/packages/console-shared/src/components/dashboard/status-card/status-card.scss
+++ b/frontend/packages/console-shared/src/components/dashboard/status-card/status-card.scss
@@ -1,15 +1,17 @@
-@import '~@patternfly/patternfly/sass-utilities/colors';
@import '../../../styles/skeleton-screen';
.co-status-card__alerts-body {
- border-top: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+ border-top: var(--pf-t--global--border--width--divider--default) solid
+ var(--pf-t--global--border--color--default);
+ /* cuts off 1 pixel at the bottom of the status alerts container - fixes scrollable content leaks on border */
+ clip-path: inset(0 0 1px 0);
max-height: 19rem;
min-height: 6rem;
overflow-x: hidden;
overflow-y: auto;
- .pf-v5-c-empty-state {
- --pf-v5-c-empty-state__icon--MarginBottom: 0 !important;
+ .pf-v6-c-empty-state {
+ --pf-v6-c-empty-state__icon--MarginBottom: 0 !important;
}
}
@@ -20,7 +22,7 @@
width: 100%;
}
-.co-status-card__alerts-msg.pf-v5-c-empty-state {
+.co-status-card__alerts-msg.pf-v6-c-empty-state {
align-items: center;
display: flex;
flex-direction: column;
@@ -28,15 +30,15 @@
justify-content: center;
}
-.co-status-card__alerts-icon.pf-v5-c-empty-state__icon {
- --pf-v5-c-empty-state__icon--Color: $pf-v5-color-black-400;
+.co-status-card__alerts-icon.pf-v6-c-empty-state__icon {
+ --pf-v6-c-empty-state__icon--Color: var(--pf-t--global--icon--color--severity--undefined--default);
}
.co-status-card__alert-item {
display: flex;
- padding-bottom: 0.5rem;
- padding-left: var(--pf-v5-c-card--child--PaddingLeft);
- padding-right: var(--pf-v5-c-card--child--PaddingRight);
+ padding-bottom: var(--pf-v6-c-card--child--PaddingBlockEnd);
+ padding-left: var(--pf-v6-c-card--child--PaddingInlineStart);
+ padding-right: var(--pf-v6-c-card--child--PaddingInlineEnd);
}
.co-status-card__alert-item-icon {
@@ -52,7 +54,7 @@
display: flex;
flex-shrink: 0;
justify-content: flex-end;
- padding-left: var(--pf-v5-c-card--child--PaddingLeft);
+ padding-left: var(--pf-v6-c-card--child--PaddingInlineStart);
}
.co-status-card__alert-item-text {
@@ -65,7 +67,6 @@
.co-status-card__alert-item-header {
margin-left: 1rem;
font-weight: bold;
- color: var(--pf-v5-global--Color--black);
}
.co-status-card__alert-item-doc-link {
@@ -81,19 +82,19 @@
}
.co-status-card__alert-item:first-of-type {
- padding-top: var(--pf-v5-c-card--first-child--PaddingTop);
+ padding-top: var(--pf-v6-c-card--first-child--PaddingBlockStart);
}
.co-status-card__alert-item:last-of-type {
- padding-bottom: var(--pf-v5-c-card--child--PaddingBottom);
+ padding-bottom: var(--pf-v6-c-card--child--PaddingBlockEnd);
}
.co-status-card__health-body {
display: flex;
flex-wrap: wrap;
- padding-left: var(--pf-v5-c-card--child--PaddingLeft);
- padding-right: var(--pf-v5-c-card--child--PaddingRight);
- padding-bottom: var(--pf-v5-c-card__title--not--last-child--PaddingBottom);
+ padding-bottom: var(--pf-v6-c-card--child--PaddingBlockEnd);
+ padding-left: var(--pf-v6-c-card--child--PaddingInlineStart);
+ padding-right: var(--pf-v6-c-card--child--PaddingInlineEnd);
}
.co-status-card__health-item {
diff --git a/frontend/packages/console-shared/src/components/dashboard/status-card/status-popup.scss b/frontend/packages/console-shared/src/components/dashboard/status-card/status-popup.scss
index 7f1f40b47e3..648be7d6a8a 100644
--- a/frontend/packages/console-shared/src/components/dashboard/status-card/status-popup.scss
+++ b/frontend/packages/console-shared/src/components/dashboard/status-card/status-popup.scss
@@ -1,22 +1,22 @@
.co-status-popup__status {
align-items: center;
display: flex;
- padding-left: var(--pf-v5-global--spacer--xs);
+ padding-left: var(--pf-t--global--spacer--xs);
white-space: nowrap;
}
.co-status-popup__icon {
- padding-left: var(--pf-v5-global--spacer--xs);
+ padding-left: var(--pf-t--global--spacer--xs);
}
.co-status-popup__row {
display: flex;
justify-content: space-between;
- padding-bottom: var(--pf-v5-global--spacer--xs);
+ padding-bottom: var(--pf-t--global--spacer--xs);
}
.co-status-popup__text--bold {
- font-weight: var(--pf-v5-global--FontWeight--bold);
+ font-weight: var(--pf-t--global--font--weight--body--bold);
}
.co-status-popup__title .co-resource-item__resource-name {
diff --git a/frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationBody.tsx b/frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationBody.tsx
index e5642ecc358..0bcac548821 100644
--- a/frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationBody.tsx
+++ b/frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationBody.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { ChartAxis, ChartContainer } from '@patternfly/react-charts';
+import { ChartAxis, ChartContainer } from '@patternfly/react-charts/victory';
import { Flex, FlexItem, Grid } from '@patternfly/react-core';
import { useTranslation } from 'react-i18next';
import { UtilizationBodyProps } from '@console/dynamic-plugin-sdk/src/api/internal-types';
@@ -23,7 +23,7 @@ const UtilizationAxis: React.FC = () => {
orientation="top"
height={15}
width={width}
- padding={{ top: 30, bottom: 0, left: 70, right: 0 }}
+ padding={{ top: 31, bottom: 0, left: 70, right: 0 }}
style={{
axis: { visibility: 'hidden' },
}}
diff --git a/frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationItem.tsx b/frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationItem.tsx
index d89cc04ef37..6e848bafb9e 100644
--- a/frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationItem.tsx
+++ b/frontend/packages/console-shared/src/components/dashboard/utilization-card/UtilizationItem.tsx
@@ -120,7 +120,7 @@ export const MultilineUtilizationItem: React.FC =
-
+
{title}
{error || (!isLoading && !(data.length && data.every((datum) => datum.length))) ? (
@@ -255,7 +255,7 @@ export const UtilizationItem: React.FC = React.memo(
className="co-utilization-card__item-section"
>
-
+
{title}
diff --git a/frontend/packages/console-shared/src/components/dashboard/utilization-card/top-consumer-popover.scss b/frontend/packages/console-shared/src/components/dashboard/utilization-card/top-consumer-popover.scss
index f3c1ce87b8d..6d6f4248c24 100644
--- a/frontend/packages/console-shared/src/components/dashboard/utilization-card/top-consumer-popover.scss
+++ b/frontend/packages/console-shared/src/components/dashboard/utilization-card/top-consumer-popover.scss
@@ -1,7 +1,7 @@
@import '../../../styles/skeleton-screen';
.co-utilization-card-popover__body {
- min-height: var(--pf-v5-global--spacer--lg);
+ min-height: var(--pf-t--global--spacer--lg);
}
.co-utilization-card-popover__consumer-list {
@@ -10,35 +10,35 @@
}
.co-utilization-card-popover__consumer-name {
- flex: 0 0 calc(70% - var(--pf-v5-global--spacer--md));
+ flex: 0 0 calc(70% - var(--pf-t--global--spacer--md));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.co-utilization-card-popover__consumer-value {
- color: var(--pf-v5-global--Color--200);
+ color: var(--pf-t--global--text--color--subtle);
flex: 0 0 30%;
text-align: right;
white-space: nowrap;
}
.co-utilization-card-popover__description {
- padding: var(--pf-v5-global--spacer--sm) 0;
+ padding: var(--pf-t--global--spacer--sm) 0;
}
.co-utilization-card-popover__dropdown {
- margin: var(--pf-v5-global--spacer--sm) 0;
+ margin: var(--pf-t--global--spacer--sm) 0;
}
.co-utilization-card-popover__dropdown,
.co-utilization-card-popover__dropdown > div,
-.co-utilization-card-popover__dropdown .pf-v5-c-dropdown__toggle {
+.co-utilization-card-popover__dropdown .pf-v6-c-menu-toggle {
width: 100%;
}
.co-utilization-card-popover__limit-icon {
- margin-left: var(--pf-v5-global--spacer--sm);
+ margin-left: var(--pf-t--global--spacer--sm);
}
.co-utilization-card-popover__consumer-item {
@@ -47,16 +47,16 @@
}
.co-utilization-card-popover__title {
- font-weight: var(--pf-v5-global--FontWeight--bold);
+ font-weight: var(--pf-t--global--font--weight--body--bold);
}
.skeleton-consumer {
animation: $skeleton-animation;
background: $skeleton-color;
- height: var(--pf-v5-global--spacer--md);
+ height: var(--pf-t--global--spacer--md);
opacity: 0;
- margin-top: var(--pf-v5-global--spacer--sm);
- margin-bottom: var(--pf-v5-global--spacer--sm);
+ margin-top: var(--pf-t--global--spacer--sm);
+ margin-bottom: var(--pf-t--global--spacer--sm);
&::after {
background-repeat: no-repeat;
content: '';
diff --git a/frontend/packages/console-shared/src/components/dashboard/utilization-card/utilization-card.scss b/frontend/packages/console-shared/src/components/dashboard/utilization-card/utilization-card.scss
index d23bb196059..dd6a7b81f59 100644
--- a/frontend/packages/console-shared/src/components/dashboard/utilization-card/utilization-card.scss
+++ b/frontend/packages/console-shared/src/components/dashboard/utilization-card/utilization-card.scss
@@ -1,7 +1,6 @@
-@import '~@patternfly/patternfly/sass-utilities/colors';
-
.co-utilization-card__body {
padding: 0;
+ overflow: hidden;
}
.co-utilization-card__item .co-u-hidden {
@@ -9,23 +8,24 @@
}
.co-utilization-card__item .co-utilization-card__item-chart.co-utilization-card__item-chart--times {
- padding: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--lg)
- var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md);
+ padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg)
+ var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md);
svg {
overflow: visible;
}
}
.co-utilization-card__item-header {
- border-bottom: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+ border-bottom: var(--pf-t--global--border--width--divider--default) solid
+ var(--pf-t--global--border--color--default);
}
-.co-utilization-card__item .pf-v5-c-title {
+.co-utilization-card__item .pf-v6-c-title {
margin-bottom: 0;
}
.co-utilization-card__item > * {
- padding: var(--pf-v5-global--spacer--md);
+ padding: var(--pf-t--global--spacer--md);
}
.co-utilization-card__item-chart .graph-wrapper {
@@ -42,6 +42,7 @@
.co-utilization-card__item-section {
width: 100%;
+ overflow: hidden;
}
.co-utilization-card__item-section-multiline {
@@ -52,12 +53,12 @@
}
.co-utilization-card__item-text {
- color: var(--pf-v5-global--Color--200);
- font-size: var(--pf-v5-global--FontSize--sm);
+ color: var(--pf-t--global--text--color--subtle);
+ font-size: var(--pf-t--global--font--size--sm);
}
.co-utilization-card__item-icon {
- margin-right: var(--pf-v5-global--spacer--sm);
+ margin-right: var(--pf-t--global--spacer--sm);
}
@media screen and (min-width: 1200px) {
@@ -81,11 +82,11 @@
.co-utilization-card__item > *:nth-child(even) {
align-items: center;
- padding: 0 var(--pf-v5-global--spacer--lg) 0 var(--pf-v5-global--spacer--md);
+ padding: 0 var(--pf-t--global--spacer--lg) 0 var(--pf-t--global--spacer--md);
}
.co-utilization-card__item > *:nth-child(odd) {
align-items: flex-start;
- padding: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--lg);
+ padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
}
}
diff --git a/frontend/packages/console-shared/src/components/drawer/Drawer.scss b/frontend/packages/console-shared/src/components/drawer/Drawer.scss
index 4037b1bcb61..b3fee6d4837 100644
--- a/frontend/packages/console-shared/src/components/drawer/Drawer.scss
+++ b/frontend/packages/console-shared/src/components/drawer/Drawer.scss
@@ -4,9 +4,10 @@
flex-grow: 0;
flex-shrink: 0;
transition: opacity 175ms ease-out, transform 225ms ease-out;
- box-shadow: var(--pf-v5-global--BoxShadow--sm-top);
+ box-shadow: var(--pf-t--global--box-shadow--sm--top);
display: flex;
flex-direction: column;
+ z-index: var(--pf-t--global--z-index--sm);
&__drag-handle {
width: 100%;
@@ -15,13 +16,12 @@
position: absolute;
background-color: transparent;
&:hover {
- background-color: var(--pf-v5-global--palette--black-300);
+ background-color: var(--pf-t--global--background--color--secondary--hover);
}
}
&__header {
- height: var(--pf-v5-global--target-size--MinHeight);
- background-color: var(--pf-v5-global--BackgroundColor--200);
+ background-color: var(--pf-t--global--background--color--secondary--default);
display: flex;
align-items: center;
flex-shrink: 0;
diff --git a/frontend/packages/console-shared/src/components/dropdown/dropdown-with-switch/DropdownWithSwitchMenu.tsx b/frontend/packages/console-shared/src/components/dropdown/dropdown-with-switch/DropdownWithSwitchMenu.tsx
index 3841de65535..6600c977c06 100644
--- a/frontend/packages/console-shared/src/components/dropdown/dropdown-with-switch/DropdownWithSwitchMenu.tsx
+++ b/frontend/packages/console-shared/src/components/dropdown/dropdown-with-switch/DropdownWithSwitchMenu.tsx
@@ -22,7 +22,6 @@ const DropdownWithSwitchMenu: React.FC = ({
switchLabel,
switchLabelClassName,
switchLabelIsReversed,
- switchLabelOff,
switchOnChange,
}) => {
return (
@@ -34,7 +33,7 @@ const DropdownWithSwitchMenu: React.FC = ({
setOpen(false);
}}
ref={menuRef}
- style={{ position: 'absolute' }}
+ style={{ position: 'absolute', zIndex: 100 }}
>
@@ -45,7 +44,6 @@ const DropdownWithSwitchMenu: React.FC = ({
isDisabled={switchIsDisabled}
isReversed={switchLabelIsReversed}
label={switchLabel}
- labelOff={switchLabelOff}
onChange={(_event, value) => switchOnChange(value)}
data-test="dropdown-with-switch-switch"
/>
@@ -55,7 +53,7 @@ const DropdownWithSwitchMenu: React.FC = ({
{/* PatternFly expects Menu to contain a MenuList with a MenuItem
see https://github.com/patternfly/patternfly-react/issues/7365
hack to workaround this bug by adding a hidden MenuList */}
-
+
= ({
};
return showLabel && label ? (
-
-
+
+
= ({
{description && (
- {children}
-
+ {children}
= ({
{errors.length > 0 &&
-
+
{t('console-shared~Create')}
diff --git a/frontend/packages/console-shared/src/components/dynamic-form/styles.scss b/frontend/packages/console-shared/src/components/dynamic-form/styles.scss
index fa4f750668e..99280becbea 100644
--- a/frontend/packages/console-shared/src/components/dynamic-form/styles.scss
+++ b/frontend/packages/console-shared/src/components/dynamic-form/styles.scss
@@ -6,31 +6,31 @@
}
.co-dynamic-form__accordion {
- --pf-v5-c-accordion--BoxShadow: none !important;
- --pf-v5-c-accordion--PaddingBottom: 0rem !important;
- --pf-v5-c-accordion--PaddingTop: 0rem !important;
- .pf-v5-c-accordion__toggle label {
+ --pf-v6-c-accordion--BoxShadow: none !important;
+ --pf-v6-c-accordion--PaddingBottom: 0rem !important;
+ --pf-v6-c-accordion--PaddingTop: 0rem !important;
+ .pf-v6-c-accordion__toggle label {
margin-bottom: 0;
}
}
.co-dynamic-form__field-group {
- --pf-v5-c-accordion__toggle--PaddingLeft: 0rem !important;
- --pf-v5-c-accordion__toggle--PaddingRight: 0.9375rem !important;
- --pf-v5-c-accordion__toggle--m-expanded--BorderLeftColor: none !important;
- --pf-v5-c-accordion__expanded-content-body--PaddingLeft: 0.9375rem !important;
- --pf-v5-c-accordion__expanded-content--Color: var(--pf-v5-global--Color--100) !important;
- --pf-v5-c-accordion__toggle-text--active--Color: var(--pf-v5-global--Color--100) !important;
- --pf-v5-c-accordion__toggle-text--active--FontWeight: 600 !important;
- --pf-v5-c-accordion__toggle-text--expanded--Color: var(--pf-v5-global--Color--100) !important;
- --pf-v5-c-accordion__toggle-text--expanded--FontWeight: 600 !important;
- --pf-v5-c-accordion__toggle-text--focus--Color: var(--pf-v5-global--Color--100) !important;
- --pf-v5-c-accordion__toggle-text--focus--FontWeight: 600 !important;
- --pf-v5-c-accordion__toggle-text--hover--Color: var(--pf-v5-global--Color--100) !important;
- --pf-v5-c-accordion__toggle-text--hover--FontWeight: 600 !important;
+ --pf-v6-c-accordion__toggle--PaddingLeft: 0rem !important;
+ --pf-v6-c-accordion__toggle--PaddingRight: 0.9375rem !important;
+ --pf-v6-c-accordion__toggle--m-expanded--BorderLeftColor: none !important;
+ --pf-v6-c-accordion__expanded-content-body--PaddingLeft: 0.9375rem !important;
+ --pf-v6-c-accordion__expanded-content--Color: var(--pf-t--global--text--color--regular) !important;
+ --pf-v6-c-accordion__toggle-text--active--Color: var(--pf-t--global--text--color--regular) !important;
+ --pf-v6-c-accordion__toggle-text--active--FontWeight: 600 !important;
+ --pf-v6-c-accordion__toggle-text--expanded--Color: var(--pf-t--global--text--color--regular) !important;
+ --pf-v6-c-accordion__toggle-text--expanded--FontWeight: 600 !important;
+ --pf-v6-c-accordion__toggle-text--focus--Color: var(--pf-t--global--text--color--regular) !important;
+ --pf-v6-c-accordion__toggle-text--focus--FontWeight: 600 !important;
+ --pf-v6-c-accordion__toggle-text--hover--Color: var(--pf-t--global--text--color--regular) !important;
+ --pf-v6-c-accordion__toggle-text--hover--FontWeight: 600 !important;
margin-bottom: 0.5rem;
- .pf-v5-c-accordion__toggle {
+ .pf-v6-c-accordion__toggle {
&:before,
&:after {
display: none;
@@ -39,7 +39,7 @@
h3 {
margin: 0rem;
- font-size: var(--pf-v5-global--FontSize);
+ font-size: var(--pf-t--global--font--size);
}
.help-block {
diff --git a/frontend/packages/console-shared/src/components/dynamic-form/templates.tsx b/frontend/packages/console-shared/src/components/dynamic-form/templates.tsx
index 960b72071b2..8ed4937d07d 100644
--- a/frontend/packages/console-shared/src/components/dynamic-form/templates.tsx
+++ b/frontend/packages/console-shared/src/components/dynamic-form/templates.tsx
@@ -129,12 +129,12 @@ export const ArrayFieldTemplate: React.FC = ({
{item.hasRemove && (
@@ -144,8 +144,13 @@ export const ArrayFieldTemplate: React.FC = ({
);
})}
-
-
= (props) => {
return JSON_SCHEMA_NUMBER_TYPES.includes(schemaType) ? (
+
);
};
export const NumberWidget: React.FC = ({ value, id, onChange }) => {
const numberValue = _.toNumber(value);
return (
-
+
);
};
export const PasswordWidget: React.FC = ({ value = '', id, onChange }) => {
return (
-
+
);
};
@@ -86,7 +95,7 @@ export const CheckboxWidget: React.FC = ({ value = false, id, label
export const SwitchWidget: React.FC = ({ value, id, label, onChange, options }) => {
const { t } = useTranslation();
- const { labelOn = t('console-shared~true'), labelOff = t('console-shared~false') } = options;
+ const { labelOn = t('console-shared~true') } = options;
return (
= ({ value, id, label, onChange
isChecked={_.isNil(value) ? false : value}
onChange={(_event, v) => onChange(v)}
label={labelOn as string}
- labelOff={labelOff as string}
/>
);
};
diff --git a/frontend/packages/console-shared/src/components/editor/CodeEditorToolbar.scss b/frontend/packages/console-shared/src/components/editor/CodeEditorToolbar.scss
index 3f39d49fc4b..3e4ccd523e4 100644
--- a/frontend/packages/console-shared/src/components/editor/CodeEditorToolbar.scss
+++ b/frontend/packages/console-shared/src/components/editor/CodeEditorToolbar.scss
@@ -1,8 +1,8 @@
@import '../../../../../public/style/vars';
.ocs-yaml-editor-shortcut__text {
- color: var(--pf-v5-global--Color--200);
- margin-left: var(--pf-v5-global--spacer--sm);
+ color: var(--pf-t--global--text--color--subtle);
+ margin-left: var(--pf-t--global--spacer--sm);
}
.ocs-yaml-editor-toolbar {
diff --git a/frontend/packages/console-shared/src/components/editor/CodeEditorToolbar.tsx b/frontend/packages/console-shared/src/components/editor/CodeEditorToolbar.tsx
index 1f8b9051d1d..cdb8c79a2f0 100644
--- a/frontend/packages/console-shared/src/components/editor/CodeEditorToolbar.tsx
+++ b/frontend/packages/console-shared/src/components/editor/CodeEditorToolbar.tsx
@@ -26,9 +26,9 @@ const CodeEditorToolbar: React.FC = ({ showShortcuts, to
if (!showShortcuts && !toolbarLinks?.length) return null;
return (
-
+
{showLightspeedButton && (
-
{showShortcuts && (
-
+
= ({ showShortcuts, to
{toolbarLinks &&
toolbarLinks.map((link, index) => (
// eslint-disable-next-line react/no-array-index-key
-
+
{(showShortcuts || index > 0) && link ? (
= ({ onHideShortcuts }) => {
distance={18}
onHide={onHideShortcuts}
>
-
-
diff --git a/frontend/packages/console-shared/src/components/editor/theme.ts b/frontend/packages/console-shared/src/components/editor/theme.ts
index 6fc4a6b62eb..b0c41f490af 100644
--- a/frontend/packages/console-shared/src/components/editor/theme.ts
+++ b/frontend/packages/console-shared/src/components/editor/theme.ts
@@ -1,18 +1,11 @@
-import { global_BackgroundColor_200 as globalBackground200 } from '@patternfly/react-tokens/dist/js/global_BackgroundColor_200';
-import { global_BackgroundColor_dark_100 as darkEditorBackground } from '@patternfly/react-tokens/dist/js/global_BackgroundColor_dark_100';
-import { global_BackgroundColor_dark_200 as globalBackgroundDark200 } from '@patternfly/react-tokens/dist/js/global_BackgroundColor_dark_200';
-import { global_BackgroundColor_light_100 as lightEditorBackground } from '@patternfly/react-tokens/dist/js/global_BackgroundColor_light_100';
-import { global_Color_dark_100 as globalColorDark100 } from '@patternfly/react-tokens/dist/js/global_Color_dark_100';
-import { global_Color_light_100 as globalColorLight100 } from '@patternfly/react-tokens/dist/js/global_Color_light_100';
-
(window as any).monaco.editor.defineTheme('console-light', {
base: 'vs',
inherit: true,
colors: {
- 'editor.background': lightEditorBackground.value,
+ 'editor.background': '#fff',
'editorGutter.background': '#f5f5f5', // black-150
- 'editorLineNumber.activeForeground': globalColorDark100.value,
- 'editorLineNumber.foreground': globalBackgroundDark200.value,
+ 'editorLineNumber.activeForeground': '#151515',
+ 'editorLineNumber.foreground': '#151515',
},
rules: [
{ token: 'number', foreground: '486b00' }, // light-green-600
@@ -26,10 +19,10 @@ import { global_Color_light_100 as globalColorLight100 } from '@patternfly/react
base: 'vs-dark',
inherit: true,
colors: {
- 'editor.background': darkEditorBackground.value,
+ 'editor.background': '#151515',
'editorGutter.background': '#292e34', // no pf token defined
- 'editorLineNumber.activeForeground': globalColorLight100.value,
- 'editorLineNumber.foreground': globalBackground200.value,
+ 'editorLineNumber.activeForeground': '#fff',
+ 'editorLineNumber.foreground': '#f0f0f0',
},
rules: [
{ token: 'number', foreground: 'ace12e' }, // light-green-600
diff --git a/frontend/packages/console-shared/src/components/empty-state/AccessDenied.tsx b/frontend/packages/console-shared/src/components/empty-state/AccessDenied.tsx
index bbf53eaabd8..d1b0ca392d6 100644
--- a/frontend/packages/console-shared/src/components/empty-state/AccessDenied.tsx
+++ b/frontend/packages/console-shared/src/components/empty-state/AccessDenied.tsx
@@ -21,7 +21,7 @@ export const AccessDenied: React.FC = ({ children }) => {
{t("You don't have access to this section due to cluster policy")}
{children && (
-
+
{children}
diff --git a/frontend/packages/console-shared/src/components/empty-state/ConsoleEmptyState.tsx b/frontend/packages/console-shared/src/components/empty-state/ConsoleEmptyState.tsx
index 7b6732315a3..afb5882a2d7 100644
--- a/frontend/packages/console-shared/src/components/empty-state/ConsoleEmptyState.tsx
+++ b/frontend/packages/console-shared/src/components/empty-state/ConsoleEmptyState.tsx
@@ -3,13 +3,10 @@ import {
EmptyStateActions,
EmptyStateBody,
EmptyStateFooter,
- EmptyStateHeader,
- EmptyStateIcon,
EmptyStateVariant,
EmptyState,
EmptyStateProps,
} from '@patternfly/react-core';
-import * as cx from 'classnames';
export const ConsoleEmptyState: React.FC = ({
children,
@@ -20,19 +17,9 @@ export const ConsoleEmptyState: React.FC = ({
...props
}) => {
const dataTest = props['data-test'] || 'console-empty-state';
- const variant = props.variant || EmptyStateVariant.xs;
- const header = (title || Icon) && (
-
- {children}
-
+ {children}
);
const footer = (primaryActions || secondaryActions) && (
@@ -49,8 +36,14 @@ export const ConsoleEmptyState: React.FC = ({
);
return (
-
- {header}
+
{body}
{footer}
diff --git a/frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackInline.tsx b/frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackInline.tsx
index b6efda48413..f8e1496e060 100644
--- a/frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackInline.tsx
+++ b/frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackInline.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
-import { Alert, Button, Modal, ModalVariant, Split, SplitItem } from '@patternfly/react-core';
+import { Alert, Button, Split, SplitItem } from '@patternfly/react-core';
+import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
import { useTranslation } from 'react-i18next';
import { ErrorBoundaryFallbackProps } from '@console/dynamic-plugin-sdk';
import ErrorDetailsBlock from './ErrorDetailsBlock';
diff --git a/frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackPage.tsx b/frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackPage.tsx
index 4c499ee75b6..4771cc7aed9 100644
--- a/frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackPage.tsx
+++ b/frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackPage.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Text, TextVariants } from '@patternfly/react-core';
+import { Content, ContentVariants } from '@patternfly/react-core';
import { useTranslation } from 'react-i18next';
import { ErrorBoundaryFallbackProps } from '@console/dynamic-plugin-sdk';
import { ExpandCollapse } from '@console/internal/components/utils/expand-collapse';
@@ -12,9 +12,12 @@ const ErrorBoundaryFallbackPage: React.FC = (props)
const { t } = useTranslation();
return (
-
+
{t('console-shared~Oh no! Something went wrong.')}
-
+
= ({
isDisabled,
}) => {
return (
-
+
{onSubmit && (
> = ({
}) => (
= ({
})}
)}
-
+
{!hideSubmit && (
= ({
type="button"
data-test-id="download-button"
variant={ButtonVariant.secondary}
- className="pf-v5-c-button--align-right hidden-sm hidden-xs"
+ className="pf-v6-c-button--align-right hidden-sm hidden-xs"
onClick={handleDownload}
icon={ = ({ title, helpText, marginTop, marginBottom }) => {
const marginStyles = {
- ...(marginTop ? { marginTop: `var(--pf-v5-global--spacer--${marginTop})` } : {}),
- ...(marginBottom ? { marginBottom: `var(--pf-v5-global--spacer--${marginBottom})` } : {}),
+ ...(marginTop ? { marginTop: `var(--pf-t--global--spacer--${marginTop})` } : {}),
+ ...(marginBottom ? { marginBottom: `var(--pf-t--global--spacer--${marginBottom})` } : {}),
};
return (
@@ -21,7 +21,7 @@ const FormHeader: React.FC = ({ title, helpText, marginTop, mar
{title}
-
+
{helpText}
= ({
toolbarLinks={
!sidebarOpen &&
hasSidebarContent && [
- setSidebarOpen(true)}>
- ,
]
diff --git a/frontend/packages/console-shared/src/components/formik-fields/InputField.scss b/frontend/packages/console-shared/src/components/formik-fields/InputField.scss
index 8b0ae687a58..1810c77a512 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/InputField.scss
+++ b/frontend/packages/console-shared/src/components/formik-fields/InputField.scss
@@ -7,47 +7,47 @@
position: relative;
// Disable the standard icon
- .pf-v5-c-form-control.pf-m-success,
- .pf-v5-c-form-control.pf-m-warning,
- .pf-v5-c-form-control[aria-invalid='true'] {
+ .pf-v6-c-form-control.pf-m-success,
+ .pf-v6-c-form-control.pf-m-warning,
+ .pf-v6-c-form-control[aria-invalid='true'] {
background-image: none;
}
// Add an overlay icon that also work with browser autofill 'background colors'
- &__validation-icon.pf-v5-c-form-control {
+ &__validation-icon.pf-v6-c-form-control {
// Align the icon on the right side
position: absolute;
top: 0;
right: 0;
bottom: 0;
- // We need pf-v5-c-form-control to get the form control variables below.
+ // We need pf-v6-c-form-control to get the form control variables below.
// But we need to unset the form-control background and border for the icon.
background-color: transparent;
border: 0 transparent;
&.success {
- width: var(--pf-v5-c-form-control--success--PaddingRight);
- background-image: var(--pf-v5-c-form-control--success--BackgroundUrl);
- background-position: var(--pf-v5-c-form-control--success--BackgroundPosition);
- background-size: var(--pf-v5-c-form-control--success--BackgroundSize);
- border-bottom: var(--pf-v5-c-form-control--success--BorderBottomWidth) transparent;
- padding-bottom: var(--pf-v5-c-form-control--success--PaddingBottom);
+ width: var(--pf-v6-c-form-control--success--PaddingRight);
+ background-image: var(--pf-v6-c-form-control--success--BackgroundUrl);
+ background-position: var(--pf-v6-c-form-control--success--BackgroundPosition);
+ background-size: var(--pf-v6-c-form-control--success--BackgroundSize);
+ border-bottom: var(--pf-v6-c-form-control--success--BorderBottomWidth) transparent;
+ padding-bottom: var(--pf-v6-c-form-control--success--PaddingBottom);
}
&.warning {
- width: var(--pf-v5-c-form-control--warning--PaddingRight);
- background-image: var(--pf-v5-c-form-control--warning--BackgroundUrl);
- background-position: var(--pf-v5-c-form-control--warning--BackgroundPosition);
- background-size: var(--pf-v5-c-form-control--warning--BackgroundSize);
- border-bottom: var(--pf-v5-c-form-control--warning--BorderBottomWidth) transparent;
- padding-bottom: var(--pf-v5-c-form-control--warning--PaddingBottom);
+ width: var(--pf-v6-c-form-control--warning--PaddingRight);
+ background-image: var(--pf-v6-c-form-control--warning--BackgroundUrl);
+ background-position: var(--pf-v6-c-form-control--warning--BackgroundPosition);
+ background-size: var(--pf-v6-c-form-control--warning--BackgroundSize);
+ border-bottom: var(--pf-v6-c-form-control--warning--BorderBottomWidth) transparent;
+ padding-bottom: var(--pf-v6-c-form-control--warning--PaddingBottom);
}
&.error {
- width: var(--pf-v5-c-form-control--invalid--PaddingRight);
- background-image: var(--pf-v5-c-form-control--invalid--BackgroundUrl);
- background-position: var(--pf-v5-c-form-control--invalid--BackgroundPosition);
- background-size: var(--pf-v5-c-form-control--invalid--BackgroundSize);
- border-bottom-width: var(--pf-v5-c-form-control--invalid--BorderBottomWidth) transparent;
- padding-bottom: var(--pf-v5-c-form-control--invalid--PaddingBottom);
+ width: var(--pf-v6-c-form-control--invalid--PaddingRight);
+ background-image: var(--pf-v6-c-form-control--invalid--BackgroundUrl);
+ background-position: var(--pf-v6-c-form-control--invalid--BackgroundPosition);
+ background-size: var(--pf-v6-c-form-control--invalid--BackgroundSize);
+ border-bottom-width: var(--pf-v6-c-form-control--invalid--BorderBottomWidth) transparent;
+ padding-bottom: var(--pf-v6-c-form-control--invalid--PaddingBottom);
}
}
}
diff --git a/frontend/packages/console-shared/src/components/formik-fields/InputGroupField.tsx b/frontend/packages/console-shared/src/components/formik-fields/InputGroupField.tsx
index 0b4e41947e2..053dbb00255 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/InputGroupField.tsx
+++ b/frontend/packages/console-shared/src/components/formik-fields/InputGroupField.tsx
@@ -22,7 +22,7 @@ const InputGroupField: React.FC = ({
{afterInput}
+ {afterInput}
);
}}
diff --git a/frontend/packages/console-shared/src/components/formik-fields/MultiTypeaheadField.tsx b/frontend/packages/console-shared/src/components/formik-fields/MultiTypeaheadField.tsx
index ef5bc442444..eb88cafeb73 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/MultiTypeaheadField.tsx
+++ b/frontend/packages/console-shared/src/components/formik-fields/MultiTypeaheadField.tsx
@@ -1,5 +1,7 @@
import * as React from 'react';
import {
+ Label,
+ LabelGroup,
FormGroup,
FormHelperText,
HelperText,
@@ -13,8 +15,6 @@ import {
TextInputGroup,
TextInputGroupMain,
TextInputGroupUtilities,
- ChipGroup,
- Chip,
Button,
} from '@patternfly/react-core';
import { TimesIcon } from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -292,11 +292,12 @@ const MultiTypeaheadField: React.FC = ({
aria-label={ariaLabel}
aria-controls={`${ID_PREFIX}-listbox`}
>
-
+
{field.value.map((selection) => (
- {
+ onClose={(ev) => {
ev.stopPropagation();
onSelect(selection);
}}
@@ -305,21 +306,20 @@ const MultiTypeaheadField: React.FC = ({
})}
>
{getChildren(selection)}
-
+
))}
-
+
{!hideClearButton && (
)}
diff --git a/frontend/packages/console-shared/src/components/formik-fields/RadioGroupField.scss b/frontend/packages/console-shared/src/components/formik-fields/RadioGroupField.scss
index b187b2fbcc1..d7fd96a3fc3 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/RadioGroupField.scss
+++ b/frontend/packages/console-shared/src/components/formik-fields/RadioGroupField.scss
@@ -1,34 +1,26 @@
.ocs-radio-group-field {
- padding-left: var(--pf-v5-global--spacer--sm);
-
- input[type='radio'] {
- margin-top: 0;
- }
-
&:not(.ocs-radio-group-field--inline) {
- .pf-v5-c-radio {
- padding-bottom: var(--pf-v5-global--spacer--md);
+ .pf-v6-c-radio {
+ padding-bottom: var(--pf-t--global--spacer--md);
}
- .pf-v5-c-radio:last-of-type {
+ .pf-v6-c-radio:last-of-type {
padding-bottom: 0;
}
.ocs-radio-group-field__children {
- padding-top: var(--pf-v5-global--spacer--sm);
+ padding-top: var(--pf-t--global--spacer--sm);
}
}
&--inline {
display: flex;
- align-items: center;
-
- > .pf-v5-c-form__group-label {
- padding-bottom: 0;
- margin-right: var(--pf-v5-global--spacer--md);
- }
+ flex-direction: row !important;
}
- .pf-v5-c-radio {
+ .pf-v6-c-radio {
&__description {
width: 100%;
}
}
+ .pf-v6-c-radio__label {
+ margin-bottom: 0;
+ }
}
diff --git a/frontend/packages/console-shared/src/components/formik-fields/RadioGroupField.tsx b/frontend/packages/console-shared/src/components/formik-fields/RadioGroupField.tsx
index 35ca21edb85..1bcc62e7b69 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/RadioGroupField.tsx
+++ b/frontend/packages/console-shared/src/components/formik-fields/RadioGroupField.tsx
@@ -29,7 +29,7 @@ const RadioGroupField: React.FC = ({
fieldId={fieldId}
isRequired={required}
label={label}
- labelIcon={labelIcon}
+ labelHelp={labelIcon}
isInline={isInline}
>
{options.map((option) => {
diff --git a/frontend/packages/console-shared/src/components/formik-fields/SyncedEditorField.scss b/frontend/packages/console-shared/src/components/formik-fields/SyncedEditorField.scss
index eec1518d731..f6e6cccf478 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/SyncedEditorField.scss
+++ b/frontend/packages/console-shared/src/components/formik-fields/SyncedEditorField.scss
@@ -2,26 +2,28 @@
.ocs-synced-editor-field {
&__editor-toggle {
- border-bottom: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
- border-top: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
- margin-left: -$pf-v5-global-gutter;
- margin-right: -$pf-v5-global-gutter;
- padding: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--lg);
- @media (min-width: $pf-v5-global--breakpoint--xl) {
- margin-left: -$pf-v5-global-gutter--md;
- margin-right: -$pf-v5-global-gutter--md;
+ border-bottom: var(--pf-t--global--border--width--divider--default) solid
+ var(--pf-t--global--border--color--default);
+ border-top: var(--pf-t--global--border--width--divider--default) solid
+ var(--pf-t--global--border--color--default);
+ margin-left: -$pf-v6-global-gutter;
+ margin-right: -$pf-v6-global-gutter;
+ padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md);
+ @media (min-width: $pf-v6-global--breakpoint--xl) {
+ margin-left: -$pf-v6-global-gutter--md;
+ margin-right: -$pf-v6-global-gutter--md;
}
- @media (min-width: $pf-v5-global--breakpoint--xl) {
- padding-left: $pf-v5-global-gutter--md;
- padding-right: $pf-v5-global-gutter--md;
+ @media (min-width: $pf-v6-global--breakpoint--xl) {
+ padding-left: $pf-v6-global-gutter--md;
+ padding-right: $pf-v6-global-gutter--md;
}
&.margin {
- margin: var(--pf-v5-global--spacer--md) 0;
+ margin: var(--pf-t--global--spacer--md) 0;
}
}
&__yaml-warning {
- margin: $pf-v5-global-gutter--md $pf-v5-global-gutter--md 0;
+ margin: $pf-v6-global-gutter--md $pf-v6-global-gutter--md 0;
}
}
diff --git a/frontend/packages/console-shared/src/components/formik-fields/item-selector-field/ItemSelectorField.scss b/frontend/packages/console-shared/src/components/formik-fields/item-selector-field/ItemSelectorField.scss
index 7b0b3deb5fd..f3ed1d65566 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/item-selector-field/ItemSelectorField.scss
+++ b/frontend/packages/console-shared/src/components/formik-fields/item-selector-field/ItemSelectorField.scss
@@ -1,13 +1,13 @@
.odc-item-selector-filter {
display: flex;
- padding-bottom: var(--pf-v5-global--spacer--md);
+ padding-bottom: var(--pf-t--global--spacer--md);
&__input {
max-width: 20em;
}
&__count {
- color: var(--pf-v5-global--Color--200);
+ color: var(--pf-t--global--text--color--subtle);
margin-left: auto;
}
}
@@ -16,7 +16,7 @@
display: inline-flex;
flex-direction: column;
flex-flow: wrap;
- background: var(--pf-v5-global--BackgroundColor--200);
+ background: var(--pf-t--global--background--color--secondary--default);
padding: 4px;
&__scrollbar {
@@ -25,8 +25,8 @@
}
&__success-icon {
- color: var(--pf-v5-global--palette--green-700);
- font-size: var(--pf-v5-global--FontSize--md);
- margin-left: var(--pf-v5-global--spacer--lg);
+ color: var(--pf-t--global--icon--color--status--success--default);
+ font-size: var(--pf-t--global--font--size--md);
+ margin-left: var(--pf-t--global--spacer--lg);
}
}
diff --git a/frontend/packages/console-shared/src/components/formik-fields/item-selector-field/ItemSelectorField.tsx b/frontend/packages/console-shared/src/components/formik-fields/item-selector-field/ItemSelectorField.tsx
index f7fa8c2d9c4..ce4899636e7 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/item-selector-field/ItemSelectorField.tsx
+++ b/frontend/packages/console-shared/src/components/formik-fields/item-selector-field/ItemSelectorField.tsx
@@ -6,7 +6,6 @@ import {
TextInput,
EmptyStateBody,
EmptyStateActions,
- EmptyStateHeader,
EmptyStateFooter,
FormHelperText,
HelperText,
@@ -158,11 +157,10 @@ const ItemSelectorField: React.FC = ({
- {t('console-shared~No results match the filter criteria')}}
- headingLevel="h2"
- />
+ {t('console-shared~No results match the filter criteria')}}
+ >
{emptyStateMessage && {emptyStateMessage} }
diff --git a/frontend/packages/console-shared/src/components/formik-fields/item-selector-field/SelectorCard.scss b/frontend/packages/console-shared/src/components/formik-fields/item-selector-field/SelectorCard.scss
index c06ec6528f8..7ceb4617f14 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/item-selector-field/SelectorCard.scss
+++ b/frontend/packages/console-shared/src/components/formik-fields/item-selector-field/SelectorCard.scss
@@ -9,15 +9,15 @@
&__icon {
height: 36px;
max-width: 100%;
- padding: var(--pf-v5-global--spacer--xs);
- border-radius: var(--pf-v5-global--BorderRadius--sm);
- background: var(--pf-v5-global--palette--white);
+ padding: var(--pf-t--global--spacer--xs);
+ border-radius: var(--pf-t--global--border--radius--small);
+ background: var(--pf-t--color--white);
}
&__title {
- font-size: var(--pf-v5-global--FontSize--sm);
- font-weight: var(--pf-v5-global--FontWeight--bold);
- line-height: var(--pf-v5-global--LineHeight--sm);
+ font-size: var(--pf-t--global--font--size--sm);
+ font-weight: var(--pf-t--global--font--weight--body--bold);
+ line-height: var(--pf-t--global--font--line-height--body);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@@ -26,8 +26,8 @@
&__recommended {
position: absolute;
- color: var(--pf-v5-global--primary-color--100);
- font-size: var(--pf-v5-global--FontSize--md);
+ color: var(--pf-t--global--text--color--brand--default);
+ font-size: var(--pf-t--global--font--size--md);
top: 3px;
right: 6px;
}
@@ -36,11 +36,11 @@
&:hover,
&:focus,
&:active {
- outline: var(--pf-v5-global--active-color--100) 3px solid;
+ outline: var(--pf-t--global--border--color--brand--default) 3px solid;
outline-offset: -3px;
}
- .pf-v5-c-card__body {
+ .pf-v6-c-card__body {
padding: 5px !important;
}
}
diff --git a/frontend/packages/console-shared/src/components/formik-fields/key-value-file-input-field/KeyValueFileInputField.scss b/frontend/packages/console-shared/src/components/formik-fields/key-value-file-input-field/KeyValueFileInputField.scss
index 3fc3798b660..17a78b8d4a3 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/key-value-file-input-field/KeyValueFileInputField.scss
+++ b/frontend/packages/console-shared/src/components/formik-fields/key-value-file-input-field/KeyValueFileInputField.scss
@@ -4,6 +4,6 @@
margin-bottom: 0 !important;
}
.key-value--wrapper + .key-value--wrapper {
- border-top: 1px solid var(--pf-v5-global--BorderColor--100);
- padding-top: var(--pf-v5-global--spacer--sm);
+ border-top: 1px solid var(--pf-t--global--border--color--default);
+ padding-top: var(--pf-t--global--spacer--sm);
}
diff --git a/frontend/packages/console-shared/src/components/formik-fields/key-value-file-input-field/KeyValueFileInputField.tsx b/frontend/packages/console-shared/src/components/formik-fields/key-value-file-input-field/KeyValueFileInputField.tsx
index 93068c37546..4d7c0cdc44f 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/key-value-file-input-field/KeyValueFileInputField.tsx
+++ b/frontend/packages/console-shared/src/components/formik-fields/key-value-file-input-field/KeyValueFileInputField.tsx
@@ -67,6 +67,7 @@ const KeyValueFileInputField: React.FC = ({
{!disableRemoveAction && (
= ({
}}
variant="link"
>
-
@@ -107,13 +107,13 @@ const KeyValueFileInputField: React.FC = ({
);
})}
)}
diff --git a/frontend/packages/console-shared/src/components/formik-fields/text-column-field/TextColumnItemContent.tsx b/frontend/packages/console-shared/src/components/formik-fields/text-column-field/TextColumnItemContent.tsx
index dc681dcf568..118ebb36056 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/text-column-field/TextColumnItemContent.tsx
+++ b/frontend/packages/console-shared/src/components/formik-fields/text-column-field/TextColumnItemContent.tsx
@@ -74,7 +74,7 @@ const TextColumnItemContent: React.FC = ({
{dndEnabled && (
@@ -90,6 +90,7 @@ const TextColumnItemContent: React.FC = ({
= ({
onChange(values);
}
}}
- >
-
)}
diff --git a/frontend/packages/console-shared/src/components/getting-started/GettingStartedCard.scss b/frontend/packages/console-shared/src/components/getting-started/GettingStartedCard.scss
index e22908f4ff7..5727fc91cc4 100644
--- a/frontend/packages/console-shared/src/components/getting-started/GettingStartedCard.scss
+++ b/frontend/packages/console-shared/src/components/getting-started/GettingStartedCard.scss
@@ -1,10 +1,6 @@
.ocs-getting-started-card {
&__title-icon {
- margin-right: var(--pf-v5-global--spacer--sm);
- }
-
- small {
- color: var(--pf-v5-global--Color--200);
+ margin-right: var(--pf-t--global--spacer--sm);
}
&__list {
@@ -17,18 +13,31 @@
> li {
// Add spacing to the skeleton similar to the SimpleListItem
- .pf-v5-c-skeleton {
- margin: var(--pf-v5-c-simple-list__item-link--PaddingTop)
- var(--pf-v5-c-simple-list__item-link--PaddingRight)
- var(--pf-v5-c-simple-list__item-link--PaddingBottom)
- var(--pf-v5-c-simple-list__item-link--PaddingLeft);
+ .pf-v6-c-skeleton {
+ margin: var(--pf-v6-c-simple-list__item-link--PaddingTop)
+ var(--pf-v6-c-simple-list__item-link--PaddingRight)
+ var(--pf-v6-c-simple-list__item-link--PaddingBottom)
+ var(--pf-v6-c-simple-list__item-link--PaddingLeft);
}
}
}
+
+ .pf-v6-c-simple-list__item-link {
+ color: var(--pf-t--global--text--color--regular);
+ }
+
+ p {
+ margin-bottom: 0 !important;
+ }
+
+ small {
+ color: var(--pf-t--global--text--color--subtle);
+ font-size: var(--pf-v6-c-content--small--FontSize) !important;
+ }
}
a > svg,
button > svg {
- margin-left: var(--pf-v5-global--spacer--sm);
+ margin-left: var(--pf-t--global--spacer--sm);
}
}
diff --git a/frontend/packages/console-shared/src/components/getting-started/GettingStartedCard.tsx b/frontend/packages/console-shared/src/components/getting-started/GettingStartedCard.tsx
index 78b22416864..b208567d3f2 100644
--- a/frontend/packages/console-shared/src/components/getting-started/GettingStartedCard.tsx
+++ b/frontend/packages/console-shared/src/components/getting-started/GettingStartedCard.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
import {
Flex,
FlexItem,
- Text,
- TextVariants,
+ Content,
+ ContentVariants,
Title,
TitleSizes,
Button,
@@ -59,7 +59,7 @@ export const GettingStartedCard: React.FC = ({
});
};
const getLinkTitleClassNames = (external: boolean) =>
- external ? 'co-external-link pf-v5-u-display-block' : 'co-goto-arrow';
+ external ? 'co-external-link pf-v6-u-display-block' : 'co-goto-arrow';
return (
= ({
{description ? (
-
+
{description}
-
+
) : null}
@@ -113,8 +113,10 @@ export const GettingStartedCard: React.FC = ({
>
{link.description ? (
<>
- {link.title}
- {link.description}
+
+ {link.title}
+
+ {link.description}
) : (
link.title
diff --git a/frontend/packages/console-shared/src/components/getting-started/GettingStartedExpandableGrid.scss b/frontend/packages/console-shared/src/components/getting-started/GettingStartedExpandableGrid.scss
index ffdc5ab5906..264bd16b7be 100644
--- a/frontend/packages/console-shared/src/components/getting-started/GettingStartedExpandableGrid.scss
+++ b/frontend/packages/console-shared/src/components/getting-started/GettingStartedExpandableGrid.scss
@@ -1,77 +1,28 @@
.ocs-getting-started-expandable-grid {
--min-column-width: 220px;
- // Increase css specificity to override a generic [class*="pf-v5-c-"] rule.
- &__header.pf-v5-c-card__header {
- // Use padding sm instead of lg to fix alignment of the KebabToggle action button.
- padding-right: var(--pf-v5-global--spacer--sm);
- }
- &__tooltip {
- white-space: pre-line;
- }
- &__tooltip-icon {
- margin-left: var(--pf-v5-global--spacer--sm);
- }
-
- // Increase css specificity to override a generic [class*="pf-v5-c-"] rule.
- &__content.pf-v5-c-card__body {
+ // Increase css specificity to override a generic [class*="pf-v6-c-"] rule.
+ &__content.pf-v6-c-card__body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
// Keep only additional spacing at the bottom. Horizontal spacing is added to the child elements.
- padding: 0 0 calc(var(--pf-v5-c-card--child--PaddingBottom) / 2) 0;
+ padding: 0 0 calc(var(--pf-v6-c-card--child--PaddingBlockEnd) / 2) 0;
// Hide the border on the right side of the content. Works together wie negative margin below.
overflow: hidden;
padding-top: 0 !important;
- // Increase css specificity to override a generic [class*="pf-v5-c-"] rule.
- > .pf-v5-l-flex.pf-m-grow.pf-m-column {
+ // Increase css specificity to override a generic [class*="pf-v6-c-"] rule.
+ > .pf-v6-l-flex.pf-m-grow.pf-m-column {
// Show a divider on the right side and hide them in the latest column.
- border-right: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
- margin-right: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
+ border-right: var(--pf-t--global--border--width--divider--default) solid
+ var(--pf-t--global--border--color--default);
+ margin-right: calc(-1 * var(--pf-t--global--border--width--divider--default));
// Padding around the card. Vertical spacing is splitted on the card and the grid.
- padding-top: calc(var(--pf-v5-c-card--first-child--PaddingTop) / 2);
- padding-bottom: calc(var(--pf-v5-c-card--child--PaddingBottom) / 2);
- padding-left: var(--pf-v5-c-card--child--PaddingLeft);
- padding-right: var(--pf-v5-c-card--child--PaddingRight);
+ padding-top: calc(var(--pf-v6-c-card--first-child--PaddingBlockStart) * 0.5);
+ padding-bottom: calc(var(--pf-v6-c-card--child--PaddingBlockEnd) * 0.5);
+ padding-left: var(--pf-v6-c-card--child--PaddingInlineStart);
+ padding-right: var(--pf-v6-c-card--child--PaddingInlineEnd);
}
}
}
-
-.ocs-getting-started-expandable-section {
- width: 100%;
- background-color: var(--pf-v5-global--BackgroundColor--100);
- &__toggle-text {
- color: var(--pf-v5-global--Color--dark-100);
- &.is-dark {
- color: var(--pf-v5-global--Color--light-100);
- }
- font-size: var(--pf-v5-global--icon--FontSize--md);
- font-weight: var(--pf-v5-global--FontWeight--bold);
- }
-}
-
-.pf-v5-c-expandable-section__toggle {
- align-items: center;
- width: inherit;
-}
-
-.pf-v5-c-expandable-section__toggle-text {
- width: inherit;
-}
-
-.pf-v5-c-expandable-section__content {
- padding: 0 !important;
-}
-
-.ocs-getting-started-expandable-section__header {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.ocs-getting-started-close-icon {
- cursor: pointer;
- margin-left: auto;
- color: var(--pf-v5-global--Color--dark-100);
-}
diff --git a/frontend/packages/console-shared/src/components/getting-started/GettingStartedExpandableGrid.tsx b/frontend/packages/console-shared/src/components/getting-started/GettingStartedExpandableGrid.tsx
index b3f5dc6101e..a7f6914646e 100644
--- a/frontend/packages/console-shared/src/components/getting-started/GettingStartedExpandableGrid.tsx
+++ b/frontend/packages/console-shared/src/components/getting-started/GettingStartedExpandableGrid.tsx
@@ -1,11 +1,12 @@
import * as React from 'react';
import {
+ Button,
Card,
CardBody,
- Title,
- TitleSizes,
+ CardHeader,
+ CardTitle,
+ CardExpandableContent,
Popover,
- ExpandableSection,
} from '@patternfly/react-core';
import { TimesIcon } from '@patternfly/react-icons';
import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
@@ -43,41 +44,47 @@ export const GettingStartedExpandableGrid: React.FC setIsOpen(!isOpen)}
+
-
-
- {title}{' '}
- <Popover bodyContent={titleTooltip} triggerAction="hover">
- <span
- role="button"
- aria-label={t('console-shared~More info')}
- className="ocs-getting-started-expandable-grid__tooltip-icon"
- >
- <OutlinedQuestionCircleIcon />
- </span>
- </Popover>
-
-
- {setShowState && (
-
- }
>
- setIsOpen(!isOpen)}
+ actions={
+ setShowState && {
+ actions: (
+
+ {title}{' '}
+
+
+
+
+
+
+
{children}
-
-
+
+
);
};
diff --git a/frontend/packages/console-shared/src/components/getting-started/__tests__/RestoreGettingStartedButton.spec.tsx b/frontend/packages/console-shared/src/components/getting-started/__tests__/RestoreGettingStartedButton.spec.tsx
index 40d89df1b25..ad5b1661c26 100644
--- a/frontend/packages/console-shared/src/components/getting-started/__tests__/RestoreGettingStartedButton.spec.tsx
+++ b/frontend/packages/console-shared/src/components/getting-started/__tests__/RestoreGettingStartedButton.spec.tsx
@@ -66,11 +66,9 @@ describe('RestoreGettingStartedButton', () => {
]);
const wrapper = shallow( = ({ children, title, hint, isDark }) => (
+const PageLayout: React.FC = ({ children, title, hint }) => (
<>
-
+
{title}
-
+
{hint &&
{hint}
}
{children}
+ {children}
);
diff --git a/frontend/packages/console-shared/src/components/lists/DetailPropertyList.scss b/frontend/packages/console-shared/src/components/lists/DetailPropertyList.scss
index a48b80ac5d4..8c995f795a9 100644
--- a/frontend/packages/console-shared/src/components/lists/DetailPropertyList.scss
+++ b/frontend/packages/console-shared/src/components/lists/DetailPropertyList.scss
@@ -1,4 +1,4 @@
-ul.pf-v5-c-list:not(.pf-m-inline).co-detail-property-list {
+ul.pf-v6-c-list:not(.pf-m-inline).co-detail-property-list {
list-style: none;
padding-left: 0;
li + li {
@@ -7,5 +7,5 @@ ul.pf-v5-c-list:not(.pf-m-inline).co-detail-property-list {
}
.co-detail-property-list__item-title {
- color: var(--pf-v5-global--Color--200);
+ color: var(--pf-t--global--text--color--subtle);
}
diff --git a/frontend/packages/console-shared/src/components/markdown-extensions/inline-clipboard-extension.ts b/frontend/packages/console-shared/src/components/markdown-extensions/inline-clipboard-extension.ts
index 2b33aeacf2c..335b68556e6 100644
--- a/frontend/packages/console-shared/src/components/markdown-extensions/inline-clipboard-extension.ts
+++ b/frontend/packages/console-shared/src/components/markdown-extensions/inline-clipboard-extension.ts
@@ -19,11 +19,11 @@ const useInlineCopyClipboardShowdownExtension = () => {
groupId: string,
): string => {
if (!group || !subGroup || !groupType || !groupId) return text;
- return `
-