@instructure/ui-avatar 11.7.4-snapshot-135 → 11.7.4-snapshot-142

package/CHANGELOG.md

@@ -3,12 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-135](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-135) (2026-07-24)
+## [11.7.4-snapshot-142](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-142) (2026-07-24)
+
+
+### Bug Fixes
+
+* **many:** do not allow javascript: and data: hrefs ([4a0ac03](https://github.com/instructure/instructure-ui/commit/4a0ac038c6a4102646e04d27c1c3251f97367822))
 
 
 ### Features
 
 * **many:** support current spacing tokens in the margin prop for v2 components ([1b47c5f](https://github.com/instructure/instructure-ui/commit/1b47c5f23eaa60b532cdfd53c39bd71f0cf51aaa))
+* **ui-codemods:** update tokens and move theme.componentOverrides to themeOverride.components ([7f94400](https://github.com/instructure/instructure-ui/commit/7f94400b25e32effc7b748d4c77ced7ecb1a70ef))
 
 
 

package/es/Avatar/v1/styles.js

@@ -22,6 +22,9 @@
  * SOFTWARE.
  */
 
+import { safeHref } from '@instructure/ui-utils';
+// Escape characters that could break out of a CSS single-quoted url() string.
+const escapeCssUrl = value => value.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/[\r\n]/g, '');
 /**
  * ---
  * private: true
@@ -41,6 +44,8 @@ const generateStyle = (componentTheme, params) => {
     src,
     showBorder
   } = params;
+  const safeSrc = safeHref(src, 'img', 'src');
+  const backgroundImageValue = safeSrc ? `url('${escapeCssUrl(safeSrc)}')` : undefined;
 
   // TODO: this is a temporary solution and should be revised on component update
   // NOTE: this is needed due to design changes. The size of the component is calculated from "em" which means it is
@@ -187,7 +192,7 @@ const generateStyle = (componentTheme, params) => {
       ...sizeStyles[size],
       ...shapeStyles[shape],
       ...(loaded ? {
-        backgroundImage: `url('${src}')`,
+        backgroundImage: backgroundImageValue,
         ...(showBorder !== 'always' && {
           border: 0
         }),

package/es/Avatar/v2/styles.js

@@ -146,6 +146,7 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
       color: hasInverseColor ? componentTheme.textOnColor : colorVariants[color].text,
       borderColor: componentTheme.borderColor,
       fontWeight: componentTheme.fontWeight,
+      fontFamily: componentTheme.fontFamily,
       overflow: 'hidden',
       // TODO handle the merging on tokens inside the util
       margin: calcSpacingFromShorthand(margin, {

package/lib/Avatar/v1/styles.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _safeHref = require("@instructure/ui-utils/lib/safeHref.js");
 /*
  * The MIT License (MIT)
  *
@@ -28,6 +29,8 @@ exports.default = void 0;
  * SOFTWARE.
  */
 
+// Escape characters that could break out of a CSS single-quoted url() string.
+const escapeCssUrl = value => value.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/[\r\n]/g, '');
 /**
  * ---
  * private: true
@@ -47,6 +50,8 @@ const generateStyle = (componentTheme, params) => {
     src,
     showBorder
   } = params;
+  const safeSrc = (0, _safeHref.safeHref)(src, 'img', 'src');
+  const backgroundImageValue = safeSrc ? `url('${escapeCssUrl(safeSrc)}')` : undefined;
 
   // TODO: this is a temporary solution and should be revised on component update
   // NOTE: this is needed due to design changes. The size of the component is calculated from "em" which means it is
@@ -193,7 +198,7 @@ const generateStyle = (componentTheme, params) => {
       ...sizeStyles[size],
       ...shapeStyles[shape],
       ...(loaded ? {
-        backgroundImage: `url('${src}')`,
+        backgroundImage: backgroundImageValue,
         ...(showBorder !== 'always' && {
           border: 0
         }),

package/lib/Avatar/v2/styles.js

@@ -152,6 +152,7 @@ const generateStyle = (componentTheme, params, sharedTokens) => {
       color: hasInverseColor ? componentTheme.textOnColor : colorVariants[color].text,
       borderColor: componentTheme.borderColor,
       fontWeight: componentTheme.fontWeight,
+      fontFamily: componentTheme.fontFamily,
       overflow: 'hidden',
       // TODO handle the merging on tokens inside the util
       margin: (0, _emotion.calcSpacingFromShorthand)(margin, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-avatar",
-  "version": "11.7.4-snapshot-135",
+  "version": "11.7.4-snapshot-142",
   "description": "An image or letters that represents a user.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,20 +15,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/emotion": "11.7.4-snapshot-135",
-    "@instructure/shared-types": "11.7.4-snapshot-135",
-    "@instructure/ui-icons": "11.7.4-snapshot-135",
-    "@instructure/ui-themes": "11.7.4-snapshot-135",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-135",
-    "@instructure/ui-view": "11.7.4-snapshot-135"
+    "@instructure/emotion": "11.7.4-snapshot-142",
+    "@instructure/ui-icons": "11.7.4-snapshot-142",
+    "@instructure/ui-themes": "11.7.4-snapshot-142",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-142",
+    "@instructure/shared-types": "11.7.4-snapshot-142",
+    "@instructure/ui-utils": "11.7.4-snapshot-142",
+    "@instructure/ui-view": "11.7.4-snapshot-142"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "vitest": "^4.1.9",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-135",
-    "@instructure/ui-axe-check": "11.7.4-snapshot-135",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-135"
+    "@instructure/ui-axe-check": "11.7.4-snapshot-142",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-142",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-142"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Avatar/v1/styles.ts

@@ -23,8 +23,16 @@
  */
 
 import type { AvatarTheme } from '@instructure/shared-types'
+import { safeHref } from '@instructure/ui-utils'
 import { AvatarProps, AvatarStyle } from './props.js'
 
+// Escape characters that could break out of a CSS single-quoted url() string.
+const escapeCssUrl = (value: string) =>
+  value
+    .replace(/\\/g, '\\\\')
+    .replace(/'/g, "\\'")
+    .replace(/[\r\n]/g, '')
+
 type StyleParams = {
   loaded: boolean
   size: AvatarProps['size']
@@ -51,6 +59,11 @@ const generateStyle = (
   const { loaded, size, color, hasInverseColor, shape, src, showBorder } =
     params
 
+  const safeSrc = safeHref(src, 'img', 'src')
+  const backgroundImageValue = safeSrc
+    ? `url('${escapeCssUrl(safeSrc)}')`
+    : undefined
+
   // TODO: this is a temporary solution and should be revised on component update
   // NOTE: this is needed due to design changes. The size of the component is calculated from "em" which means it is
   // tied to the fontSize. The font sizes changed for the icons, which meant that the container (component) size would've
@@ -209,7 +222,7 @@ const generateStyle = (
       ...shapeStyles[shape!],
       ...(loaded
         ? {
-            backgroundImage: `url('${src}')`,
+            backgroundImage: backgroundImageValue,
             ...(showBorder !== 'always' && {
               border: 0
             }),

package/src/Avatar/v2/styles.ts

@@ -173,6 +173,7 @@ const generateStyle = (
         : colorVariants[color!].text,
       borderColor: componentTheme.borderColor,
       fontWeight: componentTheme.fontWeight,
+      fontFamily: componentTheme.fontFamily,
       overflow: 'hidden',
       // TODO handle the merging on tokens inside the util
       margin: calcSpacingFromShorthand(margin, {

package/tsconfig.build.json

@@ -33,6 +33,7 @@
     },
     {
       "path": "../ui-icons/tsconfig.build.json"
-    }
+    },
+    { "path": "../ui-utils/tsconfig.build.json" }
   ]
 }