Skip to content

feat(#3361): add JSDocs comments to wrappers and common types#3715

Merged
ArakTaiRoth merged 1 commit intodevfrom
benji/3159-add-jsdocs-to-wrappers
Apr 13, 2026
Merged

feat(#3361): add JSDocs comments to wrappers and common types#3715
ArakTaiRoth merged 1 commit intodevfrom
benji/3159-add-jsdocs-to-wrappers

Conversation

@bdfranck
Copy link
Copy Markdown
Collaborator

@bdfranck bdfranck commented Mar 31, 2026

React and Angular wrappers lacked JSDoc comments, giving consumers no inline documentation in their IDE when using components or inspecting props.

JSDoc added across all wrappers

  • Component-level descriptions on every exported class/function
  • Prop-level descriptions using consistent Sets the... phrasing, with @default, @required, and @deprecated tags where applicable
  • Common types (GoabInputOnChangeDetail, etc.) documented for IDE hover tooltips

Required/optional corrections (found during audit)

File Change
file-upload-card.ts size@Input({ required: true }), aligned with React + Svelte
file-upload-input.ts variant → optional with @default "dragdrop", aligned with React + Svelte
accordion.tsx heading → optional, aligned with Angular
popover.tsx target → required, aligned with Angular
drawer.ts, modal.ts, radio-item.ts Removed incorrect @required JSDoc tags from optional fields

Before (the change)

No inline documentation when consuming React/Angular wrapper components — no component descriptions, no prop hints, no type documentation visible in IDEs.

After (the change)

Hovering a component or prop in any IDE shows descriptions, defaults, deprecation notices, and required flags sourced directly from the wrapper source.

Make sure that you've checked the boxes below before you submit the PR

  • I have read and followed the setup steps
  • I have created necessary unit tests
  • I have tested the functionality in both React and Angular.

Steps needed to test

Open a project consuming @abgov/react-components or @abgov/angular-components and hover over any component or prop to verify JSDoc descriptions appear. Check @required, @default, and @deprecated tags render correctly in the IDE tooltip.

@bdfranck bdfranck linked an issue Mar 31, 2026 that may be closed by this pull request
@Spark450 Spark450 added the P1 Priority 1 (must have): Prevents product teams from adopting/using DS 2.0 as intended at launch. label Mar 31, 2026
@bdfranck bdfranck force-pushed the benji/3159-add-jsdocs-to-wrappers branch 3 times, most recently from ba51038 to 1813a47 Compare April 1, 2026 22:05
@bdfranck bdfranck requested a review from ArakTaiRoth April 1, 2026 22:15
@bdfranck bdfranck marked this pull request as ready for review April 1, 2026 22:16
@bdfranck bdfranck requested a review from vanessatran-ddi April 2, 2026 21:32
Comment thread libs/angular-components/src/lib/components/base.component.ts Outdated
Comment thread libs/angular-components/src/lib/components/form-item/form-item-slot.ts Outdated
Comment thread libs/angular-components/src/lib/components/badge/badge.ts
Comment thread libs/angular-components/src/lib/components/badge/badge.ts Outdated
@bdfranck
Copy link
Copy Markdown
Collaborator Author

bdfranck commented Apr 7, 2026

@copilot Make the following changes:

  • Change the comments from "Defines the..." with "Sets the..."
  • Change the testId comments to "Sets the data-testid attribute for automated testing."
  • Make the GoabFormItemSlot comment @required

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 7, 2026

@copilot Make the following changes:

  • Change the comments from "Defines the..." with "Sets the..."
  • Change the testId comments to "Sets the data-testid attribute for automated testing."
    ...

Done in b76d497:

  • Changed all "Defines the..." comments to "Sets the..." across Angular (badge.ts, input.ts, input-number.ts) and React (badge.tsx, modal.tsx, callout.tsx) wrappers
  • Updated testId comment in base.component.ts to "Sets the data-testid attribute for automated testing."
  • Added @required to the GoabFormItemSlot slot comment in form-item-slot.ts

Comment thread libs/angular-components/src/lib/components/badge/badge.ts Outdated
Comment thread libs/angular-components/src/lib/components/badge/badge.ts Outdated
Comment thread libs/angular-components/src/lib/components/badge/badge.ts Outdated
Comment thread libs/angular-components/src/lib/components/block/block.ts Outdated
Comment thread libs/angular-components/src/lib/components/block/block.ts Outdated
Comment thread libs/angular-components/src/lib/components/block/block.ts Outdated
Comment thread libs/angular-components/src/lib/components/button/button.ts Outdated
Comment thread libs/angular-components/src/lib/components/button/button.ts Outdated
Comment thread libs/angular-components/src/lib/components/button/button.ts Outdated
Copy link
Copy Markdown
Collaborator

@vanessatran-ddi vanessatran-ddi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see some properties in angular documented as Sets the ... while some are not. I checked this rule https://github.com/GovAlta/ui-components/blob/dev/CLAUDE.md?plain=1#L109 and looks like we should follow the rule starts vs Sets the .. pattern. However it is not a blocker for me.

Comment thread libs/react-components/src/lib/accordion/accordion.tsx Outdated
Comment thread libs/angular-components/src/lib/components/drawer/drawer.ts Outdated
Comment thread libs/angular-components/src/lib/components/file-upload-card/file-upload-card.ts Outdated
Comment thread libs/angular-components/src/lib/components/file-upload-input/file-upload-input.ts Outdated
@bdfranck bdfranck requested a review from vanessatran-ddi April 7, 2026 22:30
@chrisolsen chrisolsen self-requested a review April 8, 2026 00:58
@bdfranck bdfranck force-pushed the benji/3159-add-jsdocs-to-wrappers branch from 97bf331 to d4fcb29 Compare April 8, 2026 02:13
@bdfranck bdfranck changed the title feat(#3159): add JSDocs to React and Angular component wrappers feat(#3361): add JSDocs comments to wrappers and common types Apr 8, 2026
Copy link
Copy Markdown
Collaborator

@vanessatran-ddi vanessatran-ddi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

Comment thread libs/angular-components/src/lib/components/tabs/tabs.ts Outdated
@bdfranck bdfranck force-pushed the benji/3159-add-jsdocs-to-wrappers branch from d4fcb29 to 003d839 Compare April 12, 2026 22:10
@netlify
Copy link
Copy Markdown

netlify bot commented Apr 12, 2026

Deploy Preview for benji-docs-previews ready!

Name Link
🔨 Latest commit 7afd6cd
🔍 Latest deploy log https://app.netlify.com/projects/benji-docs-previews/deploys/69dd461aa56e150008dfe5b5
😎 Deploy Preview https://deploy-preview-3715--benji-docs-previews.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@bdfranck bdfranck requested review from ArakTaiRoth and chrisolsen and removed request for chrisolsen April 13, 2026 14:42
@bdfranck bdfranck force-pushed the benji/3159-add-jsdocs-to-wrappers branch 2 times, most recently from d2b11ed to 22682b8 Compare April 13, 2026 17:15
Comment thread libs/react-components/src/lib/form-item/form-item.tsx Outdated
Comment thread libs/angular-components/src/lib/components/form-item/form-item.ts Outdated
Comment thread libs/angular-components/src/lib/components/checkbox-list/checkbox-list.ts Outdated
Comment thread libs/angular-components/src/lib/components/radio-group/radio-group.ts Outdated
Comment thread libs/angular-components/src/lib/components/form-stepper/form-stepper.ts Outdated
Comment thread libs/angular-components/src/lib/components/tabs/tabs.ts Outdated
Comment thread libs/angular-components/src/lib/components/notification/notification.ts Outdated
Comment thread libs/react-components/src/lib/block/block.tsx
Comment thread libs/react-components/src/lib/modal/modal.tsx Outdated
@bdfranck
Copy link
Copy Markdown
Collaborator Author

@copilot Address the latest review comments on this PR.

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 13, 2026

@copilot Address the latest review comments on this PR.

All review comments addressed in b8f8148:

  • form-item.tsx + form-item.ts: Removed invalid compact from GoabFormItemLabelSize JSDoc
  • checkbox-list.ts: Fixed onChange comment — "labels" → "event"
  • radio-group.ts: Fixed onChange comment — "label" → "event"
  • form-stepper.ts: Removed non-existent stepIndex from onChange comment
  • tabs.ts: Removed non-existent heading from onChange comment
  • notification.ts: Fixed emphasis comment — filledlow
  • common.ts: Added "normal" to GoabBlockAlignment type
  • modal.tsx: Updated onClose comment to mention it enables the close button

Co-Authored-By: bdfranck <1479091+bdfranck@users.noreply.github.com>
Co-Authored-By: Copilot <198982749+Copilot@users.noreply.github.com>
@bdfranck bdfranck force-pushed the benji/3159-add-jsdocs-to-wrappers branch from b8f8148 to 7afd6cd Compare April 13, 2026 19:37
@bdfranck
Copy link
Copy Markdown
Collaborator Author

I squashed co-pilot's commit into mine.

@ArakTaiRoth ArakTaiRoth merged commit de204b9 into dev Apr 13, 2026
8 checks passed
@ArakTaiRoth ArakTaiRoth deleted the benji/3159-add-jsdocs-to-wrappers branch April 13, 2026 19:57
@chrisolsen
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 2.0.0-dev.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 2.0.0-dev.8 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 7.0.0-dev.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 5.0.0-dev.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

P1 Priority 1 (must have): Prevents product teams from adopting/using DS 2.0 as intended at launch. released on @dev

Projects

None yet

Development

Successfully merging this pull request may close these issues.

JSDocs in Wrappers

6 participants