Merge pull request #7842 from backstage/samiramkr/add-warning

add warning to dismissableBanner

.changeset/dry-spies-cover.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/theme': patch
+---
+
+Will Add warning variant to `DismissableBanner` component.

packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx

@@ -105,3 +105,14 @@ export const Fixed = () => (
     </ApiProvider>
   </div>
 );
+export const Warning = () => (
+  <div style={containerStyle}>
+    <ApiProvider apis={apis}>
+      <DismissableBanner
+        message="This is a dismissable banner with a warning message"
+        variant="warning"
+        id="warning_dismissable"
+      />
+    </ApiProvider>
+  </div>
+);

packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx

@@ -79,12 +79,15 @@ const useStyles = makeStyles(
     error: {
       backgroundColor: theme.palette.banner.error,
     },
+    warning: {
+      backgroundColor: theme.palette.banner.warning,
+    },
   }),
   { name: 'BackstageDismissableBanner' },
 );
 
 type Props = {
-  variant: 'info' | 'error';
+  variant: 'info' | 'error' | 'warning';
   message: ReactNode;
   id: string;
   fixed?: boolean;

packages/theme/api-report.md

@@ -64,6 +64,7 @@ export type BackstagePaletteAdditions = {
     error: string;
     text: string;
     link: string;
+    warning: string;
   };
 };
 

packages/theme/src/themes.ts

@@ -55,6 +55,7 @@ export const lightTheme = createTheme({
       error: '#E22134',
       text: '#FFFFFF',
       link: '#000000',
+      warning: '#FF9800',
     },
     border: '#E6E6E6',
     textContrast: '#000000',
@@ -129,6 +130,7 @@ export const darkTheme = createTheme({
       error: '#E22134',
       text: '#FFFFFF',
       link: '#000000',
+      warning: '#FF9800',
     },
     border: '#E6E6E6',
     textContrast: '#FFFFFF',

packages/theme/src/types.ts

@@ -76,6 +76,7 @@ export type BackstagePaletteAdditions = {
     error: string;
     text: string;
     link: string;
+    warning: string;
   };
 };