Fix problems with FluentProvider styling not working properly for all…

… components
Puzzlepart · Jan 23, 2024 · c73ce75 · c73ce75
1 parent 601420a
commit c73ce75
Show file tree

Hide file tree

Showing 53 changed files with 852 additions and 712 deletions.
diff --git a/...amework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx b/...amework/PortfolioExtensions/src/components/Footer/HelpContent/HelpContentDialog/index.tsx
@@ -21,7 +21,7 @@ import { Content } from './Content'
 import { customLightTheme } from 'pp365-shared-library'
 
 export const HelpContentDialog: FC<Omit<DialogProps, 'children'>> = (props) => {
-  const fluentProviderId = useId('fp-helpDialog')
+  const fluentProviderId = useId('fp-help-dialog')
   const context = useContext(FooterContext)
   const [selectedValue, setSelectedValue] = React.useState<TabValue>(
     context.props.helpContent[0]?.title

diff --git a/SharePointFramework/PortfolioExtensions/src/components/IdeaApprovalDialog/index.tsx b/SharePointFramework/PortfolioExtensions/src/components/IdeaApprovalDialog/index.tsx
@@ -13,7 +13,9 @@ import {
   DialogActions,
   DialogBody,
   DialogContent,
-  DialogTitle
+  DialogTitle,
+  useId,
+  IdPrefixProvider
 } from '@fluentui/react-components'
 import { IIdeaApprovalDialogProps } from './types'
 import { FC, useContext } from 'react'
@@ -23,55 +25,58 @@ import { format } from '@fluentui/react'
 import styles from './IdeaApprovalDialog.module.scss'
 
 export const IdeaApprovalDialog: FC<IIdeaApprovalDialogProps> = (props) => {
+  const fluentProviderId = useId('fp-approval-dialog')
   const context = useContext(IDeaApprovalDialogContext)
   const { state, setState } = useIdeaApprovalDialogState()
 
   return (
     <IDeaApprovalDialogContext.Provider value={context}>
-      <FluentProvider theme={customLightTheme}>
-        <DialogBody className={styles.ideaApprovalDialog}>
-          <DialogTitle>{strings.SetRecommendationTitle}</DialogTitle>
-          <DialogContent className={styles.content}>
-            <UserMessage
-              title={format(strings.SetRecommendationSubtitle, props.ideaTitle)}
-              text={props.dialogMessage}
-              intent='info'
-            />
-            <Field label={strings.ActionLabel}>
-              <Combobox
-                onOptionSelect={(_, data) => setState({ choice: data.optionText })}
-                placeholder={strings.ActionLabelPlaceholder}
-              >
-                <Option value={strings.ApproveChoice}>{strings.ApproveChoice}</Option>
-                <Option value={strings.ConsiderationChoice}>{strings.ConsiderationChoice}</Option>
-                <Option value={strings.RejectChoice}>{strings.RejectChoice}</Option>
-              </Combobox>
-            </Field>
-            <Field label={strings.CommentLabel}>
-              <Textarea
-                rows={3}
-                placeholder={strings.CommentLabelPlaceholder}
-                onChange={(_, { value }) => setState({ comment: value })}
+      <IdPrefixProvider value={fluentProviderId}>
+        <FluentProvider theme={customLightTheme}>
+          <DialogBody className={styles.ideaApprovalDialog}>
+            <DialogTitle>{strings.SetRecommendationTitle}</DialogTitle>
+            <DialogContent className={styles.content}>
+              <UserMessage
+                title={format(strings.SetRecommendationSubtitle, props.ideaTitle)}
+                text={props.dialogMessage}
+                intent='info'
               />
-            </Field>
-          </DialogContent>
-          <DialogActions>
-            <Button title={strings.CancelLabel} onClick={props.close}>
-              {strings.CancelLabel}
-            </Button>
-            <Button
-              appearance='primary'
-              title={strings.SubmitLabel}
-              onClick={() => {
-                props.submit(state.choice, state.comment)
-              }}
-              disabled={state.comment.length > 0 && state.choice.length > 0 ? false : true}
-            >
-              {strings.SubmitLabel}
-            </Button>
-          </DialogActions>
-        </DialogBody>
-      </FluentProvider>
+              <Field label={strings.ActionLabel}>
+                <Combobox
+                  onOptionSelect={(_, data) => setState({ choice: data.optionText })}
+                  placeholder={strings.ActionLabelPlaceholder}
+                >
+                  <Option value={strings.ApproveChoice}>{strings.ApproveChoice}</Option>
+                  <Option value={strings.ConsiderationChoice}>{strings.ConsiderationChoice}</Option>
+                  <Option value={strings.RejectChoice}>{strings.RejectChoice}</Option>
+                </Combobox>
+              </Field>
+              <Field label={strings.CommentLabel}>
+                <Textarea
+                  rows={3}
+                  placeholder={strings.CommentLabelPlaceholder}
+                  onChange={(_, { value }) => setState({ comment: value })}
+                />
+              </Field>
+            </DialogContent>
+            <DialogActions>
+              <Button title={strings.CancelLabel} onClick={props.close}>
+                {strings.CancelLabel}
+              </Button>
+              <Button
+                appearance='primary'
+                title={strings.SubmitLabel}
+                onClick={() => {
+                  props.submit(state.choice, state.comment)
+                }}
+                disabled={state.comment.length > 0 && state.choice.length > 0 ? false : true}
+              >
+                {strings.SubmitLabel}
+              </Button>
+            </DialogActions>
+          </DialogBody>
+        </FluentProvider>
+      </IdPrefixProvider>
     </IDeaApprovalDialogContext.Provider>
   )
 }

diff --git a/SharePointFramework/PortfolioExtensions/src/components/IdeaDialog/index.tsx b/SharePointFramework/PortfolioExtensions/src/components/IdeaDialog/index.tsx
@@ -10,7 +10,9 @@ import {
   DialogBody,
   DialogContent,
   DialogTitle,
-  FluentProvider
+  FluentProvider,
+  IdPrefixProvider,
+  useId
 } from '@fluentui/react-components'
 import { IIdeaDialogProps } from './types'
 import { FC, useContext } from 'react'
@@ -19,46 +21,49 @@ import { customLightTheme } from 'pp365-shared-library'
 import styles from './IdeaDialog.module.scss'
 
 export const IdeaDialog: FC<IIdeaDialogProps> = (props) => {
+  const fluentProviderId = useId('fp-idea-dialog')
   const context = useContext(IDeaDialogContext)
 
   return (
     <IDeaDialogContext.Provider value={context}>
-      <FluentProvider theme={customLightTheme}>
-        <DialogBody className={styles.ideaDialog}>
-          <DialogTitle>{strings.IdeaProjectDataDialogTitle}</DialogTitle>
-          <DialogContent>
-            <UserMessage
-              title={
-                props.isBlocked
-                  ? strings.IdeaProjectDataDialogBlockedTitle
-                  : strings.IdeaProjectDataDialogInfoTitle
-              }
-              text={format(
-                props.isBlocked
-                  ? strings.IdeaProjectDataDialogBlockedMessage
-                  : props.isApproved
-                  ? props.dialogMessage
-                  : strings.IdeaProjectDataDialogNotApprovedMessage,
-                encodeURIComponent(window.location.href)
-              )}
-              intent={props.isBlocked || !props.isApproved ? 'warning' : 'info'}
-            />
-          </DialogContent>
-          <DialogActions>
-            <Button title={strings.CancelLabel} onClick={props.close}>
-              {strings.CancelLabel}
-            </Button>
-            <Button
-              appearance='primary'
-              title={strings.CreateLabel}
-              onClick={props.submit}
-              disabled={props.isBlocked || !props.isApproved}
-            >
-              {strings.CreateLabel}
-            </Button>
-          </DialogActions>
-        </DialogBody>
-      </FluentProvider>
+      <IdPrefixProvider value={fluentProviderId}>
+        <FluentProvider theme={customLightTheme}>
+          <DialogBody className={styles.ideaDialog}>
+            <DialogTitle>{strings.IdeaProjectDataDialogTitle}</DialogTitle>
+            <DialogContent>
+              <UserMessage
+                title={
+                  props.isBlocked
+                    ? strings.IdeaProjectDataDialogBlockedTitle
+                    : strings.IdeaProjectDataDialogInfoTitle
+                }
+                text={format(
+                  props.isBlocked
+                    ? strings.IdeaProjectDataDialogBlockedMessage
+                    : props.isApproved
+                    ? props.dialogMessage
+                    : strings.IdeaProjectDataDialogNotApprovedMessage,
+                  encodeURIComponent(window.location.href)
+                )}
+                intent={props.isBlocked || !props.isApproved ? 'warning' : 'info'}
+              />
+            </DialogContent>
+            <DialogActions>
+              <Button title={strings.CancelLabel} onClick={props.close}>
+                {strings.CancelLabel}
+              </Button>
+              <Button
+                appearance='primary'
+                title={strings.CreateLabel}
+                onClick={props.submit}
+                disabled={props.isBlocked || !props.isApproved}
+              >
+                {strings.CreateLabel}
+              </Button>
+            </DialogActions>
+          </DialogBody>
+        </FluentProvider>
+      </IdPrefixProvider>
     </IDeaDialogContext.Provider>
   )
 }