diff --git a/node_modules b/node_modules index d26eb46e1816..30c6925883a2 160000 --- a/node_modules +++ b/node_modules @@ -1 +1 @@ -Subproject commit d26eb46e1816796760c970c622af6c1918fc2d0b +Subproject commit 30c6925883a20a17416f83aa21fb667ee563c19f diff --git a/package.json b/package.json index 1f5c9d6eaaf8..56d90e6b7ea9 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,12 @@ "type": "module", "private": true, "dependencies": { - "@patternfly/patternfly": "5.0.4", - "@patternfly/react-core": "5.0.1", - "@patternfly/react-icons": "5.0.1", - "@patternfly/react-styles": "5.0.1", - "@patternfly/react-table": "5.0.1", - "@patternfly/react-tokens": "5.0.1", + "@patternfly/patternfly": "5.1.0", + "@patternfly/react-core": "5.1.1", + "@patternfly/react-icons": "5.1.1", + "@patternfly/react-styles": "5.1.1", + "@patternfly/react-table": "5.1.1", + "@patternfly/react-tokens": "5.1.1", "deep-equal": "2.2.2", "date-fns": "2.30.0", "js-sha1": "0.6.0", diff --git a/pkg/lib/cockpit-components-shutdown.jsx b/pkg/lib/cockpit-components-shutdown.jsx index 2f3105ed1563..ee2ec7dbc2cb 100644 --- a/pkg/lib/cockpit-components-shutdown.jsx +++ b/pkg/lib/cockpit-components-shutdown.jsx @@ -212,7 +212,11 @@ export class ShutdownModal extends React.Component { buttonAriaLabel={_("Toggle date picker")} className='shutdown-date-picker' dateFormat={timeformat.dateShort} - dateParse={timeformat.parseShortDate} + // https://github.com/patternfly/patternfly-react/issues/9721 + dateParse={date => { + const newDate = timeformat.parseShortDate(date); + return Number.isNaN(newDate.valueOf()) ? false : newDate; + }} invalidFormatText="" isDisabled={!this.state.formFilled} locale={timeformat.dateFormatLang()} diff --git a/pkg/lib/patternfly/patternfly-5-overrides.scss b/pkg/lib/patternfly/patternfly-5-overrides.scss index 7a377c60f99f..e7f2279c7125 100644 --- a/pkg/lib/patternfly/patternfly-5-overrides.scss +++ b/pkg/lib/patternfly/patternfly-5-overrides.scss @@ -331,220 +331,6 @@ select.pf-v5-c-form-control { margin-inline: 0 var(--pf-v5-c-button__icon--m-start--MarginRight); } -// RTL fix: Masthead actions should be on the far side -.pf-v5-c-masthead__content { - margin-inline: auto var(--pf-v5-c-masthead__content--MarginLeft); -} - -// RTL fix: Menu direction should take direction into consideration -.pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right, -.pf-v5-c-dropdown__menu.pf-m-align-right { - inset-inline: auto 0; -} - -// RTL fix: Modal close button -.pf-v5-c-modal { - &-box__header { - padding-inline: var(--pf-v5-c-modal-box__header--PaddingRight) var(--pf-v5-c-modal-box__header--PaddingLeft); - } - - &-box__close { - text-align: end; - inset-inline: auto var(--pf-v5-c-modal-box__close--Right); - - + * { - margin-inline: 0 var(--pf-v5-c-modal-box__close--sibling--MarginRight); - } - } -} - -// RTL fix: Menu item alignment -.pf-v5-c-menu__item-main { - text-align: start; -} - -// RTL fix: inline button alignment -.pf-v5-c-button.pf-m-link.pf-m-inline { - text-align: start; -} - -// RTL fix: alert icons -.pf-v5-c-alert__icon { - margin-inline: 0 var(--pf-v5-c-alert__icon--MarginRight); -} - -// RTL fix: card -.pf-v5-c-card__actions { - padding-inline: var(--pf-v5-c-card__actions--PaddingLeft) 0; -} - -// RTL fix: table -.pf-v5-c-table tr > * { - padding-inline: var(--pf-v5-c-table--cell--PaddingLeft) var(--pf-v5-c-table--cell--PaddingRight); -} - -// RTL fix: description lists -.pf-v5-c-description-list__term, .pf-v5-c-description-list__description { - text-align: start; -} - -// RTL fix: about modal -.pf-v5-c-about-modal-box__close { - padding-inline: 0 var(--pf-v5-c-about-modal-box__close--PaddingRight); -} - -// RTL fix: card toggle -.pf-v5-c-card__header-toggle { - margin-inline: var(--pf-v5-c-card__header-toggle--MarginLeft) var(--pf-v5-c-card__header-toggle--MarginRight); - - [dir="rtl"] & { - transform: scaleX(-1); - } -} - -// RTL fix: Select toggle -.pf-v5-c-select__toggle { - padding-inline: var(--pf-v5-c-select__toggle--PaddingLeft) var(--pf-v5-c-select__toggle--PaddingRight); - - * + &-arrow { - margin-inline: var(--pf-v5-c-select__toggle-arrow--MarginLeft) var(--pf-v5-c-select__toggle-arrow--MarginRight); - } - - .pf-v5-c-select__toggle-clear { - padding-inline: var(--pf-v5-c-select__toggle-clear--PaddingLeft) var(--pf-v5-c-select__toggle-clear--PaddingRight); - } -} - -// RTL fix: Menu item -.pf-v5-c-select__menu-item { - padding-inline: var(--pf-v5-c-select__menu-item--PaddingLeft) var(--pf-v5-c-select__menu-item--PaddingRight); - text-align: start; - - &-icon { - inset-inline: auto var(--pf-v5-c-select__menu-item-icon--Right); - } -} - -// RTL fix: Input group padding and icons -.pf-v5-c-text-input-group { - &__text-input { - padding-inline: var(--pf-v5-c-text-input-group__text-input--PaddingLeft) var(--pf-v5-c-text-input-group__text-input--PaddingRight); - } - - &__icon { - inset-inline: var(--pf-v5-c-text-input-group__icon--Left) 0; - } -} - -// RTL fix: List item actions -.pf-v5-c-data-list__item-action { - margin-inline: var(--pf-v5-c-data-list__item-action--MarginLeft) 0; -} - -// RTL fix: Align right utilities in flexes -.pf-v5-l-flex > .pf-m-align-right { - margin-inline: auto 0; -} - -// Override PF to fix Right to Left languages -[dir="rtl"] { - // Flip outlines for buttons - .pf-m-split-button { - button::before { - transform: scaleX(-1); - } - } - - // Flip submit button icons (they're often arrows or direction related) - .pf-v5-c-button > .pf-v5-svg { - transform: scaleX(-1); - } - - // Flip expandable buttons - .pf-v5-c-expandable-section__toggle-icon { - transform: scaleX(-1); - } - - // Swap image padding in buttons - .pf-v5-c-dropdown__toggle-image { - margin-inline-end: unset; - gap: var(--pf-v5-c-dropdown__toggle-image--MarginRight); - } - - // PatternFly and us are setting text-align to the left. - // It needs to be to the start. - // We should change it to start where we can. - // Meanwhile, here's an override just for RTL. - body, td, th { - text-align: start; - } - - // Swap side of selected nav's blue line - .pf-v5-c-nav__link.pf-m-current { - &, &:hover, &:not(.pf-m-expanded) .pf-v5-c-nav__link { - &::after { - inline-size: 100%; - transform: scaleX(-1); - } - } - } - - // Toolbar content (as seen in the shell) should be left aligned in RTL - // See: https://github.com/patternfly/patternfly/issues/3812 - .pf-v5-c-toolbar__content { - margin-inline: 0 auto; - } - - // Dropdown toggles: Swap image margins to be on left instead - .pf-v5-c-dropdown__toggle { - &-image { - margin-inline: var(--pf-v5-c-dropdown__toggle-image--MarginRight) 0; - } - - &-icon { - margin-inline: var(--pf-v5-c-dropdown__toggle-icon--MarginRight) var(--pf-v5-c-dropdown__toggle-icon--MarginLeft); - } - } - - // Flip popup directions, part 1 of 2 - .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-right, - .pf-v5-c-dropdown__menu.pf-m-align-right { - inset-inline: 0 unset; - } - - // Flip popup directions, part 2 of 2 - .pf-v5-c-dropdown .pf-v5-c-menu.pf-m-align-left, - .pf-v5-c-dropdown__menu.pf-m-align-left { - inset-inline: unset 0; - } - - // Another case of aligning to the left instead of start - .pf-v5-c-dropdown__menu-item { - text-align: start; - } - - // Fix spacing around menu icons - .pf-v5-c-dropdown__menu-item-icon { - margin-inline: 0 var(--pf-v5-c-dropdown__menu-item-icon--MarginRight); - } - - // Flip external icons - a[target] svg { - transform: scaleX(-1); - } - - // Fix spacing in link icons - .pf-v5-c-button__icon.pf-m-end { - margin-inline: var(--pf-v5-c-button__icon--m-end--MarginLeft) 0; - } - - // Flip breadcrum divider - .pf-v5-c-breadcrumb__item-divider { - transform: scaleX(-1); - margin-inline: 0 var(--pf-v5-c-breadcrumb__item-divider--MarginRight); - } -} - // Drop side padding in mobile mode, // intended mainly for PF PageSection elements (pf-v5-c-page__main-section). // It's similar to adding padding={{ default: 'noPadding', sm: 'padding' }}, diff --git a/pkg/metrics/metrics.jsx b/pkg/metrics/metrics.jsx index 16815617195b..34bcd35ed15e 100644 --- a/pkg/metrics/metrics.jsx +++ b/pkg/metrics/metrics.jsx @@ -27,6 +27,7 @@ import { Gallery } from "@patternfly/react-core/dist/esm/layouts/Gallery/index.j import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm } from "@patternfly/react-core/dist/esm/components/DescriptionList/index.js"; import { Flex, FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex/index.js"; import { Grid, GridItem } from "@patternfly/react-core/dist/esm/layouts/Grid/index.js"; +import { Icon } from "@patternfly/react-core/dist/esm/components/Icon/index.js"; import { Modal } from "@patternfly/react-core/dist/esm/components/Modal/index.js"; import { Page, PageGroup, PageSection, PageSectionVariants } from "@patternfly/react-core/dist/esm/components/Page/index.js"; import { Popover } from "@patternfly/react-core/dist/esm/components/Popover/index.js"; @@ -1322,7 +1323,7 @@ const HourDescription = ({ minute_events, isHourExpanded, onToggleHourExpanded, return ( {spikes > 0 && -