Merge branch 'develop' into #550-Tooltip-rename-tokens-2

deven-org · Jan 16, 2024 · e092b75 · e092b75
2 parents f1f91af + 5761adc
commit e092b75
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/packages/ui-library/src/components/forms/text-input/index.ts b/packages/ui-library/src/components/forms/text-input/index.ts
@@ -190,7 +190,7 @@ export class BlrTextInput extends LitElement {
 
                     size: iconSizeVariant,
                     classMap: iconClasses,
-                    onClick: () => this.togglePassword(),
+                    blrClick: this.togglePassword,
                   },
                   {
                     'aria-hidden': true,

diff --git a/packages/ui-library/src/components/ui/icon/index.ts b/packages/ui-library/src/components/ui/icon/index.ts
@@ -17,18 +17,25 @@ export class BlrIcon extends LitElement {
   @property() size: SizesType = 'md';
 
   @property() ignoreSize?: boolean = false;
-  @property() onClick?: () => void;
-
   @property() classMap?: DirectiveResult<typeof ClassMapDirective>;
 
+  // these are not triggered directly but allows us to map it internally and bve typesafe
+  @property() blrClick?: () => void;
+
+  protected handleClick = (event: Event) => {
+    this.dispatchEvent(
+      new CustomEvent('blrClick', { bubbles: true, composed: true, detail: { originalEvent: event } })
+    );
+  };
+
   protected render() {
     const sizeKey = this.ignoreSize ? 'full' : this.size.toLowerCase();
 
     const unfullfilledRenderResult = html`<span
-      @click="${this.onClick}"
+      @click=${this.handleClick}
       @keydown=${(event: KeyboardEvent) => {
         if (event.code === 'Space') {
-          this.onClick?.();
+          this.handleClick(event);
         }
       }}
       class="blr-icon ${sizeKey}"
@@ -42,10 +49,10 @@ export class BlrIcon extends LitElement {
       const fullfilledRenderResult = importedIcon
         .then((iconModule) => {
           return html`<span
-            @click="${this.onClick}"
+            @click=${this.handleClick}
             @keydown=${(event: KeyboardEvent) => {
               if (event.code === 'Space') {
-                this.onClick?.();
+                this.handleClick(event);
               }
             }}
             class="blr-icon ${sizeKey}"