fix(cdk-experimental/ui-patterns) toolbar logic and readibility improvement

Author: demanr

src/cdk-experimental/radio-group/radio-group.ts

@@ -103,7 +103,7 @@ export class CdkRadioGroup<V> {
   toolbar = inject(CdkToolbar, {optional: true});
 
   /** Toolbar pattern if applicable */
-  private readonly _toolbarPattern = computed(() => (this.toolbar ? this.toolbar.pattern : null));
+  private readonly _toolbarPattern = computed(() => this.toolbar?.pattern);
 
   /** The RadioButton UIPatterns of the child CdkRadioButtons. */
   protected items = computed(() => this._cdkRadioButtons().map(radio => radio.pattern));
@@ -140,7 +140,7 @@ export class CdkRadioGroup<V> {
     activeItem: signal(undefined),
     textDirection: this.textDirection,
     toolbar: this._toolbarPattern,
-    focusMode: this._toolbarPattern() ? this._toolbarPattern()!!.inputs.focusMode : this.focusMode,
+    focusMode: this._toolbarPattern()?.inputs.focusMode ?? this.focusMode,
   });
 
   /** Whether the radio group has received focus yet. */

src/cdk-experimental/toolbar/toolbar.ts

@@ -201,7 +201,7 @@ export class CdkToolbarWidget implements OnInit, OnDestroy {
     ...this,
     id: this.id,
     element: this.element,
-    disabled: computed(() => this._cdkToolbar.disabled() || this.disabled() || false),
+    disabled: computed(() => this._cdkToolbar.disabled() || this.disabled()),
     parentToolbar: this.parentToolbar,
   });
 

src/cdk-experimental/ui-patterns/radio-group/radio-button.ts

@@ -14,7 +14,7 @@ import {List, ListItem} from '../behaviors/list/list';
  * Represents the properties exposed by a radio group that need to be accessed by a radio button.
  * This exists to avoid circular dependency errors between the radio group and radio button.
  */
