@instructure/ui-color-picker 11.2.1-snapshot-9 → 11.3.1-snapshot-0

package/CHANGELOG.md

@@ -3,7 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.2.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v11.2.0...v11.2.1-snapshot-9) (2025-12-04)
+## [11.3.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v11.3.0...v11.3.1-snapshot-0) (2026-01-15)
+
+
+### Features
+
+* **ui-color-picker:** add new labelLevel prop to set heading level in ColorContrast ([06c9e79](https://github.com/instructure/instructure-ui/commit/06c9e79fc87c31da4ca8eff61e93094aa09c8be5))
+
+
+
+
+
+# [11.3.0](https://github.com/instructure/instructure-ui/compare/v11.2.0...v11.3.0) (2026-01-12)
 
 
 ### Bug Fixes

package/es/ColorContrast/index.js

@@ -29,6 +29,7 @@ import { error } from '@instructure/console';
 import { contrastWithAlpha, validateContrast } from '@instructure/ui-color-utils';
 import { withStyle } from '@instructure/emotion';
 import { Text } from '@instructure/ui-text';
+import { Heading } from '@instructure/ui-heading';
 import { Pill } from '@instructure/ui-pill';
 import ColorIndicator from '../ColorIndicator';
 import { allowedProps } from './props';
@@ -158,6 +159,7 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     const _this$props9 = this.props,
       styles = _this$props9.styles,
       label = _this$props9.label,
+      labelLevel = _this$props9.labelLevel,
       normalTextLabel = _this$props9.normalTextLabel,
       largeTextLabel = _this$props9.largeTextLabel,
       graphicsTextLabel = _this$props9.graphicsTextLabel;
@@ -173,7 +175,11 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       "data-cid": "ColorContrast",
       children: [_jsx("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.label,
-        children: _jsx(Text, {
+        children: labelLevel ? _jsx(Heading, {
+          as: labelLevel,
+          level: "reset",
+          children: label
+        }) : _jsx(Text, {
           weight: "bold",
           as: "div",
           children: label

package/es/ColorContrast/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['elementRef', 'failureLabel', 'firstColor', 'firstColorLabel', 'graphicsTextLabel', 'withoutColorPreview', 'label', 'largeTextLabel', 'normalTextLabel', 'secondColor', 'secondColorLabel', 'successLabel', 'onContrastChange', 'validationLevel'];
+const allowedProps = ['elementRef', 'failureLabel', 'firstColor', 'firstColorLabel', 'graphicsTextLabel', 'withoutColorPreview', 'label', 'labelLevel', 'largeTextLabel', 'normalTextLabel', 'secondColor', 'secondColorLabel', 'successLabel', 'onContrastChange', 'validationLevel'];
 export { allowedProps };

package/es/ColorContrast/styles.js

@@ -32,7 +32,7 @@
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = componentTheme => {
+const generateStyle = (componentTheme, props) => {
   const statusDescriptionStyle = pass => ({
     label: pass ? 'colorContrast__successDescription' : 'colorContrast__failureDescription',
     flex: 1,
@@ -90,7 +90,10 @@ const generateStyle = componentTheme => {
     },
     label: {
       label: 'colorContrast__label',
-      marginBottom: componentTheme.labelBottomMargin
+      marginBottom: componentTheme.labelBottomMargin,
+      ...(props.labelLevel && {
+        fontWeight: 'bold'
+      })
     }
   };
 };

package/lib/ColorContrast/index.js

@@ -12,6 +12,7 @@ var _contrastWithAlpha = require("@instructure/ui-color-utils/lib/contrastWithAl
 var _validateContrast = require("@instructure/ui-color-utils/lib/validateContrast.js");
 var _emotion = require("@instructure/emotion");
 var _Text = require("@instructure/ui-text/lib/Text");
+var _Heading = require("@instructure/ui-heading/lib/Heading");
 var _Pill = require("@instructure/ui-pill/lib/Pill");
 var _ColorIndicator = _interopRequireDefault(require("../ColorIndicator"));
 var _props = require("./props");
@@ -164,6 +165,7 @@ let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyle)(_sty
     const _this$props9 = this.props,
       styles = _this$props9.styles,
       label = _this$props9.label,
+      labelLevel = _this$props9.labelLevel,
       normalTextLabel = _this$props9.normalTextLabel,
       largeTextLabel = _this$props9.largeTextLabel,
       graphicsTextLabel = _this$props9.graphicsTextLabel;
@@ -179,7 +181,11 @@ let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyle)(_sty
       "data-cid": "ColorContrast",
       children: [(0, _jsxRuntime.jsx)("div", {
         css: styles === null || styles === void 0 ? void 0 : styles.label,
-        children: (0, _jsxRuntime.jsx)(_Text.Text, {
+        children: labelLevel ? (0, _jsxRuntime.jsx)(_Heading.Heading, {
+          as: labelLevel,
+          level: "reset",
+          children: label
+        }) : (0, _jsxRuntime.jsx)(_Text.Text, {
           weight: "bold",
           as: "div",
           children: label

package/lib/ColorContrast/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['elementRef', 'failureLabel', 'firstColor', 'firstColorLabel', 'graphicsTextLabel', 'withoutColorPreview', 'label', 'largeTextLabel', 'normalTextLabel', 'secondColor', 'secondColorLabel', 'successLabel', 'onContrastChange', 'validationLevel'];
+const allowedProps = exports.allowedProps = ['elementRef', 'failureLabel', 'firstColor', 'firstColorLabel', 'graphicsTextLabel', 'withoutColorPreview', 'label', 'labelLevel', 'largeTextLabel', 'normalTextLabel', 'secondColor', 'secondColorLabel', 'successLabel', 'onContrastChange', 'validationLevel'];

package/lib/ColorContrast/styles.js

@@ -38,7 +38,7 @@ exports.default = void 0;
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = componentTheme => {
+const generateStyle = (componentTheme, props) => {
   const statusDescriptionStyle = pass => ({
     label: pass ? 'colorContrast__successDescription' : 'colorContrast__failureDescription',
     flex: 1,
@@ -96,7 +96,10 @@ const generateStyle = componentTheme => {
     },
     label: {
       label: 'colorContrast__label',
-      marginBottom: componentTheme.labelBottomMargin
+      marginBottom: componentTheme.labelBottomMargin,
+      ...(props.labelLevel && {
+        fontWeight: 'bold'
+      })
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-color-picker",
-  "version": "11.2.1-snapshot-9",
+  "version": "11.3.1-snapshot-0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,34 +15,35 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.2.1-snapshot-9",
-    "@instructure/ui-a11y-content": "11.2.1-snapshot-9",
-    "@instructure/shared-types": "11.2.1-snapshot-9",
-    "@instructure/ui-buttons": "11.2.1-snapshot-9",
-    "@instructure/emotion": "11.2.1-snapshot-9",
-    "@instructure/ui-color-utils": "11.2.1-snapshot-9",
-    "@instructure/ui-dom-utils": "11.2.1-snapshot-9",
-    "@instructure/ui-drilldown": "11.2.1-snapshot-9",
-    "@instructure/ui-form-field": "11.2.1-snapshot-9",
-    "@instructure/ui-icons": "11.2.1-snapshot-9",
-    "@instructure/ui-popover": "11.2.1-snapshot-9",
-    "@instructure/ui-react-utils": "11.2.1-snapshot-9",
-    "@instructure/ui-pill": "11.2.1-snapshot-9",
-    "@instructure/ui-text-input": "11.2.1-snapshot-9",
-    "@instructure/ui-text": "11.2.1-snapshot-9",
-    "@instructure/ui-utils": "11.2.1-snapshot-9",
-    "@instructure/ui-themes": "11.2.1-snapshot-9",
-    "@instructure/ui-tooltip": "11.2.1-snapshot-9",
-    "@instructure/ui-view": "11.2.1-snapshot-9"
+    "@instructure/console": "11.3.1-snapshot-0",
+    "@instructure/emotion": "11.3.1-snapshot-0",
+    "@instructure/shared-types": "11.3.1-snapshot-0",
+    "@instructure/ui-buttons": "11.3.1-snapshot-0",
+    "@instructure/ui-a11y-content": "11.3.1-snapshot-0",
+    "@instructure/ui-color-utils": "11.3.1-snapshot-0",
+    "@instructure/ui-drilldown": "11.3.1-snapshot-0",
+    "@instructure/ui-dom-utils": "11.3.1-snapshot-0",
+    "@instructure/ui-form-field": "11.3.1-snapshot-0",
+    "@instructure/ui-heading": "11.3.1-snapshot-0",
+    "@instructure/ui-pill": "11.3.1-snapshot-0",
+    "@instructure/ui-popover": "11.3.1-snapshot-0",
+    "@instructure/ui-icons": "11.3.1-snapshot-0",
+    "@instructure/ui-react-utils": "11.3.1-snapshot-0",
+    "@instructure/ui-text": "11.3.1-snapshot-0",
+    "@instructure/ui-text-input": "11.3.1-snapshot-0",
+    "@instructure/ui-themes": "11.3.1-snapshot-0",
+    "@instructure/ui-tooltip": "11.3.1-snapshot-0",
+    "@instructure/ui-utils": "11.3.1-snapshot-0",
+    "@instructure/ui-view": "11.3.1-snapshot-0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.2.1-snapshot-9",
-    "@instructure/ui-babel-preset": "11.2.1-snapshot-9",
-    "@instructure/ui-scripts": "11.2.1-snapshot-9"
+    "@instructure/ui-babel-preset": "11.3.1-snapshot-0",
+    "@instructure/ui-scripts": "11.3.1-snapshot-0",
+    "@instructure/ui-axe-check": "11.3.1-snapshot-0"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/ColorContrast/index.tsx

@@ -33,6 +33,7 @@ import {
 import { withStyle } from '@instructure/emotion'
 
 import { Text } from '@instructure/ui-text'
+import { Heading } from '@instructure/ui-heading'
 import { Pill } from '@instructure/ui-pill'
 
 import ColorIndicator from '../ColorIndicator'
@@ -191,6 +192,7 @@ class ColorContrast extends Component<ColorContrastProps, ColorContrastState> {
     const {
       styles,
       label,
+      labelLevel,
       normalTextLabel,
       largeTextLabel,
       graphicsTextLabel
@@ -211,9 +213,15 @@ class ColorContrast extends Component<ColorContrastProps, ColorContrastState> {
         data-cid="ColorContrast"
       >
         <div css={styles?.label}>
-          <Text weight="bold" as="div">
-            {label}
-          </Text>
+          {labelLevel ? (
+            <Heading as={labelLevel} level="reset">
+              {label}
+            </Heading>
+          ) : (
+            <Text weight="bold" as="div">
+              {label}
+            </Text>
+          )}
         </div>
         <Text size="x-large">{contrast}:1</Text>
         {this.renderPreview()}

package/src/ColorContrast/props.ts

@@ -22,12 +22,15 @@
  * SOFTWARE.
  */
 
+import React from 'react'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type {
   OtherHTMLAttributes,
   ColorContrastTheme
 } from '@instructure/shared-types'
 
+type HeadingLevel<U extends keyof React.JSX.IntrinsicElements> = U
+
 type ColorContrastOwnProps = {
   /**
    * Provides a reference to the component's underlying html element.
@@ -53,6 +56,10 @@ type ColorContrastOwnProps = {
    * Label of the component
    */
   label: string
+  /**
+   * The heading level for the label. If provided, the label will be rendered as a `<Heading />` instead of `<Text />`.
+   */
+  labelLevel?: HeadingLevel<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>
   /**
    * Text of the second check (Suggested english text: Large text)
    */
@@ -154,6 +161,7 @@ const allowedProps: AllowedPropKeys = [
   'graphicsTextLabel',
   'withoutColorPreview',
   'label',
+  'labelLevel',
   'largeTextLabel',
   'normalTextLabel',
   'secondColor',

package/src/ColorContrast/styles.ts

@@ -23,6 +23,7 @@
  */
 
 import type { ColorContrastTheme } from '@instructure/shared-types'
+import type { ColorContrastProps } from './props'
 /**
  * ---
  * private: true
@@ -33,7 +34,10 @@ import type { ColorContrastTheme } from '@instructure/shared-types'
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme: ColorContrastTheme) => {
+const generateStyle = (
+  componentTheme: ColorContrastTheme,
+  props: ColorContrastProps
+) => {
   const statusDescriptionStyle = (pass: boolean) => ({
     label: pass
       ? 'colorContrast__successDescription'
@@ -94,7 +98,8 @@ const generateStyle = (componentTheme: ColorContrastTheme) => {
     },
     label: {
       label: 'colorContrast__label',
-      marginBottom: componentTheme.labelBottomMargin
+      marginBottom: componentTheme.labelBottomMargin,
+      ...(props.labelLevel && { fontWeight: 'bold' })
     }
   }
 }

package/src/ColorPicker/README.md

@@ -218,7 +218,7 @@ type: example
               contrastAgainst,
               renderContrastErrorMessage: (contrast, minContrast) => [
                 {
-                  type: 'error',
+                  type: 'newError',
                   text: `Not high enough contrast. Minimum required is ${minContrast}:1, current is ${contrast}:1`
                 }
               ]
@@ -226,13 +226,13 @@ type: example
           }
           renderInvalidColorMessage={(hexCode) => [
             {
-              type: 'error',
+              type: 'newError',
               text: `Not valid hex color. It should be either 3, 6 or 8 character long.`
             }
           ]}
           renderIsRequiredMessage={() => [
             {
-              type: 'error',
+              type: 'newError',
               text: `This field is required, please enter a valid hex code`
             }
           ]}
@@ -334,17 +334,17 @@ type: example
         { type: "success", text: "I am a contrast success message" },
       ],
       renderContrastErrorMessage: () => [
-        { type: "error", text: "I am a contrast warning message" },
+        { type: "newError", text: "I am a contrast warning message" },
       ],
     }}
     renderMessages={() => [
       { type: "hint", text: "I can display anything, at any time" },
     ]}
     renderInvalidColorMessage={() => [
-      { type: "error", text: "I am an invalid color message" },
+      { type: "newError", text: "I am an invalid color message" },
     ]}
     renderIsRequiredMessage={() => [
-      { type: "error", text: "I am a required message" },
+      { type: "newError", text: "I am a required message" },
     ]}
     placeholderText="Enter HEX"
   />

package/tsconfig.build.json

@@ -18,6 +18,7 @@
     { "path": "../ui-buttons/tsconfig.build.json" },
     { "path": "../ui-color-utils/tsconfig.build.json" },
     { "path": "../ui-form-field/tsconfig.build.json" },
+    { "path": "../ui-heading/tsconfig.build.json" },
     { "path": "../ui-icons/tsconfig.build.json" },
     { "path": "../ui-pill/tsconfig.build.json" },
     { "path": "../ui-popover/tsconfig.build.json" },