[Design2-341-3] Pt.3 Replace all DSCO Typography usages with MUI Typography across all dashboard pages #70735
+1,211
−1,143
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…I Typography for consistent styling
…phy for consistent styling
levadadenys
requested review from
a team,
Copilot,
kobryan0619,
lfryemason,
nicklathe and
stephenliang
Contributor
There was a problem hiding this comment.
Pull request overview
This PR continues the Design2-341 migration by replacing remaining usages of the DSCO Typography components (and their wrapper exports like Heading3, BodyTwoText, etc.) with MUI’s @mui/material/Typography across a broad set of dashboard- and teacher-facing pages, to standardize typography rendering and rely on the MUI theme overrides.
Changes:
- Replaced DSCO typography imports/usages with MUI
<Typography>(usingvariant,component, andgutterBottom) across many templates and flows. - Removed the old DSCO Typography Storybook story (presumably in favor of the MUI typography story).
- Updated a variety of UI surfaces (teacher navigation, sections refresh, rubrics, sign-up, curriculum catalog, etc.) to use MUI variants including project-specific custom variants (e.g.,
body3,body4,overline2,strong,em).
Reviewed changes
Copilot reviewed 104 out of 104 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/src/templates/temp/typography/DscoTypography.story.tsx | Removes DSCO typography Storybook story. |
| apps/src/templates/teacherNavigation/lessonMaterials/ResourceRow.tsx | Migrates resource row label typography to MUI. |
| apps/src/templates/teacherNavigation/lessonMaterials/LessonResources.tsx | Migrates lesson resources header and empty states to MUI. |
| apps/src/templates/teacherNavigation/lessonMaterials/LessonMaterialsContainer.tsx | Migrates transcript and summary typography blocks to MUI. |
| apps/src/templates/teacherNavigation/lessonMaterials/CustomLessonResources.tsx | Migrates custom resources table header/empty state to MUI. |
| apps/src/templates/teacherNavigation/TeacherNavigationBar.tsx | Migrates section headers to MUI overline variant. |
| apps/src/templates/teacherNavigation/SidebarOption.tsx | Migrates nav option label typography to MUI. |
| apps/src/templates/teacherNavigation/PageHeader.tsx | Migrates page header/section name typography to MUI. |
| apps/src/templates/teacherNavigation/EmptyState.tsx | Migrates empty state headline/description typography to MUI. |
| apps/src/templates/teacherNavigation/ElementOrEmptyPage.tsx | Migrates empty page heading/description typography to MUI. |
| apps/src/templates/teacherDashboard/ParticipantTypePicker.jsx | Replaces legacy Heading usage with MUI Typography for dialog title. |
| apps/src/templates/teacherDashboard/LoginTypePicker.jsx | Replaces DSCO/legacy heading + subheaders with MUI Typography. |
| apps/src/templates/teacherDashboard/LmsInformationalCard/index.tsx | Migrates card title typography to MUI. |
| apps/src/templates/studioHomepages/TwoColumnActionBlock.jsx | Migrates action block heading/subheading/body/extra text to MUI. |
| apps/src/templates/studioHomepages/JoinSectionArea.jsx | Migrates PL sections heading to MUI. |
| apps/src/templates/studioHomepages/CoteacherInviteNotification.jsx | Migrates notification details typography to MUI (including strong text). |
| apps/src/templates/studioHomepages/BorderedCallToAction.jsx | Migrates bordered CTA heading/description to MUI. |
| apps/src/templates/studioHomepages/ActionBlocksWrapper.jsx | Migrates overline/heading/description to MUI. |
| apps/src/templates/studentSnapshot/studentRubricWidget/StudentRubricWidget.tsx | Migrates loading/error/empty rubric text to MUI. |
| apps/src/templates/studentSnapshot/studentCFUWidget/StudentCFUWidget.tsx | Migrates loading/empty CFU text to MUI. |
| apps/src/templates/studentSnapshot/lessonFeedbackWidget/RecommendedActions.tsx | Migrates directions text to MUI. |
| apps/src/templates/sectionsRefresh/coteacherSettings/RemoveCoteacherDialog.jsx | Migrates dialog title typography to MUI. |
| apps/src/templates/sectionsRefresh/coteacherSettings/PrimaryTeacher.jsx | Migrates labels/name emphasis to MUI strong variant. |
| apps/src/templates/sectionsRefresh/coteacherSettings/CoteacherTable.jsx | Migrates status pills/tooltips/name emphasis to MUI. |
| apps/src/templates/sectionsRefresh/coteacherSettings/CoteacherSettings.jsx | Migrates section label emphasis to MUI. |
| apps/src/templates/sectionsRefresh/coteacherSettings/AddCoteacher.jsx | Migrates figcaption/error/help text to MUI. |
| apps/src/templates/sectionsRefresh/SingleSectionSetUp.jsx | Migrates page section title to MUI. |
| apps/src/templates/sectionsRefresh/SectionsSetUpContainer.jsx | Migrates titles/body text to MUI. |
| apps/src/templates/sectionsRefresh/QuickAssignTableHocPl.jsx | Migrates table title to MUI. |
| apps/src/templates/sectionsRefresh/QuickAssignTableHelpers.jsx | Migrates row header typography to MUI. |
| apps/src/templates/sectionsRefresh/QuickAssignTable.jsx | Migrates table title to MUI. |
| apps/src/templates/sectionsRefresh/CurriculumQuickAssign.jsx | Migrates headings/body text to MUI. |
| apps/src/templates/sectionProgressV2/TeacherActionsBox.jsx | Migrates legend header to MUI strong variant. |
| apps/src/templates/sectionProgressV2/SectionProgressV2.jsx | Migrates column titles to MUI. |
| apps/src/templates/sectionProgressV2/MoreDetailsDialog.jsx | Migrates dialog headings and item labels to MUI. |
| apps/src/templates/sectionProgressV2/LevelTypesBox.jsx | Migrates legend header to MUI strong variant. |
| apps/src/templates/sectionProgressV2/LegendItem.jsx | Migrates item label text to MUI. |
| apps/src/templates/sectionProgressV2/InviteToV2ProgressModal.jsx | Migrates modal heading/body copy to MUI. |
| apps/src/templates/sectionProgressV2/IconKey.jsx | Migrates icon key header typography to MUI. |
| apps/src/templates/sectionProgressV2/AssignmentCompletionStatesBox.jsx | Migrates legend header to MUI strong variant. |
| apps/src/templates/rubrics/StudentScoresAlert.jsx | Migrates alert text to MUI. |
| apps/src/templates/rubrics/RubricSubmitFooter.jsx | Migrates error/timestamp text to MUI. |
| apps/src/templates/rubrics/RubricSettings.jsx | Migrates multiple headings/body/strong emphasis to MUI. |
| apps/src/templates/rubrics/RubricFloatingActionButton.jsx | Migrates count text and emphasis to MUI. |
| apps/src/templates/rubrics/RubricContent.jsx | Migrates headings/metadata/info alert text to MUI. |
| apps/src/templates/rubrics/RubricContainer.jsx | Migrates tab text to MUI. |
| apps/src/templates/rubrics/LearningGoals.jsx | Migrates goal headers/next text/summary entries/AI token to MUI. |
| apps/src/templates/rubrics/LearningGoal.jsx | Migrates summary header/status text/AI token to MUI. |
| apps/src/templates/rubrics/EvidenceLevelsForTeachersV2.jsx | Migrates headings/body/strong emphasis to MUI. |
| apps/src/templates/rubrics/EvidenceLevelsForTeachers.jsx | Migrates headings/descriptions/strong emphasis to MUI. |
| apps/src/templates/rubrics/EvidenceLevelsForStudents.jsx | Migrates headings/descriptions/strong emphasis to MUI. |
| apps/src/templates/rubrics/AssessmentsAnnouncementDialog.jsx | Migrates announcement heading/body to MUI. |
| apps/src/templates/rubrics/AiAssessmentFeedback.jsx | Migrates emphasis/headers/strong label to MUI. |
| apps/src/templates/rubrics/AiAssessmentBox.jsx | Migrates score/evidence labels and “cannot assess” text to MUI. |
| apps/src/templates/rubrics/AiAssessment.jsx | Migrates section title (semantic h6 with body variant) to MUI. |
| apps/src/templates/projects/submitProjectDialog/SubmitProjectDialog.tsx | Migrates dialog heading/body text to MUI. |
| apps/src/templates/projects/frozenProjectInfoDialog/FrozenProjectInfoDialog.tsx | Migrates dialog heading typography to MUI. |
| apps/src/templates/projects/ProjectNameFailureDialog.tsx | Migrates dialog title to MUI. |
| apps/src/templates/policy_compliance/ChildAccountConsent/index.tsx | Migrates headings/body/strong/em emphasis to MUI. |
| apps/src/templates/policy_compliance/AgeGatedStudentsModal/AgeGatedStudentsModal.tsx | Migrates modal header/body typography to MUI. |
| apps/src/templates/policy_compliance/AgeGatedSectionsModal/AgeGatedSectionsTable.tsx | Migrates table cell typography to MUI. |
| apps/src/templates/policy_compliance/AgeGatedSectionsModal/AgeGatedSectionsModal.tsx | Migrates modal header/body typography to MUI. |
| apps/src/templates/manageStudents/Table/UsStateColumn/BulkSetModal/index.tsx | Migrates modal title typography to MUI. |
| apps/src/templates/levelSummary/FreeResponseSummaryDataBox.tsx | Migrates summary labels to MUI. |
| apps/src/templates/levelSummary/FreeResponseStudentResponseRow.tsx | Migrates row columns typography to MUI. |
| apps/src/templates/levelSummary/FreeResponseResponses.jsx | Migrates pinned header typography to MUI. |
| apps/src/templates/levelSummary/FreeResponseAiSummaryBox.tsx | Migrates reasoning/feedback question typography to MUI. |
| apps/src/templates/levelSummary/FreeResponseAiStudentResponseHeader.tsx | Migrates table header typography to MUI. |
| apps/src/templates/levelSummary/AiEvaluationFeedbackModal.tsx | Migrates modal title/strong label to MUI. |
| apps/src/templates/globalEdition/RegionSwitchConfirm/index.tsx | Migrates dialog title typography to MUI. |
| apps/src/templates/curriculumCatalog/noSectionsToAssignDialogs.jsx | Migrates dialog header/body typography to MUI. |
| apps/src/templates/curriculumCatalog/ExpandedCurriculumCatalogCard.jsx | Migrates expanded card typography to MUI. |
| apps/src/templates/curriculumCatalog/CurriculumCatalogFilters.jsx | Migrates “num available” typography to MUI. |
| apps/src/templates/curriculumCatalog/CurriculumCatalogCard.jsx | Migrates card title/description typography to MUI. |
| apps/src/templates/curriculumCatalog/CurriculumCatalog.jsx | Migrates assign success message typography to MUI. |
| apps/src/templates/courseOfferings/noMatchingSearchResultsFound/NoMatchingSearchResultsFound.tsx | Migrates no-results heading/subheading to MUI. |
| apps/src/templates/courseOfferings/filters/CourseOfferingsFilters.tsx | Migrates filter row label typography to MUI. |
| apps/src/templates/courseOfferings/courseCard/courseExpandedCard/CourseOfferingExpandedCard.tsx | Migrates expanded card typography and strong emphasis to MUI. |
| apps/src/templates/courseOfferings/courseCard/CourseOfferingCard.tsx | Migrates card typography and strong emphasis to MUI. |
| apps/src/templates/certificates/SuggestedAssignableCourses.jsx | Migrates heading/description typography to MUI. |
| apps/src/templates/certificates/GraduateToNextLevel.jsx | Migrates title typography to MUI. |
| apps/src/templates/certificates/Congrats.jsx | Migrates multiple headings/body text sections to MUI. |
| apps/src/templates/certificates/CertificateBatch.jsx | Migrates multiple headings to MUI. |
| apps/src/templates/certificates/Certificate.jsx | Migrates multiple headings/body text sections to MUI. |
| apps/src/templates/account/AccountBanner.tsx | Migrates account banner heading/description to MUI. |
| apps/src/sites/studio/pages/sections/new.js | Migrates page heading to MUI. |
| apps/src/simpleSignUp/lti/sync/LtiSectionSyncDialog.tsx | Migrates error code typography to MUI. |
| apps/src/simpleSignUp/lti/registration/LtiDynamicRegistrationPage.tsx | Migrates description typography to MUI. |
| apps/src/simpleSignUp/lti/link/LtiLinkAccountPage/LtiWelcomeBanner/index.tsx | Migrates banner header/description typography to MUI. |
| apps/src/simpleSignUp/lti/iframe/LtiIframePage.tsx | Migrates description typography to MUI. |
| apps/src/signUpFlow/LoginTypeSelection.tsx | Migrates headings/descriptions/errors/help text to MUI. |
| apps/src/signUpFlow/FreeCurriculumDialog.tsx | Migrates modal title/body typography to MUI. |
| apps/src/signUpFlow/FinishTeacherAccount.tsx | Migrates headings/body/help/error text to MUI. |
| apps/src/signUpFlow/FinishStudentAccount.tsx | Migrates headings/body/help/error text to MUI. |
| apps/src/signUpFlow/AccountType.tsx | Migrates “Free curriculum forever” heading to MUI. |
| apps/src/pythonlab/components/ProjectTypePicker.tsx | Migrates dialog heading/warning text to MUI. |
| apps/src/music/views/PackDialog.tsx | Migrates dialog title typography to MUI. |
| apps/src/music/views/MusicProjectBar.tsx | Migrates title/pack info typography to MUI. |
| apps/src/music/views/MusicPlayView.tsx | Migrates project name and subtext typography to MUI. |
| apps/src/music/views/HeaderButtons.tsx | Migrates pack metadata typography to MUI. |
| apps/src/music/views/AdvancedControls.tsx | Migrates section title typography to MUI. |
| apps/src/levelbuilder/rubrics/RubricsContainer.jsx | Migrates page header and body copy to MUI. |
| apps/src/levelbuilder/rubrics/LinkToRubricEditor.tsx | Migrates headings/body/lesson text to MUI. |
| apps/src/levelbuilder/rubrics/EvidenceDescriptions.jsx | Migrates column header typography to MUI. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+50
to
+52
| <Typography isRebranded variant="h3" gutterBottom> | ||
| {title} | ||
| </Typography> |
There was a problem hiding this comment.
isRebranded is a legacy prop from legacySharedComponents/Headings.Heading3 and isn’t a valid MUI <Typography> prop. With @mui/material/Typography this will be forwarded to the DOM and can trigger React unknown-prop warnings. Remove isRebranded and rely on the theme’s h3 variant (or apply any needed styling via sx/className).
Comment on lines
+169
to
+171
| <Typography isRebranded variant="h3" gutterBottom> | ||
| {title} | ||
| </Typography> |
There was a problem hiding this comment.
isRebranded isn’t a supported prop on MUI <Typography>; it will be passed through to the rendered HTML element and can cause React unknown-prop warnings. Please remove it and use the theme’s typography variants (or sx/className) to achieve the rebranded styling.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
[Design2-341-3] Pt.3 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: