Add ability to selectively hide columns on ArgsTable #18928

sir-captainmorgan21 · 2022-08-13T03:49:17Z

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 · 2022-08-15T14:52:33Z

code/lib/blocks/src/components/ArgsTable/ArgRow.tsx

@@ -87,7 +88,7 @@ export const ArgRow: FC<ArgRowProps> = (props) => {
        <Name>{name}</Name>
        {required ? <Required title="Required">*</Required> : null}
      </StyledTd>
-      {compact ? null : (
+      {compact || hideColumns?.includes('descrption') ? null : (


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

Suggested change

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

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

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 · 2022-08-15T21:12:26Z

code/lib/blocks/src/components/ArgsTable/types.ts

@@ -47,3 +47,5 @@ export interface Args {
 }

 export type Globals = { [name: string]: any };
+
+export type HidableColumn = 'descrption' | 'default' | 'control';


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

I suck. Thanks!

jonniebigodes · 2022-08-15T21:27:50Z

docs/writing-docs/doc-block-argstable.md

+| 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` | An array of columns to hide. Hidable Columns: `descrption`, `default`, `control`. <br/> `<ArgsTable of={MyComponent} hideColumns={['default', 'description']}` |


@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.

Ill knock these out. Thanks!

typos docs clean up

sir-captainmorgan21 · 2022-08-19T00:40:37Z

@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 · 2022-08-22T15:11:12Z

@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 · 2023-01-13T22:02:37Z

@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 · 2023-01-13T23:08:02Z

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 · 2023-01-19T17:59:08Z

@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 · 2023-01-23T20:07:55Z

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

sir-captainmorgan21 · 2023-02-27T19:58:50Z

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

sir-captainmorgan21 · 2023-02-28T14:45:57Z

@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 · 2023-02-28T14:51:28Z

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

sir-captainmorgan21 · 2023-02-28T14:59:53Z

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

sir-captainmorgan21 · 2023-03-06T20:10:49Z

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

vinodkola1337 · 2023-07-12T06:44:26Z

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

feat: add ability to selectively hide columns on ArgsTable

439168c

MichaelArestad reviewed Aug 15, 2022

View reviewed changes

MichaelArestad assigned shilman, yannbf and jonniebigodes Aug 15, 2022

jonniebigodes requested changes Aug 15, 2022

View reviewed changes

chore: addressed PR comments

e050640

typos docs clean up

MichaelArestad added addon: docs block: argstable feature request labels Aug 22, 2022

sir-captainmorgan21 requested a review from jonniebigodes January 12, 2023 01:27

JReinhold closed this Jan 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add ability to selectively hide columns on ArgsTable #18928

Add ability to selectively hide columns on ArgsTable #18928

sir-captainmorgan21 commented Aug 13, 2022 •

edited

Loading

MichaelArestad Aug 15, 2022

sir-captainmorgan21 Aug 18, 2022

jonniebigodes left a comment

jonniebigodes Aug 15, 2022

sir-captainmorgan21 Aug 18, 2022

jonniebigodes Aug 15, 2022

sir-captainmorgan21 Aug 18, 2022

sir-captainmorgan21 commented Aug 19, 2022

MichaelArestad commented Aug 22, 2022 •

edited

Loading

jonniebigodes commented Jan 13, 2023

JReinhold commented Jan 13, 2023

sir-captainmorgan21 commented Jan 19, 2023

JReinhold commented Jan 23, 2023

sir-captainmorgan21 commented Feb 27, 2023

sir-captainmorgan21 commented Feb 28, 2023

JReinhold commented Feb 28, 2023

sir-captainmorgan21 commented Feb 28, 2023

sir-captainmorgan21 commented Mar 6, 2023

vinodkola1337 commented Jul 12, 2023

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

Add ability to selectively hide columns on ArgsTable #18928

Add ability to selectively hide columns on ArgsTable #18928

Conversation

sir-captainmorgan21 commented Aug 13, 2022 • edited Loading

What I did

How to test

MichaelArestad Aug 15, 2022

Choose a reason for hiding this comment

sir-captainmorgan21 Aug 18, 2022

Choose a reason for hiding this comment

jonniebigodes left a comment

Choose a reason for hiding this comment

jonniebigodes Aug 15, 2022

Choose a reason for hiding this comment

sir-captainmorgan21 Aug 18, 2022

Choose a reason for hiding this comment

jonniebigodes Aug 15, 2022

Choose a reason for hiding this comment

sir-captainmorgan21 Aug 18, 2022

Choose a reason for hiding this comment

sir-captainmorgan21 commented Aug 19, 2022

MichaelArestad commented Aug 22, 2022 • edited Loading

jonniebigodes commented Jan 13, 2023

JReinhold commented Jan 13, 2023

sir-captainmorgan21 commented Jan 19, 2023

JReinhold commented Jan 23, 2023

sir-captainmorgan21 commented Feb 27, 2023

sir-captainmorgan21 commented Feb 28, 2023

JReinhold commented Feb 28, 2023

sir-captainmorgan21 commented Feb 28, 2023

sir-captainmorgan21 commented Mar 6, 2023

vinodkola1337 commented Jul 12, 2023

sir-captainmorgan21 commented Aug 13, 2022 •

edited

Loading

MichaelArestad commented Aug 22, 2022 •

edited

Loading