chore(text-editor): apply fusion-tokens#8043
Draft
nuria1110 wants to merge 2 commits into
Draft
Conversation
nuria1110
force-pushed
the
text-editor-tokens
branch
2 times, most recently
from
3da243e to
d07327b
Compare
nuria1110
changed the title
nuria1110
force-pushed
the
text-editor-tokens
branch
from
d07327b to
e73a9f4
Compare
There was a problem hiding this comment.
Pull request overview
Applies Fusion token styling to the TextEditor component and its internal UI (toolbar, dropdown, content area, placeholder, character counter), aligning it with the newer internal primitives (label, hint-text, validation-message/__next__).
Changes:
- Reworked
TextEditor+ internal styles to use Fusion tokens (size maps, spacing, borders, colors) across wrapper/header/footer/toolbar/content editor. - Updated internal UI components (toolbar buttons, typography dropdown, character counter, placeholder, mentions) and removed the LinkPreviewer wrapper in favor of rendering
previewsdirectly. - Adjusted tests/stories to reflect the new styling approach and updated some internal component imports/props.
Reviewed changes
Copilot reviewed 38 out of 38 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/text-editor/text-editor.component.tsx | Swaps to new internal Label/HintText/ValidationMessage and wires new sizing/styling props through. |
| src/components/text-editor/text-editor.style.ts | Introduces Fusion-token-based size maps + wrapper/header/footer/toolbar-wrapper styling updates. |
| src/components/text-editor/text-editor.test.tsx | Removes several size-specific styling assertions. |
| src/components/text-editor/text-editor.pw.tsx | Removes several styling-focused Playwright assertions (hint, button active styling, link styling). |
| src/components/text-editor/text-editor-test.stories.tsx | Adds a “Sizes” story and updates imports; simplifies ReadOnlyEditor usage. |
| src/components/text-editor/internal/utils/interfaces.types.ts | Adds hasFooter to ContentEditor; changes CharacterCounter props to use size. |
| src/components/text-editor/internal/ui/Toolbar/toolbar.style.ts | Tokenizes toolbar padding/gap/button sizing and active/hover styling. |
| src/components/text-editor/internal/ui/Toolbar/toolbar.test.tsx | Removes size-padding styling tests. |
| src/components/text-editor/internal/ui/Toolbar/buttons/bold.component.tsx | Defaults size to "medium" in props destructuring. |
| src/components/text-editor/internal/ui/Toolbar/buttons/bold.test.tsx | Removes background-color style assertions (active/inactive). |
| src/components/text-editor/internal/ui/Toolbar/buttons/italic.component.tsx | Defaults size to "medium" in props destructuring. |
| src/components/text-editor/internal/ui/Toolbar/buttons/italic.test.tsx | Removes background-color style assertions (active/inactive). |
| src/components/text-editor/internal/ui/Toolbar/buttons/underline.component.tsx | Defaults size to "medium" in props destructuring. |
| src/components/text-editor/internal/ui/Toolbar/buttons/underline.test.tsx | Removes background-color style assertions (active/inactive). |
| src/components/text-editor/internal/ui/Toolbar/buttons/list.test.tsx | Removes ordered/unordered list button background-color assertions. |
| src/components/text-editor/internal/ui/Toolbar/buttons/hyperlink.test.tsx | Removes hyperlink button background-color assertion. |
| src/components/text-editor/internal/ui/Toolbar/buttons/typography.test.tsx | Updates dropdown menu top offset assertion. |
| src/components/text-editor/internal/ui/Toolbar/buttons/typography-dropdown/dropdown.component.tsx | Updates sizing + adds editor-dropdown class and data-role wrapper; passes size to items. |
| src/components/text-editor/internal/ui/Toolbar/buttons/typography-dropdown/dropdown.style.ts | Tokenizes typography dropdown button/menu/menu-item styling by size. |
| src/components/text-editor/internal/ui/Toolbar/buttons/typography-dropdown/dropdown.test.tsx | Changes coverage to assert wrapper minWidth for large size. |
| src/components/text-editor/internal/ui/Toolbar/button-group/button-group.style.ts | Tokenizes gaps/divider styles. |
| src/components/text-editor/internal/ui/ContentEditor/content-editor.component.tsx | Adds hasFooter support and renders previews directly (no LinkPreviewer). |
| src/components/text-editor/internal/ui/ContentEditor/content-editor.style.ts | Tokenizes padding/borders/radii and error styling; adds hasFooter handling. |
| src/components/text-editor/internal/ui/ContentEditor/content-editor.test.tsx | Refactors preview tests to mount ContentEditor in LexicalComposer; drops padding assertion. |
| src/components/text-editor/internal/ui/CharacterCounter/character-counter.component.tsx | Switches from marginTop to size prop. |
| src/components/text-editor/internal/ui/CharacterCounter/character-counter.style.ts | Tokenizes character counter typography/colors; removes margin styling. |
| src/components/text-editor/internal/ui/CharacterCounter/character-counter.test.tsx | Removes test asserting default marginTop. |
| src/components/text-editor/internal/ui/Placeholder/placeholder.style.ts | Updates placeholder color token. |
| src/components/text-editor/internal/ui/Mentions/mentions.style.ts | Fixes styling block formatting while using popover tokens. |
| src/components/text-editor/internal/ui/ReadOnlyEditor/read-only-rte.component.tsx | Removes useBackgroundColor prop and simplifies wrapper props. |
| src/components/text-editor/internal/ui/LinkPreviewer/link-previewer.component.tsx | Deleted (no longer used). |
| src/components/text-editor/internal/ui/LinkPreviewer/link-previewer.style.ts | Deleted (no longer used). |
| src/components/text-editor/internal/ui/LinkPreviewer/link-previewer.test.tsx | Deleted (no longer used). |
| src/components/text-editor/internal/ui/LinkPreviewer/index.ts | Deleted (no longer used). |
| src/components/text-editor/internal/ui/index.ts | Removes LinkPreviewerPlugin export. |
| src/components/icon/icon.style.ts | Adds .editor-dropdown override for icon color in the typography dropdown. |
| src/components/note/note.component.tsx | Updates ReadOnlyEditor usage after prop removal. |
| src/internal/label/label.component.tsx | Adds onClick prop support used by TextEditor label-to-focus behavior. |
Comment on lines
+4
to
+10
| const sizeMap = { | ||
| small: { | ||
| contentMargin: "var(--global-space-comp-xs)", | ||
| validationGap: "var(--global-space-comp-xs)", | ||
| headerPadding: "var(--global-space-comp-s)", | ||
| footerPadding: "var(--global-space-comp-s)", | ||
| }, |
Contributor
Author
There was a problem hiding this comment.
This is all getting captured by chromatic.
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
Apply fusion-tokens to TextEditor.
Current behaviour
TextEditor does not use fusion-tokens.
Checklist
d.tsfile added or updated if requiredQA
Additional context
Testing instructions