From b3ccf56c76cf4b237465d06e39a751a33ef50746 Mon Sep 17 00:00:00 2001 From: Freya Gustavsson Date: Thu, 20 Feb 2025 16:35:35 +0100 Subject: [PATCH] Class name updater `npx @patternfly/class-name-updater ./pkg --v6 --fix` --- pkg/apps/application-list.jsx | 2 +- pkg/apps/application.scss | 4 +- pkg/kdump/kdump-view.jsx | 26 ++--- pkg/kdump/kdump.scss | 2 +- pkg/lib/cockpit-components-empty-state.css | 2 +- .../cockpit-components-firewalld-request.jsx | 2 +- pkg/lib/cockpit-components-listing-panel.jsx | 2 +- pkg/lib/cockpit-components-listing-panel.scss | 6 +- pkg/lib/cockpit-components-logs-panel.scss | 2 +- pkg/lib/cockpit-components-modifications.css | 2 +- pkg/lib/cockpit-components-password.jsx | 12 +-- pkg/lib/cockpit-components-password.scss | 2 +- pkg/lib/cockpit-components-select.scss | 2 +- pkg/lib/cockpit-components-table.scss | 6 +- pkg/lib/cockpit-components-table.tsx | 2 +- pkg/lib/cockpit-components-truncate.tsx | 4 +- pkg/lib/cockpit-connect-ssh.tsx | 8 +- pkg/lib/context-menu.scss | 2 +- pkg/lib/ct-card.scss | 22 ++-- pkg/lib/menu-select-widget.scss | 12 +-- pkg/lib/table.css | 4 +- pkg/metrics/metrics.jsx | 6 +- pkg/metrics/metrics.scss | 80 +++++++------- pkg/networkmanager/firewall.jsx | 2 +- .../network-interface-members.jsx | 2 +- pkg/networkmanager/networking.scss | 26 ++--- pkg/networkmanager/wireguard.jsx | 14 +-- pkg/networkmanager/wireguard.scss | 8 +- pkg/packagekit/updates.jsx | 4 +- pkg/packagekit/updates.scss | 20 ++-- pkg/playground/test.js | 6 +- pkg/selinux/setroubleshoot-view.jsx | 6 +- pkg/selinux/setroubleshoot.scss | 6 +- pkg/shell/credentials.scss | 8 +- pkg/shell/credentials.tsx | 4 +- pkg/shell/hosts.tsx | 14 +-- pkg/shell/hosts_dialog.jsx | 8 +- pkg/shell/nav.scss | 101 +++++++++--------- pkg/shell/nav.tsx | 8 +- pkg/shell/shell.scss | 18 ++-- pkg/shell/shell.tsx | 2 +- pkg/shell/topnav.tsx | 4 +- pkg/sosreport/sosreport.jsx | 4 +- pkg/static/login.js | 8 +- pkg/static/login.scss | 100 ++++++++--------- pkg/storaged/dialog.jsx | 8 +- pkg/storaged/pages.jsx | 4 +- pkg/storaged/storage-controls.jsx | 4 +- pkg/storaged/storage.scss | 16 +-- pkg/systemd/hwinfo.jsx | 2 +- pkg/systemd/hwinfo.scss | 4 +- pkg/systemd/logDetails.jsx | 2 +- pkg/systemd/logs.jsx | 2 +- pkg/systemd/logs.scss | 40 +++---- .../overview-cards/configurationCard.jsx | 34 +++--- .../overview-cards/configurationCard.scss | 2 +- pkg/systemd/overview-cards/cryptoPolicies.jsx | 8 +- pkg/systemd/overview-cards/healthCard.scss | 2 +- pkg/systemd/overview-cards/lastLogin.tsx | 10 +- pkg/systemd/overview-cards/realmd.scss | 2 +- pkg/systemd/overview-cards/shutdownStatus.tsx | 2 +- .../overview-cards/systemInformationCard.jsx | 28 ++--- pkg/systemd/overview-cards/usageCard.jsx | 16 +-- pkg/systemd/overview-cards/usageCard.scss | 2 +- pkg/systemd/overview.scss | 40 +++---- pkg/systemd/reporting.scss | 2 +- pkg/systemd/service-details.scss | 6 +- pkg/systemd/services.jsx | 2 +- pkg/systemd/services.scss | 16 +-- pkg/systemd/terminal.jsx | 2 +- pkg/systemd/terminal.scss | 6 +- pkg/systemd/timers.scss | 2 +- pkg/users/account-details.js | 2 +- pkg/users/accounts-list.js | 6 +- pkg/users/authorized-keys-panel.js | 2 +- pkg/users/users.scss | 20 ++-- 76 files changed, 440 insertions(+), 439 deletions(-) diff --git a/pkg/apps/application-list.jsx b/pkg/apps/application-list.jsx index 48fdd0a9ca04..45c2e6683af9 100644 --- a/pkg/apps/application-list.jsx +++ b/pkg/apps/application-list.jsx @@ -171,7 +171,7 @@ export const ApplicationList = ({ metainfo_db, appProgress, appProgressTitle, ac -

{_("Applications")}

+

{_("Applications")}

diff --git a/pkg/apps/application.scss b/pkg/apps/application.scss index 4a58014df08b..c34b010576bd 100644 --- a/pkg/apps/application.scss +++ b/pkg/apps/application.scss @@ -13,11 +13,11 @@ margin-inline-end: 10px; } -.app-list .pf-v5-c-data-list__item-action button { +.app-list .pf-v6-c-data-list__item-action button { min-inline-size: 6rem; } -.app-list .pf-v5-c-data-list__item-content { +.app-list .pf-v6-c-data-list__item-content { /* Vertically align application info to the center */ align-items: center; } diff --git a/pkg/kdump/kdump-view.jsx b/pkg/kdump/kdump-view.jsx index dfce08b3c4fd..e653084ec7b7 100644 --- a/pkg/kdump/kdump-view.jsx +++ b/pkg/kdump/kdump-view.jsx @@ -357,14 +357,14 @@ export class KdumpPage extends React.Component { if (target.type === "local") { verifyMessage = fmt_to_fragments( ' ' + _("Results of the crash will be stored in $0 as $1, if kdump is properly configured."), - {path}, - vmcore); + {path}, + vmcore); } else if (target.type === "ssh" || target.type == "nfs") { verifyMessage = fmt_to_fragments( ' ' + _("Results of the crash will be copied through $0 to $1 as $2, if kdump is properly configured."), - {target.type === "ssh" ? "SSH" : "NFS"}, - {path}, - vmcore); + {target.type === "ssh" ? "SSH" : "NFS"}, + {path}, + vmcore); } } @@ -562,20 +562,20 @@ ${enableCrashKernel} if (this.props.reservedMemory == 0) { alertMessage = fmt_to_fragments( _("Kernel did not boot with the $0 setting"), - crashkernel + crashkernel ); alertDetail = fmt_to_fragments( _("Reserve memory at boot time by setting a '$0' option on the kernel command line. For example, append '$1' to $2 in $3 or use your distribution's kernel argument editor."), - crashkernel, - crashkernel=512M, - GRUB_CMDLINE_LINUX, - /etc/default/grub + crashkernel, + crashkernel=512M, + GRUB_CMDLINE_LINUX, + /etc/default/grub ); } else if (this.props.kdumpStatus.state == "failed") { alertMessage = ( <> {_("Service has an error")} - + ); } @@ -583,7 +583,7 @@ ${enableCrashKernel} alertMessage = _("Kdump service is not installed."); alertDetail = fmt_to_fragments( _("Install the $0 package."), - kexec-tools + kexec-tools ); } } @@ -605,7 +605,7 @@ ${enableCrashKernel} {alertMessage && diff --git a/pkg/kdump/kdump.scss b/pkg/kdump/kdump.scss index 077cb55f98f2..c86195296c47 100644 --- a/pkg/kdump/kdump.scss +++ b/pkg/kdump/kdump.scss @@ -28,7 +28,7 @@ } // error details -#kdump-settings-dialog .pf-v5-c-code-block__pre { +#kdump-settings-dialog .pf-v6-c-code-block__pre { max-block-size: 200px; overflow-y: auto; } diff --git a/pkg/lib/cockpit-components-empty-state.css b/pkg/lib/cockpit-components-empty-state.css index 06ba60e8e810..557ec19c2883 100644 --- a/pkg/lib/cockpit-components-empty-state.css +++ b/pkg/lib/cockpit-components-empty-state.css @@ -1,3 +1,3 @@ -.pf-v5-c-empty-state .pf-v5-c-button.pf-m-primary.slim { +.pf-v6-c-empty-state .pf-v6-c-button.pf-m-primary.slim { margin: 0; } diff --git a/pkg/lib/cockpit-components-firewalld-request.jsx b/pkg/lib/cockpit-components-firewalld-request.jsx index bd6b8e56bda0..453d0d70c12e 100644 --- a/pkg/lib/cockpit-components-firewalld-request.jsx +++ b/pkg/lib/cockpit-components-firewalld-request.jsx @@ -125,7 +125,7 @@ export const FirewalldRequest = ({ service, title, pageSection }) => { return null; } else { alert = ( - + diff --git a/pkg/lib/cockpit-components-listing-panel.jsx b/pkg/lib/cockpit-components-listing-panel.jsx index 4e0a836884fc..793ba9f300a4 100644 --- a/pkg/lib/cockpit-components-listing-panel.jsx +++ b/pkg/lib/cockpit-components-listing-panel.jsx @@ -55,7 +55,7 @@ export class ListingPanel extends React.Component { return (
- {listingDetail &&
+ {listingDetail &&
{listingDetail}
} {this.props.tabRenderers.length && diff --git a/pkg/lib/cockpit-components-listing-panel.scss b/pkg/lib/cockpit-components-listing-panel.scss index c258ae697514..1777119287cd 100644 --- a/pkg/lib/cockpit-components-listing-panel.scss +++ b/pkg/lib/cockpit-components-listing-panel.scss @@ -18,7 +18,7 @@ order: 1; } - .pf-v5-c-tab-content { + .pf-v6-c-tab-content { order: 3; flex-basis: 100%; } @@ -47,7 +47,7 @@ } .ct-table { - > tbody > .pf-v5-c-table__expandable-row { + > tbody > .pf-v6-c-table__expandable-row { // Don't scroll table's expanded contents vertically. // Instead, rely on page scrolling. // Important for mobile; also useful for desktop. @@ -61,7 +61,7 @@ @media not all and (prefers-reduced-motion: reduce) { // Add expansion animations when prefers-reduced isn't enabled - .ct-table .pf-v5-c-table__expandable-row-content { + .ct-table .pf-v6-c-table__expandable-row-content { // Animation ends at or before 2/3 in most cases; so we extend by 1.5 to compensate animation: ctListingPanelShow calc(var(--pf-v5-global--TransitionDuration) * 1.5) var(--pf-v5-global--TimingFunction); } diff --git a/pkg/lib/cockpit-components-logs-panel.scss b/pkg/lib/cockpit-components-logs-panel.scss index 31cb0fc42035..fca8982926af 100644 --- a/pkg/lib/cockpit-components-logs-panel.scss +++ b/pkg/lib/cockpit-components-logs-panel.scss @@ -8,7 +8,7 @@ padding-inline: 0; } -.cockpit-log-panel .pf-v5-c-card__header-main > .pf-v5-c-card__title > .pf-v5-c-card__title-text { +.cockpit-log-panel .pf-v6-c-card__header-main > .pf-v6-c-card__title > .pf-v6-c-card__title-text { padding: 0; font-weight: normal; font-size: var(--pf-v5-global--FontSize--2xl); diff --git a/pkg/lib/cockpit-components-modifications.css b/pkg/lib/cockpit-components-modifications.css index dfdaadb1bd00..992373748b7c 100644 --- a/pkg/lib/cockpit-components-modifications.css +++ b/pkg/lib/cockpit-components-modifications.css @@ -23,6 +23,6 @@ color: var(--pf-v5-global--success-color--100); } -.pf-v5-c-card.modifications-table .pf-v5-c-card__header { +.pf-v6-c-card.modifications-table .pf-v6-c-card__header { justify-content: space-between; } diff --git a/pkg/lib/cockpit-components-password.jsx b/pkg/lib/cockpit-components-password.jsx index 315efcb81693..6365ae88e9a4 100644 --- a/pkg/lib/cockpit-components-password.jsx +++ b/pkg/lib/cockpit-components-password.jsx @@ -93,15 +93,15 @@ export const PasswordFormFields = ({ let messageColor; if (passwordStrength > 66) { variant = "success"; - messageColor = "pf-v5-u-success-color-200"; + messageColor = "pf-v6-u-success-color-200"; message = _("Strong password"); } else if (passwordStrength > 33) { variant = "warning"; - messageColor = "pf-v5-u-warning-color-200"; + messageColor = "pf-v6-u-warning-color-200"; message = _("Acceptable password"); } else { variant = "danger"; - messageColor = "pf-v5-u-danger-color-200"; + messageColor = "pf-v6-u-danger-color-200"; message = _("Weak password"); } @@ -118,7 +118,7 @@ export const PasswordFormFields = ({ labelHelp={password_label_info && @@ -143,7 +143,7 @@ export const PasswordFormFields = ({ {passwordStrengthValue >= 0 && -
{passwordMessage}
+
{passwordMessage}
 } {error_password && diff --git a/pkg/lib/cockpit-components-password.scss b/pkg/lib/cockpit-components-password.scss index e1d2d449067e..508656755548 100644 --- a/pkg/lib/cockpit-components-password.scss +++ b/pkg/lib/cockpit-components-password.scss @@ -5,7 +5,7 @@ grid-gap: var(--pf-v5-global--spacer--xs); inline-size: var(--pf-v5-global--spacer--2xl); - .pf-v5-c-progress__description, .pf-v5-c-progress__status { + .pf-v6-c-progress__description, .pf-v6-c-progress__status { display: none; } } diff --git a/pkg/lib/cockpit-components-select.scss b/pkg/lib/cockpit-components-select.scss index 9cf7129577a3..1c978b4a0afd 100644 --- a/pkg/lib/cockpit-components-select.scss +++ b/pkg/lib/cockpit-components-select.scss @@ -1,4 +1,4 @@ -.ct-select-header .pf-v5-c-menu__item-main { +.ct-select-header .pf-v6-c-menu__item-main { color: var(--pf-v5-c-menu__group-title--Color); font-size: var(--pf-v5-c-menu__group-title--FontSize); } diff --git a/pkg/lib/cockpit-components-table.scss b/pkg/lib/cockpit-components-table.scss index f181354b302e..7ccace7db58f 100644 --- a/pkg/lib/cockpit-components-table.scss +++ b/pkg/lib/cockpit-components-table.scss @@ -3,7 +3,7 @@ .ct-table { &.pf-m-compact { > thead, > tbody { - > tr:not(.pf-v5-c-table__expandable-row) { + > tr:not(.pf-v6-c-table__expandable-row) { // We actually want the normal font size for our lists --pf-v5-c-table-cell--FontSize: var(--pf-v5-global--FontSize--md); } @@ -60,7 +60,7 @@ } // Fix toggle button alignment - .pf-v5-c-table__toggle { + .pf-v6-c-table__toggle { // Workaround: Chrome sometimes oddly expands the table, // unless a width is set. (This affects panels the most, but not only.) // As the width is smaller than the contents, and this is a table, @@ -83,7 +83,7 @@ } // Special handling for rows with errors -.pf-v5-c-table tbody tr:first-child.error { +.pf-v6-c-table tbody tr:first-child.error { &, tbody.pf-m-expanded > & { background-color: var(--ct-color-list-critical-bg) !important; /* keep red background when expanded */ border-block-start: 1px solid var(--ct-color-list-critical-border); diff --git a/pkg/lib/cockpit-components-table.tsx b/pkg/lib/cockpit-components-table.tsx index fcd2d709d267..3ebe7d18bcbe 100644 --- a/pkg/lib/cockpit-components-table.tsx +++ b/pkg/lib/cockpit-components-table.tsx @@ -284,7 +284,7 @@ export const ListingTable = ({ setExpanded({ ...expanded, [rowKey]: !expanded[rowKey] }); } }} /> - : ) + : ) : null } {onSelect && diff --git a/pkg/lib/cockpit-components-truncate.tsx b/pkg/lib/cockpit-components-truncate.tsx index fe0101127924..551cbff46bd2 100644 --- a/pkg/lib/cockpit-components-truncate.tsx +++ b/pkg/lib/cockpit-components-truncate.tsx @@ -35,8 +35,8 @@ export const Truncate = ({ content: string, }) => { return ( - - + + {content} diff --git a/pkg/lib/cockpit-connect-ssh.tsx b/pkg/lib/cockpit-connect-ssh.tsx index 1f17f1686f2f..4c8a6ee3a314 100644 --- a/pkg/lib/cockpit-connect-ssh.tsx +++ b/pkg/lib/cockpit-connect-ssh.tsx @@ -132,10 +132,10 @@ const UnknownHostDialog = ({ host, error, dialogResult }: { body = <>

{_("To ensure that your connection is not intercepted by a malicious third-party, please verify the host key fingerprint:")}

- {host_fp} + {host_fp}

({key_type})

{cockpit.format(_("To verify a fingerprint, run the following on $0 while physically sitting at the machine or through a trusted network:"), address.address)}

- {scan_cmd} + {scan_cmd}

{_("The resulting fingerprint is fine to share via public methods, including email.")}

{_("If the fingerprint matches, click 'Trust and add host'. Otherwise, do not connect and contact your administrator.")}

; @@ -150,9 +150,9 @@ const UnknownHostDialog = ({ host, error, dialogResult }: { isExpanded={verifyExpanded} onToggle={(_ev, value) => setVerifyExpanded(value) }>
{_("Run this command over a trusted network or physically on the remote machine:")}
- {scan_cmd} + {scan_cmd}
{_("The fingerprint should match:")} {fingerprint_help}
- {host_fp} + {host_fp} ; } diff --git a/pkg/lib/context-menu.scss b/pkg/lib/context-menu.scss index 1f1c7df2490e..fd4065e21c9d 100644 --- a/pkg/lib/context-menu.scss +++ b/pkg/lib/context-menu.scss @@ -7,7 +7,7 @@ /* Move the menu under the mouse */ transform: translate(calc(-1 * var(--pf-v5-global--spacer--sm)), calc(-1 * var(--pf-v5-global--spacer--sm))); - &Option .pf-v5-c-menu__item-text { + &Option .pf-v6-c-menu__item-text { display: flex; gap: var(--pf-v5-global--spacer--sm); justify-content: space-between; diff --git a/pkg/lib/ct-card.scss b/pkg/lib/ct-card.scss index 076853b3779f..08d4405bfda4 100644 --- a/pkg/lib/ct-card.scss +++ b/pkg/lib/ct-card.scss @@ -1,40 +1,40 @@ @use "_global-variables.scss" as *; /* Rely on the margin from the Card for spacing */ -.ct-card.pf-v5-c-card .table { +.ct-card.pf-v6-c-card .table { margin-block-end: 0; } // FIXME: Once PF4 provides a property for removing padding: https://github.com/patternfly/patternfly-react/issues/5606 -.ct-card.pf-v5-c-card .pf-v5-c-card__body.contains-list { +.ct-card.pf-v6-c-card .pf-v6-c-card__body.contains-list { padding-inline: 0; padding-block-end: 0; - > .pf-v5-c-table > :last-child > tr:last-child { + > .pf-v6-c-table > :last-child > tr:last-child { border-block-end: none; } // Remove excess padding from compact tables toggles // And adjust the padding to left align the toggles with the card header - > .pf-v5-c-table { - .pf-v5-c-table__toggle { + > .pf-v6-c-table { + .pf-v6-c-table__toggle { padding-inline-start: 0; - > .pf-v5-c-button { + > .pf-v6-c-button { padding-inline-start: var(--pf-v5-global--spacer--lg); } } } } -.ct-card.pf-v5-c-card .pf-v5-c-card__title-text { +.ct-card.pf-v6-c-card .pf-v6-c-card__title-text { font-weight: normal; font-size: var(--pf-v5-global--FontSize--2xl); } // Remove excess top padding from top-level empty state in cards, // as card headers already add enough space -.ct-card > .pf-v5-c-card__body > .pf-v5-c-empty-state { +.ct-card > .pf-v6-c-card__body > .pf-v6-c-empty-state { --pf-v5-c-empty-state__body--MarginTop: 0; padding-block: 0 var(--pf-v5-global--spacer--md); } @@ -43,7 +43,7 @@ --ct-grid-columns: 2; --pf-v5-l-gallery--GridTemplateColumns: repeat(var(--ct-grid-columns), 1fr); - > .pf-v5-c-card:not(.ct-card-info) { + > .pf-v6-c-card:not(.ct-card-info) { // Extend all non-info cards to be full width; // let ct-card-info fit 1 column of the grid grid-column: 1 / -1; @@ -57,7 +57,7 @@ // Remove redundant padding from embedded toolbars (handled by header) // Toolbars in card headers are not a common scenario so no need to upstream this -.ct-card.pf-v5-c-card .pf-v5-c-toolbar, -.ct-card.pf-v5-c-card .pf-v5-c-toolbar__content { +.ct-card.pf-v6-c-card .pf-v6-c-toolbar, +.ct-card.pf-v6-c-card .pf-v6-c-toolbar__content { padding: 0; } diff --git a/pkg/lib/menu-select-widget.scss b/pkg/lib/menu-select-widget.scss index 81778df3b6e3..c27ac04898ea 100644 --- a/pkg/lib/menu-select-widget.scss +++ b/pkg/lib/menu-select-widget.scss @@ -3,24 +3,24 @@ // A menu gives us the interaction we want, but the styling is a bit off. // Therefore, we're changing the visuals here locally. // PF4 upstream request for multi-select @ https://github.com/patternfly/patternfly/issues/4027 -.ct-menu-select-widget.pf-v5-c-menu { +.ct-menu-select-widget.pf-v6-c-menu { // Divider is silly between the widgets in this context - .pf-v5-c-divider { + .pf-v6-c-divider { display: none; - + .pf-v5-c-menu__content { + + .pf-v6-c-menu__content { // There should be minimal space between the widgets (replacing the divider) margin-block-start: var(--pf-v5-global--spacer--sm); } } - .pf-v5-c-menu__content { + .pf-v6-c-menu__content { // An overflow multi-select widget needs an outline border: 1px solid var(--pf-v5-global--BorderColor--100); } // Search should not be inset when there's no border containing it - .pf-v5-c-menu__search { + .pf-v6-c-menu__search { padding: 0; } @@ -29,7 +29,7 @@ // when active but also keep the background color when the list loses // focus (such as when the keyboard or mouse navigates outside, // including initial rendering of the list. - .pf-v5-c-menu__list:not(:focus-within) .pf-m-selected { + .pf-v6-c-menu__list:not(:focus-within) .pf-m-selected { background-color: var(--pf-v5-c-menu__list-item--hover--BackgroundColor); } } diff --git a/pkg/lib/table.css b/pkg/lib/table.css index 63277cfb97c4..7455cc133a0b 100644 --- a/pkg/lib/table.css +++ b/pkg/lib/table.css @@ -106,8 +106,8 @@ } } -.pf-v5-c-table__tr.pf-m-clickable:hover > td, -.pf-v5-c-table__tr.pf-m-clickable:hover > th { +.pf-v6-c-table__tr.pf-m-clickable:hover > td, +.pf-v6-c-table__tr.pf-m-clickable:hover > th { /* PF5 has no hover background color; we have to force the override for hover colors */ background-color: var(--ct-color-list-hover-bg) !important; color: var(--ct-color-list-hover-text) !important; diff --git a/pkg/metrics/metrics.jsx b/pkg/metrics/metrics.jsx index ec7ba19a19fb..2a3ceba60853 100644 --- a/pkg/metrics/metrics.jsx +++ b/pkg/metrics/metrics.jsx @@ -728,7 +728,7 @@ class CurrentMetrics extends React.Component { allCpus = ( - + ); } else { cpu_label = this.state.cpuUsed + '%'; @@ -765,7 +765,7 @@ class CurrentMetrics extends React.Component { allDisks = ( - + ); } @@ -1998,7 +1998,7 @@ export const Application = () => { - cockpit.jump("/system")} className="pf-v5-c-breadcrumb__link">{_("Overview")} + cockpit.jump("/system")} className="pf-v6-c-breadcrumb__link">{_("Overview")} {_("Metrics and history")} diff --git a/pkg/metrics/metrics.scss b/pkg/metrics/metrics.scss index be0c8a411b64..fc13a170dac4 100644 --- a/pkg/metrics/metrics.scss +++ b/pkg/metrics/metrics.scss @@ -10,7 +10,7 @@ @import "@patternfly/patternfly/patternfly-charts.css"; #app { - section.pf-v5-c-page__main-breadcrumb { + section.pf-v6-c-page__main-breadcrumb { padding-block-end: var(--pf-v5-c-page__main-breadcrumb--PaddingTop); } } @@ -30,13 +30,13 @@ html { --resource-icon-color-full: var(--pf-v5-global--palette--orange-200); // Adjust alert color to separate itself from the history section background - .pf-v5-c-alert { + .pf-v6-c-alert { --pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400); } } // Remove doubled-up padding on "main" sections, when two+ sections are used. -.pf-v5-c-page__main-section + .pf-v5-c-page__main-section { +.pf-v6-c-page__main-section + .pf-v6-c-page__main-section { padding-block-start: 0; } @@ -46,7 +46,7 @@ html { --pf-v5-l-gallery--GridTemplateColumns: repeat(auto-fit, minmax(var(--card-width), 1fr)); // the cards already have padding, align the "top 5" tables with the other content - .pf-v5-c-table { + .pf-v6-c-table { --pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft: 0; --pf-v5-c-table--m-compact--cell--first-last-child--PaddingRight: 0; @@ -56,7 +56,7 @@ html { } } - .pf-v5-c-card { + .pf-v6-c-card { // Make sure the cards do not get taller than 50% of the screen // ...and when they do, they should scroll @media screen and (orientation: landscape) { @@ -81,8 +81,8 @@ html { padding-block-start: 0; } - .pf-v5-c-table thead th:not(:first-child), - .pf-v5-c-table tbody td:not(:first-child) { + .pf-v6-c-table thead th:not(:first-child), + .pf-v6-c-table tbody td:not(:first-child) { text-align: end; } } @@ -127,7 +127,7 @@ html { } // avoid the "x" icon on high CPU usage - .pf-v5-c-progress__status-icon { + .pf-v6-c-progress__status-icon { display: none; } @@ -141,67 +141,67 @@ html { // Stretch the progress stack and description list so they fill up remaining space. // This pushes the (unflexing) tables to the bottom. .progress-stack, - .pf-v5-c-description-list { + .pf-v6-c-description-list { flex: 1 1 0; align-content: start; } // When progress stack and description list are used sequentially, // give the most space to the latter of the two elements. - .progress-stack + .pf-v5-c-description-list, - .pf-v5-c-description-list + .progress-stack { + .progress-stack + .pf-v6-c-description-list, + .pf-v6-c-description-list + .progress-stack { flex-basis: 100%; } // WebKit is a little wonky with flex sizing; it needs specific instructions here - .pf-v5-c-description-list:first-child { + .pf-v6-c-description-list:first-child { flex-grow: 0; } - .pf-v5-c-description-list__description { + .pf-v6-c-description-list__description { font-size: var(--pf-v5-global--FontSize--sm); } } // Shrink progress bars and their gap a little - .pf-v5-c-progress { + .pf-v6-c-progress { grid-gap: 0; --pf-v5-c-progress__bar--Height: var(--pf-v5-global--spacer--xs); // PF4 uses end; it probably should arguably use last baseline. // (perhaps end may work better for non-text content?) align-items: last baseline; - + .pf-v5-c-progress { + + .pf-v6-c-progress { // Add a tiny gap for sandwiched usage bars (as in CPU) padding-block-start: 1px; } } // Only underline the description - .pf-v5-c-button.pf-m-link.pf-m-inline:hover { + .pf-v6-c-button.pf-m-link.pf-m-inline:hover { text-decoration: none; - .pf-v5-c-progress__description { + .pf-v6-c-progress__description { text-decoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration); } } // Match font weight with description list terms - .pf-v5-c-progress__description { + .pf-v6-c-progress__description { font-weight: var(--pf-v5-global--FontWeight--bold); } // Recolor text .pf-m-link { &, &:hover { - .pf-v5-c-progress__measure { + .pf-v6-c-progress__measure { color: var(--pf-v5-global--Color--100); } } } // default is way too wide for the cards - .pf-v5-c-description-list { + .pf-v6-c-description-list { --pf-v5-c-description-list--m-horizontal__term--width: minmax(0, auto); --pf-v5-c-description-list--m-horizontal__description--width: minmax(0, auto); } @@ -223,18 +223,18 @@ html { inline-size: 2rem; min-inline-size: 0; - .pf-v5-c-table__text { + .pf-v6-c-table__text { --pf-v5-c-table--cell--MinWidth: 0; display: inline; } } - .pf-m-grid-lg.pf-v5-c-table { + .pf-m-grid-lg.pf-v6-c-table { tbody:first-of-type { border-block-start: none; } - tbody tr:not(.pf-v5-c-table__expandable-row) { + tbody tr:not(.pf-v6-c-table__expandable-row) { --pf-v5-c-table-tr--responsive--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-table-tr--responsive--PaddingRight: 0; --pf-v5-c-table-tr--responsive--PaddingBottom: var(--pf-v5-global--spacer--sm); @@ -261,7 +261,7 @@ html { } } -.pf-v5-c-popover { +.pf-v6-c-popover { thead th:not(:first-child) { text-align: end; } @@ -282,18 +282,18 @@ html { --card-width: 200px; } - .current-metrics .pf-v5-c-card__body { + .current-metrics .pf-v6-c-card__body { overflow-block: auto; max-block-size: 50vw; } // Trim down the gutter space between cards - .current-metrics.pf-v5-l-gallery.pf-m-gutter { + .current-metrics.pf-v6-l-gallery.pf-m-gutter { grid-gap: var(--pf-v5-global--spacer--sm); } // Shave off a few pixels from cards - .pf-v5-c-card__header, .pf-v5-c-card__title, .pf-v5-c-card__body, .pf-v5-c-card__footer { + .pf-v6-c-card__header, .pf-v6-c-card__title, .pf-v6-c-card__body, .pf-v6-c-card__footer { --pf-v5-c-card--first-child--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-card__title--not--last-child--PaddingBottom: var(--pf-v5-global--spacer--sm); --pf-v5-c-card--child--PaddingTop: var(--pf-v5-global--spacer--sm); @@ -306,7 +306,7 @@ html { // Change progress layout in medium sizes @media (min-width: 460px) and (max-width: 1200px) { // Stack description lists (instead of grid) - .pf-v5-c-description-list__group { + .pf-v6-c-description-list__group { display: block; } } @@ -317,7 +317,7 @@ html { grid-column: 1 / -1; // Reflow interfaces horizontally, with wrapping - .pf-v5-c-table > tbody { + .pf-v6-c-table > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); grid-gap: 0 var(--pf-v5-global--spacer--lg); @@ -388,7 +388,7 @@ $graphs: cpu, memory, disks, network; } } - &-sublabels.pf-v5-c-content { + &-sublabels.pf-v6-c-content { display: flex; small { @@ -643,7 +643,7 @@ $graphs: cpu, memory, disks, network; } } - .pf-v5-c-card__body:first-child { + .pf-v6-c-card__body:first-child { padding-block-start: 0; } } @@ -726,7 +726,7 @@ $graphs: cpu, memory, disks, network; } // leave some space for the focus rings - .pf-v5-c-switch { + .pf-v6-c-switch { margin-block-end: 10px; } } @@ -738,7 +738,7 @@ $graphs: cpu, memory, disks, network; // In monospaced text, "100%" is 4 characters grid-template-columns: 1fr minmax(4ch, auto); - > .pf-v5-l-grid__item { + > .pf-v6-l-grid__item { // Don't use PF's hardcoded 12-column grid grid-column: auto; } @@ -758,7 +758,7 @@ $graphs: cpu, memory, disks, network; z-index: 1; // Make the background transparent, so CPU max shows through - .pf-v5-c-progress__bar { + .pf-v6-c-progress__bar { --pf-v5-c-progress__bar--BackgroundColor: transparent; --pf-v5-c-progress__bar--before--Opacity: 0; } @@ -770,7 +770,7 @@ $graphs: cpu, memory, disks, network; // Lighten up the default bar &:not(.pf-m-danger):not(.pf-m-warning) { - .pf-v5-c-progress__indicator { + .pf-v6-c-progress__indicator { opacity: 0.33; } } @@ -811,7 +811,7 @@ $graphs: cpu, memory, disks, network; margin: 0; } - .pf-v5-c-popover__content { + .pf-v6-c-popover__content { // Remove extra whitespace in the modal --pf-v5-c-popover--c-button--sibling--PaddingRight: 0; } @@ -824,7 +824,7 @@ $graphs: cpu, memory, disks, network; max-block-size: 65vw; } - .pf-v5-c-popover__content { + .pf-v6-c-popover__content { // Limit the width of the popover in desktop mode max-inline-size: max(30rem, 40vw); } @@ -840,13 +840,13 @@ $graphs: cpu, memory, disks, network; max-block-size: 100%; min-block-size: 25vh; - .pf-v5-c-popover__content { + .pf-v6-c-popover__content { // Limit the width of the popover in desktop mode max-inline-size: max(100vw); } // As a sheet at the bottom, it doesn't point to anything - .pf-v5-c-popover__arrow { + .pf-v6-c-popover__arrow { display: none; } } @@ -857,6 +857,6 @@ $graphs: cpu, memory, disks, network; grey toolbar. The deprecated Select had a white background. Let's make MenuToggles match. */ -html:not(.pf-v6-theme-dark) .pf-v5-c-menu-toggle:not(.pf-m-primary) { +html:not(.pf-v6-theme-dark) .pf-v6-c-menu-toggle:not(.pf-m-primary) { background-color: var(--pf-v5-global--BackgroundColor--100); } diff --git a/pkg/networkmanager/firewall.jsx b/pkg/networkmanager/firewall.jsx index c592f80f9c79..b278659746db 100644 --- a/pkg/networkmanager/firewall.jsx +++ b/pkg/networkmanager/firewall.jsx @@ -1052,7 +1052,7 @@ export class Firewall extends React.Component { - {_("Networking")} + {_("Networking")} {_("Firewall")} diff --git a/pkg/networkmanager/network-interface-members.jsx b/pkg/networkmanager/network-interface-members.jsx index edbb09687a01..8b5773a2a378 100644 --- a/pkg/networkmanager/network-interface-members.jsx +++ b/pkg/networkmanager/network-interface-members.jsx @@ -117,7 +117,7 @@ export const NetworkInterfaceMembers = ({ }
), - props: { className: "pf-v5-c-table__action" } + props: { className: "pf-v6-c-table__action" } }, ], props: { diff --git a/pkg/networkmanager/networking.scss b/pkg/networkmanager/networking.scss index 000b04cf45e2..df58e9cea3b9 100644 --- a/pkg/networkmanager/networking.scss +++ b/pkg/networkmanager/networking.scss @@ -4,13 +4,13 @@ #firewall, #network-page { - .pf-v5-c-card { + .pf-v6-c-card { @extend .ct-card; } } #networking, #network-interface { - .pf-v5-l-gallery { + .pf-v6-l-gallery { --pf-v5-l-gallery--GridTemplateColumns: 1fr; } } @@ -42,7 +42,7 @@ block-size: 180px; } -.pf-v5-c-page__main-breadcrumb + .networking-graphs { +.pf-v6-c-page__main-breadcrumb + .networking-graphs { // Remove the top padding when following a breadcrumb padding-block-start: 0; } @@ -97,11 +97,11 @@ th { } .network-interface-members { - .pf-v5-c-switch { + .pf-v6-c-switch { margin-inline-end: var(--pf-v5-global--spacer--md); } - .pf-v5-c-table tbody > tr > * { + .pf-v6-c-table tbody > tr > * { vertical-align: middle; } @@ -120,14 +120,14 @@ th { // the focus ring of the MTU custom input. Since we know the modal won't have // much vertical content, we can disable the overflow to let the focus ring be // fully visible. (Otherwise the bottommost pixels are removed.) -#network-mtu-settings-dialog .pf-v5-c-modal-box__body { +#network-mtu-settings-dialog .pf-v6-c-modal-box__body { overflow: visible; } // Use a grid to lay out elements. This could've been a flex, but a grid lets // us size elements from the parent element instead of having to specify // individual elements -#network-mtu-settings-custom + .pf-v5-c-radio__label { +#network-mtu-settings-custom + .pf-v6-c-radio__label { display: grid; grid-template-columns: 1fr auto; align-items: baseline; @@ -145,12 +145,12 @@ th { z-index: 2000; } -.pf-v5-l-flex > .network-ip-settings-method { +.pf-v6-l-flex > .network-ip-settings-method { inline-size: 12rem; } #network-ip-settings-body { - .pf-v5-c-form__label { + .pf-v6-c-form__label { // Don't allow labels to wrap white-space: nowrap; } @@ -217,7 +217,7 @@ th { } @media screen and (max-width: $pf-v6-global--breakpoint--md) { - .zone-section-heading.pf-v5-c-card__header { + .zone-section-heading.pf-v6-c-card__header { padding-inline-start: var(--pf-v5-global--spacer--md); } } @@ -237,7 +237,7 @@ th { line-height: 3; } -#add-zone-dialog .add-zone-zones .pf-v5-c-radio__label { +#add-zone-dialog .add-zone-zones .pf-v6-c-radio__label { text-transform: capitalize; } @@ -304,7 +304,7 @@ th { } } -.pf-v5-c-dropdown__menu-item.pf-m-danger { +.pf-v6-c-dropdown__menu-item.pf-m-danger { color: var(--pf-v5-global--danger-color--200); } @@ -316,7 +316,7 @@ th { // HACK: MenuToggle has inline-block by default which makes it not appear under // the entry above @media screen and (max-width: $pf-v6-global--breakpoint--sm) { - .pf-v5-c-table__td .pf-v5-c-menu-toggle.pf-m-plain { + .pf-v6-c-table__td .pf-v6-c-menu-toggle.pf-m-plain { display: inline-flex; align-items: flex-start; } diff --git a/pkg/networkmanager/wireguard.jsx b/pkg/networkmanager/wireguard.jsx index 72dd0f307c29..41509cf5a325 100644 --- a/pkg/networkmanager/wireguard.jsx +++ b/pkg/networkmanager/wireguard.jsx @@ -215,19 +215,19 @@ export function WireGuardDialog({ settings, connection, dev }) { { setIsPrivKeyGenerated(false) }} /> {isPrivKeyGenerated - ? - + ? + - {generatedPrivateKey} + {generatedPrivateKey} {connection && } - : + : setPastedPrivatedKey(val)} isDisabled={isPrivKeyGenerated} @@ -236,7 +236,7 @@ export function WireGuardDialog({ settings, connection, dev }) { {(isPrivKeyGenerated || publicKey) - ? {publicKey} + ? {publicKey} : {_("Public key will be generated when a valid private key is entered")}} @@ -260,7 +260,7 @@ export function WireGuardDialog({ settings, connection, dev }) { diff --git a/pkg/networkmanager/wireguard.scss b/pkg/networkmanager/wireguard.scss index 1d1a709c508f..e578d65c44cc 100644 --- a/pkg/networkmanager/wireguard.scss +++ b/pkg/networkmanager/wireguard.scss @@ -10,12 +10,12 @@ } .dynamic-form-group { - .pf-v5-c-empty-state { + .pf-v6-c-empty-state { padding: 0; } - .pf-v5-c-form__field-group-body { - .pf-v5-c-form__group { + .pf-v6-c-form__field-group-body { + .pf-v6-c-form__group { display: block; } @@ -30,7 +30,7 @@ // We use FormFieldGroup PF component for the nested look and for ability to add buttons to the header // However we want to save space and not add indent to the left so we need to override it - .pf-v5-c-form__field-group-body { + .pf-v6-c-form__field-group-body { // Stretch content fully --pf-v5-c-form__field-group-body--GridColumn: 1 / -1; // Reduce padding at the top diff --git a/pkg/packagekit/updates.jsx b/pkg/packagekit/updates.jsx index 9fa3e32a3f7d..728b0499c01a 100644 --- a/pkg/packagekit/updates.jsx +++ b/pkg/packagekit/updates.jsx @@ -604,7 +604,7 @@ const ApplyUpdates = ({ transactionProps, actions, onCancel, rebootAfter, setReb + className="pf-v6-u-mb-xs" /> {cancelButton} @@ -1491,7 +1491,7 @@ class OsUpdates extends React.Component { } /> - + {this.state.errorMessages .filter((m, index) => index == 0 || m != this.state.errorMessages[index - 1]) diff --git a/pkg/packagekit/updates.scss b/pkg/packagekit/updates.scss index 00718eff289a..b863b7a9d697 100644 --- a/pkg/packagekit/updates.scss +++ b/pkg/packagekit/updates.scss @@ -4,11 +4,11 @@ @import "@patternfly/patternfly/utilities/Spacing/spacing.css"; /* Style the list cards as ct-cards */ -.pf-v5-c-page__main-section .pf-v5-c-card { +.pf-v6-c-page__main-section .pf-v6-c-card { @extend .ct-card; } -.pf-v5-c-table tr:nth-child(1) { +.pf-v6-c-table tr:nth-child(1) { > td, th { --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-global--spacer--sm); --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-global--spacer--sm); @@ -19,8 +19,8 @@ } } -.kpatches-labelgroup ul.pf-v5-c-label-group__list, -.kpatches-labelgroup li.pf-v5-c-label-group__list-item:last-child, { +.kpatches-labelgroup ul.pf-v6-c-label-group__list, +.kpatches-labelgroup li.pf-v6-c-label-group__list-item:last-child, { margin-block-end: 0; } @@ -33,7 +33,7 @@ padding-inline: 0; &--actions { - > .pf-v5-c-button, + > .pf-v6-c-button, > .btn-group { margin-block: 5px 0; margin-inline: 0 5px; @@ -52,7 +52,7 @@ } // Make header's content bold -.pf-v5-c-table tr:nth-child(1) td:nth-child(2) { +.pf-v6-c-table tr:nth-child(1) td:nth-child(2) { font-weight: var(--pf-v5-global--FontWeight--bold); } @@ -120,13 +120,13 @@ div.changelog { margin-block: 10ex 0; margin-inline: auto; - .pf-v5-l-grid { + .pf-v6-l-grid { align-items: end; } } /* workaround font not supporting tabular numbers yet https://github.com/cockpit-project/cockpit/issues/15090 */ -.pf-v5-c-progress__status { +.pf-v6-c-progress__status { min-inline-size: 3ch; } @@ -211,7 +211,7 @@ table.header-buttons { row-gap: var(--pf-v5-global--spacer--sm); } -.pk-updates .pf-v5-c-description-list + div { +.pk-updates .pf-v6-c-description-list + div { padding-block-start: var(--pf-v5-global--spacer--md); } @@ -220,7 +220,7 @@ table.header-buttons { padding-inline: 0; } -.pf-v5-c-content ul { +.pf-v6-c-content ul { list-style-type: none; } diff --git a/pkg/playground/test.js b/pkg/playground/test.js index f95cdcb8f97a..6ba039a30c9a 100644 --- a/pkg/playground/test.js +++ b/pkg/playground/test.js @@ -7,7 +7,7 @@ import "../../node_modules/@patternfly/patternfly/components/Page/page.css"; document.addEventListener("DOMContentLoaded", () => { document.getElementById("hammer").addEventListener("click", e => e.target.setAttribute("hidden", "hidden")); - document.querySelector(".cockpit-internal-reauthorize .pf-v5-c-button").addEventListener("click", () => { + document.querySelector(".cockpit-internal-reauthorize .pf-v6-c-button").addEventListener("click", () => { document.querySelector(".cockpit-internal-reauthorize span").textContent = "checking..."; cockpit.script("pkcheck --action-id org.freedesktop.policykit.exec --process $$ -u 2>&1", { superuser: "try" }) .stream(data => console.debug(data)) @@ -19,7 +19,7 @@ document.addEventListener("DOMContentLoaded", () => { }); }); - document.querySelector(".super-channel .pf-v5-c-button").addEventListener("click", () => { + document.querySelector(".super-channel .pf-v6-c-button").addEventListener("click", () => { document.querySelector(".super-channel span").textContent = "checking..."; cockpit.spawn(["id"], { superuser: "require" }) .then(data => { @@ -32,7 +32,7 @@ document.addEventListener("DOMContentLoaded", () => { }); }); - document.querySelector(".lock-channel .pf-v5-c-button").addEventListener("click", () => { + document.querySelector(".lock-channel .pf-v6-c-button").addEventListener("click", () => { document.querySelector(".lock-channel span").textContent = "locking..."; cockpit.spawn(["flock", "-o", "/tmp/playground-test-lock", "-c", "echo locked; sleep infinity"], { superuser: "try", err: "message" }) diff --git a/pkg/selinux/setroubleshoot-view.jsx b/pkg/selinux/setroubleshoot-view.jsx index a0687b75df8a..cd3168181735 100644 --- a/pkg/selinux/setroubleshoot-view.jsx +++ b/pkg/selinux/setroubleshoot-view.jsx @@ -360,16 +360,16 @@ export class SETroubleshootPage extends React.Component { ]; // if the alert has level "red", it's critical const criticalAlert = (itm.details && 'level' in itm.details && itm.details.level == "red") - ? + ? : null; const columns = [ { title: criticalAlert }, { title: itm.description } ]; if (itm.count > 1) { - columns.push({ title: {itm.count}, props: { className: "pf-v5-c-table__action" } }); + columns.push({ title: {itm.count}, props: { className: "pf-v6-c-table__action" } }); } else { - columns.push({ title: , props: { className: "pf-v5-c-table__action" } }); + columns.push({ title: , props: { className: "pf-v6-c-table__action" } }); } return ({ props: { key: itm.details ? itm.details.localId : index }, diff --git a/pkg/selinux/setroubleshoot.scss b/pkg/selinux/setroubleshoot.scss index 538117ffe918..1b1375c9a97b 100644 --- a/pkg/selinux/setroubleshoot.scss +++ b/pkg/selinux/setroubleshoot.scss @@ -20,7 +20,7 @@ @use "ct-card"; @use "page"; -#app .pf-v5-c-card { +#app .pf-v6-c-card { @extend .ct-card; } @@ -37,7 +37,7 @@ } /* Table cells should collapse on mobile */ -.ct-table.pf-v5-c-table tbody > tr > * { +.ct-table.pf-v6-c-table tbody > tr > * { word-break: break-word; } @@ -56,7 +56,7 @@ margin-block-start: var(--pf-v5-global--spacer--sm); } - .pf-v5-c-expandable-section__content { + .pf-v6-c-expandable-section__content { margin-block-start: unset; } } diff --git a/pkg/shell/credentials.scss b/pkg/shell/credentials.scss index e4a84c236de5..09093ea41062 100644 --- a/pkg/shell/credentials.scss +++ b/pkg/shell/credentials.scss @@ -1,10 +1,10 @@ #credentials-modal { // SSH keys don't have spaces, allow these two wrap - .pf-v5-c-clipboard-copy__expandable-content { + .pf-v6-c-clipboard-copy__expandable-content { word-wrap: anywhere; } - .pf-v5-c-table__toggle + th { + .pf-v6-c-table__toggle + th { font-weight: var(--pf-v5-global--FontWeight--bold); } @@ -14,8 +14,8 @@ // Remove excess padding from compact tables toggles // And adjust the padding to left align the toggles with the card header - .pf-v5-c-table { - .pf-v5-c-table__toggle { + .pf-v6-c-table { + .pf-v6-c-table__toggle { padding-inline-start: 0; } } diff --git a/pkg/shell/credentials.tsx b/pkg/shell/credentials.tsx index 08b9903fdca2..25dfdd13ecc2 100644 --- a/pkg/shell/credentials.tsx +++ b/pkg/shell/credentials.tsx @@ -79,7 +79,7 @@ const AddNewKey = ({ - {newKeyPathError && + {newKeyPathError && {newKeyPathError} } @@ -189,7 +189,7 @@ const KeyPassword = ({ aria-label={_("Password tip")} bodyContent={_("Tip: Make your key password match your login password to automatically authenticate against other systems.")} > - ); @@ -148,7 +148,7 @@ export class CockpitNav extends React.Component { let i = all.findIndex(item => item === cur); i += step; if (i < 0 || i >= all.length) - document.querySelector("#" + sel + " .pf-v5-c-text-input-group__text-input")?.focus(); + document.querySelector("#" + sel + " .pf-v6-c-text-input-group__text-input")?.focus(); else all[i].focus(); } @@ -163,7 +163,7 @@ export class CockpitNav extends React.Component { focusNextItem(-1, -1); else if (ev.key == "Escape") { this.setState({ search: "" }); - document.querySelector("#" + sel + " .pf-v5-c-text-input-group__text-input")?.focus(); + document.querySelector("#" + sel + " .pf-v6-c-text-input-group__text-input")?.focus(); } }; diff --git a/pkg/shell/shell.scss b/pkg/shell/shell.scss index a968317558c6..763603af6734 100644 --- a/pkg/shell/shell.scss +++ b/pkg/shell/shell.scss @@ -100,7 +100,7 @@ html.index-page body { .display-language-modal { /* Do not let the language menu expand to the end of the page */ - .pf-v5-c-menu__content { + .pf-v6-c-menu__content { max-block-size: 20rem; overflow: auto; } @@ -125,11 +125,11 @@ $desktop: $phone + 1px; // Set masthead and toolbar to transparent, so the background shows through // (including the accent line) - .pf-v5-c-masthead { + .pf-v6-c-masthead { --pf-v5-c-masthead--BackgroundColor: transparent; } - .pf-v5-c-toolbar { + .pf-v6-c-toolbar { --pf-v5-c-toolbar--BackgroundColor: transparent; } @@ -167,7 +167,7 @@ $desktop: $phone + 1px; } // Remove excess padding from masthead in mobile - .pf-v5-c-masthead { + .pf-v6-c-masthead { --pf-v5-c-masthead--inset: 0; } } @@ -234,7 +234,7 @@ $desktop: $phone + 1px; } /* Alert fixups */ -.modal-content .pf-v5-c-alert { +.modal-content .pf-v6-c-alert { text-align: start; margin-block-end: 24px; } @@ -244,24 +244,24 @@ $desktop: $phone + 1px; } // Header menu buttons don't need a background color (especially in dark mode) -.pf-v5-c-toolbar .pf-v5-c-dropdown__toggle { +.pf-v6-c-toolbar .pf-v6-c-dropdown__toggle { --pf-v5-c-dropdown__toggle--BackgroundColor: transparent; } // Header menu buttons don't need a background color (especially in dark mode) -.pf-v5-c-toolbar .pf-v5-c-dropdown__toggle { +.pf-v6-c-toolbar .pf-v6-c-dropdown__toggle { --pf-v5-c-dropdown__toggle--BackgroundColor: transparent; } // PF hardcodes header colors to dark, which does funky things // ...so swap them back properly for dropdown menus -.pf-v5-c-masthead .pf-v5-c-dropdown__menu { +.pf-v6-c-masthead .pf-v6-c-dropdown__menu { --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100); --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100); } // Customize the about screen with the Cockpit logo -.pf-v5-c-about-modal-box { +.pf-v6-c-about-modal-box { --pf-v5-c-about-modal-box--BackgroundImage: linear-gradient(#000d, #000d), url(../shell/images/cockpit-icon.svg); --pf-v5-c-about-modal-box--BackgroundPosition: max(25rem, 143%) 10rem; --pf-v5-c-about-modal-box--BackgroundSize--min-width: 786px; diff --git a/pkg/shell/shell.tsx b/pkg/shell/shell.tsx index c41f8ef8adea..150b6d388602 100644 --- a/pkg/shell/shell.tsx +++ b/pkg/shell/shell.tsx @@ -122,7 +122,7 @@ const Shell = () => { {_("Skip to content")} {_("Skip main navigation")} -