Add ability to selectively hide columns on ArgsTable

[sir-captainmorgan21]

Issue: #16179

What I did

• Added a hideColumns prop to the ArgsTable component.
  • It allows for hiding the description, default, and control columns
• Added stories for each column being hidden
• Updated docs to include new prop

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

[MichaelArestad]

Nice work! Looks like there's a minor typo here:

Suggested change

	{compact || hideColumns?.includes('descrption') ? null : (
	{compact || hideColumns?.includes('description') ? null : (

[sir-captainmorgan21]

good catch. I should probably check my story too. Haha feel like my story wouldn't have been working. Thanks!

[jonniebigodes]

@sir-captainmorgan21 this is really a cool feature, and thanks for working on this. From my end, I left a small note on some minor changes on the documentation side.

Let us know once you have had the chance to go over them so that we can follow up with you on this.

Hope you have a great week.

Stay safe

[jonniebigodes]

@sir-captainmorgan21 as @MichaelArestad in the comment above, don't forget to update this one as well.

[sir-captainmorgan21]

I suck. Thanks!

[jonniebigodes]

@sir-captainmorgan21, we have a bit of room for improvement here. If you wouldn't mind updating the table to the following:

| Option        | Description                                                                                                                                                                                |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `of`          | Infers the args table from the component. <br/> `<ArgsTable of={MyComponent} />`                                                                                                           |
| `story`       | Infers the args table based on a story. <br/> `<ArgsTable story="example-mycomponent--my-story" />`                                                                                        |
| `hideColumns` | Toggles visibility for the args table columns.<br/>Available options: `description`, `default`, `control`. <br/> `<ArgsTable of={MyComponent} hideColumns={['default', 'description']} />` |

Also, if you are ok, could you create a small code snippet file in the docs/snippets/common directory with a small example showcasing the work you did and link below in the <CodeSnippets /> component? Turning it into:

<CodeSnippets
  paths={[
    'common/component-story-mdx-argstable-block-for-component.with-component.mdx.mdx',
    'common/component-story-mdx-argstable-block-for-story.with-story.mdx.mdx',
    'common/component-story-mdx-argstable-hide-columns.with-story.mdx.mdx',  //👈 Your snippet file here
  ]}
/>

With it, we can provide a bit more clarity on the documentation.

If you have trouble adding the snippets, this documentation provides you with the context you need, and if you have any questions regarding the documentation changes, feel free to ping me and I'll gladly answer them.

[sir-captainmorgan21]

Ill knock these out. Thanks!

[sir-captainmorgan21]

@MichaelArestad @jonniebigodes thanks for the reviews. I addressed your comments. I did have a question:

Whats the best way to test and make sure the doc block works? I updated the component and wrote stories for the component. How can I make sure the doc block that uses the component works?

[MichaelArestad]

@sir-captainmorgan21 Thanks for making those changes! This looks good and works as expected.

You can find the published stories for ArgsTable here:

You can also run the Official Storybook locally via 'yarn start' in the code directory. You may need to run ./bootstrap.sh again to rebuild the Storybook UI.

We will look at this API change along side other changes considered for 7.0. We will leave this open and will follow up with an update.

[jonniebigodes]

@sir-captainmorgan21 to get this pr moving forward; from my end, it looks good for the time being, as far as docs go. You'll probably need to check out the conflicts on this and act accordingly if you're willing. Also, @JReinhold, can you chime in on this as you've been doing some work on Doc Blocks? Is this something you've considered?

[JReinhold]

On the surface this looks good @sir-captainmorgan21 !

However we're currently working on deprecating the ArgsTable block in favor of two separate blocks, Args (static table) and Controls (table with controls) in an attempt at making both the API and implementation simpler.

I could still see this feature in that setup though, so my suggestion would be that once we've finalised that work I'll ping you and you could then open a similar PR to those blocks. I suspect the implementation would be very similar to this.

Therefore I suggest we close this PR, as there's no real reason to add this nice feature to a soon-to-be-deprecated block.

[sir-captainmorgan21]

@JReinhold oh ok awesome. Sounds good to me! Will you ping back here once the new Args and Controls tables are done? Or should I subscribe to another PR of this work?

[JReinhold]

@sir-captainmorgan21 sorry I forgot this. They're done now! See them at #20664 and #20683

[sir-captainmorgan21]

@JReinhold ahh ok sounds good. Ill open a new PR. Thanks!

[sir-captainmorgan21]

@JReinhold I did have one question on those new components. I've upgraded to the latest SB 7.0 beta. However, the default values of the props aren't being set in my stories like before. I basically have to explicitly define all the prop values as opposed to letting the defaults do their thing. It is setting them to undefined if not provided

CC: @shilman since I know you do a good amount of work on Angular stuff and this seems related to compodoc

[JReinhold]

@sir-captainmorgan21 could you open a new issue for that?

[sir-captainmorgan21]

@JReinhold I can. FWIW, I did create a support post over in the Discord server

[sir-captainmorgan21]

@JReinhold ok created a new issue: #21300 Thanks!

[vinodkola1337]

Any update on this feature? I am looking forward to use this in SB7.