diff --git a/.changeset/dry-spies-cover.md b/.changeset/dry-spies-cover.md new file mode 100644 index 0000000000..7006dee5c4 --- /dev/null +++ b/.changeset/dry-spies-cover.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-components': patch +'@backstage/theme': patch +--- + +Will Add warning variant to `DismissableBanner` component. diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx index a64514be61..e0e9a89c9f 100644 --- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx +++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx @@ -105,3 +105,14 @@ export const Fixed = () => ( ); +export const Warning = () => ( +
+ + + +
+); diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx index 1213111c9d..40082925c6 100644 --- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx +++ b/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; diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 72d7887214..30dcb7b040 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -64,6 +64,7 @@ export type BackstagePaletteAdditions = { error: string; text: string; link: string; + warning: string; }; }; diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index 3eb1bcc252..7e99ce8e8a 100644 --- a/packages/theme/src/themes.ts +++ b/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', diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index db3e89fa4b..40f45ee739 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -76,6 +76,7 @@ export type BackstagePaletteAdditions = { error: string; text: string; link: string; + warning: string; }; };