Cleaning up props and types on Alert

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.changeset/plenty-monkeys-share.md

@@ -2,6 +2,13 @@
 '@backstage/ui': patch
 ---
 
-Added new `Alert` component with support for status variants, icons, loading states, and custom actions.
+Added new `Alert` component with support for status variants (info, success, warning, danger), icons, loading states, and custom actions.
+
+Updated status color tokens for improved contrast and consistency across light and dark themes:
+
+- Added new `--bui-bg-info` and `--bui-fg-info` tokens for info status
+- Updated `--bui-bg-danger`, `--bui-fg-danger` tokens
+- Updated `--bui-bg-warning`, `--bui-fg-warning` tokens
+- Updated `--bui-bg-success`, `--bui-fg-success` tokens
 
 **Affected components**: Alert

packages/ui/src/components/Alert/Alert.module.css

@@ -25,7 +25,6 @@
     gap: var(--bui-space-6);
     padding: var(--bui-space-3) var(--bui-space-3);
     border-radius: var(--bui-radius-3);
-    border: 1px solid var(--alert-border);
     font-family: var(--bui-font-regular);
     font-size: var(--bui-font-size-3);
     line-height: 1.5;

packages/ui/src/components/Alert/Alert.stories.tsx

@@ -145,12 +145,12 @@ export const CustomIcon = meta.story({
     <Flex direction="column" gap="4">
       <Alert
         status="info"
-        icon={<RiCloudLine />}
+        icon={<RiCloudLine aria-hidden="true" />}
         title="This alert uses a custom cloud icon instead of the default info icon."
       />
       <Alert
         status="success"
-        icon={<RiCloudLine />}
+        icon={<RiCloudLine aria-hidden="true" />}
         title="Custom icons work with any status variant."
       />
     </Flex>

packages/ui/src/components/Alert/Alert.tsx

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import { forwardRef, Ref, isValidElement, ReactElement } from 'react';
 import { ProgressBar } from 'react-aria-components';
 import {
@@ -107,14 +105,14 @@ export const Alert = forwardRef(
       if (icon === true) {
         switch (status) {
           case 'success':
-            return <RiCheckLine />;
+            return <RiCheckLine aria-hidden="true" />;
           case 'warning':
-            return <RiErrorWarningLine />;
+            return <RiErrorWarningLine aria-hidden="true" />;
           case 'danger':
-            return <RiAlertLine />;
+            return <RiAlertLine aria-hidden="true" />;
           case 'info':
           default:
-            return <RiInformationLine />;
+            return <RiInformationLine aria-hidden="true" />;
         }
       }
 
@@ -129,9 +127,9 @@ export const Alert = forwardRef(
         className={classes.root}
         ref={ref}
         style={{ ...style, ...utilityStyle }}
-        data-has-description={description ? 'true' : 'false'}
         {...dataAttributes}
         {...restProps}
+        data-has-description={description ? 'true' : 'false'}
       >
         <div className={classes.contentWrapper}>
           {loading ? (

packages/ui/src/components/Alert/types.ts

@@ -18,7 +18,7 @@ import type { ReactElement, ReactNode, CSSProperties } from 'react';
 import type {
   ContainerSurfaceProps,
   Responsive,
-  SpaceProps,
+  MarginProps,
 } from '../../types';
 
 /** @public */
@@ -38,4 +38,4 @@ export type AlertOwnProps = ContainerSurfaceProps & {
  *
  * @public
  */
-export interface AlertProps extends SpaceProps, AlertOwnProps {}
+export interface AlertProps extends MarginProps, AlertOwnProps {}

packages/ui/src/types.ts

@@ -92,7 +92,7 @@ export type Columns =
   | 'auto';
 
 /** @public */
-export interface SpaceProps {
+export interface MarginProps {
   m?: Responsive<Space>;
   mb?: Responsive<Space>;
   ml?: Responsive<Space>;
@@ -100,6 +100,10 @@ export interface SpaceProps {
   mt?: Responsive<Space>;
   mx?: Responsive<Space>;
   my?: Responsive<Space>;
+}
+
+/** @public */
+export interface PaddingProps {
   p?: Responsive<Space>;
   pb?: Responsive<Space>;
   pl?: Responsive<Space>;
@@ -109,6 +113,9 @@ export interface SpaceProps {
   py?: Responsive<Space>;
 }
 
+/** @public */
+export interface SpaceProps extends MarginProps, PaddingProps {}
+
 /** @public */
 export type TextVariants =
   | 'title-large'