feat(cdk-experimental/ui-patterns): add expansion behavior and refactor tabs

Author: ok7sai

src/cdk-experimental/tabs/tabs.ts

@@ -34,15 +34,20 @@ import {TabListPattern, TabPanelPattern, TabPattern} from '../ui-patterns';
  * ```html
  * <div cdkTabs>
  *   <ul cdkTabList>
- *     <li cdkTab>Tab 1</li>
- *     <li cdkTab>Tab 2</li>
- *     <li cdkTab>Tab 3</li>
+ *     <li cdkTab value="tab1">Tab 1</li>
+ *     <li cdkTab value="tab2">Tab 2</li>
+ *     <li cdkTab value="tab3">Tab 3</li>
  *   </ul>
  *
- *   <div cdkTabPanel>Tab content 1</div>
- *   <div cdkTabPanel>Tab content 2</div>
- *   <div cdkTabPanel>Tab content 3</div>
- * </div>
+ *   <div cdkTabPanel value="tab1">
+ *      <ng-template cdkTabContent>Tab content 1</ng-template>
+ *   </div>
+ *   <div cdkTabPanel value="tab2">
+ *      <ng-template cdkTabContent>Tab content 2</ng-template>
+ *   </div>
+ *   <div cdkTabPanel value="tab3">
+ *      <ng-template cdkTabContent>Tab content 3</ng-template>
+ *   </div>
  * ```
  */
 @Directive({

src/cdk-experimental/ui-patterns/behaviors/expansion/BUILD.bazel

@@ -0,0 +1,31 @@
+load("//tools:defaults.bzl", "ng_web_test_suite", "ts_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_project(
+    name = "expansion",
+    srcs = [
+        "expansion.ts",
+    ],
+    deps = [
+        "//:node_modules/@angular/core",
+        "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
+    ],
+)
+
+ts_project(
+    name = "unit_test_sources",
+    testonly = True,
+    srcs = [
+        "expansion.spec.ts",
+    ],
+    deps = [
+        ":expansion",
+        "//:node_modules/@angular/core",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)

src/cdk-experimental/ui-patterns/behaviors/expansion/expansion.spec.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {signal, WritableSignal} from '@angular/core';
+import {ShowHideControl, ShowHidePanel} from './show-hide';
+
+describe('Show Hide', () => {
+  let testShowHideControl: ShowHideControl;
+  let panelVisibility: WritableSignal<boolean>;
+  let testShowHidePanel: ShowHidePanel;
+
+  beforeEach(() => {
+    let showHideControlRef = signal<ShowHideControl | undefined>(undefined);
+    let showHidePanelRef = signal<ShowHidePanel | undefined>(undefined);
+    panelVisibility = signal(false);
+    testShowHideControl = new ShowHideControl({
+      visible: panelVisibility,
+      showHidePanel: showHidePanelRef,
+    });
+    testShowHidePanel = new ShowHidePanel({
+      id: () => 'test-panel',
+      showHideControl: showHideControlRef,
+    });
+    showHideControlRef.set(testShowHideControl);
+    showHidePanelRef.set(testShowHidePanel);
+  });
+
+  it('sets a panel hidden to true by setting a control to invisible.', () => {
+    panelVisibility.set(false);
+    expect(testShowHidePanel.hidden()).toBeTrue();
+  });
+
+  it('sets a panel hidden to false by setting a control to visible.', () => {
+    panelVisibility.set(true);
+    expect(testShowHidePanel.hidden()).toBeFalse();
+  });
+
+  it('gets a controlled panel id from ShowHideControl.', () => {
+    expect(testShowHideControl.controls()).toBe('test-panel');
+  });
+});

src/cdk-experimental/ui-patterns/behaviors/expansion/expansion.ts

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+import {computed} from '@angular/core';
+import {SignalLike} from '../signal-like/signal-like';
+
+/** Inputs for an Expansion control. */
+export interface ExpansionControlInputs {
+  /** Whether an Expansion is visible. */
+  visible: SignalLike<boolean>;
+
+  /** The controlled Expansion panel. */
+  expansionPanel: SignalLike<ExpansionPanel | undefined>;
+}
+
+/** Inputs for an Expansion panel. */
+export interface ExpansionPanelInputs {
+  /** A unique identifier for the panel. */
+  id: SignalLike<string>;
+
+  /** The Expansion control. */
+  expansionControl: SignalLike<ExpansionControl | undefined>;
+}
+
+/**
+ * An Expansion control.
+ *
+ * Use Expansion behavior if a pattern has a collapsible view that has two elements rely on the
+ * states from each other. For example
+ *
+ * ```html
+ * <button aria-controls="remote-content" aria-expanded="false">Toggle Content</button>
+ *
+ * ...
+ *
+ * <div id="remote-content" aria-hidden="true">
+ *  Collapsible content
+ * </div>
+ * ```
+ */
+export class ExpansionControl {
+  /** Whether an Expansion is visible. */
+  visible: SignalLike<boolean>;
+
+  /** The controllerd Expansion panel Id. */
+  controls = computed(() => this.inputs.expansionPanel()?.id());
+
+  constructor(readonly inputs: ExpansionControlInputs) {
+    this.visible = inputs.visible;
+  }
+}
+
+/** A Expansion panel. */
+export class ExpansionPanel {
+  /** A unique identifier for the panel. */
+  id: SignalLike<string>;
+
+  /** Whether the panel is hidden. */
+  hidden = computed(() => !this.inputs.expansionControl()?.visible());
+
+  constructor(readonly inputs: ExpansionPanelInputs) {
+    this.id = inputs.id;
+  }
+}

src/cdk-experimental/ui-patterns/tabs/BUILD.bazel

@@ -10,6 +10,7 @@ ts_project(
     deps = [
         "//:node_modules/@angular/core",
         "//src/cdk-experimental/ui-patterns/behaviors/event-manager",
+        "//src/cdk-experimental/ui-patterns/behaviors/expansion",
         "//src/cdk-experimental/ui-patterns/behaviors/list-focus",
         "//src/cdk-experimental/ui-patterns/behaviors/list-navigation",
         "//src/cdk-experimental/ui-patterns/behaviors/list-selection",

src/cdk-experimental/ui-patterns/tabs/tabs.ts

@@ -21,11 +21,15 @@ import {
   ListSelectionInputs,
   ListSelectionItem,
 } from '../behaviors/list-selection/list-selection';
+import {ExpansionControl, ExpansionPanel} from '../behaviors/expansion/expansion';
 import {SignalLike} from '../behaviors/signal-like/signal-like';
 
 /** The required inputs to tabs. */
 export interface TabInputs extends ListNavigationItem, ListSelectionItem<string>, ListFocusItem {
+  /** The parent tablist that controls the tab. */
   tablist: SignalLike<TabListPattern>;
+
+  /** The remote tabpanel controlled by the tab. */
   tabpanel: SignalLike<TabPanelPattern | undefined>;
 }
 
@@ -37,55 +41,41 @@ export class TabPattern {
   /** A local unique identifier for the tab. */
   value: SignalLike<string>;
 
-  /** Whether the tab is active. */
-  active = computed(() => this.tablist()?.focusManager.activeItem() === this);
+  /** Whether the tab is disabled. */
+  disabled: SignalLike<boolean>;
 
-  /** Whether the tab is selected. */
-  selected = computed(() => this.tablist().selection.inputs.value().includes(this.value()));
+  /** The html element that should receive focus. */
+  element: SignalLike<HTMLElement>;
 
-  /** A Tabpanel Id controlled by the tab. */
-  controls = computed(() => this.tabpanel()?.id());
+  /** Controls the expansion state for the tab.  */
+  expansionControl: ExpansionControl;
 
-  /** Whether the tab is disabled. */
-  disabled: SignalLike<boolean>;
+  /** Whether the tab is active. */
+  active = computed(() => this.inputs.tablist().focusManager.activeItem() === this);
 
-  /** A reference to the parent tablist. */
-  tablist: SignalLike<TabListPattern>;
+  /** Whether the tab is selected. */
+  selected = computed(
+    () => !!this.inputs.tablist().selection.inputs.value().includes(this.value()),
+  );
 
-  /** A reference to the corresponding tabpanel. */
-  tabpanel: SignalLike<TabPanelPattern | undefined>;
+  /** A tabpanel Id controlled by the tab. */
+  controls = computed(() => this.expansionControl.controls());
 
   /** The tabindex of the tab. */
-  tabindex = computed(() => this.tablist().focusManager.getItemTabindex(this));
+  tabindex = computed(() => this.inputs.tablist().focusManager.getItemTabindex(this));
 
-  /** The html element that should receive focus. */
-  element: SignalLike<HTMLElement>;
-
-  constructor(inputs: TabInputs) {
+  constructor(readonly inputs: TabInputs) {
     this.id = inputs.id;
     this.value = inputs.value;
-    this.tablist = inputs.tablist;
-    this.tabpanel = inputs.tabpanel;
-    this.element = inputs.element;
     this.disabled = inputs.disabled;
+    this.element = inputs.element;
+    this.expansionControl = new ExpansionControl({
+      visible: this.selected,
+      expansionPanel: computed(() => inputs.tabpanel()?.expansionPanel),
+    });
   }
 }
 
-/** The selection operations that the tablist can perform. */
-interface SelectOptions {
-  select?: boolean;
-  toggle?: boolean;
-  toggleOne?: boolean;
-  selectOne?: boolean;
-}
-
-/** The required inputs for the tablist. */
-export type TabListInputs = ListNavigationInputs<TabPattern> &
-  Omit<ListSelectionInputs<TabPattern, string>, 'multi'> &
-  ListFocusInputs<TabPattern> & {
-    disabled: SignalLike<boolean>;
-  };
-
 /** The required inputs for the tabpanel. */
 export interface TabPanelInputs {
   id: SignalLike<string>;
@@ -101,19 +91,37 @@ export class TabPanelPattern {
   /** A local unique identifier for the tabpanel. */
   value: SignalLike<string>;
 
-  /** A reference to the corresponding tab. */
-  tab: SignalLike<TabPattern | undefined>;
+  /** Represents the expansion state for the tabpanel.  */
+  expansionPanel: ExpansionPanel;
 
   /** Whether the tabpanel is hidden. */
-  hidden = computed(() => !this.tab()?.selected());
+  hidden = computed(() => this.expansionPanel.hidden());
 
   constructor(inputs: TabPanelInputs) {
     this.id = inputs.id;
     this.value = inputs.value;
-    this.tab = inputs.tab;
+    this.expansionPanel = new ExpansionPanel({
+      id: inputs.id,
+      expansionControl: computed(() => inputs.tab()?.expansionControl),
+    });
   }
 }
 
+/** The selection operations that the tablist can perform. */
+interface SelectOptions {
+  select?: boolean;
+  toggle?: boolean;
+  toggleOne?: boolean;
+  selectOne?: boolean;
+}
+
+/** The required inputs for the tablist. */
+export type TabListInputs = ListNavigationInputs<TabPattern> &
+  Omit<ListSelectionInputs<TabPattern, string>, 'multi'> &
+  ListFocusInputs<TabPattern> & {
+    disabled: SignalLike<boolean>;
+  };
+
 /** Controls the state of a tablist. */
 export class TabListPattern {
   /** Controls navigation for the tablist. */