feat(banner): add before dismiss event and theme updates (#466)

src/dev/pages/banner/banner.html

@@ -24,6 +24,7 @@
       { type: 'switch', label: 'Persistent', id: 'opt-persistent' },
       { type: 'switch', label: 'Show icon', id: 'opt-show-icon', defaultValue: true },
       { type: 'switch', label: 'Use more text', id: 'opt-more-text' },
+      { type: 'switch', label: 'Prevent dismiss', id: 'opt-prevent-dismiss' }
     ]
   }
 })

src/dev/pages/banner/banner.ts

@@ -12,7 +12,14 @@ IconRegistry.define([
 const banner = document.querySelector('#banner') as IBannerComponent;
 const leadingIcon = document.querySelector('#leading-icon') as HTMLElement;
 const textEl = document.querySelector('#text') as HTMLElement;
+const preventDismissToggle = document.querySelector('#opt-prevent-dismiss') as ISwitchComponent;
 
+banner.addEventListener(BANNER_CONSTANTS.events.BEFORE_DISMISS, evt => {
+  console.log(evt);
+  if (preventDismissToggle.on) {
+    evt.preventDefault();
+  }
+});
 banner.addEventListener(BANNER_CONSTANTS.events.DISMISSED, evt => {
   console.log(evt);
   dismissedToggle.on = true;

src/lib/banner/_core.scss

@@ -42,6 +42,12 @@
   padding-block: #{token(padding-block)};
 }
 
+@mixin dismiss-button-container {
+  display: flex;
+  align-items: center;
+  gap: #{token(gap)};
+}
+
 @mixin dismissed {
   grid-template-rows: 0fr;
   opacity: 0;

src/lib/banner/banner-adapter.ts

@@ -8,24 +8,30 @@ export interface IBannerAdapter extends IBaseAdapter {
   setDismissButtonVisibility(visible: boolean): void;
   addDismissListener(callback: EventListener): void;
   removeDismissListener(callback: EventListener): void;
+  startDismissCompleteListener(): Promise<void>;
   setDismissed(value: boolean): void;
 }
 
 export class BannerAdapter extends BaseAdapter<IBannerComponent> implements IBannerAdapter {
   private _rootElement: HTMLElement = this._component;
   private _dismissButtonElement: HTMLButtonElement;
   private _iconSlotElement: HTMLSlotElement;
+  private _buttonSlotElement: HTMLSlotElement;
 
   constructor(component: IBannerComponent) {
     super(component);
     this._rootElement = getShadowElement(component, '.forge-banner');
     this._dismissButtonElement = getShadowElement(component, BANNER_CONSTANTS.selectors.DISMISS_BUTTON) as HTMLButtonElement;
     this._iconSlotElement = getShadowElement(component, BANNER_CONSTANTS.selectors.ICON_SLOT) as HTMLSlotElement;
+    this._buttonSlotElement = getShadowElement(component, BANNER_CONSTANTS.selectors.BUTTON_SLOT) as HTMLSlotElement;
   }
 
   public initialize(): void {
     this._iconSlotElement.addEventListener('slotchange', this._onIconSlotChange.bind(this));
+    this._buttonSlotElement.addEventListener('slotchange', this._onButtonSlotChange.bind(this));
+
     this._onIconSlotChange();
+    this._onButtonSlotChange();
   }
 
   public setDismissButtonVisibility(visible: boolean): void {
@@ -44,7 +50,17 @@ export class BannerAdapter extends BaseAdapter<IBannerComponent> implements IBan
     this._rootElement.inert = value;
   }
 
+  public async startDismissCompleteListener(): Promise<void> {
+    return new Promise<void>(resolve => {
+      this._rootElement.addEventListener('transitionend', () => resolve(), { once: true });
+    });
+  }
+
   private _onIconSlotChange(): void {
     this._rootElement.classList.toggle(BANNER_CONSTANTS.classes.HAS_ICON, this._iconSlotElement.assignedNodes().length > 0);
   }
+
+  private _onButtonSlotChange(): void {
+    this._rootElement.classList.toggle(BANNER_CONSTANTS.classes.HAS_BUTTON, this._buttonSlotElement.assignedNodes().length > 0);
+  }
 }

src/lib/banner/banner-constants.ts

@@ -14,19 +14,22 @@ const attributes = {
 };
 
 const classes = {
-  HAS_ICON: 'has-icon'
+  HAS_ICON: 'has-icon',
+  HAS_BUTTON: 'has-button'
 };
 
 const selectors = {
   DISMISS_BUTTON: '[part=dismiss-button]',
-  ICON_SLOT: 'slot[name=icon]'
+  ICON_SLOT: 'slot[name=icon]',
+  BUTTON_SLOT: 'slot[name=button]'
 };
 
 const defaults = {
   THEME: 'info' as BannerTheme
 };
 
 const events = {
+  BEFORE_DISMISS: `${elementName}-before-dismiss`,
   DISMISSED: `${elementName}-dismissed`
 };
 

src/lib/banner/banner-foundation.ts

@@ -25,18 +25,25 @@ export class BannerFoundation implements IBannerFoundation {
   }
 
   private async _onDismiss(): Promise<void> {
+    if (this._dismissed || this._persistent) {
+      return;
+    }
+
     const originalDismissed = this._dismissed;
     this._dismissed = !this._dismissed;
 
-    const evt = new CustomEvent(BANNER_CONSTANTS.events.DISMISSED, { bubbles: true, composed: true, cancelable: true });
+    const evt = new CustomEvent(BANNER_CONSTANTS.events.BEFORE_DISMISS, { bubbles: true, composed: true, cancelable: true });
     this._adapter.dispatchHostEvent(evt);
     this._dismissed = originalDismissed;
 
     if (evt.defaultPrevented) {
       return;
     }
 
+    const dismissComplete = this._adapter.startDismissCompleteListener();
     this.dismissed = !this._dismissed;
+    await dismissComplete;
+    this._adapter.dispatchHostEvent(new CustomEvent(BANNER_CONSTANTS.events.DISMISSED, { bubbles: true, composed: true }));
   }
 
   private _addDismissListener(): void {

src/lib/banner/banner.html

@@ -8,13 +8,15 @@
           <slot name="button"></slot>
         </div>
       </div>
-      <div>
-        <forge-icon-button part="dismiss-button">
-          <forge-icon name="cancel"></forge-icon>
-        </forge-icon-button>
-        <forge-tooltip type="label" placement="bottom">
-          <slot name="dismiss-tooltip">Dismiss</slot>
-        </forge-tooltip>
+      <div class="dismiss-button-container">
+        <slot name="dismiss-button">
+          <forge-icon-button part="dismiss-button">
+            <forge-icon name="cancel"></forge-icon>
+          </forge-icon-button>
+          <forge-tooltip type="label" placement="bottom">
+            <slot name="dismiss-tooltip">Dismiss</slot>
+          </forge-tooltip>
+        </slot>
       </div>
     </div>
   </div>

src/lib/banner/banner.scss

@@ -34,7 +34,20 @@
     @include container;
   }
 
-  forge-icon-button {
+  .dismiss-button-container {
+    @include dismiss-button-container;
+  }
+
+  ::slotted(forge-button[slot=dismiss-button]) {
+    @include button.provide-theme((
+      primary-color: #{token(color)}
+    ));
+  }
+
+  ::slotted(forge-icon-button[slot=dismiss-button]),
+  forge-icon-button[part=dismiss-button] {
+    color: #{token(icon-color)};
+
     @include icon-button.provide-theme((
       focus-indicator-color: #{token(color)}
     ));
@@ -51,6 +64,14 @@
   ));
 }
 
+//
+// Slotted -icon
+//
+
+::slotted([slot=icon]) {
+  color: #{token(icon-color)};
+}
+
 //
 // Dismissed
 //
@@ -69,6 +90,7 @@
   :host([theme=#{$theme}]) {
     .forge-banner {
       @include override(background, theme.variable(#{$theme}-container), value);
+      @include override(icon-color, theme.variable(on-#{$theme}-container), value);
     }
   }
 }
@@ -77,13 +99,15 @@
 :host([theme=danger]) {
   .forge-banner {
     @include override(background, theme.variable(error-container), value);
+    @include override(icon-color, theme.variable(on-error-container), value);
   }
 }
 
 // Use surface theme for info-secondary
 :host([theme=info-secondary]) {
   .forge-banner {
     @include override(background, theme.variable(surface-container), value);
+    @include override(icon-color, theme.variable(on-surface-container), value);
   }
 }
 
@@ -92,7 +116,7 @@
 //
 
 @container (max-width: 600px) {
-  .forge-banner {
+  .forge-banner.has-button {
     .container {
       display: grid;
       grid-template-rows: [content] 1fr [button] auto;
@@ -114,5 +138,9 @@
       grid-row: button;
       grid-column: content;
     }
+
+    .dismiss-button-container {
+      align-items: flex-start;
+    }
   }
 }