refactor: status indicator with tooltip (#82)

wghglory · Dec 23, 2024 · 0e451fe · 0e451fe
1 parent 90fffae
commit 0e451fe
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 4 deletions.
diff --git a/projects/clr-lift/src/lib/components/status-indicator/status-indicator.component.html b/projects/clr-lift/src/lib/components/status-indicator/status-indicator.component.html
@@ -1,4 +1,21 @@
 <span class="status-container">
+  @if (tooltip(); as tooltip) {
+    <button
+      class="btn btn-icon"
+      [cllTooltip]="tooltip"
+      [cllTooltipPosition]="tooltipPosition()"
+      [attr.aria-label]="tooltip"
+    >
+      <ng-container *ngTemplateOutlet="icon"></ng-container>
+    </button>
+  } @else {
+    <ng-container *ngTemplateOutlet="icon"></ng-container>
+  }
+
+  <ng-content></ng-content>
+</span>
+
+<ng-template #icon>
   @switch (iconStatus()) {
     @case ('success') {
       <cds-icon
@@ -48,6 +65,4 @@
       />
     }
   }
-
-  <ng-content></ng-content>
-</span>
+</ng-template>
diff --git a/projects/clr-lift/src/lib/components/status-indicator/status-indicator.component.scss b/projects/clr-lift/src/lib/components/status-indicator/status-indicator.component.scss
@@ -3,3 +3,10 @@
   gap: 0.5rem;
   align-items: center;
 }
+
+.btn {
+  margin: 0;
+  padding: 0;
+  height: auto;
+  border: none;
+}
diff --git a/projects/clr-lift/src/lib/components/status-indicator/status-indicator.component.ts b/projects/clr-lift/src/lib/components/status-indicator/status-indicator.component.ts
@@ -13,6 +13,8 @@ import {ClarityModule} from '@clr/angular';
 
 import {TranslatePipe} from '../../pipes/translate.pipe';
 import {TranslationService} from '../../services/translation.service';
+import {TooltipModule} from '../tooltip';
+import {TooltipPosition} from './../tooltip/tooltip.model';
 import {statusIndicatorTranslations} from './status-indicator.l10n';
 
 ClarityIcons.addIcons(
@@ -27,7 +29,7 @@ ClarityIcons.addIcons(
 @Component({
   selector: 'cll-status-indicator',
   standalone: true,
-  imports: [CommonModule, ClarityModule, TranslatePipe],
+  imports: [CommonModule, ClarityModule, TranslatePipe, TooltipModule],
   templateUrl: './status-indicator.component.html',
   styleUrls: ['./status-indicator.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -37,6 +39,8 @@ export class StatusIndicatorComponent {
 
   iconStatus = input.required<'success' | 'error' | 'pending' | 'warning' | 'inactive' | 'unknown'>();
   iconSize = input<'lg' | 'md' | 'sm' | number>('sm');
+  tooltip = input('');
+  tooltipPosition = input<TooltipPosition>('tooltip-bottom-right');
 
   constructor() {
     this.translationService.loadTranslationsForComponent('status-indicator', statusIndicatorTranslations);

diff --git a/...lication/src/app/clr-lib/pages/status-indicator-demo/status-indicator-demo.component.html b/...lication/src/app/clr-lib/pages/status-indicator-demo/status-indicator-demo.component.html
@@ -32,6 +32,67 @@ <h3>Icon Size (Number)</h3>
     </section>
   </div>
 
+  <section class="space-y-3">
+    <h3>Icon with Tooltip</h3>
+    <p>Hover your mouse over the icon.</p>
+    <ul>
+      <li>
+        <cll-status-indicator
+          [iconStatus]="'error'"
+          [tooltip]="'describe the error reason'"
+          [tooltipPosition]="'tooltip-top-left'"
+        >
+          Error
+        </cll-status-indicator>
+      </li>
+      <li>
+        <cll-status-indicator
+          [iconStatus]="'success'"
+          [tooltip]="'status is success'"
+          [tooltipPosition]="'tooltip-bottom-left'"
+        >
+          Success
+        </cll-status-indicator>
+      </li>
+      <li>
+        <cll-status-indicator
+          [iconStatus]="'warning'"
+          [tooltip]="'status is warning'"
+          [tooltipPosition]="'tooltip-bottom-right'"
+        >
+          Warning
+        </cll-status-indicator>
+      </li>
+      <li>
+        <cll-status-indicator
+          [iconStatus]="'unknown'"
+          [tooltip]="'unknown status'"
+          [tooltipPosition]="'tooltip-top-right'"
+        >
+          unknown
+        </cll-status-indicator>
+      </li>
+      <li>
+        <cll-status-indicator
+          [iconStatus]="'inactive'"
+          [tooltip]="'inactive status'"
+          [tooltipPosition]="'tooltip-top-left'"
+        >
+          Inactive
+        </cll-status-indicator>
+      </li>
+      <li>
+        <cll-status-indicator
+          [iconStatus]="'pending'"
+          [tooltip]="'some pending happen'"
+          [tooltipPosition]="'tooltip-left'"
+        >
+          Pending
+        </cll-status-indicator>
+      </li>
+    </ul>
+  </section>
+
   <section class="space-y-6">
     <h2>Example</h2>
     <app-code-block [code]="exampleCode" lang="html" />

diff --git a/...pplication/src/app/clr-lib/pages/status-indicator-demo/status-indicator-demo.component.ts b/...pplication/src/app/clr-lib/pages/status-indicator-demo/status-indicator-demo.component.ts
@@ -18,5 +18,15 @@ import {StatusIndicatorComponent} from 'clr-lift';
 
 <cll-status-indicator [iconStatus]="'error'" [iconSize]="'sm'"> Error </cll-status-indicator>
 <cll-status-indicator [iconStatus]="'success'" [iconSize]="24"> Success </cll-status-indicator>
+
+<li>
+  <cll-status-indicator
+    [iconStatus]="'pending'"
+    [tooltip]="'some pending happen'"
+    [tooltipPosition]="'tooltip-left'"
+  >
+    Pending
+  </cll-status-indicator>
+</li>
   `);
 }