From 6b4ff221c8a3fa13ec4af1fcf80e2fc8617bc224 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Thu, 1 Oct 2026 17:05:35 +0200
Subject: [PATCH] feat(ui-heading): add AI Heading iconOnly sizes for every
 Heading variant
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 packages/ui-heading/src/Heading/v2/README.md | 67 ++++++++++++++++++--
 packages/ui-heading/src/Heading/v2/index.tsx | 30 ++++++++-
 regression-test/src/app/heading/page.tsx     | 22 +++++++
 3 files changed, 112 insertions(+), 7 deletions(-)

diff --git a/packages/ui-heading/src/Heading/v2/README.md b/packages/ui-heading/src/Heading/v2/README.md
index b9aaee9d0b..2e63ebf7df 100644
--- a/packages/ui-heading/src/Heading/v2/README.md
+++ b/packages/ui-heading/src/Heading/v2/README.md
@@ -42,19 +42,78 @@ type: example
 
 ### AI Heading
 
-Pre-configured and with unique styles, the `ai-headings` are used for standardized, ai-related components.
+Use the `aiVariant` prop for headings of AI-related content, such as a Modal or Popover header. Use a standard Heading for all other headings.
+
+`stacked` and `horizontal` show the IgniteAI logo lockup before the heading text:
 
 ```js
 ---
 type: example
 ---
 <div style={{display: 'flex', flexDirection: 'column', gap: '24px'}}>
-  <Heading aiVariant="stacked" level="h2">Nutrition Facts</Heading>
-  <Heading aiVariant="horizontal" level="h3">Nutrition Facts</Heading>
-  <Heading aiVariant="iconOnly" level="h4">Nutrition Facts</Heading>
+  <Heading aiVariant="stacked" level="h2">Stacked AI heading</Heading>
+  <Heading aiVariant="horizontal" level="h3">Horizontal AI heading</Heading>
+</div>
+```
+
+`iconOnly` shows only the AI icon, and it comes in the same sizes as the standard Heading. Set the size with the `variant` or `level` prop, and the icon scales to match:
+
+```js
+---
+type: example
+---
+<div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
+  <Heading aiVariant="iconOnly" variant="titlePageDesktop">titlePageDesktop</Heading>
+  <Heading aiVariant="iconOnly" variant="titlePageMobile">titlePageMobile</Heading>
+  <Heading aiVariant="iconOnly" variant="titleSection">titleSection</Heading>
+  <Heading aiVariant="iconOnly" variant="titleCardSection">titleCardSection</Heading>
+  <Heading aiVariant="iconOnly" variant="titleModule">titleModule</Heading>
+  <Heading aiVariant="iconOnly" variant="titleCardLarge">titleCardLarge</Heading>
+  <Heading aiVariant="iconOnly" variant="titleCardRegular">titleCardRegular</Heading>
+  <Heading aiVariant="iconOnly" variant="titleCardMini">titleCardMini</Heading>
+  <Heading aiVariant="iconOnly" variant="label">label</Heading>
 </div>
 ```
 
+For example, in a Modal header:
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const [open, setOpen] = useState(false)
+  return (
+    <div>
+      <Button onClick={() => setOpen(true)}>Open Modal</Button>
+      <Modal
+        open={open}
+        onDismiss={() => setOpen(false)}
+        size="small"
+        label="Summarize with AI"
+      >
+        <Modal.Header>
+          <CloseButton
+            placement="end"
+            offset="small"
+            onClick={() => setOpen(false)}
+            screenReaderLabel="Close"
+          />
+          <Heading aiVariant="iconOnly" variant="titleCardLarge">
+            Summarize with AI
+          </Heading>
+        </Modal.Header>
+        <Modal.Body>
+          <Text>The AI-generated summary goes here.</Text>
+        </Modal.Body>
+      </Modal>
+    </div>
+  )
+}
+
+render(<Example />)
+```
+
 ### Heading level
 
 What DOM element is output is determined in the following order:
diff --git a/packages/ui-heading/src/Heading/v2/index.tsx b/packages/ui-heading/src/Heading/v2/index.tsx
index 570a2b3bae..33e2882752 100644
--- a/packages/ui-heading/src/Heading/v2/index.tsx
+++ b/packages/ui-heading/src/Heading/v2/index.tsx
@@ -99,6 +99,22 @@ const variantToAIHorizontalIconSize: Record<
   labelInline: 'xs'
 }
 
+const variantToAIIconOnlySize: Record<
+  NonNullable<HeadingProps['variant']>,
+  'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+> = {
+  titlePageDesktop: 'xl',
+  titlePageMobile: 'xl',
+  titleSection: 'xl',
+  titleCardSection: 'lg',
+  titleModule: 'lg',
+  titleCardLarge: 'lg',
+  titleCardRegular: 'md',
+  titleCardMini: 'sm',
+  label: 'sm',
+  labelInline: 'sm'
+}
+
 const levelToAIHorizontalIconSize: Record<
   Exclude<HeadingProps['level'], 'reset' | undefined>,
   'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
@@ -159,10 +175,12 @@ class Heading extends Component<HeadingProps> {
     this.checkProps()
   }
 
-  getIconSize(forAIHorizontal = false) {
+  getIconSize(aiMode?: 'horizontal' | 'iconOnly') {
     const { variant, level, as } = this.props
+    const forAIHorizontal = !!aiMode
 
     if (variant) {
+      if (aiMode === 'iconOnly') return variantToAIIconOnlySize[variant]
       return forAIHorizontal
         ? variantToAIHorizontalIconSize[variant]
         : variantToIconSize[variant]
@@ -211,7 +229,10 @@ class Heading extends Component<HeadingProps> {
       return (
         <span css={this.props.styles?.withIcon} aria-hidden="true">
           <span css={this.props.styles?.igniteAIHorizontal}>
-            <IgniteaiLogoInstUIIcon color="ai" size={this.getIconSize(true)} />
+            <IgniteaiLogoInstUIIcon
+              color="ai"
+              size={this.getIconSize('horizontal')}
+            />
             <span css={this.props.styles?.igniteAI}>IgniteAI</span>
           </span>
           {children}
@@ -221,7 +242,10 @@ class Heading extends Component<HeadingProps> {
     if (aiVariant === 'iconOnly') {
       return (
         <span css={this.props.styles?.withIcon} aria-hidden="true">
-          <IgniteaiLogoInstUIIcon color="ai" size={this.getIconSize(true)} />
+          <IgniteaiLogoInstUIIcon
+            color="ai"
+            size={this.getIconSize('iconOnly')}
+          />
           {children}
         </span>
       )
diff --git a/regression-test/src/app/heading/page.tsx b/regression-test/src/app/heading/page.tsx
index 9a9594a3cb..59c4bf82a4 100644
--- a/regression-test/src/app/heading/page.tsx
+++ b/regression-test/src/app/heading/page.tsx
@@ -76,6 +76,28 @@ export default function HeadingPage() {
         </Heading>
       </section>
 
+      {/* AI Heading iconOnly sizes */}
+      <section style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {(
+          [
+            'titlePageDesktop',
+            'titlePageMobile',
+            'titleSection',
+            'titleCardSection',
+            'titleModule',
+            'titleCardLarge',
+            'titleCardRegular',
+            'titleCardMini',
+            'label',
+            'labelInline'
+          ] as const
+        ).map((variant) => (
+          <Heading key={variant} aiVariant="iconOnly" variant={variant}>
+            AI {variant}
+          </Heading>
+        ))}
+      </section>
+
       {/* Colors */}
       <section>
         <Heading>I inherit my color via the CSS cascade (default)</Heading>