-type ToolbarWidget = {
+type ToolbarWidgetLike = {
   id: SignalLike<string>;
   index: SignalLike<number>;
   element: SignalLike<HTMLElement>;
@@ -25,7 +25,7 @@ type ToolbarWidget = {
 
 interface RadioGroupLike<V> {
   /** The list behavior for the radio group. */
-  listBehavior: List<RadioButtonPattern<V> | ToolbarWidget, V>;
+  listBehavior: List<RadioButtonPattern<V> | ToolbarWidgetLike, V>;
   /** Whether the list is readonly */
   readonly: SignalLike<boolean>;
   /** Whether the radio group is disabled. */

src/cdk-experimental/ui-patterns/radio-group/radio-group.ts

@@ -23,10 +23,10 @@ export type RadioGroupInputs<V> = Omit<
   /** Whether the radio group is readonly. */
   readonly: SignalLike<boolean>;
   /** Parent toolbar of radio group */
-  toolbar: SignalLike<ToolbarLike<V> | null>;
+  toolbar: SignalLike<ToolbarLike<V> | undefined>;
 };
 
-type ToolbarWidget = {
+type ToolbarWidgetLike = {
   id: SignalLike<string>;
   index: SignalLike<number>;
   element: SignalLike<HTMLElement>;
@@ -36,14 +36,14 @@ type ToolbarWidget = {
 };
 
 interface ToolbarLike<V> {
-  listBehavior: List<RadioButtonPattern<V> | ToolbarWidget, V>;
+  listBehavior: List<RadioButtonPattern<V> | ToolbarWidgetLike, V>;
   orientation: SignalLike<'vertical' | 'horizontal'>;
   disabled: SignalLike<boolean>;
 }
 /** Controls the state of a radio group. */
 export class RadioGroupPattern<V> {
   /** The list behavior for the radio group. */
-  readonly listBehavior: List<RadioButtonPattern<V> | ToolbarWidget, V>;
+  readonly listBehavior: List<RadioButtonPattern<V> | ToolbarWidgetLike, V>;
 
   /** Whether the radio group is vertically or horizontally oriented. */
   orientation: SignalLike<'vertical' | 'horizontal'>;
@@ -128,7 +128,7 @@ export class RadioGroupPattern<V> {
 
   constructor(readonly inputs: RadioGroupInputs<V>) {
     this.orientation =
-      inputs.toolbar() !== null ? inputs.toolbar()!.orientation : inputs.orientation;
+      inputs.toolbar() !== undefined ? inputs.toolbar()!.orientation : inputs.orientation;
 
     this.listBehavior = new List({
       ...inputs,

src/cdk-experimental/ui-patterns/radio-group/radio.spec.ts

@@ -39,7 +39,7 @@ describe('RadioGroup Pattern', () => {
       focusMode: inputs.focusMode ?? signal('roving'),
       textDirection: inputs.textDirection ?? signal('ltr'),
       orientation: inputs.orientation ?? signal('vertical'),
-      toolbar: inputs.toolbar ?? signal(null),
+      toolbar: inputs.toolbar ?? signal(undefined),
     });
   }
 

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

@@ -8,24 +8,16 @@
 
 import {computed, signal} from '@angular/core';
 import {KeyboardEventManager, PointerEventManager} from '../behaviors/event-manager';
-// import {ListFocus, ListFocusInputs, ListFocusItem} from '../behaviors/list-focus/list-focus';
-// import {
-//   ListNavigation,
-//   ListNavigationInputs,
-//   ListNavigationItem,
-// } from '../behaviors/list-navigation/list-navigation';
 import {SignalLike} from '../behaviors/signal-like/signal-like';
 
 import {RadioButtonPattern} from '../radio-group/radio-button';
 
 import {List, ListInputs, ListItem} from '../behaviors/list/list';
 
-// remove typeahead etc.
 export type ToolbarInputs<V> = Omit<
   ListInputs<ToolbarWidgetPattern | RadioButtonPattern<V>, V>,
   'multi' | 'typeaheadDelay' | 'value' | 'selectionMode'
 >;
-// ListInputs<ToolbarWidgetPattern | RadioButtonPattern<V>, V>;
 
 export class ToolbarPattern<V> {
   /** The list behavior for the toolbar. */
@@ -35,7 +27,7 @@ export class ToolbarPattern<V> {
   readonly orientation: SignalLike<'vertical' | 'horizontal'>;
 
   /** Whether the toolbar is disabled. */
-  disabled = computed(() => this.inputs.disabled() || this.listBehavior.disabled());
+  disabled = computed(() => this.listBehavior.disabled());
 
   /** The tabindex of the toolbar (if using activedescendant). */
   tabindex = computed(() => this.listBehavior.tabindex());
@@ -86,15 +78,15 @@ export class ToolbarPattern<V> {
       .on(this.nextKey, () => this.listBehavior.next())
       .on(this.altNextKey, () => {
         const activeItem = this.inputs.activeItem();
-        if (activeItem instanceof RadioButtonPattern && activeItem.group()!!) {
+        if (activeItem instanceof RadioButtonPattern && activeItem.group()) {
           activeItem.group()?.listBehavior.next();
         } else {
           this.listBehavior.next();
         }
       })
       .on(this.altPrevKey, () => {
         const activeItem = this.inputs.activeItem();
-        if (activeItem instanceof RadioButtonPattern && activeItem.group()!!) {
+        if (activeItem instanceof RadioButtonPattern && activeItem.group()) {
           activeItem.group()?.listBehavior.prev();
         } else {
           this.listBehavior.prev();
@@ -222,13 +214,6 @@ export class ToolbarPattern<V> {
   }
 }
 
-export type ToolbarWidget = {
-  id: SignalLike<string>;
-  index: SignalLike<number>;
-  element: SignalLike<HTMLElement>;
-  disabled: SignalLike<boolean>;
-};
-
 /** Represents the required inputs for a toolbar widget in a toolbar. */
 export interface ToolbarWidgetInputs extends Omit<ListItem<any>, 'searchTerm' | 'value' | 'index'> {
   /** A reference to the parent toolbar. */
@@ -267,6 +252,3 @@ export class ToolbarWidgetPattern {
     this.parentToolbar = inputs.parentToolbar;
   }
 }
-
-// can remove later
-export type ToolbarPatternType<V> = InstanceType<typeof ToolbarPattern<V>>;