feat: Add property & event for toggling the opening or closing of the…

… TipManager (#533)

* - Add `closed` property to TipManager
- Add container class for div
- Add new event and deprecate old event
- Update tests
- Fix shadowed var

* update test app, cleanup css, fix direction

* shadow var

* rename event.

* enhance test

src/components/calcite-tip-manager/calcite-tip-manager.e2e.ts

@@ -48,18 +48,29 @@ describe("calcite-tip-manager", () => {
       await page.setContent(
         `<calcite-tip-manager><calcite-tip><p>Close behavior</p></calcite-tip></calcite-tip-manager>`
       );
+
       const tipManager = await page.find("calcite-tip-manager");
 
-      const eventSpy = await page.spyOnEvent("calciteTipManagerClose", "window");
+      let container = await page.find(`calcite-tip-manager >>> .${CSS.container}`);
+      let isVisible = await container.isVisible();
+      expect(isVisible).toBe(true);
+
+      const eventSpy = await page.spyOnEvent("calciteTipManagerToggle", "window");
 
       const closeButton = await page.find(`calcite-tip-manager >>> .${CSS.close}`);
       await closeButton.click();
       await page.waitForChanges();
 
-      const isVisible = await tipManager.isVisible();
+      container = await page.find(`calcite-tip-manager >>> .${CSS.container}`);
+
+      isVisible = await container.isVisible();
       expect(isVisible).toBe(false);
 
       expect(eventSpy).toHaveReceivedEvent();
+
+      const isClosed = await tipManager.getProperty("closed");
+
+      expect(isClosed).toBe(true);
     });
   });
   describe("pagination", () => {

src/components/calcite-tip-manager/calcite-tip-manager.scss

@@ -25,18 +25,25 @@ $tip-max-width: 540px;
 
 /* Component Styles */
 :host {
-  overflow: hidden;
-  position: relative;
   display: block;
-  padding: var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) 0;
-  min-height: 150px;
+}
+
+:host([closed]) {
+  display: none;
 }
 
 .header .heading {
   padding-left: var(--calcite-app-side-spacing-half);
   padding-right: var(--calcite-app-side-spacing-half);
 }
 
+.container {
+  overflow: hidden;
+  position: relative;
+  padding: var(--calcite-app-cap-spacing-half) var(--calcite-app-side-spacing-half) 0;
+  min-height: 150px;
+}
+
 .tip-container {
   animation-name: none;
   animation-duration: var(--calcite-app-animation-time);

src/components/calcite-tip-manager/calcite-tip-manager.tsx

@@ -28,6 +28,17 @@ export class CalciteTipManager {
   //  Properties
   //
   // --------------------------------------------------------------------------
+  /**
+   * Alternate text for closing the Tip Manager.
+   */
+  @Prop({ reflect: true }) closed = false;
+
+  @Watch("closed")
+  closedChangeHandler() {
+    this.direction = null;
+    this.calciteTipManagerToggle.emit();
+  }
+
   /**
    * Alternate text for closing the Tip Manager.
    */
@@ -132,9 +143,15 @@ export class CalciteTipManager {
 
   /**
    * Emitted when the component has been closed.
+   * @deprecated
    */
   @Event() calciteTipManagerClose: EventEmitter;
 
+  /**
+   * Emitted when the TipManager has been toggled closed or opened.
+   */
+  @Event() calciteTipManagerToggle: EventEmitter;
+
   // --------------------------------------------------------------------------
   //
   //  Private Methods
@@ -160,9 +177,8 @@ export class CalciteTipManager {
   }
 
   hideTipManager = (): void => {
-    this.el.hidden = true;
-    this.el.setAttribute("aria-hidden", "");
-    this.calciteTipManagerClose.emit();
+    this.closed = true;
+    this.calciteTipManagerToggle.emit();
   };
 
   showSelectedTip() {
@@ -246,14 +262,21 @@ export class CalciteTipManager {
   }
 
   render() {
-    const { direction, groupTitle, selectedIndex, textClose, total } = this;
+    const { closed, direction, groupTitle, selectedIndex, textClose, total } = this;
 
     if (total === 0) {
       return <Host />;
     }
     return (
       <Host>
-        <div tabIndex={0} onKeyUp={this.tipManagerKeyUpHandler} ref={this.storeContainerRef}>
+        <div
+          class={CSS.container}
+          hidden={closed}
+          aria-hidden={closed}
+          tabIndex={0}
+          onKeyUp={this.tipManagerKeyUpHandler}
+          ref={this.storeContainerRef}
+        >
           <header class={CSS.header}>
             <h2 key={selectedIndex} class={CSS.heading}>
               {groupTitle}
@@ -265,8 +288,8 @@ export class CalciteTipManager {
           <div
             tabIndex={0}
             class={classnames(CSS.tipContainer, {
-              [CSS.tipContainerAdvancing]: direction === "advancing",
-              [CSS.tipContainerRetreating]: direction === "retreating"
+              [CSS.tipContainerAdvancing]: !closed && direction === "advancing",
+              [CSS.tipContainerRetreating]: !closed && direction === "retreating"
             })}
             key={selectedIndex}
           >

src/components/calcite-tip-manager/resources.ts

@@ -10,6 +10,7 @@ export const CSS = {
   header: "header",
   heading: "heading",
   close: "close",
+  container: "container",
   tipContainer: "tip-container",
   tipContainerAdvancing: "tip-container--advancing",
   tipContainerRetreating: "tip-container--retreating",

src/demos/calcite-shell-full-window.html

@@ -551,7 +551,7 @@ <h3 class="heading" slot="header-content">WE CARE A LOT</h3>
       var tipManagerButton = document.getElementById("tip-manager-button");
       var tipManager = document.getElementById("tip-manager");
       tipManagerButton.addEventListener("click", function(){
-        tipManager.hasAttribute("hidden") ? tipManager.removeAttribute("hidden") : tipManager.setAttribute("hidden", "");
+        tipManager.closed = !tipManager.closed;
       });
 
       var actionPad = document.getElementById("action-pad");