[Design2-341-2] Pt.2 Replace all DSCO Typography usages with MUI Typography across all dashboard pages #70734
+622
−440
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
…th MUI Typography 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 typography migration by replacing usages of the DSCO/component-library Typography components with MUI’s Typography across multiple Lab2, Codebridge, and Code Studio (PD/professional learning) dashboard surfaces, aiming to keep spacing/sizing consistent while standardizing on the MUI theme.
Changes:
- Replaced
@code-dot-org/component-library/typography(and its wrapper components likeBodyTwoText,Heading3,StrongText, etc.) with@mui/material’sTypography. - Updated typography props from DSCO patterns (
semanticTag,visualAppearance,noMargin) to MUI patterns (component,variant,gutterBottom) using the Code.org MUI theme’s custom variants. - Removed legacy heading imports in several older/legacy Code Studio components in favor of MUI typography.
Reviewed changes
Copilot reviewed 61 out of 61 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| apps/src/lab2/views/dialogs/finishDialogs/HoaiCongrats.tsx | Replace DSCO Typography with MUI Typography for share heading. |
| apps/src/lab2/views/dialogs/ShareDialog.tsx | Replace DSCO headings with MUI Typography variants in the new Lab2 share dialog. |
| apps/src/lab2/views/dialogs/PendingDialog.tsx | Replace BodyTwoText with MUI Typography for pending dialog message text. |
| apps/src/lab2/views/dialogs/GenericPrompt.tsx | Replace BodyTwoText with MUI Typography for prompt message text. |
| apps/src/lab2/views/dialogs/GenericDropdown.tsx | Replace BodyTwoText with MUI Typography for dropdown dialog message text. |
| apps/src/lab2/views/components/starterAssetsDialog/FileIcon.tsx | Replace BodyThreeText with MUI Typography for file metadata display. |
| apps/src/lab2/views/components/rubrics/StudentRubricView.tsx | Replace multiple DSCO body text components with MUI Typography variants. |
| apps/src/lab2/views/components/PanelContainer.tsx | Replace DSCO Typography with MUI Typography using overline2 variant. |
| apps/src/lab2/views/components/Instructions/ValidationResults.tsx | Replace DSCO headings/body/strong text wrappers with MUI Typography variants. |
| apps/src/lab2/views/components/Instructions/ResourcePanel/VersionHistory/VersionHistoryRow.tsx | Replace BodyFourText with MUI Typography for commit description text. |
| apps/src/lab2/views/components/Instructions/ResourcePanel/ValidationTable.tsx | Replace DSCO overline/body/strong wrappers with MUI Typography variants. |
| apps/src/lab2/views/components/Instructions/ResourcePanel/Backpack/BackpackPanel.tsx | Replace BodyThreeText with MUI Typography for section divider text. |
| apps/src/lab2/views/components/Instructions/ResourcePanel/Backpack/BackpackMessage.tsx | Replace DSCO body/strong wrappers with MUI Typography variants. |
| apps/src/lab2/views/components/Instructions/ResourcePanel/Backpack/BackpackFileChip.tsx | Replace DSCO body/strong wrappers with MUI Typography for chip labels. |
| apps/src/lab2/views/components/Instructions/PredictSolution.tsx | Replace DSCO heading/body wrappers with MUI Typography variants. |
| apps/src/lab2/views/ExtraLinksModal.tsx | Replace DSCO heading/strong wrappers with MUI Typography variants. |
| apps/src/lab2/levelEditors/validations/EditValidations.tsx | Replace DSCO Typography with MUI Typography for editor helper text. |
| apps/src/lab2/levelEditors/predictSettings/EditPredictSettings.tsx | Replace BodyThreeText with MUI Typography for helper copy. |
| apps/src/lab2/levelEditors/panels/EditPanels.tsx | Replace DSCO heading/body wrappers with MUI Typography variants. |
| apps/src/lab2/levelEditors/neighborhood/EditNeighborhoodSettings.tsx | Replace BodyTwoText with MUI Typography for label text. |
| apps/src/lab2/levelEditors/levelData/MultiCategorySelect.tsx | Replace StrongText with MUI Typography strong variant in headers. |
| apps/src/lab2/levelEditors/levelData/EditToolboxBlocks.tsx | Replace BodyTwoText with MUI Typography for section heading text. |
| apps/src/lab2/levelEditors/levelData/EditMusicToolbox.tsx | Replace BodyTwoText with MUI Typography for form labels. |
| apps/src/lab2/levelEditors/levelData/EditMusicLevelData.tsx | Replace BodyFourText with MUI Typography for helper/description text. |
| apps/src/lab2/levelEditors/levelData/EditLibrarySounds.tsx | Replace DSCO body/strong wrappers with MUI Typography variants. |
| apps/src/lab2/levelEditors/exemplar/MusicExemplarSettings.tsx | Replace BodyThreeText with MUI Typography for helper copy. |
| apps/src/lab2/levelEditors/exemplar/ExemplarValidation.tsx | Replace BodyThreeText with MUI Typography for helper copy. |
| apps/src/lab2/levelEditors/aichatSettings/ModelSelectionFields.tsx | Replace BodyFourText with MUI Typography for descriptive copy. |
| apps/src/lab2/levelEditors/aichatSettings/FieldSection.tsx | Replace BodyFourText with MUI Typography for field descriptions. |
| apps/src/lab2/levelEditors/aichatSettings/EditAichatSettings.tsx | Replace DSCO body wrappers with MUI Typography for editor text/labels. |
| apps/src/lab2/levelEditors/NavigationSidebar.jsx | Replace Heading3 with MUI Typography for sidebar heading. |
| apps/src/dance/lab2/views/DanceShare.tsx | Replace Heading3 with MUI Typography for project title. |
| apps/src/codebridge/components/CodebridgeEmptyState.tsx | Replace DSCO body wrappers with MUI Typography for title/description text. |
| apps/src/codebridge/Workspace/Workspace.tsx | Replace BodyFourText with MUI Typography for file browser header label. |
| apps/src/codebridge/PopUpButton/PopUpButtonOption.tsx | Replace BodyFourText with MUI Typography for option label text. |
| apps/src/codebridge/FileTabs/FileTab.tsx | Replace BodyFourText with MUI Typography for tab name text. |
| apps/src/codebridge/FileBrowser/FileBrowserRow/FolderRowName.tsx | Replace BodyFourText with MUI Typography for folder name text. |
| apps/src/codebridge/FileBrowser/FileBrowserRow/FileRowName.tsx | Replace BodyFourText with MUI Typography for file name text. |
| apps/src/code-studio/pd/workshops/components/WorkshsopSessionsList.tsx | Replace DSCO body/strong wrappers with MUI Typography in session list items. |
| apps/src/code-studio/pd/workshops/components/WorkshopFacilitatorsList.tsx | Replace DSCO body/strong wrappers with MUI Typography for facilitator info. |
| apps/src/code-studio/pd/workshops/components/WorkshopDetails.tsx | Replace DSCO typography wrappers with MUI Typography throughout workshop details. |
| apps/src/code-studio/pd/workshops/components/UserPassport.tsx | Replace DSCO body/overline wrappers with MUI Typography for user info. |
| apps/src/code-studio/pd/workshops/components/OrganizerInformation.tsx | Replace DSCO heading/body/strong wrappers with MUI Typography variants. |
| apps/src/code-studio/pd/workshops/components/EnrollInWorkshop.tsx | Replace DSCO heading/body wrappers with MUI Typography variants. |
| apps/src/code-studio/pd/workshops/WorkshopMarketingPage.tsx | Replace Heading1 with MUI Typography for page heading. |
| apps/src/code-studio/pd/workshop_enrollment/WorkshopJoin.tsx | Replace DSCO heading/body wrappers with MUI Typography in join flow. |
| apps/src/code-studio/pd/workshop_enrollment/WorkshopEnrollmentCelebrationDialog.jsx | Replace DSCO typography wrappers with MUI Typography in celebration dialog. |
| apps/src/code-studio/pd/professional_learning/courses/SelfPacedPLCatalogCourseFacilitatedWorkshops.tsx | Replace DSCO body/strong wrappers with MUI Typography in catalog cards. |
| apps/src/code-studio/pd/professional_learning/SelfPacedProgressTable.jsx | Replace DSCO body wrappers with MUI Typography in progress table rows. |
| apps/src/code-studio/pd/professional_learning/SelfPacedPLCatalogExpandedCard.tsx | Replace DSCO heading/body wrappers with MUI Typography in expanded card. |
| apps/src/code-studio/pd/professional_learning/RegionalWorkshopCatalogCard.jsx | Replace DSCO typography wrappers with MUI Typography variants in cards. |
| apps/src/code-studio/pd/professional_learning/RegionalWorkshopCatalog.jsx | Replace DSCO typography wrappers with MUI Typography variants across the page. |
| apps/src/code-studio/pd/professional_learning/LandingPageWorkshopsTable.jsx | Replace Heading2 with MUI Typography for table header. |
| apps/src/code-studio/pd/professional_learning/LandingPage.jsx | Replace Heading2 with MUI Typography across landing page sections. |
| apps/src/code-studio/pd/professional_learning/GradeLevelsBarDisplay.jsx | Replace BodyFourText with MUI Typography for grade label text. |
| apps/src/code-studio/components/libraries/PublishSuccessDisplay.jsx | Replace legacy heading component with MUI Typography in publish success UI. |
| apps/src/code-studio/components/libraries/LibraryPublisher.jsx | Replace legacy headings with MUI Typography for section headings. |
| apps/src/code-studio/components/libraries/LibraryCreationDialog.jsx | Replace legacy headings with MUI Typography inside dialog flows. |
| apps/src/code-studio/components/SublevelCard.jsx | Replace Heading3 wrapper with MUI Typography for sublevel titles. |
| apps/src/code-studio/components/SortedTableSelect.jsx | Replace legacy heading with MUI Typography for table title. |
| apps/src/bubbleChoice/BubbleChoice.tsx | Replace Heading4 with MUI Typography for level/sublevel headings. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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-2] Pt.2 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: