Merge pull request #649 from takenet/bugfix/sidebar-events

fix(sidebar): adding events sidebar status & fixing width prop
takenet · Jul 31, 2023 · 00c563e · 00c563e
2 parents 3df6757 + c72f993
commit 00c563e
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -2117,6 +2117,10 @@ export interface BdsSelectOptionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBdsSelectOptionElement;
 }
+export interface BdsSidebarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBdsSidebarElement;
+}
 export interface BdsSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBdsSwitchElement;
@@ -4551,6 +4555,10 @@ declare namespace LocalJSX {
           * If true, a lateral margin will apear in the content.
          */
         "margin"?: boolean;
+        /**
+          * Emitted when the isOpen has changed.
+         */
+        "onBdsToggle"?: (event: BdsSidebarCustomEvent<any>) => void;
         /**
           * sidebar position. Used to position the sidebar. Either on the left or on the right.
          */

diff --git a/src/components/sidebar/readme.md b/src/components/sidebar/readme.md
@@ -14,7 +14,14 @@
 | `margin`          | `margin`           | If true, a lateral margin will apear in the content.                                | `boolean`                                                  | `true`        |
 | `sidebarPosition` | `sidebar-position` | sidebar position. Used to position the sidebar. Either on the left or on the right. | `"left" \| "right"`                                        | `'left'`      |
 | `type`            | `type`             | sidebar type. Used to define how open.                                              | `"fixed" \| "over"`                                        | `'over'`      |
-| `width`           | `width`            | Width, number to define sidebar width.                                              | `number`                                                   | `undefined`   |
+| `width`           | `width`            | Width, number to define sidebar width.                                              | `number`                                                   | `360`         |
+
+
+## Events
+
+| Event       | Description                          | Type               |
+| ----------- | ------------------------------------ | ------------------ |
+| `bdsToggle` | Emitted when the isOpen has changed. | `CustomEvent<any>` |
 
 
 ## Methods

diff --git a/src/components/sidebar/sidebar.scss b/src/components/sidebar/sidebar.scss
@@ -76,9 +76,10 @@
       align-content: center;
       justify-content: space-between;
       padding: 24px;
-
+      
       & .content {
         display: flex;
+        width: 100%;
         align-items: center;
         position: relative;
         color: $color-content-default;

diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
@@ -1,4 +1,4 @@
-import { Component, h, State, Prop, Method, Watch, Element } from '@stencil/core';
+import { Component, h, State, Prop, EventEmitter, Event, Method, Watch, Element } from '@stencil/core';
 
 export type sidebarPosition = 'left' | 'right';
 export type sidebarType = 'over' | 'fixed';
@@ -39,20 +39,26 @@ export class Sidebar {
   /**
    * Width, number to define sidebar width.
    */
-  @Prop() width?: number;
+  @Prop() width?: number = 360;
 
   /**
    * Width, number to define sidebar width.
    */
   @Prop() background?: sidebarBackground = 'surface-2';
 
+  /**
+   * Emitted when the isOpen has changed.
+   */
+  @Event() bdsToggle!: EventEmitter;
+
   @Method()
   async toggle() {
     this.isOpen = !this.isOpen;
   }
 
   @Watch('isOpen')
   isOpenChanged(newValue: boolean): void {
+    this.bdsToggle.emit({ value: newValue });
     if (newValue === true) {
       document.addEventListener('keyup', this.listiner, false);
     } else {
@@ -94,6 +100,7 @@ export class Sidebar {
             [`position_${this.sidebarPosition}`]: true,
             [`background_${this.background}`]: true,
           }}
+          style={{ width: `${this.width < 144 ? 144 : this.width}px` }}
         >
           {this.hasHeaderSlot && (
             <div class={{ header: true }}>