diff --git a/webapp/channels/src/components/announcement_bar/__snapshots__/announcement_bar.test.tsx.snap b/webapp/channels/src/components/announcement_bar/__snapshots__/announcement_bar.test.tsx.snap
index 9949f2093d..0db07a0d78 100644
--- a/webapp/channels/src/components/announcement_bar/__snapshots__/announcement_bar.test.tsx.snap
+++ b/webapp/channels/src/components/announcement_bar/__snapshots__/announcement_bar.test.tsx.snap
@@ -1,5 +1,81 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`components/AnnouncementBar should match snapshot, admin configured bar 1`] = `
+
+`;
+
exports[`components/AnnouncementBar should match snapshot, bar not showing 1`] = `
<_StyledDiv
className="announcement-bar announcement-bar-critical"
diff --git a/webapp/channels/src/components/announcement_bar/announcement_bar.test.tsx b/webapp/channels/src/components/announcement_bar/announcement_bar.test.tsx
index d56d577058..7f47f60a2f 100644
--- a/webapp/channels/src/components/announcement_bar/announcement_bar.test.tsx
+++ b/webapp/channels/src/components/announcement_bar/announcement_bar.test.tsx
@@ -101,4 +101,19 @@ describe('components/AnnouncementBar', () => {
wrapper.setProps(newProps as any);
expect(wrapper).toMatchSnapshot();
});
+
+ test('should match snapshot, admin configured bar', () => {
+ const props = {...baseProps, enableBanner: true, bannerText: 'Banner text'};
+ const wrapper = shallow(
+ ,
+ );
+
+ expect(wrapper).toMatchSnapshot();
+ });
});
diff --git a/webapp/channels/src/components/announcement_bar/announcement_bar_controller.tsx b/webapp/channels/src/components/announcement_bar/announcement_bar_controller.tsx
index 2072732385..a71b07de62 100644
--- a/webapp/channels/src/components/announcement_bar/announcement_bar_controller.tsx
+++ b/webapp/channels/src/components/announcement_bar/announcement_bar_controller.tsx
@@ -43,6 +43,7 @@ class AnnouncementBarController extends React.PureComponent {
if (this.props.config?.EnableBanner === 'true' && this.props.config.BannerText?.trim()) {
adminConfiguredAnnouncementBar = (
{
// Baz
// }
// Even if all Foo, Bar and Baz render, only Baz is visible as it's further down.
+ // One exception to this rule is for admin configured announcement banners
+ // If set with class 'admin-announcement', they will always be visible, stacked vertically.
return (
<>
diff --git a/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx b/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
index fb5aadb730..ea06463e5f 100644
--- a/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
+++ b/webapp/channels/src/components/announcement_bar/default_announcement_bar/announcement_bar.tsx
@@ -16,6 +16,7 @@ import {isStringContainingUrl} from 'utils/url';
type Props = {
id?: string;
showCloseButton: boolean;
+ className?: string;
color: string;
textColor: string;
type: string;
@@ -131,6 +132,10 @@ export default class AnnouncementBar extends React.PureComponent {
barClass = 'announcement-bar announcement-bar-general';
}
+ if (this.props.className) {
+ barClass += ` ${this.props.className}`;
+ }
+
let closeButton;
if (this.props.showCloseButton) {
closeButton = (
diff --git a/webapp/channels/src/components/announcement_bar/text_dismissable_bar.tsx b/webapp/channels/src/components/announcement_bar/text_dismissable_bar.tsx
index 50443b2d31..fb98c017b5 100644
--- a/webapp/channels/src/components/announcement_bar/text_dismissable_bar.tsx
+++ b/webapp/channels/src/components/announcement_bar/text_dismissable_bar.tsx
@@ -17,6 +17,7 @@ interface Props extends Partial {
allowDismissal: boolean;
text: React.ReactNode;
onDismissal?: () => void;
+ className?: string;
}
type State = {
diff --git a/webapp/channels/src/sass/base/_structure.scss b/webapp/channels/src/sass/base/_structure.scss
index 876a2afc4a..2bf94fbc4c 100644
--- a/webapp/channels/src/sass/base/_structure.scss
+++ b/webapp/channels/src/sass/base/_structure.scss
@@ -116,6 +116,7 @@ body.app__body #root {
--columns: min-content minmax(385px, 1fr) min-content;
grid-template:
"announcement announcement announcement" min-content
+ "admin-announcement admin-announcement admin-announcement" min-content
"header header header" min-content
"team-sidebar main app-sidebar"
"footer footer footer" min-content / var(--columns);
@@ -131,6 +132,7 @@ body.app__body #root {
padding-right: 0;
grid-template:
'announcement announcement' min-content
+ 'admin-announcement admin-announcement' min-content
'header header' min-content
'lhs center'
'footer footer' min-content
@@ -147,6 +149,10 @@ body.app__body #root {
grid-area: announcement;
}
+ .announcement-bar.admin-announcement {
+ grid-area: admin-announcement;
+ }
+
#global-header {
grid-area: header;
}
diff --git a/webapp/channels/src/sass/components/_announcement-bar.scss b/webapp/channels/src/sass/components/_announcement-bar.scss
index e3139f6aca..f1c04e489b 100644
--- a/webapp/channels/src/sass/components/_announcement-bar.scss
+++ b/webapp/channels/src/sass/components/_announcement-bar.scss
@@ -63,7 +63,6 @@
}
&.announcement-bar__close {
- position: absolute;
top: 5px;
right: 0;
padding: 0 10px;