@instructure/ui-heading 10.21.0 → 10.21.1-snapshot-1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.21.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.21.0...v10.21.1-snapshot-1) (2025-07-03)
+
+
+### Features
+
+* **ui-heading,shared-types:** add new aiHeading prop and design. Also add h6 level to heading ([a74236a](https://github.com/instructure/instructure-ui/commit/a74236a4e245b8738e6fa7785806a9586666d33c))
+
+
+
+
+
 # [10.21.0](https://github.com/instructure/instructure-ui/compare/v10.20.1...v10.21.0) (2025-06-27)
 
 

package/es/Heading/index.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["border", "children", "color", "level", "margin", "elementRef", "makeStyles", "variant"];
-var _dec, _dec2, _class, _Heading;
+var _dec, _dec2, _class, _Heading, _IconAiColoredSolid, _IconAiColoredSolid2, _IconAiColoredSolid3;
 /*
  * The MIT License (MIT)
  *
@@ -29,11 +29,12 @@ import { Component } from 'react';
 import { View } from '@instructure/ui-view';
 import { getElementType, passthroughProps, callRenderProp } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
+import { IconAiColoredSolid } from '@instructure/ui-icons';
 import { withStyle } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { propTypes, allowedProps } from './props';
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
 const variantLevels = {
   titlePageDesktop: 'h1',
   titlePageMobile: 'h1',
@@ -85,26 +86,78 @@ let Heading = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
   renderContent() {
     const _this$props4 = this.props,
       children = _this$props4.children,
-      renderIcon = _this$props4.renderIcon;
-    if (renderIcon) {
-      return _jsxs(_Fragment, {
+      renderIcon = _this$props4.renderIcon,
+      aiVariant = _this$props4.aiVariant;
+    if (renderIcon && !aiVariant) {
+      var _this$props$styles;
+      return _jsxs("span", {
+        css: [(_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.withIcon],
+        "aria-hidden": "true",
         children: [callRenderProp(renderIcon), "\xA0", children]
       });
     }
+    if (aiVariant === 'stacked') {
+      var _this$props$styles2, _this$props$styles3, _this$props$styles4;
+      return _jsxs("span", {
+        css: [(_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.withIcon],
+        "aria-hidden": "true",
+        children: [_jsxs("span", {
+          css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.igniteAIStacked,
+          children: [_IconAiColoredSolid || (_IconAiColoredSolid = _jsx(IconAiColoredSolid, {})), _jsx("span", {
+            css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.igniteAI,
+            children: "IgniteAI"
+          })]
+        }), children]
+      });
+    }
+    if (aiVariant === 'horizontal') {
+      var _this$props$styles5, _this$props$styles6;
+      return _jsxs("span", {
+        css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.withIcon,
+        "aria-hidden": "true",
+        children: [_IconAiColoredSolid2 || (_IconAiColoredSolid2 = _jsx(IconAiColoredSolid, {})), _jsx("span", {
+          css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.igniteAI,
+          children: "IgniteAI"
+        }), children]
+      });
+    }
+    if (aiVariant === 'iconOnly') {
+      var _this$props$styles7;
+      return _jsxs("span", {
+        css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.withIcon,
+        "aria-hidden": "true",
+        children: [_IconAiColoredSolid3 || (_IconAiColoredSolid3 = _jsx(IconAiColoredSolid, {})), "\xA0", children]
+      });
+    }
     return children;
   }
-  render() {
-    var _this$props$styles;
+
+  //overriding default screen reader functionality is needed to read spans in h tags correctly
+  getAriaLabel() {
     const _this$props5 = this.props,
-      border = _this$props5.border,
+      aiVariant = _this$props5.aiVariant,
       children = _this$props5.children,
-      color = _this$props5.color,
-      level = _this$props5.level,
-      margin = _this$props5.margin,
-      elementRef = _this$props5.elementRef,
-      makeStyles = _this$props5.makeStyles,
-      variant = _this$props5.variant,
-      props = _objectWithoutProperties(_this$props5, _excluded);
+      renderIcon = _this$props5.renderIcon;
+    if (aiVariant === 'stacked' || aiVariant === 'horizontal') {
+      return `IgniteAI, ${children}`;
+    }
+    if (aiVariant === 'iconOnly' || renderIcon) {
+      return `${children}`;
+    }
+    return void 0;
+  }
+  render() {
+    var _this$props$styles8;
+    const _this$props6 = this.props,
+      border = _this$props6.border,
+      children = _this$props6.children,
+      color = _this$props6.color,
+      level = _this$props6.level,
+      margin = _this$props6.margin,
+      elementRef = _this$props6.elementRef,
+      makeStyles = _this$props6.makeStyles,
+      variant = _this$props6.variant,
+      props = _objectWithoutProperties(_this$props6, _excluded);
     const propsForGetElementType = variant ? {} : this.props;
     const ElementType = getElementType(Heading, propsForGetElementType, () => {
       if (level === 'reset') {
@@ -120,10 +173,11 @@ let Heading = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
     });
     return _jsx(View, {
       ...passthroughProps(props),
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.heading,
+      css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.heading,
       as: ElementType,
       elementRef: this.handleRef,
       margin: margin,
+      "aria-label": this.getAriaLabel(),
       children: this.renderContent()
     });
   }

package/es/Heading/props.js

@@ -25,6 +25,7 @@
 import PropTypes from 'prop-types';
 import { childrenOrValue } from '@instructure/ui-prop-types';
 const propTypes = {
+  aiVariant: PropTypes.oneOf(['stacked', 'horizontal', 'iconOnly']),
   border: PropTypes.oneOf(['none', 'top', 'bottom']),
   children: childrenOrValue,
   color: PropTypes.oneOf(['primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'inherit', 'ai']),
@@ -35,5 +36,5 @@ const propTypes = {
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   variant: PropTypes.oneOf(['titlePageDesktop', 'titlePageMobile', 'titleSection', 'titleCardSection', 'titleModule', 'titleCardLarge', 'titleCardRegular', 'titleCardMini', 'label', 'labelInline'])
 };
-const allowedProps = ['border', 'children', 'color', 'level', 'as', 'margin', 'elementRef', 'variant'];
+const allowedProps = ['aiVariant', 'border', 'children', 'color', 'level', 'as', 'margin', 'elementRef', 'variant'];
 export { propTypes, allowedProps };

package/es/Heading/styles.js

@@ -37,7 +37,7 @@ const generateStyle = (componentTheme, props) => {
     color = props.color,
     border = props.border,
     variant = props.variant,
-    renderIcon = props.renderIcon;
+    aiVariant = props.aiVariant;
   const variants = {
     titlePageDesktop: {
       fontStyle: 'normal',
@@ -126,6 +126,11 @@ const generateStyle = (componentTheme, props) => {
       fontSize: componentTheme.h5FontSize,
       fontWeight: componentTheme.h5FontWeight
     },
+    h6: {
+      fontFamily: componentTheme.h6FontFamily,
+      fontSize: componentTheme.h6FontSize,
+      fontWeight: componentTheme.h6FontWeight
+    },
     reset: {
       margin: 0,
       fontSize: 'inherit',
@@ -192,11 +197,6 @@ const generateStyle = (componentTheme, props) => {
       label: 'heading',
       lineHeight: componentTheme.lineHeight,
       margin: 0,
-      //need this for icons to render them vertically centered
-      ...(renderIcon ? {
-        display: 'flex',
-        alignItems: 'center'
-      } : {}),
       // NOTE: the input styles exist to accommodate the InPlaceEdit component
       // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
       '&:is(input)[type]': inputStyles,
@@ -204,6 +204,31 @@ const generateStyle = (componentTheme, props) => {
       ...(variant ? variants[variant] : levelStyles[level]),
       ...colorStyles[color],
       ...borderStyles[border]
+    },
+    igniteAI: {
+      label: 'heading__ignite-ai',
+      background: `
+        linear-gradient(to bottom, ${componentTheme.aiTextTopGradientColor} 0%, ${componentTheme.aiTextBottomGradientColor} 100%) text`,
+      border: 'solid transparent',
+      WebkitTextFillColor: 'transparent',
+      paddingRight: '.25rem'
+    },
+    igniteAIStacked: {
+      label: 'heading__ignite-ai-stacked',
+      fontSize: '1rem',
+      lineHeight: '1.25rem',
+      display: 'flex',
+      alignItems: 'center'
+    },
+    withIcon: {
+      label: 'heading__with-icon',
+      display: 'flex',
+      alignItems: 'center',
+      ...(aiVariant === 'stacked' ? {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start'
+      } : {})
     }
   };
 };

package/es/Heading/theme.js

@@ -37,16 +37,6 @@ const generateComponentTheme = theme => {
   const themeSpecificStyle = {
     canvas: {
       primaryColor: theme['ic-brand-font-color-dark']
-    },
-    instructure: {
-      h1FontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamilyHeading,
-      h2FontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamilyHeading,
-      h3FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
-      h3FontSize: '2.125rem',
-      h4FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
-      h4FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
-      h5FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
-      h5FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium
     }
   };
   const componentVariables = {
@@ -67,6 +57,9 @@ const generateComponentTheme = theme => {
     h5FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
     h5FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
     h5FontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    h6FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
+    h6FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    h6FontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     primaryInverseColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
     primaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
     secondaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey4570,

package/lib/Heading/index.js

@@ -12,13 +12,14 @@ var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
+var _IconAiColoredSolid4 = require("@instructure/ui-icons/lib/IconAiColoredSolid.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["border", "children", "color", "level", "margin", "elementRef", "makeStyles", "variant"];
-var _dec, _dec2, _class, _Heading;
+var _dec, _dec2, _class, _Heading, _IconAiColoredSolid, _IconAiColoredSolid2, _IconAiColoredSolid3;
 /*
  * The MIT License (MIT)
  *
@@ -93,26 +94,78 @@ let Heading = exports.Heading = (_dec = (0, _emotion.withStyle)(_styles.default,
   renderContent() {
     const _this$props4 = this.props,
       children = _this$props4.children,
-      renderIcon = _this$props4.renderIcon;
-    if (renderIcon) {
-      return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      renderIcon = _this$props4.renderIcon,
+      aiVariant = _this$props4.aiVariant;
+    if (renderIcon && !aiVariant) {
+      var _this$props$styles;
+      return (0, _jsxRuntime.jsxs)("span", {
+        css: [(_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.withIcon],
+        "aria-hidden": "true",
         children: [(0, _callRenderProp.callRenderProp)(renderIcon), "\xA0", children]
       });
     }
+    if (aiVariant === 'stacked') {
+      var _this$props$styles2, _this$props$styles3, _this$props$styles4;
+      return (0, _jsxRuntime.jsxs)("span", {
+        css: [(_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.withIcon],
+        "aria-hidden": "true",
+        children: [(0, _jsxRuntime.jsxs)("span", {
+          css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.igniteAIStacked,
+          children: [_IconAiColoredSolid || (_IconAiColoredSolid = (0, _jsxRuntime.jsx)(_IconAiColoredSolid4.IconAiColoredSolid, {})), (0, _jsxRuntime.jsx)("span", {
+            css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.igniteAI,
+            children: "IgniteAI"
+          })]
+        }), children]
+      });
+    }
+    if (aiVariant === 'horizontal') {
+      var _this$props$styles5, _this$props$styles6;
+      return (0, _jsxRuntime.jsxs)("span", {
+        css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.withIcon,
+        "aria-hidden": "true",
+        children: [_IconAiColoredSolid2 || (_IconAiColoredSolid2 = (0, _jsxRuntime.jsx)(_IconAiColoredSolid4.IconAiColoredSolid, {})), (0, _jsxRuntime.jsx)("span", {
+          css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.igniteAI,
+          children: "IgniteAI"
+        }), children]
+      });
+    }
+    if (aiVariant === 'iconOnly') {
+      var _this$props$styles7;
+      return (0, _jsxRuntime.jsxs)("span", {
+        css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.withIcon,
+        "aria-hidden": "true",
+        children: [_IconAiColoredSolid3 || (_IconAiColoredSolid3 = (0, _jsxRuntime.jsx)(_IconAiColoredSolid4.IconAiColoredSolid, {})), "\xA0", children]
+      });
+    }
     return children;
   }
-  render() {
-    var _this$props$styles;
+
+  //overriding default screen reader functionality is needed to read spans in h tags correctly
+  getAriaLabel() {
     const _this$props5 = this.props,
-      border = _this$props5.border,
+      aiVariant = _this$props5.aiVariant,
       children = _this$props5.children,
-      color = _this$props5.color,
-      level = _this$props5.level,
-      margin = _this$props5.margin,
-      elementRef = _this$props5.elementRef,
-      makeStyles = _this$props5.makeStyles,
-      variant = _this$props5.variant,
-      props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
+      renderIcon = _this$props5.renderIcon;
+    if (aiVariant === 'stacked' || aiVariant === 'horizontal') {
+      return `IgniteAI, ${children}`;
+    }
+    if (aiVariant === 'iconOnly' || renderIcon) {
+      return `${children}`;
+    }
+    return void 0;
+  }
+  render() {
+    var _this$props$styles8;
+    const _this$props6 = this.props,
+      border = _this$props6.border,
+      children = _this$props6.children,
+      color = _this$props6.color,
+      level = _this$props6.level,
+      margin = _this$props6.margin,
+      elementRef = _this$props6.elementRef,
+      makeStyles = _this$props6.makeStyles,
+      variant = _this$props6.variant,
+      props = (0, _objectWithoutProperties2.default)(_this$props6, _excluded);
     const propsForGetElementType = variant ? {} : this.props;
     const ElementType = (0, _getElementType.getElementType)(Heading, propsForGetElementType, () => {
       if (level === 'reset') {
@@ -128,10 +181,11 @@ let Heading = exports.Heading = (_dec = (0, _emotion.withStyle)(_styles.default,
     });
     return (0, _jsxRuntime.jsx)(_View.View, {
       ...(0, _passthroughProps.passthroughProps)(props),
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.heading,
+      css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.heading,
       as: ElementType,
       elementRef: this.handleRef,
       margin: margin,
+      "aria-label": this.getAriaLabel(),
       children: this.renderContent()
     });
   }

package/lib/Heading/props.js

@@ -32,6 +32,7 @@ var _childrenOrValue = require("@instructure/ui-prop-types/lib/childrenOrValue.j
  */
 
 const propTypes = exports.propTypes = {
+  aiVariant: _propTypes.default.oneOf(['stacked', 'horizontal', 'iconOnly']),
   border: _propTypes.default.oneOf(['none', 'top', 'bottom']),
   children: _childrenOrValue.childrenOrValue,
   color: _propTypes.default.oneOf(['primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'inherit', 'ai']),
@@ -42,4 +43,4 @@ const propTypes = exports.propTypes = {
   renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   variant: _propTypes.default.oneOf(['titlePageDesktop', 'titlePageMobile', 'titleSection', 'titleCardSection', 'titleModule', 'titleCardLarge', 'titleCardRegular', 'titleCardMini', 'label', 'labelInline'])
 };
-const allowedProps = exports.allowedProps = ['border', 'children', 'color', 'level', 'as', 'margin', 'elementRef', 'variant'];
+const allowedProps = exports.allowedProps = ['aiVariant', 'border', 'children', 'color', 'level', 'as', 'margin', 'elementRef', 'variant'];

package/lib/Heading/styles.js

@@ -43,7 +43,7 @@ const generateStyle = (componentTheme, props) => {
     color = props.color,
     border = props.border,
     variant = props.variant,
-    renderIcon = props.renderIcon;
+    aiVariant = props.aiVariant;
   const variants = {
     titlePageDesktop: {
       fontStyle: 'normal',
@@ -132,6 +132,11 @@ const generateStyle = (componentTheme, props) => {
       fontSize: componentTheme.h5FontSize,
       fontWeight: componentTheme.h5FontWeight
     },
+    h6: {
+      fontFamily: componentTheme.h6FontFamily,
+      fontSize: componentTheme.h6FontSize,
+      fontWeight: componentTheme.h6FontWeight
+    },
     reset: {
       margin: 0,
       fontSize: 'inherit',
@@ -198,11 +203,6 @@ const generateStyle = (componentTheme, props) => {
       label: 'heading',
       lineHeight: componentTheme.lineHeight,
       margin: 0,
-      //need this for icons to render them vertically centered
-      ...(renderIcon ? {
-        display: 'flex',
-        alignItems: 'center'
-      } : {}),
       // NOTE: the input styles exist to accommodate the InPlaceEdit component
       // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
       '&:is(input)[type]': inputStyles,
@@ -210,6 +210,31 @@ const generateStyle = (componentTheme, props) => {
       ...(variant ? variants[variant] : levelStyles[level]),
       ...colorStyles[color],
       ...borderStyles[border]
+    },
+    igniteAI: {
+      label: 'heading__ignite-ai',
+      background: `
+        linear-gradient(to bottom, ${componentTheme.aiTextTopGradientColor} 0%, ${componentTheme.aiTextBottomGradientColor} 100%) text`,
+      border: 'solid transparent',
+      WebkitTextFillColor: 'transparent',
+      paddingRight: '.25rem'
+    },
+    igniteAIStacked: {
+      label: 'heading__ignite-ai-stacked',
+      fontSize: '1rem',
+      lineHeight: '1.25rem',
+      display: 'flex',
+      alignItems: 'center'
+    },
+    withIcon: {
+      label: 'heading__with-icon',
+      display: 'flex',
+      alignItems: 'center',
+      ...(aiVariant === 'stacked' ? {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start'
+      } : {})
     }
   };
 };

package/lib/Heading/theme.js

@@ -43,16 +43,6 @@ const generateComponentTheme = theme => {
   const themeSpecificStyle = {
     canvas: {
       primaryColor: theme['ic-brand-font-color-dark']
-    },
-    instructure: {
-      h1FontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamilyHeading,
-      h2FontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamilyHeading,
-      h3FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
-      h3FontSize: '2.125rem',
-      h4FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
-      h4FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
-      h5FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
-      h5FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium
     }
   };
   const componentVariables = {
@@ -73,6 +63,9 @@ const generateComponentTheme = theme => {
     h5FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
     h5FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
     h5FontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    h6FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
+    h6FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    h6FontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     primaryInverseColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
     primaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
     secondaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey4570,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-heading",
-  "version": "10.21.0",
+  "version": "10.21.1-snapshot-1",
   "description": "A component for creating typographic headings",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,19 +24,20 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.21.0",
-    "@instructure/emotion": "10.21.0",
-    "@instructure/shared-types": "10.21.0",
-    "@instructure/ui-prop-types": "10.21.0",
-    "@instructure/ui-react-utils": "10.21.0",
-    "@instructure/ui-testable": "10.21.0",
-    "@instructure/ui-view": "10.21.0",
+    "@instructure/console": "10.21.1-snapshot-1",
+    "@instructure/emotion": "10.21.1-snapshot-1",
+    "@instructure/shared-types": "10.21.1-snapshot-1",
+    "@instructure/ui-icons": "10.21.1-snapshot-1",
+    "@instructure/ui-prop-types": "10.21.1-snapshot-1",
+    "@instructure/ui-react-utils": "10.21.1-snapshot-1",
+    "@instructure/ui-testable": "10.21.1-snapshot-1",
+    "@instructure/ui-view": "10.21.1-snapshot-1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.21.0",
-    "@instructure/ui-babel-preset": "10.21.0",
-    "@instructure/ui-themes": "10.21.0",
+    "@instructure/ui-axe-check": "10.21.1-snapshot-1",
+    "@instructure/ui-babel-preset": "10.21.1-snapshot-1",
+    "@instructure/ui-themes": "10.21.1-snapshot-1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "vitest": "^3.2.2"

package/src/Heading/README.md

@@ -34,11 +34,19 @@ type: example
   </div>
 ```
 
+### AI Heading
+
+Pre-configured and with unique styles, the `ai-headings` are used for standardized, ai-related components.
+
 ```js
 ---
 type: example
 ---
-<Heading>Default Heading</Heading>
+<div style={{display: 'flex', flexDirection: 'column', gap: '24px'}}>
+ <Heading aiVariant="stacked">Nutrition Facts</Heading>
+ <Heading aiVariant="horizontal">Nutrition Facts</Heading>
+ <Heading aiVariant="iconOnly">Nutrition Facts</Heading>
+</div>
 ```
 
 ### Heading level
@@ -70,20 +78,19 @@ type: example
   <Heading>I inherit my color via the CSS cascade (default)</Heading>
   <Heading color="primary">I am primary color</Heading>
   <Heading color="secondary">I am secondary color</Heading>
-  <Heading color="ai">I am AI color</Heading>
 </div>
 ```
 
 ### Icons
 
-With the `renderIcon` prop, an icon can be rendered before the text. Only current use-case is for the `ai heading`
+With the `renderIcon` prop, an icon can be rendered before the text.
 
 ```js
 ---
 type: example
 ---
 <div>
- <Heading color="ai" renderIcon={<IconAiColoredSolid/>}>I am AI color with icon</Heading>
+ <Heading renderIcon={<IconAdminSolid/>}>I am heading with icon</Heading>
 </div>
 ```
 

package/src/Heading/index.tsx

@@ -31,6 +31,7 @@ import {
   callRenderProp
 } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
+import { IconAiColoredSolid } from '@instructure/ui-icons'
 
 import { withStyle } from '@instructure/emotion'
 
@@ -107,18 +108,58 @@ class Heading extends Component<HeadingProps> {
   }
 
   renderContent() {
-    const { children, renderIcon } = this.props
+    const { children, renderIcon, aiVariant } = this.props
 
-    if (renderIcon) {
+    if (renderIcon && !aiVariant) {
       return (
-        <>
+        <span css={[this.props.styles?.withIcon]} aria-hidden="true">
           {callRenderProp(renderIcon)}&nbsp;{children}
-        </>
+        </span>
+      )
+    }
+    if (aiVariant === 'stacked') {
+      return (
+        <span css={[this.props.styles?.withIcon]} aria-hidden="true">
+          <span css={this.props.styles?.igniteAIStacked}>
+            <IconAiColoredSolid />
+            <span css={this.props.styles?.igniteAI}>IgniteAI</span>
+          </span>
+          {children}
+        </span>
+      )
+    }
+    if (aiVariant === 'horizontal') {
+      return (
+        <span css={this.props.styles?.withIcon} aria-hidden="true">
+          <IconAiColoredSolid />
+          <span css={this.props.styles?.igniteAI}>IgniteAI</span>
+          {children}
+        </span>
+      )
+    }
+    if (aiVariant === 'iconOnly') {
+      return (
+        <span css={this.props.styles?.withIcon} aria-hidden="true">
+          <IconAiColoredSolid />
+          &nbsp;{children}
+        </span>
       )
     }
     return children
   }
 
+  //overriding default screen reader functionality is needed to read spans in h tags correctly
+  getAriaLabel() {
+    const { aiVariant, children, renderIcon } = this.props
+    if (aiVariant === 'stacked' || aiVariant === 'horizontal') {
+      return `IgniteAI, ${children}`
+    }
+    if (aiVariant === 'iconOnly' || renderIcon) {
+      return `${children}`
+    }
+    return undefined
+  }
+
   render() {
     const {
       border,
@@ -155,6 +196,7 @@ class Heading extends Component<HeadingProps> {
         as={ElementType}
         elementRef={this.handleRef}
         margin={margin}
+        aria-label={this.getAriaLabel()}
       >
         {this.renderContent()}
       </View>