Visuelt løft på redigeringspanel for prosjektinformasjon (#1272) [ski…

…p-ci]

Co-authored-by: Ole Martin Pettersen <[email protected]>

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 = (
-      <div className={styles.linkList} style={{ flexDirection: horizontalLayout ? 'row' : 'column', gap }}>
+      <div
+        className={styles.linkList}
+        style={{ flexDirection: horizontalLayout ? 'row' : 'column', gap }}
+      >
         {tasks.map((task, index) => (
-            <PlannerTaskLink key={index} task={task} />
+          <PlannerTaskLink key={index} task={task} />
         ))}
       </div>
     )

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,

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 (
     <Dialog open={open} onOpenChange={(_, { open }) => setOpen(open)}>

SharePointFramework/ProjectExtensions/src/riskAction/dataAdapter.ts

@@ -210,7 +210,7 @@ export class DataAdapter extends SPDataAdapterBase {
     const updatedItemContext = itemContext.update(tasks)
     await listItem.update({
       GtRiskAction: updatedItemContext.fieldValue,
-      [this.hiddenDataFieldName]: updatedItemContext.hiddenFieldValue.data,
+      [this.hiddenDataFieldName]: updatedItemContext.hiddenFieldValue.data
     })
     return updatedItemContext
   }

SharePointFramework/ProjectExtensions/src/riskAction/types.ts

@@ -44,9 +44,9 @@ export class RiskActionItemContext {
 
   /**
    * Updates the current RiskActionItemContext with the provided tasks.
-   * 
+   *
    * @param tasks An array of RiskActionPlannerTaskReference objects to update the context with.
-   * 
+   *
    * @returns The updated RiskActionItemContext object.
    */
   public update(tasks: RiskActionPlannerTaskReference[]): RiskActionItemContext {
@@ -61,11 +61,11 @@ export class RiskActionItemContext {
 
   /**
    * Creates a new instance of the RiskActionItemContext class.
-   * 
+   *
    * @param event - The field customizer cell event parameters.
    * @param pageContext - The SharePoint page context.
    * @param hiddenFieldValues - The hidden field values.
-   * 
+   *
    * @returns A new instance of the RiskActionItemContext class.
    */
   public static create(

SharePointFramework/ProjectWebParts/package.json

@@ -62,7 +62,8 @@
     "@fluentui/react-icons": "2.0.215",
     "@fluentui/react-search-preview": "0.1.16",
     "@fluentui/react-tags-preview": "0.2.9",
-    "usehooks-ts": "~2.9.1"
+    "usehooks-ts": "~2.9.1",
+    "@fluentui/react-datepicker-compat": "~0.3.15"
   },
   "devDependencies": {
     "@microsoft/eslint-config-spfx": "1.17.4",

SharePointFramework/ProjectWebParts/src/components/ProjectInformation/BasePanel/BasePanel.module.scss

@@ -0,0 +1,6 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px 24px;
+}

SharePointFramework/ProjectWebParts/src/components/ProjectInformation/BasePanel/ClosePanelButton.tsx

@@ -1,21 +1,20 @@
-import { DefaultButton } from '@fluentui/react'
 import strings from 'ProjectWebPartsStrings'
 import React, { FC } from 'react'
 import { useProjectInformationContext } from '../context'
 import { CLOSE_PANEL } from '../reducer'
-import { IClosePanelButtonProps } from './types'
+import { Button, ButtonProps } from '@fluentui/react-components'
 
-export const ClosePanelButton: FC<IClosePanelButtonProps> = (props) => {
+export const ClosePanelButton: FC<ButtonProps> = (props) => {
   const context = useProjectInformationContext()
   return (
-    <DefaultButton
+    <Button
       {...props}
-      text={strings.CancelText}
-      styles={{ root: { marginLeft: props.noMargin ? 0 : 8 } }}
       onClick={(e) => {
         props.onClick && props.onClick(e)
         context.dispatch(CLOSE_PANEL())
       }}
-    />
+    >
+      {strings.CancelText}
+    </Button>
   )
 }

SharePointFramework/ProjectWebParts/src/components/ProjectInformation/BasePanel/index.tsx

@@ -4,10 +4,10 @@ import React, { FC } from 'react'
 import { useProjectInformationContext } from '../context'
 import { CLOSE_PANEL } from '../reducer'
 import { IBasePanelProps } from './types'
-import { FluentProvider, useId, webLightTheme } from '@fluentui/react-components'
+import { FluentProvider, webLightTheme } from '@fluentui/react-components'
+import styles from './BasePanel.module.scss'
 
 export const BasePanel: FC<IBasePanelProps> = (props) => {
-  const fluentProviderId = useId('fluent-provider')
   const context = useProjectInformationContext()
 
   return (
@@ -17,11 +17,7 @@ export const BasePanel: FC<IBasePanelProps> = (props) => {
       onRenderBody={() => {
         if (!props.onRenderBody) return null
         return (
-          <FluentProvider
-            id={fluentProviderId}
-            theme={webLightTheme}
-            style={{ padding: '20px 24px', boxSizing: 'border-box' }}
-          >
+          <FluentProvider theme={webLightTheme} className={styles.root}>
             {props.onRenderBody()}
           </FluentProvider>
         )

SharePointFramework/ProjectWebParts/src/components/ProjectInformation/BasePanel/types.ts

@@ -1,4 +1,4 @@
-import { IButtonProps, IPanelProps } from '@fluentui/react'
+import { IPanelProps } from '@fluentui/react'
 import { ProjectInformationPanelType } from '../types'
 
 export interface IBasePanelProps extends IPanelProps {
@@ -8,7 +8,3 @@ export interface IBasePanelProps extends IPanelProps {
    */
   $type?: ProjectInformationPanelType
 }
-
-export interface IClosePanelButtonProps extends IButtonProps {
-  noMargin?: boolean
-}

SharePointFramework/ProjectWebParts/src/components/ProjectInformation/EditPropertiesPanel/EditPropertiesPanel.module.scss

@@ -1,3 +1,46 @@
 .root {
   margin: 0;
+
+  .field {
+    min-height: 32px;
+    border-radius: var(--borderRadiusMedium);
+    position: relative;
+    box-sizing: border-box;
+    padding: 0 var(--pacingHorizontalMNudge);
+    background-color: var(--colorNeutralBackground1);
+    border: 1px solid var(--colorNeutralStroke1);
+    border-bottom-color: var(--colorNeutralStrokeAccessible);
+
+    &::after {
+      box-sizing: border-box;
+      content: '';
+      position: absolute;
+      left: -1px;
+      bottom: -1px;
+      right: -1px;
+      border-bottom-left-radius: var(--borderRadiusMedium);
+      border-bottom-right-radius: var(--borderRadiusMedium);
+      border-bottom: 2px solid var(--colorCompoundBrandStroke);
+      clip-path: inset(calc(100% - 2px) 0px 0px);
+      transform: scaleX(0);
+      transition-property: transform;
+      transition-duration: var(--durationUltraFast);
+      transition-delay: var(--curveAccelerateMid);
+    }
+
+    &:focus-within::after {
+      transform: scaleX(1);
+      transition-property: transform;
+      transition-duration: var(--durationNormal);
+      transition-delay: var(curveDecelerateMid);
+    }
+
+    &:focus-within:active::after {
+      border-bottom-color: (--colorCompoundBrandStrokePressed);
+    }
+
+    &:focus-within {
+      outline: 2px solid transparent;
+    }
+  }
 }

SharePointFramework/ProjectWebParts/src/components/ProjectInformation/EditPropertiesPanel/EditPropertiesPanelFooter/EditPropertiesPanelFooter.module.scss

@@ -1,9 +1,11 @@
 .root {
   margin: 0;
+  padding: 12px 0;
 
   .container {
     display: flex;
     flex-direction: row;
+    gap: 12px;
   }
 
   .saveStatusSpinner {

SharePointFramework/ProjectWebParts/src/components/ProjectInformation/EditPropertiesPanel/EditPropertiesPanelFooter/index.tsx

@@ -1,10 +1,10 @@
-import { PrimaryButton, Spinner, SpinnerSize } from '@fluentui/react'
 import strings from 'ProjectWebPartsStrings'
 import React, { FC } from 'react'
 import { ClosePanelButton } from '../../BasePanel'
 import { IEditPropertiesPanelFooterProps } from './types'
 import styles from './EditPropertiesPanelFooter.module.scss'
 import { UserMessage } from 'pp365-shared-library/lib/components'
+import { Button, FluentProvider, Spinner, useId, webLightTheme } from '@fluentui/react-components'
 
 /**
  * Renders the footer for the `EditPropertiesPanel` with a `<PrimaryButton />` for saving the changes,
@@ -14,20 +14,24 @@ import { UserMessage } from 'pp365-shared-library/lib/components'
  * @param props The component props.
  */
 export const EditPropertiesPanelFooter: FC<IEditPropertiesPanelFooterProps> = (props) => {
+  const fluentProviderId = useId('fluent-provider')
   const isSaving = !!props.submit.saveStatus
+
   return (
-    <div className={styles.root}>
+    <FluentProvider id={fluentProviderId} theme={webLightTheme} className={styles.root}>
       {props.submit.error && (
         <div className={styles.errorContainer}>
           <UserMessage text={props.submit.error.customMessage} intent='error' />
         </div>
       )}
       <div className={styles.container}>
-        <PrimaryButton
-          text={strings.SaveText}
+        <Button
+          appearance='primary'
           onClick={props.submit.onSave}
           disabled={!props.model.isChanged || isSaving || !!props.submit.error}
-        />
+        >
+          {strings.SaveText}
+        </Button>
         <ClosePanelButton
           onClick={() => {
             props.model.reset()
@@ -40,13 +44,13 @@ export const EditPropertiesPanelFooter: FC<IEditPropertiesPanelFooterProps> = (p
           </div>
         )}
       </div>
-    </div>
+    </FluentProvider>
   )
 }
 
 EditPropertiesPanelFooter.defaultProps = {
   spinner: {
-    labelPosition: 'right',
-    size: SpinnerSize.medium
+    labelPosition: 'after',
+    size: 'medium'
   }
 }

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
 }