Skip to content

feat(ui-heading): add AI Heading iconOnly sizes for every Heading variant - #2738

Open
joyenjoyer wants to merge 1 commit into
masterfrom
INSTUI-5190-ai-heading-variants
Open

joyenjoyer wants to merge 1 commit into
masterfrom
INSTUI-5190-ai-heading-variants

Conversation

@joyenjoyer

Copy link
Copy Markdown
Contributor

Summary

  • aiVariant="iconOnly" sizes the AI icon per variant to match Figma (32/24/20/16px) instead of reusing the horizontal lockup sizes; level/as sizing unchanged
  • Existing iconOnly + variant headings now render a slightly larger icon
  • Generalize the AI Heading README section (no longer Nutrition Facts specific)
  • Add an iconOnly size row to the heading regression-test page

Test Plan

  • On the Heading docs page, check each iconOnly example's icon size against the Figma frame (node 10463-47717)
  • Review visual regression diffs for the heading page

Fixes INSTUI-5190

🤖 Generated with Claude Code

…iant

aiVariant="iconOnly" now sizes its AI icon per variant to match the Figma spec (32, 24, 20,
and 16px) instead of reusing the horizontal lockup sizes. Level and as sizing are unchanged.
Existing iconOnly headings that set a variant render a slightly larger icon.

Generalize the AI Heading README section and add the sizes to the regression-test page.

INSTUI-5190

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@joyenjoyer joyenjoyer self-assigned this Oct 1, 2026
@github-actions

github-actions Bot commented Oct 1, 2026

Copy link
Copy Markdown
Contributor
PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://instructure.design/pr-preview/pr-2738/

Built to branch gh-pages at 2026-10-01 15:11 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@github-actions

github-actions Bot commented Oct 1, 2026

Copy link
Copy Markdown
Contributor

Visual regression report

Cypress suite: ✅ Passing

Visual diff: ⚠️ Changes detected.

Status Count
Unchanged 94
Changed 5
New 0
Removed 0

Accessibility (axe): ✅ No violations.

📊 View full report — click a screenshot's ⚠ badge to see each violation boxed on the image, with the offending element named and contrast failures shown as color swatches.

Diff images (5)

badge-canvas.png — 1573 pixels differ

heading-canvas.png — 560765 pixels differ

heading-dark.png — 562701 pixels differ

heading-light.png — 562551 pixels differ

tooltip-light.png — 956 pixels differ

Baselines come from the visual-baselines branch. They refresh on every merge to master. The Cypress suite line covers the a11y and console-error assertions — a ❌ there means the suite found real issues even if the visual diff is clean.

github-actions Bot pushed a commit that referenced this pull request Oct 1, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant