fix(label): allow signposts inside labels

vmware-clarity · Sep 7, 2023 · 2c719c3 · 2c719c3
1 parent 32e07e5
commit 2c719c3
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 8 deletions.
diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
@@ -2502,6 +2502,7 @@ export class ClrLabel implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
+    onClick(event: any): void;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<ClrLabel, "label", never, { "forAttr": "for"; }, {}, never, never, false, never>;
     // (undocumented)

diff --git a/projects/angular/src/forms/common/label.ts b/projects/angular/src/forms/common/label.ts
@@ -4,7 +4,17 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Directive, ElementRef, HostBinding, Input, OnDestroy, OnInit, Optional, Renderer2 } from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  HostBinding,
+  HostListener,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Renderer2,
+} from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import { ControlIdService } from './providers/control-id.service';
@@ -32,6 +42,18 @@ export class ClrLabel implements OnInit, OnDestroy {
     return this.el.nativeElement && this.el.nativeElement.textContent;
   }
 
+  /**
+   * Allowing signposts inside labels to work without disabling default behavior. <label> is spreading a click event to its children so signposts get
+   * automatically closed once clicked inside a <label>.
+   * @param event
+   */
+  @HostListener('click', ['$event'])
+  onClick(event) {
+    if (event.target.hasAttribute('clrSignpostTrigger')) {
+      event.preventDefault();
+    }
+  }
+
   ngOnInit() {
     // Only add the clr-control-label if it is inside a control container
     if (this.controlIdService || this.ngControlService) {

diff --git a/projects/demo/src/app/forms/layout-angular/layout-angular.html b/projects/demo/src/app/forms/layout-angular/layout-angular.html
@@ -8,7 +8,13 @@ <h1>Angular - {{layout}} - {{ labelSize ? 'grid' : 'no grid' }}</h1>
 
 <form clrForm [clrLayout]="layout" [clrLabelSize]="labelSize">
   <clr-checkbox-container>
-    <label>Checkbox</label>
+    <label
+      >Checkbox
+      <clr-signpost>
+        <cds-icon shape="info-standard" clrSignpostTrigger>Trigger</cds-icon>
+        <clr-signpost-content *clrIfOpen> Signpost content </clr-signpost-content>
+      </clr-signpost></label
+    >
     <clr-checkbox-wrapper>
       <label>Option 1 2 3</label>
       <input type="checkbox" clrCheckbox />
@@ -23,19 +29,43 @@ <h1>Angular - {{layout}} - {{ labelSize ? 'grid' : 'no grid' }}</h1>
     </clr-checkbox-wrapper>
   </clr-checkbox-container>
   <clr-date-container>
-    <label>Date picker</label>
+    <label
+      >Date picker
+      <clr-signpost>
+        <cds-icon shape="info-standard" clrSignpostTrigger>Trigger</cds-icon>
+        <clr-signpost-content *clrIfOpen> Signpost content </clr-signpost-content>
+      </clr-signpost></label
+    >
     <input clrDate />
   </clr-date-container>
   <clr-input-container>
-    <label>Input</label>
+    <label
+      >Input
+      <clr-signpost>
+        <cds-icon shape="info-standard" clrSignpostTrigger>Trigger</cds-icon>
+        <clr-signpost-content *clrIfOpen> Signpost content </clr-signpost-content>
+      </clr-signpost></label
+    >
     <input clrInput />
   </clr-input-container>
   <clr-password-container>
-    <label>Password</label>
+    <label
+      >Password
+      <clr-signpost>
+        <cds-icon shape="info-standard" clrSignpostTrigger>Trigger</cds-icon>
+        <clr-signpost-content *clrIfOpen> Signpost content </clr-signpost-content>
+      </clr-signpost></label
+    >
     <input type="password" autocomplete="current-password" clrPassword />
   </clr-password-container>
   <clr-radio-container>
-    <label>Radio</label>
+    <label
+      >Radio
+      <clr-signpost>
+        <cds-icon shape="info-standard" clrSignpostTrigger>Trigger</cds-icon>
+        <clr-signpost-content *clrIfOpen> Signpost content </clr-signpost-content>
+      </clr-signpost></label
+    >
     <clr-radio-wrapper>
       <label>Option 1</label>
       <input type="radio" clrRadio />
@@ -50,15 +80,27 @@ <h1>Angular - {{layout}} - {{ labelSize ? 'grid' : 'no grid' }}</h1>
     </clr-radio-wrapper>
   </clr-radio-container>
   <clr-select-container>
-    <label>Select</label>
+    <label
+      >Select
+      <clr-signpost>
+        <cds-icon shape="info-standard" clrSignpostTrigger>Trigger</cds-icon>
+        <clr-signpost-content *clrIfOpen> Signpost content </clr-signpost-content>
+      </clr-signpost></label
+    >
     <select clrSelect>
       <option value="1">Option 1</option>
       <option value="2">Option 2</option>
       <option value="3">Option 3</option>
     </select>
   </clr-select-container>
   <clr-textarea-container>
-    <label>Textarea</label>
+    <label
+      >Textarea
+      <clr-signpost>
+        <cds-icon shape="info-standard" clrSignpostTrigger>Trigger</cds-icon>
+        <clr-signpost-content *clrIfOpen> Signpost content </clr-signpost-content>
+      </clr-signpost></label
+    >
     <textarea clrTextarea></textarea>
   </clr-textarea-container>
 </form>