@rocket.chat/fuselage 0.90.0 → 0.91.0

package/dist/fuselage.development.css

@@ -1591,6 +1591,20 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   align-items: center;
   flex-shrink: 0;
 }
+.rcx-button--with-badge {
+  position: relative;
+  overflow: visible;
+}
+.rcx-button__badge {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  display: flex;
+  transform: translate(30%, -30%);
+}
+.rcx-button__badge:dir(rtl) {
+  transform: translate(-30%, -30%);
+}
 .rcx-button--icon {
   color: var(--rcx-color-button-icon-color, var(--rcx-button-secondary-color, var(--rcx-color-button-font-on-secondary, #1f2329)));
   border-width: var(--rcx-button-border-width, 1px);
@@ -5477,7 +5491,7 @@ a:where(:active):where(:not(.rcx-button)), .rcx-tag--clickable:where(:active), .
   cursor: not-allowed;
 }
 .rcx-sidebar-collapse-group__bar:has(.rcx-sidebar-collapse-group__bar-button[tabindex]):hover, .rcx-sidebar-collapse-group__bar:has(.rcx-sidebar-collapse-group__bar-button[tabindex]).hover, .rcx-sidebar-collapse-group__bar:has(.rcx-sidebar-collapse-group__bar-button[tabindex]).is-hovered {
-  background-color: var(--rcx-color-surface-tint, #f7f8fa);
+  background-color: var(--rcx-color-surface-hover, #f2f3f5);
 }
 .rcx-sidebar-collapse-group__bar:has(.rcx-sidebar-collapse-group__bar-button:focus-visible) {
   box-shadow: inset 0 0 0 2px var(--rcx-color-stroke-highlight, #156ff5);

package/dist/fuselage.development.js

@@ -2348,7 +2348,7 @@ if (process.env.NODE_ENV !== "production") (function() {
 	var getPressedClass = (variant) => {
 		return [`rcx-button--icon-${[variant].filter(Boolean).join("-")}-pressed`];
 	};
-	function IconButton({ icon, primary, info, secondary, danger, warning, success, mini, large, tiny, small, medium, pressed, children, ...props }) {
+	function IconButton({ icon, badge, primary, info, secondary, danger, warning, success, mini, large, tiny, small, medium, pressed, children, ...props }) {
 		const variant = (0, react.useMemo)(() => secondary && danger && "secondary-danger" || secondary && warning && "secondary-warning" || secondary && success && "secondary-success" || secondary && info && "secondary-info" || info && "info" || success && "success" || warning && "warning" || danger && "danger" || primary && "secondary-info" || secondary && "secondary" || "", [
 			danger,
 			info,
@@ -2381,11 +2381,20 @@ if (process.env.NODE_ENV !== "production") (function() {
 			...kindAndVariantProps,
 			...getSizeClass(),
 			"rcx-button--icon-pressed": pressed,
+			"rcx-button--with-badge": Boolean(badge),
 			...props,
-			children: [(0, react.isValidElement)(icon) ? icon : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-				name: icon,
-				size: getIconSize()
-			}), children]
+			children: [
+				(0, react.isValidElement)(icon) ? icon : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					name: icon,
+					size: getIconSize()
+				}),
+				Boolean(badge) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "rcx-button__badge",
+					"aria-hidden": "true",
+					children: badge
+				}),
+				children
+			]
 		});
 	}
 	//#endregion