Merge pull request #2401 from hashicorp/alex-ju/typescript-fixes

`DismissButton`, `RadioCard::Group`, `RichTooltip::Toggle` - Type safety fixes
hashicorp · Sep 10, 2024 · 7e4f2f9 · 7e4f2f9
2 parents bba9715 + 6e04e73
commit 7e4f2f9
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 14 deletions.
diff --git a/.changeset/clean-tigers-promise.md b/.changeset/clean-tigers-promise.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`DismissButton`, `RadioCard::Group`, `RichTooltip::Toggle` - Type safety fixes
diff --git a/packages/components/src/components/hds/dismiss-button/index.hbs b/packages/components/src/components/hds/dismiss-button/index.hbs
@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0

diff --git a/packages/components/src/components/hds/form/field/index.ts b/packages/components/src/components/hds/form/field/index.ts
@@ -21,6 +21,7 @@ import HdsFormErrorComponent from '../error/index.ts';
 import type { HdsFormFieldLayouts } from './types.ts';
 import type { ComponentLike, WithBoundArgs } from '@glint/template';
 import type { HdsYieldSignature } from '../../yield/index.ts';
+import type { AriaDescribedByComponent } from '../../../../utils/hds-aria-described-by.ts';
 
 export const LAYOUT_TYPES = Object.values(HdsFormFieldLayoutValues);
 
@@ -131,10 +132,10 @@ export default class HdsFormField extends Component<HdsFormFieldSignature> {
 
  @action
  appendDescriptor(element: HTMLElement): void {
- registerAriaDescriptionElement(this, element);
+ registerAriaDescriptionElement(this as AriaDescribedByComponent, element);
  }
 
  @action removeDescriptor(element: HTMLElement): void {
- unregisterAriaDescriptionElement(this, element);
+ unregisterAriaDescriptionElement(this as AriaDescribedByComponent, element);
  }
 }
diff --git a/packages/components/src/components/hds/form/fieldset/index.ts b/packages/components/src/components/hds/form/fieldset/index.ts
@@ -19,9 +19,11 @@ import HdsFormErrorComponent from '../error/index.ts';
 import type { ComponentLike, WithBoundArgs } from '@glint/template';
 import type { HdsFormFieldsetLayouts } from './types.ts';
 import type { HdsYieldSignature } from '../../yield/index.ts';
+import type { AriaDescribedByComponent } from '../../../../utils/hds-aria-described-by.ts';
 
 export interface HdsFormFieldsetSignature {
  Args: {
+ extraAriaDescribedBy?: string;
  isOptional?: boolean;
  isRequired?: boolean;
  layout?: HdsFormFieldsetLayouts;
@@ -106,10 +108,10 @@ export default class HdsFormFieldset extends Component<HdsFormFieldsetSignature>
 
  @action
  appendDescriptor(element: HTMLElement): void {
- registerAriaDescriptionElement(this, element);
+ registerAriaDescriptionElement(this as AriaDescribedByComponent, element);
  }
 
  @action removeDescriptor(element: HTMLElement): void {
- unregisterAriaDescriptionElement(this, element);
+ unregisterAriaDescriptionElement(this as AriaDescribedByComponent, element);
  }
 }
diff --git a/packages/components/src/components/hds/form/fieldset/types.ts b/packages/components/src/components/hds/form/fieldset/types.ts
@@ -5,7 +5,7 @@
 
 export enum HdsFormFieldsetLayoutValues {
  Vertical = 'vertical',
- Flag = 'flag',
+ Horizontal = 'horizontal',
 }
 
 export type HdsFormFieldsetLayouts = `${HdsFormFieldsetLayoutValues}`;
diff --git a/packages/components/src/components/hds/form/radio-card/group.hbs b/packages/components/src/components/hds/form/radio-card/group.hbs
@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0

diff --git a/packages/components/src/components/hds/rich-tooltip/toggle.hbs b/packages/components/src/components/hds/rich-tooltip/toggle.hbs
@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0
@@ -16,14 +15,18 @@
  {{~#if (has-block)~}}
  {{yield}}
  {{~else~}}
- {{~#if (and @icon (eq this.iconPosition "leading"))~}}
- <Hds::Icon class="hds-rich-tooltip__toggle-icon" @name={{@icon}} @isInline={{this.isInline}} />
+ {{~#if @icon~}}
+ {{~#if (eq this.iconPosition "leading")~}}
+ <Hds::Icon class="hds-rich-tooltip__toggle-icon" @name={{@icon}} @isInline={{this.isInline}} />
+ {{~/if~}}
  {{~/if~}}
  {{~#if @text~}}
  <span class="hds-rich-tooltip__toggle-text">{{~@text~}}</span>
  {{~/if~}}
- {{~#if (and @icon (eq this.iconPosition "trailing"))~}}
- <Hds::Icon class="hds-rich-tooltip__toggle-icon" @name={{@icon}} @isInline={{this.isInline}} />
+ {{~#if @icon~}}
+ {{~#if (eq this.iconPosition "trailing")~}}
+ <Hds::Icon class="hds-rich-tooltip__toggle-icon" @name={{@icon}} @isInline={{this.isInline}} />
+ {{~/if~}}
  {{~/if~}}
  {{~/if~}}
 </button>
diff --git a/packages/components/src/utils/hds-aria-described-by.ts b/packages/components/src/utils/hds-aria-described-by.ts
@@ -42,9 +42,10 @@ class AriaDescriptorMap {
 
 const ariaDescriptorMap = new AriaDescriptorMap();
 
-type AriaDescribedByArgs = HdsFormFieldSignature & HdsFormFieldsetSignature;
+type AriaDescribedByArgs = HdsFormFieldSignature | HdsFormFieldsetSignature;
 
-interface AriaDescribedByComponent extends Component<AriaDescribedByArgs> {
+export interface AriaDescribedByComponent
+ extends Component<AriaDescribedByArgs> {
  __ARIA_DESCRIPTION_IDS__?: string[];
  ariaDescribedBy?: string;
 }