@instructure/ui-heading 11.7.9-snapshot-4 → 11.7.9-snapshot-5

package/CHANGELOG.md

@@ -3,12 +3,11 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.9-snapshot-4](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-snapshot-4) (2026-10-13)
-
-**Note:** Version bump only for package @instructure/ui-heading
-
+## [11.7.9-snapshot-5](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-snapshot-5) (2026-10-13)
 
+### Features
 
+* **ui-heading:** add AI Heading iconOnly sizes for every Heading variant ([#2738](https://github.com/instructure/instructure-ui/issues/2738)) ([b107d8f](https://github.com/instructure/instructure-ui/commit/b107d8f91673fc8a8835876075a9da6f4acbef03))
 
 
 ## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)

package/es/Heading/v2/index.js

@@ -75,6 +75,18 @@ const variantToAIHorizontalIconSize = {
   label: 'xs',
   labelInline: 'xs'
 };
+const variantToAIIconOnlySize = {
+  titlePageDesktop: 'xl',
+  titlePageMobile: 'xl',
+  titleSection: 'xl',
+  titleCardSection: 'lg',
+  titleModule: 'lg',
+  titleCardLarge: 'lg',
+  titleCardRegular: 'md',
+  titleCardMini: 'sm',
+  label: 'sm',
+  labelInline: 'sm'
+};
 const levelToAIHorizontalIconSize = {
   h1: '2xl',
   h2: 'lg',
@@ -125,13 +137,15 @@ let Heading = (_dec = withStyleNew(generateStyle), _dec(_class = class Heading e
     this.props.makeStyles?.();
     this.checkProps();
   }
-  getIconSize(forAIHorizontal = false) {
+  getIconSize(aiMode) {
     const {
       variant,
       level,
       as
     } = this.props;
+    const forAIHorizontal = !!aiMode;
     if (variant) {
+      if (aiMode === 'iconOnly') return variantToAIIconOnlySize[variant];
       return forAIHorizontal ? variantToAIHorizontalIconSize[variant] : variantToIconSize[variant];
     }
     if (level && level !== 'reset') {
@@ -180,7 +194,7 @@ let Heading = (_dec = withStyleNew(generateStyle), _dec(_class = class Heading e
           css: this.props.styles?.igniteAIHorizontal,
           children: [_jsx(IgniteaiLogoInstUIIcon, {
             color: "ai",
-            size: this.getIconSize(true)
+            size: this.getIconSize('horizontal')
           }), _jsx("span", {
             css: this.props.styles?.igniteAI,
             children: "IgniteAI"
@@ -194,7 +208,7 @@ let Heading = (_dec = withStyleNew(generateStyle), _dec(_class = class Heading e
         "aria-hidden": "true",
         children: [_jsx(IgniteaiLogoInstUIIcon, {
           color: "ai",
-          size: this.getIconSize(true)
+          size: this.getIconSize('iconOnly')
         }), children]
       });
     }

package/lib/Heading/v2/index.js

@@ -81,6 +81,18 @@ const variantToAIHorizontalIconSize = {
   label: 'xs',
   labelInline: 'xs'
 };
+const variantToAIIconOnlySize = {
+  titlePageDesktop: 'xl',
+  titlePageMobile: 'xl',
+  titleSection: 'xl',
+  titleCardSection: 'lg',
+  titleModule: 'lg',
+  titleCardLarge: 'lg',
+  titleCardRegular: 'md',
+  titleCardMini: 'sm',
+  label: 'sm',
+  labelInline: 'sm'
+};
 const levelToAIHorizontalIconSize = {
   h1: '2xl',
   h2: 'lg',
@@ -131,13 +143,15 @@ let Heading = exports.Heading = (_dec = (0, _emotion.withStyleNew)(_styles.defau
     this.props.makeStyles?.();
     this.checkProps();
   }
-  getIconSize(forAIHorizontal = false) {
+  getIconSize(aiMode) {
     const {
       variant,
       level,
       as
     } = this.props;
+    const forAIHorizontal = !!aiMode;
     if (variant) {
+      if (aiMode === 'iconOnly') return variantToAIIconOnlySize[variant];
       return forAIHorizontal ? variantToAIHorizontalIconSize[variant] : variantToIconSize[variant];
     }
     if (level && level !== 'reset') {
@@ -186,7 +200,7 @@ let Heading = exports.Heading = (_dec = (0, _emotion.withStyleNew)(_styles.defau
           css: this.props.styles?.igniteAIHorizontal,
           children: [(0, _jsxRuntime.jsx)(_uiIcons.IgniteaiLogoInstUIIcon, {
             color: "ai",
-            size: this.getIconSize(true)
+            size: this.getIconSize('horizontal')
           }), (0, _jsxRuntime.jsx)("span", {
             css: this.props.styles?.igniteAI,
             children: "IgniteAI"
@@ -200,7 +214,7 @@ let Heading = exports.Heading = (_dec = (0, _emotion.withStyleNew)(_styles.defau
         "aria-hidden": "true",
         children: [(0, _jsxRuntime.jsx)(_uiIcons.IgniteaiLogoInstUIIcon, {
           color: "ai",
-          size: this.getIconSize(true)
+          size: this.getIconSize('iconOnly')
         }), children]
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-heading",
-  "version": "11.7.9-snapshot-4",
+  "version": "11.7.9-snapshot-5",
   "description": "A component for creating typographic headings",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,17 +15,17 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/console": "11.7.9-snapshot-4",
-    "@instructure/emotion": "11.7.9-snapshot-4",
-    "@instructure/shared-types": "11.7.9-snapshot-4",
-    "@instructure/ui-icons": "11.7.9-snapshot-4",
-    "@instructure/ui-react-utils": "11.7.9-snapshot-4",
-    "@instructure/ui-themes": "11.7.9-snapshot-4",
-    "@instructure/ui-view": "11.7.9-snapshot-4"
+    "@instructure/console": "11.7.9-snapshot-5",
+    "@instructure/emotion": "11.7.9-snapshot-5",
+    "@instructure/shared-types": "11.7.9-snapshot-5",
+    "@instructure/ui-icons": "11.7.9-snapshot-5",
+    "@instructure/ui-react-utils": "11.7.9-snapshot-5",
+    "@instructure/ui-themes": "11.7.9-snapshot-5",
+    "@instructure/ui-view": "11.7.9-snapshot-5"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "11.7.9-snapshot-4",
-    "@instructure/ui-babel-preset": "11.7.9-snapshot-4",
+    "@instructure/ui-axe-check": "11.7.9-snapshot-5",
+    "@instructure/ui-babel-preset": "11.7.9-snapshot-5",
     "vitest": "^5.0.0"
   },
   "peerDependencies": {

package/src/Heading/v2/README.md

@@ -42,16 +42,16 @@ 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.
 
 ```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>
+<div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+  <Heading aiVariant="stacked" variant="titleSection" level="h2">Stacked AI heading</Heading>
+  <Heading aiVariant="horizontal" variant="titleSection" level="h2">Horizontal AI heading</Heading>
+  <Heading aiVariant="iconOnly" variant="titleSection" level="h2">Icon only AI heading</Heading>
 </div>
 ```
 

package/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>
       )