diff --git a/SharePointFramework/ProjectExtensions/src/riskAction/components/RiskAction/RiskActionFieldValue/RiskActionFieldValue.tsx b/SharePointFramework/ProjectExtensions/src/riskAction/components/RiskAction/RiskActionFieldValue/RiskActionFieldValue.tsx
index 899c5f4a1..523c2e233 100644
--- a/SharePointFramework/ProjectExtensions/src/riskAction/components/RiskAction/RiskActionFieldValue/RiskActionFieldValue.tsx
+++ b/SharePointFramework/ProjectExtensions/src/riskAction/components/RiskAction/RiskActionFieldValue/RiskActionFieldValue.tsx
@@ -14,13 +14,17 @@ import { useRiskActionFieldValue } from './useRiskActionFieldValue'
*/
export const RiskActionFieldValue: FC = () => {
const context = useRiskActionFieldCustomizerContext()
- const { isFieldValueSet, isHiddenFieldValueSet, tasks, horizontalLayout, gap } = useRiskActionFieldValue()
+ const { isFieldValueSet, isHiddenFieldValueSet, tasks, horizontalLayout, gap } =
+ useRiskActionFieldValue()
let element: ReactElement = null
if (isHiddenFieldValueSet) {
element = (
-
+
{tasks.map((task, index) => (
-
+
))}
)
diff --git a/SharePointFramework/ProjectExtensions/src/riskAction/components/RiskAction/RiskActionFieldValue/useRiskActionFieldValue.ts b/SharePointFramework/ProjectExtensions/src/riskAction/components/RiskAction/RiskActionFieldValue/useRiskActionFieldValue.ts
index 5aefafb7a..33c7a110d 100644
--- a/SharePointFramework/ProjectExtensions/src/riskAction/components/RiskAction/RiskActionFieldValue/useRiskActionFieldValue.ts
+++ b/SharePointFramework/ProjectExtensions/src/riskAction/components/RiskAction/RiskActionFieldValue/useRiskActionFieldValue.ts
@@ -11,7 +11,8 @@ export function useRiskActionFieldValue() {
const hiddenFieldValue = itemContext.hiddenFieldValue
const isFieldValueSet = !stringIsNullOrEmpty(itemContext.fieldValue)
const isHiddenFieldValueSet = !stringIsNullOrEmpty(hiddenFieldValue?.data)
- const horizontalLayout = dataAdapter.globalSettings.get('RiskActionPlannerHorizontalLayout') === '1'
+ const horizontalLayout =
+ dataAdapter.globalSettings.get('RiskActionPlannerHorizontalLayout') === '1'
const gap = dataAdapter.globalSettings.get('RiskActionPlannerGap') ?? '0px'
return {
isFieldValueSet,
diff --git a/SharePointFramework/ProjectExtensions/src/riskAction/components/RiskAction/RiskActionPopover/MigrateRiskActionsDialog/MigrateRiskActionsDialog.tsx b/SharePointFramework/ProjectExtensions/src/riskAction/components/RiskAction/RiskActionPopover/MigrateRiskActionsDialog/MigrateRiskActionsDialog.tsx
index 1f482d2a9..317d0d117 100644
--- a/SharePointFramework/ProjectExtensions/src/riskAction/components/RiskAction/RiskActionPopover/MigrateRiskActionsDialog/MigrateRiskActionsDialog.tsx
+++ b/SharePointFramework/ProjectExtensions/src/riskAction/components/RiskAction/RiskActionPopover/MigrateRiskActionsDialog/MigrateRiskActionsDialog.tsx
@@ -23,7 +23,7 @@ import { getFluentIcon } from 'pp365-shared-library'
* Migrate risk actions dialog. This dialog is used to migrate risk actions to planner tasks.
*/
export const MigrateRiskActionsDialog: FC = (props) => {
- const { tasks, itemContext, onMigrate, open, setOpen, isMigrating, separator,setSeparator } =
+ const { tasks, itemContext, onMigrate, open, setOpen, isMigrating, separator, setSeparator } =
useMigrateRiskActionsDialog()
return (
+
)
}
EditPropertiesPanelFooter.defaultProps = {
spinner: {
- labelPosition: 'right',
- size: SpinnerSize.medium
+ labelPosition: 'after',
+ size: 'medium'
}
}
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/EditPropertiesPanel/EditPropertiesPanelFooter/types.ts b/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/EditPropertiesPanel/EditPropertiesPanelFooter/types.ts
index 9d60dafee..e16398e22 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/EditPropertiesPanel/EditPropertiesPanelFooter/types.ts
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/EditPropertiesPanel/EditPropertiesPanelFooter/types.ts
@@ -1,6 +1,6 @@
-import { ISpinnerProps } from '@fluentui/react'
import { UseModelReturnType } from '../useModel'
import { UseSubmitReturnType } from '../useSubmit'
+import { SpinnerProps } from '@fluentui/react-components'
export interface IEditPropertiesPanelFooterProps {
/**
@@ -16,5 +16,5 @@ export interface IEditPropertiesPanelFooterProps {
/**
* Spinner props.
*/
- spinner?: ISpinnerProps
+ spinner?: SpinnerProps
}
diff --git a/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/EditPropertiesPanel/useFieldElements.tsx b/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/EditPropertiesPanel/useFieldElements.tsx
index b513b9d1d..5de1fbae3 100644
--- a/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/EditPropertiesPanel/useFieldElements.tsx
+++ b/SharePointFramework/ProjectWebParts/src/components/ProjectInformation/EditPropertiesPanel/useFieldElements.tsx
@@ -1,20 +1,13 @@
-import {
- DatePicker,
- DayOfWeek,
- Dropdown,
- IPersonaProps,
- ITag,
- Label,
- NormalPeoplePicker,
- TagPicker,
- TextField,
- Toggle
-} from '@fluentui/react'
+import { IPersonaProps, ITag, NormalPeoplePicker, TagPicker } from '@fluentui/react'
+import { Combobox, Input, Option, Switch, Textarea } from '@fluentui/react-components'
+import { DatePicker, DayOfWeek } from '@fluentui/react-datepicker-compat'
import strings from 'ProjectWebPartsStrings'
-import { FieldDescription } from 'pp365-shared-library/lib/components'
+import _ from 'lodash'
+import { FieldContainer } from 'pp365-shared-library'
import { ProjectInformationField } from 'pp365-shared-library/lib/models'
import React from 'react'
import SPDataAdapter from '../../../data'
+import styles from './EditPropertiesPanel.module.scss'
import { UseModelReturnType } from './useModel'
/**
@@ -38,14 +31,16 @@ import { UseModelReturnType } from './useModel'
export function useFieldElements(model: UseModelReturnType) {
const fieldElements: Record JSX.Element> = {
Boolean: (field) => (
- <>
-
+ (field)}
- onChange={(_, checked) => model.set(field, checked)}
+ onChange={(_, data) => model.set(field, data.checked)}
/>
-
- >
+
),
URL: (field) => {
const value = model.get<{
@@ -53,89 +48,114 @@ export function useFieldElements(model: UseModelReturnType) {
description: string
}>(field, { url: '', description: '' })
return (
- <>
-
-
+ model.set(field, { url, description: value.description })}
+ onChange={(_, data) =>
+ model.set(field, { url: data.value, description: value.description })
+ }
+ placeholder={strings.Placeholder.UrlField}
/>
- model.set(field, { url: value.url, description })}
- styles={{ root: { marginTop: 6 } }}
+ onChange={(_, data) => model.set(field, { url: value.url, description: data.value })}
+ placeholder={strings.Placeholder.UrlFieldAlternative}
+ style={{ marginTop: 6 }}
/>
-
- >
+
)
},
Text: (field) => (
- (field)}
- onChange={(_, value) => model.set(field, value)}
- />
+ >
+ (field)}
+ onChange={(_, data) => model.set(field, data.value)}
+ placeholder={strings.Placeholder.TextField}
+ />
+
),
Note: (field) => (
- (field)}
- onChange={(_, value) => model.set(field, value)}
- />
+ >
+