@instructure/ui-alerts 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)
+
+
+### Bug Fixes
+
+* **ui-alerts:** fix Alert border radius override and add new prop for custom icon ([78ef567](https://github.com/instructure/instructure-ui/commit/78ef56729411333e4504c7080460df40ff9e718e))
+
+
+
+
+
 # [10.21.0](https://github.com/instructure/instructure-ui/compare/v10.20.1...v10.21.0) (2025-06-27)
 
 **Note:** Version bump only for package @instructure/ui-alerts

package/es/Alert/index.js

@@ -170,18 +170,21 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
     }
   }
   renderIcon() {
-    var _this$props$styles;
-    const Icon = this.variantUI[this.props.variant];
+    const _this$props3 = this.props,
+      renderCustomIcon = _this$props3.renderCustomIcon,
+      variant = _this$props3.variant,
+      styles = _this$props3.styles;
+    const Icon = this.variantUI[variant];
     return _jsx("div", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon,
-      children: _jsx(Icon, {})
+      css: styles === null || styles === void 0 ? void 0 : styles.icon,
+      children: renderCustomIcon ? callRenderProp(renderCustomIcon) : _jsx(Icon, {})
     });
   }
   renderCloseButton() {
-    var _this$props$styles2;
+    var _this$props$styles;
     const closeButtonLabel = this.props.renderCloseButtonLabel && callRenderProp(this.props.renderCloseButtonLabel);
     return closeButtonLabel ? _jsx("div", {
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.closeButton,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.closeButton,
       children: _jsx(CloseButton, {
         onClick: this.close,
         size: "small",
@@ -192,13 +195,13 @@ let Alert = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gene
   renderAlert() {
     // prevent onDismiss from being passed to the View component
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const _this$props3 = this.props,
-      margin = _this$props3.margin,
-      styles = _this$props3.styles,
-      children = _this$props3.children,
-      onDismiss = _this$props3.onDismiss,
-      variantScreenReaderLabel = _this$props3.variantScreenReaderLabel,
-      props = _objectWithoutProperties(_this$props3, _excluded);
+    const _this$props4 = this.props,
+      margin = _this$props4.margin,
+      styles = _this$props4.styles,
+      children = _this$props4.children,
+      onDismiss = _this$props4.onDismiss,
+      variantScreenReaderLabel = _this$props4.variantScreenReaderLabel,
+      props = _objectWithoutProperties(_this$props4, _excluded);
     return _jsxs(View, {
       ...passthroughProps({
         ...props

package/es/Alert/props.js

@@ -37,7 +37,8 @@ const propTypes = {
   transition: PropTypes.oneOf(['none', 'fade']),
   open: PropTypes.bool,
   hasShadow: PropTypes.bool,
-  variantScreenReaderLabel: PropTypes.string
+  variantScreenReaderLabel: PropTypes.string,
+  renderCustomIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
-const allowedProps = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow'];
+const allowedProps = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow', 'renderCustomIcon'];
 export { propTypes, allowedProps };

package/es/Alert/styles.js

@@ -98,6 +98,9 @@ const generateStyle = (componentTheme, props) => {
       justifyContent: 'center',
       fontSize: '1.125rem',
       borderRight: `${componentTheme.borderWidth} ${componentTheme.borderStyle}`,
+      margin: -1,
+      borderStartStartRadius: componentTheme.borderRadius,
+      borderEndStartRadius: componentTheme.borderRadius,
       ...variantStyles[variant].icon
     },
     closeButton: {

package/lib/Alert/index.js

@@ -181,18 +181,21 @@ let Alert = exports.Alert = (_dec = (0, _withDeterministicId.withDeterministicId
     }
   }
   renderIcon() {
-    var _this$props$styles;
-    const Icon = this.variantUI[this.props.variant];
+    const _this$props3 = this.props,
+      renderCustomIcon = _this$props3.renderCustomIcon,
+      variant = _this$props3.variant,
+      styles = _this$props3.styles;
+    const Icon = this.variantUI[variant];
     return (0, _jsxRuntime.jsx)("div", {
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon,
-      children: (0, _jsxRuntime.jsx)(Icon, {})
+      css: styles === null || styles === void 0 ? void 0 : styles.icon,
+      children: renderCustomIcon ? (0, _callRenderProp.callRenderProp)(renderCustomIcon) : (0, _jsxRuntime.jsx)(Icon, {})
     });
   }
   renderCloseButton() {
-    var _this$props$styles2;
+    var _this$props$styles;
     const closeButtonLabel = this.props.renderCloseButtonLabel && (0, _callRenderProp.callRenderProp)(this.props.renderCloseButtonLabel);
     return closeButtonLabel ? (0, _jsxRuntime.jsx)("div", {
-      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.closeButton,
+      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.closeButton,
       children: (0, _jsxRuntime.jsx)(_CloseButton.CloseButton, {
         onClick: this.close,
         size: "small",
@@ -203,13 +206,13 @@ let Alert = exports.Alert = (_dec = (0, _withDeterministicId.withDeterministicId
   renderAlert() {
     // prevent onDismiss from being passed to the View component
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const _this$props3 = this.props,
-      margin = _this$props3.margin,
-      styles = _this$props3.styles,
-      children = _this$props3.children,
-      onDismiss = _this$props3.onDismiss,
-      variantScreenReaderLabel = _this$props3.variantScreenReaderLabel,
-      props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    const _this$props4 = this.props,
+      margin = _this$props4.margin,
+      styles = _this$props4.styles,
+      children = _this$props4.children,
+      onDismiss = _this$props4.onDismiss,
+      variantScreenReaderLabel = _this$props4.variantScreenReaderLabel,
+      props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
     return (0, _jsxRuntime.jsxs)(_View.View, {
       ...(0, _passthroughProps.passthroughProps)({
         ...props

package/lib/Alert/props.js

@@ -44,6 +44,7 @@ const propTypes = exports.propTypes = {
   transition: _propTypes.default.oneOf(['none', 'fade']),
   open: _propTypes.default.bool,
   hasShadow: _propTypes.default.bool,
-  variantScreenReaderLabel: _propTypes.default.string
+  variantScreenReaderLabel: _propTypes.default.string,
+  renderCustomIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
 };
-const allowedProps = exports.allowedProps = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow'];
+const allowedProps = exports.allowedProps = ['children', 'variant', 'margin', 'liveRegion', 'liveRegionPoliteness', 'isLiveRegionAtomic', 'screenReaderOnly', 'timeout', 'renderCloseButtonLabel', 'onDismiss', 'transition', 'open', 'hasShadow', 'renderCustomIcon'];

package/lib/Alert/styles.js

@@ -104,6 +104,9 @@ const generateStyle = (componentTheme, props) => {
       justifyContent: 'center',
       fontSize: '1.125rem',
       borderRight: `${componentTheme.borderWidth} ${componentTheme.borderStyle}`,
+      margin: -1,
+      borderStartStartRadius: componentTheme.borderRadius,
+      borderEndStartRadius: componentTheme.borderRadius,
       ...variantStyles[variant].icon
     },
     closeButton: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-alerts",
-  "version": "10.21.0",
+  "version": "10.21.1-snapshot-1",
   "description": "An alert component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,10 +23,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.21.0",
-    "@instructure/ui-babel-preset": "10.21.0",
-    "@instructure/ui-color-utils": "10.21.0",
-    "@instructure/ui-scripts": "10.21.0",
+    "@instructure/ui-axe-check": "10.21.1-snapshot-1",
+    "@instructure/ui-babel-preset": "10.21.1-snapshot-1",
+    "@instructure/ui-color-utils": "10.21.1-snapshot-1",
+    "@instructure/ui-scripts": "10.21.1-snapshot-1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.6.1",
@@ -34,16 +34,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "10.21.0",
-    "@instructure/emotion": "10.21.0",
-    "@instructure/shared-types": "10.21.0",
-    "@instructure/ui-a11y-content": "10.21.0",
-    "@instructure/ui-buttons": "10.21.0",
-    "@instructure/ui-icons": "10.21.0",
-    "@instructure/ui-motion": "10.21.0",
-    "@instructure/ui-react-utils": "10.21.0",
-    "@instructure/ui-themes": "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-a11y-content": "10.21.1-snapshot-1",
+    "@instructure/ui-buttons": "10.21.1-snapshot-1",
+    "@instructure/ui-icons": "10.21.1-snapshot-1",
+    "@instructure/ui-motion": "10.21.1-snapshot-1",
+    "@instructure/ui-react-utils": "10.21.1-snapshot-1",
+    "@instructure/ui-themes": "10.21.1-snapshot-1",
+    "@instructure/ui-view": "10.21.1-snapshot-1",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/Alert/index.tsx

@@ -237,10 +237,11 @@ class Alert extends Component<AlertProps, AlertState> {
   }
 
   renderIcon() {
-    const Icon = this.variantUI[this.props.variant!]
+    const { renderCustomIcon, variant, styles } = this.props
+    const Icon = this.variantUI[variant!]
     return (
-      <div css={this.props.styles?.icon}>
-        <Icon />
+      <div css={styles?.icon}>
+        {renderCustomIcon ? callRenderProp(renderCustomIcon) : <Icon />}
       </div>
     )
   }

package/src/Alert/props.ts

@@ -109,6 +109,11 @@ type AlertOwnProps = {
    * If the alert should have a shadow.
    */
   hasShadow: boolean
+
+  /**
+   * An icon, or function that returns an icon. Setting it will override the variant's icon.
+   */
+  renderCustomIcon?: Renderable
 }
 
 type PropKeys = keyof AlertOwnProps
@@ -137,7 +142,8 @@ const propTypes: PropValidators<PropKeys> = {
   transition: PropTypes.oneOf(['none', 'fade']),
   open: PropTypes.bool,
   hasShadow: PropTypes.bool,
-  variantScreenReaderLabel: PropTypes.string
+  variantScreenReaderLabel: PropTypes.string,
+  renderCustomIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -153,7 +159,8 @@ const allowedProps: AllowedPropKeys = [
   'onDismiss',
   'transition',
   'open',
-  'hasShadow'
+  'hasShadow',
+  'renderCustomIcon'
 ]
 
 type AlertState = {

package/src/Alert/styles.ts

@@ -95,6 +95,9 @@ const generateStyle = (
       justifyContent: 'center',
       fontSize: '1.125rem',
       borderRight: `${componentTheme.borderWidth} ${componentTheme.borderStyle}`,
+      margin: -1,
+      borderStartStartRadius: componentTheme.borderRadius,
+      borderEndStartRadius: componentTheme.borderRadius,
       ...variantStyles[variant!].icon
     },
     closeButton: {