[Design2-341-1] Pt.1 Replace all DSCO Typography usages with MUI Typography across all dashboard pages #70733
Conversation
…with MUI Typography for consistent styling
…with MUI Typography for consistent styling
… Typography for consistent styling
… MUI Typography for consistent styling
…s with MUI Typography for consistent styling
… with MUI Typography for consistent styling
…Typography for consistent styling
levadadenys
requested review from
a team,
Copilot,
kobryan0619,
lfryemason and
stephenliang
and removed request for
Copilot and
lfryemason
There was a problem hiding this comment.
Pull request overview
This PR is part 1 of migrating dashboard pages away from DSCO typography components to MUI’s Typography, aiming to standardize typography rendering (notably font-smoothing) across the app.
Changes:
- Replaced DSCO typography components (
Heading*,Body*Text,StrongText,EmText,Overline*Text) with MUITypographyvariants across multiple dashboard/UI surfaces. - Added
gutterBottomin many places to preserve DSCO-like vertical spacing using the project’s customized MUI typography overrides. - Updated related Storybook stories to render MUI
Typographyvariants directly.
Reviewed changes
Copilot reviewed 43 out of 43 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/src/sharedComponents/footer/CopyrightDialog/index.tsx | Swap DSCO heading/body text to MUI Typography variants. |
| apps/src/sharedComponents/card/CardHeader/index.tsx | Replace DSCO Typography usage with MUI Typography for card titles. |
| apps/src/sharedComponents/UploadsDisabledModal.tsx | Use MUI Typography for modal copy text. |
| apps/src/sharedComponents/InfoHelpTip.jsx | Replace DSCO body text with MUI Typography in tooltip content. |
| apps/src/sharedComponents/FlaggedImageModal.tsx | Convert DSCO body text to MUI Typography in modal and list items. |
| apps/src/legacySharedComponents/Headings.story.jsx | Update headings Storybook story to use MUI Typography. |
| apps/src/aichat/views/teacherFeedback/ProfanityFeedbackFooter.tsx | Replace EmText with MUI Typography using custom em variant. |
| apps/src/aichat/views/presentation/PresentationView.tsx | Convert header typography to MUI Typography. |
| apps/src/aichat/views/presentation/ModelCardRow.tsx | Replace DSCO heading/body text with MUI Typography in collapsible row. |
| apps/src/aichat/views/modelCustomization/MultiInputCustomization.tsx | Convert strong text usage to MUI Typography with strong variant. |
| apps/src/aichat/views/modelCustomization/ModelDescriptionPanel.tsx | Replace DSCO strong/body text with MUI Typography. |
| apps/src/aichat/views/modelCustomization/FieldLabel.tsx | Replace DSCO nested body/strong typography with MUI Typography. |
| apps/src/aichat/views/modelCustomization/CompareModelsDialog.tsx | Convert dialog header to MUI Typography. |
| apps/src/aichat/views/assets/FilePreview.tsx | Replace StrongText with MUI Typography (strong variant). |
| apps/src/aichat/views/accessControls/AiChatAccessControls.tsx | Convert headers and row labels to MUI Typography. |
| apps/src/aichat/views/TeacherOnboardingModal.tsx | Replace DSCO typography wrappers with MUI Typography in onboarding modal. |
| apps/src/aichat/views/ChatDisabled.tsx | Replace DSCO body text with MUI Typography. |
| apps/src/aiTutor/views/legacyLabs/AiTutorContainer.tsx | Convert DSCO body text header to MUI Typography. |
| apps/src/aiDifferentiation/welcome/AiDiffWelcome.tsx | Replace DSCO typography across welcome flow with MUI Typography. |
| apps/src/aiDifferentiation/personalization/components/personalizationResults/PersonalizationResultsInfoBox.tsx | Convert DSCO body text to MUI Typography for info box. |
| apps/src/aiDifferentiation/personalization/components/personalizationResults/PersonalizationResultsHeader.tsx | Convert overline/header/body DSCO typography to MUI Typography. |
| apps/src/aiDifferentiation/personalization/components/personalizationResults/PersonalizationResultsColumnSuperpowers.tsx | Replace DSCO heading with MUI Typography. |
| apps/src/aiDifferentiation/personalization/components/personalizationResults/PersonalizationResultsColumnArrows.tsx | Replace DSCO heading with MUI Typography. |
| apps/src/aiDifferentiation/personalization/components/personalizationResults/PersonalizationResultsColumnAiSupport.tsx | Replace DSCO heading with MUI Typography. |
| apps/src/aiDifferentiation/personalization/components/personalizationQuestion/PersonalizationQuestion.tsx | Convert question/subhead typography to MUI Typography. |
| apps/src/aiDifferentiation/personalization/components/personalizationInterstitial/PersonalizationInterstitial.tsx | Replace DSCO heading with MUI Typography. |
| apps/src/aiDifferentiation/personalization/components/PersonalizationProgressBar.tsx | Convert DSCO progress text to MUI Typography. |
| apps/src/aiDifferentiation/personalization/components/PersonalizationInformationBox.tsx | Replace DSCO body text with MUI Typography. |
| apps/src/aiDifferentiation/personalization/components/PersonalizationAnswers.tsx | Replace DSCO strong/body text with MUI Typography. |
| apps/src/aiDifferentiation/notifications/Notification.tsx | Convert DSCO body/strong typography to MUI Typography. |
| apps/src/aiDifferentiation/notifications/EmptyNotificationList.tsx | Replace DSCO body text with MUI Typography. |
| apps/src/aiDifferentiation/AiDiffSidebar.tsx | Replace DSCO overline with MUI Typography (overline3 variant). |
| apps/src/aiDifferentiation/AiDiffChatHeader.tsx | Convert DSCO body/strong typography to MUI Typography. |
| apps/src/aiComponentLibrary/warningModal/ChatWarningModal.tsx | Convert DSCO heading/body/strong patterns to MUI Typography. |
| apps/src/aiComponentLibrary/aiTutorVersionFileChip/AiTutorVersionFileChip.tsx | Replace DSCO body text with MUI Typography. |
| apps/src/aiComponentLibrary/aiTutorVersionActionNotification/AiTutorVersionActionNotification.tsx | Replace DSCO body text with MUI Typography for commit description section. |
| apps/src/accounts/TurnOffAiDiff.tsx | Replace DSCO typography with MUI Typography in account settings panel. |
| apps/src/accounts/SyncOmniAuthSectionControl.jsx | Replace legacy Heading1 usage with MUI Typography. |
| apps/src/accounts/SchoolInformation/index.tsx | Replace DSCO Heading2 with MUI Typography with preserved semantics. |
| apps/src/accounts/ChangeEmail/ChangeEmailModal.jsx | Replace DSCO Heading3 with MUI Typography. |
| apps/src/accounts/ChangeEmail/ChangeEmailForm.tsx | Replace DSCO Typography with MUI Typography (body3). |
| apps/src/accounts/AccountUnlinkWarningModal/index.tsx | Replace DSCO Typography instances with MUI Typography. |
| apps/src/accounts/AccountInformation/index.tsx | Replace DSCO Heading2 with MUI Typography with preserved semantics. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Typography variant="body2" gutterBottom> | ||
| <SafeMarkdown | ||
| markdown={aichatI18n.teacherOnboardingModal_aiChatBullet()} | ||
| /> | ||
| </BodyTwoText> | ||
| </Typography> |
There was a problem hiding this comment.
Typography variant="body2" renders a <p> by default, but SafeMarkdown typically returns a <div> wrapper. This results in invalid HTML (<p><div>…</div></p>). Consider setting component="div" on this Typography (or remove the Typography wrapper and style the SafeMarkdown container) to keep the DOM valid.
| <Typography variant="body2" gutterBottom> | ||
| <SafeMarkdown | ||
| markdown={aichatI18n.teacherOnboardingModal_userViewBullet()} | ||
| /> | ||
| </BodyTwoText> | ||
| </Typography> |
There was a problem hiding this comment.
Typography variant="body2" renders a <p> by default, but SafeMarkdown typically returns a <div> wrapper. This results in invalid HTML (<p><div>…</div></p>). Consider setting component="div" on this Typography (or remove the Typography wrapper and style the SafeMarkdown container) to keep the DOM valid.
| <Typography variant="body2" gutterBottom> | ||
| <SafeMarkdown | ||
| unwrapped | ||
| markdown={i18n.aiTeachingAssistantSettingsDescription()} | ||
| /> | ||
| </BodyTwoText> | ||
| </Typography> |
There was a problem hiding this comment.
Typography variant="body2" renders a <p> by default. Since SafeMarkdown with unwrapped can still produce block-level elements (e.g., <p>, <ul>), wrapping it in a paragraph risks invalid nesting and unexpected spacing. Use component="div" for the wrapper Typography (or render SafeMarkdown without a Typography parent) to ensure valid markup for any markdown output.
| <Typography variant="body4" gutterBottom> | ||
| <div> | ||
| <strong>What changed:</strong> | ||
| </div> | ||
| <div>{commitDescription}</div> |
There was a problem hiding this comment.
Typography variant="body4" renders a <p> by default, but it contains <div> children. This is invalid HTML (<div> inside <p>) and may affect layout/styling. Switch this Typography to component="div" (or replace the inner <div>s with inline elements) so the DOM structure is valid.
| <Typography variant="body2" gutterBottom> | ||
| <SafeMarkdown | ||
| markdown={aichatI18n.teacherOnboardingModal_instructionsBullet()} | ||
| /> | ||
| </BodyTwoText> | ||
| </Typography> |
There was a problem hiding this comment.
Typography variant="body2" renders a <p> by default, but SafeMarkdown typically returns a <div> wrapper. This results in invalid HTML (<p><div>…</div></p>). Consider setting component="div" on this Typography (or remove the Typography wrapper and style the SafeMarkdown container) to keep the DOM valid.
| <Typography variant="body2" gutterBottom> | ||
| <SafeMarkdown | ||
| markdown={aichatI18n.teacherOnboardingModal_modelCustomizationBullet()} | ||
| /> | ||
| </BodyTwoText> | ||
| </Typography> |
There was a problem hiding this comment.
Typography variant="body2" renders a <p> by default, but SafeMarkdown typically returns a <div> wrapper. This results in invalid HTML (<p><div>…</div></p>). Consider setting component="div" on this Typography (or remove the Typography wrapper and style the SafeMarkdown container) to keep the DOM valid.
| <label htmlFor={id}> | ||
| <BodyThreeText className={styles.fieldLabel}> | ||
| <StrongText>{label}</StrongText> | ||
| </BodyThreeText> | ||
| <Typography className={styles.fieldLabel} variant="body3" gutterBottom> | ||
| <Typography variant="strong">{label}</Typography> | ||
| </Typography> |
There was a problem hiding this comment.
This Typography is rendered inside a <label>, but variant="body3" maps to a <p> by default. A <label> should only contain phrasing content, and a <p> is not valid there. Set component="span" (and if you need block layout, use display="block"/CSS) to keep the label markup valid.
| <Typography className={style.optionTitle} variant="body2" gutterBottom> | ||
| <Typography variant="strong">{title}</Typography> | ||
| </Typography> |
There was a problem hiding this comment.
These Typography components are rendered inside a native <button>, but variant="body2" maps to a <p> by default, which is not valid button content (buttons should contain phrasing content). Use component="span" (and apply block display via CSS if needed) for typography within buttons.
| <Typography | ||
| className={style.optionDescription} | ||
| variant="body3" | ||
| gutterBottom |
There was a problem hiding this comment.
This description Typography is also inside a native <button>, and variant="body3" maps to a <p> by default. To avoid invalid button markup and inconsistent browser styling, render it as component="span" (and use CSS for layout/spacing rather than relying on <p> semantics).
| gutterBottom | |
| gutterBottom | |
| component="span" |
| className={moduleStyles.expandedContent} | ||
| variant="body3" | ||
| gutterBottom | ||
| > | ||
| <div>{expandedContentToDisplay}</div> |
There was a problem hiding this comment.
Typography with variant="body3" will render a <p> by default, but it currently contains a <div> child (<div>{expandedContentToDisplay}</div>). This produces invalid HTML (a <div> inside a <p>) and can cause layout/accessibility quirks. Use component="div" on the wrapper Typography (or remove the inner <div> and render the content directly) so block content like <ul>/<div> is valid.
lfryemason
left a comment
lfryemason
left a comment
There was a problem hiding this comment.
LGTM, it would be great if you can be on deck to look at the eyes diffs when this merges
2 participants
[Design2-341-1] Pt.1 Replace all DSCO Typography usages with MUI Typography across all dashboard pages
This probably will produce eyes diffs (that's why this ticket is divided into several PRs), however the only expected diffs are caused by mui Typography font-smoothing. Spacing and sizing diffs are not expected and needed to be reviewed.
In case of any emergencies feel free to revert.
Links
Testing story
Deployment strategy
Follow-up work
Privacy
Security
Caching
PR Creation Checklist: