diff --git a/app/assets/stylesheets/base-pf4.scss b/app/assets/stylesheets/base-pf4.scss index 726e40cb6f8..bc89405d701 100644 --- a/app/assets/stylesheets/base-pf4.scss +++ b/app/assets/stylesheets/base-pf4.scss @@ -9,24 +9,25 @@ html { font-family: sans-serif; line-height: 1.15; + font-size: unset !important; } body { - font-family: var(--pf-global--FontFamily--sans-serif); - font-size: var(--pf-global--FontSize--sm); - font-weight: var(--pf-global--FontWeight--normal); - line-height: var(--pf-global--LineHeight--md); + font-family: var(--pf-v5-global--FontFamily--text); + font-size: var(--pf-v5-global--FontSize--sm); + font-weight: var(--pf-v5-global--FontWeight--normal); + line-height: var(--pf-v5-global--LineHeight--md); text-align: left; } a { - font-weight: var(--pf-global--link--FontWeight); - color: var(--pf-global--link--Color); - text-decoration: var(--pf-global--link--TextDecoration); + font-weight: var(--pf-v5-global--link--FontWeight); + color: var(--pf-v5-global--link--Color); + text-decoration: var(--pf-v5-global--link--TextDecoration); &:hover { - --pf-global--link--Color: var(--pf-global--link--Color--hover); - --pf-global--link--TextDecoration: var(--pf-global--link--TextDecoration--hover); + --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--hover); + --pf-v5-global--link--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover); } } @@ -51,6 +52,6 @@ a { } } -.pf-c-alert h4 { - line-height: var(--pf-global--LineHeight--md); +.pf-v5-c-alert h4 { + line-height: var(--pf-v5-global--LineHeight--md); } diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss index 4cd4a168e08..b9f5db7d791 100644 --- a/app/assets/stylesheets/base.scss +++ b/app/assets/stylesheets/base.scss @@ -16,8 +16,8 @@ html { margin-left: 250px; &.user-banner-present { --banner-height: calc( - 2 * var(--pf-global--spacer--xs) + - (var(--pf-global--LineHeight--md) * var(--pf-global--FontSize--sm)) + 2 * var(--pf-v5-global--spacer--xs) + + (var(--pf-v5-global--LineHeight--md) * var(--pf-v5-global--FontSize--sm)) ); // banner height is line height and a small padding top: calc( var(--header-height) + var(--banner-height) @@ -31,7 +31,7 @@ html { flex-wrap: wrap; justify-content: space-between; } - &.pf-c-page { + &.pf-v5-c-page { display: block; grid-template-columns: unset; grid-template-areas: unset; @@ -48,7 +48,7 @@ body { #react-app-root { height: 100%; width: 100%; - .pf-c-page { + .pf-v5-c-page { // pf grid rule stops at @media (min-width: 1200px) display: grid; grid-template-columns: max-content 1fr; diff --git a/app/assets/stylesheets/navigation.scss b/app/assets/stylesheets/navigation.scss index 769f663da4b..1369ff3df3b 100644 --- a/app/assets/stylesheets/navigation.scss +++ b/app/assets/stylesheets/navigation.scss @@ -18,8 +18,8 @@ } } -.pf-c-masthead { - background: var(--pf-c-masthead--BackgroundColor) image-url('navbar.png'); +.pf-v5-c-masthead { + background: var(--pf-v5-c-masthead--BackgroundColor) image-url('navbar.png'); .user-icon { margin-right: 10px; } diff --git a/app/assets/stylesheets/patternfly_and_overrides.scss b/app/assets/stylesheets/patternfly_and_overrides.scss index 487ecaddbbf..bca4bed0628 100644 --- a/app/assets/stylesheets/patternfly_and_overrides.scss +++ b/app/assets/stylesheets/patternfly_and_overrides.scss @@ -144,7 +144,7 @@ a { } } -.pf-c-backdrop { +.pf-v5-c-backdrop { z-index: 2000; } diff --git a/app/assets/stylesheets/patternfly_colors_overrides.scss b/app/assets/stylesheets/patternfly_colors_overrides.scss index a645258abf9..5404306e8c5 100644 --- a/app/assets/stylesheets/patternfly_colors_overrides.scss +++ b/app/assets/stylesheets/patternfly_colors_overrides.scss @@ -1,25 +1,35 @@ @import './colors.scss'; .foreman-theme { - .pf-c-page__sidebar { - --pf-c-page__sidebar--Width: 250px; - --pf-c-page__sidebar--BackgroundColor: #{$nav-pf-vertical-bg-color}; + .pf-v5-c-page__sidebar { + --pf-v5-c-page__sidebar--Width: 250px; + --pf-v5-c-page__sidebar--BackgroundColor: #{$nav-pf-vertical-bg-color}; + #navigation-search .pf-v5-c-text-input-group { + background-color: var(--pf-v5-global--palette--white); + .pf-v5-c-text-input-group__icon{ + color: var(--pf-v5-global--palette--black-500); + } + .pf-v5-c-text-input-group__text-input { + // color: var(--pf-v5-global--palette--black-500); + color: var(--pf-v5-global--palette--black-1000); + } + } } - .pf-c-nav__link { - --pf-c-nav__link--BackgroundColor: #{$nav-pf-vertical-bg-color}; - --pf-c-nav__link--m-current--BackgroundColor: #{$nav-pf-vertical-active-bg-color}; - --pf-c-nav__link--hover--BackgroundColor: #{$nav-pf-vertical-hover-bg-color}; - --pf-c-nav__link--focus--BackgroundColor: #{$nav-pf-vertical-hover-bg-color}; - --pf-c-nav__link--active--BackgroundColor: #{$nav-pf-vertical-active-bg-color}; - --pf-c-nav__link--after--BorderColor: #f0f0f0; - --pf-c-nav__link--before--BorderColor: #f0f0f0; - --pf-c-nav__link--Color: #{$navbar-default-link-color}; + .pf-v5-c-nav__link { + --pf-v5-c-nav__link--BackgroundColor: #{$nav-pf-vertical-bg-color}; + --pf-v5-c-nav__link--m-current--BackgroundColor: #{$nav-pf-vertical-active-bg-color}; + --pf-v5-c-nav__link--hover--BackgroundColor: #{$nav-pf-vertical-hover-bg-color}; + --pf-v5-c-nav__link--focus--BackgroundColor: #{$nav-pf-vertical-hover-bg-color}; + --pf-v5-c-nav__link--active--BackgroundColor: #{$nav-pf-vertical-active-bg-color}; + --pf-v5-c-nav__link--after--BorderColor: #f0f0f0; + --pf-v5-c-nav__link--before--BorderColor: #f0f0f0; + --pf-v5-c-nav__link--Color: #{$navbar-default-link-color}; } - .pf-c-nav__subnav { - --pf-c-nav--c-divider--BackgroundColor: #{$nav-pf-vertical-active-bg-color}; + .pf-v5-c-nav__subnav { + --pf-v5-c-nav--c-divider--BackgroundColor: #{$nav-pf-vertical-active-bg-color}; } - .pf-c-nav__item { - --pf-c-nav__item--before--BorderColor: #{$nav-pf-vertical-active-bg-color}; + .pf-v5-c-nav__item { + --pf-v5-c-nav__item--before--BorderColor: #{$nav-pf-vertical-active-bg-color}; } } diff --git a/app/views/layouts/_application_content.html.erb b/app/views/layouts/_application_content.html.erb index 753ff794c27..925e4fd7f7a 100644 --- a/app/views/layouts/_application_content.html.erb +++ b/app/views/layouts/_application_content.html.erb @@ -1,6 +1,6 @@
-
+
<% if content_for?(:breadcrumbs) %> <%= yield(:breadcrumbs) %> <% else %> @@ -8,7 +8,7 @@ <% end %>
<%= yield(:before_search_bar) %> -
+
<%= mount_search_bar if searchable? %> <%= yield(:search_bar) %> @@ -25,7 +25,7 @@
-
+
<%= yield %>
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb index 7099e4d458f..1b94dd0d260 100644 --- a/app/views/layouts/base.html.erb +++ b/app/views/layouts/base.html.erb @@ -62,7 +62,7 @@ <% end %>
<%= yield(:content) %> diff --git a/package.json b/package.json index 7ae5676471f..32b85f021a8 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,13 @@ }, "dependencies": { "@module-federation/utilities": "^1.7.0", + "@patternfly/patternfly": "^5.1.0", + "@patternfly/react-charts": "^7.3.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", "@theforeman/vendor": "^13.1.0", "graphql-tag": "^2.11.0", "intl": "~1.2.5", @@ -57,7 +64,7 @@ "style-loader": "^1.3.0", "stylelint": "^9.3.0", "stylelint-config-standard": "^18.0.0", - "tabbable": "~5.2.0", + "tabbable": "^6.2.0", "victory-core": "~36.8.6", "victory-pie": "~36.8.6", "webpack": "^5.75.0", diff --git a/test/integration/audit_js_test.rb b/test/integration/audit_js_test.rb index 4afb4b55061..a94ac5d0267 100644 --- a/test/integration/audit_js_test.rb +++ b/test/integration/audit_js_test.rb @@ -15,7 +15,7 @@ class AuditJSTest < IntegrationTestWithJavascript test "Check per page settings in context" do Setting['entries_per_page'] = 8 visit audits_path - per_page = page.find('.pf-c-pagination')['data-per-page'] + per_page = page.find('.pf-v5-c-pagination')['data-per-page'] assert_equal per_page, '8' end end diff --git a/test/integration/breadcrumbs_switcher_test.rb b/test/integration/breadcrumbs_switcher_test.rb index 083692fd898..6d403368080 100644 --- a/test/integration/breadcrumbs_switcher_test.rb +++ b/test/integration/breadcrumbs_switcher_test.rb @@ -19,7 +19,7 @@ class BreadcrumbsSwitcherTest < IntegrationTestWithJavascript click_button 'open breadcrumb switcher' fill_in('Filter breadcrumb items', :with => 'three') wait_for_ajax - page.assert_selector('.pf-c-menu__item-main', count: 1) - page.assert_selector('.pf-c-menu__item-main', text: 'three') + page.assert_selector('.pf-v5-c-menu__item-main', count: 1) + page.assert_selector('.pf-v5-c-menu__item-main', text: 'three') end end diff --git a/test/integration/compute_profile_js_test.rb b/test/integration/compute_profile_js_test.rb index 68751da4d80..e1e130f8f0f 100644 --- a/test/integration/compute_profile_js_test.rb +++ b/test/integration/compute_profile_js_test.rb @@ -37,7 +37,7 @@ class ComputeProfileJSTest < IntegrationTestWithJavascript # amazon123 exists in fixture compute_attributes.yml click_link("amazon123 (eu-west-1-EC2)") - assert page.has_selector?('.pf-c-page__main-breadcrumb .active', :text => compute_profiles(:one).name), "#{compute_profiles(:one).name} was expected in the breadcrumb active, but was not found" + assert page.has_selector?('.pf-v5-c-page__main-breadcrumb .active', :text => compute_profiles(:one).name), "#{compute_profiles(:one).name} was expected in the breadcrumb active, but was not found" selected_profile = find("#s2id_compute_attribute_compute_profile_id .select2-chosen").text assert_equal compute_profiles(:one).name, selected_profile diff --git a/test/integration/config_report_js_test.rb b/test/integration/config_report_js_test.rb index 52102db3c4a..57570bd225c 100644 --- a/test/integration/config_report_js_test.rb +++ b/test/integration/config_report_js_test.rb @@ -23,7 +23,7 @@ class ConfigReportJSTest < IntegrationTestWithJavascript report visit config_reports_path click_link(report.host.name) - has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "host = #{report.host.name}", wait: 3) - assert_equal "host = #{report.host.name}", find('.foreman-search-bar .pf-c-text-input-group__text-input').value + has_selector?(".foreman-search-bar .pf-v5-c-text-input-group__text-input", text: "host = #{report.host.name}", wait: 3) + assert_equal "host = #{report.host.name}", find('.foreman-search-bar .pf-v5-c-text-input-group__text-input').value end end diff --git a/test/integration/fact_value_js_test.rb b/test/integration/fact_value_js_test.rb index 93248546008..0b8f690d743 100644 --- a/test/integration/fact_value_js_test.rb +++ b/test/integration/fact_value_js_test.rb @@ -14,19 +14,19 @@ def setup within(:xpath, "//tr[contains(.,'#{@fact_name.name}')]") do click_link(@host.fqdn) end - has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "host = #{@host.fqdn}", wait: 3) - assert_equal "host = #{@host.fqdn}", find('.foreman-search-bar .pf-c-text-input-group__text-input').value + has_selector?(".foreman-search-bar .pf-v5-c-text-input-group__text-input", text: "host = #{@host.fqdn}", wait: 3) + assert_equal "host = #{@host.fqdn}", find('.foreman-search-bar .pf-v5-c-text-input-group__text-input').value end test "fact_name fact links" do visit fact_values_path find(:xpath, "//tr[contains(.,'#{@fact_name.name}')]//td[2]//a").click - has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "name = #{@fact_name.name}", wait: 3) - assert_equal "name = #{@fact_name.name}", find('.foreman-search-bar .pf-c-text-input-group__text-input').value + has_selector?(".foreman-search-bar .pf-v5-c-text-input-group__text-input", text: "name = #{@fact_name.name}", wait: 3) + assert_equal "name = #{@fact_name.name}", find('.foreman-search-bar .pf-v5-c-text-input-group__text-input').value end test "value fact links" do visit fact_values_path click_link(@value.value) - has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "facts.#{@fact_name.name} = \"#{@value.value}\"", wait: 3) - assert_equal "facts.#{@fact_name.name} = \"#{@value.value}\"", find('.foreman-search-bar .pf-c-text-input-group__text-input').value + has_selector?(".foreman-search-bar .pf-v5-c-text-input-group__text-input", text: "facts.#{@fact_name.name} = \"#{@value.value}\"", wait: 3) + assert_equal "facts.#{@fact_name.name} = \"#{@value.value}\"", find('.foreman-search-bar .pf-v5-c-text-input-group__text-input').value end end diff --git a/test/integration/host_js_test.rb b/test/integration/host_js_test.rb index ba17e7264e4..1cb3c177fb8 100644 --- a/test/integration/host_js_test.rb +++ b/test/integration/host_js_test.rb @@ -77,7 +77,7 @@ class HostJSTest < IntegrationTestWithJavascript test "assert breadcrumbs" do visit current_hosts_path click_link @host.fqdn - find('.pf-c-breadcrumb__item', :text => @host.fqdn) + find('.pf-v5-c-breadcrumb__item', :text => @host.fqdn) end test "switch between hosts" do @@ -112,7 +112,7 @@ class HostJSTest < IntegrationTestWithJavascript visit host_details_page_path(host) find('#hostdetails-kebab').click click_button 'Delete' - find('button.pf-c-button.pf-m-danger').click # the red delete button, not the menu item + find('button.pf-v5-c-button.pf-m-danger').click # the red delete button, not the menu item assert_current_path current_hosts_path assert_raises(ActiveRecord::RecordNotFound) do Host.find(host.id) diff --git a/test/integration/model_js_test.rb b/test/integration/model_js_test.rb index 7f075465863..5493092f430 100644 --- a/test/integration/model_js_test.rb +++ b/test/integration/model_js_test.rb @@ -3,7 +3,7 @@ class ModelIntegrationTest < IntegrationTestWithJavascript test "create new page" do visit models_path - click_on "Create new", class: 'pf-c-button' + click_on "Create new", class: 'pf-v5-c-button' assert_current_path new_model_path fill_in "model_name", :with => "IBM 123" fill_in "model_hardware_model", :with => "IBMabcde" diff --git a/test/integration/notifications_drawer_test.rb b/test/integration/notifications_drawer_test.rb index 3fbd84cc199..55465bbbf73 100644 --- a/test/integration/notifications_drawer_test.rb +++ b/test/integration/notifications_drawer_test.rb @@ -47,7 +47,7 @@ def notifications_open_and_close_flow def navigate_somewhere_with_turbolinks # check the outside click with turbolinks - page.find('a.pf-c-masthead__brand').click + page.find('a.pf-v5-c-masthead__brand').click # wait for loader to dissapear page.has_no_selector?('div.spinner') end diff --git a/test/integration/operatingsystem_js_test.rb b/test/integration/operatingsystem_js_test.rb index db2fae68a30..b7714db25f1 100644 --- a/test/integration/operatingsystem_js_test.rb +++ b/test/integration/operatingsystem_js_test.rb @@ -19,8 +19,8 @@ class OperatingsystemJSTest < IntegrationTestWithJavascript actions.find("ul > li > a.delete").click confirm_modal = page.find("#app-confirm-modal") - assert_equal "Confirm", confirm_modal.find(".pf-c-modal-box__title-text").text - assert_equal "Delete #{os.title}?", confirm_modal.find(".pf-c-modal-box__body").text + assert_equal "Confirm", confirm_modal.find(".pf-v5-c-modal-box__title-text").text + assert_equal "Delete #{os.title}?", confirm_modal.find(".pf-v5-c-modal-box__body").text confirm_button = confirm_modal.find("footer > button:nth-child(1)") assert_equal "Confirm", confirm_button.text diff --git a/test/integration/search_bar_js_test.rb b/test/integration/search_bar_js_test.rb index 8e83641b31b..a09d8664769 100644 --- a/test/integration/search_bar_js_test.rb +++ b/test/integration/search_bar_js_test.rb @@ -6,6 +6,6 @@ class SearchBarTest < IntegrationTestWithJavascript work_around_selenium_file_detector_bug # needs to be interactive element find('table thead').find('a', text: 'Name').send_keys("/") - assert_includes(page.evaluate_script("document.activeElement.classList"), "pf-c-text-input-group__text-input") + assert_includes(page.evaluate_script("document.activeElement.classList"), "pf-v5-c-text-input-group__text-input") end end diff --git a/test/integration_test_helper.rb b/test/integration_test_helper.rb index 33011320219..490aa4f09e6 100644 --- a/test/integration_test_helper.rb +++ b/test/integration_test_helper.rb @@ -111,7 +111,7 @@ def assert_breadcrumb_text(text) def assert_new_button(index_path, new_link_text, new_path) visit index_path - click_link(new_link_text, :class => /^((?!pf-c-nav__link).)*$/) + click_link(new_link_text, :class => /^((?!pf-v5-c-nav__link).)*$/) assert_current_path new_path end @@ -267,11 +267,11 @@ def refute_available_organization_menu(organization) def refute_available_organization_dropdown(organization) within('#location-dropdown') do - find('.pf-c-context-selector__toggle').click - within('.pf-c-context-selector__menu>div>ul', visible: :all) do + find('.pf-v5-c-context-selector__toggle').click + within('.pf-v5-c-context-selector__menu>div>ul', visible: :all) do assert page.has_no_link?(organization) end - find('.pf-c-context-selector__toggle').click + find('.pf-v5-c-context-selector__toggle').click end end @@ -298,7 +298,7 @@ def select_organization(organization) def select_organization_dropdown(organization) within('#organization-dropdown') do - find('.pf-c-context-selector__toggle').click + find('.pf-v5-c-context-selector__toggle').click find("button.organization_menuitem", text: organization).click end end @@ -306,13 +306,13 @@ def select_organization_dropdown(organization) def select_organization_menu(organization) within('.organization-menu') do first('button').click - find("li.pf-c-nav__item", text: organization).click + find("li.pf-v5-c-nav__item", text: organization).click end end def select_location_dropdown(location) within('#location-dropdown') do - find('.pf-c-context-selector__toggle').click + find('.pf-v5-c-context-selector__toggle').click find("button.location_menuitem", text: location).click end end diff --git a/webpack/assets/javascripts/hosts/tableCheckboxes.js b/webpack/assets/javascripts/hosts/tableCheckboxes.js index 5e1a1df6c85..6ff09bbaa31 100644 --- a/webpack/assets/javascripts/hosts/tableCheckboxes.js +++ b/webpack/assets/javascripts/hosts/tableCheckboxes.js @@ -263,7 +263,7 @@ export function buildRedirect(url) { function paginationMetaData() { const { total, perPage } = document.getElementsByClassName( - 'pf-c-pagination' + 'pf-v5-c-pagination' )[0].dataset; return { total: Number(total), perPage: Number(perPage) }; } diff --git a/webpack/assets/javascripts/react_app/common/variables.scss b/webpack/assets/javascripts/react_app/common/variables.scss index f7485b1fc2b..405920bd3e9 100644 --- a/webpack/assets/javascripts/react_app/common/variables.scss +++ b/webpack/assets/javascripts/react_app/common/variables.scss @@ -1,3 +1,3 @@ @import '~@theforeman/vendor/scss/variables.scss'; -$header-max-width: calc(#{$pf-global--breakpoint--lg} + 70px); //TODO move into @theforeman/vendor/scss/variables +$header-max-width: calc(#{$pf-v5-global--breakpoint--lg} + 70px); //TODO move into @theforeman/vendor/scss/variables diff --git a/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.css b/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.css index 681c11a1b4b..eee3273dbbb 100644 --- a/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.css +++ b/webpack/assets/javascripts/react_app/components/ChartBox/ChartBox.css @@ -3,6 +3,6 @@ cursor: pointer; } } -.chart-box-modal .pf-c-modal-box__body { +.chart-box-modal .pf-v5-c-modal-box__body { text-align: center; } diff --git a/webpack/assets/javascripts/react_app/components/ChartBox/__snapshots__/ChartBox.test.js.snap b/webpack/assets/javascripts/react_app/components/ChartBox/__snapshots__/ChartBox.test.js.snap index 47128c7fa02..0fffa21452a 100644 --- a/webpack/assets/javascripts/react_app/components/ChartBox/__snapshots__/ChartBox.test.js.snap +++ b/webpack/assets/javascripts/react_app/components/ChartBox/__snapshots__/ChartBox.test.js.snap @@ -50,6 +50,7 @@ exports[`ChartBox error 1`] = ` onClose={[Function]} ouiaId="chart-2-modal" ouiaSafe={true} + position="default" showClose={true} title="some title" titleIconVariant={null} @@ -125,6 +126,7 @@ exports[`ChartBox pending 1`] = ` onClose={[Function]} ouiaId="chart-2-modal" ouiaSafe={true} + position="default" showClose={true} title="some title" titleIconVariant={null} @@ -212,6 +214,7 @@ exports[`ChartBox resolved 1`] = ` onClose={[Function]} ouiaId="chart-2-modal" ouiaSafe={true} + position="default" showClose={true} title="some title" titleIconVariant={null} diff --git a/webpack/assets/javascripts/react_app/components/ColumnSelector/ColumnSelector.js b/webpack/assets/javascripts/react_app/components/ColumnSelector/ColumnSelector.js index 3fa87496f63..9a9946dbdc5 100644 --- a/webpack/assets/javascripts/react_app/components/ColumnSelector/ColumnSelector.js +++ b/webpack/assets/javascripts/react_app/components/ColumnSelector/ColumnSelector.js @@ -143,8 +143,8 @@ const ColumnSelector = props => { }; return ( -
-
+
+