Closes #20354

This enhancement globally filters controls in the React storybook and removes previous usages of table: { disable: true }, in favour of Storybook's include/exclude control filtering, while also maintaining all argTypes for documentation purposes in the Overview pages.

The following controls are globally filtered:

• className
• children
• as
• decorator
• slug
• ref
• ariaLabel
  • This is because ariaLabel has been deprecated in favour of aria-label
• onChange, onClick, on....

Changelog

New

• Added an argTypesEnhancers to preview.js that takes in an array of strings/regexes "GLOBAL_EXCLUDED_CONTROLS" of controls we want to globally filter out by applying table: { disable: true }, to them

  • This method was used due to a limitation with Storybook's parameters. Globally filtering controls via parameters = { controls: { exclude: .... }, would block the ability to filter controls specific to a single component's stories, the global filter would get overwritten. This then leads to us having to either reapply the global filter on top of a specific filter for each story, or use table: { disable: true },, both of which are methods that weaken this enhancement and its purpose. argTypesEnhancers allows for developers to use story specific control filtering with no issue.

  • The filter also ensures that controls/args aren't filtered out of the Overview pages, as even though they may not be used in the stories, they are useful as documentation for users.

Changed

• Changed usages of table: { disable: true }, to parameters = { controls: { exclude/include: .... }, throughout the codebase

Removed

• Removed usages of table: { disable: true }, to disable controls throughout codebase
• Removed usages of table: { disable: true }, that hid argType from the Overview page throughout the codebase
  • There were few exceptions to this. Like args that cannot be used with the current component (e.g. FluidTextArea and helperText, hideLabel, and light) either due to the args being inherited from a parent component, or not being supported (light).

Testing / Reviewing

• Stories should have the globally filtered controls not shown in their controls table
• ArgTypes should still be visible in Overview Page
• There shouldn't be unnecessary usages of table: { disable: true }, in the storybook files in this branch
• Mention if there should be more/less controls added to the list of globally filtered controls
• There should be no regression
• CI should pass

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

• Reviewed every line of the diff
• Updated documentation and storybook examples
• [ ] Wrote passing tests that cover this change
• [ ] Addressed any impact on accessibility (a11y)
• Tested for cross-browser consistency
• Validated that this code is ready for review and status checks should pass