feat: Add Invoker Commands support for DBButton#6603
Conversation
Enable Invoker Commands for DBButton using command attributes.
github-project-automation
Bot
moved this to 🏗 In progress
in UX Engineering Team Backlog
🦋 Changeset detectedLatest commit: 7f8cad4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 13 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
Bot
added
the
📕documentation
Augment React's ButtonHTMLAttributes with command and commandfor attributes for Invoker Commands API support.
Safeguard our current replacements due to new attributes that include the phrase `for` as well (`commandfor`).
Added command and commandfor attributes to DBButtonDefaultProps type.
mfranzke
moved this from 🏗 In progress
to 🎁 Ready for review
in UX Engineering Team Backlog
There was a problem hiding this comment.
Pull request overview
Adds support for the HTML Invoker Commands API to DBButton across generated framework outputs, including a React-specific workaround for missing attribute typings, and hardens a Stencil post-build replacement to avoid corrupting commandfor.
Changes:
- Extend
DBButtonprops and rendering to forwardcommandandcommandforto the underlying<button>. - Add a React post-build step that generates a React type augmentation file and wires it into the React output entrypoint.
- Update the Stencil post-build
for={→htmlFor={replacement to avoid affectingcommandfor={.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/src/components/button/model.ts | Adds new optional command/commandfor props to DBButton’s public API. |
| packages/components/src/components/button/button.lite.tsx | Forwards command/commandfor props to the rendered <button>. |
| packages/components/scripts/post-build/stencil.ts | Uses a safer regex replacement to avoid transforming commandfor. |
| packages/components/scripts/post-build/react.ts | Generates React type augmentation for command/commandfor and appends an import to the React entrypoint. |
| .changeset/invoker-commands.md | Adds a changeset for the feature (framework packages only). |
Agent-Logs-Url: https://github.com/db-ux-design-system/core-web/sessions/eb00be23-47bb-4e1b-a275-5b194c9ad11d Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>
Head branch was pushed to by a user without write access
Agent-Logs-Url: https://github.com/db-ux-design-system/core-web/sessions/6eb679ea-33c9-4d9e-a15c-660ae4fd2cdc Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>
Head branch was pushed to by a user without write access
Agent-Logs-Url: https://github.com/db-ux-design-system/core-web/sessions/6eb679ea-33c9-4d9e-a15c-660ae4fd2cdc Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>
| const cleanupFilePaths = [ | ||
| `${srcFolder}/invoker-commands.ts`, | ||
| `${srcFolder}/invoker-commands.d.ts`, | ||
| `${outputFolder}/dist/invoker-commands.js`, | ||
| `${outputFolder}/dist/invoker-commands.d.ts`, | ||
| ...(tmp | ||
| ? [] | ||
| : [ | ||
| '../../build-outputs/react/dist/invoker-commands.js', | ||
| '../../build-outputs/react/dist/invoker-commands.d.ts' | ||
| ]) | ||
| ]; |
There was a problem hiding this comment.
Why do we need this? We never write those files
There was a problem hiding this comment.
349034c added that cleanup only to remove stale artifacts from earlier builds. We no longer generate invoker-commands*, but our React flow copies/overwrites existing directories (cpr --overwrite) and tsc also does not clean dist, so old output/react/src/invoker-commands.ts, output/react/dist/invoker-commands.js, or build-outputs/react/dist/invoker-commands.js can survive incremental/local rebuilds and still get published. So those paths are not newly written anymore—they are just purged if they were left over from the previous implementation.
There was a problem hiding this comment.
@nmerget I guess Copilot means: PRs welcome, let's fix React together !
| let indexContent = readFileSync(indexFilePath).toString('utf-8'); | ||
| indexContent = indexContent.replace( | ||
| /\nimport(?: type \{\} from)? ['"]\.\/invoker-commands['"];\n?/g, | ||
| '\n' | ||
| ); | ||
|
|
||
| if (!indexContent.includes(typeAugmentationMarker)) { | ||
| indexContent += content; | ||
| } |
There was a problem hiding this comment.
The file is genereated completely new isn't it? Why do we need this check here. I guess we can just append it to the bottom of the file
nmerget
moved this from 🎁 Ready for review
to 🎶 Waiting for feedback
in UX Engineering Team Backlog
Proposed changes
Enable Invoker Commands API (
command- andcommandfor-HTML-attributes) for DBButton. It's a well established, baseline feature that users might wanna use in their websites and applications, so we should provide support for it.Additionally we need to mitigate React being late to the party again (missing support / types).
And further enhancing resilience on an internal replacement regarding attribute naming (
forphrase, which is part of the phrasecommandforas well).Types of changes
Further comments
🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/feat-add-invoker-commands-support-for-DBButton