[EC 456] Component Library Content Switching Tabs (#3452)

* [EC-456] Rename bitTabItem -> bitTab * [EC-456] Use templateRefs or text for tab label content * [EC-456] Add bit-tab-nav-bar component * [EC-456] Finish content tab switching and nav tabs * [EC-456] Undo accidental eslintrc.json change * [EC-456] Fix directive/component selector naming convention * [EC-456] Cleanup unnecessary InjectionTokens and simplify template label property * [EC-456] Cleanup one more unnecessary InjectionToken * [EC-456] Cleanup tab styles to better match Figma. Add internal tab header component for styling header background according to Figma. * [EC-456] Add sub-folders for nav, content, and shared tab components/directives * [EC-456] Code/style cleanup * [EC-456] Remove underscore from protected members * [EC-456] Cleanup tab stories and forgotten any type. * [EC-456] Fix dark theme story tab content text color * [EC-456] Add missing padding to tab header * [EC-456] Add tab content padding to align with tab headers * [EC-456] Move bottom tab border to header to span entire content area * [EC-456] Force text-main tab label color * [EC-456] Undo text-main change
2025-12-16 16:23:44 +00:00 · 2022-09-26 14:41:51 -07:00
parent e8936eb4c6
commit debaef2941
21 changed files with 653 additions and 112 deletions
--- a/libs/components/src/tabs/shared/tab-list-item.directive.ts
+++ b/libs/components/src/tabs/shared/tab-list-item.directive.ts
@@ -0,0 +1,85 @@
+import { FocusableOption } from "@angular/cdk/a11y";
+import { Directive, ElementRef, HostBinding, Input } from "@angular/core";
+
+/**
+ * Directive used for styling tab header items for both nav links (anchor tags)
+ * and content tabs (button tags)
+ */
+@Directive({ selector: "[bitTabListItem]" })
+export class TabListItemDirective implements FocusableOption {
+  @Input() active: boolean;
+  @Input() disabled: boolean;
+
+  @HostBinding("attr.disabled")
+  get disabledAttr() {
+    return this.disabled || null; // native disabled attr must be null when false
+  }
+
+  constructor(private elementRef: ElementRef) {}
+
+  focus() {
+    this.elementRef.nativeElement.focus();
+  }
+
+  click() {
+    this.elementRef.nativeElement.click();
+  }
+
+  @HostBinding("class")
+  get classList(): string[] {
+    return this.baseClassList
+      .concat(this.active ? this.activeClassList : [])
+      .concat(this.disabled ? this.disabledClassList : []);
+  }
+
+  get baseClassList(): string[] {
+    return [
+      "tw-block",
+      "tw-relative",
+      "tw-py-2",
+      "tw-px-4",
+      "tw-font-semibold",
+      "tw-transition",
+      "tw-rounded-t",
+      "tw-border-0",
+      "tw-border-x",
+      "tw-border-t-4",
+      "tw-border-transparent",
+      "tw-border-solid",
+      "tw-bg-transparent",
+      "tw-text-main",
+      "hover:tw-underline",
+      "hover:tw-text-main",
+      "focus-visible:tw-z-10",
+      "focus-visible:tw-outline-none",
+      "focus-visible:tw-ring-2",
+      "focus-visible:tw-ring-primary-700",
+    ];
+  }
+
+  get disabledClassList(): string[] {
+    return [
+      "!tw-bg-secondary-100",
+      "!tw-text-muted",
+      "hover:!tw-text-muted",
+      "!tw-no-underline",
+      "tw-cursor-not-allowed",
+    ];
+  }
+
+  get activeClassList(): string[] {
+    return [
+      "tw--mb-px",
+      "tw-border-x-secondary-300",
+      "tw-border-t-primary-500",
+      "tw-border-b",
+      "tw-border-b-background",
+      "tw-bg-background",
+      "!tw-text-primary-500",
+      "hover:tw-border-t-primary-700",
+      "hover:!tw-text-primary-700",
+      "focus-visible:tw-border-t-primary-700",
+      "focus-visible:!tw-text-primary-700",
+    ];
+  }
+}