cr fixes

libs/components/src/disclosure/disclosure-trigger-for.directive.ts

@@ -2,8 +2,6 @@ import { Directive, HostBinding, HostListener, Input } from "@angular/core";
 
 import { DisclosureComponent } from "./disclosure.component";
 
-let nextId = 0;
-
 @Directive({
   selector: "[bitDisclosureTriggerFor]",
   exportAs: "disclosureTriggerFor",
@@ -15,14 +13,12 @@ export class DisclosureTriggerForDirective {
    */
   @Input("bitDisclosureTriggerFor") disclosure: DisclosureComponent;
 
-  @HostBinding("id") id = `bit-trigger-for-${nextId++}`;
-
   @HostBinding("attr.aria-expanded") get ariaExpanded() {
     return this.disclosure.open;
   }
 
   @HostBinding("attr.aria-controls") get ariaControls() {
-    return this.id;
+    return this.disclosure.id;
   }
 
   @HostListener("click") click() {

libs/components/src/disclosure/disclosure.mdx

@@ -11,34 +11,44 @@ import { DisclosureComponent, DisclosureTriggerForDirective } from "@bitwarden/c
 # Disclosure
 
 The `bit-disclosure` component is used in tandem with the `bitDisclosureTriggerFor` directive to
-create a content area whose visibility is controlled by a trigger button.
+create an accessible content area whose visibility is controlled by a trigger button.
 
-## Using Icon Button as the Disclosure Trigger
+To compose a disclosure and trigger:
 
-The icon button can be used as the trigger for displaying the disclosure area. To do so:
-
-1. Create a `buttonType="muted"` icon button. (This is currently the only supported icon button type
-   for use as a disclosure trigger button)
+1. Create a trigger component (see "Supported Trigger Components" section below)
 2. Create a `bit-disclosure`
 3. Set a template reference on the `bit-disclosure`
-4. Use the `bitDisclosureTriggerFor` directive on the icon button, and pass it the `bit-disclosure`
-   template reference
+4. Use the `bitDisclosureTriggerFor` directive on the trigger component, and pass it the
+   `bit-disclosure` template reference
 5. Set the `open` property on the `bit-disclosure` to init the disclosure as either currently
    expanded or currently collapsed. The disclosure will default to `false`, meaning it defaults to
    being hidden.
 
 ```
-<button type="button" bitIconButton="bwi-sliders" [buttonType]="'muted'" [bitDisclosureTriggerFor]="disclosureRef">
-  Toggle Filters
-</button>
+<button
+   type="button"
+   bitIconButton="bwi-sliders"
+   [buttonType]="'muted'"
+   [bitDisclosureTriggerFor]="disclosureRef"
+></button>
 <bit-disclosure #disclosureRef open>click button to hide this content</bit-disclosure>
 ```
 
 <Story of={stories.DisclosureWithIconButton} />
 
+<br />
+<br />
+
+## Supported Trigger Components
+
+This is the list of currently supported trigger components:
+
+- Icon button `muted` variant
+
 ## Accessibility
 
-The disclosure and trigger directive functionality follow the Disclosure (Show/Hide) pattern for
+The disclosure and trigger directive functionality follow the
+[Disclosure (Show/Hide)](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) pattern for
 accessibility, automatically handling the `aria-controls` and `aria-expanded` properties. A `button`
 element must be used as the trigger for the disclosure. The `button` element must also have an
 accessible label/title -- please follow the accessibility guidelines for whatever trigger component

libs/components/src/disclosure/disclosure.stories.ts

@@ -22,7 +22,6 @@ export const DisclosureWithIconButton: Story = {
     props: args,
     template: /*html*/ `
       <button type="button" bitIconButton="bwi-sliders" [buttonType]="'muted'" [bitDisclosureTriggerFor]="disclosureRef">
-        Toggle Filters
       </button>
       <bit-disclosure #disclosureRef class="tw-text-main tw-block" open>click button to hide this content</bit-disclosure>
     `,