Style buttons now preview their own formatting (MS Word-style)

[Copilot]

Formatting buttons in the ribbon showed generic icons with no visual hint of what they'd produce. This replaces them with styled-text buttons that render their own label in the format they apply — matching the MS Word ribbon convention.

Changes

Ribbon.tsx

• Added FormatButton: a native <button> with aria-pressed, aria-label, and title; replaces Carbon's icon-only Button for the 7 text-format toggles
• Each button renders a <span> styled with the format it applies:

  <FormatButton active={isBold} onClick={fmt('bold')} title="Bold">
    <span className="format-btn__label format-btn__label--bold">B</span>
  </FormatButton>

• STYLES array extended with previewStyle: React.CSSProperties; each Styles-chunk button wraps its label in <span style={style.previewStyle}> so "Heading 1" looks like an actual H1, etc.
• Removed 7 unused Carbon icon imports (TextBold, TextItalic, TextUnderline, TextStrikethrough, TextSubscript, TextSuperscript, TextHighlight)

globals.scss

• .format-btn — sizing, hover/active states (#cce0ff bg + #0f62fe border), focus ring
• .format-btn__label + modifier classes --bold, --italic, --underline, --strikethrough, --highlight

Result

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• www-api.ibm.com
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/carbon-type/carbon-type/node_modules/@ibm/telemetry-js/dist/REDACTED-process.js --log=/tmp/ibmtelemetry-20260317T143058804Z-771048.log --config=telemetry.yml (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Could we possibly adjust how the style buttons look by having them mimic what they will actually look like if used in the document? MS Word does this and we should make custom buttons in order to accommodate this change.

Created from VS Code.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.