From 303c2c3ce51d369766f19505f9b519749cd70880 Mon Sep 17 00:00:00 2001 From: hennnnes Date: Tue, 11 Apr 2023 10:11:56 +0200 Subject: [PATCH 1/3] feat: allow closeButton color in DismissableBanner to be configurable Signed-off-by: hennnnes --- .changeset/shiny-crabs-flow.md | 6 ++++++ .../src/components/DismissableBanner/DismissableBanner.tsx | 5 ++++- packages/theme/api-report.md | 1 + packages/theme/src/themes.ts | 2 ++ packages/theme/src/types.ts | 1 + 5 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 .changeset/shiny-crabs-flow.md diff --git a/.changeset/shiny-crabs-flow.md b/.changeset/shiny-crabs-flow.md new file mode 100644 index 0000000000..627d1f12b5 --- /dev/null +++ b/.changeset/shiny-crabs-flow.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-components': minor +'@backstage/theme': minor +--- + +Allow closeButton color in DismissableBanner to be configurable (via. theme.palette.banner.closeButtonColor) diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx index c18f9b605f..186f38a111 100644 --- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx +++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx @@ -73,6 +73,9 @@ const useStyles = makeStyles( color: theme.palette.banner.link, }, }, + button: { + color: theme.palette.banner.closeButtonColor, + }, info: { backgroundColor: theme.palette.banner.info, }, @@ -144,7 +147,7 @@ export const DismissableBanner = (props: Props) => { diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 92958c9c7e..60566266c7 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -70,6 +70,7 @@ export type BackstagePaletteAdditions = { error: string; text: string; link: string; + closeButtonColor: string; warning?: string; }; }; diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index b048c70fec..eb2ef7ce41 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', + closeButtonColor: '#FFFFFF', warning: '#FF9800', }, border: '#E6E6E6', @@ -136,6 +137,7 @@ export const darkTheme = createTheme({ error: '#E22134', text: '#FFFFFF', link: '#000000', + closeButtonColor: '#FFFFFF', warning: '#FF9800', }, border: '#E6E6E6', diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 96b7c54f9b..ff5dce9e8b 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -85,6 +85,7 @@ export type BackstagePaletteAdditions = { error: string; text: string; link: string; + closeButtonColor: string; warning?: string; }; }; From dede4d1cc7f0fa2ffd83aa0cd3e557c34283f10c Mon Sep 17 00:00:00 2001 From: hennnnes Date: Thu, 13 Apr 2023 11:26:05 +0200 Subject: [PATCH 2/3] Declare closeButtonColor as optional and use inherit as fallback Signed-off-by: hennnnes --- .../src/components/DismissableBanner/DismissableBanner.tsx | 4 ++-- packages/theme/api-report.md | 2 +- packages/theme/src/types.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx index 186f38a111..9b74b1e9b8 100644 --- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx +++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx @@ -64,17 +64,17 @@ const useStyles = makeStyles( width: '100%', maxWidth: 'inherit', flexWrap: 'nowrap', + color: theme.palette.banner.text, }, message: { display: 'flex', alignItems: 'center', - color: theme.palette.banner.text, '& a': { color: theme.palette.banner.link, }, }, button: { - color: theme.palette.banner.closeButtonColor, + color: theme.palette.banner.closeButtonColor ?? 'inherit', }, info: { backgroundColor: theme.palette.banner.info, diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 60566266c7..863ab81b68 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -70,7 +70,7 @@ export type BackstagePaletteAdditions = { error: string; text: string; link: string; - closeButtonColor: string; + closeButtonColor?: string; warning?: string; }; }; diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index ff5dce9e8b..0295e491f1 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -85,7 +85,7 @@ export type BackstagePaletteAdditions = { error: string; text: string; link: string; - closeButtonColor: string; + closeButtonColor?: string; warning?: string; }; }; From 15d3ad548bca54c0c749a6546d1b7f5a4f67c16f Mon Sep 17 00:00:00 2001 From: hennnnes Date: Thu, 13 Apr 2023 11:27:18 +0200 Subject: [PATCH 3/3] Update changelog entry Signed-off-by: hennnnes --- .changeset/shiny-crabs-flow.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/shiny-crabs-flow.md b/.changeset/shiny-crabs-flow.md index 627d1f12b5..a93d465eef 100644 --- a/.changeset/shiny-crabs-flow.md +++ b/.changeset/shiny-crabs-flow.md @@ -1,6 +1,6 @@ --- -'@backstage/core-components': minor -'@backstage/theme': minor +'@backstage/core-components': patch +'@backstage/theme': patch --- -Allow closeButton color in DismissableBanner to be configurable (via. theme.palette.banner.closeButtonColor) +Allow `closeButton` color in `DismissableBanner` to be configurable (via. `theme.palette.banner.closeButtonColor`)