fix(text-editor): scale paragraph content font with the size prop - #8147
Draft
tamas-sage wants to merge 1 commit into
Draft
fix(text-editor): scale paragraph content font with the size prop#8147tamas-sage wants to merge 1 commit into
tamas-sage wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
Pull request overview
Updates Carbon’s TextEditor typography so paragraph content (including links and mention pill text) scales with the size prop by relying on inherited paragraph font tokens, while retaining bold/italic formatting behavior.
Changes:
- Apply size-based paragraph
fonttokens on the editor container viaStyledTextEditor. - Update
StyledSpanNodeto avoid writing inlinefontSize/lineHeightfor paragraph preset spans so they inherit from the editor. - Update mention pill styling to inherit font, and add unit tests covering the new paragraph inline-style behavior.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/text-editor/text-editor.style.ts | Adds size→paragraph font token mapping and applies it on the editor container. |
| src/components/text-editor/text-editor.component.tsx | Passes the computed size into StyledTextEditor so typography can be applied consistently. |
| src/components/text-editor/internal/nodes/styled-span.node.ts | Skips inline font size/line height for paragraph preset spans to allow size-based inheritance. |
| src/components/text-editor/internal/nodes/styled-span.node.test.tsx | Adds tests validating paragraph spans don’t set inline font size/line height, including transitions to/from other presets. |
| src/components/text-editor/internal/nodes/mention.node.ts | Makes mention pill text inherit font so it scales with editor size. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+135
to
+139
| /** | ||
| * Whether this node uses the paragraph preset. Paragraph font size and line height | ||
| * are inherited from the editor so they can scale with its `size` prop, so they are | ||
| * deliberately not written as inline styles. | ||
| * @returns true when the node matches the paragraph preset |
Comment on lines
16
to
21
| color: var(--pill-generic-label-alt-default); | ||
| cursor: pointer; | ||
| display: inline-block; | ||
| font: var(--global-font-static-comp-regular-m); | ||
| font: inherit; | ||
| min-height: 20px; | ||
| padding: 0px var(--global-space-comp-s); |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Proposed behaviour
the editor should apply size-based paragraph typography consistently across all paragraph content, including links and mention pill text. The mapping should be small = global/font/static/comp/regular/S, medium = global/font/static/comp/regular/M, and large = global/font/static/comp/regular/L, while preserving bold and italic styling.
Current behaviour
the TextEditor size updates the surrounding editor styling, but paragraph content inside the editor does not consistently inherit the size-specific font token. The paragraph node still applies a fixed typography setup of 400 / 21px / 14px, so links and text inside mention pills can stay on the wrong font, which is most noticeable at large size.
Checklist
d.tsfile added or updated if requiredQA
Additional context
Testing instructions