You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kie.apache.org by ti...@apache.org on 2025/04/30 21:11:37 UTC
(incubator-kie-tools) branch main updated: kie-tools#2641: Upgrade PatternFly to v5 (#3089)
This is an automated email from the ASF dual-hosted git repository.
tiagobento pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new b9beced955a kie-tools#2641: Upgrade PatternFly to v5 (#3089)
b9beced955a is described below
commit b9beced955a2ffdee3a3450640c9ad7633a03512
Author: Fabrizio Antonangeli <fa...@gmail.com>
AuthorDate: Wed Apr 30 23:11:33 2025 +0200
kie-tools#2641: Upgrade PatternFly to v5 (#3089)
Co-authored-by: kumaradityaraj <se...@gmail.com>
Co-authored-by: Kbowers <ke...@ibm.com>
Co-authored-by: Kbowers <92...@users.noreply.github.com>
Co-authored-by: Walter Medvedeo <wm...@gmail.com>
Co-authored-by: Thiago Lugli <th...@users.noreply.github.com>
---
.../bpmn-editor-classic-on-webapp/package.json | 4 +-
.../src/BpmnEditorClassicPage.tsx | 3 +-
.../bpmn-editor-classic-on-webapp/src/Sidebar.tsx | 2 +-
examples/dmn-editor-classic-on-webapp/package.json | 4 +-
.../src/DmnEditorClassicPage.tsx | 3 +-
.../dmn-editor-classic-on-webapp/src/Sidebar.tsx | 2 +-
examples/dmn-editor-on-webapp/package.json | 4 +-
.../dmn-editor-on-webapp/src/DmnEditorPage.tsx | 3 +-
examples/dmn-editor-on-webapp/src/Sidebar.tsx | 2 +-
.../package.json | 4 +-
.../src/Base64PngEditorPage.tsx | 3 +-
.../package.json | 4 +-
.../src/Base64PngEditor.tsx | 10 +-
.../package.json | 4 +-
.../src/App.tsx | 5 +-
.../src/StatsSidebar.tsx | 1 -
.../package.json | 4 +-
.../src/TodoListViewPage.tsx | 3 +-
.../package.json | 4 +-
.../src/App.tsx | 5 +-
.../src/Pages/SwfEditorEmptyState.tsx | 44 +-
examples/uniforms-patternfly/package.json | 4 +-
examples/uniforms-patternfly/src/App.tsx | 5 +-
packages/boxed-expression-component/package.json | 10 +-
.../src/BoxedExpressionEditorContext.css | 16 +-
.../src/base-no-reset-wrapped.css | 530 ++--
.../src/contextMenu/MenuWithHelp/MenuWithHelp.css | 14 +-
.../src/contextMenu/PopoverMenu/PopoverMenu.css | 16 +-
.../src/contextMenu/PopoverMenu/PopoverMenu.tsx | 8 +-
.../src/expressionVariable/DataTypeSelector.tsx | 2 +-
.../expressionVariable/ExpressionVariableCell.tsx | 4 +-
.../expressionVariable/ExpressionVariableMenu.tsx | 2 +-
.../src/expressionVariable/FeelInputTextbox.css | 5 +
.../src/expressionVariable/FeelInputTextbox.tsx | 2 +-
.../ContextExpression/ContextExpression.css | 2 +-
.../DecisionTableExpression/HitPolicySelector.css | 2 +-
.../DecisionTableExpression/HitPolicySelector.tsx | 2 +-
.../ExpressionDefinitionLogicTypeSelector.css | 21 +-
.../ExpressionDefinitionLogicTypeSelector.tsx | 11 +-
.../ExpressionDefinitionRoot.css | 2 +-
.../FilterExpression/FilterExpression.css | 4 +-
.../FilterExpression/FilterExpressionMatchCell.tsx | 4 +-
.../FunctionExpression/FunctionExpression.css | 2 +-
.../FunctionExpression/FunctionExpression.tsx | 2 +-
.../FunctionExpression/JavaFunctionExpression.css | 4 +-
.../FunctionExpression/JavaFunctionExpression.tsx | 5 +-
.../FunctionExpression/ParametersPopover.css | 4 +-
.../FunctionExpression/ParametersPopover.tsx | 23 +-
.../FunctionExpression/PmmlFunctionExpression.css | 4 +-
.../FunctionExpression/PmmlFunctionExpression.tsx | 6 +-
.../LiteralExpression/LiteralExpression.css | 12 +-
.../src/resizing/Resizer/Resizer.css | 4 +-
.../src/resizing/Resizer/Resizer.tsx | 22 +-
.../src/table/BeeTable/BeeTable.css | 54 +-
.../table/BeeTable/BeeTableContextMenuHandler.css | 14 +-
.../table/BeeTable/BeeTableContextMenuHandler.tsx | 2 +-
.../table/BeeTable/BeeTableEditableCellContent.tsx | 2 +-
.../src/table/BeeTable/BeeTableHeader.tsx | 4 +-
.../src/table/BeeTable/BeeTableTd.tsx | 5 +-
.../src/table/BeeTable/BeeTableTh.tsx | 5 +-
.../src/table/BeeTable/InlineEditableTextInput.tsx | 2 +-
.../expressions/decisionTableExpressionElement.ts | 12 +-
.../api/expressions/relationExpressionElement.ts | 2 +-
.../tests-e2e/api/nameAndDataTypeCell.ts | 10 +-
.../boxedExpressions/conditional/populate.spec.ts | 6 +-
.../boxedExpressions/relation/populate.spec.ts | 5 +-
.../tests-e2e/features/resizing/resizing.spec.ts | 2 +-
.../src/framework/editor/Editor.ts | 2 +-
packages/dashbuilder-component-table/package.json | 4 +-
.../src/FilteredTable.tsx | 8 +-
.../dashbuilder-component-table/static/index.css | 54 +-
.../dashbuilder-component-uniforms/package.json | 4 +-
.../dev-webapp/manifest.dev.json | 4 -
.../package.json | 6 +-
.../src/VictoryChart.tsx | 2 -
.../src/VictoryChartComponent.tsx | 2 -
.../src/charts/BaseChart.tsx | 1 -
.../src/charts/DonutChart.tsx | 3 +-
.../src/charts/PieChart.tsx | 3 +-
.../src/charts/ScatterChart.tsx | 2 +-
.../src/charts/UtilizationDonut.tsx | 1 -
.../src/charts/XYChart.tsx | 3 +-
.../static/index.css | 6 +-
packages/dashbuilder-editor/package.json | 4 +-
.../package.json | 4 +-
.../src/components/AppToolbar.tsx | 14 +-
.../src/pages/ErrorPage.tsx | 9 +-
.../static/resources/style.css | 6 +-
packages/dashbuilder-viewer/package.json | 4 +-
.../dev-deployment-dmn-form-webapp/package.json | 4 +-
.../src/DmnFormErrorPage.tsx | 9 +-
.../src/DmnFormPage.tsx | 9 +-
.../src/DmnFormToolbar.tsx | 19 +-
.../static/resources/style.css | 34 +-
packages/dmn-editor-envelope/package.json | 2 +-
packages/dmn-editor-envelope/src/DmnEditorRoot.tsx | 17 +-
packages/dmn-editor-standalone/package.json | 2 +-
.../Google-Chrome/api/open-editor.png | Bin 54108 -> 53742 bytes
.../Google-Chrome/api/setContent-emptyDmn.png | Bin 54096 -> 53717 bytes
.../Google-Chrome/api/setContent-emptyDrd.png | Bin 64632 -> 63990 bytes
.../__screenshots__/chromium/api/open-editor.png | Bin 51122 -> 50935 bytes
.../chromium/api/setContent-emptyDmn.png | Bin 51121 -> 50943 bytes
.../chromium/api/setContent-emptyDrd.png | Bin 57164 -> 57239 bytes
.../__screenshots__/webkit/api/open-editor.png | Bin 52221 -> 52336 bytes
.../webkit/api/setContent-emptyDmn.png | Bin 52358 -> 52476 bytes
.../webkit/api/setContent-emptyDrd.png | Bin 58883 -> 58928 bytes
packages/dmn-editor/package.json | 6 +-
packages/dmn-editor/src/DmnEditor.css | 44 +-
packages/dmn-editor/src/DmnEditorErrorFallback.tsx | 82 +-
.../src/boxedExpressions/BoxedExpressionScreen.tsx | 4 +-
.../ConstraintComponents/ConstraintDateTime.tsx | 8 +-
.../ConstraintDateTimeDuration.tsx | 8 +-
.../ConstraintComponents/ConstraintTime.tsx | 4 +-
.../ConstraintYearsMonthsDuration.tsx | 4 +-
packages/dmn-editor/src/dataTypes/Constraints.tsx | 12 +-
.../dmn-editor/src/dataTypes/ConstraintsEnum.tsx | 2 +-
.../src/dataTypes/ConstraintsExpression.tsx | 2 +-
.../dmn-editor/src/dataTypes/DataTypePanel.tsx | 22 +-
packages/dmn-editor/src/dataTypes/DataTypes.tsx | 20 +-
.../src/dataTypes/DataTypesEmptyState.tsx | 71 +-
.../dmn-editor/src/dataTypes/ImportJavaClasses.tsx | 4 +-
.../src/dataTypes/ItemComponentsTable.tsx | 17 +-
.../dmn-editor/src/dataTypes/TypeRefSelector.tsx | 4 +-
packages/dmn-editor/src/diagram/Diagram.tsx | 427 +--
.../dmn-editor/src/diagram/DrdSelectorPanel.tsx | 6 +-
packages/dmn-editor/src/diagram/DrgNodesPanel.tsx | 17 +-
packages/dmn-editor/src/diagram/Palette.tsx | 12 +-
.../src/diagram/nodes/OutgoingStuffNodePanel.tsx | 2 +-
.../src/externalNodes/ExternalNodesPanel.tsx | 42 +-
.../src/includedModels/IncludedModels.css | 2 +-
.../src/includedModels/IncludedModels.tsx | 211 +-
.../dmn-editor/src/overlaysPanel/OverlaysPanel.tsx | 14 +-
.../src/propertiesPanel/BkmProperties.tsx | 2 +-
.../WithoutPropertiesCell.tsx | 17 +-
.../src/propertiesPanel/DecisionProperties.tsx | 2 +-
.../propertiesPanel/DecisionServiceProperties.tsx | 4 +-
.../src/propertiesPanel/DiagramPropertiesPanel.css | 2 +-
.../DocumentationLinksFormGroup.tsx | 6 +-
packages/dmn-editor/src/propertiesPanel/Fields.tsx | 6 +-
.../dmn-editor/src/propertiesPanel/FontOptions.tsx | 10 +-
.../propertiesPanel/GlobalDiagramProperties.tsx | 10 +-
.../src/propertiesPanel/GroupProperties.tsx | 4 +-
.../src/propertiesPanel/InputDataProperties.tsx | 4 +-
.../propertiesPanel/KnowledgeSourceProperties.tsx | 8 +-
.../src/propertiesPanel/ShapeOptions.tsx | 16 +-
.../propertiesPanel/TextAnnotationProperties.tsx | 6 +-
.../dmn-editor/tests-e2e/__fixtures__/drgNodes.ts | 3 +
.../decisionServicePropertiesPanel.ts | 3 +-
.../readOnly-dataTypes-inputs-disabled.png | Bin 83350 -> 80622 bytes
.../readOnly-dataTypes-inputs-disabled.png | Bin 75736 -> 76318 bytes
.../readOnly-dataTypes-inputs-disabled.png | Bin 73996 -> 67016 bytes
.../dmn-editor/tests-e2e/drds/modelDrd.spec.ts | 9 +-
packages/dmn-runner/package.json | 4 +-
.../src/uniforms/DmnFeelContextField.tsx | 2 +-
packages/editor/package.json | 4 +-
packages/editor/src/envelope/styles.scss | 26 +-
.../KeyBindingsHelpOverlay.test.tsx.snap | 74 +-
.../__snapshots__/LoadingScreen.test.tsx.snap | 81 +-
.../__snapshots__/EditorEnvelopeView.test.tsx.snap | 33 +-
.../src/uniforms/AutoForm.tsx | 2 +-
.../src/uniforms/NestField.tsx | 2 +-
.../tests/__snapshots__/AutoForm.test.tsx.snap | 12 +-
.../tests/__snapshots__/ListField.test.tsx.snap | 2 +-
.../tests/__snapshots__/NestField.test.tsx.snap | 4 +-
packages/form-dmn/package.json | 4 +-
packages/form-dmn/src/FormDmnOutputs.tsx | 11 +-
packages/form-dmn/src/styles.scss | 4 +-
.../tests/__snapshots__/FormDmn.test.tsx.snap | 1295 +++++---
.../__snapshots__/FormDmnOutputs.test.tsx.snap | 18 +-
packages/form/package.json | 4 +-
packages/form/src/FormStatus.tsx | 13 +-
.../import-java-classes-component/package.json | 6 +-
.../ImportJavaClasses/ImportJavaClassesWizard.tsx | 5 +-
.../ImportJavaClassesWizardFieldListTable.tsx | 9 +-
.../ImportJavaClassesWizardFirstStep.tsx | 19 +-
.../ImportJavaClassesWizardSecondStep.tsx | 2 +-
.../ImportJavaClassesWizardThirdStep.css | 4 +-
.../__snapshots__/ImportJavaClasses.test.tsx.snap | 1297 ++++----
packages/kie-bc-editors/package.json | 2 +-
packages/online-editor/package.json | 6 +-
packages/online-editor/src/NoMatchPage.tsx | 19 +-
.../src/ResponsiveDropdown/ResponsiveDropdown.tsx | 2 +-
.../ResponsiveDropdownToggle.tsx | 6 +-
.../online-editor/src/aboutModal/AboutButton.tsx | 2 +-
.../online-editor/src/accounts/AccountsIcon.tsx | 105 +-
.../src/accounts/git/ConnectToGitSection.tsx | 23 +-
.../kubernetes/ConnectToKubernetesSimple.tsx | 135 +-
.../ConnectToLocalKubernetesClusterWizard.tsx | 159 +-
.../accounts/openshift/ConnecToOpenShiftSimple.tsx | 137 +-
...tToDeveloperSandboxForRedHatOpenShiftWizard.tsx | 173 +-
packages/online-editor/src/alerts/Alerts.tsx | 2 +-
.../src/authProviders/AuthProviderIcon.tsx | 59 +-
.../src/authProviders/AuthProvidersGallery.tsx | 34 +-
.../src/authSessions/AuthSessionLabel.tsx | 3 +-
.../src/authSessions/AuthSessionSelect.tsx | 17 +-
.../src/authSessions/AuthSessionsList.tsx | 76 +-
.../DevDeploymentsConfirmDeployModal.tsx | 62 +-
.../DevDeploymentsDeployDropdownItems.tsx | 4 +-
.../src/devDeployments/DevDeploymentsDropdown.tsx | 51 +-
.../devDeployments/DevDeploymentsDropdownItem.tsx | 4 +-
.../src/dmnRunner/DmnRunnerContextProvider.tsx | 9 +-
.../src/dmnRunner/DmnRunnerDrawerPanelContent.tsx | 4 +-
.../src/dmnRunner/DmnRunnerErrorBoundary.tsx | 9 +-
.../online-editor/src/dmnRunner/DmnRunnerTable.css | 2 +-
.../online-editor/src/dmnRunner/DmnRunnerTable.tsx | 11 +-
.../src/editor/DeleteDropdownWithConfirmation.tsx | 2 +-
packages/online-editor/src/editor/EditorPage.tsx | 9 +-
.../src/editor/EditorPageErrorPage.tsx | 18 +-
.../ExtendedServices/ExtendedServicesButtons.tsx | 6 +-
.../ExtendedServicesDropdownGroup.tsx | 2 +-
.../NotificationsPanelTabContent.tsx | 2 +-
.../Toolbar/Accelerators/AcceleratorIndicator.tsx | 9 +-
.../Toolbar/Accelerators/AcceleratorsDropdown.tsx | 2 +-
.../src/editor/Toolbar/EditorToolbar.tsx | 54 +-
.../src/editor/Toolbar/FileStatus.tsx | 23 +-
.../src/editor/Toolbar/FileSwitcher.tsx | 89 +-
.../GitIntegration/CreateGistOrSnippetModal.tsx | 24 +-
.../GitIntegration/CreateGitRepositoryModal.tsx | 43 +-
.../GitIntegration/GitIntegrationAlerts.tsx | 2 +-
.../GitIntegration/LoadOrganizationsSelect.tsx | 6 +-
.../GitIntegration/PushToGitAlertActionLinks.tsx | 4 +-
.../src/editor/Toolbar/KebabDropdown.tsx | 4 +-
.../src/editor/Toolbar/NewFileDropdownMenu.tsx | 59 +-
.../editor/Toolbar/Share/DownloadDropdownGroup.tsx | 2 +-
.../editor/Toolbar/Share/EmbedDropdownGroup.tsx | 2 +-
.../src/editor/Toolbar/Share/GitDropdownGroup.tsx | 4 +-
.../src/editor/Toolbar/SyncDropdownMenu.tsx | 14 +-
.../src/editor/Toolbar/VsCodeDropdownMenu.tsx | 9 +-
.../src/extendedServices/ExtendedServicesIcon.tsx | 2 +-
.../src/extendedServices/ExtendedServicesModal.tsx | 60 +-
packages/online-editor/src/home/HomePage.tsx | 278 +-
.../importFromUrl/AdvancedImportModalContent.tsx | 62 +-
.../importFromUrl/ImportFromUrlHomePageCard.tsx | 22 +-
.../importFromUrl/ImportSingleFileFromUrlForm.tsx | 37 +-
.../src/importFromUrl/ImportableUrlHooks.tsx | 30 +-
packages/online-editor/src/os/SelectOs.tsx | 2 +-
.../src/pageTemplate/OnlineEditorPage.tsx | 18 +-
.../src/settings/CorsProxySettingsTab.tsx | 42 +-
.../src/settings/EditorsSettingsTab.tsx | 52 +-
.../src/settings/ExtendedServicesSettingsTab.tsx | 105 +-
.../components/GitStatusIndicatorActions.tsx | 11 +-
.../workspace/components/WorkspaceCommitModal.tsx | 20 +-
.../src/workspace/components/WorkspaceLabel.tsx | 33 +-
.../src/workspace/components/WorkspaceListItem.tsx | 5 +-
.../workspace/components/WorkspaceLoadingCard.tsx | 15 +-
.../components/WorkspaceStatusIndicator.tsx | 12 +-
.../startupBlockers/StartupBlockerTemplate.tsx | 6 +-
packages/online-editor/static/resources/style.css | 253 +-
.../Google-Chrome/createFiles/new-file-bpmn.png | Bin 48785 -> 48723 bytes
.../Google-Chrome/createFiles/new-file-dmn.png | Bin 70416 -> 68250 bytes
.../Google-Chrome/createFiles/new-file-pmml.png | Bin 77562 -> 82550 bytes
.../Google-Chrome/createFiles/sample-bpmn.png | Bin 82816 -> 82730 bytes
.../Google-Chrome/createFiles/sample-dmn.png | Bin 84450 -> 70419 bytes
.../Google-Chrome/createFiles/sample-pmml.png | Bin 77709 -> 77431 bytes
.../chromium/createFiles/new-file-bpmn.png | Bin 50000 -> 45304 bytes
.../chromium/createFiles/new-file-dmn.png | Bin 71687 -> 64856 bytes
.../chromium/createFiles/new-file-pmml.png | Bin 70471 -> 63242 bytes
.../chromium/createFiles/sample-bpmn.png | Bin 87200 -> 78159 bytes
.../chromium/createFiles/sample-dmn.png | Bin 83227 -> 69051 bytes
.../chromium/createFiles/sample-pmml.png | Bin 75849 -> 65577 bytes
.../webkit/createFiles/new-file-bpmn.png | Bin 41454 -> 42045 bytes
.../webkit/createFiles/new-file-dmn.png | Bin 67596 -> 66171 bytes
.../webkit/createFiles/new-file-pmml.png | Bin 64868 -> 64953 bytes
.../webkit/createFiles/sample-dmn.png | Bin 70174 -> 68003 bytes
.../webkit/createFiles/sample-pmml.png | Bin 67403 -> 67129 bytes
packages/pmml-editor/dev-webapp/EmptyState.tsx | 32 +-
packages/pmml-editor/dev-webapp/HistoryButtons.tsx | 2 +-
packages/pmml-editor/package.json | 6 +-
.../ConstraintsEdit/ConstraintsEdit.scss | 8 +-
.../ConstraintsEdit/ConstraintsEdit.tsx | 18 +-
.../ConstraintsEnumEdit/ConstraintsEnumEdit.scss | 6 +-
.../ConstraintsEnumEdit/ConstraintsEnumEdit.tsx | 2 +-
.../ConstraintsLabel/ConstraintsLabel.scss | 2 +-
.../ConstraintsRangeEdit/ConstraintsRangeEdit.scss | 8 +-
.../ConstraintsRangeEdit/ConstraintsRangeEdit.tsx | 38 +-
.../DataDictionaryContainer.scss | 2 +-
.../DataDictionaryHandler.tsx | 6 +-
.../DataDictionaryPropertiesEdit.scss | 6 +-
.../DataDictionaryPropertiesEdit.tsx | 32 +-
.../DataDictionary/DataTypeItem/DataTypeItem.scss | 6 +-
.../DataDictionary/DataTypeItem/DataTypeItem.tsx | 33 +-
.../EmptyDataDictionary/EmptyDataDictionary.tsx | 13 +-
.../MultipleDataTypeAdd/MultipleDataTypeAdd.tsx | 25 +-
.../MultipleDataTypeAdd/MultipleDataTypesAdd.scss | 2 +-
.../PropertiesLabels/PropertiesLabels.scss | 6 +-
.../components/EditorCore/atoms/ModelTitle.scss | 8 +-
.../components/EditorCore/atoms/ModelTitle.tsx | 11 +-
.../EditorCore/atoms/ValidationIndicator.tsx | 27 +-
.../organisms/EmptyStateModelNotFound.tsx | 13 +-
.../EditorScorecard/atoms/AttributeLabel.scss | 4 +-
.../EditorScorecard/atoms/CharacteristicLabel.scss | 4 +-
.../EditorScorecard/atoms/GenericNumericInput.tsx | 2 +-
.../EditorScorecard/atoms/GenericSelector.tsx | 9 +-
.../EditorScorecard/atoms/GenericTextInput.tsx | 2 +-
.../EditorScorecard/molecules/AttributeEditor.scss | 2 +-
.../EditorScorecard/molecules/AttributeEditor.tsx | 84 +-
.../molecules/CharacteristicsTableEditRow.tsx | 64 +-
.../molecules/CharacteristicsToolbar.scss | 6 +-
.../molecules/CharacteristicsToolbar.tsx | 52 +-
.../molecules/EmptyStateNoAttributes.tsx | 13 +-
.../molecules/EmptyStateNoCharacteristics.tsx | 32 +-
.../EmptyStateNoMatchingCharacteristics.tsx | 13 +-
.../EditorScorecard/organisms/AttributesTable.scss | 2 +-
.../organisms/CharacteristicsContainer.scss | 10 +-
.../organisms/CorePropertiesTable.scss | 2 +-
.../organisms/CorePropertiesTable.tsx | 31 +-
.../templates/ScorecardEditorPage.scss | 14 +-
.../LandingPage/molecules/LandingPageToolbar.tsx | 52 +-
.../components/LandingPage/molecules/ModelCard.tsx | 20 +-
.../LandingPage/organisms/EmptyStateNoContent.tsx | 13 +-
.../LandingPage/organisms/EmptyStateNoModels.tsx | 22 +-
.../EmptyMiningSchema/EmptyMiningSchema.tsx | 13 +-
.../MiningSchemaAddFields.tsx | 9 +-
.../MiningSchemaContainer.scss | 2 +-
.../MiningSchemaFieldLabels.scss | 6 +-
.../MiningSchemaFields/MiningSchemaFields.scss | 2 +-
.../MiningSchemaHandler/MiningSchemaHandler.tsx | 6 +-
.../MiningSchemaPropertiesEdit.scss | 6 +-
.../MiningSchemaPropertiesEdit.tsx | 117 +-
.../NoMiningSchemaFieldsOptions.tsx | 14 +-
.../components/Outputs/atoms/OutputFieldLabel.scss | 4 +-
.../Outputs/molecules/OutputFieldEditRow.tsx | 32 +-
.../Outputs/molecules/OutputFieldRow.scss | 6 +-
.../Outputs/organisms/EmptyStateNoOutput.tsx | 23 +-
.../organisms/OutputFieldExtendedProperties.tsx | 89 +-
.../Outputs/organisms/OutputFieldsTable.scss | 4 +-
.../Outputs/organisms/OutputsBatchAdd.scss | 2 +-
.../Outputs/organisms/OutputsBatchAdd.tsx | 25 +-
.../Outputs/organisms/OutputsContainer.scss | 14 +-
.../Outputs/organisms/OutputsHandler.tsx | 15 +-
.../DataDictionaryContainer.test.tsx.snap | 94 +-
.../__snapshots__/AttributesTable.test.tsx.snap | 280 +-
.../CharacteristicsTable.test.tsx.snap | 34 +-
.../CorePropertiesTable.test.tsx.snap | 683 +++--
.../molecules/LandingPageToolbar.test.tsx | 2 +-
.../__snapshots__/LandingPageToolbar.test.tsx.snap | 359 ++-
.../__snapshots__/ModelCard.test.tsx.snap | 39 +-
.../EmptyStateNoContent.test.tsx.snap | 56 +-
.../__snapshots__/EmptyStateNoModels.test.tsx.snap | 80 +-
.../__snapshots__/LandingPage.test.tsx.snap | 393 +--
.../MiningSchemaContainer.test.tsx.snap | 192 +-
.../__snapshots__/OutputFieldsTable.test.tsx.snap | 62 +-
packages/runtime-tools-components/package.json | 8 +-
.../src/common/components/BulkList/BulkList.tsx | 8 +-
.../src/common/components/DataTable/DataTable.tsx | 6 +-
.../components/EndpointLink/EndpointLink.tsx | 7 +-
.../common/components/InlineEdit/InlineEdit.tsx | 22 +-
.../components/ItemDescriptor/ItemDescriptor.tsx | 4 +-
.../KeycloakUnavailablePage.tsx | 29 +-
.../KogitoEmptyState/KogitoEmptyState.tsx | 37 +-
.../components/KogitoSpinner/KogitoSpinner.tsx | 9 +-
.../src/common/components/LoadMore/LoadMore.tsx | 16 +-
.../common/components/PageLayout/PageLayout.tsx | 10 +-
.../common/components/PageToolbar/PageToolbar.tsx | 18 +-
.../components/ServerErrors/ServerErrors.tsx | 43 +-
.../src/common/components/styles.css | 14 +-
.../src/common/utils/Utils.tsx | 4 +-
.../package.json | 8 +-
.../src/aboutModal/AboutButton.tsx | 2 +-
.../authSessions/components/AuthSessionSelect.tsx | 56 +-
.../authSessions/components/AuthSessionsList.tsx | 65 +-
.../components/NewAuthSessionLoginSuccessPage.tsx | 18 +-
.../components/NewAuthSessionModal.tsx | 123 +-
.../managementConsole/ManagementConsoleHome.tsx | 27 +-
.../ManagementConsolePageLayout.tsx | 30 +-
.../managementConsole/ManagementConsoleToolbar.tsx | 4 +-
.../src/process/details/ProcessDetails.tsx | 20 +-
.../src/runtime/RuntimeNav.tsx | 2 -
.../src/styles.css | 24 +-
.../src/tasks/TaskDetails.tsx | 4 +-
.../tasks/components/ImpersonationPageSection.tsx | 31 +-
.../package.json | 10 +-
.../pages/ProcessFormPage/ProcessFormPage.tsx | 2 +-
.../components/InlineEdit/InlineEdit.tsx | 22 +-
.../pages/TaskDetailsPage/TaskDetailsPage.tsx | 2 +-
.../pages/TaskInboxPage/TaskInboxPage.tsx | 2 +-
.../components/TaskInboxSwitchUser.tsx | 4 +-
.../package.json | 8 +-
.../JobsManagementTable/JobsManagementTable.tsx | 14 +-
.../JobsManagementToolbar.tsx | 6 +-
.../JobsRescheduleModal/JobsRescheduleModal.tsx | 31 +-
.../jobsManagement/envelope/components/styles.css | 14 +-
.../src/jobsManagement/utils/utils.tsx | 10 +-
.../ProcessDefinitionListToolbar.tsx | 24 +-
.../components/JobActionsKebab/JobActionsKebab.tsx | 4 +-
.../envelope/components/JobsPanel/JobsPanel.tsx | 10 +-
.../components/ProcessDetails/ProcessDetails.tsx | 6 +-
.../ProcessDetailsNodeTrigger.tsx | 8 +-
.../ProcessDetailsTimelinePanel.tsx | 12 +-
.../processDetails/envelope/components/styles.css | 18 +-
.../src/processDetails/utils/Utils.tsx | 10 +-
.../ProcessForm/CustomProcessFormDisplayer.tsx | 2 +-
.../components/ErrorPopover/ErrorPopover.tsx | 4 +-
.../ProcessListActionsKebab.tsx | 4 +-
.../ProcessListChildTable.tsx | 4 +-
.../ProcessListTable/ProcessListTable.tsx | 9 +-
.../ProcessListToolbar/ProcessListToolbar.tsx | 38 +-
.../src/processList/envelope/components/styles.css | 12 +-
.../envelope/components/utils/ProcessListUtils.tsx | 10 +-
.../taskDetails/envelope/components/TaskState.tsx | 6 +-
.../CustomTaskFormDisplayer.tsx | 4 +-
.../components/EmptyTaskForm/EmptyTaskForm.tsx | 21 +-
.../TaskInboxToolbar/TaskInboxToolbar.tsx | 31 +-
.../package.json | 8 +-
.../CustomDashboardCard/CustomDashboardCard.tsx | 10 +-
.../CustomDashboardListToolbar.tsx | 2 +-
.../components/FormDetails/FormDetails.tsx | 4 +-
.../src/formDetails/envelope/components/styles.css | 2 +-
.../envelope/components/FormCard/FormCard.tsx | 10 +-
.../envelope/components/FormsList/FormsList.tsx | 2 +-
.../FormsListToolbar/FormsListToolbar.tsx | 2 +-
.../package.json | 4 +-
.../src/NoData/NoData.tsx | 21 +-
.../src/PageNotFound/PageNotFound.tsx | 21 +-
.../ServerUnavailablePage.tsx | 27 +-
.../package.json | 8 +-
.../CloudEventCustomHeadersEditor.tsx | 4 +-
.../CloudEventFieldLabelIcon.tsx | 9 +-
.../components/CloudEventForm/CloudEventForm.tsx | 139 +-
.../JobsManagementTable/JobsManagementTable.tsx | 14 +-
.../JobsManagementToolbar.tsx | 8 +-
.../JobsRescheduleModal/JobsRescheduleModal.tsx | 32 +-
.../jobsManagement/envelope/components/styles.css | 14 +-
.../src/jobsManagement/utils/utils.tsx | 10 +-
.../WorkflowDefinitionListToolbar.tsx | 26 +-
.../components/JobActionsKebab/JobActionsKebab.tsx | 4 +-
.../envelope/components/JobsPanel/JobsPanel.tsx | 10 +-
.../components/WorkflowDetails/WorkflowDetails.tsx | 6 +-
.../WorkflowDetailsNodeTrigger.tsx | 8 +-
.../WorkflowDetailsTimelinePanel.tsx | 14 +-
.../workflowDetails/envelope/components/styles.css | 16 +-
.../src/workflowDetails/utils/Utils.tsx | 20 +-
.../components/WorkflowForm/WorkflowForm.tsx | 27 +-
.../components/ErrorPopover/ErrorPopover.tsx | 4 +-
.../WorkflowListActionsKebab.tsx | 8 +-
.../WorkflowListChildTable.tsx | 5 +-
.../WorkflowListTable/WorkflowListTable.tsx | 9 +-
.../WorkflowListToolbar/WorkflowListToolbar.tsx | 36 +-
.../workflowList/envelope/components/styles.css | 12 +-
.../components/utils/WorkflowListUtils.tsx | 10 +-
.../package.json | 4 +-
.../src/CloudEventForm/CloudEventForm.tsx | 2 +-
packages/scesim-editor-envelope/package.json | 2 +-
packages/scesim-editor/package.json | 6 +-
packages/scesim-editor/src/TestScenarioEditor.tsx | 26 +-
.../src/TestScenarioEditorErrorFallback.tsx | 83 +-
.../src/creation/TestScenarioCreationPanel.tsx | 311 +-
.../drawer/TestScenarioDrawerDataSelectorPanel.tsx | 18 +-
.../src/drawer/TestScenarioDrawerSettingsPanel.tsx | 12 +-
.../src/sidebar/TestScenarioSideBarMenu.css | 20 +-
.../tests-e2e/__fixtures__/selectorPanel.ts | 1 +
.../emptyExpression/create-a-new-test-scenario.png | Bin 15450 -> 16370 bytes
.../backgroundTable/background-table-decision.png | Bin 18246 -> 22575 bytes
.../emptyExpression/create-a-new-test-scenario.png | Bin 13603 -> 14436 bytes
.../backgroundTable/background-table-decision.png | Bin 19810 -> 19638 bytes
.../emptyExpression/create-a-new-test-scenario.png | Bin 16178 -> 14306 bytes
.../backgroundTable/background-table-decision.png | Bin 16290 -> 15245 bytes
.../e2e-tests/e2e/RecentModel.cy.ts | 4 +-
packages/serverless-logic-web-tools/package.json | 12 +-
.../src/ResponsiveDropdown/ResponsiveDropdown.tsx | 7 +-
.../ResponsiveDropdownToggle.tsx | 4 +-
.../src/alerts/Alerts.tsx | 2 +-
.../src/editor/CreateGitHubRepositoryModal.tsx | 49 +-
.../src/editor/DeleteDropdownWithConfirmation.tsx | 4 +-
.../src/editor/Deploy/ConfirmDeployModal.tsx | 4 +-
.../Deploy/ConfirmOptions/DashDeployOptions.tsx | 2 +-
.../Deploy/ConfirmOptions/SwfDeployOptions.tsx | 4 +-
.../src/editor/Deploy/DeployButtons.tsx | 7 +-
.../src/editor/Deploy/DeployDropdownGroup.tsx | 2 +-
.../src/editor/EditorToolbar.tsx | 37 +-
.../src/editor/FileSwitcher.tsx | 45 +-
.../src/editor/NewFileDropdownMenu.tsx | 53 +-
.../NotificationsPanelTabContent.tsx | 2 +-
.../src/editor/hooks/useDeployDropdownItems.tsx | 20 +-
.../src/error/ErrorPage.tsx | 18 +-
.../src/homepage/breadcrumb/HomepageBreadcrumb.tsx | 2 +-
.../homepage/overView/CreateOrImportModelGrid.tsx | 18 +-
.../src/homepage/overView/NewModelCard.tsx | 4 +-
.../src/homepage/overView/Overview.tsx | 6 +-
.../src/homepage/pageTemplate/OnlineEditorPage.tsx | 11 +-
.../src/homepage/recentModels/RecentModels.tsx | 23 +-
.../src/homepage/recentModels/WorkspacesTable.tsx | 13 +-
.../homepage/recentModels/WorkspacesTableRow.tsx | 4 +-
.../recentModels/workspaceFiles/WorkspaceFiles.tsx | 26 +-
.../workspaceFiles/WorkspaceFilesTable.tsx | 13 +-
.../workspaceFiles/WorkspaceFilesTableRow.tsx | 2 +-
.../src/homepage/uiNav/HomePageNav.tsx | 2 +-
.../src/navigation/NoMatchPage.tsx | 19 +-
.../dropdown/OpenShiftDeploymentDropdownItem.tsx | 4 +-
.../dropdown/OpenshiftDeploymentsDropdown.tsx | 24 +-
.../src/openshift/swfDevMode/DevModeContext.tsx | 4 +-
.../serverless-logic-web-tools/src/os/SelectOs.tsx | 2 +-
.../pages/RuntimeToolsTriggerCloudEvent.tsx | 4 +-
.../pages/RuntimeToolsWorkflowForm.tsx | 4 +-
.../src/samples/SampleCard.tsx | 11 +-
.../src/samples/SamplePanelContent.tsx | 4 +-
.../src/samples/SamplesCatalog.tsx | 23 +-
.../src/settings/SettingsContext.tsx | 4 +-
.../src/settings/SettingsPageContainer.tsx | 2 +-
.../src/settings/github/GitHubSettings.tsx | 118 +-
.../src/settings/openshift/OpenShiftSettings.tsx | 13 +-
.../openshift/OpenShiftSettingsSimpleConfig.tsx | 135 +-
.../settings/runtimeTools/RuntimeToolsSettings.tsx | 54 +-
.../serviceAccount/ServiceAccountSettings.tsx | 97 +-
.../serviceRegistry/ServiceRegistrySettings.tsx | 92 +-
.../src/settings/storage/StorageSettings.tsx | 4 +-
.../src/table/ConfirmDeleteModal.tsx | 2 +-
.../serverless-logic-web-tools/src/table/Table.css | 6 +-
.../src/table/TableRowEmptyState.tsx | 29 +-
.../src/table/TableToolbar.tsx | 8 +-
.../src/workspace/components/ImportFromUrlForm.tsx | 27 +-
.../startupBlockers/StartupBlockerTemplate.tsx | 7 +-
.../static/resources/application-services.css | 208 +-
.../static/resources/style.css | 185 +-
.../dev-webapp/EmptyState.tsx | 39 +-
.../dev-webapp/HistoryButtons.tsx | 2 +-
.../package.json | 4 +-
.../src/editor/styles.scss | 14 +-
.../serverless-workflow-dev-ui-webapp/package.json | 4 +-
.../CloudEventFormPage/CloudEventFormPage.tsx | 2 +-
.../pages/MonitoringPage/MonitoringPage.tsx | 2 +-
.../pages/WorkflowFormPage/WorkflowFormPage.tsx | 2 +-
.../dev-webapp/EmptyState.tsx | 39 +-
.../dev-webapp/HistoryButtons.tsx | 2 +-
.../serverless-workflow-text-editor/package.json | 4 +-
packages/sonataflow-deployment-webapp/package.json | 6 +-
.../src/pages/BasePage.tsx | 15 +-
.../src/pages/ErrorPage.tsx | 26 +-
.../src/pages/Workflows/CloudEventFormPage.tsx | 17 +-
.../src/pages/Workflows/WorkflowFormPage.tsx | 17 +-
.../pages/RuntimeToolsWorkflowInstances.tsx | 22 +-
.../static/resources/style.css | 26 +-
.../forms/examples/react_hiring_HRInterview.tsx | 14 +-
.../forms/examples/react_hiring_ITInterview.tsx | 14 +-
.../package.json | 6 +-
.../src/alerts/Alerts.tsx | 2 +-
.../src/components/pages/BasePage.tsx | 9 +-
.../pages/MonitoringPage/MonitoringPage.tsx | 2 +-
.../TriggerCloudEventPage.tsx | 4 +-
.../pages/WorkflowFormPage/WorkflowFormPage.tsx | 4 +-
.../src/components/styles.css | 10 +-
.../selenium/locator/EditorXPathLocator.java | 2 +-
packages/text-editor/package.json | 2 +-
packages/uniforms-patternfly/package.json | 4 +-
packages/uniforms-patternfly/src/DateField.tsx | 2 +-
packages/uniforms-patternfly/src/LongTextField.tsx | 2 +-
packages/uniforms-patternfly/src/NestField.tsx | 2 +-
packages/uniforms-patternfly/src/NumField.tsx | 2 +-
packages/uniforms-patternfly/src/SelectField.tsx | 2 +-
.../uniforms-patternfly/src/SelectInputsField.tsx | 9 +-
packages/uniforms-patternfly/src/TextField.tsx | 6 +-
packages/uniforms-patternfly/src/wrapField.tsx | 26 +-
.../uniforms-patternfly/tests/TextField.test.tsx | 4 +-
packages/unitables-dmn/package.json | 4 +-
.../unitables-dmn/src/DmnRunnerOutputsTable.tsx | 11 +-
packages/unitables/package.json | 4 +-
packages/unitables/src/Unitables.css | 4 +-
packages/unitables/src/Unitables.tsx | 9 +-
packages/unitables/src/UnitablesWrapper.tsx | 9 +-
.../src/uniforms/UnitablesJsonSchemaBridge.tsx | 2 +-
.../unitables/src/uniforms/UnitablesListField.tsx | 4 +-
.../src/uniforms/UnitablesListItemField.tsx | 2 +-
.../unitables/src/uniforms/UnitablesNestField.tsx | 2 +-
packages/yard-editor/dev-webapp/EmptyState.tsx | 10 +-
packages/yard-editor/package.json | 4 +-
packages/yard-editor/src/editor/YardEditor.css | 8 +-
packages/yard-editor/src/uiEditor/YardUIEditor.css | 2 +-
packages/yard-editor/src/uiEditor/YardUIEditor.tsx | 28 +-
pnpm-lock.yaml | 3193 +++++++++++---------
569 files changed, 10286 insertions(+), 8266 deletions(-)
diff --git a/examples/bpmn-editor-classic-on-webapp/package.json b/examples/bpmn-editor-classic-on-webapp/package.json
index 55e967df772..98ea3b479bb 100644
--- a/examples/bpmn-editor-classic-on-webapp/package.json
+++ b/examples/bpmn-editor-classic-on-webapp/package.json
@@ -19,8 +19,8 @@
"@kie-tools/root-env": "workspace:*",
"@kie-tools/stunner-editors": "workspace:*",
"@kie-tools/tsconfig": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"@types/react": "^17.0.6",
"@types/react-dom": "^17.0.5",
"copy-webpack-plugin": "^11.0.0",
diff --git a/examples/bpmn-editor-classic-on-webapp/src/BpmnEditorClassicPage.tsx b/examples/bpmn-editor-classic-on-webapp/src/BpmnEditorClassicPage.tsx
index 0761d683aa3..37c0a28229b 100644
--- a/examples/bpmn-editor-classic-on-webapp/src/BpmnEditorClassicPage.tsx
+++ b/examples/bpmn-editor-classic-on-webapp/src/BpmnEditorClassicPage.tsx
@@ -24,7 +24,8 @@ import { useMemo, useState } from "react";
import { EmbeddedEditor, useEditorRef } from "@kie-tools-core/editor/dist/embedded";
import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
-import { Page, PageSection, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
+import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
import { Sidebar } from "./Sidebar";
export function BpmnEditorClassicPage() {
diff --git a/examples/bpmn-editor-classic-on-webapp/src/Sidebar.tsx b/examples/bpmn-editor-classic-on-webapp/src/Sidebar.tsx
index f2e78b62318..a0cacc2cd8c 100644
--- a/examples/bpmn-editor-classic-on-webapp/src/Sidebar.tsx
+++ b/examples/bpmn-editor-classic-on-webapp/src/Sidebar.tsx
@@ -143,7 +143,7 @@ export function Sidebar({ editorEnvelopeLocator, editor, setFile, file, fileExte
value={fileName}
type={"text"}
aria-label={"Edit file name"}
- onChange={setFileName}
+ onChange={(_event, val) => setFileName(val)}
onBlur={onChangeName}
/>
<br />
diff --git a/examples/dmn-editor-classic-on-webapp/package.json b/examples/dmn-editor-classic-on-webapp/package.json
index fc562961ddd..558d66ecf17 100644
--- a/examples/dmn-editor-classic-on-webapp/package.json
+++ b/examples/dmn-editor-classic-on-webapp/package.json
@@ -19,8 +19,8 @@
"@kie-tools/root-env": "workspace:*",
"@kie-tools/stunner-editors": "workspace:*",
"@kie-tools/tsconfig": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"@types/react": "^17.0.6",
"@types/react-dom": "^17.0.5",
"copy-webpack-plugin": "^11.0.0",
diff --git a/examples/dmn-editor-classic-on-webapp/src/DmnEditorClassicPage.tsx b/examples/dmn-editor-classic-on-webapp/src/DmnEditorClassicPage.tsx
index a0844d50db6..33b94a6fd2a 100644
--- a/examples/dmn-editor-classic-on-webapp/src/DmnEditorClassicPage.tsx
+++ b/examples/dmn-editor-classic-on-webapp/src/DmnEditorClassicPage.tsx
@@ -24,7 +24,8 @@ import { useMemo, useState } from "react";
import { EmbeddedEditor, useEditorRef } from "@kie-tools-core/editor/dist/embedded";
import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
-import { Page, PageSection, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
+import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
import { Sidebar } from "./Sidebar";
export function DmnEditorClassicPage() {
diff --git a/examples/dmn-editor-classic-on-webapp/src/Sidebar.tsx b/examples/dmn-editor-classic-on-webapp/src/Sidebar.tsx
index f2e78b62318..a0cacc2cd8c 100644
--- a/examples/dmn-editor-classic-on-webapp/src/Sidebar.tsx
+++ b/examples/dmn-editor-classic-on-webapp/src/Sidebar.tsx
@@ -143,7 +143,7 @@ export function Sidebar({ editorEnvelopeLocator, editor, setFile, file, fileExte
value={fileName}
type={"text"}
aria-label={"Edit file name"}
- onChange={setFileName}
+ onChange={(_event, val) => setFileName(val)}
onBlur={onChangeName}
/>
<br />
diff --git a/examples/dmn-editor-on-webapp/package.json b/examples/dmn-editor-on-webapp/package.json
index d94ada66364..c2ba584bf20 100644
--- a/examples/dmn-editor-on-webapp/package.json
+++ b/examples/dmn-editor-on-webapp/package.json
@@ -19,8 +19,8 @@
"@kie-tools/dmn-editor-envelope": "workspace:*",
"@kie-tools/root-env": "workspace:*",
"@kie-tools/tsconfig": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"@types/react": "^17.0.6",
"@types/react-dom": "^17.0.5",
"copy-webpack-plugin": "^11.0.0",
diff --git a/examples/dmn-editor-on-webapp/src/DmnEditorPage.tsx b/examples/dmn-editor-on-webapp/src/DmnEditorPage.tsx
index d18898d80e8..8685edc9c7a 100644
--- a/examples/dmn-editor-on-webapp/src/DmnEditorPage.tsx
+++ b/examples/dmn-editor-on-webapp/src/DmnEditorPage.tsx
@@ -24,7 +24,8 @@ import { useMemo, useState } from "react";
import { EmbeddedEditor, useEditorRef } from "@kie-tools-core/editor/dist/embedded";
import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
-import { Page, PageSection, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
+import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
import { Sidebar } from "./Sidebar";
export function DmnEditorPage() {
diff --git a/examples/dmn-editor-on-webapp/src/Sidebar.tsx b/examples/dmn-editor-on-webapp/src/Sidebar.tsx
index f2e78b62318..a0cacc2cd8c 100644
--- a/examples/dmn-editor-on-webapp/src/Sidebar.tsx
+++ b/examples/dmn-editor-on-webapp/src/Sidebar.tsx
@@ -143,7 +143,7 @@ export function Sidebar({ editorEnvelopeLocator, editor, setFile, file, fileExte
value={fileName}
type={"text"}
aria-label={"Edit file name"}
- onChange={setFileName}
+ onChange={(_event, val) => setFileName(val)}
onBlur={onChangeName}
/>
<br />
diff --git a/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/package.json b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/package.json
index 97c9b2036fd..781df28bcc2 100644
--- a/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/package.json
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/package.json
@@ -18,8 +18,8 @@
"@kie-tools-examples/micro-frontends-multiplying-architecture-base64png-editor": "workspace:*",
"@kie-tools/root-env": "workspace:*",
"@kie-tools/tsconfig": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"@types/react": "^17.0.6",
"@types/react-dom": "^17.0.5",
"copy-webpack-plugin": "^11.0.0",
diff --git a/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/Base64PngEditorPage.tsx b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/Base64PngEditorPage.tsx
index 82a424bc717..68f760f2589 100644
--- a/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/Base64PngEditorPage.tsx
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor-on-webapp/src/Base64PngEditorPage.tsx
@@ -22,7 +22,8 @@ import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/ap
import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
import { EditorEnvelopeLocator, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
import { useMemo, useState } from "react";
-import { Page, PageHeader, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
import { EmbeddedEditor } from "@kie-tools-core/editor/dist/embedded";
import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
import { Base64PngGallery } from "./Base64PngGallery";
diff --git a/examples/micro-frontends-multiplying-architecture-base64png-editor/package.json b/examples/micro-frontends-multiplying-architecture-base64png-editor/package.json
index 5901012dc8a..5d404bd87fc 100644
--- a/examples/micro-frontends-multiplying-architecture-base64png-editor/package.json
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor/package.json
@@ -27,8 +27,8 @@
"@kie-tools-core/notifications": "workspace:*",
"@kie-tools-core/patternfly-base": "workspace:*",
"@kie-tools-core/workspace": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6"
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1"
},
"devDependencies": {
"@kie-tools/root-env": "workspace:*",
diff --git a/examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditor.tsx b/examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditor.tsx
index 8da8414673c..0d3d8ff2d86 100644
--- a/examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditor.tsx
+++ b/examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditor.tsx
@@ -20,11 +20,10 @@
import * as React from "react";
import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
import { EditorApi, KogitoEditorEnvelopeApi, KogitoEditorEnvelopeContextType } from "@kie-tools-core/editor/dist/api";
-import { EmptyState, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
+import { EmptyState, EmptyStateIcon, EmptyStateHeader } from "@patternfly/react-core/dist/js/components/EmptyState";
import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
import { Page } from "@patternfly/react-core/dist/js/components/Page";
import { Switch } from "@patternfly/react-core/dist/js/components/Switch";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
import { CubesIcon } from "@patternfly/react-icons/dist/js/icons/cubes-icon";
import { Base64PngEdit, Base64PngEditorStateControl } from "./Base64PngEditorStateControl";
import { KogitoEditorChannelApi } from "@kie-tools-core/editor/dist/api";
@@ -452,10 +451,7 @@ export const Base64PngEditor = React.forwardRef<EditorApi, Props>((props, forwar
/>
{disabled && (
<EmptyState>
- <EmptyStateIcon icon={CubesIcon} />
- <Title headingLevel="h5" size="4xl">
- Empty image
- </Title>
+ <EmptyStateHeader titleText="Empty image" icon={<EmptyStateIcon icon={CubesIcon} />} headingLevel="h5" />
</EmptyState>
)}
<canvas ref={canvasRef} className={"base64png-editor--canvas"} />
@@ -545,7 +541,7 @@ export const Base64PngEditor = React.forwardRef<EditorApi, Props>((props, forwar
id="invert-switch"
isDisabled={disabled}
isChecked={invert === "100"}
- onChange={(value) => tweakInvert(value ? "100" : "0")}
+ onChange={(_event, value) => tweakInvert(value ? "100" : "0")}
/>
</div>
</NavItem>
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/package.json b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/package.json
index b26a95e10d0..b1df201812c 100644
--- a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/package.json
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/package.json
@@ -20,8 +20,8 @@
"@kie-tools-examples/micro-frontends-multiplying-architecture-ping-pong-view-in-react": "workspace:*",
"@kie-tools/root-env": "workspace:*",
"@kie-tools/tsconfig": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"@types/react": "^17.0.6",
"@types/react-dom": "^17.0.5",
"@types/react-router": "^5.1.20",
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/App.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/App.tsx
index 3df871c55fb..44454a23948 100644
--- a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/App.tsx
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/App.tsx
@@ -21,7 +21,8 @@ import * as React from "react";
import { useEffect, useState } from "react";
import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
-import { Page, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
+import { Page } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
import { HashRouter as Router, Link, Route, Switch } from "react-router-dom";
import { PingPongReactIFrameViewsPage } from "./React/PingPongReactIFrameViewsPage";
import { PingPongReactDivViewsPage } from "./React/PingPongReactDivViewsPage";
@@ -58,7 +59,7 @@ export function App() {
<PageHeader
logo={<Brand src={"logo.png"} alt="Logo" />}
topNav={
- <Nav onSelect={(e) => setLocation(e.itemId as Location)} aria-label="Nav" variant="horizontal">
+ <Nav onSelect={(_event, e) => setLocation(e.itemId as Location)} aria-label="Nav" variant="horizontal">
<NavList>
<NavItem itemId={Location.HOME} isActive={location === Location.HOME}>
<Link to={Location.HOME}>Home</Link>
diff --git a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/StatsSidebar.tsx b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/StatsSidebar.tsx
index df54228ca65..b4a4b1ba270 100644
--- a/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/StatsSidebar.tsx
+++ b/examples/micro-frontends-multiplying-architecture-ping-pong-views-on-webapp/src/StatsSidebar.tsx
@@ -21,7 +21,6 @@ import * as React from "react";
import { useState, useEffect } from "react";
import { Label } from "@patternfly/react-core/dist/js/components/Label";
import { Stack, StackItem } from "@patternfly/react-core/dist/js/layouts/Stack";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
interface Props {
lastPing: string;
diff --git a/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/package.json b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/package.json
index e147aa32fe8..190c649f320 100644
--- a/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/package.json
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/package.json
@@ -18,8 +18,8 @@
"@kie-tools-examples/micro-frontends-multiplying-architecture-todo-list-view": "workspace:*",
"@kie-tools/root-env": "workspace:*",
"@kie-tools/tsconfig": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"@types/react": "^17.0.6",
"@types/react-dom": "^17.0.5",
"copy-webpack-plugin": "^11.0.0",
diff --git a/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/src/TodoListViewPage.tsx b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/src/TodoListViewPage.tsx
index cbe48dc841b..638135ee846 100644
--- a/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/src/TodoListViewPage.tsx
+++ b/examples/micro-frontends-multiplying-architecture-todo-list-view-on-webapp/src/TodoListViewPage.tsx
@@ -26,7 +26,8 @@ import {
import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
import { Divider } from "@patternfly/react-core/dist/js/components/Divider";
import { Stack, StackItem } from "@patternfly/react-core/dist/js/layouts/Stack";
-import { Page, PageHeader, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button/Button";
import { useSharedValue, useStateAsSharedValue } from "@kie-tools-core/envelope-bus/dist/hooks";
diff --git a/examples/serverless-workflow-editor-standalone-on-webapp/package.json b/examples/serverless-workflow-editor-standalone-on-webapp/package.json
index 5aa31ee8b28..de0e4e33e54 100644
--- a/examples/serverless-workflow-editor-standalone-on-webapp/package.json
+++ b/examples/serverless-workflow-editor-standalone-on-webapp/package.json
@@ -18,8 +18,8 @@
"@kie-tools/root-env": "workspace:*",
"@kie-tools/serverless-workflow-standalone-editor": "workspace:*",
"@kie-tools/tsconfig": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"@types/react": "^17.0.6",
"@types/react-dom": "^17.0.5",
"@types/react-router": "^5.1.20",
diff --git a/examples/serverless-workflow-editor-standalone-on-webapp/src/App.tsx b/examples/serverless-workflow-editor-standalone-on-webapp/src/App.tsx
index be3201603f5..3eab77bd59b 100644
--- a/examples/serverless-workflow-editor-standalone-on-webapp/src/App.tsx
+++ b/examples/serverless-workflow-editor-standalone-on-webapp/src/App.tsx
@@ -21,7 +21,8 @@ import * as React from "react";
import { useEffect, useState } from "react";
import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
-import { Page, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
+import { Page } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
import { HashRouter as Router, Link, Route, Switch } from "react-router-dom";
import { SwfStandaloneEditorPage } from "./Pages/SwfStandaloneEditorPage";
import { SwfStandaloneDiagramOnlyEditorPage } from "./Pages/SwfStandaloneDiagramOnlyEditorPage";
@@ -54,7 +55,7 @@ export function App() {
<PageHeader
logo={<Brand src={"logo.png"} alt="Logo" />}
topNav={
- <Nav onSelect={(e) => setLocation(e.itemId as Location)} aria-label="Nav" variant="horizontal">
+ <Nav onSelect={(_event, e) => setLocation(e.itemId as Location)} aria-label="Nav" variant="horizontal">
<NavList>
<NavItem itemId={Location.HOME} isActive={location === Location.HOME}>
<Link to={Location.HOME}>Home</Link>
diff --git a/examples/serverless-workflow-editor-standalone-on-webapp/src/Pages/SwfEditorEmptyState.tsx b/examples/serverless-workflow-editor-standalone-on-webapp/src/Pages/SwfEditorEmptyState.tsx
index 185956d222b..ac44b3c87eb 100644
--- a/examples/serverless-workflow-editor-standalone-on-webapp/src/Pages/SwfEditorEmptyState.tsx
+++ b/examples/serverless-workflow-editor-standalone-on-webapp/src/Pages/SwfEditorEmptyState.tsx
@@ -23,10 +23,11 @@ import {
EmptyState,
EmptyStateBody,
EmptyStateIcon,
- EmptyStateSecondaryActions,
EmptyStateVariant,
+ EmptyStateActions,
+ EmptyStateHeader,
+ EmptyStateFooter,
} from "@patternfly/react-core/dist/js/components/EmptyState";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
import { CubesIcon } from "@patternfly/react-icons/dist/js/icons/cubes-icon";
import { ChangeEvent } from "react";
@@ -44,25 +45,28 @@ interface UploadProps {
interface AllProps extends NewProps, UploadProps {}
export const ServerlessWorkflowEmptyState = (props: AllProps) => (
- <EmptyState variant={EmptyStateVariant.small}>
- <EmptyStateIcon icon={CubesIcon} />
- <Title headingLevel="h4" size="lg">
- No serverless workflow document
- </Title>
+ <EmptyState variant={EmptyStateVariant.sm}>
+ <EmptyStateHeader
+ titleText="No serverless workflow document"
+ icon={<EmptyStateIcon icon={CubesIcon} />}
+ headingLevel="h4"
+ />
<EmptyStateBody>
No serverless workflow document has been selected. Please either upload an existing document or create a new one.
</EmptyStateBody>
- <FileChooser setContent={props.setContent} />
- {!props.isDiagramOnly && !props.isTextOnly && (
- <EmptyStateSecondaryActions>
- <Button variant="link" onClick={(e) => props.newContent("json")} ouiaId="new-button">
- New JSON
- </Button>
- <Button variant="link" onClick={(e) => props.newContent("yaml")} ouiaId="new-button">
- New YAML
- </Button>
- </EmptyStateSecondaryActions>
- )}
+ <EmptyStateFooter>
+ <FileChooser setContent={props.setContent} />
+ {!props.isDiagramOnly && !props.isTextOnly && (
+ <EmptyStateActions>
+ <Button variant="link" onClick={(e) => props.newContent("json")} ouiaId="new-button">
+ New JSON
+ </Button>
+ <Button variant="link" onClick={(e) => props.newContent("yaml")} ouiaId="new-button">
+ New YAML
+ </Button>
+ </EmptyStateActions>
+ )}
+ </EmptyStateFooter>
</EmptyState>
);
@@ -86,8 +90,8 @@ const FileChooser = (props: UploadProps) => {
};
return (
- <div style={{ marginTop: "var(--pf-c-empty-state__primary--MarginTop)" }}>
- <label htmlFor="file-upload" className="pf-c-button pf-m-primary" data-ouia-component-id="upload-button">
+ <div style={{ marginTop: "var(--pf-v5-c-empty-state__primary--MarginTop)" }}>
+ <label htmlFor="file-upload" className="pf-v5-c-button pf-m-primary" data-ouia-component-id="upload-button">
<i className="fa fa-cloud-upload" />
Upload
</label>
diff --git a/examples/uniforms-patternfly/package.json b/examples/uniforms-patternfly/package.json
index afc29cf9288..5ce2c91659a 100644
--- a/examples/uniforms-patternfly/package.json
+++ b/examples/uniforms-patternfly/package.json
@@ -12,8 +12,8 @@
"dependencies": {
"@kie-tools-core/patternfly-base": "workspace:*",
"@kie-tools/uniforms-patternfly": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"ajv": "^8.17.1",
"ajv-draft-04": "^1.0.0",
"ajv-formats": "^3.0.1",
diff --git a/examples/uniforms-patternfly/src/App.tsx b/examples/uniforms-patternfly/src/App.tsx
index 761c2099555..c712ae820a3 100644
--- a/examples/uniforms-patternfly/src/App.tsx
+++ b/examples/uniforms-patternfly/src/App.tsx
@@ -21,7 +21,8 @@ import * as React from "react";
import { useState } from "react";
import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
-import { Page, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
+import { Page } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeader } from "@patternfly/react-core/deprecated";
import { Form } from "./Form";
export enum SchemaType {
@@ -38,7 +39,7 @@ export function App() {
<PageHeader
logo={<Brand src={"logo.png"} alt="Logo" />}
topNav={
- <Nav onSelect={(e) => setSchemaType(e.itemId as SchemaType)} aria-label="Nav" variant="horizontal">
+ <Nav onSelect={(_event, e) => setSchemaType(e.itemId as SchemaType)} aria-label="Nav" variant="horizontal">
<NavList>
<NavItem itemId={SchemaType.JsonSchema} isActive={schemaType === SchemaType.JsonSchema}>
JSON Schema
diff --git a/packages/boxed-expression-component/package.json b/packages/boxed-expression-component/package.json
index f822c24cde1..b1bc6968680 100644
--- a/packages/boxed-expression-component/package.json
+++ b/packages/boxed-expression-component/package.json
@@ -6,7 +6,7 @@
"keywords": [],
"scripts": {
"build:dev": "rimraf dist && pnpm copy:css && tsc -p tsconfig.json",
- "build:prod": "rimraf dist && pnpm copy:css && pnpm lint && tsc -p tsconfig.json && pnpm test && pnpm test-e2e",
+ "build:prod": "rimraf dist && pnpm copy:css && pnpm lint && tsc -p tsconfig.json && pnpm test && pnpm test-e2e",
"build:storybook": "rimraf dist-storybook && NODE_ENV=development storybook build -o dist-storybook",
"copy:css": "copyfiles -u 1 \"src/**/*.{sass,scss,css}\" dist/",
"deploy": "gh-pages -d dist-dev",
@@ -38,10 +38,10 @@
"@kie-tools/i18n-common-dictionary": "workspace:*",
"@kie-tools/jest-base": "workspace:*",
"@kie-tools/xml-parser-ts": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
- "@patternfly/react-styles": "^4.92.6",
- "@patternfly/react-table": "^4.112.39",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
+ "@patternfly/react-styles": "^5.4.0",
+ "@patternfly/react-table": "^5.4.1",
"lodash": "^4.17.21",
"react-resizable": "^1.11.0",
"react-table": "^7.6.2",
diff --git a/packages/boxed-expression-component/src/BoxedExpressionEditorContext.css b/packages/boxed-expression-component/src/BoxedExpressionEditorContext.css
index b94775fdf86..c22814c0b1b 100644
--- a/packages/boxed-expression-component/src/BoxedExpressionEditorContext.css
+++ b/packages/boxed-expression-component/src/BoxedExpressionEditorContext.css
@@ -22,11 +22,11 @@
}
.boxed-expression-provider {
- background-color: var(--pf-global--BackgroundColor--100);
- font-family: var(--pf-global--FontFamily--sans-serif);
- font-size: var(--pf-global--FontSize--md);
- font-weight: var(--pf-global--FontWeight--normal);
- line-height: var(--pf-global--LineHeight--md);
+ background-color: var(--pf-v5-global--BackgroundColor--100);
+ font-family: var(--pf-v5-global--FontFamily--sans-serif);
+ font-size: var(--pf-v5-global--FontSize--md);
+ font-weight: var(--pf-v5-global--FontWeight--normal);
+ line-height: var(--pf-v5-global--LineHeight--md);
text-align: left;
user-select: none;
touch-action: none;
@@ -56,8 +56,8 @@
.boxed-expression-provider label {
font-family: inherit;
font-size: 100%;
- line-height: var(--pf-global--LineHeight--md);
- color: var(--pf-global--Color--100);
+ line-height: var(--pf-v5-global--LineHeight--md);
+ color: var(--pf-v5-global--Color--100);
}
.boxed-expression-provider blockquote,
@@ -87,7 +87,7 @@
.expression-container .expression-info .expression-info-name {
font-weight: 700;
- color: var(--pf-global--palette--black-600);
+ color: var(--pf-v5-global--palette--black-600);
font-family: Menlo, monospace;
font-size: 0.8em;
white-space: pre !important;
diff --git a/packages/boxed-expression-component/src/base-no-reset-wrapped.css b/packages/boxed-expression-component/src/base-no-reset-wrapped.css
index c439eb9f7af..58132eab48c 100644
--- a/packages/boxed-expression-component/src/base-no-reset-wrapped.css
+++ b/packages/boxed-expression-component/src/base-no-reset-wrapped.css
@@ -18,283 +18,283 @@
*/
.boxed-expression-provider .pf-t-light {
- --pf-global--Color--100: var(--pf-global--Color--dark-100);
- --pf-global--Color--200: var(--pf-global--Color--dark-200);
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
- --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
- --pf-global--link--Color: var(--pf-global--link--Color--dark);
- --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
+ --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
+ --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
+ --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
+ --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
+ --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
+ --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
+ --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
}
.boxed-expression-provider .pf-t-dark {
- --pf-global--Color--100: var(--pf-global--Color--light-100);
- --pf-global--Color--200: var(--pf-global--Color--light-200);
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
- --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
- --pf-global--link--Color: var(--pf-global--link--Color--light);
- --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
- --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
-}
-
-.boxed-expression-provider .pf-t-dark .pf-c-card {
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
-}
-
-.boxed-expression-provider .pf-t-dark .pf-c-button {
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
+ --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
+ --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
+ --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
+ --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--light-100);
+ --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
+ --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
+ --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
+}
+
+.boxed-expression-provider .pf-t-dark .pf-v5-c-card {
+ --pf-v5-c-card--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-200);
+}
+
+.boxed-expression-provider .pf-t-dark .pf-v5-c-button {
+ --pf-v5-c-button--m-primary--Color: var(--pf-v5-global--primary-color--dark-100);
+ --pf-v5-c-button--m-primary--hover--Color: var(--pf-v5-global--primary-color--dark-100);
+ --pf-v5-c-button--m-primary--focus--Color: var(--pf-v5-global--primary-color--dark-100);
+ --pf-v5-c-button--m-primary--active--Color: var(--pf-v5-global--primary-color--dark-100);
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
+ --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
+ --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
+ --pf-v5-c-button--m-primary--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
+ --pf-v5-c-button--m-secondary--Color: var(--pf-v5-global--Color--light-100);
+ --pf-v5-c-button--m-secondary--hover--Color: var(--pf-v5-global--Color--light-100);
+ --pf-v5-c-button--m-secondary--focus--Color: var(--pf-v5-global--Color--light-100);
+ --pf-v5-c-button--m-secondary--active--Color: var(--pf-v5-global--Color--light-100);
+ --pf-v5-c-button--m-secondary--BorderColor: var(--pf-v5-global--Color--light-100);
+ --pf-v5-c-button--m-secondary--hover--BorderColor: var(--pf-v5-global--Color--light-100);
+ --pf-v5-c-button--m-secondary--focus--BorderColor: var(--pf-v5-global--Color--light-100);
+ --pf-v5-c-button--m-secondary--active--BorderColor: var(--pf-v5-global--Color--light-100);
}
:root {
- --pf-global--palette--black-100: #fafafa;
- --pf-global--palette--black-150: #f5f5f5;
- --pf-global--palette--black-200: #f0f0f0;
- --pf-global--palette--black-300: #d2d2d2;
- --pf-global--palette--black-400: #b8bbbe;
- --pf-global--palette--black-500: #8a8d90;
- --pf-global--palette--black-600: #6a6e73;
- --pf-global--palette--black-700: #4f5255;
- --pf-global--palette--black-800: #3c3f42;
- --pf-global--palette--black-850: #212427;
- --pf-global--palette--black-900: #151515;
- --pf-global--palette--black-1000: #030303;
- --pf-global--palette--blue-50: #e7f1fa;
- --pf-global--palette--blue-100: #bee1f4;
- --pf-global--palette--blue-200: #73bcf7;
- --pf-global--palette--blue-300: #2b9af3;
- --pf-global--palette--blue-400: #06c;
- --pf-global--palette--blue-500: #004080;
- --pf-global--palette--blue-600: #002952;
- --pf-global--palette--blue-700: #001223;
- --pf-global--palette--cyan-50: #f2f9f9;
- --pf-global--palette--cyan-100: #a2d9d9;
- --pf-global--palette--cyan-200: #73c5c5;
- --pf-global--palette--cyan-300: #009596;
- --pf-global--palette--cyan-400: #005f60;
- --pf-global--palette--cyan-500: #003737;
- --pf-global--palette--cyan-600: #002323;
- --pf-global--palette--cyan-700: #000f0f;
- --pf-global--palette--gold-50: #fdf7e7;
- --pf-global--palette--gold-100: #f9e0a2;
- --pf-global--palette--gold-200: #f6d173;
- --pf-global--palette--gold-300: #f4c145;
- --pf-global--palette--gold-400: #f0ab00;
- --pf-global--palette--gold-500: #c58c00;
- --pf-global--palette--gold-600: #795600;
- --pf-global--palette--gold-700: #3d2c00;
- --pf-global--palette--green-50: #f3faf2;
- --pf-global--palette--green-100: #bde5b8;
- --pf-global--palette--green-200: #95d58e;
- --pf-global--palette--green-300: #6ec664;
- --pf-global--palette--green-400: #5ba352;
- --pf-global--palette--green-500: #3e8635;
- --pf-global--palette--green-600: #1e4f18;
- --pf-global--palette--green-700: #0f280d;
- --pf-global--palette--light-blue-100: #beedf9;
- --pf-global--palette--light-blue-200: #7cdbf3;
- --pf-global--palette--light-blue-300: #35caed;
- --pf-global--palette--light-blue-400: #00b9e4;
- --pf-global--palette--light-blue-500: #008bad;
- --pf-global--palette--light-blue-600: #005c73;
- --pf-global--palette--light-blue-700: #002d39;
- --pf-global--palette--light-green-100: #e4f5bc;
- --pf-global--palette--light-green-200: #c8eb79;
- --pf-global--palette--light-green-300: #ace12e;
- --pf-global--palette--light-green-400: #92d400;
- --pf-global--palette--light-green-500: #6ca100;
- --pf-global--palette--light-green-600: #486b00;
- --pf-global--palette--light-green-700: #253600;
- --pf-global--palette--orange-100: #f4b678;
- --pf-global--palette--orange-200: #ef9234;
- --pf-global--palette--orange-300: #ec7a08;
- --pf-global--palette--orange-400: #c46100;
- --pf-global--palette--orange-500: #8f4700;
- --pf-global--palette--orange-600: #773d00;
- --pf-global--palette--orange-700: #3b1f00;
- --pf-global--palette--purple-50: #f2f0fc;
- --pf-global--palette--purple-100: #cbc1ff;
- --pf-global--palette--purple-200: #b2a3ff;
- --pf-global--palette--purple-300: #a18fff;
- --pf-global--palette--purple-400: #8476d1;
- --pf-global--palette--purple-500: #6753ac;
- --pf-global--palette--purple-600: #40199a;
- --pf-global--palette--purple-700: #1f0066;
- --pf-global--palette--red-50: #faeae8;
- --pf-global--palette--red-100: #c9190b;
- --pf-global--palette--red-200: #a30000;
- --pf-global--palette--red-300: #7d1007;
- --pf-global--palette--red-400: #470000;
- --pf-global--palette--red-500: #2c0000;
- --pf-global--palette--white: #fff;
- --pf-global--BackgroundColor--100: #fff;
- --pf-global--BackgroundColor--200: #f0f0f0;
- --pf-global--BackgroundColor--light-100: #fff;
- --pf-global--BackgroundColor--light-200: #fafafa;
- --pf-global--BackgroundColor--light-300: #f0f0f0;
- --pf-global--BackgroundColor--dark-100: #151515;
- --pf-global--BackgroundColor--dark-200: #3c3f42;
- --pf-global--BackgroundColor--dark-300: #212427;
- --pf-global--BackgroundColor--dark-400: #4f5255;
- --pf-global--BackgroundColor--dark-transparent-100: rgba(3, 3, 3, 0.62);
- --pf-global--BackgroundColor--dark-transparent-200: rgba(3, 3, 3, 0.32);
- --pf-global--Color--100: #151515;
- --pf-global--Color--200: #6a6e73;
- --pf-global--Color--300: #3c3f42;
- --pf-global--Color--400: #8a8d90;
- --pf-global--Color--light-100: #fff;
- --pf-global--Color--light-200: #f0f0f0;
- --pf-global--Color--light-300: #d2d2d2;
- --pf-global--Color--dark-100: #151515;
- --pf-global--Color--dark-200: #6a6e73;
- --pf-global--active-color--100: #06c;
- --pf-global--active-color--200: #bee1f4;
- --pf-global--active-color--300: #2b9af3;
- --pf-global--active-color--400: #73bcf7;
- --pf-global--disabled-color--100: #6a6e73;
- --pf-global--disabled-color--200: #d2d2d2;
- --pf-global--disabled-color--300: #f0f0f0;
- --pf-global--primary-color--100: #06c;
- --pf-global--primary-color--200: #004080;
- --pf-global--primary-color--light-100: #73bcf7;
- --pf-global--primary-color--dark-100: #06c;
- --pf-global--secondary-color--100: #6a6e73;
- --pf-global--default-color--100: #73c5c5;
- --pf-global--default-color--200: #009596;
- --pf-global--default-color--300: #003737;
- --pf-global--success-color--100: #3e8635;
- --pf-global--success-color--200: #1e4f18;
- --pf-global--info-color--100: #2b9af3;
- --pf-global--info-color--200: #002952;
- --pf-global--warning-color--100: #f0ab00;
- --pf-global--warning-color--200: #795600;
- --pf-global--danger-color--100: #c9190b;
- --pf-global--danger-color--200: #a30000;
- --pf-global--danger-color--300: #470000;
- --pf-global--BoxShadow--sm: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06);
- --pf-global--BoxShadow--sm-top: 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
- --pf-global--BoxShadow--sm-right: 0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
- --pf-global--BoxShadow--sm-bottom: 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
- --pf-global--BoxShadow--sm-left: -0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
- --pf-global--BoxShadow--md: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06);
- --pf-global--BoxShadow--md-top: 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
- --pf-global--BoxShadow--md-right: 0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
- --pf-global--BoxShadow--md-bottom: 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
- --pf-global--BoxShadow--md-left: -0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
- --pf-global--BoxShadow--lg: 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08);
- --pf-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
- --pf-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
- --pf-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
- --pf-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
- --pf-global--BoxShadow--xl: 0 1rem 2rem 0 rgba(3, 3, 3, 0.16), 0 0 0.5rem 0 rgba(3, 3, 3, 0.1);
- --pf-global--BoxShadow--xl-top: 0 -1rem 1rem -0.5rem rgba(3, 3, 3, 0.2);
- --pf-global--BoxShadow--xl-right: 1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.2);
- --pf-global--BoxShadow--xl-bottom: 0 1rem 1rem -0.5rem rgba(3, 3, 3, 0.2);
- --pf-global--BoxShadow--xl-left: -1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.2);
- --pf-global--BoxShadow--inset: inset 0 0 0.625rem 0 rgba(3, 3, 3, 0.25);
- --pf-global--spacer--xs: 0.25rem;
- --pf-global--spacer--sm: 0.5rem;
- --pf-global--spacer--md: 1rem;
- --pf-global--spacer--lg: 1.5rem;
- --pf-global--spacer--xl: 2rem;
- --pf-global--spacer--2xl: 3rem;
- --pf-global--spacer--3xl: 4rem;
- --pf-global--spacer--4xl: 5rem;
- --pf-global--spacer--form-element: 0.375rem;
- --pf-global--gutter: 1rem;
- --pf-global--gutter--md: 1.5rem;
- --pf-global--ZIndex--xs: 100;
- --pf-global--ZIndex--sm: 200;
- --pf-global--ZIndex--md: 300;
- --pf-global--ZIndex--lg: 400;
- --pf-global--ZIndex--xl: 500;
- --pf-global--ZIndex--2xl: 600;
- --pf-global--breakpoint--xs: 0;
- --pf-global--breakpoint--sm: 576px;
- --pf-global--breakpoint--md: 768px;
- --pf-global--breakpoint--lg: 992px;
- --pf-global--breakpoint--xl: 1200px;
- --pf-global--breakpoint--2xl: 1450px;
- --pf-global--link--Color: #06c;
- --pf-global--link--Color--hover: #004080;
- --pf-global--link--Color--light: #2b9af3;
- --pf-global--link--Color--light--hover: #73bcf7;
- --pf-global--link--Color--dark: #06c;
- --pf-global--link--Color--dark--hover: #004080;
- --pf-global--link--Color--visited: #40199a;
- --pf-global--link--TextDecoration: none;
- --pf-global--link--TextDecoration--hover: underline;
- --pf-global--BorderWidth--sm: 1px;
- --pf-global--BorderWidth--md: 2px;
- --pf-global--BorderWidth--lg: 3px;
- --pf-global--BorderWidth--xl: 4px;
- --pf-global--BorderColor--100: #d2d2d2;
- --pf-global--BorderColor--200: #8a8d90;
- --pf-global--BorderColor--300: #f0f0f0;
- --pf-global--BorderColor--dark-100: #d2d2d2;
- --pf-global--BorderColor--light-100: #b8bbbe;
- --pf-global--BorderRadius--sm: 3px;
- --pf-global--BorderRadius--lg: 30em;
- --pf-global--icon--Color--light: #6a6e73;
- --pf-global--icon--Color--dark: #151515;
- --pf-global--icon--FontSize--sm: 0.625rem;
- --pf-global--icon--FontSize--md: 1.125rem;
- --pf-global--icon--FontSize--lg: 1.5rem;
- --pf-global--icon--FontSize--xl: 3.375rem;
- --pf-global--FontFamily--sans-serif: "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
- --pf-global--FontFamily--heading--sans-serif: "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif;
- --pf-global--FontFamily--monospace: "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New",
+ --pf-v5-global--palette--black-100: #fafafa;
+ --pf-v5-global--palette--black-150: #f5f5f5;
+ --pf-v5-global--palette--black-200: #f0f0f0;
+ --pf-v5-global--palette--black-300: #d2d2d2;
+ --pf-v5-global--palette--black-400: #b8bbbe;
+ --pf-v5-global--palette--black-500: #8a8d90;
+ --pf-v5-global--palette--black-600: #6a6e73;
+ --pf-v5-global--palette--black-700: #4f5255;
+ --pf-v5-global--palette--black-800: #3c3f42;
+ --pf-v5-global--palette--black-850: #212427;
+ --pf-v5-global--palette--black-900: #151515;
+ --pf-v5-global--palette--black-1000: #030303;
+ --pf-v5-global--palette--blue-50: #e7f1fa;
+ --pf-v5-global--palette--blue-100: #bee1f4;
+ --pf-v5-global--palette--blue-200: #73bcf7;
+ --pf-v5-global--palette--blue-300: #2b9af3;
+ --pf-v5-global--palette--blue-400: #06c;
+ --pf-v5-global--palette--blue-500: #004080;
+ --pf-v5-global--palette--blue-600: #002952;
+ --pf-v5-global--palette--blue-700: #001223;
+ --pf-v5-global--palette--cyan-50: #f2f9f9;
+ --pf-v5-global--palette--cyan-100: #a2d9d9;
+ --pf-v5-global--palette--cyan-200: #73c5c5;
+ --pf-v5-global--palette--cyan-300: #009596;
+ --pf-v5-global--palette--cyan-400: #005f60;
+ --pf-v5-global--palette--cyan-500: #003737;
+ --pf-v5-global--palette--cyan-600: #002323;
+ --pf-v5-global--palette--cyan-700: #000f0f;
+ --pf-v5-global--palette--gold-50: #fdf7e7;
+ --pf-v5-global--palette--gold-100: #f9e0a2;
+ --pf-v5-global--palette--gold-200: #f6d173;
+ --pf-v5-global--palette--gold-300: #f4c145;
+ --pf-v5-global--palette--gold-400: #f0ab00;
+ --pf-v5-global--palette--gold-500: #c58c00;
+ --pf-v5-global--palette--gold-600: #795600;
+ --pf-v5-global--palette--gold-700: #3d2c00;
+ --pf-v5-global--palette--green-50: #f3faf2;
+ --pf-v5-global--palette--green-100: #bde5b8;
+ --pf-v5-global--palette--green-200: #95d58e;
+ --pf-v5-global--palette--green-300: #6ec664;
+ --pf-v5-global--palette--green-400: #5ba352;
+ --pf-v5-global--palette--green-500: #3e8635;
+ --pf-v5-global--palette--green-600: #1e4f18;
+ --pf-v5-global--palette--green-700: #0f280d;
+ --pf-v5-global--palette--light-blue-100: #beedf9;
+ --pf-v5-global--palette--light-blue-200: #7cdbf3;
+ --pf-v5-global--palette--light-blue-300: #35caed;
+ --pf-v5-global--palette--light-blue-400: #00b9e4;
+ --pf-v5-global--palette--light-blue-500: #008bad;
+ --pf-v5-global--palette--light-blue-600: #005c73;
+ --pf-v5-global--palette--light-blue-700: #002d39;
+ --pf-v5-global--palette--light-green-100: #e4f5bc;
+ --pf-v5-global--palette--light-green-200: #c8eb79;
+ --pf-v5-global--palette--light-green-300: #ace12e;
+ --pf-v5-global--palette--light-green-400: #92d400;
+ --pf-v5-global--palette--light-green-500: #6ca100;
+ --pf-v5-global--palette--light-green-600: #486b00;
+ --pf-v5-global--palette--light-green-700: #253600;
+ --pf-v5-global--palette--orange-100: #f4b678;
+ --pf-v5-global--palette--orange-200: #ef9234;
+ --pf-v5-global--palette--orange-300: #ec7a08;
+ --pf-v5-global--palette--orange-400: #c46100;
+ --pf-v5-global--palette--orange-500: #8f4700;
+ --pf-v5-global--palette--orange-600: #773d00;
+ --pf-v5-global--palette--orange-700: #3b1f00;
+ --pf-v5-global--palette--purple-50: #f2f0fc;
+ --pf-v5-global--palette--purple-100: #cbc1ff;
+ --pf-v5-global--palette--purple-200: #b2a3ff;
+ --pf-v5-global--palette--purple-300: #a18fff;
+ --pf-v5-global--palette--purple-400: #8476d1;
+ --pf-v5-global--palette--purple-500: #6753ac;
+ --pf-v5-global--palette--purple-600: #40199a;
+ --pf-v5-global--palette--purple-700: #1f0066;
+ --pf-v5-global--palette--red-50: #faeae8;
+ --pf-v5-global--palette--red-100: #c9190b;
+ --pf-v5-global--palette--red-200: #a30000;
+ --pf-v5-global--palette--red-300: #7d1007;
+ --pf-v5-global--palette--red-400: #470000;
+ --pf-v5-global--palette--red-500: #2c0000;
+ --pf-v5-global--palette--white: #fff;
+ --pf-v5-global--BackgroundColor--100: #fff;
+ --pf-v5-global--BackgroundColor--200: #f0f0f0;
+ --pf-v5-global--BackgroundColor--light-100: #fff;
+ --pf-v5-global--BackgroundColor--light-200: #fafafa;
+ --pf-v5-global--BackgroundColor--light-300: #f0f0f0;
+ --pf-v5-global--BackgroundColor--dark-100: #151515;
+ --pf-v5-global--BackgroundColor--dark-200: #3c3f42;
+ --pf-v5-global--BackgroundColor--dark-300: #212427;
+ --pf-v5-global--BackgroundColor--dark-400: #4f5255;
+ --pf-v5-global--BackgroundColor--dark-transparent-100: rgba(3, 3, 3, 0.62);
+ --pf-v5-global--BackgroundColor--dark-transparent-200: rgba(3, 3, 3, 0.32);
+ --pf-v5-global--Color--100: #151515;
+ --pf-v5-global--Color--200: #6a6e73;
+ --pf-v5-global--Color--300: #3c3f42;
+ --pf-v5-global--Color--400: #8a8d90;
+ --pf-v5-global--Color--light-100: #fff;
+ --pf-v5-global--Color--light-200: #f0f0f0;
+ --pf-v5-global--Color--light-300: #d2d2d2;
+ --pf-v5-global--Color--dark-100: #151515;
+ --pf-v5-global--Color--dark-200: #6a6e73;
+ --pf-v5-global--active-color--100: #06c;
+ --pf-v5-global--active-color--200: #bee1f4;
+ --pf-v5-global--active-color--300: #2b9af3;
+ --pf-v5-global--active-color--400: #73bcf7;
+ --pf-v5-global--disabled-color--100: #6a6e73;
+ --pf-v5-global--disabled-color--200: #d2d2d2;
+ --pf-v5-global--disabled-color--300: #f0f0f0;
+ --pf-v5-global--primary-color--100: #06c;
+ --pf-v5-global--primary-color--200: #004080;
+ --pf-v5-global--primary-color--light-100: #73bcf7;
+ --pf-v5-global--primary-color--dark-100: #06c;
+ --pf-v5-global--secondary-color--100: #6a6e73;
+ --pf-v5-global--default-color--100: #73c5c5;
+ --pf-v5-global--default-color--200: #009596;
+ --pf-v5-global--default-color--300: #003737;
+ --pf-v5-global--success-color--100: #3e8635;
+ --pf-v5-global--success-color--200: #1e4f18;
+ --pf-v5-global--info-color--100: #2b9af3;
+ --pf-v5-global--info-color--200: #002952;
+ --pf-v5-global--warning-color--100: #f0ab00;
+ --pf-v5-global--warning-color--200: #795600;
+ --pf-v5-global--danger-color--100: #c9190b;
+ --pf-v5-global--danger-color--200: #a30000;
+ --pf-v5-global--danger-color--300: #470000;
+ --pf-v5-global--BoxShadow--sm: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06);
+ --pf-v5-global--BoxShadow--sm-top: 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
+ --pf-v5-global--BoxShadow--sm-right: 0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
+ --pf-v5-global--BoxShadow--sm-bottom: 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
+ --pf-v5-global--BoxShadow--sm-left: -0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
+ --pf-v5-global--BoxShadow--md: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06);
+ --pf-v5-global--BoxShadow--md-top: 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
+ --pf-v5-global--BoxShadow--md-right: 0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
+ --pf-v5-global--BoxShadow--md-bottom: 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
+ --pf-v5-global--BoxShadow--md-left: -0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
+ --pf-v5-global--BoxShadow--lg: 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08);
+ --pf-v5-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
+ --pf-v5-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
+ --pf-v5-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
+ --pf-v5-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
+ --pf-v5-global--BoxShadow--xl: 0 1rem 2rem 0 rgba(3, 3, 3, 0.16), 0 0 0.5rem 0 rgba(3, 3, 3, 0.1);
+ --pf-v5-global--BoxShadow--xl-top: 0 -1rem 1rem -0.5rem rgba(3, 3, 3, 0.2);
+ --pf-v5-global--BoxShadow--xl-right: 1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.2);
+ --pf-v5-global--BoxShadow--xl-bottom: 0 1rem 1rem -0.5rem rgba(3, 3, 3, 0.2);
+ --pf-v5-global--BoxShadow--xl-left: -1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.2);
+ --pf-v5-global--BoxShadow--inset: inset 0 0 0.625rem 0 rgba(3, 3, 3, 0.25);
+ --pf-v5-global--spacer--xs: 0.25rem;
+ --pf-v5-global--spacer--sm: 0.5rem;
+ --pf-v5-global--spacer--md: 1rem;
+ --pf-v5-global--spacer--lg: 1.5rem;
+ --pf-v5-global--spacer--xl: 2rem;
+ --pf-v5-global--spacer--2xl: 3rem;
+ --pf-v5-global--spacer--3xl: 4rem;
+ --pf-v5-global--spacer--4xl: 5rem;
+ --pf-v5-global--spacer--form-element: 0.375rem;
+ --pf-v5-global--gutter: 1rem;
+ --pf-v5-global--gutter--md: 1.5rem;
+ --pf-v5-global--ZIndex--xs: 100;
+ --pf-v5-global--ZIndex--sm: 200;
+ --pf-v5-global--ZIndex--md: 300;
+ --pf-v5-global--ZIndex--lg: 400;
+ --pf-v5-global--ZIndex--xl: 500;
+ --pf-v5-global--ZIndex--2xl: 600;
+ --pf-v5-global--breakpoint--xs: 0;
+ --pf-v5-global--breakpoint--sm: 576px;
+ --pf-v5-global--breakpoint--md: 768px;
+ --pf-v5-global--breakpoint--lg: 992px;
+ --pf-v5-global--breakpoint--xl: 1200px;
+ --pf-v5-global--breakpoint--2xl: 1450px;
+ --pf-v5-global--link--Color: #06c;
+ --pf-v5-global--link--Color--hover: #004080;
+ --pf-v5-global--link--Color--light: #2b9af3;
+ --pf-v5-global--link--Color--light--hover: #73bcf7;
+ --pf-v5-global--link--Color--dark: #06c;
+ --pf-v5-global--link--Color--dark--hover: #004080;
+ --pf-v5-global--link--Color--visited: #40199a;
+ --pf-v5-global--link--TextDecoration: none;
+ --pf-v5-global--link--TextDecoration--hover: underline;
+ --pf-v5-global--BorderWidth--sm: 1px;
+ --pf-v5-global--BorderWidth--md: 2px;
+ --pf-v5-global--BorderWidth--lg: 3px;
+ --pf-v5-global--BorderWidth--xl: 4px;
+ --pf-v5-global--BorderColor--100: #d2d2d2;
+ --pf-v5-global--BorderColor--200: #8a8d90;
+ --pf-v5-global--BorderColor--300: #f0f0f0;
+ --pf-v5-global--BorderColor--dark-100: #d2d2d2;
+ --pf-v5-global--BorderColor--light-100: #b8bbbe;
+ --pf-v5-global--BorderRadius--sm: 3px;
+ --pf-v5-global--BorderRadius--lg: 30em;
+ --pf-v5-global--icon--Color--light: #6a6e73;
+ --pf-v5-global--icon--Color--dark: #151515;
+ --pf-v5-global--icon--FontSize--sm: 0.625rem;
+ --pf-v5-global--icon--FontSize--md: 1.125rem;
+ --pf-v5-global--icon--FontSize--lg: 1.5rem;
+ --pf-v5-global--icon--FontSize--xl: 3.375rem;
+ --pf-v5-global--FontFamily--sans-serif: "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
+ --pf-v5-global--FontFamily--heading--sans-serif: "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif;
+ --pf-v5-global--FontFamily--monospace: "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New",
monospace;
- --pf-global--FontFamily--overpass--sans-serif: "overpass", overpass, "open sans", -apple-system, blinkmacsystemfont,
+ --pf-v5-global--FontFamily--overpass--sans-serif: "overpass", overpass, "open sans", -apple-system, blinkmacsystemfont,
"Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
- --pf-global--FontFamily--overpass--monospace: "overpass-mono", overpass-mono, "SFMono-Regular", menlo, monaco,
+ --pf-v5-global--FontFamily--overpass--monospace: "overpass-mono", overpass-mono, "SFMono-Regular", menlo, monaco,
consolas, "Liberation Mono", "Courier New", monospace;
- --pf-global--FontSize--4xl: 2.25rem;
- --pf-global--FontSize--3xl: 1.75rem;
- --pf-global--FontSize--2xl: 1.5rem;
- --pf-global--FontSize--xl: 1.25rem;
- --pf-global--FontSize--lg: 1.125rem;
- --pf-global--FontSize--md: 1rem;
- --pf-global--FontSize--sm: 0.875rem;
- --pf-global--FontSize--xs: 0.75rem;
- --pf-global--FontWeight--light: 300;
- --pf-global--FontWeight--normal: 400;
- --pf-global--FontWeight--semi-bold: 700;
- --pf-global--FontWeight--overpass--semi-bold: 500;
- --pf-global--FontWeight--bold: 700;
- --pf-global--FontWeight--overpass--bold: 600;
- --pf-global--LineHeight--sm: 1.3;
- --pf-global--LineHeight--md: 1.5;
- --pf-global--ListStyle: disc outside;
- --pf-global--Transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
- --pf-global--TimingFunction: cubic-bezier(0.645, 0.045, 0.355, 1);
- --pf-global--TransitionDuration: 250ms;
- --pf-global--arrow--width: 0.9375rem;
- --pf-global--arrow--width-lg: 1.5625rem;
- --pf-global--target-size--MinWidth: 44px;
- --pf-global--target-size--MinHeight: 44px;
+ --pf-v5-global--FontSize--4xl: 2.25rem;
+ --pf-v5-global--FontSize--3xl: 1.75rem;
+ --pf-v5-global--FontSize--2xl: 1.5rem;
+ --pf-v5-global--FontSize--xl: 1.25rem;
+ --pf-v5-global--FontSize--lg: 1.125rem;
+ --pf-v5-global--FontSize--md: 1rem;
+ --pf-v5-global--FontSize--sm: 0.875rem;
+ --pf-v5-global--FontSize--xs: 0.75rem;
+ --pf-v5-global--FontWeight--light: 300;
+ --pf-v5-global--FontWeight--normal: 400;
+ --pf-v5-global--FontWeight--semi-bold: 700;
+ --pf-v5-global--FontWeight--overpass--semi-bold: 500;
+ --pf-v5-global--FontWeight--bold: 700;
+ --pf-v5-global--FontWeight--overpass--bold: 600;
+ --pf-v5-global--LineHeight--sm: 1.3;
+ --pf-v5-global--LineHeight--md: 1.5;
+ --pf-v5-global--ListStyle: disc outside;
+ --pf-v5-global--Transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
+ --pf-v5-global--TimingFunction: cubic-bezier(0.645, 0.045, 0.355, 1);
+ --pf-v5-global--TransitionDuration: 250ms;
+ --pf-v5-global--arrow--width: 0.9375rem;
+ --pf-v5-global--arrow--width-lg: 1.5625rem;
+ --pf-v5-global--target-size--MinWidth: 44px;
+ --pf-v5-global--target-size--MinHeight: 44px;
}
.boxed-expression-provider .pf-m-overpass-font {
- --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--overpass--sans-serif);
- --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--sans-serif);
- --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--overpass--monospace);
- --pf-global--FontWeight--semi-bold: var(--pf-global--FontWeight--overpass--semi-bold);
- --pf-global--FontWeight--bold: var(--pf-global--FontWeight--overpass--bold);
+ --pf-v5-global--FontFamily--sans-serif: var(--pf-v5-global--FontFamily--overpass--sans-serif);
+ --pf-v5-global--FontFamily--heading--sans-serif: var(--pf-v5-global--FontFamily--sans-serif);
+ --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--overpass--monospace);
+ --pf-v5-global--FontWeight--semi-bold: var(--pf-v5-global--FontWeight--overpass--semi-bold);
+ --pf-v5-global--FontWeight--bold: var(--pf-v5-global--FontWeight--overpass--bold);
}
html {
diff --git a/packages/boxed-expression-component/src/contextMenu/MenuWithHelp/MenuWithHelp.css b/packages/boxed-expression-component/src/contextMenu/MenuWithHelp/MenuWithHelp.css
index 0bc535bb6e2..abde4654548 100644
--- a/packages/boxed-expression-component/src/contextMenu/MenuWithHelp/MenuWithHelp.css
+++ b/packages/boxed-expression-component/src/contextMenu/MenuWithHelp/MenuWithHelp.css
@@ -17,23 +17,23 @@
* under the License.
*/
-.menu-item-with-help .pf-c-menu__item {
+.menu-item-with-help .pf-v5-c-menu__item {
min-height: 40px;
}
-.menu-item-with-help .pf-c-menu__item-description {
+.menu-item-with-help .pf-v5-c-menu__item-description {
font-size: 10px;
word-break: keep-all;
}
-.menu-item-with-help .pf-c-menu__item-action {
- color: var(--pf-global--info-color--100);
+.menu-item-with-help .pf-v5-c-menu__item-action {
+ color: var(--pf-v5-global--info-color--100);
}
-.menu-item-with-help .pf-c-menu__item-action:hover {
- background-color: var(--pf-global--palette--black-400);
+.menu-item-with-help .pf-v5-c-menu__item-action:hover {
+ background-color: var(--pf-v5-global--palette--black-400);
}
-.menu-with-help .pf-c-menu__group-title {
+.menu-with-help .pf-v5-c-menu__group-title {
padding-bottom: 10px;
}
diff --git a/packages/boxed-expression-component/src/contextMenu/PopoverMenu/PopoverMenu.css b/packages/boxed-expression-component/src/contextMenu/PopoverMenu/PopoverMenu.css
index f155ce33106..9d405877478 100644
--- a/packages/boxed-expression-component/src/contextMenu/PopoverMenu/PopoverMenu.css
+++ b/packages/boxed-expression-component/src/contextMenu/PopoverMenu/PopoverMenu.css
@@ -17,21 +17,21 @@
* under the License.
*/
-.popover-menu-selector .pf-c-popover__content > .pf-c-button {
+.popover-menu-selector .pf-v5-c-popover__content .pf-v5-c-popover__close > .pf-v5-c-button {
display: none;
}
-.popover-menu-selector .pf-c-popover__content,
-.popover-menu-selector .pf-c-title,
-.popover-menu-selector .pf-c-popover__content > .pf-c-button + * {
+.popover-menu-selector .pf-v5-c-popover__content,
+.popover-menu-selector .pf-v5-c-popover__title,
+.popover-menu-selector .pf-v5-c-popover__content > .pf-v5-c-button + * {
padding: 0;
text-align: left;
}
-.popover-menu-selector .pf-c-popover__content {
+.popover-menu-selector .pf-v5-c-popover__content {
padding-bottom: 16px;
}
-.popover-menu-selector .pf-c-title .selector-menu-title {
+.popover-menu-selector .pf-v5-c-popover__title .selector-menu-title {
border-bottom: none;
border-radius: 0;
color: #4d5258;
@@ -41,8 +41,8 @@
text-align: center;
}
-.popover-menu-selector .pf-c-title .selector-menu-title,
-.popover-menu-selector .pf-c-menu__item-text {
+.popover-menu-selector .pf-v5-c-popover__title .selector-menu-title,
+.popover-menu-selector .pf-v5-c-menu__item-text {
font-size: var(--small-font-size);
font-style: normal;
}
diff --git a/packages/boxed-expression-component/src/contextMenu/PopoverMenu/PopoverMenu.tsx b/packages/boxed-expression-component/src/contextMenu/PopoverMenu/PopoverMenu.tsx
index b0e813aa98a..d3b79a31b3a 100644
--- a/packages/boxed-expression-component/src/contextMenu/PopoverMenu/PopoverMenu.tsx
+++ b/packages/boxed-expression-component/src/contextMenu/PopoverMenu/PopoverMenu.tsx
@@ -82,7 +82,7 @@ export const PopoverMenu = React.forwardRef(
appendTo,
className,
hasAutoWidth,
- minWidth,
+ minWidth = `var(--pf-v5-c-popover--MinWidth)`,
onHide = () => {},
onCancel = () => {},
onShown = () => {},
@@ -102,12 +102,12 @@ export const PopoverMenu = React.forwardRef(
onShown();
}, [setCurrentlyOpenContextMenu, id, onShown]);
- const shouldOpen: PopoverProps["shouldOpen"] = useCallback((showFunction) => {
+ const shouldOpen: PopoverProps["shouldOpen"] = useCallback((_event, showFunction) => {
showFunction?.();
}, []);
const shouldClose: PopoverProps["shouldClose"] = useCallback(
- (tip, hideFunction, event): void => {
+ (event, hideFunction): void => {
if (event instanceof KeyboardEvent && NavigationKeysUtils.isEsc(event.key)) {
onCancel(event);
} else {
@@ -168,7 +168,7 @@ export const PopoverMenu = React.forwardRef(
minWidth={minWidth}
position={popupPosition}
distance={distance ?? 0}
- reference={arrowPlacement}
+ triggerRef={arrowPlacement}
appendTo={appendTo}
// Need this 1px to render something and not break it.
headerContent={<div style={{ height: "1px" }}></div>}
diff --git a/packages/boxed-expression-component/src/expressionVariable/DataTypeSelector.tsx b/packages/boxed-expression-component/src/expressionVariable/DataTypeSelector.tsx
index a8d5910b2af..cc947c86fcf 100644
--- a/packages/boxed-expression-component/src/expressionVariable/DataTypeSelector.tsx
+++ b/packages/boxed-expression-component/src/expressionVariable/DataTypeSelector.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
-import { Select, SelectGroup, SelectOption, SelectVariant } from "@patternfly/react-core/dist/js/components/Select";
+import { Select, SelectGroup, SelectOption, SelectVariant } from "@patternfly/react-core/deprecated";
import * as React from "react";
import { useCallback, useMemo, useRef, useState } from "react";
import { useBoxedExpressionEditorI18n } from "../i18n";
diff --git a/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableCell.tsx b/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableCell.tsx
index c02f2fae758..acff3db4065 100644
--- a/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableCell.tsx
+++ b/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableCell.tsx
@@ -149,7 +149,7 @@ export const ExpressionVariableCell: React.FunctionComponent<
() => (
<div className={`expression-info with-popover-menu`} ref={ref}>
<p
- className="expression-info-name pf-u-text-truncate"
+ className="expression-info-name pf-v5-u-text-truncate"
title={variable["@_name"]}
data-ouia-component-id={"expression-info-name"}
data-testid={"kie-tools--bee--expression-info-name"}
@@ -157,7 +157,7 @@ export const ExpressionVariableCell: React.FunctionComponent<
{variable["@_name"]}
</p>
<p
- className="expression-info-data-type pf-u-text-truncate"
+ className="expression-info-data-type pf-v5-u-text-truncate"
title={variable["@_typeRef"] ?? DmnBuiltInDataType.Undefined}
data-ouia-component-id={"expression-info-data-type"}
data-testid={"kie-tools--bee--expression-info-data-type"}
diff --git a/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableMenu.tsx b/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableMenu.tsx
index 0a726e2f176..428d5d52a84 100644
--- a/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableMenu.tsx
+++ b/packages/boxed-expression-component/src/expressionVariable/ExpressionVariableMenu.tsx
@@ -216,7 +216,7 @@ export function ExpressionVariableMenu({
value={expressionName}
onChange={onExpressionNameChange}
onBlur={onExpressionNameChange}
- className="form-control pf-c-form-control"
+ className="form-control pf-v5-c-form-control"
placeholder={DEFAULT_EXPRESSION_VARIABLE_NAME}
onKeyDown={onKeyDown}
/>
diff --git a/packages/boxed-expression-component/src/expressionVariable/FeelInputTextbox.css b/packages/boxed-expression-component/src/expressionVariable/FeelInputTextbox.css
index df0a824c163..9d5856403cf 100644
--- a/packages/boxed-expression-component/src/expressionVariable/FeelInputTextbox.css
+++ b/packages/boxed-expression-component/src/expressionVariable/FeelInputTextbox.css
@@ -19,6 +19,11 @@
.feel-input-textbox {
overflow: hidden;
+ height: 36px;
+ padding-block-start: var(--pf-v5-c-form-control--PaddingTop);
+ padding-block-end: var(--pf-v5-c-form-control--PaddingBottom);
+ padding-inline-start: var(--pf-v5-c-form-control--PaddingLeft);
+ padding-inline-end: var(--pf-v5-c-form-control--PaddingRight);
}
.feel-input-textbox .feel-input {
diff --git a/packages/boxed-expression-component/src/expressionVariable/FeelInputTextbox.tsx b/packages/boxed-expression-component/src/expressionVariable/FeelInputTextbox.tsx
index 2dbf7e2b2e8..6598585bdd0 100644
--- a/packages/boxed-expression-component/src/expressionVariable/FeelInputTextbox.tsx
+++ b/packages/boxed-expression-component/src/expressionVariable/FeelInputTextbox.tsx
@@ -95,7 +95,7 @@ export function FeelInputTextbox({ value, onChange, expressionId }: FeelInputCom
);
return (
- <div className="form-control pf-c-form-control feel-input-textbox">
+ <div className="form-control pf-v5-c-form-control feel-input-textbox">
<FeelInput
ref={feelInputRef}
enabled={true}
diff --git a/packages/boxed-expression-component/src/expressions/ContextExpression/ContextExpression.css b/packages/boxed-expression-component/src/expressions/ContextExpression/ContextExpression.css
index 7af55432a8d..f3de531b08e 100644
--- a/packages/boxed-expression-component/src/expressions/ContextExpression/ContextExpression.css
+++ b/packages/boxed-expression-component/src/expressions/ContextExpression/ContextExpression.css
@@ -22,7 +22,7 @@
}
.expression-container .context-expression .context-result {
- color: var(--pf-global--palette--black-600);
+ color: var(--pf-v5-global--palette--black-600);
font-style: italic;
font-family: Menlo, monospace;
font-size: 0.8em;
diff --git a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/HitPolicySelector.css b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/HitPolicySelector.css
index ab0589b2043..ade17939551 100644
--- a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/HitPolicySelector.css
+++ b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/HitPolicySelector.css
@@ -28,7 +28,7 @@
display: flex;
}
-.hit-policy-flex-container .pf-c-menu {
+.hit-policy-flex-container .pf-v5-c-menu {
box-shadow: none;
width: 240px;
padding-left: 10px;
diff --git a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/HitPolicySelector.tsx b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/HitPolicySelector.tsx
index 53d4d8d97f4..506cf8a96e5 100644
--- a/packages/boxed-expression-component/src/expressions/DecisionTableExpression/HitPolicySelector.tsx
+++ b/packages/boxed-expression-component/src/expressions/DecisionTableExpression/HitPolicySelector.tsx
@@ -193,7 +193,7 @@ export function HitPolicySelector({
{selectedHitPolicy === "COLLECT" && (
<>
- <Divider isVertical={true} />
+ <Divider orientation={{ default: "vertical" }} />
<div className="hit-policy-aggregator-section">
<Menu onSelect={builtInAggregatorSelectionCallback} selected={selectedBuiltInAggregator}>
<MenuGroup className="menu-with-help" label="Aggregator function">
diff --git a/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionLogicTypeSelector.css b/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionLogicTypeSelector.css
index e07ea819568..e3ee8e8eb32 100644
--- a/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionLogicTypeSelector.css
+++ b/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionLogicTypeSelector.css
@@ -50,28 +50,31 @@
.expression-container .logic-type-selector.logic-type-selected .logic-type-selected-header {
color: black;
padding: 0 0 2px 8px;
- border-bottom: 1px solid var(--pf-global--palette--black-500);
- border-top: 1px solid var(--pf-global--palette--black-400);
- border-left: 1px solid var(--pf-global--palette--black-400);
- border-right: 1px solid var(--pf-global--palette--black-400);
+ border-bottom: 1px solid var(--pf-v5-global--palette--black-500);
+ border-top: 1px solid var(--pf-v5-global--palette--black-400);
+ border-left: 1px solid var(--pf-v5-global--palette--black-400);
+ border-right: 1px solid var(--pf-v5-global--palette--black-400);
position: relative;
font-size: 10px;
width: 100%;
height: 20px;
}
-.expression-container .logic-type-selector.logic-type-selected .logic-type-selected-header .pf-c-dropdown__menu {
+.expression-container .logic-type-selector.logic-type-selected .logic-type-selected-header .pf-v5-c-dropdown__menu {
padding: 0;
}
-.expression-container .logic-type-selector.logic-type-selected .logic-type-selected-header .pf-c-dropdown__toggle-icon {
+.expression-container
+ .logic-type-selector.logic-type-selected
+ .logic-type-selected-header
+ .pf-v5-c-dropdown__toggle-icon {
margin-left: 4px;
}
-.logic-type-popover .pf-c-menu {
+.logic-type-popover .pf-v5-c-menu {
width: 300px;
}
-.paste-from-clipboard-error .pf-c-menu__item-description {
- color: var(--pf-global--danger-color--100);
+.paste-from-clipboard-error .pf-v5-c-menu__item-description {
+ color: var(--pf-v5-global--danger-color--100);
}
diff --git a/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionLogicTypeSelector.tsx b/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionLogicTypeSelector.tsx
index dca65168c11..5bb24b2cf2a 100644
--- a/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionLogicTypeSelector.tsx
+++ b/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionLogicTypeSelector.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
-import { Dropdown, DropdownToggle } from "@patternfly/react-core/dist/esm/components/Dropdown";
+import { Dropdown, DropdownToggle } from "@patternfly/react-core/dist/esm/deprecated/components/Dropdown";
import { Divider } from "@patternfly/react-core/dist/js/components/Divider";
import { Menu } from "@patternfly/react-core/dist/js/components/Menu/Menu";
import { MenuGroup } from "@patternfly/react-core/dist/js/components/Menu/MenuGroup";
@@ -59,6 +59,7 @@ import { ConditionalExpression } from "../ConditionalExpression/ConditionalExpre
import { IteratorExpressionComponent } from "../IteratorExpression/IteratorExpressionComponent";
import { FilterExpressionComponent } from "../FilterExpression/FilterExpressionComponent";
import FilterIcon from "@patternfly/react-icons/dist/esm/icons/filter-icon";
+import { Icon } from "@patternfly/react-core/dist/js";
export interface ExpressionDefinitionLogicTypeSelectorProps {
/** Expression properties */
@@ -534,9 +535,13 @@ export function ExpressionDefinitionLogicTypeSelector({
toggle={
<DropdownToggle
data-testid={"kie-tools--bee--expression-header-dropdown"}
- icon={<>{logicTypeIcon(expression.__$$element)}</>}
+ icon={
+ <Icon style={{ marginRight: "5px" }}>
+ <>{logicTypeIcon(expression.__$$element)}</>
+ </Icon>
+ }
style={{ padding: 0 }}
- onToggle={setDropdownOpen}
+ onToggle={(_event, val) => setDropdownOpen(val)}
tabIndex={-1}
>
{getLogicTypeLabel(expression?.__$$element)}
diff --git a/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionRoot.css b/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionRoot.css
index 364f9208f9c..71aaf3bfbea 100644
--- a/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionRoot.css
+++ b/packages/boxed-expression-component/src/expressions/ExpressionDefinitionRoot/ExpressionDefinitionRoot.css
@@ -19,7 +19,7 @@
.expression-container > .expression-container-box {
display: inline-block;
- border: 2px solid var(--pf-global--palette--black-300);
+ border: 2px solid var(--pf-v5-global--palette--black-300);
margin-top: 5px;
}
diff --git a/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpression.css b/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpression.css
index d436886b4da..6ba7cebb423 100644
--- a/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpression.css
+++ b/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpression.css
@@ -23,11 +23,11 @@
}
.filter-expression-cell .bracket-sign-container {
- background-color: var(--pf-global--palette--black-200);
+ background-color: var(--pf-v5-global--palette--black-200);
width: 20px;
min-width: 20px;
max-width: 20px;
- color: var(--pf-global--palette--black-600);
+ color: var(--pf-v5-global--palette--black-600);
font-family: Menlo, monospace;
display: flex;
align-content: center;
diff --git a/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpressionMatchCell.tsx b/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpressionMatchCell.tsx
index 5715a7b2063..a5cbb438378 100644
--- a/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpressionMatchCell.tsx
+++ b/packages/boxed-expression-component/src/expressions/FilterExpression/FilterExpressionMatchCell.tsx
@@ -100,7 +100,7 @@ export function FilterExpressionMatchCell({
<div className={"filter-expression-cell"}>
<div
className={"bracket-sign-container"}
- style={{ borderRight: "1px solid var(--pf-global--palette--black-300)" }}
+ style={{ borderRight: "1px solid var(--pf-v5-global--palette--black-300)" }}
>
<div className={"bracket-sign"}>[</div>
</div>
@@ -122,7 +122,7 @@ export function FilterExpressionMatchCell({
</div>
<div
className={"bracket-sign-container"}
- style={{ borderLeft: "1px solid var(--pf-global--palette--black-300)" }}
+ style={{ borderLeft: "1px solid var(--pf-v5-global--palette--black-300)" }}
>
<div className={"bracket-sign"}>]</div>
</div>
diff --git a/packages/boxed-expression-component/src/expressions/FunctionExpression/FunctionExpression.css b/packages/boxed-expression-component/src/expressions/FunctionExpression/FunctionExpression.css
index d0c608b535d..94aca1955ab 100644
--- a/packages/boxed-expression-component/src/expressions/FunctionExpression/FunctionExpression.css
+++ b/packages/boxed-expression-component/src/expressions/FunctionExpression/FunctionExpression.css
@@ -37,7 +37,7 @@
width: 300px;
}
-.function-kind-popover .pf-c-menu {
+.function-kind-popover .pf-v5-c-menu {
box-shadow: none;
}
diff --git a/packages/boxed-expression-component/src/expressions/FunctionExpression/FunctionExpression.tsx b/packages/boxed-expression-component/src/expressions/FunctionExpression/FunctionExpression.tsx
index fcdf33754fc..7eb7cf0ea62 100644
--- a/packages/boxed-expression-component/src/expressions/FunctionExpression/FunctionExpression.tsx
+++ b/packages/boxed-expression-component/src/expressions/FunctionExpression/FunctionExpression.tsx
@@ -163,7 +163,7 @@ export function useFunctionExpressionParametersColumnHeader(
data-testid="kie-tools--bee--parameters-list"
className={`parameters-list ${_.isEmpty(formalParameters) ? "empty-parameters" : ""}`}
>
- <p className="pf-u-text-truncate">
+ <p className="pf-v5-u-text-truncate">
{_.isEmpty(formalParameters) ? (
i18n.editParameters
) : (
diff --git a/packages/boxed-expression-component/src/expressions/FunctionExpression/JavaFunctionExpression.css b/packages/boxed-expression-component/src/expressions/FunctionExpression/JavaFunctionExpression.css
index 071c13f25c3..f693ccd2be8 100644
--- a/packages/boxed-expression-component/src/expressions/FunctionExpression/JavaFunctionExpression.css
+++ b/packages/boxed-expression-component/src/expressions/FunctionExpression/JavaFunctionExpression.css
@@ -48,11 +48,11 @@
.java-function-expression-label .java-function-parameter-help-icon {
bottom: 10px;
right: 10px;
- color: var(--pf-global--info-color--100);
+ color: var(--pf-v5-global--info-color--100);
cursor: pointer;
position: absolute;
}
-.java-function-parameter-help-popover .pf-c-title {
+.java-function-parameter-help-popover .pf-v5-c-title {
margin-top: 0px;
}
diff --git a/packages/boxed-expression-component/src/expressions/FunctionExpression/JavaFunctionExpression.tsx b/packages/boxed-expression-component/src/expressions/FunctionExpression/JavaFunctionExpression.tsx
index 6ce2242a263..466d6030b47 100644
--- a/packages/boxed-expression-component/src/expressions/FunctionExpression/JavaFunctionExpression.tsx
+++ b/packages/boxed-expression-component/src/expressions/FunctionExpression/JavaFunctionExpression.tsx
@@ -58,6 +58,7 @@ import {
} from "@kie-tools/dmn-marshaller/dist/schemas/dmn-1_5/ts-gen/types";
import "./JavaFunctionExpression.css";
import { useBeeTableSelectableCellRef } from "../../selection/BeeTableSelectionContext";
+import { Icon } from "@patternfly/react-core/dist/js/components/Icon";
export type JAVA_ROWTYPE = {
value: string;
@@ -508,7 +509,9 @@ function JavaFunctionExpressionLabelCell(props: React.PropsWithChildren<BeeTable
headerContent={label + " example"}
bodyContent={getParameterLabelHelp}
>
- <HelpIcon size="sm" className="java-function-parameter-help-icon" />
+ <Icon size="sm">
+ <HelpIcon className="java-function-parameter-help-icon" />
+ </Icon>
</Popover>
)}
</div>
diff --git a/packages/boxed-expression-component/src/expressions/FunctionExpression/ParametersPopover.css b/packages/boxed-expression-component/src/expressions/FunctionExpression/ParametersPopover.css
index f623b0fd19a..fb480e9aa0d 100644
--- a/packages/boxed-expression-component/src/expressions/FunctionExpression/ParametersPopover.css
+++ b/packages/boxed-expression-component/src/expressions/FunctionExpression/ParametersPopover.css
@@ -29,14 +29,14 @@
height: 200px;
overflow-y: scroll;
margin-top: 10px;
- border: 1px solid var(--pf-global--palette--black-300);
+ border: 1px solid var(--pf-v5-global--palette--black-300);
padding: 0 5px 5px 5px;
}
.boxed-expression-provider .parameters-editor-popover .parameters-editor .parameters-container-empty {
overflow: hidden;
margin-top: 10px;
- border: 1px solid var(--pf-global--palette--black-300);
+ border: 1px solid var(--pf-v5-global--palette--black-300);
padding: 0 5px 5px 5px;
}
diff --git a/packages/boxed-expression-component/src/expressions/FunctionExpression/ParametersPopover.tsx b/packages/boxed-expression-component/src/expressions/FunctionExpression/ParametersPopover.tsx
index 3dd25927be5..c28e4fcb093 100644
--- a/packages/boxed-expression-component/src/expressions/FunctionExpression/ParametersPopover.tsx
+++ b/packages/boxed-expression-component/src/expressions/FunctionExpression/ParametersPopover.tsx
@@ -18,8 +18,12 @@
*/
import { Button } from "@patternfly/react-core/dist/js/components/Button";
-import { EmptyState, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
+import {
+ EmptyState,
+ EmptyStateIcon,
+ EmptyStateHeader,
+ EmptyStateFooter,
+} from "@patternfly/react-core/dist/js/components/EmptyState";
import { CubesIcon } from "@patternfly/react-icons/dist/js/icons/cubes-icon";
import { OutlinedTrashAltIcon } from "@patternfly/react-icons/dist/js/icons/outlined-trash-alt-icon";
import * as React from "react";
@@ -86,11 +90,16 @@ export const ParametersPopover: React.FunctionComponent<ParametersPopoverProps>
) : (
<div className="parameters-container-empty">
<EmptyState>
- <EmptyStateIcon icon={CubesIcon} />
- <Title headingLevel="h4">{i18n.noParametersDefined}</Title>
- <Button variant="primary" onClickCapture={addParameter}>
- {i18n.addParameter}
- </Button>
+ <EmptyStateHeader
+ titleText={<>{i18n.noParametersDefined}</>}
+ icon={<EmptyStateIcon icon={CubesIcon} />}
+ headingLevel="h4"
+ />
+ <EmptyStateFooter>
+ <Button variant="primary" onClickCapture={addParameter}>
+ {i18n.addParameter}
+ </Button>
+ </EmptyStateFooter>
</EmptyState>
</div>
)}
diff --git a/packages/boxed-expression-component/src/expressions/FunctionExpression/PmmlFunctionExpression.css b/packages/boxed-expression-component/src/expressions/FunctionExpression/PmmlFunctionExpression.css
index 272b9282e88..35c96985b3b 100644
--- a/packages/boxed-expression-component/src/expressions/FunctionExpression/PmmlFunctionExpression.css
+++ b/packages/boxed-expression-component/src/expressions/FunctionExpression/PmmlFunctionExpression.css
@@ -44,9 +44,9 @@
flex-direction: column;
}
-.pf-c-select.pmml-document-select > button {
+.pf-v5-c-select.pmml-document-select > button {
min-height: 60px;
}
-.pmml-document-select.pf-c-select .pf-c-select__toggle::before {
+.pmml-document-select.pf-v5-c-select .pf-v5-c-select__toggle::before {
border-style: hidden;
}
diff --git a/packages/boxed-expression-component/src/expressions/FunctionExpression/PmmlFunctionExpression.tsx b/packages/boxed-expression-component/src/expressions/FunctionExpression/PmmlFunctionExpression.tsx
index 33da87038be..cb1276720f4 100644
--- a/packages/boxed-expression-component/src/expressions/FunctionExpression/PmmlFunctionExpression.tsx
+++ b/packages/boxed-expression-component/src/expressions/FunctionExpression/PmmlFunctionExpression.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
-import { Select, SelectOption, SelectVariant } from "@patternfly/react-core/dist/js/components/Select";
+import { Select, SelectOption, SelectVariant } from "@patternfly/react-core/deprecated";
import * as React from "react";
import { useCallback, useEffect, useMemo } from "react";
import * as ReactTable from "react-table";
@@ -484,7 +484,7 @@ function PmmlFunctionExpressionDocumentCell(props: React.PropsWithChildren<BeeTa
placeholderText={PMML_BINDING_VALUE_PLACEHOLDER}
aria-placeholder={PMML_BINDING_VALUE_PLACEHOLDER}
variant={SelectVariant.single}
- onToggle={setSelectOpen}
+ onToggle={(_event, val) => setSelectOpen(val)}
onSelect={onSelect}
isOpen={isSelectOpen}
selections={[pmmlDocument]}
@@ -581,7 +581,7 @@ function PmmlFunctionExpressionModelCell(props: React.PropsWithChildren<BeeTable
placeholderText={pmmlDocument ? PMML_BINDING_VALUE_PLACEHOLDER : "Select a document first"}
aria-placeholder={PMML_BINDING_VALUE_PLACEHOLDER}
variant={SelectVariant.single}
- onToggle={setSelectOpen}
+ onToggle={(_event, val) => setSelectOpen(val)}
onSelect={onSelect}
isOpen={isSelectOpen}
selections={[model]}
diff --git a/packages/boxed-expression-component/src/expressions/LiteralExpression/LiteralExpression.css b/packages/boxed-expression-component/src/expressions/LiteralExpression/LiteralExpression.css
index 33e8e8d445e..f99ceea96cc 100644
--- a/packages/boxed-expression-component/src/expressions/LiteralExpression/LiteralExpression.css
+++ b/packages/boxed-expression-component/src/expressions/LiteralExpression/LiteralExpression.css
@@ -19,8 +19,8 @@
.expression-container .literal-expression {
width: 100%;
- color: var(--pf-global--Color--100);
- background-color: var(--pf-global--BackgroundColor--100);
+ color: var(--pf-v5-global--Color--100);
+ background-color: var(--pf-v5-global--BackgroundColor--100);
font-style: normal;
text-align: center;
}
@@ -43,7 +43,7 @@
flex-wrap: wrap;
position: relative;
padding: 0.5em 0;
- border: 1px solid var(--pf-global--palette--black-300);
+ border: 1px solid var(--pf-v5-global--palette--black-300);
background-color: #def3ff;
color: black;
}
@@ -62,11 +62,11 @@
}
.literal-expression .literal-expression-body-container .equals-sign {
- border-right: 1px solid var(--pf-global--palette--black-300);
- background-color: var(--pf-global--palette--black-200);
+ border-right: 1px solid var(--pf-v5-global--palette--black-300);
+ background-color: var(--pf-v5-global--palette--black-200);
width: 20px;
min-width: 20px;
max-width: 20px;
- color: var(--pf-global--palette--black-600);
+ color: var(--pf-v5-global--palette--black-600);
font-family: Menlo, monospace;
}
diff --git a/packages/boxed-expression-component/src/resizing/Resizer/Resizer.css b/packages/boxed-expression-component/src/resizing/Resizer/Resizer.css
index 819402f1fab..eb725d4c4da 100644
--- a/packages/boxed-expression-component/src/resizing/Resizer/Resizer.css
+++ b/packages/boxed-expression-component/src/resizing/Resizer/Resizer.css
@@ -29,10 +29,10 @@
pointer-events: auto;
}
-.expression-container .pf-c-drawer__splitter::after {
+.expression-container .pf-v5-c-drawer__splitter::after {
border: none;
}
-.expression-container .pf-c-drawer__splitter-handle::after {
+.expression-container .pf-v5-c-drawer__splitter-handle::after {
display: none;
}
diff --git a/packages/boxed-expression-component/src/resizing/Resizer/Resizer.tsx b/packages/boxed-expression-component/src/resizing/Resizer/Resizer.tsx
index 774d6c85e92..28cbe491f26 100644
--- a/packages/boxed-expression-component/src/resizing/Resizer/Resizer.tsx
+++ b/packages/boxed-expression-component/src/resizing/Resizer/Resizer.tsx
@@ -173,17 +173,17 @@ export const Resizer: React.FunctionComponent<ResizerProps> = ({
return (
<>
{/* {width && (
- <div className="pf-c-drawer" style={{ position: "absolute", left: width - 10 }}>
- <div className={`pf-c-drawer__splitter pf-m-vertical actual`}>
- <div className={`pf-c-drawer__splitter-handle`} />
+ <div className="pf-v5-c-drawer" style={{ position: "absolute", left: width - 10 }}>
+ <div className={`pf-v5-c-drawer__splitter pf-m-vertical actual`}>
+ <div className={`pf-v5-c-drawer__splitter-handle`} />
</div>
</div>
)}
{width && minWidth && (
- <div className="pf-c-drawer" style={{ position: "absolute", left: minWidth - 10 }}>
- <div className={`pf-c-drawer__splitter pf-m-vertical min-basis`}>
- <div className={`pf-c-drawer__splitter-handle`} />
+ <div className="pf-v5-c-drawer" style={{ position: "absolute", left: minWidth - 10 }}>
+ <div className={`pf-v5-c-drawer__splitter pf-m-vertical min-basis`}>
+ <div className={`pf-v5-c-drawer__splitter-handle`} />
</div>
</div>
)} */}
@@ -199,9 +199,13 @@ export const Resizer: React.FunctionComponent<ResizerProps> = ({
className={"resizable-div"}
axis={"x"}
handle={
- <div className="pf-c-drawer" onDoubleClick={onDoubleClick} data-testid={"kie-tools--bee--resizer-handle"}>
- <div className={`pf-c-drawer__splitter pf-m-vertical ${debuggingHandleClassNames}`}>
- <div className={`pf-c-drawer__splitter-handle`} />
+ <div
+ className="pf-v5-c-drawer"
+ onDoubleClick={onDoubleClick}
+ data-testid={"kie-tools--bee--resizer-handle"}
+ >
+ <div className={`pf-v5-c-drawer__splitter pf-m-vertical ${debuggingHandleClassNames}`}>
+ <div className={`pf-v5-c-drawer__splitter-handle`} />
</div>
</div>
}
diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css
index 8e5755d5a4a..33c9f2c5fad 100644
--- a/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css
+++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTable.css
@@ -85,8 +85,8 @@
.expression-container .table-component table thead th,
.expression-container .table-component table tbody td {
- border-top: 1px solid var(--pf-global--palette--black-300);
- border-left: 1px solid var(--pf-global--palette--black-300);
+ border-top: 1px solid var(--pf-v5-global--palette--black-300);
+ border-left: 1px solid var(--pf-v5-global--palette--black-300);
border-right: 0;
border-bottom: 0;
outline: none;
@@ -94,12 +94,12 @@
.expression-container .table-component table thead th:last-child,
.expression-container .table-component table tbody td:last-child {
- border-right: 1px solid var(--pf-global--palette--black-300);
+ border-right: 1px solid var(--pf-v5-global--palette--black-300);
}
.expression-container .table-component table thead tr:last-child th,
.expression-container .table-component table tbody tr:last-child td {
- border-bottom: 1px solid var(--pf-global--palette--black-300);
+ border-bottom: 1px solid var(--pf-v5-global--palette--black-300);
}
/* SELECTION */
@@ -127,19 +127,19 @@
}
.expression-container .table-component table thead tr th {
- border-top: 1px solid var(--pf-global--palette--black-400);
- border-left: 1px solid var(--pf-global--palette--black-400);
- border-right: 1px solid var(--pf-global--palette--black-400);
- border-bottom: 1px solid var(--pf-global--palette--black-400);
+ border-top: 1px solid var(--pf-v5-global--palette--black-400);
+ border-left: 1px solid var(--pf-v5-global--palette--black-400);
+ border-right: 1px solid var(--pf-v5-global--palette--black-400);
+ border-bottom: 1px solid var(--pf-v5-global--palette--black-400);
}
.expression-container .table-component table tbody tr td:first-child {
- border-top: 1px solid var(--pf-global--palette--black-400);
- border-left: 1px solid var(--pf-global--palette--black-400);
- border-right: 1px solid var(--pf-global--palette--black-400);
+ border-top: 1px solid var(--pf-v5-global--palette--black-400);
+ border-left: 1px solid var(--pf-v5-global--palette--black-400);
+ border-right: 1px solid var(--pf-v5-global--palette--black-400);
}
.expression-container .table-component table tbody tr:last-child td:first-child {
- border-bottom: 1px solid var(--pf-global--palette--black-400);
+ border-bottom: 1px solid var(--pf-v5-global--palette--black-400);
}
.expression-container .table-component table thead th.selected:not(.editing):after,
@@ -316,19 +316,19 @@
/** Handle for resizing columns */
-.expression-container .pf-c-drawer {
+.expression-container .pf-v5-c-drawer {
background-color: inherit;
width: 8px;
min-width: 8px;
}
-.expression-container .pf-c-drawer__splitter {
+.expression-container .pf-v5-c-drawer__splitter {
background-color: inherit;
width: 8px;
}
-.expression-container .pf-c-drawer {
- --pf-c-drawer__splitter--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+.expression-container .pf-v5-c-drawer {
+ --pf-v5-c-drawer__splitter--after--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
position: absolute;
min-width: 8px;
max-width: 8px;
@@ -337,32 +337,32 @@
bottom: 0;
}
-.expression-container .pf-c-drawer.resizer-disabled * {
+.expression-container .pf-v5-c-drawer.resizer-disabled * {
cursor: not-allowed;
}
-.expression-container .pf-c-drawer.resizer-disabled .pf-c-drawer__splitter {
+.expression-container .pf-v5-c-drawer.resizer-disabled .pf-v5-c-drawer__splitter {
background-color: lightgray;
}
-.expression-container .pf-c-drawer .pf-c-drawer__splitter {
+.expression-container .pf-v5-c-drawer .pf-v5-c-drawer__splitter {
z-index: 10;
background-color: #00000010;
}
-.expression-container .pf-c-drawer .pf-c-drawer__splitter.min {
+.expression-container .pf-v5-c-drawer .pf-v5-c-drawer__splitter.min {
background-color: #00ffb739;
}
-.expression-container .pf-c-drawer .pf-c-drawer__splitter.min-basis {
+.expression-container .pf-v5-c-drawer .pf-v5-c-drawer__splitter.min-basis {
background-color: #ffe10039;
}
-.expression-container .pf-c-drawer .pf-c-drawer__splitter.actual {
+.expression-container .pf-v5-c-drawer .pf-v5-c-drawer__splitter.actual {
background-color: rgba(144, 0, 255, 0.137);
}
-.expression-container .pf-c-drawer .pf-c-drawer__splitter.error {
+.expression-container .pf-v5-c-drawer .pf-v5-c-drawer__splitter.error {
background-color: red;
}
/** Additional row section */
@@ -373,7 +373,7 @@
/** Hiding popover arrow for the Table context menu */
-.boxed-expression-provider .table-context-menu .pf-c-popover__arrow {
+.boxed-expression-provider .table-context-menu .pf-v5-c-popover__arrow {
display: none;
}
@@ -381,7 +381,7 @@
.add-row-button {
position: absolute;
- border: 1px solid var(--pf-global--palette--black-400);
+ border: 1px solid var(--pf-v5-global--palette--black-400);
height: 18px;
width: 18px;
display: flex;
@@ -404,7 +404,7 @@
.add-column-button {
position: absolute;
- border: 1px solid var(--pf-global--palette--black-400);
+ border: 1px solid var(--pf-v5-global--palette--black-400);
bottom: 5px;
height: 18px;
width: 18px;
@@ -426,7 +426,7 @@
filter: brightness(0.8);
}
-.logic-type-popover .pf-c-menu {
+.logic-type-popover .pf-v5-c-menu {
box-shadow: none;
min-width: 210px;
}
diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableContextMenuHandler.css b/packages/boxed-expression-component/src/table/BeeTable/BeeTableContextMenuHandler.css
index 624cbd5f599..a7d893d1bcf 100644
--- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableContextMenuHandler.css
+++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableContextMenuHandler.css
@@ -26,19 +26,19 @@
display: none;
}
-.table-context-menu .pf-c-menu__group-title {
+.table-context-menu .pf-v5-c-menu__group-title {
text-align: left;
font-size: small;
- padding-left: var(--pf-c-menu__group-title--PaddingLeft);
+ padding-left: var(--pf-v5-c-menu__group-title--PaddingLeft);
margin-bottom: 4px;
- font-weight: var(--pf-c-menu__group-title--FontWeight);
- color: var(--pf-c-menu__group-title--Color);
+ font-weight: var(--pf-v5-c-menu__group-title--FontWeight);
+ color: var(--pf-v5-c-menu__group-title--Color);
}
-.table-context-menu .pf-c-menu__item {
- color: var(--pf-c-menu__item--Color);
+.table-context-menu .pf-v5-c-menu__item {
+ color: var(--pf-v5-c-menu__item--Color);
}
-.table-context-menu .pf-c-number-input .pf-c-form-control {
+.table-context-menu .pf-v5-c-number-input .pf-v5-c-form-control {
text-align: center;
}
diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableContextMenuHandler.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableContextMenuHandler.tsx
index ed742cf2927..35e5166a4af 100644
--- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableContextMenuHandler.tsx
+++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableContextMenuHandler.tsx
@@ -492,7 +492,7 @@ export function BeeTableContextMenuHandler({
inputAriaLabel="number input"
minusBtnAriaLabel="minus"
plusBtnAriaLabel="plus"
- allowEmptyInput={false}
+ // allowEmptyInput={false}
min={1}
max={MAXIMUM_ROWS_COLUMNS_PER_INSERTION}
style={{ textAlign: "center" }}
diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableEditableCellContent.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableEditableCellContent.tsx
index 4678e5e468b..cbc5c65953d 100644
--- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableEditableCellContent.tsx
+++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableEditableCellContent.tsx
@@ -208,7 +208,7 @@ export function BeeTableEditableCellContent({
className={cssClass}
onKeyDown={onKeyDown}
>
- <span className="editable-cell-value pf-u-text-break-word" dangerouslySetInnerHTML={{ __html: preview }} />
+ <span className="editable-cell-value pf-v5-u-text-break-word" dangerouslySetInnerHTML={{ __html: preview }} />
<span data-ouia-component-id={"editable-cell-raw-value"} className={"editable-cell-raw-value"}>
{value}
</span>
diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableHeader.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableHeader.tsx
index c5b10fb7632..6a54efae221 100644
--- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableHeader.tsx
+++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableHeader.tsx
@@ -252,7 +252,7 @@ export function BeeTableHeader<R extends object>({
) : (
<p
data-testid={"kie-tools--bee--expression-info-name"}
- className="expression-info-name pf-u-text-truncate name"
+ className="expression-info-name pf-v5-u-text-truncate name"
>
{column.label}
</p>
@@ -260,7 +260,7 @@ export function BeeTableHeader<R extends object>({
{column.dataType ? (
<p
data-testid={"kie-tools--bee--expression-info-data-type"}
- className="expression-info-data-type pf-u-text-truncate data-type"
+ className="expression-info-data-type pf-v5-u-text-truncate data-type"
>
({column.dataType})
</p>
diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx
index 92e02f0f3ca..524e110da27 100644
--- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx
+++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTd.tsx
@@ -33,6 +33,7 @@ import {
} from "../../selection/BeeTableSelectionContext";
import { useBoxedExpressionEditor } from "../../BoxedExpressionEditorContext";
import { InsertRowColumnsDirection } from "../../api";
+import { Icon } from "@patternfly/react-core/dist/js/components/Icon";
export interface BeeTableTdProps<R extends object> {
// Individual cells are not immutable references, By referencing the row, we avoid multiple re-renders and bugs.
@@ -299,7 +300,9 @@ export function BeeTableTd<R extends object>({
className={"add-row-button"}
style={addRowButtonStyle}
>
- <PlusIcon size="sm" />
+ <Icon size="sm">
+ <PlusIcon />
+ </Icon>
</div>
</div>
)}
diff --git a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTh.tsx b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTh.tsx
index 3018f5dc15b..ee9c8061843 100644
--- a/packages/boxed-expression-component/src/table/BeeTable/BeeTableTh.tsx
+++ b/packages/boxed-expression-component/src/table/BeeTable/BeeTableTh.tsx
@@ -29,6 +29,7 @@ import {
} from "../../selection/BeeTableSelectionContext";
import { useBoxedExpressionEditor } from "../../BoxedExpressionEditorContext";
import { InsertRowColumnsDirection } from "../../api";
+import { Icon } from "@patternfly/react-core/dist/js/components/Icon";
export interface BeeTableThProps<R extends object> {
groupType: string | undefined;
@@ -211,7 +212,9 @@ export function BeeTableTh<R extends object>({
className={"add-column-button"}
style={addColumButtonStyle}
>
- <PlusIcon size="sm" />
+ <Icon size="sm">
+ <PlusIcon />
+ </Icon>
</div>
)}
</th>
diff --git a/packages/boxed-expression-component/src/table/BeeTable/InlineEditableTextInput.tsx b/packages/boxed-expression-component/src/table/BeeTable/InlineEditableTextInput.tsx
index d589e9be87e..d556f36c6ea 100644
--- a/packages/boxed-expression-component/src/table/BeeTable/InlineEditableTextInput.tsx
+++ b/packages/boxed-expression-component/src/table/BeeTable/InlineEditableTextInput.tsx
@@ -95,7 +95,7 @@ export const InlineEditableTextInput: React.FunctionComponent<InlineEditableText
return !isEditing || isReadOnly ? (
<p
- className={"inline-editable-preview pf-u-text-truncate"}
+ className={"inline-editable-preview pf-v5-u-text-truncate"}
style={{ ...textStyle, width: "100%" }}
onClick={isReadOnly ? undefined : onLabelClick}
>
diff --git a/packages/boxed-expression-component/tests-e2e/api/expressions/decisionTableExpressionElement.ts b/packages/boxed-expression-component/tests-e2e/api/expressions/decisionTableExpressionElement.ts
index 01f370a139c..f60994326a5 100644
--- a/packages/boxed-expression-component/tests-e2e/api/expressions/decisionTableExpressionElement.ts
+++ b/packages/boxed-expression-component/tests-e2e/api/expressions/decisionTableExpressionElement.ts
@@ -100,7 +100,11 @@ export class DecisionTableExpressionElement {
y: 0,
},
});
- await this.locator.getByTestId("kie-tools--bee--table-header-input").nth(index).locator("svg").click();
+ await this.locator
+ .getByTestId("kie-tools--bee--table-header-input")
+ .nth(index)
+ .locator(".add-column-button svg")
+ .click();
}
}
@@ -272,7 +276,11 @@ export class DecisionTableExpressionElement {
y: 0,
},
});
- await this.locator.getByTestId("kie-tools--bee--table-header-output").nth(0).locator("svg").click();
+ await this.locator
+ .getByTestId("kie-tools--bee--table-header-output")
+ .nth(0)
+ .locator(".add-column-button svg")
+ .click();
}
}
diff --git a/packages/boxed-expression-component/tests-e2e/api/expressions/relationExpressionElement.ts b/packages/boxed-expression-component/tests-e2e/api/expressions/relationExpressionElement.ts
index 655858941f4..1465b5fd617 100644
--- a/packages/boxed-expression-component/tests-e2e/api/expressions/relationExpressionElement.ts
+++ b/packages/boxed-expression-component/tests-e2e/api/expressions/relationExpressionElement.ts
@@ -98,7 +98,7 @@ export class RelationExpressionElement {
await this.locator
.getByRole("columnheader")
.nth(index + 1)
- .locator("svg")
+ .locator(".add-column-button svg")
.click();
}
diff --git a/packages/boxed-expression-component/tests-e2e/api/nameAndDataTypeCell.ts b/packages/boxed-expression-component/tests-e2e/api/nameAndDataTypeCell.ts
index df71ed7608a..ed956f67e07 100644
--- a/packages/boxed-expression-component/tests-e2e/api/nameAndDataTypeCell.ts
+++ b/packages/boxed-expression-component/tests-e2e/api/nameAndDataTypeCell.ts
@@ -31,6 +31,12 @@ export class NameAndDataTypeCell {
await this.locator.nth(0).click();
}
+ public async close() {
+ const popover = await this.getPopoverMenu();
+ await this.locator.page().keyboard.press("Enter");
+ await popover.waitFor({ state: "detached" });
+ }
+
public async getPopoverMenu() {
return this.locator.page().getByTestId("kie-tools--bee--expression-popover-menu");
}
@@ -41,7 +47,7 @@ export class NameAndDataTypeCell {
} else {
await this.locator.getByRole("textbox").fill(params.name);
if (params.close) {
- await this.locator.getByRole("textbox").press("Enter");
+ await this.close();
}
}
}
@@ -51,7 +57,7 @@ export class NameAndDataTypeCell {
await this.locator.getByPlaceholder("Choose...").nth(0).fill(params.dataType);
await this.locator.getByRole("group").nth(0).getByRole("option").nth(0).click();
if (params.close) {
- await this.locator.page().keyboard.press("Enter");
+ await this.close();
}
}
diff --git a/packages/boxed-expression-component/tests-e2e/boxedExpressions/conditional/populate.spec.ts b/packages/boxed-expression-component/tests-e2e/boxedExpressions/conditional/populate.spec.ts
index 7ed29672ffd..ca859a97cc7 100644
--- a/packages/boxed-expression-component/tests-e2e/boxedExpressions/conditional/populate.spec.ts
+++ b/packages/boxed-expression-component/tests-e2e/boxedExpressions/conditional/populate.spec.ts
@@ -29,9 +29,9 @@ test.describe("Populate Boxed Conditional", () => {
.asConditional()
.expressionHeaderCell.setName({ name: "Conditional Expression Name", close: true });
- expect(await bee.expression.asConditional().expressionHeaderCell.content.textContent()).toEqual(
- "Conditional Expression Name(<Undefined>)"
- );
+ expect(
+ await bee.expression.asConditional().expressionHeaderCell.content.locator(".header-cell-info").textContent()
+ ).toEqual("Conditional Expression Name(<Undefined>)");
});
test("should change a Conditional data type", async ({ bee, stories }) => {
diff --git a/packages/boxed-expression-component/tests-e2e/boxedExpressions/relation/populate.spec.ts b/packages/boxed-expression-component/tests-e2e/boxedExpressions/relation/populate.spec.ts
index b0966f0543a..e557cd79a22 100644
--- a/packages/boxed-expression-component/tests-e2e/boxedExpressions/relation/populate.spec.ts
+++ b/packages/boxed-expression-component/tests-e2e/boxedExpressions/relation/populate.spec.ts
@@ -59,7 +59,10 @@ test.describe("Populate Relation", () => {
await page.getByRole("columnheader", { name: "Married (boolean)" }).hover();
await page.getByRole("columnheader", { name: "Expression Name (<Undefined>)" }).click();
- await page.getByPlaceholder("Expression Name").fill("People");
+ await page
+ .getByRole("row", { name: "# Expression Name (<Undefined" })
+ .getByPlaceholder("Expression Name")
+ .fill("People");
await page.keyboard.press("Enter");
await bee.expression.asRelation().addRowAtBellowOfRowAtIndex(1);
diff --git a/packages/boxed-expression-component/tests-e2e/features/resizing/resizing.spec.ts b/packages/boxed-expression-component/tests-e2e/features/resizing/resizing.spec.ts
index 97a49eaec36..7ab91c1d336 100644
--- a/packages/boxed-expression-component/tests-e2e/features/resizing/resizing.spec.ts
+++ b/packages/boxed-expression-component/tests-e2e/features/resizing/resizing.spec.ts
@@ -564,7 +564,7 @@ test.describe("Resizing", () => {
const columnsHeader = page.getByRole("columnheader", { name: "Expression Name (<Undefined>)" });
const column1 = page.getByRole("columnheader", { name: "Installment Calculation (<Undefined>)" });
await column1.hover({ position: { x: 0, y: 0 } });
- await column1.locator("svg").click();
+ await column1.locator(".add-column-button svg").click();
const column2 = page.getByRole("columnheader", { name: "column-2 (<Undefined>)" });
expect(await columnsHeader.boundingBox()).toHaveProperty("width", 200);
diff --git a/packages/chrome-extension-test-helper/src/framework/editor/Editor.ts b/packages/chrome-extension-test-helper/src/framework/editor/Editor.ts
index d93af0737e8..112c18c79a5 100644
--- a/packages/chrome-extension-test-helper/src/framework/editor/Editor.ts
+++ b/packages/chrome-extension-test-helper/src/framework/editor/Editor.ts
@@ -21,7 +21,7 @@ import { By } from "selenium-webdriver";
import PageFragment from "../PageFragment";
export default abstract class Editor extends PageFragment {
- private static readonly LOADING_POPUP_LOCATOR: By = By.className("pf-l-bullseye");
+ private static readonly LOADING_POPUP_LOCATOR: By = By.className("pf-v5-l-bullseye");
private static readonly ENVELOPE_LOCATOR: By = By.xpath("//div[@id='envelope-app' or @id='combined-envelope-app']");
public async waitUntilLoaded(): Promise<void> {
diff --git a/packages/dashbuilder-component-table/package.json b/packages/dashbuilder-component-table/package.json
index d85cf0846ea..6e6dbd07377 100644
--- a/packages/dashbuilder-component-table/package.json
+++ b/packages/dashbuilder-component-table/package.json
@@ -24,8 +24,8 @@
"dependencies": {
"@kie-tools-core/patternfly-base": "workspace:*",
"@kie-tools/dashbuilder-component-api": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-table": "^4.112.39"
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-table": "^5.4.1"
},
"devDependencies": {
"@babel/core": "^7.16.0",
diff --git a/packages/dashbuilder-component-table/src/FilteredTable.tsx b/packages/dashbuilder-component-table/src/FilteredTable.tsx
index 9e9865c383c..d3730b811ed 100644
--- a/packages/dashbuilder-component-table/src/FilteredTable.tsx
+++ b/packages/dashbuilder-component-table/src/FilteredTable.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import * as React from "react";
-import { TableComposable, Thead, Tbody, Tr, Th, Td, selectable } from "@patternfly/react-table";
+import { Table /* data-codemods */, Thead, Tbody, Tr, Th, Td, selectable } from "@patternfly/react-table";
import { useState, useCallback, useMemo } from "react";
import { Flex, FlexItem } from "@patternfly/react-core/dist/js/layouts/Flex";
@@ -181,7 +181,7 @@ export const FilteredTable = (props: Props) => {
</FlexItem>
</Flex>
)}
- <TableComposable aria-label="Filtered Table" variant="compact">
+ <Table aria-label="Filtered Table" variant="compact">
<Thead>
<Tr>
{props.columns.map((column, columnIndex) => {
@@ -207,7 +207,7 @@ export const FilteredTable = (props: Props) => {
{rows?.slice((page - 1) * perPage, (page - 1) * perPage + perPage).map((row, rowIndex) => (
<Tr
key={rowIndex}
- isHoverable={props.selectable}
+ isClickable={props.selectable}
className={isSelectedRow(row) && props.selectable ? "selected-row" : ""}
onClick={() => {
if (props.selectable) {
@@ -247,7 +247,7 @@ export const FilteredTable = (props: Props) => {
</Tr>
))}
</Tbody>
- </TableComposable>
+ </Table>
</>
);
};
diff --git a/packages/dashbuilder-component-table/static/index.css b/packages/dashbuilder-component-table/static/index.css
index 7f1e9e83010..f68cc9da8bd 100644
--- a/packages/dashbuilder-component-table/static/index.css
+++ b/packages/dashbuilder-component-table/static/index.css
@@ -23,46 +23,46 @@
background-color: #393555 !important;
}
[mode="dark"] {
- --pf-global--Color--100: #eef1fa !important;
- --pf-global--Color--200: var(--pf-global--Color--light-200) !important;
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100) !important;
- --pf-global--primary-color--100: var(--pf-global--primary-color--light-100) !important;
- --pf-global--link--Color: var(--pf-global--link--Color--light) !important;
- --pf-global--link--Color--hover: var(--pf-global--link--Color--light) !important;
- --pf-global--BackgroundColor--100: #100c2a !important;
+ --pf-v5-global--Color--100: #eef1fa !important;
+ --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200) !important;
+ --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100) !important;
+ --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--light-100) !important;
+ --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light) !important;
+ --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light) !important;
+ --pf-v5-global--BackgroundColor--100: #100c2a !important;
}
[mode="dark"] body,
-[mode="dark"] .pf-c-table,
-[mode="dark"] .pf-c-input-group,
-[mode="dark"] .pf-c-options-menu__menu {
- --pf-global--Color--100: #eef1fa !important;
- --pf-global--Color--200: var(--pf-global--Color--light-200) !important;
- --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100) !important;
- --pf-global--primary-color--100: var(--pf-global--primary-color--light-100) !important;
- --pf-global--link--Color: var(--pf-global--link--Color--light) !important;
- --pf-global--link--Color--hover: var(--pf-global--link--Color--light) !important;
- --pf-global--BackgroundColor--100: #100c2a !important;
+[mode="dark"] .pf-v5-c-table,
+[mode="dark"] .pf-v5-c-input-group,
+[mode="dark"] .pf-v5-c-options-menu__menu {
+ --pf-v5-global--Color--100: #eef1fa !important;
+ --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200) !important;
+ --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100) !important;
+ --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--light-100) !important;
+ --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light) !important;
+ --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light) !important;
+ --pf-v5-global--BackgroundColor--100: #100c2a !important;
}
-[mode="dark"] .pf-c-options-menu__menu,
-[mode="dark"] .pf-c-pagination__nav,
-[mode="dark"] .pf-c-pagination__total-items {
+[mode="dark"] .pf-v5-c-options-menu__menu,
+[mode="dark"] .pf-v5-c-pagination__nav,
+[mode="dark"] .pf-v5-c-pagination__total-items {
background-color: #100c2a !important;
color: #eef1fa;
}
-[mode="dark"] .pf-c-options-menu__menu-item:hover,
-[mode="dark"] .pf-c-table tr.pf-m-hoverable:hover {
+[mode="dark"] .pf-v5-c-options-menu__menu-item:hover,
+[mode="dark"] .pf-v5-c-table tr.pf-m-hoverable:hover {
background-color: #393555;
color: #eef1fa;
}
-[mode="dark"] .pf-c-form-control {
- --pf-global--Color--100: #eef1fa !important;
- --pf-global--BackgroundColor--100: #100c2a !important;
+[mode="dark"] .pf-v5-c-form-control {
+ --pf-v5-global--Color--100: #eef1fa !important;
+ --pf-v5-global--BackgroundColor--100: #100c2a !important;
}
-[mode="dark"] .pf-c-form-control:disabled {
- --pf-c-form-control--BackgroundColor: #464545;
+[mode="dark"] .pf-v5-c-form-control:disabled {
+ --pf-v5-c-form-control--BackgroundColor: #464545;
}
diff --git a/packages/dashbuilder-component-uniforms/package.json b/packages/dashbuilder-component-uniforms/package.json
index 14ebad675aa..74a4a8e343a 100644
--- a/packages/dashbuilder-component-uniforms/package.json
+++ b/packages/dashbuilder-component-uniforms/package.json
@@ -24,8 +24,8 @@
"@kie-tools-core/patternfly-base": "workspace:*",
"@kie-tools/dashbuilder-component-api": "workspace:*",
"@kie-tools/uniforms-patternfly": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-table": "^4.112.39",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-table": "^5.4.1",
"ajv": "^8.17.1",
"ajv-draft-04": "^1.0.0",
"ajv-formats": "^3.0.1",
diff --git a/packages/dashbuilder-component-victory-charts/dev-webapp/manifest.dev.json b/packages/dashbuilder-component-victory-charts/dev-webapp/manifest.dev.json
index 539ff4d9646..cee571a3c1a 100644
--- a/packages/dashbuilder-component-victory-charts/dev-webapp/manifest.dev.json
+++ b/packages/dashbuilder-component-victory-charts/dev-webapp/manifest.dev.json
@@ -16,10 +16,6 @@
"key": "height",
"value": "0"
},
- {
- "key": "themeVariant",
- "value": "dark"
- },
{
"key": "zoom",
"value": "false"
diff --git a/packages/dashbuilder-component-victory-charts/package.json b/packages/dashbuilder-component-victory-charts/package.json
index aa6ed8d79be..2c81d6bc98a 100644
--- a/packages/dashbuilder-component-victory-charts/package.json
+++ b/packages/dashbuilder-component-victory-charts/package.json
@@ -24,9 +24,9 @@
"dependencies": {
"@kie-tools-core/patternfly-base": "workspace:*",
"@kie-tools/dashbuilder-component-api": "workspace:*",
- "@patternfly/react-charts": "^6.94.18",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-table": "^4.112.39",
+ "@patternfly/react-charts": "^7.4.7",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-table": "^5.4.1",
"numeral": "^2.0.6",
"victory-zoom-container": "^35.11.4"
},
diff --git a/packages/dashbuilder-component-victory-charts/src/VictoryChart.tsx b/packages/dashbuilder-component-victory-charts/src/VictoryChart.tsx
index c6f6020a6d9..6e7b52bdf28 100755
--- a/packages/dashbuilder-component-victory-charts/src/VictoryChart.tsx
+++ b/packages/dashbuilder-component-victory-charts/src/VictoryChart.tsx
@@ -45,7 +45,6 @@ export interface VictoryChartProps {
type: ChartType;
themeColor: ThemeColorType;
- themeVariant: ThemeVariantType;
legendPosition?: LegendPosition;
legendOrientation?: LegendOrientation;
@@ -101,7 +100,6 @@ export const VictoryChart = (props: VictoryChartProps) => {
width: props.width || 600,
height: props.height || 400,
themeColor: props.themeColor,
- themeVariant: props.themeVariant,
dataSet: props.dataSet || EMPTY_DATASET,
legendPosition: props.legendPosition || "bottom",
legendOrientation: props.legendOrientation,
diff --git a/packages/dashbuilder-component-victory-charts/src/VictoryChartComponent.tsx b/packages/dashbuilder-component-victory-charts/src/VictoryChartComponent.tsx
index 8468572d2e3..5a3ab2bd5e8 100644
--- a/packages/dashbuilder-component-victory-charts/src/VictoryChartComponent.tsx
+++ b/packages/dashbuilder-component-victory-charts/src/VictoryChartComponent.tsx
@@ -34,7 +34,6 @@ export function VictoryChartComponent(props: Props) {
height: 0,
type: "bar",
themeColor: "blue",
- themeVariant: "light",
gridX: false,
onValidationError: (message: string) => props.controller.requireConfigurationFix(message),
onValidationSuccess: () => props.controller.configurationOk(),
@@ -53,7 +52,6 @@ export function VictoryChartComponent(props: Props) {
height: +(params.get("height") || 0),
type: (params.get("chartType") as ChartType) || "bar",
themeColor: (params.get("themeColor") as ThemeColorType) || "multi",
- themeVariant: (params.get("themeVariant") as ThemeVariantType) || "light",
ariaTitle: params.get("title"),
ariaDescription: params.get("description"),
diff --git a/packages/dashbuilder-component-victory-charts/src/charts/BaseChart.tsx b/packages/dashbuilder-component-victory-charts/src/charts/BaseChart.tsx
index 837d2f3d48a..24c3c4664e3 100755
--- a/packages/dashbuilder-component-victory-charts/src/charts/BaseChart.tsx
+++ b/packages/dashbuilder-component-victory-charts/src/charts/BaseChart.tsx
@@ -78,7 +78,6 @@ export interface ChartProps {
width: number;
height: number;
themeColor: ThemeColorType;
- themeVariant: ThemeVariantType;
dataSet: DataSet;
legendPosition: LegendPosition;
legendOrientation?: LegendOrientation;
diff --git a/packages/dashbuilder-component-victory-charts/src/charts/DonutChart.tsx b/packages/dashbuilder-component-victory-charts/src/charts/DonutChart.tsx
index a678f88a991..c20baaa6768 100644
--- a/packages/dashbuilder-component-victory-charts/src/charts/DonutChart.tsx
+++ b/packages/dashbuilder-component-victory-charts/src/charts/DonutChart.tsx
@@ -24,7 +24,7 @@ import { PieBaseChart } from "./PieBaseChart";
export class DonutChart extends PieBaseChart {
render() {
- const { width, height, themeColor, themeVariant } = this.props;
+ const { width, height, themeColor } = this.props;
return (
<ChartDonut
ariaDesc={this.props.ariaDescription}
@@ -40,7 +40,6 @@ export class DonutChart extends PieBaseChart {
subTitle={this.props.donutSubTitle || ""}
title={this.props.donutTitle || ""}
themeColor={themeColor}
- themeVariant={themeVariant}
width={width}
height={height}
/>
diff --git a/packages/dashbuilder-component-victory-charts/src/charts/PieChart.tsx b/packages/dashbuilder-component-victory-charts/src/charts/PieChart.tsx
index f9f57fdb5af..f60ec026a98 100644
--- a/packages/dashbuilder-component-victory-charts/src/charts/PieChart.tsx
+++ b/packages/dashbuilder-component-victory-charts/src/charts/PieChart.tsx
@@ -23,7 +23,7 @@ import { PieBaseChart } from "./PieBaseChart";
export class PieChart extends PieBaseChart {
render() {
- const { width, height, themeColor, themeVariant } = this.props;
+ const { width, height, themeColor } = this.props;
return (
<ChartPie
ariaDesc={this.props.ariaDescription}
@@ -37,7 +37,6 @@ export class PieChart extends PieBaseChart {
animate={this.animationProp}
padding={this.props.padding}
themeColor={themeColor}
- themeVariant={themeVariant}
width={width}
height={height}
/>
diff --git a/packages/dashbuilder-component-victory-charts/src/charts/ScatterChart.tsx b/packages/dashbuilder-component-victory-charts/src/charts/ScatterChart.tsx
index 7dbeb615044..c54b7e6fa36 100755
--- a/packages/dashbuilder-component-victory-charts/src/charts/ScatterChart.tsx
+++ b/packages/dashbuilder-component-victory-charts/src/charts/ScatterChart.tsx
@@ -18,7 +18,7 @@
*/
import * as React from "react";
-import { ChartArea, ChartGroup, ChartScatter } from "@patternfly/react-charts";
+import { ChartGroup, ChartScatter } from "@patternfly/react-charts";
import { XYChart } from "./XYChart";
export class ScatterChart extends XYChart {
diff --git a/packages/dashbuilder-component-victory-charts/src/charts/UtilizationDonut.tsx b/packages/dashbuilder-component-victory-charts/src/charts/UtilizationDonut.tsx
index 2b6c5fdb79b..23b161917bd 100644
--- a/packages/dashbuilder-component-victory-charts/src/charts/UtilizationDonut.tsx
+++ b/packages/dashbuilder-component-victory-charts/src/charts/UtilizationDonut.tsx
@@ -39,7 +39,6 @@ export class UtilizationDonut extends PieBaseChart {
legendData={this.buildLegendData()}
legendOrientation={this.legendOrientation}
legendPosition={this.pieLegendPosition()}
- themeVariant={this.props.themeVariant}
/>
);
}
diff --git a/packages/dashbuilder-component-victory-charts/src/charts/XYChart.tsx b/packages/dashbuilder-component-victory-charts/src/charts/XYChart.tsx
index f952fdf8366..c0117f2f987 100755
--- a/packages/dashbuilder-component-victory-charts/src/charts/XYChart.tsx
+++ b/packages/dashbuilder-component-victory-charts/src/charts/XYChart.tsx
@@ -26,7 +26,7 @@ export type ChartGroupType = typeof ChartGroup;
export abstract class XYChart extends BaseChart {
render() {
- const { width, height, themeColor, themeVariant } = this.props;
+ const { width, height, themeColor } = this.props;
return (
<Chart
ariaDesc={this.props.ariaDescription}
@@ -41,7 +41,6 @@ export abstract class XYChart extends BaseChart {
animate={this.animationProp}
padding={this.props.padding}
themeColor={themeColor}
- themeVariant={themeVariant}
>
<ChartAxis showGrid={this.props.grid.y} fixLabelOverlap={this.props.fixLabelsOverlap} />
<ChartAxis
diff --git a/packages/dashbuilder-component-victory-charts/static/index.css b/packages/dashbuilder-component-victory-charts/static/index.css
index 20381851221..abf408f7fce 100644
--- a/packages/dashbuilder-component-victory-charts/static/index.css
+++ b/packages/dashbuilder-component-victory-charts/static/index.css
@@ -16,14 +16,14 @@
* specific language governing permissions and limitations
* under the License.
*/
-[mode="dark"] .pf-c-chart {
+[mode="dark"] .pf-v5-c-chart {
background-color: #100c2a;
}
-[mode="dark"] .pf-c-chart g text tspan {
+[mode="dark"] .pf-v5-c-chart g text tspan {
fill: #eef1fa !important;
}
-[mode="dark"] .pf-c-chart g line {
+[mode="dark"] .pf-v5-c-chart g line {
stroke: #eef1fa !important;
}
diff --git a/packages/dashbuilder-editor/package.json b/packages/dashbuilder-editor/package.json
index fbc13072d76..14bf836e1a4 100644
--- a/packages/dashbuilder-editor/package.json
+++ b/packages/dashbuilder-editor/package.json
@@ -37,8 +37,8 @@
"@kie-tools-core/workspace": "workspace:*",
"@kie-tools/dashbuilder-client": "workspace:*",
"@kie-tools/dashbuilder-language-service": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"json-schema": "^0.4.0",
"monaco-editor": "^0.39.0",
"monaco-yaml": "^4.0.4",
diff --git a/packages/dashbuilder-viewer-deployment-webapp/package.json b/packages/dashbuilder-viewer-deployment-webapp/package.json
index da2eb51a413..f3820d3cccc 100644
--- a/packages/dashbuilder-viewer-deployment-webapp/package.json
+++ b/packages/dashbuilder-viewer-deployment-webapp/package.json
@@ -29,8 +29,8 @@
"@kie-tools-core/workspaces-git-fs": "workspace:*",
"@kie-tools/dashbuilder-viewer": "workspace:*",
"@kie-tools/i18n-common-dictionary": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.3.4",
diff --git a/packages/dashbuilder-viewer-deployment-webapp/src/components/AppToolbar.tsx b/packages/dashbuilder-viewer-deployment-webapp/src/components/AppToolbar.tsx
index 4ef13049b9f..a7007ba2d3e 100644
--- a/packages/dashbuilder-viewer-deployment-webapp/src/components/AppToolbar.tsx
+++ b/packages/dashbuilder-viewer-deployment-webapp/src/components/AppToolbar.tsx
@@ -21,7 +21,7 @@ import * as React from "react";
import { I18nHtml } from "@kie-tools-core/i18n/dist/react-components";
import { extractExtension } from "@kie-tools-core/workspaces-git-fs/dist/relativePath/WorkspaceFileRelativePathParser";
import { Masthead, MastheadBrand, MastheadMain } from "@patternfly/react-core/dist/js/components/Masthead";
-import { PageHeaderToolsItem } from "@patternfly/react-core/dist/js/components/Page";
+import { PageHeaderToolsItem } from "@patternfly/react-core/deprecated";
import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text";
import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
import { Flex, FlexItem } from "@patternfly/react-core/dist/js/layouts/Flex";
@@ -32,12 +32,7 @@ import { useHistory } from "react-router";
import { useAppI18n } from "../i18n";
import { routes } from "../routes";
import { Dashboard } from "../data";
-import {
- Dropdown,
- DropdownItem,
- DropdownPosition,
- DropdownToggle,
-} from "@patternfly/react-core/dist/js/components/Dropdown";
+import { Dropdown, DropdownItem, DropdownPosition, DropdownToggle } from "@patternfly/react-core/deprecated";
import { useApp } from "../context/AppContext";
interface Props {
@@ -92,8 +87,9 @@ export function AppToolbar(props: Props) {
return (
<Masthead aria-label={"Page header"} display={{ default: "stack" }} className="app--masthead">
<MastheadMain style={{ justifyContent: "space-between" }}>
- <PageHeaderToolsItem className={"pf-l-flex"}>
+ <PageHeaderToolsItem className={"pf-v5-l-flex"}>
<MastheadBrand
+ component="a"
onClick={() => history.push({ pathname: routes.root.path({}) })}
style={{ textDecoration: "none" }}
>
@@ -128,7 +124,7 @@ export function AppToolbar(props: Props) {
toggle={
<DropdownToggle
className="app--toolbar-dropdown-hoverable-dark"
- onToggle={(isOpen) => setModelDropdownOpen(isOpen)}
+ onToggle={(_event, isOpen) => setModelDropdownOpen(isOpen)}
>
{filename}
</DropdownToggle>
diff --git a/packages/dashbuilder-viewer-deployment-webapp/src/pages/ErrorPage.tsx b/packages/dashbuilder-viewer-deployment-webapp/src/pages/ErrorPage.tsx
index 6ac51702b96..a241fc31b97 100644
--- a/packages/dashbuilder-viewer-deployment-webapp/src/pages/ErrorPage.tsx
+++ b/packages/dashbuilder-viewer-deployment-webapp/src/pages/ErrorPage.tsx
@@ -19,7 +19,12 @@
import * as React from "react";
import { I18nWrapped } from "@kie-tools-core/i18n/dist/react-components";
-import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
+import {
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateIcon,
+ EmptyStateHeader,
+} from "@patternfly/react-core/dist/js/components/EmptyState";
import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text";
import { ExclamationTriangleIcon } from "@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon";
import { useAppI18n } from "../i18n";
@@ -32,7 +37,7 @@ export function ErrorPage() {
return (
<>
<EmptyState>
- <EmptyStateIcon icon={ExclamationTriangleIcon} />
+ <EmptyStateHeader icon={<EmptyStateIcon icon={ExclamationTriangleIcon} />} />
<TextContent>
<Text component={"h2"}>{i18n.page.error.title}</Text>
</TextContent>
diff --git a/packages/dashbuilder-viewer-deployment-webapp/static/resources/style.css b/packages/dashbuilder-viewer-deployment-webapp/static/resources/style.css
index e34f1581a03..6223dff67cb 100644
--- a/packages/dashbuilder-viewer-deployment-webapp/static/resources/style.css
+++ b/packages/dashbuilder-viewer-deployment-webapp/static/resources/style.css
@@ -18,12 +18,12 @@
*/
.app--masthead {
- background-color: var(--pf-global--palette--blue-500);
+ background-color: var(--pf-v5-global--palette--blue-500);
}
.app--masterhead__disclaimer {
- --pf-c-tooltip__content--Color: var(--pf-global--BackgroundColor--dark-100);
- --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+ --pf-v5-c-tooltip__content--Color: var(--pf-v5-global--BackgroundColor--dark-100);
+ --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
}
.app--masterhead__disclaimer-icon {
diff --git a/packages/dashbuilder-viewer/package.json b/packages/dashbuilder-viewer/package.json
index 3e75900133a..772f9415d90 100644
--- a/packages/dashbuilder-viewer/package.json
+++ b/packages/dashbuilder-viewer/package.json
@@ -32,8 +32,8 @@
"@kie-tools-core/operating-system": "workspace:*",
"@kie-tools-core/patternfly-base": "workspace:*",
"@kie-tools-core/workspace": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6"
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1"
},
"devDependencies": {
"@babel/core": "^7.16.0",
diff --git a/packages/dev-deployment-dmn-form-webapp/package.json b/packages/dev-deployment-dmn-form-webapp/package.json
index 2078fcd0d2e..cc6302d7da7 100644
--- a/packages/dev-deployment-dmn-form-webapp/package.json
+++ b/packages/dev-deployment-dmn-form-webapp/package.json
@@ -30,8 +30,8 @@
"@kie-tools/form-dmn": "workspace:*",
"@kie-tools/i18n-common-dictionary": "workspace:*",
"@openapi-contrib/openapi-schema-to-json-schema": "^5.1.0",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"@readme/openapi-parser": "^2.5.0",
"json-refs": "^3.0.15",
"lodash": "^4.17.21",
diff --git a/packages/dev-deployment-dmn-form-webapp/src/DmnFormErrorPage.tsx b/packages/dev-deployment-dmn-form-webapp/src/DmnFormErrorPage.tsx
index 94fedd79751..c726970eba5 100644
--- a/packages/dev-deployment-dmn-form-webapp/src/DmnFormErrorPage.tsx
+++ b/packages/dev-deployment-dmn-form-webapp/src/DmnFormErrorPage.tsx
@@ -19,7 +19,12 @@
import * as React from "react";
import { I18nWrapped } from "@kie-tools-core/i18n/dist/react-components";
-import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
+import {
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateIcon,
+ EmptyStateHeader,
+} from "@patternfly/react-core/dist/js/components/EmptyState";
import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text";
import { ExclamationTriangleIcon } from "@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon";
import { useDmnFormI18n } from "./i18n";
@@ -32,7 +37,7 @@ export function DmnFormErrorPage() {
return (
<>
<EmptyState data-testid="dmn-form-error-page">
- <EmptyStateIcon icon={ExclamationTriangleIcon} />
+ <EmptyStateHeader icon={<EmptyStateIcon icon={ExclamationTriangleIcon} />} />
<TextContent>
<Text component={"h2"}>{i18n.page.error.title}</Text>
</TextContent>
diff --git a/packages/dev-deployment-dmn-form-webapp/src/DmnFormPage.tsx b/packages/dev-deployment-dmn-form-webapp/src/DmnFormPage.tsx
index 0c3dd0c4483..8cba1e67620 100644
--- a/packages/dev-deployment-dmn-form-webapp/src/DmnFormPage.tsx
+++ b/packages/dev-deployment-dmn-form-webapp/src/DmnFormPage.tsx
@@ -22,7 +22,12 @@ import { I18nWrapped } from "@kie-tools-core/i18n/dist/react-components";
import { FormDmn, FormDmnOutputs } from "@kie-tools/form-dmn";
import { DecisionResult } from "@kie-tools/extended-services-api";
import { Alert, AlertActionCloseButton } from "@patternfly/react-core/dist/js/components/Alert";
-import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
+import {
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateIcon,
+ EmptyStateHeader,
+} from "@patternfly/react-core/dist/js/components/EmptyState";
import { Page, PageSection } from "@patternfly/react-core/dist/js/components/Page";
import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text";
import { ExclamationTriangleIcon } from "@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon";
@@ -118,7 +123,7 @@ export function DmnFormPage(props: Props) {
() => (
<div>
<EmptyState>
- <EmptyStateIcon icon={ExclamationTriangleIcon} />
+ <EmptyStateHeader icon={<EmptyStateIcon icon={ExclamationTriangleIcon} />} />
<TextContent>
<Text component={"h2"}>{i18n.page.error.title}</Text>
</TextContent>
diff --git a/packages/dev-deployment-dmn-form-webapp/src/DmnFormToolbar.tsx b/packages/dev-deployment-dmn-form-webapp/src/DmnFormToolbar.tsx
index e1b6d48020f..1964d384038 100644
--- a/packages/dev-deployment-dmn-form-webapp/src/DmnFormToolbar.tsx
+++ b/packages/dev-deployment-dmn-form-webapp/src/DmnFormToolbar.tsx
@@ -21,18 +21,13 @@ import * as React from "react";
import { useCallback, useMemo, useState, useEffect } from "react";
import { I18nHtml } from "@kie-tools-core/i18n/dist/react-components";
import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
-import {
- Dropdown,
- DropdownItem,
- DropdownPosition,
- DropdownToggle,
-} from "@patternfly/react-core/dist/js/components/Dropdown";
+import { Dropdown, DropdownItem, DropdownPosition, DropdownToggle } from "@patternfly/react-core/deprecated";
import {
PageHeader,
PageHeaderTools,
PageHeaderToolsGroup,
PageHeaderToolsItem,
-} from "@patternfly/react-core/dist/js/components/Page";
+} from "@patternfly/react-core/deprecated";
import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text";
import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
import { EllipsisVIcon } from "@patternfly/react-icons/dist/js/icons/ellipsis-v-icon";
@@ -87,7 +82,7 @@ export function DmnFormToolbar(props: Props) {
<Text className={"kogito--dmn-form__toolbar-title"}>
{i18n.formToolbar.disclaimer.title}
- <HelpIcon className="pf-u-ml-sm" />
+ <HelpIcon className="pf-v5-u-ml-sm" />
</Text>
</Tooltip>
);
@@ -129,7 +124,7 @@ export function DmnFormToolbar(props: Props) {
<Text component={TextVariants.a} className="kogito--dmn-form__toolbar a">
{i18n.names.swaggerUI}
- <ExternalLinkAltIcon className="pf-u-mx-sm" />
+ <ExternalLinkAltIcon className="pf-v5-u-mx-sm" />
</Text>
</DropdownItem>
</React.Fragment>,
@@ -181,7 +176,7 @@ export function DmnFormToolbar(props: Props) {
toggle={
<DropdownToggle
id="dmn-dev-deployment-form-toolbar-model-dropdown-button"
- onToggle={(isOpen) => setModelDropdownOpen(isOpen)}
+ onToggle={(_event, isOpen) => setModelDropdownOpen(isOpen)}
data-testid="dmn-dev-deployment-form-toolbar-model-dropdown-button"
>
{props.modelName && truncateText(props.modelName)}
@@ -225,7 +220,7 @@ export function DmnFormToolbar(props: Props) {
className={"kogito--dmn-form__toolbar-icon-button"}
id={"view-id-lg"}
toggleIndicator={null}
- onToggle={(isOpen) => setLgKebabOpen(isOpen)}
+ onToggle={(_event, isOpen) => setLgKebabOpen(isOpen)}
ouiaId="toolbar-button"
>
<EllipsisVIcon />
@@ -255,7 +250,7 @@ export function DmnFormToolbar(props: Props) {
className={"kogito--dmn-form__toolbar-icon-button"}
id={"kebab-id-sm"}
toggleIndicator={null}
- onToggle={(isOpen) => setSmKebabOpen(isOpen)}
+ onToggle={(_event, isOpen) => setSmKebabOpen(isOpen)}
ouiaId="small-toolbar-button"
>
<EllipsisVIcon />
diff --git a/packages/dev-deployment-dmn-form-webapp/static/resources/style.css b/packages/dev-deployment-dmn-form-webapp/static/resources/style.css
index 6d20a0817ab..29dea573e6e 100644
--- a/packages/dev-deployment-dmn-form-webapp/static/resources/style.css
+++ b/packages/dev-deployment-dmn-form-webapp/static/resources/style.css
@@ -17,11 +17,11 @@
* under the License.
*/
-.pf-c-page__header {
+.pf-v5-c-page__header {
/* this adjusts the max specifically for our logo */
- --pf-c-page__header-brand-link--c-brand--MaxHeight: 39px;
+ --pf-v5-c-page__header-brand-link--c-brand--MaxHeight: 39px;
}
-.pf-c-page__header-brand-link {
+.pf-v5-c-page__header-brand-link {
text-decoration: none;
}
@@ -36,8 +36,8 @@
}
.kogito--dmn-form__toolbar {
- --pf-c-page__header--BackgroundColor: var(--pf-global--palette--blue-600);
- --pf-c-page__header-nav--BackgroundColor: var(--pf-global--palette--blue-600);
+ --pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--palette--blue-600);
+ --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-global--palette--blue-600);
}
.kogito--dmn-form__toolbar-logo {
@@ -50,16 +50,16 @@
}
.kogito--dmn-form__toolbar-icon-button {
- --pf-c-button--FontSize: var(--pf-global--icon--FontSize--md);
+ --pf-v5-c-button--FontSize: var(--pf-v5-global--icon--FontSize--md);
}
.kogito--dmn-form__toolbar-tooltip {
- --pf-c-tooltip__content--Color: var(--pf-global--BackgroundColor--dark-100);
- --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+ --pf-v5-c-tooltip__content--Color: var(--pf-v5-global--BackgroundColor--dark-100);
+ --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
}
.kogito--dmn-form__toolbar.a {
- color: var(--pf-global--Color--dark-100);
+ color: var(--pf-v5-global--Color--dark-100);
text-decoration: none;
}
@@ -70,9 +70,9 @@
}
.kogito--dmn-form__toolbar-title {
- background-color: var(--pf-c-page__header-nav--BackgroundColor);
- color: var(--pf-global--Color--light-100);
- font-size: var(--pf-global--FontSize--xl);
+ background-color: var(--pf-v5-c-page__header-nav--BackgroundColor);
+ color: var(--pf-v5-global--Color--light-100);
+ font-size: var(--pf-v5-global--FontSize--xl);
font-weight: bold;
text-align: center;
cursor: alias;
@@ -80,17 +80,17 @@
@media screen and (min-width: 1200px) {
.kogito--dmn-form__toolbar {
- --pf-c-page__header--MinHeight: unset;
+ --pf-v5-c-page__header--MinHeight: unset;
}
- .kogito--dmn-form__toolbar .pf-c-page__header-nav {
+ .kogito--dmn-form__toolbar .pf-v5-c-page__header-nav {
align-self: center;
justify-content: center;
height: 100%;
}
.kogito--dmn-form__toolbar-title {
- font-size: var(--pf-global--FontSize--xl);
+ font-size: var(--pf-v5-global--FontSize--xl);
}
.kogito--dmn-form__content {
@@ -100,12 +100,12 @@
}
@media screen and (min-width: 0px) and (max-width: 1200px) {
- .kogito--dmn-form__toolbar .pf-c-page__header-nav {
+ .kogito--dmn-form__toolbar .pf-v5-c-page__header-nav {
display: none;
}
.kogito--dmn-form__toolbar-title {
- font-size: var(--pf-global--FontSize--sm);
+ font-size: var(--pf-v5-global--FontSize--sm);
}
.kogito--dmn-form {
diff --git a/packages/dmn-editor-envelope/package.json b/packages/dmn-editor-envelope/package.json
index 39df1553aa3..b302a9caa4a 100644
--- a/packages/dmn-editor-envelope/package.json
+++ b/packages/dmn-editor-envelope/package.json
@@ -35,7 +35,7 @@
"@kie-tools/dmn-marshaller": "workspace:*",
"@kie-tools/pmml-editor-marshaller": "workspace:*",
"@kie-tools/xml-parser-ts": "workspace:*",
- "@patternfly/react-core": "^4.276.6"
+ "@patternfly/react-core": "^5.4.1"
},
"devDependencies": {
"@babel/core": "^7.16.0",
diff --git a/packages/dmn-editor-envelope/src/DmnEditorRoot.tsx b/packages/dmn-editor-envelope/src/DmnEditorRoot.tsx
index ecd897c5871..59d76e3613c 100644
--- a/packages/dmn-editor-envelope/src/DmnEditorRoot.tsx
+++ b/packages/dmn-editor-envelope/src/DmnEditorRoot.tsx
@@ -37,8 +37,12 @@ import {
} from "@kie-tools-core/react-hooks/dist/useImperativePromiseHandler";
import { KeyboardShortcutsService } from "@kie-tools-core/keyboard-shortcuts/dist/envelope/KeyboardShortcutsService";
import { Flex } from "@patternfly/react-core/dist/js/layouts/Flex";
-import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
+import {
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateIcon,
+ EmptyStateHeader,
+} from "@patternfly/react-core/dist/js/components/EmptyState";
import {
JavaCodeCompletionAccessor,
JavaCodeCompletionClass,
@@ -739,10 +743,11 @@ function DmnMarshallerFallbackError({ error }: { error: Error }) {
return (
<Flex justifyContent={{ default: "justifyContentCenter" }} style={{ marginTop: "100px" }}>
<EmptyState style={{ maxWidth: "1280px" }}>
- <EmptyStateIcon icon={() => <div style={{ fontSize: "3em" }}>😕</div>} />
- <Title size={"lg"} headingLevel={"h4"}>
- Unable to open file.
- </Title>
+ <EmptyStateHeader
+ titleText="Unable to open file."
+ icon={<EmptyStateIcon icon={() => <div style={{ fontSize: "3em" }}>😕</div>} />}
+ headingLevel={"h4"}
+ />
<br />
<EmptyStateBody>Error details: {error.message}</EmptyStateBody>
</EmptyState>
diff --git a/packages/dmn-editor-standalone/package.json b/packages/dmn-editor-standalone/package.json
index e96882f3f9c..33897f84fbc 100644
--- a/packages/dmn-editor-standalone/package.json
+++ b/packages/dmn-editor-standalone/package.json
@@ -57,7 +57,7 @@
"@kie-tools/root-env": "workspace:*",
"@kie-tools/storybook-base": "workspace:*",
"@kie-tools/tsconfig": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
+ "@patternfly/react-core": "^5.4.1",
"@playwright/test": "^1.45.2",
"@storybook/addon-links": "^7.3.2",
"@storybook/addon-webpack5-compiler-babel": "^3.0.5",
diff --git a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/Google-Chrome/api/open-editor.png b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/Google-Chrome/api/open-editor.png
index 6b4d2355b8e..66990b98271 100644
Binary files a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/Google-Chrome/api/open-editor.png and b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/Google-Chrome/api/open-editor.png differ
diff --git a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/Google-Chrome/api/setContent-emptyDmn.png b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/Google-Chrome/api/setContent-emptyDmn.png
index c41838d4dbb..1823d856a68 100644
Binary files a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/Google-Chrome/api/setContent-emptyDmn.png and b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/Google-Chrome/api/setContent-emptyDmn.png differ
diff --git a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/Google-Chrome/api/setContent-emptyDrd.png b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/Google-Chrome/api/setContent-emptyDrd.png
index 4e1d7b43f8b..e707804e8db 100644
Binary files a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/Google-Chrome/api/setContent-emptyDrd.png and b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/Google-Chrome/api/setContent-emptyDrd.png differ
diff --git a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/chromium/api/open-editor.png b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/chromium/api/open-editor.png
index 68f9b11d1ee..1b1609dc339 100644
Binary files a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/chromium/api/open-editor.png and b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/chromium/api/open-editor.png differ
diff --git a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/chromium/api/setContent-emptyDmn.png b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/chromium/api/setContent-emptyDmn.png
index 8d1ccdc8272..94ce58dfbb4 100644
Binary files a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/chromium/api/setContent-emptyDmn.png and b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/chromium/api/setContent-emptyDmn.png differ
diff --git a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/chromium/api/setContent-emptyDrd.png b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/chromium/api/setContent-emptyDrd.png
index c512b7293db..8280096142f 100644
Binary files a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/chromium/api/setContent-emptyDrd.png and b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/chromium/api/setContent-emptyDrd.png differ
diff --git a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/webkit/api/open-editor.png b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/webkit/api/open-editor.png
index 693e6fc27ca..c1b9c3258db 100644
Binary files a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/webkit/api/open-editor.png and b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/webkit/api/open-editor.png differ
diff --git a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/webkit/api/setContent-emptyDmn.png b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/webkit/api/setContent-emptyDmn.png
index 166d8f9965d..fc4121333b3 100644
Binary files a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/webkit/api/setContent-emptyDmn.png and b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/webkit/api/setContent-emptyDmn.png differ
diff --git a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/webkit/api/setContent-emptyDrd.png b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/webkit/api/setContent-emptyDrd.png
index e81f241a66a..cde00e4d5d0 100644
Binary files a/packages/dmn-editor-standalone/tests-e2e/__screenshots__/webkit/api/setContent-emptyDrd.png and b/packages/dmn-editor-standalone/tests-e2e/__screenshots__/webkit/api/setContent-emptyDrd.png differ
diff --git a/packages/dmn-editor/package.json b/packages/dmn-editor/package.json
index 9d557b1b750..60a36fc75ad 100644
--- a/packages/dmn-editor/package.json
+++ b/packages/dmn-editor/package.json
@@ -53,9 +53,9 @@
"@kie-tools/import-java-classes-component": "workspace:*",
"@kie-tools/pmml-editor-marshaller": "workspace:*",
"@kie-tools/xml-parser-ts": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
- "@patternfly/react-styles": "^4.92.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
+ "@patternfly/react-styles": "^5.4.0",
"@visx/text": "^3.3.0",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
diff --git a/packages/dmn-editor/src/DmnEditor.css b/packages/dmn-editor/src/DmnEditor.css
index 240e5e4a05b..bc04a031873 100644
--- a/packages/dmn-editor/src/DmnEditor.css
+++ b/packages/dmn-editor/src/DmnEditor.css
@@ -273,7 +273,7 @@
/* (end) textAnnotation, and unknown nodes */
/* (begin) palette */
-.kie-dmn-editor--drd-selector-popover .pf-c-popover__body {
+.kie-dmn-editor--drd-selector-popover .pf-v5-c-popover__body {
padding: 0;
}
.kie-dmn-editor--drd-selector {
@@ -411,7 +411,7 @@
/* (end) properties panel toggle */
/* (begin) version popover */
-.kie-dmn-editor--version-popover .pf-c-popover__body {
+.kie-dmn-editor--version-popover .pf-v5-c-popover__body {
padding: 0;
}
/* (end) version popover */
@@ -483,7 +483,7 @@
filter: brightness(90%);
}
-.kie-dmn-editor--snap-slider .pf-c-slider__value > input {
+.kie-dmn-editor--snap-slider .pf-v5-c-slider__value > input {
max-width: 60px;
min-width: 60px;
width: 60px;
@@ -674,7 +674,7 @@ the cursor is inside it. By making it adimensional, that never happens. */
/* Customizing some patternfly components is hard... */
.kie-dmn-editor--data-type-node-panel > div > div:first-of-type > div:first-of-type > div:first-of-type > button,
-.kie-dmn-editor--data-type-node-panel > div > div:first-of-type > div:first-of-type > div:first-of-type input,
+.kie-dmn-editor--data-type-node-panel > div > div:first-of-type > div:first-of-type > div:first-of-type span input,
.kie-dmn-editor--data-type-node-panel > div > div:first-of-type > div:first-of-type > div:first-of-type,
.kie-dmn-editor--data-type-node-panel > div > div:first-of-type > div:first-of-type,
.kie-dmn-editor--data-type-node-panel > div > div:first-of-type > button,
@@ -683,10 +683,10 @@ the cursor is inside it. By making it adimensional, that never happens. */
border-radius: 99999px;
outline: none;
}
-.kie-dmn-editor--data-type-node-panel .pf-c-select__toggle.pf-m-typeahead {
+.kie-dmn-editor--data-type-node-panel .pf-v5-c-select__toggle.pf-m-typeahead {
padding-left: 10px;
}
-.kie-dmn-editor--data-type-node-panel .pf-c-select__toggle-wrapper {
+.kie-dmn-editor--data-type-node-panel .pf-v5-c-select__toggle-wrapper {
padding-left: 10px;
}
.kie-dmn-editor--data-type-node-panel > div {
@@ -694,18 +694,21 @@ the cursor is inside it. By making it adimensional, that never happens. */
background: white;
box-shadow: 5px 5px 2px 0px rgb(127 127 127);
}
-.kie-dmn-editor--data-type-node-panel .pf-c-select__menu.pf-m-static {
+.kie-dmn-editor--data-type-node-panel .pf-v5-c-select__menu.pf-m-static {
text-align: left;
z-index: 999999;
}
.kie-dmn-editor--data-type-node-panel span {
height: 19px;
}
-.kie-dmn-editor--data-type-node-panel .pf-c-button.pf-c-select__toggle-button.pf-m-plain {
+.kie-dmn-editor--data-type-node-panel span.pf-v5-c-select__toggle-typeahead {
+ height: auto;
+}
+.kie-dmn-editor--data-type-node-panel .pf-v5-c-button.pf-v5-c-select__toggle-button.pf-m-plain {
margin-left: 24px;
}
-.kie-dmn-editor--data-type-node-panel .pf-c-button.pf-m-control::after,
-.kie-dmn-editor--data-type-node-panel .pf-c-select__toggle.pf-m-typeahead::before {
+.kie-dmn-editor--data-type-node-panel .pf-v5-c-button.pf-m-control::after,
+.kie-dmn-editor--data-type-node-panel .pf-v5-c-select__toggle.pf-m-typeahead::before {
border: 0;
}
/* edit button on decision and bkm nodes */
@@ -719,7 +722,7 @@ the cursor is inside it. By making it adimensional, that never happens. */
background: white;
color: black;
}
-.kie-dmn-editor--edit-expression-node-panel > .pf-c-label__content::before {
+.kie-dmn-editor--edit-expression-node-panel > .pf-v5-c-label__content::before {
border: 1px solid black;
}
.kie-dmn-editor--edit-expression-node-panel:hover {
@@ -749,9 +752,12 @@ the cursor is inside it. By making it adimensional, that never happens. */
font-weight: bold;
box-shadow: 4px 4px 2px 0px rgb(127 127 127);
}
-.kie-dmn-editor--info-label > .pf-c-label__content::before {
+.kie-dmn-editor--info-label > .pf-v5-c-label__content::before {
border: 1px solid black;
}
+.kie-dmn-editor--info-label .pf-v5-c-label__text {
+ line-height: 0;
+}
.kie-dmn-editor--info-label:hover {
filter: brightness(95%);
}
@@ -769,7 +775,7 @@ the cursor is inside it. By making it adimensional, that never happens. */
width: 160px;
justify-content: center;
}
-.kie-dmn-editor--boxed-expression-back > .pf-c-label__content::before {
+.kie-dmn-editor--boxed-expression-back > .pf-v5-c-label__content::before {
border: 1px solid black;
}
.kie-dmn-editor--boxed-expression-back:hover {
@@ -977,8 +983,8 @@ th {
text-underline-position: under;
}
-.kie-dmn-editor--data-types-container .pf-c-switch__input:disabled:checked ~ .pf-c-switch__toggle {
- background-color: var(--pf-global--primary-color--100);
+.kie-dmn-editor--data-types-container .pf-v5-c-switch__input:disabled:checked ~ .pf-v5-c-switch__toggle {
+ background-color: var(--pf-v5-global--primary-color--100);
opacity: 50%;
}
/* (end) data types */
@@ -1159,16 +1165,16 @@ th {
/* ******************************* */
/* ⬇ (begin) pf4 overrides ⬇ */
/* ******************************* */
-.pf-c-popover {
+.pf-v5-c-popover {
max-width: unset;
}
-.pf-c-truncate,
-.pf-c-truncate__start {
+.pf-v5-c-truncate,
+.pf-v5-c-truncate__start {
min-width: 0 !important;
}
-.pf-c-select__menu {
+.pf-v5-c-select__menu {
margin-top: 1px;
}
/* ⬆ (end) pf4 overrides ⬆ */
diff --git a/packages/dmn-editor/src/DmnEditorErrorFallback.tsx b/packages/dmn-editor/src/DmnEditorErrorFallback.tsx
index 2a2cdc26ad6..308dcd6893e 100644
--- a/packages/dmn-editor/src/DmnEditorErrorFallback.tsx
+++ b/packages/dmn-editor/src/DmnEditorErrorFallback.tsx
@@ -24,9 +24,10 @@ import {
EmptyState,
EmptyStateBody,
EmptyStateIcon,
- EmptyStatePrimary,
+ EmptyStateActions,
+ EmptyStateHeader,
+ EmptyStateFooter,
} from "@patternfly/react-core/dist/js/components/EmptyState";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";
import { FallbackProps } from "react-error-boundary";
import { ClipboardCopy, ClipboardCopyVariant } from "@patternfly/react-core/dist/js/components/ClipboardCopy";
@@ -47,46 +48,49 @@ export function DmnEditorErrorFallback({ error, resetErrorBoundary }: FallbackPr
return (
<Flex justifyContent={{ default: "justifyContentCenter" }} style={{ marginTop: "100px" }}>
<EmptyState style={{ maxWidth: "1280px" }}>
- <EmptyStateIcon icon={() => <div style={{ fontSize: "3em" }}>😕</div>} />
- <Title size={"lg"} headingLevel={"h4"}>
- An unexpected error happened
- </Title>
+ <EmptyStateHeader
+ titleText="An unexpected error happened"
+ icon={<EmptyStateIcon icon={() => <div style={{ fontSize: "3em" }}>😕</div>} />}
+ headingLevel={"h4"}
+ />
<EmptyStateBody>
This is a bug. Please consider reporting it so the DMN Editor can continue improving. See the details below.
</EmptyStateBody>
- <br />
- <ClipboardCopy
- isReadOnly={true}
- isExpanded={false}
- hoverTip={"Copy"}
- clickTip={"Copied"}
- variant={ClipboardCopyVariant.expansion}
- style={{ textAlign: "left", whiteSpace: "pre-wrap", fontFamily: "monospace" }}
- >
- {JSON.stringify(
- {
- name: error.name,
- message: error.message,
- cause: error.cause,
- stack: error.stack,
- },
- null,
- 2
- ).replaceAll("\\n", "\n")}
- </ClipboardCopy>
- <br />
- <EmptyStatePrimary>
- <Button variant={ButtonVariant.link} onClick={resetToLastWorkingState}>
- Try undoing last action
- </Button>
- {issueTrackerHref && (
- <a href={issueTrackerHref} target={"_blank"}>
- <Button variant={ButtonVariant.link} icon={<ExternalLinkAltIcon />}>
- File an issue...
- </Button>
- </a>
- )}
- </EmptyStatePrimary>
+ <EmptyStateFooter>
+ <br />
+ <ClipboardCopy
+ isReadOnly={true}
+ isExpanded={false}
+ hoverTip={"Copy"}
+ clickTip={"Copied"}
+ variant={ClipboardCopyVariant.expansion}
+ style={{ textAlign: "left", whiteSpace: "pre-wrap", fontFamily: "monospace" }}
+ >
+ {JSON.stringify(
+ {
+ name: error.name,
+ message: error.message,
+ cause: error.cause,
+ stack: error.stack,
+ },
+ null,
+ 2
+ ).replaceAll("\\n", "\n")}
+ </ClipboardCopy>
+ <br />
+ <EmptyStateActions>
+ <Button variant={ButtonVariant.link} onClick={resetToLastWorkingState}>
+ Try undoing last action
+ </Button>
+ {issueTrackerHref && (
+ <a href={issueTrackerHref} target={"_blank"}>
+ <Button variant={ButtonVariant.link} icon={<ExternalLinkAltIcon />}>
+ File an issue...
+ </Button>
+ </a>
+ )}
+ </EmptyStateActions>
+ </EmptyStateFooter>
</EmptyState>
</Flex>
);
diff --git a/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx b/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx
index 17349f3a642..c04153850c9 100644
--- a/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx
+++ b/packages/dmn-editor/src/boxedExpressions/BoxedExpressionScreen.tsx
@@ -463,8 +463,8 @@ export function BoxedExpressionScreen({ container }: { container: React.RefObjec
state.dispatch(state).boxedExpressionEditor.close();
});
}}
+ icon={<ArrowRightIcon style={{ transform: "scale(-1, -1)", marginRight: "8px", marginTop: "4px" }} />}
>
- <ArrowRightIcon style={{ transform: "scale(-1, -1)", marginRight: "12px" }} />
<p>Back to Diagram</p>
</Label>
</FlexItem>
@@ -504,7 +504,7 @@ export function BoxedExpressionScreen({ container }: { container: React.RefObjec
});
}}
>
- <InfoIcon size={"sm"} />
+ <InfoIcon />
</button>
</aside>
</Flex>
diff --git a/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintDateTime.tsx b/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintDateTime.tsx
index 08e4f3dfda5..fe2217f49d4 100644
--- a/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintDateTime.tsx
+++ b/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintDateTime.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
-import * as React from "react";
+import React, { useState } from "react";
import { useCallback, useMemo } from "react";
import "./ConstraintDateTime.css";
import { ConstraintProps } from "./Constraint";
@@ -27,11 +27,12 @@ import { ConstraintDate } from "./ConstraintDate";
export function ConstraintDateTime({ value, onChange, isValid, ...props }: ConstraintProps) {
const date = useMemo(() => value.split("T")?.[0] ?? "", [value]);
const time = useMemo(() => value.split("T")?.[1] ?? "", [value]);
+ const [internalTime, setInternalTime] = useState<string>(time);
const onInternalChange = useCallback(
(args: { date?: string; time?: string }) => {
const newDate = args.date ?? date;
- const newTime = args.time ?? time;
+ const newTime = args.time ?? internalTime ?? time;
if (newDate !== "" && newTime === "") {
onChange(`${newDate}`);
}
@@ -39,7 +40,7 @@ export function ConstraintDateTime({ value, onChange, isValid, ...props }: Const
onChange(`${newDate}T${newTime}`);
}
},
- [date, onChange, time]
+ [date, onChange, time, internalTime]
);
const onChangeDate = useCallback(
@@ -52,6 +53,7 @@ export function ConstraintDateTime({ value, onChange, isValid, ...props }: Const
const onChangeTime = useCallback(
(value: string) => {
onInternalChange({ time: value });
+ setInternalTime(value);
},
[onInternalChange]
);
diff --git a/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintDateTimeDuration.tsx b/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintDateTimeDuration.tsx
index 8b9c5dd41be..3fa9a16ea56 100644
--- a/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintDateTimeDuration.tsx
+++ b/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintDateTimeDuration.tsx
@@ -102,7 +102,7 @@ export function ConstraintDateTimeDuration({
placeholder={"Days"}
className={`kie-dmn-editor--constraint-input ${isValid ? "" : "kie-dmn-editor--constraint-invalid"}`}
value={days}
- onChange={onDaysChange}
+ onChange={(event, val) => onDaysChange(val, event)}
isDisabled={isDisabled}
autoFocus={true}
/>
@@ -115,7 +115,7 @@ export function ConstraintDateTimeDuration({
placeholder={"Hours"}
className={`kie-dmn-editor--constraint-input ${isValid ? "" : "kie-dmn-editor--constraint-invalid"}`}
value={hours}
- onChange={onHoursChange}
+ onChange={(event, val) => onHoursChange(val, event)}
isDisabled={isDisabled}
/>
</div>
@@ -127,7 +127,7 @@ export function ConstraintDateTimeDuration({
placeholder={"Minutes"}
className={`kie-dmn-editor--constraint-input ${isValid ? "" : "kie-dmn-editor--constraint-invalid"}`}
value={minutes}
- onChange={onMinutesChange}
+ onChange={(event, val) => onMinutesChange(val, event)}
isDisabled={isDisabled}
/>
</div>
@@ -139,7 +139,7 @@ export function ConstraintDateTimeDuration({
placeholder={"Seconds"}
className={`kie-dmn-editor--constraint-input ${isValid ? "" : "kie-dmn-editor--constraint-invalid"}`}
value={seconds}
- onChange={onSecondsChange}
+ onChange={(event, val) => onSecondsChange(val, event)}
isDisabled={isDisabled}
/>
</div>
diff --git a/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintTime.tsx b/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintTime.tsx
index 2a5cad9c76e..bcbcd552a58 100644
--- a/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintTime.tsx
+++ b/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintTime.tsx
@@ -23,7 +23,7 @@ import { TimePicker } from "@patternfly/react-core/dist/js/components/TimePicker
import "./Constraint.css";
import "./ConstraintTime.css";
import { ConstraintProps } from "./Constraint";
-import { Select, SelectOption, SelectVariant } from "@patternfly/react-core/dist/js/components/Select";
+import { Select, SelectOption, SelectVariant } from "@patternfly/react-core/deprecated";
import { useDmnEditor } from "../../DmnEditorContext";
import { useInViewSelect } from "../../responsiveness/useInViewSelect";
import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
@@ -175,7 +175,7 @@ export function ConstraintTime({ value, onChange, isValid }: ConstraintProps) {
variant={SelectVariant.single}
placeholderText="Select timezone"
aria-label="Select timezone"
- onToggle={(isExpanded) => setSelectTimezoneOpen(isExpanded)}
+ onToggle={(_event, isExpanded) => setSelectTimezoneOpen(isExpanded)}
onSelect={onSelectTimezone}
selections={timezone}
isOpen={isSelectTimezoneOpen}
diff --git a/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintYearsMonthsDuration.tsx b/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintYearsMonthsDuration.tsx
index 06bbfb73034..dc7ff835f6a 100644
--- a/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintYearsMonthsDuration.tsx
+++ b/packages/dmn-editor/src/dataTypes/ConstraintComponents/ConstraintYearsMonthsDuration.tsx
@@ -55,7 +55,7 @@ export function ConstraintYearsMonthsDuration({
);
const onYearsChange = useCallback(
- (newValue: string, e: React.FormEvent<HTMLInputElement>) => {
+ (e: React.FormEvent<HTMLInputElement>, newValue: string) => {
onInternalChange({ years: newValue });
setFocusOwner?.(e.currentTarget.id);
},
@@ -63,7 +63,7 @@ export function ConstraintYearsMonthsDuration({
);
const onMonthsChange = useCallback(
- (newValue: string, e: React.FormEvent<HTMLInputElement>) => {
+ (e: React.FormEvent<HTMLInputElement>, newValue: string) => {
onInternalChange({ months: newValue });
setFocusOwner?.(e.currentTarget.id);
},
diff --git a/packages/dmn-editor/src/dataTypes/Constraints.tsx b/packages/dmn-editor/src/dataTypes/Constraints.tsx
index 5146bedf3ac..75ae05a33e0 100644
--- a/packages/dmn-editor/src/dataTypes/Constraints.tsx
+++ b/packages/dmn-editor/src/dataTypes/Constraints.tsx
@@ -272,7 +272,7 @@ export const constraintTypeHelper = (
return (
<TextInput
autoFocus={props.autoFocus}
- onChange={props.onChange}
+ onChange={(_event, val) => props.onChange(val)}
id={props.id}
isDisabled={props.isDisabled}
value={props.value}
@@ -287,7 +287,7 @@ export const constraintTypeHelper = (
return (
<TextInput
autoFocus={props.autoFocus}
- onChange={props.onChange}
+ onChange={(_event, val) => props.onChange(val)}
id={props.id}
isDisabled={props.isDisabled}
value={props.value}
@@ -778,7 +778,7 @@ export function Constraints({
text={ConstraintsType.NONE}
buttonId={ConstraintsType.NONE}
isSelected={internalSelectedConstraint.selectedConstraint === ConstraintsType.NONE}
- onChange={onToggleGroupChangeInternal}
+ onChange={(event, val) => onToggleGroupChangeInternal(val, event)}
isDisabled={isReadOnly}
/>
<ToggleGroupItem
@@ -790,21 +790,21 @@ export function Constraints({
text={ConstraintsType.EXPRESSION}
buttonId={ConstraintsType.EXPRESSION}
isSelected={internalSelectedConstraint.selectedConstraint === ConstraintsType.EXPRESSION}
- onChange={onToggleGroupChangeInternal}
+ onChange={(event, val) => onToggleGroupChangeInternal(val, event)}
isDisabled={isReadOnly || !isConstraintEnabled.expression}
/>
<ToggleGroupItem
text={ConstraintsType.ENUMERATION}
buttonId={ConstraintsType.ENUMERATION}
isSelected={internalSelectedConstraint.selectedConstraint === ConstraintsType.ENUMERATION}
- onChange={onToggleGroupChangeInternal}
+ onChange={(event, val) => onToggleGroupChangeInternal(val, event)}
isDisabled={isReadOnly || !isConstraintEnabled.enumeration}
/>
<ToggleGroupItem
text={ConstraintsType.RANGE}
buttonId={ConstraintsType.RANGE}
isSelected={internalSelectedConstraint.selectedConstraint === ConstraintsType.RANGE}
- onChange={onToggleGroupChangeInternal}
+ onChange={(event, val) => onToggleGroupChangeInternal(val, event)}
isDisabled={isReadOnly || !isConstraintEnabled.range}
/>
</ToggleGroup>
diff --git a/packages/dmn-editor/src/dataTypes/ConstraintsEnum.tsx b/packages/dmn-editor/src/dataTypes/ConstraintsEnum.tsx
index 8d3c8e42e55..655d886c68a 100644
--- a/packages/dmn-editor/src/dataTypes/ConstraintsEnum.tsx
+++ b/packages/dmn-editor/src/dataTypes/ConstraintsEnum.tsx
@@ -246,7 +246,7 @@ function EnumElement({
icon={<TimesIcon />}
onClick={() => onRemove()}
/>
- {hovered && <Tooltip content={"Remove"} reference={removeButtonRef} />}
+ {hovered && <Tooltip content={"Remove"} triggerRef={removeButtonRef} />}
</div>
);
}
diff --git a/packages/dmn-editor/src/dataTypes/ConstraintsExpression.tsx b/packages/dmn-editor/src/dataTypes/ConstraintsExpression.tsx
index 791facf420c..23d220956ac 100644
--- a/packages/dmn-editor/src/dataTypes/ConstraintsExpression.tsx
+++ b/packages/dmn-editor/src/dataTypes/ConstraintsExpression.tsx
@@ -114,7 +114,7 @@ export function ConstraintsExpression({
(value ? (
<span
data-testid={"kie-tools--dmn-editor--readonly-expression-constraint-with-value"}
- className="editable-cell-value pf-u-text-break-word"
+ className="editable-cell-value pf-v5-u-text-break-word"
dangerouslySetInnerHTML={{ __html: preview }}
/>
) : (
diff --git a/packages/dmn-editor/src/dataTypes/DataTypePanel.tsx b/packages/dmn-editor/src/dataTypes/DataTypePanel.tsx
index 59d03cb8cf6..0c03bed9852 100644
--- a/packages/dmn-editor/src/dataTypes/DataTypePanel.tsx
+++ b/packages/dmn-editor/src/dataTypes/DataTypePanel.tsx
@@ -29,12 +29,7 @@ import * as React from "react";
import { useCallback, useMemo, useState } from "react";
import { useDmnEditorStore, useDmnEditorStoreApi } from "../store/StoreContext";
import { TypeRefSelector } from "./TypeRefSelector";
-import {
- Dropdown,
- DropdownItem,
- DropdownSeparator,
- KebabToggle,
-} from "@patternfly/react-core/dist/js/components/Dropdown";
+import { Dropdown, DropdownItem, DropdownSeparator, KebabToggle } from "@patternfly/react-core/deprecated";
import { DataType, DataTypeIndex, EditItemDefinition, AddItemComponent } from "./DataTypes";
import { DataTypeName } from "./DataTypeName";
import { ItemComponentsTable } from "./ItemComponentsTable";
@@ -217,7 +212,7 @@ export function DataTypePanel({
direction={{ default: "row" }}
>
<FlexItem>
- <Flex direction={{ default: "column" }}>
+ <Flex direction={{ default: "column" }} gap={{ default: "gapMd" }}>
<FlexItem>
<Flex direction={{ default: "row" }}>
{dataType.namespace !== thisDmnsNamespace && (
@@ -272,7 +267,9 @@ export function DataTypePanel({
<span>|</span>
<Button variant={ButtonVariant.link}>View usages</Button> */}
<Dropdown
- toggle={<KebabToggle id={"toggle-kebab-top-level"} onToggle={setTopLevelDropdownOpen} />}
+ toggle={
+ <KebabToggle id={"toggle-kebab-top-level"} onToggle={(_event, val) => setTopLevelDropdownOpen(val)} />
+ }
onSelect={() => setTopLevelDropdownOpen(false)}
isOpen={topLevelDropdownOpen}
menuAppendTo={document.body}
@@ -327,24 +324,23 @@ export function DataTypePanel({
</FlexItem>
</Flex>
{/* This padding was necessary because PF4 has a @media query that doesn't run inside iframes, for some reason. */}
- <PageSection style={{ padding: "24px" }}>
+ <PageSection style={{ padding: "24px" }} variant="light">
<TextArea
isDisabled={isReadOnly}
key={dataType.itemDefinition["@_id"]}
value={dataType.itemDefinition.description?.__$$text}
- onChange={changeDescription}
+ onChange={(_event, val) => changeDescription(val)}
placeholder={"Enter a description..."}
resizeOrientation={"vertical"}
aria-label={"Data type description"}
/>
<br />
- <br />
<Divider inset={{ default: "insetMd" }} />
<br />
<Switch
label={"Is collection?"}
isChecked={!!dataType.itemDefinition["@_isCollection"]}
- onChange={toggleCollection}
+ onChange={(_event, val) => toggleCollection(val)}
isDisabled={isReadOnly}
/>
<br />
@@ -352,7 +348,7 @@ export function DataTypePanel({
<Switch
label={"Is struct?"}
isChecked={isStruct(dataType.itemDefinition)}
- onChange={toggleStruct}
+ onChange={(_event, val) => toggleStruct(val)}
isDisabled={isReadOnly}
></Switch>
<br />
diff --git a/packages/dmn-editor/src/dataTypes/DataTypes.tsx b/packages/dmn-editor/src/dataTypes/DataTypes.tsx
index 4bb2bd9377b..3af7e718c4c 100644
--- a/packages/dmn-editor/src/dataTypes/DataTypes.tsx
+++ b/packages/dmn-editor/src/dataTypes/DataTypes.tsx
@@ -46,9 +46,9 @@ import {
DropdownPosition,
DropdownToggle,
DropdownToggleAction,
-} from "@patternfly/react-core/dist/js/components/Dropdown";
+} from "@patternfly/react-core/deprecated";
import { PasteIcon } from "@patternfly/react-icons/dist/js/icons/paste-icon";
-import { InputGroup } from "@patternfly/react-core/dist/js/components/InputGroup";
+import { InputGroup, InputGroupItem } from "@patternfly/react-core/dist/js/components/InputGroup";
import { SearchInput } from "@patternfly/react-core/dist/js/components/SearchInput";
import {
ImportJavaClassesWizard,
@@ -241,12 +241,14 @@ export function DataTypes() {
className={"kie-dmn-editor--data-types-filter kie-dmn-editor--sticky-top-glass-header"}
>
<InputGroup>
- <SearchInput
- placeholder="Filter..."
- value={filter}
- onChange={(_event, value) => setFilter(value)}
- onClear={() => setFilter("")}
- />
+ <InputGroupItem isFill>
+ <SearchInput
+ placeholder="Filter..."
+ value={filter}
+ onChange={(_event, value) => setFilter(value)}
+ onClear={() => setFilter("")}
+ />
+ </InputGroupItem>
{!isReadOnly && (
<Dropdown
@@ -266,7 +268,7 @@ export function DataTypes() {
</DropdownToggleAction>,
]}
splitButtonVariant="action"
- onToggle={setAddDataTypeDropdownOpen}
+ onToggle={(_event, val) => setAddDataTypeDropdownOpen(val)}
/>
}
position={DropdownPosition.right}
diff --git a/packages/dmn-editor/src/dataTypes/DataTypesEmptyState.tsx b/packages/dmn-editor/src/dataTypes/DataTypesEmptyState.tsx
index 3e71841dc0f..76107cf9e72 100644
--- a/packages/dmn-editor/src/dataTypes/DataTypesEmptyState.tsx
+++ b/packages/dmn-editor/src/dataTypes/DataTypesEmptyState.tsx
@@ -24,10 +24,10 @@ import {
EmptyState,
EmptyStateBody,
EmptyStateIcon,
- EmptyStatePrimary,
- EmptyStateSecondaryActions,
+ EmptyStateActions,
+ EmptyStateHeader,
+ EmptyStateFooter,
} from "@patternfly/react-core/dist/js/components/EmptyState";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
import { CubesIcon } from "@patternfly/react-icons/dist/js/icons/cubes-icon";
import { PasteIcon } from "@patternfly/react-icons/dist/js/icons/paste-icon";
import { useSettings } from "../settings/DmnEditorSettingsContext";
@@ -39,40 +39,43 @@ export function DataTypesEmptyState({ onAdd, onPaste }: { onAdd: () => void; onP
return (
<Flex justifyContent={{ default: "justifyContentCenter" }} style={{ marginTop: "100px" }}>
<EmptyState style={{ maxWidth: "1280px" }}>
- <EmptyStateIcon icon={CubesIcon} />
- <Title size={"lg"} headingLevel={"h4"}>
- {`No custom data types have been defined.`}
- </Title>
+ <EmptyStateHeader
+ titleText={<>{`No custom data types have been defined.`}</>}
+ icon={<EmptyStateIcon icon={CubesIcon} />}
+ headingLevel={"h4"}
+ />
<EmptyStateBody>
{`Data types are referenced in the input and output values for decision tables. Custom data types allow you to reference more complex data types, beyond the simple "default" types.`}
</EmptyStateBody>
- <br />
- {!isReadOnly && (
- <>
- <EmptyStatePrimary>
- <Button variant={ButtonVariant.primary} onClick={onAdd}>
- Create a custom data type
- </Button>
- </EmptyStatePrimary>
- <br />
- {isImportDataTypesFromJavaClassesSupported && javaCodeCompletionService && (
- <>
- or
- <br />
- <br />
- <ImportJavaClassesWrapper javaCodeCompletionService={javaCodeCompletionService} />
- <br />
- <br />
- </>
- )}
- or
- <EmptyStateSecondaryActions>
- <Button variant={ButtonVariant.link} onClick={onPaste} icon={<PasteIcon />}>
- Paste data type
- </Button>
- </EmptyStateSecondaryActions>
- </>
- )}
+ <EmptyStateFooter>
+ <br />
+ {!isReadOnly && (
+ <>
+ <EmptyStateActions>
+ <Button variant={ButtonVariant.primary} onClick={onAdd}>
+ Create a custom data type
+ </Button>
+ </EmptyStateActions>
+ <br />
+ {isImportDataTypesFromJavaClassesSupported && javaCodeCompletionService && (
+ <>
+ or
+ <br />
+ <br />
+ <ImportJavaClassesWrapper javaCodeCompletionService={javaCodeCompletionService} />
+ <br />
+ <br />
+ </>
+ )}
+ or
+ <EmptyStateActions>
+ <Button variant={ButtonVariant.link} onClick={onPaste} icon={<PasteIcon />}>
+ Paste data type
+ </Button>
+ </EmptyStateActions>
+ </>
+ )}
+ </EmptyStateFooter>
</EmptyState>
</Flex>
);
diff --git a/packages/dmn-editor/src/dataTypes/ImportJavaClasses.tsx b/packages/dmn-editor/src/dataTypes/ImportJavaClasses.tsx
index 897b620bbc5..811c7863d50 100644
--- a/packages/dmn-editor/src/dataTypes/ImportJavaClasses.tsx
+++ b/packages/dmn-editor/src/dataTypes/ImportJavaClasses.tsx
@@ -19,8 +19,8 @@
import * as React from "react";
import { useCallback, useState } from "react";
-import { DropdownItem } from "@patternfly/react-core/dist/js/components/Dropdown";
-import { Spinner } from "@patternfly/react-core/dist/esm/components/Spinner";
+import { DropdownItem } from "@patternfly/react-core/dist/js/deprecated/components/Dropdown/DropdownItem";
+import { Spinner } from "@patternfly/react-core/dist/js/components/Spinner";
import PlusIcon from "@patternfly/react-icons/dist/js/icons/plus-icon";
import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
import { Modal, ModalVariant } from "@patternfly/react-core/dist/js/components/Modal";
diff --git a/packages/dmn-editor/src/dataTypes/ItemComponentsTable.tsx b/packages/dmn-editor/src/dataTypes/ItemComponentsTable.tsx
index 8a4ec8c3fad..2aa42283c11 100644
--- a/packages/dmn-editor/src/dataTypes/ItemComponentsTable.tsx
+++ b/packages/dmn-editor/src/dataTypes/ItemComponentsTable.tsx
@@ -28,12 +28,7 @@ import * as React from "react";
import { useCallback, useMemo } from "react";
import { useDmnEditorStore, useDmnEditorStoreApi } from "../store/StoreContext";
import { TypeRefSelector } from "./TypeRefSelector";
-import {
- Dropdown,
- DropdownItem,
- DropdownSeparator,
- KebabToggle,
-} from "@patternfly/react-core/dist/js/components/Dropdown";
+import { Dropdown, DropdownItem, DropdownSeparator, KebabToggle } from "@patternfly/react-core/deprecated";
import { ImportIcon } from "@patternfly/react-icons/dist/js/icons/import-icon";
import { AngleDownIcon } from "@patternfly/react-icons/dist/js/icons/angle-down-icon";
import { AngleRightIcon } from "@patternfly/react-icons/dist/js/icons/angle-right-icon";
@@ -185,7 +180,7 @@ export function ItemComponentsTable({
toggle={
<KebabToggle
id={"toggle-kebab-properties-table"}
- onToggle={(isOpen) => setDropdownOpenFor(isOpen ? parent.itemDefinition["@_id"] : undefined)}
+ onToggle={(_event, isOpen) => setDropdownOpenFor(isOpen ? parent.itemDefinition["@_id"] : undefined)}
/>
}
onSelect={() => setDropdownOpenFor(undefined)}
@@ -406,7 +401,7 @@ export function ItemComponentsTable({
aria-label={"Is struct?"}
isDisabled={isReadOnly}
isChecked={isStruct(dt.itemDefinition)}
- onChange={(isChecked) => {
+ onChange={(_event, isChecked) => {
editItemDefinition(dt.itemDefinition["@_id"]!, (itemDefinition, items) => {
if (isChecked) {
itemDefinition.typeRef = undefined;
@@ -452,7 +447,7 @@ export function ItemComponentsTable({
aria-label={"Is collection?"}
isDisabled={isReadOnly}
isChecked={dt.itemDefinition["@_isCollection"] ?? false}
- onChange={(isChecked) => {
+ onChange={(_event, isChecked) => {
editItemDefinition(dt.itemDefinition["@_id"]!, (itemDefinition, items) => {
itemDefinition["@_isCollection"] = isChecked;
itemDefinition.typeConstraint = undefined;
@@ -483,7 +478,9 @@ export function ItemComponentsTable({
toggle={
<KebabToggle
id={"toggle-kebab-" + dt.itemDefinition["@_id"]}
- onToggle={(isOpen) => setDropdownOpenFor(isOpen ? dt.itemDefinition["@_id"] : undefined)}
+ onToggle={(_event, isOpen) =>
+ setDropdownOpenFor(isOpen ? dt.itemDefinition["@_id"] : undefined)
+ }
/>
}
onSelect={() => setDropdownOpenFor(undefined)}
diff --git a/packages/dmn-editor/src/dataTypes/TypeRefSelector.tsx b/packages/dmn-editor/src/dataTypes/TypeRefSelector.tsx
index a0be25f0a88..86f593b169f 100644
--- a/packages/dmn-editor/src/dataTypes/TypeRefSelector.tsx
+++ b/packages/dmn-editor/src/dataTypes/TypeRefSelector.tsx
@@ -18,7 +18,7 @@
*/
import { DmnBuiltInDataType, generateUuid } from "@kie-tools/boxed-expression-component/dist/api";
-import { Select, SelectGroup, SelectOption, SelectVariant } from "@patternfly/react-core/dist/js/components/Select";
+import { Select, SelectGroup, SelectOption, SelectVariant } from "@patternfly/react-core/deprecated";
import * as React from "react";
import { useCallback, useRef, useState } from "react";
import { TypeRefLabel } from "./TypeRefLabel";
@@ -134,7 +134,7 @@ export function TypeRefSelector({
isDisabled={isDisabled}
variant={SelectVariant.typeahead}
typeAheadAriaLabel={DmnBuiltInDataType.Undefined}
- onToggle={_onToggle}
+ onToggle={(_event, val) => _onToggle(val)}
onSelect={(e, v) => {
_onToggle(false);
onChange(v === DmnBuiltInDataType.Undefined ? undefined : (v as string));
diff --git a/packages/dmn-editor/src/diagram/Diagram.tsx b/packages/dmn-editor/src/diagram/Diagram.tsx
index d4ed8c22684..cfa68e65248 100644
--- a/packages/dmn-editor/src/diagram/Diagram.tsx
+++ b/packages/dmn-editor/src/diagram/Diagram.tsx
@@ -34,9 +34,11 @@ import { buildXmlQName } from "@kie-tools/xml-parser-ts/dist/qNames";
import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";
import {
EmptyState,
- EmptyStateBody,
EmptyStateIcon,
- EmptyStatePrimary,
+ EmptyStateBody,
+ EmptyStateFooter,
+ EmptyStateHeader,
+ EmptyStateActions,
EmptyStateVariant,
} from "@patternfly/react-core/dist/js/components/EmptyState";
import { Label } from "@patternfly/react-core/dist/js/components/Label";
@@ -128,6 +130,7 @@ import { applyAutoLayoutToDrd } from "../mutations/applyAutoLayoutToDrd";
import { useSettings } from "../settings/DmnEditorSettingsContext";
import { EvaluationHighlightsBadge } from "../evaluationHighlights/EvaluationHighlightsBadge";
import { Flex } from "@patternfly/react-core/dist/js/layouts/Flex";
+import { Text } from "@patternfly/react-core/dist/js/components/Text";
const isFirefox = typeof (window as any).InstallTrigger !== "undefined"; // See https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browsers
@@ -1370,96 +1373,100 @@ function DmnDiagramWithoutDrd() {
}}
/>
- <EmptyState variant={EmptyStateVariant.small}>
- <EmptyStateIcon icon={BlueprintIcon} />
- <Title size={"md"} headingLevel={"h4"}>
- Empty Diagram
- </Title>
+ <EmptyState variant={EmptyStateVariant.sm}>
+ <EmptyStateHeader icon={<EmptyStateIcon icon={BlueprintIcon} />}>
+ <Title size={"md"} headingLevel={"h4"}>
+ Empty Diagram
+ </Title>
+ </EmptyStateHeader>
<EmptyStateBody>
The current DMN does not have any Diagram associated with it. Do you want to auto-generate it?
</EmptyStateBody>
+ <EmptyStateFooter>
+ <EmptyStateActions>
+ <Button
+ variant={ButtonVariant.link}
+ isDisabled={settings.isReadOnly}
+ icon={<OptimizeIcon />}
+ onClick={async () => {
+ const { computed, ...state } = dmnEditorStoreApi.getState();
+ const dereferencedState: State = { computed, ...JSON.parse(JSON.stringify(state)) };
+
+ const externalModelTypesByNamespace = dereferencedState
+ .computed(dereferencedState)
+ .getDirectlyIncludedExternalModelsByNamespace(externalModelsByNamespace);
+
+ autoGenerateDrd({
+ model: dereferencedState.dmn.model,
+ diagram: dereferencedState.diagram,
+ externalModelsByNamespace,
+ externalModelTypesByNamespace,
+ });
- <EmptyStatePrimary>
- <Button
- variant={ButtonVariant.link}
- isDisabled={settings.isReadOnly}
- icon={<OptimizeIcon />}
- onClick={async () => {
- const { computed, ...state } = dmnEditorStoreApi.getState();
- const dereferencedState: State = { computed, ...JSON.parse(JSON.stringify(state)) };
-
- const externalModelTypesByNamespace = dereferencedState
- .computed(dereferencedState)
- .getDirectlyIncludedExternalModelsByNamespace(externalModelsByNamespace);
-
- autoGenerateDrd({
- model: dereferencedState.dmn.model,
- diagram: dereferencedState.diagram,
- externalModelsByNamespace,
- externalModelTypesByNamespace,
- });
-
- const snapGrid = dereferencedState.diagram.snapGrid;
- const nodesById = dereferencedState
- .computed(dereferencedState)
- .getDiagramData(externalModelsByNamespace).nodesById;
- const edgesById = dereferencedState
- .computed(dereferencedState)
- .getDiagramData(externalModelsByNamespace).edgesById;
- const nodes = dereferencedState
- .computed(dereferencedState)
- .getDiagramData(externalModelsByNamespace).nodes;
- const edges = dereferencedState
- .computed(dereferencedState)
- .getDiagramData(externalModelsByNamespace).edges;
- const drgEdges = dereferencedState
- .computed(dereferencedState)
- .getDiagramData(externalModelsByNamespace).drgEdges;
- const isAlternativeInputDataShape = dereferencedState
- .computed(dereferencedState)
- .isAlternativeInputDataShape();
- const dmnShapesByHref = dereferencedState.computed(dereferencedState).indexedDrd().dmnShapesByHref;
-
- // Auto layout the new DRD
- const { __readonly_autoLayoutedInfo, __readonly_parentNodesById } = await getAutoLayoutedInfo({
- __readonly_snapGrid: snapGrid,
- __readonly_nodesById: nodesById,
- __readonly_edgesById: edgesById,
- __readonly_nodes: nodes,
- __readonly_drgEdges: drgEdges,
- __readonly_isAlternativeInputDataShape: isAlternativeInputDataShape,
- });
-
- dmnEditorStoreApi.setState((s) => {
- s.diagram.autoLayout.canAutoGenerateDrd = false;
- applyAutoLayoutToDrd({
- state: dereferencedState,
- __readonly_dmnShapesByHref: dmnShapesByHref,
- __readonly_edges: edges,
- __readonly_edgesById: edgesById,
+ const snapGrid = dereferencedState.diagram.snapGrid;
+ const nodesById = dereferencedState
+ .computed(dereferencedState)
+ .getDiagramData(externalModelsByNamespace).nodesById;
+ const edgesById = dereferencedState
+ .computed(dereferencedState)
+ .getDiagramData(externalModelsByNamespace).edgesById;
+ const nodes = dereferencedState
+ .computed(dereferencedState)
+ .getDiagramData(externalModelsByNamespace).nodes;
+ const edges = dereferencedState
+ .computed(dereferencedState)
+ .getDiagramData(externalModelsByNamespace).edges;
+ const drgEdges = dereferencedState
+ .computed(dereferencedState)
+ .getDiagramData(externalModelsByNamespace).drgEdges;
+ const isAlternativeInputDataShape = dereferencedState
+ .computed(dereferencedState)
+ .isAlternativeInputDataShape();
+ const dmnShapesByHref = dereferencedState.computed(dereferencedState).indexedDrd().dmnShapesByHref;
+
+ // Auto layout the new DRD
+ const { __readonly_autoLayoutedInfo, __readonly_parentNodesById } = await getAutoLayoutedInfo({
+ __readonly_snapGrid: snapGrid,
__readonly_nodesById: nodesById,
- __readonly_autoLayoutedInfo,
- __readonly_parentNodesById,
- __readonly_drdIndex: dereferencedState.computed(dereferencedState).getDrdIndex(),
- __readonly_dmnObjectNamespace: dereferencedState.dmn.model.definitions["@_namespace"],
- __readonly_externalDmnsIndex: dereferencedState
- .computed(dereferencedState)
- .getDirectlyIncludedExternalModelsByNamespace(externalModelsByNamespace).dmns,
- __readonly_externalModelsByNamespace: externalModelsByNamespace,
+ __readonly_edgesById: edgesById,
+ __readonly_nodes: nodes,
+ __readonly_drgEdges: drgEdges,
+ __readonly_isAlternativeInputDataShape: isAlternativeInputDataShape,
});
- s.dmn.model = dereferencedState.dmn.model;
- });
- }}
+
+ dmnEditorStoreApi.setState((s) => {
+ s.diagram.autoLayout.canAutoGenerateDrd = false;
+ applyAutoLayoutToDrd({
+ state: dereferencedState,
+ __readonly_dmnShapesByHref: dmnShapesByHref,
+ __readonly_edges: edges,
+ __readonly_edgesById: edgesById,
+ __readonly_nodesById: nodesById,
+ __readonly_autoLayoutedInfo,
+ __readonly_parentNodesById,
+ __readonly_drdIndex: dereferencedState.computed(dereferencedState).getDrdIndex(),
+ __readonly_dmnObjectNamespace: dereferencedState.dmn.model.definitions["@_namespace"],
+ __readonly_externalDmnsIndex: dereferencedState
+ .computed(dereferencedState)
+ .getDirectlyIncludedExternalModelsByNamespace(externalModelsByNamespace).dmns,
+ __readonly_externalModelsByNamespace: externalModelsByNamespace,
+ });
+ s.dmn.model = dereferencedState.dmn.model;
+ });
+ }}
+ >
+ Auto-generate Diagram
+ </Button>
+ </EmptyStateActions>
+
+ <br />
+ <Text
+ style={{ fontSize: "12px", wordBreak: "break-word", color: "var(--pf-v5-c-empty-state__body--Color)" }}
>
- Auto-generate Diagram
- </Button>
- </EmptyStatePrimary>
-
- <br />
- <EmptyStateBody style={{ fontSize: "12px", wordBreak: "break-word" }}>
- Auto generating the diagram will automatically place the nodes with the default size and shape. You can also
- manually build your diagram using the "DRG Nodes" option from the palette.
- </EmptyStateBody>
+ Auto generating the diagram will automatically place the nodes with the default size and shape. You can
+ also manually build your diagram using the "DRG Nodes" option from the palette.
+ </Text>
+ </EmptyStateFooter>
</EmptyState>
</div>
</Bullseye>
@@ -1503,10 +1510,12 @@ function DmnDiagramEmptyState({
/>
<EmptyState>
- <EmptyStateIcon icon={MousePointerIcon} />
- <Title size={"md"} headingLevel={"h4"}>
- {`This DMN's Diagram is empty`}
- </Title>
+ <EmptyStateHeader>
+ <EmptyStateIcon icon={MousePointerIcon} />
+ <Title size={"md"} headingLevel={"h4"}>
+ {`This DMN's Diagram is empty`}
+ </Title>
+ </EmptyStateHeader>
{isReadOnly ? (
<>
<EmptyStateBody>Make sure the DMN has nodes or try opening another file</EmptyStateBody>
@@ -1516,127 +1525,131 @@ function DmnDiagramEmptyState({
<EmptyStateBody>Start by dragging nodes from the Palette</EmptyStateBody>
<br />
<EmptyStateBody>or</EmptyStateBody>
- <EmptyStatePrimary>
- <Button
- variant={ButtonVariant.link}
- icon={<TableIcon />}
- onClick={() => {
- dmnEditorStoreApi.setState((state) => {
- const { href: decisionNodeHref } = addStandaloneNode({
- definitions: state.dmn.model.definitions,
- drdIndex: state.computed(state).getDrdIndex(),
- newNode: {
- type: NODE_TYPES.decision,
- bounds: {
- "@_x": 100,
- "@_y": 100,
- "@_width": DEFAULT_NODE_SIZES[NODE_TYPES.decision]({
- snapGrid: state.diagram.snapGrid,
- })["@_width"],
- "@_height": DEFAULT_NODE_SIZES[NODE_TYPES.decision]({
- snapGrid: state.diagram.snapGrid,
- })["@_height"],
- },
- },
- externalModelsByNamespace,
- });
-
- const drgElementIndex = (state.dmn.model.definitions.drgElement ?? []).length - 1;
-
- const defaultWidthsById = new Map<string, number[]>();
- const defaultExpression = getDefaultBoxedExpression({
- logicType: "decisionTable",
- allTopLevelDataTypesByFeelName: new Map(),
- typeRef: undefined,
- getDefaultColumnWidth,
- widthsById: defaultWidthsById,
- });
-
- updateExpression({
- definitions: state.dmn.model.definitions,
- drgElementIndex,
- expression: {
- ...defaultExpression,
- "@_label": "New Decision",
- },
- externalDmnModelsByNamespaceMap,
- });
-
- updateExpressionWidths({
- definitions: state.dmn.model.definitions,
- drdIndex: state.computed(state).getDrdIndex(),
- widthsById: defaultWidthsById,
- });
-
- state.dispatch(state).boxedExpressionEditor.open(parseXmlHref(decisionNodeHref).id);
- });
- }}
- >
- New Decision Table...
- </Button>
- <br />
- <Button
- variant={ButtonVariant.link}
- icon={<BlueprintIcon />}
- onClick={() => {
- dmnEditorStoreApi.setState((state) => {
- const inputDataNodeBounds: DC__Bounds = {
- "@_x": 100,
- "@_y": 300,
- "@_width": DEFAULT_NODE_SIZES[NODE_TYPES.inputData]({
- snapGrid: state.diagram.snapGrid,
- isAlternativeInputDataShape: state.computed(state).isAlternativeInputDataShape(),
- })["@_width"],
- "@_height": DEFAULT_NODE_SIZES[NODE_TYPES.inputData]({
- snapGrid: state.diagram.snapGrid,
- isAlternativeInputDataShape: state.computed(state).isAlternativeInputDataShape(),
- })["@_height"],
- };
-
- const { href: inputDataNodeHref, shapeId: inputDataShapeId } = addStandaloneNode({
- definitions: state.dmn.model.definitions,
- drdIndex: state.computed(state).getDrdIndex(),
- newNode: {
- type: NODE_TYPES.inputData,
- bounds: inputDataNodeBounds,
- },
- externalModelsByNamespace,
- });
-
- const { href: decisionNodeHref } = addConnectedNode({
- definitions: state.dmn.model.definitions,
- drdIndex: state.computed(state).getDrdIndex(),
- edgeType: EDGE_TYPES.informationRequirement,
- sourceNode: {
- href: inputDataNodeHref,
- type: NODE_TYPES.inputData,
- bounds: inputDataNodeBounds,
- shapeId: inputDataShapeId,
- },
- newNode: {
- type: NODE_TYPES.decision,
- bounds: {
+ <EmptyStateFooter>
+ <EmptyStateActions>
+ <div>
+ <Button
+ variant={ButtonVariant.link}
+ icon={<TableIcon />}
+ onClick={() => {
+ dmnEditorStoreApi.setState((state) => {
+ const { href: decisionNodeHref } = addStandaloneNode({
+ definitions: state.dmn.model.definitions,
+ drdIndex: state.computed(state).getDrdIndex(),
+ newNode: {
+ type: NODE_TYPES.decision,
+ bounds: {
+ "@_x": 100,
+ "@_y": 100,
+ "@_width": DEFAULT_NODE_SIZES[NODE_TYPES.decision]({
+ snapGrid: state.diagram.snapGrid,
+ })["@_width"],
+ "@_height": DEFAULT_NODE_SIZES[NODE_TYPES.decision]({
+ snapGrid: state.diagram.snapGrid,
+ })["@_height"],
+ },
+ },
+ externalModelsByNamespace,
+ });
+
+ const drgElementIndex = (state.dmn.model.definitions.drgElement ?? []).length - 1;
+
+ const defaultWidthsById = new Map<string, number[]>();
+ const defaultExpression = getDefaultBoxedExpression({
+ logicType: "decisionTable",
+ allTopLevelDataTypesByFeelName: new Map(),
+ typeRef: undefined,
+ getDefaultColumnWidth,
+ widthsById: defaultWidthsById,
+ });
+
+ updateExpression({
+ definitions: state.dmn.model.definitions,
+ drgElementIndex,
+ expression: {
+ ...defaultExpression,
+ "@_label": "New Decision",
+ },
+ externalDmnModelsByNamespaceMap,
+ });
+
+ updateExpressionWidths({
+ definitions: state.dmn.model.definitions,
+ drdIndex: state.computed(state).getDrdIndex(),
+ widthsById: defaultWidthsById,
+ });
+
+ state.dispatch(state).boxedExpressionEditor.open(parseXmlHref(decisionNodeHref).id);
+ });
+ }}
+ >
+ New Decision Table...
+ </Button>
+ <br />
+ <Button
+ variant={ButtonVariant.link}
+ icon={<BlueprintIcon />}
+ onClick={() => {
+ dmnEditorStoreApi.setState((state) => {
+ const inputDataNodeBounds: DC__Bounds = {
"@_x": 100,
- "@_y": 100,
- "@_width": DEFAULT_NODE_SIZES[NODE_TYPES.decision]({
+ "@_y": 300,
+ "@_width": DEFAULT_NODE_SIZES[NODE_TYPES.inputData]({
snapGrid: state.diagram.snapGrid,
+ isAlternativeInputDataShape: state.computed(state).isAlternativeInputDataShape(),
})["@_width"],
- "@_height": DEFAULT_NODE_SIZES[NODE_TYPES.decision]({
+ "@_height": DEFAULT_NODE_SIZES[NODE_TYPES.inputData]({
snapGrid: state.diagram.snapGrid,
+ isAlternativeInputDataShape: state.computed(state).isAlternativeInputDataShape(),
})["@_height"],
- },
- },
- externalModelsByNamespace,
- });
-
- state.diagram._selectedNodes = [decisionNodeHref];
- state.diagram.propertiesPanel.isOpen = true;
- });
- }}
- >
- New Decision with Input Data...
- </Button>
- </EmptyStatePrimary>
+ };
+
+ const { href: inputDataNodeHref, shapeId: inputDataShapeId } = addStandaloneNode({
+ definitions: state.dmn.model.definitions,
+ drdIndex: state.computed(state).getDrdIndex(),
+ newNode: {
+ type: NODE_TYPES.inputData,
+ bounds: inputDataNodeBounds,
+ },
+ externalModelsByNamespace,
+ });
+
+ const { href: decisionNodeHref } = addConnectedNode({
+ definitions: state.dmn.model.definitions,
+ drdIndex: state.computed(state).getDrdIndex(),
+ edgeType: EDGE_TYPES.informationRequirement,
+ sourceNode: {
+ href: inputDataNodeHref,
+ type: NODE_TYPES.inputData,
+ bounds: inputDataNodeBounds,
+ shapeId: inputDataShapeId,
+ },
+ newNode: {
+ type: NODE_TYPES.decision,
+ bounds: {
+ "@_x": 100,
+ "@_y": 100,
+ "@_width": DEFAULT_NODE_SIZES[NODE_TYPES.decision]({
+ snapGrid: state.diagram.snapGrid,
+ })["@_width"],
+ "@_height": DEFAULT_NODE_SIZES[NODE_TYPES.decision]({
+ snapGrid: state.diagram.snapGrid,
+ })["@_height"],
+ },
+ },
+ externalModelsByNamespace,
+ });
+
+ state.diagram._selectedNodes = [decisionNodeHref];
+ state.diagram.propertiesPanel.isOpen = true;
+ });
+ }}
+ >
+ New Decision with Input Data...
+ </Button>
+ </div>
+ </EmptyStateActions>
+ </EmptyStateFooter>
</>
)}
</EmptyState>
@@ -1738,7 +1751,7 @@ export function TopRightCornerPanels({ availableHeight }: TopRightCornerPanelsPr
onClick={toggleOverlaysPanel}
title={"Overlays"}
>
- <VirtualMachineIcon size={"sm"} />
+ <VirtualMachineIcon />
</button>
</Popover>
</aside>
@@ -1749,7 +1762,7 @@ export function TopRightCornerPanels({ availableHeight }: TopRightCornerPanelsPr
onClick={togglePropertiesPanel}
title={"Properties panel"}
>
- <InfoIcon size={"sm"} />
+ <InfoIcon />
</button>
</aside>
)}
diff --git a/packages/dmn-editor/src/diagram/DrdSelectorPanel.tsx b/packages/dmn-editor/src/diagram/DrdSelectorPanel.tsx
index c99146ef51a..ae65feb3cad 100644
--- a/packages/dmn-editor/src/diagram/DrdSelectorPanel.tsx
+++ b/packages/dmn-editor/src/diagram/DrdSelectorPanel.tsx
@@ -30,7 +30,7 @@ import { Title } from "@patternfly/react-core/dist/js/components/Title";
import { Form, FormGroup, FormSection } from "@patternfly/react-core/dist/js/components/Form";
import { ToggleGroup, ToggleGroupItem } from "@patternfly/react-core/dist/js/components/ToggleGroup";
import { AlternativeInputDataIcon, InputDataIcon } from "../icons/Icons";
-import { EmptyState, EmptyStateBody } from "@patternfly/react-core/dist/js/components/EmptyState";
+import { EmptyState, EmptyStateBody, EmptyStateHeader } from "@patternfly/react-core/dist/js/components/EmptyState";
import { Flex } from "@patternfly/react-core/dist/js/layouts/Flex";
import { useCallback } from "react";
import { useSettings } from "../settings/DmnEditorSettingsContext";
@@ -110,9 +110,7 @@ export function DrdSelectorPanel() {
{(drds.length <= 0 && (
<>
<EmptyState>
- <Title size={"md"} headingLevel={"h4"}>
- {"You're on the default DRD"}
- </Title>
+ <EmptyStateHeader titleText={<>{"You're on the default DRD"}</>} headingLevel={"h4"} />
<EmptyStateBody>
{"Adding nodes or making changes to the Diagram will automatically create a DRD for you."}
</EmptyStateBody>
diff --git a/packages/dmn-editor/src/diagram/DrgNodesPanel.tsx b/packages/dmn-editor/src/diagram/DrgNodesPanel.tsx
index 9fa53445919..e9be7003035 100644
--- a/packages/dmn-editor/src/diagram/DrgNodesPanel.tsx
+++ b/packages/dmn-editor/src/diagram/DrgNodesPanel.tsx
@@ -33,8 +33,12 @@ import { useDmnEditorStore, useDmnEditorStoreApi } from "../store/StoreContext";
import { Unpacked } from "../tsExt/tsExt";
import { Divider } from "@patternfly/react-core/dist/js/components/Divider";
import { computeContainingDecisionServiceHrefsByDecisionHrefs } from "../store/computed/computeContainingDecisionServiceHrefsByDecisionHrefs.ts";
-import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
+import {
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateIcon,
+ EmptyStateHeader,
+} from "@patternfly/react-core/dist/js/components/EmptyState";
import CubesIcon from "@patternfly/react-icons/dist/js/icons/cubes-icon";
export const MIME_TYPE_FOR_DMN_EDITOR_DRG_NODE = "kie-dmn-editor--drg-node";
@@ -109,10 +113,11 @@ export function DrgNodesPanel() {
{(nodes.length <= 0 && (
<>
<EmptyState>
- <EmptyStateIcon icon={CubesIcon} />
- <Title size={"md"} headingLevel={"h4"}>
- No DRG nodes yet
- </Title>
+ <EmptyStateHeader
+ titleText="No DRG nodes yet"
+ icon={<EmptyStateIcon icon={CubesIcon} />}
+ headingLevel={"h4"}
+ />
<EmptyStateBody>Use the Palette on the left-hand-side to drag new nodes into the Diagram.</EmptyStateBody>
</EmptyState>
</>
diff --git a/packages/dmn-editor/src/diagram/Palette.tsx b/packages/dmn-editor/src/diagram/Palette.tsx
index 1bfed0c65d0..5d5ed4b6a23 100644
--- a/packages/dmn-editor/src/diagram/Palette.tsx
+++ b/packages/dmn-editor/src/diagram/Palette.tsx
@@ -50,6 +50,7 @@ import { useDmnEditor } from "../DmnEditorContext";
import { getDrdId } from "./drd/drdId";
import { useSettings } from "../settings/DmnEditorSettingsContext";
import { useExternalModels } from "../includedModels/DmnEditorDependenciesContext";
+import { Icon } from "@patternfly/react-core/dist/js/components/Icon";
export const MIME_TYPE_FOR_DMN_EDITOR_NEW_NODE_FROM_PALETTE = "application/kie-dmn-editor--new-node-from-palette";
@@ -142,7 +143,7 @@ export function Palette({ pulse }: { pulse: boolean }) {
key={DiagramLhsPanel.DRD_SELECTOR}
aria-label={"DRD Selector Popover"}
isVisible={diagram.openLhsPanel === DiagramLhsPanel.DRD_SELECTOR}
- reference={() => drdSelectorPopoverRef.current!}
+ triggerRef={() => drdSelectorPopoverRef.current!}
shouldClose={() => {
dmnEditorStoreApi.setState((state) => {
state.diagram.openLhsPanel = DiagramLhsPanel.NONE;
@@ -262,7 +263,9 @@ export function Palette({ pulse }: { pulse: boolean }) {
});
}}
>
- <BarsIcon size={"sm"} />
+ <Icon>
+ <BarsIcon />
+ </Icon>
</button>
</aside>
<br />
@@ -291,7 +294,10 @@ export function Palette({ pulse }: { pulse: boolean }) {
});
}}
>
- <MigrationIcon size={"sm"} />
+ <Icon>
+ {" "}
+ <MigrationIcon />
+ </Icon>
</button>
</aside>
</RF.Panel>
diff --git a/packages/dmn-editor/src/diagram/nodes/OutgoingStuffNodePanel.tsx b/packages/dmn-editor/src/diagram/nodes/OutgoingStuffNodePanel.tsx
index 89faeff9779..99a8a4be747 100644
--- a/packages/dmn-editor/src/diagram/nodes/OutgoingStuffNodePanel.tsx
+++ b/packages/dmn-editor/src/diagram/nodes/OutgoingStuffNodePanel.tsx
@@ -110,7 +110,7 @@ export function OutgoingStuffNodePanel(props: {
return (
<>
- <Flex className={"kie-dmn-editor--outgoing-stuff-node-panel"} style={style}>
+ <Flex className={"kie-dmn-editor--outgoing-stuff-node-panel"} style={style} gap={{ default: "gapNone" }}>
{props.edgeTypes.length > 0 && (
<FlexItem>
{props.edgeTypes.map((edgeType) => (
diff --git a/packages/dmn-editor/src/externalNodes/ExternalNodesPanel.tsx b/packages/dmn-editor/src/externalNodes/ExternalNodesPanel.tsx
index 0d3f0cc9e54..8258d0e1f62 100644
--- a/packages/dmn-editor/src/externalNodes/ExternalNodesPanel.tsx
+++ b/packages/dmn-editor/src/externalNodes/ExternalNodesPanel.tsx
@@ -27,10 +27,11 @@ import {
EmptyState,
EmptyStateBody,
EmptyStateIcon,
- EmptyStatePrimary,
+ EmptyStateActions,
+ EmptyStateHeader,
+ EmptyStateFooter,
} from "@patternfly/react-core/dist/js/components/EmptyState";
import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
import { CubesIcon } from "@patternfly/react-icons/dist/js/icons/cubes-icon";
import { DmnObjectListItem } from "./DmnObjectListItem";
import { Text, TextContent } from "@patternfly/react-core/dist/js/components/Text";
@@ -74,26 +75,29 @@ export function ExternalNodesPanel() {
{externalDmnsByNamespace.size === 0 && (
<>
<EmptyState>
- <EmptyStateIcon icon={CubesIcon} />
- <Title size={"md"} headingLevel={"h4"}>
- No external nodes available
- </Title>
+ <EmptyStateHeader
+ titleText="No external nodes available"
+ icon={<EmptyStateIcon icon={CubesIcon} />}
+ headingLevel={"h4"}
+ />
<EmptyStateBody>
Maybe the included models have no exported nodes, or there are no included models.
</EmptyStateBody>
- <br />
- <EmptyStatePrimary>
- <Button
- variant={ButtonVariant.link}
- onClick={() =>
- dmnEditorStoreApi.setState((state) => {
- state.navigation.tab = DmnEditorTab.INCLUDED_MODELS;
- })
- }
- >
- Include model...
- </Button>
- </EmptyStatePrimary>
+ <EmptyStateFooter>
+ <br />
+ <EmptyStateActions>
+ <Button
+ variant={ButtonVariant.link}
+ onClick={() =>
+ dmnEditorStoreApi.setState((state) => {
+ state.navigation.tab = DmnEditorTab.INCLUDED_MODELS;
+ })
+ }
+ >
+ Include model...
+ </Button>
+ </EmptyStateActions>
+ </EmptyStateFooter>
</EmptyState>
</>
)}
diff --git a/packages/dmn-editor/src/includedModels/IncludedModels.css b/packages/dmn-editor/src/includedModels/IncludedModels.css
index d5185676026..e12a7af1a05 100644
--- a/packages/dmn-editor/src/includedModels/IncludedModels.css
+++ b/packages/dmn-editor/src/includedModels/IncludedModels.css
@@ -18,7 +18,7 @@
*/
.kie-dmn-editor--selected-model-to-include-error {
- color: var(--pf-global--danger-color--100);
+ color: var(--pf-v5-global--danger-color--100);
}
.kie-dmn-editor--model-card-kebabtoggle-wrapper {
color: grey;
diff --git a/packages/dmn-editor/src/includedModels/IncludedModels.tsx b/packages/dmn-editor/src/includedModels/IncludedModels.tsx
index d6bbe13322c..e2491ea6ada 100644
--- a/packages/dmn-editor/src/includedModels/IncludedModels.tsx
+++ b/packages/dmn-editor/src/includedModels/IncludedModels.tsx
@@ -23,14 +23,19 @@ import { ns as dmn12ns } from "@kie-tools/dmn-marshaller/dist/schemas/dmn-1_2/ts
import { DMN15__tImport } from "@kie-tools/dmn-marshaller/dist/schemas/dmn-1_5/ts-gen/types";
import { Normalized } from "@kie-tools/dmn-marshaller/dist/normalization/normalize";
import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";
-import { Card, CardActions, CardBody, CardHeader, CardTitle } from "@patternfly/react-core/dist/js/components/Card";
+import { Card, CardBody, CardHeader, CardTitle } from "@patternfly/react-core/dist/js/components/Card";
import { Divider } from "@patternfly/react-core/dist/js/components/Divider";
-import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
+import {
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateIcon,
+ EmptyStateHeader,
+ EmptyStateFooter,
+} from "@patternfly/react-core/dist/js/components/EmptyState";
import { Form, FormGroup } from "@patternfly/react-core/dist/js/components/Form";
import { Modal, ModalVariant } from "@patternfly/react-core/dist/js/components/Modal";
import { PageSection } from "@patternfly/react-core/dist/js/components/Page";
-import { Select, SelectGroup, SelectOption, SelectVariant } from "@patternfly/react-core/dist/js/components/Select";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
+import { Select, SelectGroup, SelectOption, SelectVariant } from "@patternfly/react-core/deprecated";
import { Flex } from "@patternfly/react-core/dist/js/layouts/Flex";
import { Gallery } from "@patternfly/react-core/dist/js/layouts/Gallery";
import { CubesIcon } from "@patternfly/react-icons/dist/js/icons/cubes-icon";
@@ -51,7 +56,7 @@ import { allPmmlImportNamespaces, getPmmlNamespace } from "../pmml/pmml";
import { allDmnImportNamespaces } from "@kie-tools/dmn-marshaller/dist/schemas/dmn-1_5/Dmn15Spec";
import { getNamespaceOfDmnImport } from "./importNamespaces";
import { Alert, AlertVariant } from "@patternfly/react-core/dist/js/components/Alert/Alert";
-import { KebabToggle } from "@patternfly/react-core/dist/js/components/Dropdown";
+import { KebabToggle } from "@patternfly/react-core/deprecated";
import { TrashIcon } from "@patternfly/react-icons/dist/js/icons/trash-icon";
import { useInViewSelect } from "../responsiveness/useInViewSelect";
import { useCancelableEffect } from "@kie-tools-core/react-hooks/dist/useCancelableEffect";
@@ -292,7 +297,7 @@ export function IncludedModels() {
variant={SelectVariant.typeahead}
typeAheadAriaLabel={"Select a model to include..."}
placeholderText={"Select a model to include..."}
- onToggle={setModelSelectOpen}
+ onToggle={(_event, val) => setModelSelectOpen(val)}
onClear={() => setSelectedPathRelativeToThisDmn(undefined)}
onSelect={(e, path) => {
if (typeof path !== "string") {
@@ -357,7 +362,7 @@ export function IncludedModels() {
name={importName}
isReadOnly={false}
shouldCommitOnBlur={true}
- className={"pf-c-form-control"}
+ // className={"pf-v5-c-form-control"}
onRenamed={setImportName}
allUniqueNames={getAllUniqueNames}
/>
@@ -424,21 +429,24 @@ export function IncludedModels() {
{thisDmnsImports.length <= 0 && (
<Flex justifyContent={{ default: "justifyContentCenter" }} style={{ marginTop: "100px" }}>
<EmptyState style={{ maxWidth: "1280px" }}>
- <EmptyStateIcon icon={CubesIcon} />
- <Title size={"lg"} headingLevel={"h4"}>
- No external models have been included.
- </Title>
+ <EmptyStateHeader
+ titleText="No external models have been included."
+ icon={<EmptyStateIcon icon={CubesIcon} />}
+ headingLevel={"h4"}
+ />
<EmptyStateBody>
Included models are externally defined models that have been added to this DMN file. Included DMN models
have their decision requirements diagram (DRD) or decision requirements graph (DRG) components available
in this DMN file. Included PMML models can be invoked through DMN Boxed Functions, usually inside Business
Knowledge Model nodes (BKMs)
</EmptyStateBody>
- {!settings.isReadOnly && (
- <Button onClick={openModal} variant={ButtonVariant.primary}>
- Include model
- </Button>
- )}
+ <EmptyStateFooter>
+ {!settings.isReadOnly && (
+ <Button onClick={openModal} variant={ButtonVariant.primary}>
+ Include model
+ </Button>
+ )}
+ </EmptyStateFooter>
</EmptyState>
</Flex>
)}
@@ -547,97 +555,104 @@ function IncludedModelCard({
);
return (
- <Card isHoverable={true} isCompact={false}>
- <CardHeader>
- {!isReadOnly && (
- <CardActions>
- <Popover
- bodyContent={
- shouldRenderConfirmationMessage ? (
- <Alert
- isInline
- variant={AlertVariant.warning}
- title={"This action have major impact to your model"}
- actionClose={
- <AlertActionCloseButton
- onClose={() => {
- setRemovePopoverOpen(false);
- setConfirmationPopoverOpen(false);
+ <Card isCompact={false}>
+ <CardHeader
+ {...(!isReadOnly && {
+ actions: {
+ actions: (
+ <>
+ <Popover
+ bodyContent={
+ shouldRenderConfirmationMessage ? (
+ <Alert
+ isInline
+ variant={AlertVariant.warning}
+ title={"This action have major impact to your model"}
+ actionClose={
+ <AlertActionCloseButton
+ onClose={() => {
+ setRemovePopoverOpen(false);
+ setConfirmationPopoverOpen(false);
+ }}
+ />
+ }
+ actionLinks={
+ <>
+ <AlertActionLink
+ onClick={(ev) => {
+ remove(index);
+ ev.stopPropagation();
+ ev.preventDefault();
+ }}
+ variant={"link"}
+ style={{ color: "var(--pf-v5-global--danger-color--200)", fontWeight: "bold" }}
+ >
+ {`Yes, remove included ${extension.toUpperCase()}`}
+ </AlertActionLink>
+ </>
+ }
+ >
+ {extension === "dmn" && (
+ <>
+ Removing an included DMN will erase all its imported nodes and connected edges from your
+ model. The references to item definitions, Business Knowledge Model functions, and Decision
+ expressions will remain, requiring to be manually removed.
+ </>
+ )}
+ {extension === "pmml" && (
+ <>
+ Removing an included PMML will not erase references on Boxed Function expressions, requiring
+ it to be manually removed.
+ </>
+ )}
+ </Alert>
+ ) : (
+ <Button
+ variant={"plain"}
+ onClick={(ev) => {
+ ev.stopPropagation();
+ ev.preventDefault();
+ if (isReadOnly) {
+ return;
+ }
+ setConfirmationPopoverOpen(true);
}}
- />
- }
- actionLinks={
- <>
- <AlertActionLink
- onClick={(ev) => {
- remove(index);
- ev.stopPropagation();
- ev.preventDefault();
- }}
- variant={"link"}
- style={{ color: "var(--pf-global--danger-color--200)", fontWeight: "bold" }}
- >
- {`Yes, remove included ${extension.toUpperCase()}`}
- </AlertActionLink>
- </>
- }
- >
- {extension === "dmn" && (
- <>
- Removing an included DMN will erase all its imported nodes and connected edges from your model.
- The references to item definitions, Business Knowledge Model functions, and Decision expressions
- will remain, requiring to be manually removed.
- </>
- )}
- {extension === "pmml" && (
- <>
- Removing an included PMML will not erase references on Boxed Function expressions, requiring it
- to be manually removed.
- </>
- )}
- </Alert>
- ) : (
+ >
+ <TrashIcon />
+ {" "}
+ Remove
+ </Button>
+ )
+ }
+ hasNoPadding={shouldRenderConfirmationMessage}
+ maxWidth={shouldRenderConfirmationMessage ? "300px" : "150px"}
+ minWidth={shouldRenderConfirmationMessage ? "300px" : "150px"}
+ isVisible={isRemovePopoverOpen}
+ showClose={false}
+ shouldClose={() => {
+ setRemovePopoverOpen(false);
+ setConfirmationPopoverOpen(false);
+ }}
+ position={PopoverPosition.bottom}
+ shouldOpen={() => setRemovePopoverOpen(true)}
+ >
<Button
variant={"plain"}
onClick={(ev) => {
ev.stopPropagation();
ev.preventDefault();
- if (isReadOnly) {
- return;
- }
- setConfirmationPopoverOpen(true);
}}
>
- <TrashIcon />
- {" "}
- Remove
+ <KebabToggle />
</Button>
- )
- }
- hasNoPadding={shouldRenderConfirmationMessage}
- maxWidth={shouldRenderConfirmationMessage ? "300px" : "150px"}
- minWidth={shouldRenderConfirmationMessage ? "300px" : "150px"}
- isVisible={isRemovePopoverOpen}
- showClose={false}
- shouldClose={() => {
- setRemovePopoverOpen(false);
- setConfirmationPopoverOpen(false);
- }}
- position={PopoverPosition.bottom}
- shouldOpen={() => setRemovePopoverOpen(true)}
- >
- <div
- className="kie-dmn-editor--model-card-kebabtoggle-wrapper"
- onClick={(ev) => {
- ev.stopPropagation();
- ev.preventDefault();
- }}
- >
- <KebabToggle />
- </div>
- </Popover>
- </CardActions>
- )}
+ </Popover>
+ </>
+ ),
+ hasNoOffset: false,
+ className: undefined,
+ },
+ })}
+ >
<CardTitle>
<InlineFeelNameInput
placeholder={EMPTY_IMPORT_NAME_NAMESPACE_IDENTIFIER}
diff --git a/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx b/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
index 15359acf648..062cb57854c 100644
--- a/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
+++ b/packages/dmn-editor/src/overlaysPanel/OverlaysPanel.tsx
@@ -67,7 +67,7 @@ export function OverlaysPanel({ availableHeight }: OverlaysPanelProps) {
<Switch
aria-label={"Snapping"}
isChecked={diagram.snapGrid.isEnabled}
- onChange={(newValue) =>
+ onChange={(_event, newValue) =>
dmnEditorStoreApi.setState((state) => {
state.diagram.snapGrid.isEnabled = newValue;
})
@@ -87,7 +87,7 @@ export function OverlaysPanel({ availableHeight }: OverlaysPanelProps) {
step={SNAP_STEP}
showTicks={true}
hasTooltipOverThumb={true}
- onChange={(newSliderValue, newInputValue) =>
+ onChange={(_event, newSliderValue, newInputValue) =>
dmnEditorStoreApi.setState((state) => {
state.diagram.snapGrid.x = Math.min(MAX_SNAP, Math.max(MIN_SNAP, newInputValue ?? newSliderValue));
})
@@ -107,7 +107,7 @@ export function OverlaysPanel({ availableHeight }: OverlaysPanelProps) {
step={SNAP_STEP}
showTicks={true}
hasTooltipOverThumb={true}
- onChange={(newSliderValue, newInputValue) =>
+ onChange={(_event, newSliderValue, newInputValue) =>
dmnEditorStoreApi.setState((state) => {
state.diagram.snapGrid.y = Math.min(MAX_SNAP, Math.max(MIN_SNAP, newInputValue ?? newSliderValue));
})
@@ -125,7 +125,7 @@ export function OverlaysPanel({ availableHeight }: OverlaysPanelProps) {
<Switch
aria-label={"Highlight selected node(s) hierarchy"}
isChecked={diagram.overlays.enableNodeHierarchyHighlight}
- onChange={(newValue) =>
+ onChange={(_event, newValue) =>
dmnEditorStoreApi.setState((state) => {
state.diagram.overlays.enableNodeHierarchyHighlight = newValue;
})
@@ -136,7 +136,7 @@ export function OverlaysPanel({ availableHeight }: OverlaysPanelProps) {
<Switch
aria-label={"Show data type toolbar on nodes"}
isChecked={diagram.overlays.enableDataTypesToolbarOnNodes}
- onChange={(newValue) =>
+ onChange={(_event, newValue) =>
dmnEditorStoreApi.setState((state) => {
state.diagram.overlays.enableDataTypesToolbarOnNodes = newValue;
})
@@ -147,7 +147,7 @@ export function OverlaysPanel({ availableHeight }: OverlaysPanelProps) {
<Switch
aria-label={"Show data type toolbar on nodes"}
isChecked={diagram.overlays.enableCustomNodeStyles}
- onChange={(newValue) =>
+ onChange={(_event, newValue) =>
dmnEditorStoreApi.setState((state) => {
state.diagram.overlays.enableCustomNodeStyles = newValue;
})
@@ -172,7 +172,7 @@ export function OverlaysPanel({ availableHeight }: OverlaysPanelProps) {
<Switch
data-testid={"kie-tools--dmn-editor--evaluation-highlights-control"}
isChecked={diagram.overlays.enableEvaluationHighlights}
- onChange={(newValue) =>
+ onChange={(_event, newValue) =>
dmnEditorStoreApi.setState((state) => {
state.diagram.overlays.enableEvaluationHighlights = newValue;
})
diff --git a/packages/dmn-editor/src/propertiesPanel/BkmProperties.tsx b/packages/dmn-editor/src/propertiesPanel/BkmProperties.tsx
index fa83bcf2299..5506b67169e 100644
--- a/packages/dmn-editor/src/propertiesPanel/BkmProperties.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/BkmProperties.tsx
@@ -75,7 +75,7 @@ export function BkmProperties({
name={currentName}
isReadOnly={isReadOnly}
shouldCommitOnBlur={true}
- className={"pf-c-form-control"}
+ className={"pf-v5-c-form-control"}
onRenamed={setNewIdentifierNameCandidate}
allUniqueNames={useCallback((s) => s.computed(s).getAllFeelVariableUniqueNames(), [])}
/>
diff --git a/packages/dmn-editor/src/propertiesPanel/BoxedExpressionPropertiesPanelComponents/WithoutPropertiesCell.tsx b/packages/dmn-editor/src/propertiesPanel/BoxedExpressionPropertiesPanelComponents/WithoutPropertiesCell.tsx
index 7eb59a9027f..76aa9e5695c 100644
--- a/packages/dmn-editor/src/propertiesPanel/BoxedExpressionPropertiesPanelComponents/WithoutPropertiesCell.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/BoxedExpressionPropertiesPanelComponents/WithoutPropertiesCell.tsx
@@ -19,17 +19,24 @@
import * as React from "react";
import { Text, TextContent } from "@patternfly/react-core/dist/js/components/Text";
-import { EmptyState, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
+import {
+ EmptyState,
+ EmptyStateIcon,
+ EmptyStateHeader,
+ EmptyStateFooter,
+} from "@patternfly/react-core/dist/js/components/EmptyState";
import CubeIcon from "@patternfly/react-icons/dist/js/icons/cube-icon";
export function WithoutPropertiesCell() {
return (
<>
<EmptyState>
- <EmptyStateIcon icon={CubeIcon} />
- <TextContent>
- <Text component={"h2"}>No properties to display</Text>
- </TextContent>
+ <EmptyStateHeader icon={<EmptyStateIcon icon={CubeIcon} />} />
+ <EmptyStateFooter>
+ <TextContent>
+ <Text component={"h2"}>No properties to display</Text>
+ </TextContent>
+ </EmptyStateFooter>
</EmptyState>
</>
);
diff --git a/packages/dmn-editor/src/propertiesPanel/DecisionProperties.tsx b/packages/dmn-editor/src/propertiesPanel/DecisionProperties.tsx
index 288cbfbe26f..ae29c980e51 100644
--- a/packages/dmn-editor/src/propertiesPanel/DecisionProperties.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/DecisionProperties.tsx
@@ -75,7 +75,7 @@ export function DecisionProperties({
name={currentName}
isReadOnly={isReadOnly}
shouldCommitOnBlur={true}
- className={"pf-c-form-control"}
+ className={"pf-v5-c-form-control"}
onRenamed={setNewIdentifierNameCandidate}
allUniqueNames={useCallback((s) => s.computed(s).getAllFeelVariableUniqueNames(), [])}
/>
diff --git a/packages/dmn-editor/src/propertiesPanel/DecisionServiceProperties.tsx b/packages/dmn-editor/src/propertiesPanel/DecisionServiceProperties.tsx
index 631d7aa4e76..b5569599982 100644
--- a/packages/dmn-editor/src/propertiesPanel/DecisionServiceProperties.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/DecisionServiceProperties.tsx
@@ -134,7 +134,7 @@ export function DecisionServiceProperties({
name={currentName}
isReadOnly={isReadOnly}
shouldCommitOnBlur={true}
- className={"pf-c-form-control"}
+ className={"pf-v5-c-form-control"}
onRenamed={setNewIdentifierNameCandidate}
allUniqueNames={useCallback((s) => s.computed(s).getAllFeelVariableUniqueNames(), [])}
/>
@@ -161,7 +161,7 @@ export function DecisionServiceProperties({
type={"text"}
isDisabled={isReadOnly}
value={decisionService.description?.__$$text}
- onChange={(newDescription) => {
+ onChange={(_event, newDescription) => {
setState((state) => {
(state.dmn.model.definitions.drgElement![index] as Normalized<DMN15__tDecisionService>).description = {
__$$text: newDescription,
diff --git a/packages/dmn-editor/src/propertiesPanel/DiagramPropertiesPanel.css b/packages/dmn-editor/src/propertiesPanel/DiagramPropertiesPanel.css
index aef65c9582b..a8f7ad87dd3 100644
--- a/packages/dmn-editor/src/propertiesPanel/DiagramPropertiesPanel.css
+++ b/packages/dmn-editor/src/propertiesPanel/DiagramPropertiesPanel.css
@@ -17,7 +17,7 @@
* under the License.
*/
-.pf-c-form__field-group-body {
+.pf-v5-c-form__field-group-body {
grid-column-start: 1;
padding-left: 20px;
}
diff --git a/packages/dmn-editor/src/propertiesPanel/DocumentationLinksFormGroup.tsx b/packages/dmn-editor/src/propertiesPanel/DocumentationLinksFormGroup.tsx
index 95a19f6adc3..86578f9f7a5 100644
--- a/packages/dmn-editor/src/propertiesPanel/DocumentationLinksFormGroup.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/DocumentationLinksFormGroup.tsx
@@ -200,8 +200,8 @@ export function DocumentationLinksFormGroup({
<FormGroup
label={
<div style={{ display: "flex", flexDirection: "row" }}>
- <label className={"pf-c-form__label"} style={{ flexGrow: 1, cursor: "auto" }}>
- <span className={"pf-c-form__label-text"}>Documentation links</span>
+ <label className={"pf-v5-c-form__label"} style={{ flexGrow: 1, cursor: "auto" }}>
+ <span className={"pf-v5-c-form__label-text"}>Documentation links</span>
</label>
{!isReadOnly && (
<Button variant={"plain"} icon={<PlusCircleIcon />} onClick={onAdd} title={"Add documentation link"} />
@@ -361,7 +361,7 @@ function DocumentationLinksInput({
)}
</div>
{!isUrlExpanded && (
- <Tooltip content={urlDescriptionTooltip} position={TooltipPosition.topStart} reference={urlTitleRef} />
+ <Tooltip content={urlDescriptionTooltip} position={TooltipPosition.topStart} triggerRef={urlTitleRef} />
)}
</>
) : (
diff --git a/packages/dmn-editor/src/propertiesPanel/Fields.tsx b/packages/dmn-editor/src/propertiesPanel/Fields.tsx
index bc5f9aac412..f2526c3f6b1 100644
--- a/packages/dmn-editor/src/propertiesPanel/Fields.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/Fields.tsx
@@ -81,7 +81,7 @@ export function NameField(props: {
name={props.name}
isReadOnly={props.isReadOnly}
shouldCommitOnBlur={true}
- className={"pf-c-form-control"}
+ className={"pf-v5-c-form-control"}
onRenamed={(newName) => props.onChange?.(newName)}
allUniqueNames={props.getAllUniqueNames}
/>
@@ -163,7 +163,7 @@ export function TextField({
type={"text"}
isDisabled={props.isReadOnly}
value={value}
- onChange={(newContent) => {
+ onChange={(_event, newContent) => {
setValue(newContent);
valueRef.current = newContent;
isEditing.current = true;
@@ -186,7 +186,7 @@ export function TextField({
type={"text"}
isDisabled={props.isReadOnly}
value={value}
- onChange={(newContent) => {
+ onChange={(_event, newContent) => {
setValue(newContent);
valueRef.current = newContent;
isEditing.current = true;
diff --git a/packages/dmn-editor/src/propertiesPanel/FontOptions.tsx b/packages/dmn-editor/src/propertiesPanel/FontOptions.tsx
index ff3229e8d19..633b046fc93 100644
--- a/packages/dmn-editor/src/propertiesPanel/FontOptions.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/FontOptions.tsx
@@ -22,7 +22,7 @@ import { Normalized } from "@kie-tools/dmn-marshaller/dist/normalization/normali
import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";
import { FormSection } from "@patternfly/react-core/dist/js/components/Form";
import { NumberInput } from "@patternfly/react-core/dist/js/components/NumberInput";
-import { Select, SelectOption, SelectVariant } from "@patternfly/react-core/dist/js/components/Select";
+import { Select, SelectOption, SelectVariant } from "@patternfly/react-core/deprecated";
import { ToggleGroup, ToggleGroupItem } from "@patternfly/react-core/dist/js/components/ToggleGroup";
import { PencilAltIcon } from "@patternfly/react-icons/dist/js/icons/pencil-alt-icon";
import { UndoAltIcon } from "@patternfly/react-icons/dist/js/icons/undo-alt-icon";
@@ -38,6 +38,7 @@ import { PropertiesPanelHeader } from "./PropertiesPanelHeader";
import "./FontOptions.css";
import { generateUuid } from "@kie-tools/boxed-expression-component/dist/api";
import { useSettings } from "../settings/DmnEditorSettingsContext";
+import { Icon } from "@patternfly/react-core/dist/js/components/Icon";
// https://www.w3schools.com/cssref/css_websafe_fonts.php
// Array of [name, family]
@@ -271,7 +272,12 @@ export function FontOptions({ startExpanded, nodeIds }: { startExpanded: boolean
return (
<>
<PropertiesPanelHeader
- icon={<PencilAltIcon width={16} height={36} style={{ marginLeft: "12px" }} />}
+ icon={
+ <Icon isInline size="md" style={{ marginTop: "10px" }}>
+ {" "}
+ <PencilAltIcon />
+ </Icon>
+ }
expands={true}
fixed={false}
isSectionExpanded={isStyleSectionExpanded} // TODO LUIZ: isStyleSectionExpanded
diff --git a/packages/dmn-editor/src/propertiesPanel/GlobalDiagramProperties.tsx b/packages/dmn-editor/src/propertiesPanel/GlobalDiagramProperties.tsx
index 39ccec99b22..f44bde4e900 100644
--- a/packages/dmn-editor/src/propertiesPanel/GlobalDiagramProperties.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/GlobalDiagramProperties.tsx
@@ -82,7 +82,7 @@ export function GlobalDiagramProperties() {
name={thisDmn.model.definitions["@_name"]}
isReadOnly={settings.isReadOnly}
shouldCommitOnBlur={true}
- className={"pf-c-form-control"}
+ className={"pf-v5-c-form-control"}
onRenamed={(newName) => {
dmnEditorStoreApi.setState((state) => {
state.dmn.model.definitions["@_name"] = newName;
@@ -100,7 +100,7 @@ export function GlobalDiagramProperties() {
rows={6}
placeholder={"Enter a description..."}
value={thisDmn.model.definitions.description?.__$$text}
- onChange={(newDescription) =>
+ onChange={(_event, newDescription) =>
dmnEditorStoreApi.setState((state) => {
state.dmn.model.definitions.description = { __$$text: newDescription };
})
@@ -115,7 +115,7 @@ export function GlobalDiagramProperties() {
isDisabled={settings.isReadOnly}
placeholder={"Enter an expression language..."}
value={thisDmn.model.definitions["@_expressionLanguage"]}
- onChange={(newExprLang) =>
+ onChange={(_event, newExprLang) =>
dmnEditorStoreApi.setState((state) => {
state.dmn.model.definitions["@_expressionLanguage"] = newExprLang;
})
@@ -158,7 +158,7 @@ export function GlobalDiagramProperties() {
isReadOnly={settings.isReadOnly}
hoverTip="Copy"
clickTip="Copied"
- onChange={(newId) => {
+ onChange={(_event, newId) => {
dmnEditorStoreApi.setState((state) => {
state.dmn.model.definitions["@_id"] = `${newId}`;
});
@@ -174,7 +174,7 @@ export function GlobalDiagramProperties() {
isReadOnly={settings.isReadOnly}
hoverTip="Copy"
clickTip="Copied"
- onChange={(newNamespace) => {
+ onChange={(_event, newNamespace) => {
dmnEditorStoreApi.setState((state) => {
state.dmn.model.definitions["@_namespace"] = `${newNamespace}`;
});
diff --git a/packages/dmn-editor/src/propertiesPanel/GroupProperties.tsx b/packages/dmn-editor/src/propertiesPanel/GroupProperties.tsx
index b18d32d55e5..82e1fc7490b 100644
--- a/packages/dmn-editor/src/propertiesPanel/GroupProperties.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/GroupProperties.tsx
@@ -39,7 +39,7 @@ export function GroupProperties({ group, index }: { group: Normalized<DMN15__tGr
aria-label={"Name"}
type={"text"}
isDisabled={settings.isReadOnly}
- onChange={(newName) => {
+ onChange={(_event, newName) => {
setState((state) => {
renameGroupNode({
definitions: state.dmn.model.definitions,
@@ -59,7 +59,7 @@ export function GroupProperties({ group, index }: { group: Normalized<DMN15__tGr
type={"text"}
isDisabled={settings.isReadOnly}
value={group.description?.__$$text}
- onChange={(newDescription) => {
+ onChange={(_event, newDescription) => {
setState((state) => {
(state.dmn.model.definitions.artifact![index] as Normalized<DMN15__tGroup>).description = {
__$$text: newDescription,
diff --git a/packages/dmn-editor/src/propertiesPanel/InputDataProperties.tsx b/packages/dmn-editor/src/propertiesPanel/InputDataProperties.tsx
index 5f44c43cbad..23ca5af89e4 100644
--- a/packages/dmn-editor/src/propertiesPanel/InputDataProperties.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/InputDataProperties.tsx
@@ -76,7 +76,7 @@ export function InputDataProperties({
name={currentName}
isReadOnly={isReadOnly}
shouldCommitOnBlur={true}
- className={"pf-c-form-control"}
+ className={"pf-v5-c-form-control"}
onRenamed={setNewIdentifierNameCandidate}
allUniqueNames={useCallback((s) => s.computed(s).getAllFeelVariableUniqueNames(), [])}
/>
@@ -101,7 +101,7 @@ export function InputDataProperties({
type={"text"}
isDisabled={isReadOnly}
value={inputData.description?.__$$text}
- onChange={(newDescription) => {
+ onChange={(_event, newDescription) => {
setState((state) => {
(state.dmn.model.definitions.drgElement![index] as Normalized<DMN15__tInputData>).description = {
__$$text: newDescription,
diff --git a/packages/dmn-editor/src/propertiesPanel/KnowledgeSourceProperties.tsx b/packages/dmn-editor/src/propertiesPanel/KnowledgeSourceProperties.tsx
index d0a7c4fe4a2..ceea1173214 100644
--- a/packages/dmn-editor/src/propertiesPanel/KnowledgeSourceProperties.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/KnowledgeSourceProperties.tsx
@@ -70,7 +70,7 @@ export function KnowledgeSourceProperties({
name={currentName}
isReadOnly={isReadOnly}
shouldCommitOnBlur={true}
- className={"pf-c-form-control"}
+ className={"pf-v5-c-form-control"}
onRenamed={setNewIdentifierNameCandidate}
allUniqueNames={useCallback((s) => s.computed(s).getAllFeelVariableUniqueNames(), [])}
/>
@@ -82,7 +82,7 @@ export function KnowledgeSourceProperties({
type={"text"}
isDisabled={isReadOnly}
value={knowledgeSource.description?.__$$text}
- onChange={(newDescription) => {
+ onChange={(_event, newDescription) => {
setState((state) => {
(state.dmn.model.definitions.drgElement![index] as Normalized<DMN15__tKnowledgeSource>).description = {
__$$text: newDescription,
@@ -107,7 +107,7 @@ export function KnowledgeSourceProperties({
type={"text"}
isDisabled={isReadOnly}
value={knowledgeSource.type?.__$$text}
- onChange={(newType) => {
+ onChange={(_event, newType) => {
setState((state) => {
(state.dmn.model.definitions.drgElement![index] as Normalized<DMN15__tKnowledgeSource>).type = {
__$$text: newType,
@@ -124,7 +124,7 @@ export function KnowledgeSourceProperties({
type={"text"}
isDisabled={isReadOnly}
value={knowledgeSource["@_locationURI"]}
- onChange={(newLocationUri) => {
+ onChange={(_event, newLocationUri) => {
setState((state) => {
(state.dmn.model.definitions.drgElement![index] as Normalized<DMN15__tKnowledgeSource>)["@_locationURI"] =
newLocationUri;
diff --git a/packages/dmn-editor/src/propertiesPanel/ShapeOptions.tsx b/packages/dmn-editor/src/propertiesPanel/ShapeOptions.tsx
index f2808c3ec28..5d16cb05975 100644
--- a/packages/dmn-editor/src/propertiesPanel/ShapeOptions.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/ShapeOptions.tsx
@@ -42,6 +42,7 @@ import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components
import { DC__Dimension } from "@kie-tools/dmn-marshaller/dist/schemas/dmn-1_2/ts-gen/types";
import { generateUuid } from "@kie-tools/boxed-expression-component/dist/api";
import { useSettings } from "../settings/DmnEditorSettingsContext";
+import { Icon } from "@patternfly/react-core/dist/js/components/Icon";
const DEFAULT_FILL_COLOR = { "@_blue": 255, "@_green": 255, "@_red": 255 };
const DEFAULT_STROKE_COLOR = { "@_blue": 0, "@_green": 0, "@_red": 0 };
@@ -347,7 +348,12 @@ export function ShapeOptions({
return (
<>
<PropertiesPanelHeader
- icon={<CubeIcon width={16} height={36} style={{ marginLeft: "12px" }} />}
+ icon={
+ <Icon isInline size="md" style={{ marginTop: "10px" }}>
+ {" "}
+ <CubeIcon />
+ </Icon>
+ }
expands={true}
fixed={false}
isSectionExpanded={isShapeSectionExpanded}
@@ -454,7 +460,7 @@ export function ShapeOptions({
value={isDimensioningEnabled ? width : undefined}
placeholder={isDimensioningEnabled ? "Enter a value..." : undefined}
onBlur={onBlurWidth}
- onChange={onChangeWidth}
+ onChange={(_event, val) => onChangeWidth(val)}
style={{ border: "none", backgroundColor: "transparent" }}
/>
<div>
@@ -482,7 +488,7 @@ export function ShapeOptions({
value={isDimensioningEnabled ? height : undefined}
placeholder={isDimensioningEnabled ? "Enter a value..." : undefined}
onBlur={onBlurHeight}
- onChange={onChangeHeight}
+ onChange={(_event, val) => onChangeHeight(val)}
style={{ border: "none", backgroundColor: "transparent" }}
/>
<div>
@@ -520,7 +526,7 @@ export function ShapeOptions({
type={"number"}
isDisabled={settings.isReadOnly}
value={boundPositionX}
- onChange={onChangePositionX}
+ onChange={(_event, val) => onChangePositionX(val)}
placeholder={"Enter X value..."}
/>
</div>
@@ -537,7 +543,7 @@ export function ShapeOptions({
type={"number"}
isDisabled={settings.isReadOnly}
value={boundPositionY}
- onChange={onChangePositionY}
+ onChange={(_event, val) => onChangePositionY(val)}
placeholder={"Enter Y value..."}
/>
</div>
diff --git a/packages/dmn-editor/src/propertiesPanel/TextAnnotationProperties.tsx b/packages/dmn-editor/src/propertiesPanel/TextAnnotationProperties.tsx
index f5857e4cffd..1d0f397241f 100644
--- a/packages/dmn-editor/src/propertiesPanel/TextAnnotationProperties.tsx
+++ b/packages/dmn-editor/src/propertiesPanel/TextAnnotationProperties.tsx
@@ -47,7 +47,7 @@ export function TextAnnotationProperties({
isDisabled={settings.isReadOnly}
value={textAnnotation["@_textFormat"]}
placeholder={"Enter a text format..."}
- onChange={(newTextFormat) => {
+ onChange={(_event, newTextFormat) => {
setState((state) => {
(state.dmn.model.definitions.artifact![index] as Normalized<DMN15__tTextAnnotation>)["@_textFormat"] =
newTextFormat;
@@ -62,7 +62,7 @@ export function TextAnnotationProperties({
type={"text"}
isDisabled={settings.isReadOnly}
value={textAnnotation.text?.__$$text}
- onChange={(newText) => {
+ onChange={(_event, newText) => {
setState((state) => {
updateTextAnnotation({
definitions: state.dmn.model.definitions,
@@ -83,7 +83,7 @@ export function TextAnnotationProperties({
type={"text"}
isDisabled={settings.isReadOnly}
value={textAnnotation.description?.__$$text}
- onChange={(newDescription) => {
+ onChange={(_event, newDescription) => {
setState((state) => {
(state.dmn.model.definitions.artifact![index] as Normalized<DMN15__tTextAnnotation>).description = {
__$$text: newDescription,
diff --git a/packages/dmn-editor/tests-e2e/__fixtures__/drgNodes.ts b/packages/dmn-editor/tests-e2e/__fixtures__/drgNodes.ts
index 27c0e472608..21fd1837e7b 100644
--- a/packages/dmn-editor/tests-e2e/__fixtures__/drgNodes.ts
+++ b/packages/dmn-editor/tests-e2e/__fixtures__/drgNodes.ts
@@ -35,6 +35,9 @@ export class DrgNodes {
}
public async dragNode(args: { name: string; targetPosition: { x: number; y: number } }) {
+ // This short delay prevents issues where the diagram container gets moved outside the viewport during drag operations.
+ await new Promise((resolve) => setTimeout(resolve, 500));
+
await this.popover()
.getByText(args.name, { exact: true })
.dragTo(this.diagram.get(), { targetPosition: args.targetPosition });
diff --git a/packages/dmn-editor/tests-e2e/__fixtures__/propertiesPanel/decisionServicePropertiesPanel.ts b/packages/dmn-editor/tests-e2e/__fixtures__/propertiesPanel/decisionServicePropertiesPanel.ts
index 1c6467efc6d..08ebd6af331 100644
--- a/packages/dmn-editor/tests-e2e/__fixtures__/propertiesPanel/decisionServicePropertiesPanel.ts
+++ b/packages/dmn-editor/tests-e2e/__fixtures__/propertiesPanel/decisionServicePropertiesPanel.ts
@@ -159,7 +159,7 @@ export class DecisionServicePropertiesPanel extends PropertiesPanelBase {
.getByTestId("kie-tools--dmn-editor--draggable-icon")
.nth(args.fromIndex);
- await source.hover();
+ await target.scrollIntoViewIfNeeded();
await source.dispatchEvent("dragstart");
await source.dragTo(target);
}
@@ -185,6 +185,7 @@ export class DecisionServicePropertiesPanel extends PropertiesPanelBase {
.nth(args.fromIndex);
await source.hover();
+ await target.scrollIntoViewIfNeeded();
await source.dispatchEvent("dragstart");
await source.dragTo(target);
}
diff --git a/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/readOnly/readOnly-dataTypes-inputs-disabled.png b/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/readOnly/readOnly-dataTypes-inputs-disabled.png
index 0db5123523e..b5f4bf65085 100644
Binary files a/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/readOnly/readOnly-dataTypes-inputs-disabled.png and b/packages/dmn-editor/tests-e2e/__screenshots__/Google-Chrome/readOnly/readOnly-dataTypes-inputs-disabled.png differ
diff --git a/packages/dmn-editor/tests-e2e/__screenshots__/chromium/readOnly/readOnly-dataTypes-inputs-disabled.png b/packages/dmn-editor/tests-e2e/__screenshots__/chromium/readOnly/readOnly-dataTypes-inputs-disabled.png
index c0a48647e9b..31ce752791b 100644
Binary files a/packages/dmn-editor/tests-e2e/__screenshots__/chromium/readOnly/readOnly-dataTypes-inputs-disabled.png and b/packages/dmn-editor/tests-e2e/__screenshots__/chromium/readOnly/readOnly-dataTypes-inputs-disabled.png differ
diff --git a/packages/dmn-editor/tests-e2e/__screenshots__/webkit/readOnly/readOnly-dataTypes-inputs-disabled.png b/packages/dmn-editor/tests-e2e/__screenshots__/webkit/readOnly/readOnly-dataTypes-inputs-disabled.png
index 66c0dd632b7..eee7e805d15 100644
Binary files a/packages/dmn-editor/tests-e2e/__screenshots__/webkit/readOnly/readOnly-dataTypes-inputs-disabled.png and b/packages/dmn-editor/tests-e2e/__screenshots__/webkit/readOnly/readOnly-dataTypes-inputs-disabled.png differ
diff --git a/packages/dmn-editor/tests-e2e/drds/modelDrd.spec.ts b/packages/dmn-editor/tests-e2e/drds/modelDrd.spec.ts
index 1bc943e3a3a..a6715c4e719 100644
--- a/packages/dmn-editor/tests-e2e/drds/modelDrd.spec.ts
+++ b/packages/dmn-editor/tests-e2e/drds/modelDrd.spec.ts
@@ -236,6 +236,7 @@ test.describe("Model DRD", () => {
await drgNodes.toggle();
await drgNodes.dragNode({ name: DefaultNodeName.DECISION, targetPosition: { x: 300, y: 300 } });
await drgNodes.dragNode({ name: DefaultNodeName.INPUT_DATA, targetPosition: { x: 300, y: 500 } });
+ await drds.toggle();
await nodes.dragNewConnectedEdge({
type: EdgeType.INFORMATION_REQUIREMENT,
from: DefaultNodeName.INPUT_DATA,
@@ -450,7 +451,7 @@ test.describe("Model DRD", () => {
await drds.toggle();
await drds.navigateTo({ name: "First DRD" });
await drds.toggle();
- await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x: 400, y: 300 }, thenRenameTo: "A" });
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x: 300, y: 300 }, thenRenameTo: "A" });
await palette.dragNewNode({ type: NodeType.BKM, targetPosition: { x: 100, y: 300 }, thenRenameTo: "B" });
await palette.dragNewNode({
type: NodeType.DECISION_SERVICE,
@@ -464,7 +465,7 @@ test.describe("Model DRD", () => {
await drds.navigateTo({ name: "Second DRD" });
await drds.toggle();
await drgNodes.toggle();
- await drgNodes.dragNode({ name: "A", targetPosition: { x: 400, y: 300 } });
+ await drgNodes.dragNode({ name: "A", targetPosition: { x: 300, y: 300 } });
await drgNodes.dragNode({ name: "B", targetPosition: { x: 100, y: 300 } });
await drgNodes.dragNode({ name: "C", targetPosition: { x: 600, y: 300 } });
await drgNodes.toggle();
@@ -498,7 +499,7 @@ test.describe("Model DRD", () => {
await drds.toggle();
await drds.navigateTo({ name: "First DRD" });
await drds.toggle();
- await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x: 400, y: 300 }, thenRenameTo: "A" });
+ await palette.dragNewNode({ type: NodeType.DECISION, targetPosition: { x: 300, y: 300 }, thenRenameTo: "A" });
await palette.dragNewNode({
type: NodeType.KNOWLEDGE_SOURCE,
targetPosition: { x: 100, y: 300 },
@@ -516,7 +517,7 @@ test.describe("Model DRD", () => {
await drds.navigateTo({ name: "Second DRD" });
await drds.toggle();
await drgNodes.toggle();
- await drgNodes.dragNode({ name: "A", targetPosition: { x: 400, y: 300 } });
+ await drgNodes.dragNode({ name: "A", targetPosition: { x: 300, y: 300 } });
await drgNodes.dragNode({ name: "B", targetPosition: { x: 100, y: 300 } });
await drgNodes.dragNode({ name: "C", targetPosition: { x: 600, y: 300 } });
await drgNodes.toggle();
diff --git a/packages/dmn-runner/package.json b/packages/dmn-runner/package.json
index 44b7fdc785a..fee304007e2 100644
--- a/packages/dmn-runner/package.json
+++ b/packages/dmn-runner/package.json
@@ -27,8 +27,8 @@
"@kie-tools-core/react-hooks": "workspace:*",
"@kie-tools/extended-services-api": "workspace:*",
"@kie-tools/uniforms-patternfly": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"ajv": "^8.17.1",
"ajv-draft-04": "^1.0.0",
"ajv-formats": "^3.0.1",
diff --git a/packages/dmn-runner/src/uniforms/DmnFeelContextField.tsx b/packages/dmn-runner/src/uniforms/DmnFeelContextField.tsx
index 5de30c8e5b3..297caa64ccb 100644
--- a/packages/dmn-runner/src/uniforms/DmnFeelContextField.tsx
+++ b/packages/dmn-runner/src/uniforms/DmnFeelContextField.tsx
@@ -44,7 +44,7 @@ function DmnFeelContext({ onChange, ...props }: DmnFeelContextComponentProps) {
}, [props.value]);
const onTextInputChange = useCallback(
- (value: string, event: React.FormEvent<HTMLInputElement>) => {
+ (event: React.FormEvent<HTMLInputElement>, value: string) => {
try {
const parsedObject = JSON.parse((event.target as any).value);
onChange(parsedObject);
diff --git a/packages/editor/package.json b/packages/editor/package.json
index aef14fe06c5..463f2340987 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -34,8 +34,8 @@
"@kie-tools-core/operating-system": "workspace:*",
"@kie-tools-core/patternfly-base": "workspace:*",
"@kie-tools-core/workspace": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"csstype": "^3.0.11",
"minimatch": "^3.0.5"
},
diff --git a/packages/editor/src/envelope/styles.scss b/packages/editor/src/envelope/styles.scss
index 06c89f04157..b1da9f2517e 100644
--- a/packages/editor/src/envelope/styles.scss
+++ b/packages/editor/src/envelope/styles.scss
@@ -18,15 +18,15 @@
*/
:not(.vscode-dark) {
- .kie-tools--loading-screen .pf-l-bullseye {
- color: var(--pf-global--Color--dark-100);
- background-color: var(--pf-global--BackgroundColor--light-100);
+ .kie-tools--loading-screen .pf-v5-l-bullseye {
+ color: var(--pf-v5-global--Color--dark-100);
+ background-color: var(--pf-v5-global--BackgroundColor--light-100);
}
}
-.vscode-dark .kie-tools--loading-screen .pf-l-bullseye {
- color: var(--pf-global--Color--light-100);
- background-color: var(--pf-global--BackgroundColor--dark-100);
+.vscode-dark .kie-tools--loading-screen .pf-v5-l-bullseye {
+ color: var(--pf-v5-global--Color--light-100);
+ background-color: var(--pf-v5-global--BackgroundColor--dark-100);
}
.kie-tools--loading-screen {
@@ -76,15 +76,15 @@
/* PF3 -> PF4 overrides */
.kie-tools--keyboard-shortcuts {
- font-family: var(--pf-global--FontFamily--sans-serif);
- color: var(--pf-global--Color--dark-100);
+ font-family: var(--pf-v5-global--FontFamily--sans-serif);
+ color: var(--pf-v5-global--Color--dark-100);
}
.kie-tools--keyboard-shortcuts.kie-tools--keyboard-shortcuts-icon.dark {
color: #979797;
}
-.pf-c-modal-box.kie-tools--keyboard-shortcuts.dark {
+.pf-v5-c-modal-box.kie-tools--keyboard-shortcuts.dark {
background-color: #313131;
.h1,
.h2,
@@ -104,16 +104,16 @@
dd {
color: #cccccc;
}
- .pf-c-button.pf-m-plain {
+ .pf-v5-c-button.pf-m-plain {
color: #cccccc;
}
- .pf-c-button.pf-m-plain:hover {
+ .pf-v5-c-button.pf-m-plain:hover {
color: #000;
}
}
body {
- color: var(--pf-global--Color-dark--100);
+ color: var(--pf-v5-global--Color-dark--100);
}
dl {
@@ -122,5 +122,5 @@ dl {
dt,
dd {
- line-height: var(--pf-global--LineHeight--md) !important;
+ line-height: var(--pf-v5-global--LineHeight--md) !important;
}
diff --git a/packages/editor/tests/envelope/KeyBindingHelpOverlay/__snapshots__/KeyBindingsHelpOverlay.test.tsx.snap b/packages/editor/tests/envelope/KeyBindingHelpOverlay/__snapshots__/KeyBindingsHelpOverlay.test.tsx.snap
index 2d5a4280318..2c822ca8ce7 100644
--- a/packages/editor/tests/envelope/KeyBindingHelpOverlay/__snapshots__/KeyBindingsHelpOverlay.test.tsx.snap
+++ b/packages/editor/tests/envelope/KeyBindingHelpOverlay/__snapshots__/KeyBindingsHelpOverlay.test.tsx.snap
@@ -2,7 +2,7 @@
exports[`KeyBindingsHelpOverlay minimal setup 1`] = `
<body
- class="pf-c-backdrop__open"
+ class="pf-v5-c-backdrop__open"
>
<div
aria-hidden="true"
@@ -14,10 +14,10 @@ exports[`KeyBindingsHelpOverlay minimal setup 1`] = `
>
<svg
aria-hidden="true"
+ class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
- style="vertical-align: -0.125em;"
viewBox="0 0 576 512"
width="1em"
>
@@ -29,68 +29,72 @@ exports[`KeyBindingsHelpOverlay minimal setup 1`] = `
</div>
<div>
<div
- class="pf-c-backdrop"
+ class="pf-v5-c-backdrop"
>
<div
- class="pf-l-bullseye"
+ class="pf-v5-l-bullseye"
>
<div
aria-describedby="pf-modal-part-2"
aria-labelledby="pf-modal-part-1"
aria-modal="true"
- class="pf-c-modal-box kie-tools--keyboard-shortcuts"
+ class="pf-v5-c-modal-box kie-tools--keyboard-shortcuts"
data-ouia-component-id="OUIA-Generated-Modal-default-1"
- data-ouia-component-type="PF4/ModalContent"
+ data-ouia-component-type="PF5/ModalContent"
data-ouia-safe="true"
id="pf-modal-part-0"
role="dialog"
- style="width: 60%;"
+ style="--pf-v5-c-modal-box--Width: 60%;"
>
- <button
- aria-disabled="false"
- aria-label="Close"
- class="pf-c-button pf-m-plain"
- data-ouia-component-id="OUIA-Generated-Modal-default-1-ModalBoxCloseButton"
- data-ouia-component-type="PF4/Button"
- data-ouia-safe="true"
- type="button"
+ <div
+ class="pf-v5-c-modal-box__close"
>
- <svg
- aria-hidden="true"
- fill="currentColor"
- height="1em"
- role="img"
- style="vertical-align: -0.125em;"
- viewBox="0 0 352 512"
- width="1em"
+ <button
+ aria-disabled="false"
+ aria-label="Close"
+ class="pf-v5-c-button pf-m-plain"
+ data-ouia-component-id="OUIA-Generated-Modal-default-1-ModalBoxCloseButton"
+ data-ouia-component-type="PF5/Button"
+ data-ouia-safe="true"
+ type="button"
>
- <path
- d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
- />
- </svg>
- </button>
+ <svg
+ aria-hidden="true"
+ class="pf-v5-svg"
+ fill="currentColor"
+ height="1em"
+ role="img"
+ viewBox="0 0 352 512"
+ width="1em"
+ >
+ <path
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+ />
+ </svg>
+ </button>
+ </div>
<header
- class="pf-c-modal-box__header"
+ class="pf-v5-c-modal-box__header"
>
<h1
- class="pf-c-modal-box__title"
+ class="pf-v5-c-modal-box__title"
id="pf-modal-part-1"
>
<span
- class="pf-c-modal-box__title-text"
+ class="pf-v5-c-modal-box__title-text"
>
Keyboard shortcuts
</span>
</h1>
</header>
<div
- class="pf-c-modal-box__body"
+ class="pf-v5-c-modal-box__body"
data-testid="keyboard-shortcuts-help-overlay"
id="pf-modal-part-2"
>
<div
- class="pf-c-content"
+ class="pf-v5-c-content"
>
<dl
class=""
@@ -98,7 +102,7 @@ exports[`KeyBindingsHelpOverlay minimal setup 1`] = `
<h2
class=""
data-ouia-component-id="OUIA-Generated-Text-1"
- data-ouia-component-type="PF4/Text"
+ data-ouia-component-type="PF5/Text"
data-ouia-safe="true"
data-pf-content="true"
>
@@ -115,7 +119,7 @@ exports[`KeyBindingsHelpOverlay minimal setup 1`] = `
<h2
class=""
data-ouia-component-id="OUIA-Generated-Text-2"
- data-ouia-component-type="PF4/Text"
+ data-ouia-component-type="PF5/Text"
data-ouia-safe="true"
data-pf-content="true"
>
diff --git a/packages/editor/tests/envelope/LoadingScreen/__snapshots__/LoadingScreen.test.tsx.snap b/packages/editor/tests/envelope/LoadingScreen/__snapshots__/LoadingScreen.test.tsx.snap
index 1ae78b34aed..104fcf587f4 100644
--- a/packages/editor/tests/envelope/LoadingScreen/__snapshots__/LoadingScreen.test.tsx.snap
+++ b/packages/editor/tests/envelope/LoadingScreen/__snapshots__/LoadingScreen.test.tsx.snap
@@ -11,33 +11,32 @@ exports[`LoadingScreen when just made not visible 1`] = `
data-testid="loading-screen-div"
>
<div
- class="pf-l-bullseye"
+ class="pf-v5-l-bullseye"
>
<div
class="kie-tools--loading-screen-spinner"
>
<div>
- <span
+ <svg
aria-label="Contents"
aria-valuetext="Loading..."
- class="pf-c-spinner pf-m-xl"
+ class="pf-v5-c-spinner pf-m-xl"
role="progressbar"
+ viewBox="0 0 100 100"
>
- <span
- class="pf-c-spinner__clipper"
+ <circle
+ class="pf-v5-c-spinner__path"
+ cx="50"
+ cy="50"
+ fill="none"
+ r="45"
/>
- <span
- class="pf-c-spinner__lead-ball"
- />
- <span
- class="pf-c-spinner__tail-ball"
- />
- </span>
+ </svg>
</div>
<h5
- class="pf-c-title pf-m-md"
+ class="pf-v5-c-title pf-m-md"
data-ouia-component-id="OUIA-Generated-Title-2"
- data-ouia-component-type="PF4/Title"
+ data-ouia-component-type="PF5/Title"
data-ouia-safe="true"
>
Loading...
@@ -60,33 +59,32 @@ exports[`LoadingScreen when not visible after fadeout delay 1`] = `
data-testid="loading-screen-div"
>
<div
- class="pf-l-bullseye"
+ class="pf-v5-l-bullseye"
>
<div
class="kie-tools--loading-screen-spinner"
>
<div>
- <span
+ <svg
aria-label="Contents"
aria-valuetext="Loading..."
- class="pf-c-spinner pf-m-xl"
+ class="pf-v5-c-spinner pf-m-xl"
role="progressbar"
+ viewBox="0 0 100 100"
>
- <span
- class="pf-c-spinner__clipper"
- />
- <span
- class="pf-c-spinner__lead-ball"
+ <circle
+ class="pf-v5-c-spinner__path"
+ cx="50"
+ cy="50"
+ fill="none"
+ r="45"
/>
- <span
- class="pf-c-spinner__tail-ball"
- />
- </span>
+ </svg>
</div>
<h5
- class="pf-c-title pf-m-md"
+ class="pf-v5-c-title pf-m-md"
data-ouia-component-id="OUIA-Generated-Title-3"
- data-ouia-component-type="PF4/Title"
+ data-ouia-component-type="PF5/Title"
data-ouia-safe="true"
>
Loading...
@@ -109,33 +107,32 @@ exports[`LoadingScreen when visible 1`] = `
data-testid="loading-screen-div"
>
<div
- class="pf-l-bullseye"
+ class="pf-v5-l-bullseye"
>
<div
class="kie-tools--loading-screen-spinner"
>
<div>
- <span
+ <svg
aria-label="Contents"
aria-valuetext="Loading..."
- class="pf-c-spinner pf-m-xl"
+ class="pf-v5-c-spinner pf-m-xl"
role="progressbar"
+ viewBox="0 0 100 100"
>
- <span
- class="pf-c-spinner__clipper"
- />
- <span
- class="pf-c-spinner__lead-ball"
- />
- <span
- class="pf-c-spinner__tail-ball"
+ <circle
+ class="pf-v5-c-spinner__path"
+ cx="50"
+ cy="50"
+ fill="none"
+ r="45"
/>
- </span>
+ </svg>
</div>
<h5
- class="pf-c-title pf-m-md"
+ class="pf-v5-c-title pf-m-md"
data-ouia-component-id="OUIA-Generated-Title-1"
- data-ouia-component-type="PF4/Title"
+ data-ouia-component-type="PF5/Title"
data-ouia-safe="true"
>
Loading...
diff --git a/packages/editor/tests/envelope/__snapshots__/EditorEnvelopeView.test.tsx.snap b/packages/editor/tests/envelope/__snapshots__/EditorEnvelopeView.test.tsx.snap
index 8125af90cc8..633737a9fbe 100644
--- a/packages/editor/tests/envelope/__snapshots__/EditorEnvelopeView.test.tsx.snap
+++ b/packages/editor/tests/envelope/__snapshots__/EditorEnvelopeView.test.tsx.snap
@@ -10,10 +10,10 @@ exports[`EditorEnvelopeView after loading stops 1`] = `
>
<svg
aria-hidden="true"
+ class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
- style="vertical-align: -0.125em;"
viewBox="0 0 576 512"
width="1em"
>
@@ -40,10 +40,10 @@ exports[`EditorEnvelopeView after loading stops and editor is set 1`] = `
>
<svg
aria-hidden="true"
+ class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
- style="vertical-align: -0.125em;"
viewBox="0 0 576 512"
width="1em"
>
@@ -77,10 +77,10 @@ exports[`EditorEnvelopeView after set content 1`] = `
>
<svg
aria-hidden="true"
+ class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
- style="vertical-align: -0.125em;"
viewBox="0 0 576 512"
width="1em"
>
@@ -116,33 +116,32 @@ exports[`EditorEnvelopeView first open 1`] = `
data-testid="loading-screen-div"
>
<div
- class="pf-l-bullseye"
+ class="pf-v5-l-bullseye"
>
<div
class="kie-tools--loading-screen-spinner"
>
<div>
- <span
+ <svg
aria-label="Contents"
aria-valuetext="Loading..."
- class="pf-c-spinner pf-m-xl"
+ class="pf-v5-c-spinner pf-m-xl"
role="progressbar"
+ viewBox="0 0 100 100"
>
- <span
- class="pf-c-spinner__clipper"
+ <circle
+ class="pf-v5-c-spinner__path"
+ cx="50"
+ cy="50"
+ fill="none"
+ r="45"
/>
- <span
- class="pf-c-spinner__lead-ball"
- />
- <span
- class="pf-c-spinner__tail-ball"
- />
- </span>
+ </svg>
</div>
<h5
- class="pf-c-title pf-m-md"
+ class="pf-v5-c-title pf-m-md"
data-ouia-component-id="OUIA-Generated-Title-1"
- data-ouia-component-type="PF4/Title"
+ data-ouia-component-type="PF5/Title"
data-ouia-safe="true"
>
Loading...
diff --git a/packages/form-code-generator-patternfly-theme/src/uniforms/AutoForm.tsx b/packages/form-code-generator-patternfly-theme/src/uniforms/AutoForm.tsx
index 5018795dc9a..4ed4e2b0fd2 100644
--- a/packages/form-code-generator-patternfly-theme/src/uniforms/AutoForm.tsx
+++ b/packages/form-code-generator-patternfly-theme/src/uniforms/AutoForm.tsx
@@ -131,7 +131,7 @@ const ${formName}: React.FC<any> = ( props:any ) => {
${staticCodeStr}
return (
- <div className={'pf-c-form'}>
+ <div className={'pf-v5-c-form'}>
${elements}
</div>
)
diff --git a/packages/form-code-generator-patternfly-theme/src/uniforms/NestField.tsx b/packages/form-code-generator-patternfly-theme/src/uniforms/NestField.tsx
index d6ab1cd6dc8..a26c3907e19 100644
--- a/packages/form-code-generator-patternfly-theme/src/uniforms/NestField.tsx
+++ b/packages/form-code-generator-patternfly-theme/src/uniforms/NestField.tsx
@@ -82,7 +82,7 @@ const Nest: React.FunctionComponent<NestFieldProps> = ({
const stateCode = [...nestedStates].join("\n");
const jsxCode = `<Card>
- <CardBody className="pf-c-form">
+ <CardBody className="pf-v5-c-form">
${bodyLabel}
${nestedJsx.join("\n")}
</CardBody></Card>`;
diff --git a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/AutoForm.test.tsx.snap b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/AutoForm.test.tsx.snap
index e24198a44c9..4e206c92073 100644
--- a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/AutoForm.test.tsx.snap
+++ b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/AutoForm.test.tsx.snap
@@ -178,9 +178,9 @@ const Form__HRInterview: React.FC<any> = (props: any) => {
return \`\${hours}:\${minutes} \${isAm ? 'AM' : 'PM'}\`;
};
return (
- <div className={'pf-c-form'}>
+ <div className={'pf-v5-c-form'}>
<Card>
- <CardBody className='pf-c-form'>
+ <CardBody className='pf-v5-c-form'>
<label>
<b>Personal data</b>
</label>
@@ -213,7 +213,7 @@ const Form__HRInterview: React.FC<any> = (props: any) => {
/>
</FormGroup>
<Card>
- <CardBody className='pf-c-form'>
+ <CardBody className='pf-v5-c-form'>
<label>
<b>Child</b>
</label>
@@ -236,7 +236,7 @@ const Form__HRInterview: React.FC<any> = (props: any) => {
</CardBody>
</Card>
<Card>
- <CardBody className='pf-c-form'>
+ <CardBody className='pf-v5-c-form'>
<label>
<b>Address</b>
</label>
@@ -300,7 +300,7 @@ const Form__HRInterview: React.FC<any> = (props: any) => {
</CardBody>
</Card>
<Card>
- <CardBody className='pf-c-form'>
+ <CardBody className='pf-v5-c-form'>
<label>
<b>Interview</b>
</label>
@@ -666,7 +666,7 @@ const Form__HRInterview: React.FC<any> = (props: any) => {
}}>
<div style={{ width: '100%', marginRight: '10px' }}>
<Card>
- <CardBody className='pf-c-form'>
+ <CardBody className='pf-v5-c-form'>
<FormGroup
fieldId={'uniforms-0000-0010'}
label={'Name'}
diff --git a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/ListField.test.tsx.snap b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/ListField.test.tsx.snap
index 437f2092f7d..ed9bd6f8b83 100644
--- a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/ListField.test.tsx.snap
+++ b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/ListField.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`<ListField> tests <ListField> 1`] = `
}}
>
<div style={{ width: '100%', marginRight: '10px' }}><Card>
- <CardBody className="pf-c-form">
+ <CardBody className="pf-v5-c-form">
<FormGroup
fieldId={'uniforms-0000-0003'}
diff --git a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/NestField.test.tsx.snap b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/NestField.test.tsx.snap
index 90561da3387..6500f7fffdb 100644
--- a/packages/form-code-generator-patternfly-theme/tests/__snapshots__/NestField.test.tsx.snap
+++ b/packages/form-code-generator-patternfly-theme/tests/__snapshots__/NestField.test.tsx.snap
@@ -2,7 +2,7 @@
exports[`<NestField> tests <NestField> - rendering 1`] = `
"<Card>
- <CardBody className="pf-c-form">
+ <CardBody className="pf-v5-c-form">
<label><b>Candidate</b></label>
<FormGroup
fieldId={'uniforms-0000-0001'}
@@ -102,7 +102,7 @@ exports[`<NestField> tests <NestField> - rendering 1`] = `
}}
>
<div style={{ width: '100%', marginRight: '10px' }}><Card>
- <CardBody className="pf-c-form">
+ <CardBody className="pf-v5-c-form">
<FormGroup
fieldId={'uniforms-0000-000a'}
diff --git a/packages/form-dmn/package.json b/packages/form-dmn/package.json
index db7ed9f2991..9e6c7537607 100644
--- a/packages/form-dmn/package.json
+++ b/packages/form-dmn/package.json
@@ -32,8 +32,8 @@
"@kie-tools/form": "workspace:*",
"@kie-tools/i18n-common-dictionary": "workspace:*",
"@kie-tools/uniforms-patternfly": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"deep-object-diff": "^1.1.9",
"lodash": "^4.17.21",
"uniforms": "^3.10.2",
diff --git a/packages/form-dmn/src/FormDmnOutputs.tsx b/packages/form-dmn/src/FormDmnOutputs.tsx
index 362b7ed146b..5598880dfc8 100644
--- a/packages/form-dmn/src/FormDmnOutputs.tsx
+++ b/packages/form-dmn/src/FormDmnOutputs.tsx
@@ -34,7 +34,12 @@ import {
} from "@patternfly/react-core/dist/js/components/DescriptionList";
import { Card, CardBody, CardFooter, CardTitle } from "@patternfly/react-core/dist/js/components/Card";
import { Title } from "@patternfly/react-core/dist/js/components/Title";
-import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
+import {
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateIcon,
+ EmptyStateHeader,
+} from "@patternfly/react-core/dist/js/components/EmptyState";
import { Text, TextContent } from "@patternfly/react-core/dist/js/components/Text";
import { formDmnI18n } from "./i18n";
import { I18nWrapped } from "@kie-tools-core/i18n/dist/react-components";
@@ -315,7 +320,7 @@ export function FormDmnOutputs({
() => (
<div>
<EmptyState>
- <EmptyStateIcon icon={ExclamationTriangleIcon} />
+ <EmptyStateHeader icon={<EmptyStateIcon icon={ExclamationTriangleIcon} />} />
<TextContent>
<Text component={"h2"}>{i18n.result.error.title}</Text>
</TextContent>
@@ -361,7 +366,7 @@ export function FormDmnOutputs({
<>
{formResultStatus === FormDmnOutputsStatus.EMPTY && (
<EmptyState>
- <EmptyStateIcon icon={InfoCircleIcon} />
+ <EmptyStateHeader icon={<EmptyStateIcon icon={InfoCircleIcon} />} />
<TextContent>
<Text component={"h2"}>{i18n.result.withoutResponse.title}</Text>
</TextContent>
diff --git a/packages/form-dmn/src/styles.scss b/packages/form-dmn/src/styles.scss
index db02a89dc7b..db058948e27 100644
--- a/packages/form-dmn/src/styles.scss
+++ b/packages/form-dmn/src/styles.scss
@@ -25,10 +25,10 @@
@keyframes highlight {
0% {
- background-color: var(--pf-global--palette--black-600);
+ background-color: var(--pf-v5-global--palette--black-600);
}
100% {
- background-color: var(--pf-global--palette--black-100);
+ background-color: var(--pf-v5-global--palette--black-100);
}
}
diff --git a/packages/form-dmn/tests/__snapshots__/FormDmn.test.tsx.snap b/packages/form-dmn/tests/__snapshots__/FormDmn.test.tsx.snap
index 5ff63eca28f..7d064b477a3 100644
--- a/packages/form-dmn/tests/__snapshots__/FormDmn.test.tsx.snap
+++ b/packages/form-dmn/tests/__snapshots__/FormDmn.test.tsx.snap
@@ -2,7 +2,7 @@
exports[`FormDmn tests should create a text field and a label 1`] = `
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
name
</span>
@@ -10,7 +10,7 @@ exports[`FormDmn tests should create a text field and a label 1`] = `
exports[`FormDmn tests should have placeholder 1`] = `
<span
- class="pf-c-select__toggle-text"
+ class="pf-v5-c-select__toggle-text"
>
Select...
</span>
@@ -22,24 +22,24 @@ exports[`FormDmn tests should remove require parameter 1`] = `
data-testid="form-base"
>
<form
- class="pf-c-form"
+ class="pf-v5-c-form"
data-testid="base-form"
novalidate=""
>
<div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0007-0001"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
name
</span>
@@ -47,23 +47,40 @@ exports[`FormDmn tests should remove require parameter 1`] = `
</div>
<div
- class="pf-c-form__group-control"
+ class="pf-v5-c-form__group-control"
>
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-22"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0007-0001"
- name="name"
- placeholder=""
- type="text"
- value=""
- />
-
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-22"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0007-0001"
+ name="name"
+ placeholder=""
+ type="text"
+ value=""
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -77,24 +94,24 @@ exports[`FormDmn tests should render the DMN Form 1`] = `
data-testid="form-base"
>
<form
- class="pf-c-form"
+ class="pf-v5-c-form"
data-testid="base-form"
novalidate=""
>
<div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0000-0001"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
name
</span>
@@ -102,38 +119,55 @@ exports[`FormDmn tests should render the DMN Form 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-1"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0000-0001"
- name="name"
- placeholder=""
- type="text"
- value="Kogito"
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0000-0001"
+ name="name"
+ placeholder=""
+ type="text"
+ value="Kogito"
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0000-0003"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
lastName
</span>
@@ -141,38 +175,55 @@ exports[`FormDmn tests should render the DMN Form 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-2"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0000-0003"
- name="lastName"
- placeholder=""
- type="text"
- value="Tooling"
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0000-0003"
+ name="lastName"
+ placeholder=""
+ type="text"
+ value="Tooling"
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0000-0005"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
daysAndTimeDuration
</span>
@@ -180,38 +231,55 @@ exports[`FormDmn tests should render the DMN Form 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-3"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0000-0005"
- name="daysAndTimeDuration"
- placeholder=""
- type="text"
- value="P1D"
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0000-0005"
+ name="daysAndTimeDuration"
+ placeholder=""
+ type="text"
+ value="P1D"
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0000-0007"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
yearsAndMonthDuration
</span>
@@ -219,23 +287,40 @@ exports[`FormDmn tests should render the DMN Form 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-4"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0000-0007"
- name="yearsAndMonthDuration"
- placeholder=""
- type="text"
- value=""
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0000-0007"
+ name="yearsAndMonthDuration"
+ placeholder=""
+ type="text"
+ value=""
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -248,24 +333,24 @@ exports[`FormDmn tests should submit the formInputs 1`] = `
data-testid="form-base"
>
<form
- class="pf-c-form"
+ class="pf-v5-c-form"
data-testid="base-form"
novalidate=""
>
<div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0001-0001"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
name
</span>
@@ -273,38 +358,55 @@ exports[`FormDmn tests should submit the formInputs 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-5"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0001-0001"
- name="name"
- placeholder=""
- type="text"
- value="Kogito"
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0001-0001"
+ name="name"
+ placeholder=""
+ type="text"
+ value="Kogito"
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0001-0003"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
lastName
</span>
@@ -312,38 +414,55 @@ exports[`FormDmn tests should submit the formInputs 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-6"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0001-0003"
- name="lastName"
- placeholder=""
- type="text"
- value="Tooling"
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0001-0003"
+ name="lastName"
+ placeholder=""
+ type="text"
+ value="Tooling"
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0001-0005"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
daysAndTimeDuration
</span>
@@ -351,38 +470,55 @@ exports[`FormDmn tests should submit the formInputs 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-7"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0001-0005"
- name="daysAndTimeDuration"
- placeholder=""
- type="text"
- value="P1D"
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0001-0005"
+ name="daysAndTimeDuration"
+ placeholder=""
+ type="text"
+ value="P1D"
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0001-0007"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
yearsAndMonthDuration
</span>
@@ -390,23 +526,40 @@ exports[`FormDmn tests should submit the formInputs 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-8"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0001-0007"
- name="yearsAndMonthDuration"
- placeholder=""
- type="text"
- value=""
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-8"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0001-0007"
+ name="yearsAndMonthDuration"
+ placeholder=""
+ type="text"
+ value=""
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -419,24 +572,24 @@ exports[`FormDmn tests should validate the formInputs - invalid 1`] = `
data-testid="form-base"
>
<form
- class="pf-c-form"
+ class="pf-v5-c-form"
data-testid="base-form"
novalidate=""
>
<div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0004-0001"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
name
</span>
@@ -444,38 +597,55 @@ exports[`FormDmn tests should validate the formInputs - invalid 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-17"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0004-0001"
- name="name"
- placeholder=""
- type="text"
- value="Kogito"
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-17"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0004-0001"
+ name="name"
+ placeholder=""
+ type="text"
+ value="Kogito"
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0004-0003"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
lastName
</span>
@@ -483,38 +653,55 @@ exports[`FormDmn tests should validate the formInputs - invalid 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-18"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0004-0003"
- name="lastName"
- placeholder=""
- type="text"
- value="Tooling"
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-18"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0004-0003"
+ name="lastName"
+ placeholder=""
+ type="text"
+ value="Tooling"
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0004-0005"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
daysAndTimeDuration
</span>
@@ -522,44 +709,76 @@ exports[`FormDmn tests should validate the formInputs - invalid 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="true"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-19"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0004-0005"
- name="daysAndTimeDuration"
- placeholder=""
- type="text"
- value="p"
- />
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control pf-m-error"
+ >
+ <input
+ aria-invalid="true"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-19"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0004-0005"
+ name="daysAndTimeDuration"
+ placeholder=""
+ type="text"
+ value="p"
+ />
+ <span
+ class="pf-v5-c-form-control__utilities"
+ >
+ <span
+ class="pf-v5-c-form-control__icon pf-m-status"
+ >
+ <svg
+ aria-hidden="true"
+ class="pf-v5-svg"
+ fill="currentColor"
+ height="1em"
+ role="img"
+ viewBox="0 0 512 512"
+ width="1em"
+ >
+ <path
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+ />
+ </svg>
+ </span>
+ </span>
+ </span>
<div
- aria-live="polite"
- class="pf-c-form__helper-text pf-m-error"
- id="uniforms-0004-0005-helper"
+ class="pf-v5-c-form__helper-text"
>
- should match format P1D(ays)T2H(ours)3M(inutes)1S(econds)
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
</div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0004-0007"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
yearsAndMonthDuration
</span>
@@ -567,23 +786,40 @@ exports[`FormDmn tests should validate the formInputs - invalid 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-20"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0004-0007"
- name="yearsAndMonthDuration"
- placeholder=""
- type="text"
- value=""
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-20"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0004-0007"
+ name="yearsAndMonthDuration"
+ placeholder=""
+ type="text"
+ value=""
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -596,24 +832,24 @@ exports[`FormDmn tests should validate the formInputs - success 1`] = `
data-testid="form-base"
>
<form
- class="pf-c-form"
+ class="pf-v5-c-form"
data-testid="base-form"
novalidate=""
>
<div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0003-0001"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
name
</span>
@@ -621,38 +857,55 @@ exports[`FormDmn tests should validate the formInputs - success 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-13"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0003-0001"
- name="name"
- placeholder=""
- type="text"
- value="Kogito"
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-13"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0003-0001"
+ name="name"
+ placeholder=""
+ type="text"
+ value="Kogito"
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0003-0003"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
lastName
</span>
@@ -660,38 +913,55 @@ exports[`FormDmn tests should validate the formInputs - success 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-14"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0003-0003"
- name="lastName"
- placeholder=""
- type="text"
- value="Tooling"
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-14"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0003-0003"
+ name="lastName"
+ placeholder=""
+ type="text"
+ value="Tooling"
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0003-0005"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
daysAndTimeDuration
</span>
@@ -699,38 +969,55 @@ exports[`FormDmn tests should validate the formInputs - success 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-15"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0003-0005"
- name="daysAndTimeDuration"
- placeholder=""
- type="text"
- value="P1D"
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-15"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0003-0005"
+ name="daysAndTimeDuration"
+ placeholder=""
+ type="text"
+ value="P1D"
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0003-0007"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
yearsAndMonthDuration
</span>
@@ -738,23 +1025,40 @@ exports[`FormDmn tests should validate the formInputs - success 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-16"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0003-0007"
- name="yearsAndMonthDuration"
- placeholder=""
- type="text"
- value=""
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-16"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0003-0007"
+ name="yearsAndMonthDuration"
+ placeholder=""
+ type="text"
+ value=""
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -767,24 +1071,24 @@ exports[`FormDmn tests shouldn't submit the formInputs 1`] = `
data-testid="form-base"
>
<form
- class="pf-c-form"
+ class="pf-v5-c-form"
data-testid="base-form"
novalidate=""
>
<div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0002-0001"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
name
</span>
@@ -792,38 +1096,55 @@ exports[`FormDmn tests shouldn't submit the formInputs 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-9"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0002-0001"
- name="name"
- placeholder=""
- type="text"
- value=""
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-9"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0002-0001"
+ name="name"
+ placeholder=""
+ type="text"
+ value=""
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0002-0003"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
lastName
</span>
@@ -831,38 +1152,55 @@ exports[`FormDmn tests shouldn't submit the formInputs 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-10"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0002-0003"
- name="lastName"
- placeholder=""
- type="text"
- value=""
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-10"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0002-0003"
+ name="lastName"
+ placeholder=""
+ type="text"
+ value=""
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0002-0005"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
daysAndTimeDuration
</span>
@@ -870,44 +1208,76 @@ exports[`FormDmn tests shouldn't submit the formInputs 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="true"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-11"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0002-0005"
- name="daysAndTimeDuration"
- placeholder=""
- type="text"
- value="p"
- />
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control pf-m-error"
+ >
+ <input
+ aria-invalid="true"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-11"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0002-0005"
+ name="daysAndTimeDuration"
+ placeholder=""
+ type="text"
+ value="p"
+ />
+ <span
+ class="pf-v5-c-form-control__utilities"
+ >
+ <span
+ class="pf-v5-c-form-control__icon pf-m-status"
+ >
+ <svg
+ aria-hidden="true"
+ class="pf-v5-svg"
+ fill="currentColor"
+ height="1em"
+ role="img"
+ viewBox="0 0 512 512"
+ width="1em"
+ >
+ <path
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+ />
+ </svg>
+ </span>
+ </span>
+ </span>
<div
- aria-live="polite"
- class="pf-c-form__helper-text pf-m-error"
- id="uniforms-0002-0005-helper"
+ class="pf-v5-c-form__helper-text"
>
- should match format P1D(ays)T2H(ours)3M(inutes)1S(econds)
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
</div>
</div>
</div>
<div
- class="pf-c-form__group"
+ class="pf-v5-c-form__group"
data-testid="wrapper-field"
>
<div
- class="pf-c-form__group-label"
+ class="pf-v5-c-form__group-label"
>
<label
- class="pf-c-form__label"
+ class="pf-v5-c-form__label"
for="uniforms-0002-0007"
>
<span
- class="pf-c-form__label-text"
+ class="pf-v5-c-form__label-text"
>
yearsAndMonthDuration
</span>
@@ -915,23 +1285,40 @@ exports[`FormDmn tests shouldn't submit the formInputs 1`] = `
</div>
<div
- class="pf-c-form__group-control"
- >
- <input
- aria-invalid="false"
- aria-label="uniforms text field"
- class="pf-c-form-control"
- data-ouia-component-id="OUIA-Generated-TextInputBase-12"
- data-ouia-component-type="PF4/TextInput"
- data-ouia-safe="true"
- data-testid="text-field"
- id="uniforms-0002-0007"
- name="yearsAndMonthDuration"
- placeholder=""
- type="text"
- value=""
- />
-
+ class="pf-v5-c-form__group-control"
+ >
+ <span
+ class="pf-v5-c-form-control"
+ >
+ <input
+ aria-invalid="false"
+ aria-label="uniforms text field"
+ data-ouia-component-id="OUIA-Generated-TextInputBase-12"
+ data-ouia-component-type="PF5/TextInput"
+ data-ouia-safe="true"
+ data-testid="text-field"
+ id="uniforms-0002-0007"
+ name="yearsAndMonthDuration"
+ placeholder=""
+ type="text"
+ value=""
+ />
+ </span>
+ <div
+ class="pf-v5-c-form__helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text"
+ >
+ <div
+ class="pf-v5-c-helper-text__item"
+ >
+ <span
+ class="pf-v5-c-helper-text__item-text"
+ />
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
diff --git a/packages/form-dmn/tests/__snapshots__/FormDmnOutputs.test.tsx.snap b/packages/form-dmn/tests/__snapshots__/FormDmnOutputs.test.tsx.snap
index ac3f22abbe0..5a6a93d3abb 100644
--- a/packages/form-dmn/tests/__snapshots__/FormDmnOutputs.test.tsx.snap
+++ b/packages/form-dmn/tests/__snapshots__/FormDmnOutputs.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`FormDmnOutputs tests should render the DMNFormResult with the empty sta
<h2
class=""
data-ouia-component-id="OUIA-Generated-Text-1"
- data-ouia-component-type="PF4/Text"
+ data-ouia-component-type="PF5/Text"
data-ouia-safe="true"
data-pf-content="true"
>
@@ -30,9 +30,9 @@ exports[`FormDmnOutputs tests should render the DMNFormResult with the empty sta
exports[`FormDmnOutputs tests should render the FormDmnOutputs with more then one result 1`] = `
<h2
- class="pf-c-title pf-m-xl"
+ class="pf-v5-c-title pf-m-xl"
data-ouia-component-id="OUIA-Generated-Title-2"
- data-ouia-component-type="PF4/Title"
+ data-ouia-component-type="PF5/Title"
data-ouia-safe="true"
>
Decision-1
@@ -41,9 +41,9 @@ exports[`FormDmnOutputs tests should render the FormDmnOutputs with more then on
exports[`FormDmnOutputs tests should render the FormDmnOutputs with more then one result 2`] = `
<h2
- class="pf-c-title pf-m-xl"
+ class="pf-v5-c-title pf-m-xl"
data-ouia-component-id="OUIA-Generated-Title-3"
- data-ouia-component-type="PF4/Title"
+ data-ouia-component-type="PF5/Title"
data-ouia-safe="true"
>
Decision-2
@@ -52,9 +52,9 @@ exports[`FormDmnOutputs tests should render the FormDmnOutputs with more then on
exports[`FormDmnOutputs tests should render the FormDmnOutputs with more then one result 3`] = `
<h2
- class="pf-c-title pf-m-xl"
+ class="pf-v5-c-title pf-m-xl"
data-ouia-component-id="OUIA-Generated-Title-4"
- data-ouia-component-type="PF4/Title"
+ data-ouia-component-type="PF5/Title"
data-ouia-safe="true"
>
Decision-3
@@ -63,9 +63,9 @@ exports[`FormDmnOutputs tests should render the FormDmnOutputs with more then on
exports[`FormDmnOutputs tests should render the FormDmnOutputs with one result 1`] = `
<h2
- class="pf-c-title pf-m-xl"
+ class="pf-v5-c-title pf-m-xl"
data-ouia-component-id="OUIA-Generated-Title-1"
- data-ouia-component-type="PF4/Title"
+ data-ouia-component-type="PF5/Title"
data-ouia-safe="true"
>
Decision-1
diff --git a/packages/form/package.json b/packages/form/package.json
index 8ce310fe537..62532320a4f 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -29,8 +29,8 @@
"@kie-tools/dmn-runner": "workspace:*",
"@kie-tools/i18n-common-dictionary": "workspace:*",
"@kie-tools/uniforms-patternfly": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
"ajv": "^8.17.1",
"ajv-draft-04": "^1.0.0",
"ajv-errors": "^1.0.1",
diff --git a/packages/form/src/FormStatus.tsx b/packages/form/src/FormStatus.tsx
index f76ccd56ccd..473710cccf7 100644
--- a/packages/form/src/FormStatus.tsx
+++ b/packages/form/src/FormStatus.tsx
@@ -18,7 +18,12 @@
*/
import * as React from "react";
-import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
+import {
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateIcon,
+ EmptyStateHeader,
+} from "@patternfly/react-core/dist/js/components/EmptyState";
import { ExclamationTriangleIcon } from "@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon";
import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/js/components/Text";
import { I18nWrapped } from "@kie-tools-core/i18n/dist/react-components";
@@ -45,7 +50,7 @@ export function EmptyFormStatus({ i18n }: EmptyFormStatusProps) {
return (
<div>
<EmptyState>
- <EmptyStateIcon icon={CubesIcon} />
+ <EmptyStateHeader icon={<EmptyStateIcon icon={CubesIcon} />} />
<TextContent>
<Text component={"h2"}>{i18n.form.status.emptyForm.title}</Text>
</TextContent>
@@ -76,7 +81,7 @@ export function AutoGenerationErrorFormStatus(props: AutoGenerationErrorFormStat
return (
<div>
<EmptyState>
- <EmptyStateIcon icon={ExclamationIcon} />
+ <EmptyStateHeader icon={<EmptyStateIcon icon={ExclamationIcon} />} />
<TextContent>
<Text component={"h2"}>{props.i18n.form.status.autoGenerationError.title}</Text>
</TextContent>
@@ -104,7 +109,7 @@ export function ValidatorErrorFormStatus({ i18n }: ValidatorErrorFormStatusProps
return (
<div>
<EmptyState>
- <EmptyStateIcon icon={ExclamationTriangleIcon} />
+ <EmptyStateHeader icon={<EmptyStateIcon icon={ExclamationTriangleIcon} />} />
<TextContent>
<Text component={"h2"}>{i18n.form.status.validatorError.title}</Text>
</TextContent>
diff --git a/packages/import-java-classes-component/package.json b/packages/import-java-classes-component/package.json
index 718294234af..131975a3f4c 100644
--- a/packages/import-java-classes-component/package.json
+++ b/packages/import-java-classes-component/package.json
@@ -20,9 +20,9 @@
"@kie-tools-core/i18n": "workspace:*",
"@kie-tools-core/vscode-java-code-completion": "workspace:*",
"@kie-tools/i18n-common-dictionary": "workspace:*",
- "@patternfly/react-core": "^4.276.6",
- "@patternfly/react-icons": "^4.93.6",
- "@patternfly/react-table": "^4.112.39"
+ "@patternfly/react-core": "^5.4.1",
+ "@patternfly/react-icons": "^5.4.1",
+ "@patternfly/react-table": "^5.4.1"
},
"devDependencies": {
"@babel/core": "^7.16.0",
diff --git a/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizard.tsx b/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizard.tsx
index bc82ae05228..d1cd17dd5f3 100644
--- a/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizard.tsx
+++ b/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizard.tsx
@@ -22,7 +22,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
import { Button } from "@patternfly/react-core/dist/js/components/Button";
import { Modal, ModalVariant } from "@patternfly/react-core/dist/js/components/Modal";
import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
-import { Wizard } from "@patternfly/react-core/dist/js/components/Wizard";
+import { Wizard } from "@patternfly/react-core/dist/js/deprecated/components/Wizard";
import { useImportJavaClassesWizardI18n } from "../../i18n";
import { ImportJavaClassesWizardFirstStep } from "./ImportJavaClassesWizardFirstStep";
import { ImportJavaClassesWizardSecondStep } from "./ImportJavaClassesWizardSecondStep";
@@ -35,8 +35,9 @@ import { JavaCodeCompletionService } from "./services";
export type LanguageServerStatus = "disable" | "enable" | "loading" | "error";
-export type ImportJavaClassesWizardProps = Pick<React.ComponentProps<typeof Modal>, "isOpen" | "onClose"> & {
+export type ImportJavaClassesWizardProps = Pick<React.ComponentProps<typeof Modal>, "isOpen"> & {
onSave: (javaClass: JavaClass[]) => void;
+ onClose: () => void;
javaCodeCompletionService: JavaCodeCompletionService;
};
diff --git a/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardFieldListTable.tsx b/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardFieldListTable.tsx
index cb633554394..3a4f40e16bd 100644
--- a/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardFieldListTable.tsx
+++ b/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardFieldListTable.tsx
@@ -19,7 +19,8 @@
import * as React from "react";
import "./ImportJavaClassesWizardFieldListTable.css";
-import { ExpandableRowContent, TableComposable, Tbody, Td, Tr } from "@patternfly/react-table";
+import { ExpandableRowContent, Tbody, Td, Tr } from "@patternfly/react-table";
+import { Table } from "@patternfly/react-table/deprecated";
import { JavaClass } from "./model/JavaClass";
import { Button } from "@patternfly/react-core/dist/js/components/Button";
import { JavaField } from "./model/JavaField";
@@ -37,7 +38,7 @@ export interface ImportJavaClassesWizardFieldListTableProps {
export const ImportJavaClassesWizardFieldListTable = (props: ImportJavaClassesWizardFieldListTableProps) => {
return (
- <TableComposable aria-label="field-table">
+ <Table aria-label="field-table">
{props.selectedJavaClassFields.map((javaClass, index) => {
return (
<TableJavaClassItem
@@ -48,7 +49,7 @@ export const ImportJavaClassesWizardFieldListTable = (props: ImportJavaClassesWi
/>
);
})}
- </TableComposable>
+ </Table>
);
};
@@ -106,7 +107,7 @@ const TableJavaClassItem = ({
className={"fetch-button"}
onClick={() => loadJavaClass(field.type)}
variant="primary"
- isSmall
+ size="sm"
>
{`${i18n.modalWizard.fieldTable.fetchButtonLabel} "${getJavaClassSimpleName(field.type)}" class`}
</Button>
diff --git a/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardFirstStep.tsx b/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardFirstStep.tsx
index 8760b2030fb..81cbd06d880 100644
--- a/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardFirstStep.tsx
+++ b/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardFirstStep.tsx
@@ -27,11 +27,15 @@ import {
DataListItem,
DataListItemRow,
} from "@patternfly/react-core/dist/js/components/DataList";
-import { EmptyState, EmptyStateBody, EmptyStateIcon } from "@patternfly/react-core/dist/js/components/EmptyState";
+import {
+ EmptyState,
+ EmptyStateBody,
+ EmptyStateIcon,
+ EmptyStateHeader,
+} from "@patternfly/react-core/dist/js/components/EmptyState";
import { SearchInput } from "@patternfly/react-core/dist/js/components/SearchInput";
import { Spinner } from "@patternfly/react-core/dist/js/components/Spinner";
import { Tooltip } from "@patternfly/react-core/dist/js/components/Tooltip";
-import { Title } from "@patternfly/react-core/dist/js/components/Title";
import CubesIcon from "@patternfly/react-icons/dist/js/icons/cubes-icon";
import { useImportJavaClassesWizardI18n } from "../../i18n";
import { useCallback, useState } from "react";
@@ -146,7 +150,7 @@ export const ImportJavaClassesWizardFirstStep = ({
</div>
{isRequestLoading ? (
<Bullseye>
- <Spinner isSVG={true} />
+ <Spinner />
</Bullseye>
) : retrievedJavaClassesNames.length > 0 || selectedJavaClasses.length > 0 ? (
<DataList aria-label={"class-data-list"}>
@@ -184,10 +188,11 @@ const EmptyStep = ({
}) => {
return (
<EmptyState>
- <EmptyStateIcon icon={CubesIcon} />
- <Title headingLevel={"h6"} size={"md"}>
- {emptyStateTitleText}
- </Title>
+ <EmptyStateHeader
+ titleText={<>{emptyStateTitleText}</>}
+ icon={<EmptyStateIcon icon={CubesIcon} />}
+ headingLevel={"h6"}
+ />
<EmptyStateBody>{emptyStateBodyText}</EmptyStateBody>
</EmptyState>
);
diff --git a/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardSecondStep.tsx b/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardSecondStep.tsx
index 05ff553a11b..1bb99b79d92 100644
--- a/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardSecondStep.tsx
+++ b/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardSecondStep.tsx
@@ -133,7 +133,7 @@ export const ImportJavaClassesWizardSecondStep = ({
<>
{selectedJavaClasses.some((javaClass) => !javaClass.fieldsLoaded) ? (
<Bullseye>
- <Spinner isSVG={true} />
+ <Spinner />
</Bullseye>
) : (
<ImportJavaClassesWizardFieldListTable
diff --git a/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardThirdStep.css b/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardThirdStep.css
index 7afa1632c69..f10fa964a0f 100644
--- a/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardThirdStep.css
+++ b/packages/import-java-classes-component/src/components/ImportJavaClasses/ImportJavaClassesWizardThirdStep.css
@@ -17,6 +17,6 @@
* under the License.
*/
-.import-java-classes .fields-table .pf-c-table {
- --pf-global--Color--100: #6a6e73;
+.import-java-classes .fields-table .pf-v5-c-table {
+ --pf-v5-global--Color--100: #6a6e73;
}
diff --git a/packages/import-java-classes-component/tests/ImportJavaClasses/__snapshots__/ImportJavaClasses.test.tsx.snap b/packages/import-java-classes-component/tests/ImportJavaClasses/__snapshots__/ImportJavaClasses.test.tsx.snap
index 46960a4b629..e85afb59a9a 100644
--- a/packages/import-java-classes-component/tests/ImportJavaClasses/__snapshots__/ImportJavaClasses.test.tsx.snap
+++ b/packages/import-java-classes-component/tests/ImportJavaClasses/__snapshots__/ImportJavaClasses.test.tsx.snap
@@ -4,14 +4,12 @@ exports[`ImportJavaClasses component tests Should close Modal after opening it a
<body
class=""
>
- <div
- aria-hidden="true"
- >
+ <div>
<button
aria-disabled="false"
- class="pf-c-button pf-m-secondary pf-m-progress"
+ class="pf-v5-c-button pf-m-secondary pf-m-progress"
data-ouia-component-id="OUIA-Generated-Button-secondary-10"
- data-ouia-component-type="PF4/Button"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
data-testid="modal-wizard-button"
type="button"
@@ -24,16 +22,16 @@ exports[`ImportJavaClasses component tests Should close Modal after opening it a
exports[`ImportJavaClasses component tests Should move to second step 1`] = `
<body
- class="pf-c-backdrop__open"
+ class="pf-v5-c-backdrop__open"
>
<div
aria-hidden="true"
>
<button
aria-disabled="false"
- class="pf-c-button pf-m-secondary pf-m-progress"
+ class="pf-v5-c-button pf-m-secondary pf-m-progress"
data-ouia-component-id="OUIA-Generated-Button-secondary-12"
- data-ouia-component-type="PF4/Button"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
data-testid="modal-wizard-button"
type="button"
@@ -43,86 +41,90 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
</div>
<div>
<div
- class="pf-c-backdrop"
+ class="pf-v5-c-backdrop"
>
<div
- class="pf-l-bullseye"
+ class="pf-v5-l-bullseye"
>
<div
aria-describedby="pf-modal-part-6"
aria-labelledby="pf-modal-part-5"
aria-modal="true"
- class="pf-c-modal-box pf-m-lg"
+ class="pf-v5-c-modal-box pf-m-lg"
data-ouia-component-id="OUIA-Generated-Modal-large-5"
- data-ouia-component-type="PF4/ModalContent"
+ data-ouia-component-type="PF5/ModalContent"
data-ouia-safe="true"
id="pf-modal-part-4"
role="dialog"
>
- <button
- aria-disabled="false"
- aria-label="Close"
- class="pf-c-button pf-m-plain"
- data-ouia-component-id="OUIA-Generated-Modal-large-5-ModalBoxCloseButton"
- data-ouia-component-type="PF4/Button"
- data-ouia-safe="true"
- type="button"
+ <div
+ class="pf-v5-c-modal-box__close"
>
- <svg
- aria-hidden="true"
- fill="currentColor"
- height="1em"
- role="img"
- style="vertical-align: -0.125em;"
- viewBox="0 0 352 512"
- width="1em"
+ <button
+ aria-disabled="false"
+ aria-label="Close"
+ class="pf-v5-c-button pf-m-plain"
+ data-ouia-component-id="OUIA-Generated-Modal-large-5-ModalBoxCloseButton"
+ data-ouia-component-type="PF5/Button"
+ data-ouia-safe="true"
+ type="button"
>
- <path
- d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
- />
- </svg>
- </button>
+ <svg
+ aria-hidden="true"
+ class="pf-v5-svg"
+ fill="currentColor"
+ height="1em"
+ role="img"
+ viewBox="0 0 352 512"
+ width="1em"
+ >
+ <path
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+ />
+ </svg>
+ </button>
+ </div>
<header
- class="pf-c-modal-box__header"
+ class="pf-v5-c-modal-box__header"
>
<h1
- class="pf-c-modal-box__title"
+ class="pf-v5-c-modal-box__title"
id="pf-modal-part-5"
>
<span
- class="pf-c-modal-box__title-text"
+ class="pf-v5-c-modal-box__title-text"
>
Import Java classes
</span>
</h1>
<div
- class="pf-c-modal-box__description"
+ class="pf-v5-c-modal-box__description"
id="pf-modal-part-6"
>
It converts your Java assets to DMN types. This is a one-time import action: if the Java class gets updated, you will need to reimport it.
</div>
</header>
<div
- class="pf-c-modal-box__body"
+ class="pf-v5-c-modal-box__body"
>
<div
- class="pf-c-wizard import-java-classes"
+ class="pf-v5-c-wizard import-java-classes"
style="height: 600px;"
>
<button
aria-expanded="false"
aria-label="Wizard Toggle"
- class="pf-c-wizard__toggle"
+ class="pf-v5-c-wizard__toggle"
>
<span
- class="pf-c-wizard__toggle-list"
+ class="pf-v5-c-wizard__toggle-list"
>
<span
- class="pf-c-wizard__toggle-list-item"
+ class="pf-v5-c-wizard__toggle-list-item"
>
<span
- class="pf-c-wizard__toggle-num"
+ class="pf-v5-c-wizard__toggle-num"
>
2
</span>
@@ -131,14 +133,14 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
</span>
</span>
<span
- class="pf-c-wizard__toggle-icon"
+ class="pf-v5-c-wizard__toggle-icon"
>
<svg
aria-hidden="true"
+ class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
- style="vertical-align: -0.125em;"
viewBox="0 0 320 512"
width="1em"
>
@@ -149,55 +151,59 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
</span>
</button>
<div
- class="pf-c-wizard__outer-wrap"
+ class="pf-v5-c-wizard__outer-wrap"
>
<div
- class="pf-c-wizard__inner-wrap"
+ class="pf-v5-c-wizard__inner-wrap"
>
<nav
- class="pf-c-wizard__nav"
+ class="pf-v5-c-wizard__nav"
data-ouia-component-id="OUIA-Generated-WizardNav-5"
- data-ouia-component-type="PF4/WizardNav"
+ data-ouia-component-type="PF5/WizardNav"
data-ouia-safe="true"
>
<ol
- class="pf-c-wizard__nav-list"
+ class="pf-v5-c-wizard__nav-list"
+ role="list"
>
<li
- class="pf-c-wizard__nav-item"
+ class="pf-v5-c-wizard__nav-item"
>
<button
aria-current="false"
- class="pf-c-wizard__nav-link"
+ class="pf-v5-c-wizard__nav-link"
data-ouia-component-id="OUIA-Generated-WizardNavItem-13"
- data-ouia-component-type="PF4/WizardNavItem"
+ data-ouia-component-type="PF5/WizardNavItem"
data-ouia-safe="true"
+ type="button"
>
Select Java classes
</button>
</li>
<li
- class="pf-c-wizard__nav-item"
+ class="pf-v5-c-wizard__nav-item"
>
<button
aria-current="step"
- class="pf-c-wizard__nav-link pf-m-current"
+ class="pf-v5-c-wizard__nav-link pf-m-current"
data-ouia-component-id="OUIA-Generated-WizardNavItem-14"
- data-ouia-component-type="PF4/WizardNavItem"
+ data-ouia-component-type="PF5/WizardNavItem"
data-ouia-safe="true"
+ type="button"
>
Select fields
</button>
</li>
<li
- class="pf-c-wizard__nav-item"
+ class="pf-v5-c-wizard__nav-item"
>
<button
aria-current="false"
- class="pf-c-wizard__nav-link"
+ class="pf-v5-c-wizard__nav-link"
data-ouia-component-id="OUIA-Generated-WizardNavItem-15"
- data-ouia-component-type="PF4/WizardNavItem"
+ data-ouia-component-type="PF5/WizardNavItem"
data-ouia-safe="true"
+ type="button"
>
Review
</button>
@@ -205,53 +211,54 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
</ol>
</nav>
<div
- class="pf-c-wizard__main"
+ class="pf-v5-c-wizard__main"
>
<div
- class="pf-c-wizard__main-body"
+ class="pf-v5-c-wizard__main-body"
>
<table
aria-label="field-table"
- class="pf-c-table pf-m-grid-md"
- data-ouia-component-id="OUIA-Generated-Table-1"
- data-ouia-component-type="PF4/Table"
+ class="pf-v5-c-table pf-m-grid-md"
+ data-ouia-component-id="OUIA-Generated-Table-2"
+ data-ouia-component-type="PF5/Table"
data-ouia-safe="true"
role="grid"
>
<tbody
- class="pf-m-expanded"
+ class="pf-v5-c-table__tbody pf-m-expanded"
role="rowgroup"
>
<tr
- class=""
+ class="pf-v5-c-table__tr"
data-ouia-component-id="OUIA-Generated-TableRow-1"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class="pf-c-table__toggle"
+ class="pf-v5-c-table__td pf-v5-c-table__toggle"
+ tabindex="-1"
>
<button
aria-disabled="false"
aria-expanded="true"
aria-label="Details"
aria-labelledby="simple-node0 expand-toggle0"
- class="pf-c-button pf-m-plain pf-m-expanded"
+ class="pf-v5-c-button pf-m-plain pf-m-expanded"
data-ouia-component-id="OUIA-Generated-Button-plain-9"
- data-ouia-component-type="PF4/Button"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="expand-toggle0"
type="button"
>
<div
- class="pf-c-table__toggle-icon"
+ class="pf-v5-c-table__toggle-icon"
>
<svg
aria-hidden="true"
+ class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
- style="vertical-align: -0.125em;"
viewBox="0 0 320 512"
width="1em"
>
@@ -263,7 +270,8 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
</button>
</td>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<span>
<strong>
@@ -278,19 +286,21 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
</td>
</tr>
<tr
- class="pf-c-table__expandable-row pf-m-expanded"
+ class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
data-ouia-component-id="OUIA-Generated-TableRow-2"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
/>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<div
- class="pf-c-table__expandable-row-content"
+ class="pf-v5-c-table__expandable-row-content"
>
<span>
isAlive
@@ -304,19 +314,21 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
</td>
</tr>
<tr
- class="pf-c-table__expandable-row pf-m-expanded"
+ class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
data-ouia-component-id="OUIA-Generated-TableRow-3"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
/>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<div
- class="pf-c-table__expandable-row-content"
+ class="pf-v5-c-table__expandable-row-content"
>
<span>
name
@@ -331,39 +343,40 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
</tr>
</tbody>
<tbody
- class="pf-m-expanded"
+ class="pf-v5-c-table__tbody pf-m-expanded"
role="rowgroup"
>
<tr
- class=""
+ class="pf-v5-c-table__tr"
data-ouia-component-id="OUIA-Generated-TableRow-4"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class="pf-c-table__toggle"
+ class="pf-v5-c-table__td pf-v5-c-table__toggle"
+ tabindex="-1"
>
<button
aria-disabled="false"
aria-expanded="true"
aria-label="Details"
aria-labelledby="simple-node1 expand-toggle1"
- class="pf-c-button pf-m-plain pf-m-expanded"
+ class="pf-v5-c-button pf-m-plain pf-m-expanded"
data-ouia-component-id="OUIA-Generated-Button-plain-10"
- data-ouia-component-type="PF4/Button"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="expand-toggle1"
type="button"
>
<div
- class="pf-c-table__toggle-icon"
+ class="pf-v5-c-table__toggle-icon"
>
<svg
aria-hidden="true"
+ class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
- style="vertical-align: -0.125em;"
viewBox="0 0 320 512"
width="1em"
>
@@ -375,7 +388,8 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
</button>
</td>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<span>
<strong>
@@ -390,19 +404,21 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
</td>
</tr>
<tr
- class="pf-c-table__expandable-row pf-m-expanded"
+ class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
data-ouia-component-id="OUIA-Generated-TableRow-5"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
/>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<div
- class="pf-c-table__expandable-row-content"
+ class="pf-v5-c-table__expandable-row-content"
>
<span>
test
@@ -414,9 +430,9 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
</span>
<button
aria-disabled="false"
- class="pf-c-button pf-m-primary pf-m-small fetch-button"
+ class="pf-v5-c-button pf-m-primary pf-m-small fetch-button"
data-ouia-component-id="OUIA-Generated-Button-primary-6"
- data-ouia-component-type="PF4/Button"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
type="button"
>
@@ -426,19 +442,21 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
</td>
</tr>
<tr
- class="pf-c-table__expandable-row pf-m-expanded"
+ class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
data-ouia-component-id="OUIA-Generated-TableRow-6"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
/>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<div
- class="pf-c-table__expandable-row-content"
+ class="pf-v5-c-table__expandable-row-content"
>
<span>
title
@@ -452,19 +470,21 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
</td>
</tr>
<tr
- class="pf-c-table__expandable-row pf-m-expanded"
+ class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
data-ouia-component-id="OUIA-Generated-TableRow-7"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
/>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<div
- class="pf-c-table__expandable-row-content"
+ class="pf-v5-c-table__expandable-row-content"
>
<span>
year
@@ -483,36 +503,36 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
</div>
</div>
<footer
- class="pf-c-wizard__footer"
+ class="pf-v5-c-wizard__footer"
>
<button
aria-disabled="false"
- class="pf-c-button pf-m-primary"
- data-ouia-component-id="OUIA-Generated-Button-primary-5"
- data-ouia-component-type="PF4/Button"
+ class="pf-v5-c-button pf-m-secondary"
+ data-ouia-component-id="OUIA-Generated-Button-secondary-13"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
- type="submit"
+ type="button"
>
- Next
+ Back
</button>
<button
aria-disabled="false"
- class="pf-c-button pf-m-secondary"
- data-ouia-component-id="OUIA-Generated-Button-secondary-13"
- data-ouia-component-type="PF4/Button"
+ class="pf-v5-c-button pf-m-primary"
+ data-ouia-component-id="OUIA-Generated-Button-primary-5"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
- type="button"
+ type="submit"
>
- Back
+ Next
</button>
<div
- class="pf-c-wizard__footer-cancel"
+ class="pf-v5-c-wizard__footer-cancel"
>
<button
aria-disabled="false"
- class="pf-c-button pf-m-link"
+ class="pf-v5-c-button pf-m-link"
data-ouia-component-id="OUIA-Generated-Button-link-5"
- data-ouia-component-type="PF4/Button"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
type="button"
>
@@ -532,16 +552,16 @@ exports[`ImportJavaClasses component tests Should move to second step 1`] = `
exports[`ImportJavaClasses component tests Should move to second step and fetch a Java Class 1`] = `
<body
- class="pf-c-backdrop__open"
+ class="pf-v5-c-backdrop__open"
>
<div
aria-hidden="true"
>
<button
aria-disabled="false"
- class="pf-c-button pf-m-secondary pf-m-progress"
+ class="pf-v5-c-button pf-m-secondary pf-m-progress"
data-ouia-component-id="OUIA-Generated-Button-secondary-15"
- data-ouia-component-type="PF4/Button"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
data-testid="modal-wizard-button"
type="button"
@@ -551,86 +571,90 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
</div>
<div>
<div
- class="pf-c-backdrop"
+ class="pf-v5-c-backdrop"
>
<div
- class="pf-l-bullseye"
+ class="pf-v5-l-bullseye"
>
<div
aria-describedby="pf-modal-part-7"
aria-labelledby="pf-modal-part-6"
aria-modal="true"
- class="pf-c-modal-box pf-m-lg"
+ class="pf-v5-c-modal-box pf-m-lg"
data-ouia-component-id="OUIA-Generated-Modal-large-6"
- data-ouia-component-type="PF4/ModalContent"
+ data-ouia-component-type="PF5/ModalContent"
data-ouia-safe="true"
id="pf-modal-part-5"
role="dialog"
>
- <button
- aria-disabled="false"
- aria-label="Close"
- class="pf-c-button pf-m-plain"
- data-ouia-component-id="OUIA-Generated-Modal-large-6-ModalBoxCloseButton"
- data-ouia-component-type="PF4/Button"
- data-ouia-safe="true"
- type="button"
+ <div
+ class="pf-v5-c-modal-box__close"
>
- <svg
- aria-hidden="true"
- fill="currentColor"
- height="1em"
- role="img"
- style="vertical-align: -0.125em;"
- viewBox="0 0 352 512"
- width="1em"
+ <button
+ aria-disabled="false"
+ aria-label="Close"
+ class="pf-v5-c-button pf-m-plain"
+ data-ouia-component-id="OUIA-Generated-Modal-large-6-ModalBoxCloseButton"
+ data-ouia-component-type="PF5/Button"
+ data-ouia-safe="true"
+ type="button"
>
- <path
- d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
- />
- </svg>
- </button>
+ <svg
+ aria-hidden="true"
+ class="pf-v5-svg"
+ fill="currentColor"
+ height="1em"
+ role="img"
+ viewBox="0 0 352 512"
+ width="1em"
+ >
+ <path
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+ />
+ </svg>
+ </button>
+ </div>
<header
- class="pf-c-modal-box__header"
+ class="pf-v5-c-modal-box__header"
>
<h1
- class="pf-c-modal-box__title"
+ class="pf-v5-c-modal-box__title"
id="pf-modal-part-6"
>
<span
- class="pf-c-modal-box__title-text"
+ class="pf-v5-c-modal-box__title-text"
>
Import Java classes
</span>
</h1>
<div
- class="pf-c-modal-box__description"
+ class="pf-v5-c-modal-box__description"
id="pf-modal-part-7"
>
It converts your Java assets to DMN types. This is a one-time import action: if the Java class gets updated, you will need to reimport it.
</div>
</header>
<div
- class="pf-c-modal-box__body"
+ class="pf-v5-c-modal-box__body"
>
<div
- class="pf-c-wizard import-java-classes"
+ class="pf-v5-c-wizard import-java-classes"
style="height: 600px;"
>
<button
aria-expanded="false"
aria-label="Wizard Toggle"
- class="pf-c-wizard__toggle"
+ class="pf-v5-c-wizard__toggle"
>
<span
- class="pf-c-wizard__toggle-list"
+ class="pf-v5-c-wizard__toggle-list"
>
<span
- class="pf-c-wizard__toggle-list-item"
+ class="pf-v5-c-wizard__toggle-list-item"
>
<span
- class="pf-c-wizard__toggle-num"
+ class="pf-v5-c-wizard__toggle-num"
>
2
</span>
@@ -639,14 +663,14 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
</span>
</span>
<span
- class="pf-c-wizard__toggle-icon"
+ class="pf-v5-c-wizard__toggle-icon"
>
<svg
aria-hidden="true"
+ class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
- style="vertical-align: -0.125em;"
viewBox="0 0 320 512"
width="1em"
>
@@ -657,55 +681,59 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
</span>
</button>
<div
- class="pf-c-wizard__outer-wrap"
+ class="pf-v5-c-wizard__outer-wrap"
>
<div
- class="pf-c-wizard__inner-wrap"
+ class="pf-v5-c-wizard__inner-wrap"
>
<nav
- class="pf-c-wizard__nav"
+ class="pf-v5-c-wizard__nav"
data-ouia-component-id="OUIA-Generated-WizardNav-6"
- data-ouia-component-type="PF4/WizardNav"
+ data-ouia-component-type="PF5/WizardNav"
data-ouia-safe="true"
>
<ol
- class="pf-c-wizard__nav-list"
+ class="pf-v5-c-wizard__nav-list"
+ role="list"
>
<li
- class="pf-c-wizard__nav-item"
+ class="pf-v5-c-wizard__nav-item"
>
<button
aria-current="false"
- class="pf-c-wizard__nav-link"
+ class="pf-v5-c-wizard__nav-link"
data-ouia-component-id="OUIA-Generated-WizardNavItem-16"
- data-ouia-component-type="PF4/WizardNavItem"
+ data-ouia-component-type="PF5/WizardNavItem"
data-ouia-safe="true"
+ type="button"
>
Select Java classes
</button>
</li>
<li
- class="pf-c-wizard__nav-item"
+ class="pf-v5-c-wizard__nav-item"
>
<button
aria-current="step"
- class="pf-c-wizard__nav-link pf-m-current"
+ class="pf-v5-c-wizard__nav-link pf-m-current"
data-ouia-component-id="OUIA-Generated-WizardNavItem-17"
- data-ouia-component-type="PF4/WizardNavItem"
+ data-ouia-component-type="PF5/WizardNavItem"
data-ouia-safe="true"
+ type="button"
>
Select fields
</button>
</li>
<li
- class="pf-c-wizard__nav-item"
+ class="pf-v5-c-wizard__nav-item"
>
<button
aria-current="false"
- class="pf-c-wizard__nav-link"
+ class="pf-v5-c-wizard__nav-link"
data-ouia-component-id="OUIA-Generated-WizardNavItem-18"
- data-ouia-component-type="PF4/WizardNavItem"
+ data-ouia-component-type="PF5/WizardNavItem"
data-ouia-safe="true"
+ type="button"
>
Review
</button>
@@ -713,53 +741,54 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
</ol>
</nav>
<div
- class="pf-c-wizard__main"
+ class="pf-v5-c-wizard__main"
>
<div
- class="pf-c-wizard__main-body"
+ class="pf-v5-c-wizard__main-body"
>
<table
aria-label="field-table"
- class="pf-c-table pf-m-grid-md"
- data-ouia-component-id="OUIA-Generated-Table-3"
- data-ouia-component-type="PF4/Table"
+ class="pf-v5-c-table pf-m-grid-md"
+ data-ouia-component-id="OUIA-Generated-Table-6"
+ data-ouia-component-type="PF5/Table"
data-ouia-safe="true"
role="grid"
>
<tbody
- class="pf-m-expanded"
+ class="pf-v5-c-table__tbody pf-m-expanded"
role="rowgroup"
>
<tr
- class=""
+ class="pf-v5-c-table__tr"
data-ouia-component-id="OUIA-Generated-TableRow-15"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class="pf-c-table__toggle"
+ class="pf-v5-c-table__td pf-v5-c-table__toggle"
+ tabindex="-1"
>
<button
aria-disabled="false"
aria-expanded="true"
aria-label="Details"
aria-labelledby="simple-node0 expand-toggle0"
- class="pf-c-button pf-m-plain pf-m-expanded"
+ class="pf-v5-c-button pf-m-plain pf-m-expanded"
data-ouia-component-id="OUIA-Generated-Button-plain-15"
- data-ouia-component-type="PF4/Button"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="expand-toggle0"
type="button"
>
<div
- class="pf-c-table__toggle-icon"
+ class="pf-v5-c-table__toggle-icon"
>
<svg
aria-hidden="true"
+ class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
- style="vertical-align: -0.125em;"
viewBox="0 0 320 512"
width="1em"
>
@@ -771,7 +800,8 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
</button>
</td>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<span>
<strong>
@@ -786,19 +816,21 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
</td>
</tr>
<tr
- class="pf-c-table__expandable-row pf-m-expanded"
+ class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
data-ouia-component-id="OUIA-Generated-TableRow-16"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
/>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<div
- class="pf-c-table__expandable-row-content"
+ class="pf-v5-c-table__expandable-row-content"
>
<span>
isAlive
@@ -812,19 +844,21 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
</td>
</tr>
<tr
- class="pf-c-table__expandable-row pf-m-expanded"
+ class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
data-ouia-component-id="OUIA-Generated-TableRow-17"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
/>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<div
- class="pf-c-table__expandable-row-content"
+ class="pf-v5-c-table__expandable-row-content"
>
<span>
name
@@ -839,39 +873,40 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
</tr>
</tbody>
<tbody
- class="pf-m-expanded"
+ class="pf-v5-c-table__tbody pf-m-expanded"
role="rowgroup"
>
<tr
- class=""
+ class="pf-v5-c-table__tr"
data-ouia-component-id="OUIA-Generated-TableRow-18"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class="pf-c-table__toggle"
+ class="pf-v5-c-table__td pf-v5-c-table__toggle"
+ tabindex="-1"
>
<button
aria-disabled="false"
aria-expanded="true"
aria-label="Details"
aria-labelledby="simple-node1 expand-toggle1"
- class="pf-c-button pf-m-plain pf-m-expanded"
+ class="pf-v5-c-button pf-m-plain pf-m-expanded"
data-ouia-component-id="OUIA-Generated-Button-plain-16"
- data-ouia-component-type="PF4/Button"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="expand-toggle1"
type="button"
>
<div
- class="pf-c-table__toggle-icon"
+ class="pf-v5-c-table__toggle-icon"
>
<svg
aria-hidden="true"
+ class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
- style="vertical-align: -0.125em;"
viewBox="0 0 320 512"
width="1em"
>
@@ -883,7 +918,8 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
</button>
</td>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<span>
<strong>
@@ -898,19 +934,21 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
</td>
</tr>
<tr
- class="pf-c-table__expandable-row pf-m-expanded"
+ class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
data-ouia-component-id="OUIA-Generated-TableRow-19"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
/>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<div
- class="pf-c-table__expandable-row-content"
+ class="pf-v5-c-table__expandable-row-content"
>
<span>
test
@@ -924,19 +962,21 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
</td>
</tr>
<tr
- class="pf-c-table__expandable-row pf-m-expanded"
+ class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
data-ouia-component-id="OUIA-Generated-TableRow-20"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
/>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<div
- class="pf-c-table__expandable-row-content"
+ class="pf-v5-c-table__expandable-row-content"
>
<span>
title
@@ -950,19 +990,21 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
</td>
</tr>
<tr
- class="pf-c-table__expandable-row pf-m-expanded"
+ class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
data-ouia-component-id="OUIA-Generated-TableRow-21"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
/>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<div
- class="pf-c-table__expandable-row-content"
+ class="pf-v5-c-table__expandable-row-content"
>
<span>
year
@@ -977,20 +1019,22 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
</tr>
</tbody>
<tbody
- class="pf-m-expanded"
+ class="pf-v5-c-table__tbody pf-m-expanded"
role="rowgroup"
>
<tr
- class=""
+ class="pf-v5-c-table__tr"
data-ouia-component-id="OUIA-Generated-TableRow-22"
- data-ouia-component-type="PF4/TableRow"
+ data-ouia-component-type="PF5/TableRow"
data-ouia-safe="true"
>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
/>
<td
- class=""
+ class="pf-v5-c-table__td"
+ tabindex="-1"
>
<span>
<strong>
@@ -1010,36 +1054,36 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
</div>
</div>
<footer
- class="pf-c-wizard__footer"
+ class="pf-v5-c-wizard__footer"
>
<button
aria-disabled="false"
- class="pf-c-button pf-m-primary"
- data-ouia-component-id="OUIA-Generated-Button-primary-7"
- data-ouia-component-type="PF4/Button"
+ class="pf-v5-c-button pf-m-secondary"
+ data-ouia-component-id="OUIA-Generated-Button-secondary-16"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
- type="submit"
+ type="button"
>
- Next
+ Back
</button>
<button
aria-disabled="false"
- class="pf-c-button pf-m-secondary"
- data-ouia-component-id="OUIA-Generated-Button-secondary-16"
- data-ouia-component-type="PF4/Button"
+ class="pf-v5-c-button pf-m-primary"
+ data-ouia-component-id="OUIA-Generated-Button-primary-7"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
- type="button"
+ type="submit"
>
- Back
+ Next
</button>
<div
- class="pf-c-wizard__footer-cancel"
+ class="pf-v5-c-wizard__footer-cancel"
>
<button
aria-disabled="false"
- class="pf-c-button pf-m-link"
+ class="pf-v5-c-button pf-m-link"
data-ouia-component-id="OUIA-Generated-Button-link-6"
- data-ouia-component-type="PF4/Button"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
type="button"
>
@@ -1059,16 +1103,16 @@ exports[`ImportJavaClasses component tests Should move to second step and fetch
exports[`ImportJavaClasses component tests Should move to third step 1`] = `
<body
- class="pf-c-backdrop__open"
+ class="pf-v5-c-backdrop__open"
>
<div
aria-hidden="true"
>
<button
aria-disabled="false"
- class="pf-c-button pf-m-secondary pf-m-progress"
+ class="pf-v5-c-button pf-m-secondary pf-m-progress"
data-ouia-component-id="OUIA-Generated-Button-secondary-22"
- data-ouia-component-type="PF4/Button"
+ data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
data-testid="modal-wizard-button"
type="button"
@@ -1078,86 +1122,90 @@ exports[`ImportJavaClasses component tests Should move to third step 1`] = `
</div>
<div>
<div
- class="pf-c-backdrop"
+ class="pf-v5-c-backdrop"
>
<div
- class="pf-l-bullseye"
+ class="pf-v5-l-bullseye"
>
<div
aria-describedby="pf-modal-part-9"
aria-labelledby="pf-modal-part-8"
aria-modal="true"
- class="pf-c-modal-box pf-m-lg"
+ class="pf-v5-c-modal-box pf-m-lg"
data-ouia-component-id="OUIA-Generated-Modal-large-8"
- data-ouia-component-type="PF4/ModalContent"
+ data-ouia-component-type="PF5/ModalContent"
data-ouia-safe="true"
id="pf-modal-part-7"
role="dialog"
>
- <button
- aria-disabled="false"
- aria-label="Close"
- class="pf-c-button pf-m-plain"
- data-ouia-component-id="OUIA-Generated-Modal-large-8-ModalBoxCloseButton"
- data-ouia-component-type="PF4/Button"
- data-ouia-safe="true"
- type="button"
+ <div
+ class="pf-v5-c-modal-box__close"
>
- <svg
- aria-hidden="true"
- fill="currentColor"
- height="1em"
- role="img"
- style="vertical-align: -0.125em;"
- viewBox="0 0 352 512"
- width="1em"
+ <button
+ aria-disabled="false"
+ aria-label="Close"
+ class="pf-v5-c-button pf-m-plain"
+ data-ouia-component-id="OUIA-Generated-Modal-large-8-ModalBoxCloseButton"
+ data-ouia-component-type="PF5/Button"
+ data-ouia-safe="true"
+ type="button"
>
- <path
- d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
- />
- </svg>
- </button>
+ <svg
+ aria-hidden="true"
+ class="pf-v5-svg"
+ fill="currentColor"
+ height="1em"
+ role="img"
+ viewBox="0 0 352 512"
+ width="1em"
+ >
+ <path
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+ />
+ </svg>
+ </button>
+ </div>
<header
- class="pf-c-modal-box__header"
+ class="pf-v5-c-modal-box__header"
>
<h1
- class="pf-c-modal-box__title"
+ class="pf-v5-c-modal-box__title"
id="pf-modal-part-8"
>
<span
- class="pf-c-modal-box__title-text"
+ class="pf-v5-c-modal-box__title-text"
>
Import Java classes
</span>
</h1>
<div
- class="pf-c-modal-box__description"
+ class="pf-v5-c-modal-box__description"
id="pf-modal-part-9"
>
It converts your Java assets to DMN types. This is a one-time import action: if the Java class gets updated, you will need to reimport it.
</div>
</header>
<div
- class="pf-c-modal-box__body"
+ class="pf-v5-c-modal-box__body"
>
<div
- class="pf-c-wizard import-java-classes"
+ class="pf-v5-c-wizard import-java-classes"
style="height: 600px;"
>
<button
aria-expanded="false"
aria-label="Wizard Toggle"
- class="pf-c-wizard__toggle"
+ class="pf-v5-c-wizard__toggle"
>
<span
- class="pf-c-wizard__toggle-list"
+ class="pf-v5-c-wizard__toggle-list"
>
<span
- class="pf-c-wizard__toggle-list-item"
+ class="pf-v5-c-wizard__toggle-list-item"
>
<span
- class="pf-c-wizard__toggle-num"
+ class="pf-v5-c-wizard__toggle-num"
>
3
</span>
@@ -1166,14 +1214,14 @@ exports[`ImportJavaClasses component tests Should move to third step 1`] = `
</span>
</span>
<span
- class="pf-c-wizard__toggle-icon"
+ class="pf-v5-c-wizard__toggle-icon"
>
<svg
aria-hidden="true"
+ class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
- style="vertical-align: -0.125em;"
viewBox="0 0 320 512"
width="1em"
>
@@ -1184,55 +1232,59 @@ exports[`ImportJavaClasses component tests Should move to third step 1`] = `
</span>
</button>
<div
- class="pf-c-wizard__outer-wrap"
+ class="pf-v5-c-wizard__outer-wrap"
>
<div
- class="pf-c-wizard__inner-wrap"
+ class="pf-v5-c-wizard__inner-wrap"
>
<nav
- class="pf-c-wizard__nav"
+ class="pf-v5-c-wizard__nav"
data-ouia-component-id="OUIA-Generated-WizardNav-8"
- data-ouia-component-type="PF4/WizardNav"
+ data-ouia-component-type="PF5/WizardNav"
data-ouia-safe="true"
>
<ol
- class="pf-c-wizard__nav-list"
+ class="pf-v5-c-wizard__nav-list"
+ role="list"
>
<li
- class="pf-c-wizard__nav-item"
+ class="pf-v5-c-wizard__nav-item"
>
<button
aria-current="false"
- class="pf-c-wizard__nav-link"
+ class="pf-v5-c-wizard__nav-link"
data-ouia-component-id="OUIA-Generated-WizardNavItem-22"
- data-ouia-component-type="PF4/WizardNavItem"
+ data-ouia-component-type="PF5/WizardNavItem"
data-ouia-safe="true"
+ type="button"
>
Select Java classes
</button>
</li>
<li
- class="pf-c-wizard__nav-item"
+ class="pf-v5-c-wizard__nav-item"
>
<button
aria-current="false"
- class="pf-c-wizard__nav-link"
+ class="pf-v5-c-wizard__nav-link"
data-ouia-component-id="OUIA-Generated-WizardNavItem-23"
- data-ouia-component-type="PF4/WizardNavItem"
+ data-ouia-component-type="PF5/WizardNavItem"
data-ouia-safe="true"
+ type="button"
>
Select fields
</button>
</li>
<li
- class="pf-c-wizard__nav-item"
+ class="pf-v5-c-wizard__nav-item"
>
<button
aria-current="step"
- class="pf-c-wizard__nav-link pf-m-current"
+ class="pf-v5-c-wizard__nav-link pf-m-current"
data-ouia-component-id="OUIA-Generated-WizardNavItem-24"
- data-ouia-component-type="PF4/WizardNavItem"
+ data-ouia-component-type="PF5/WizardNavItem"
data-ouia-safe="true"
+ type="button"
>
Review
</button>
@@ -1240,56 +1292,57 @@ exports[`ImportJavaClasses component tests Should move to third step 1`] = `
</ol>
</nav>
<div
- class="pf-c-wizard__main"
+ class="pf-v5-c-wizard__main"
>
<div
- class="pf-c-wizard__main-body"
+ class="pf-v5-c-wizard__main-body"
>
... 31941 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@kie.apache.org
For additional commands, e-mail: commits-help@kie.apache.org