React-styleguidist: Overriding Slots or UsageTabButton

[sibamohanty995]

I have to segregate my props and methods into 2 different tabs. (Currently, they are all shown under 1 tab).

I have been trying to override UsageTabButton in particular, but have been unable to do so.

Custom rendering and therefore, overriding doesn't seem to be working for either Slot or contents of slots.

Please let me know if there's a way.

[sibamohanty995]

@sapegin Any help will be appreciated. Thank you.

[sapegin]

I think we should change imports here to rsg-components/slots/... a:

https://github.com/styleguidist/react-styleguidist/blob/904fcafdc03da514a8b1b868f3796c0bdfb5406d/src/rsg-components/slots/index.js#L3-L5

Feel free to send a pull request ;-)

[sibamohanty995]

@sapegin Thank you, Will be sending a pull request, Just one last thing.

The styleguideComponents documentation says "Override React components used to render the style guide".

Does this specifically mean that only the files whose names end with Renderer like ComponentsListRenderer, PropsRenderer, TabButtonRenderer etc will be able to be overriden as such, and files like UsageTabButton wont be able to be overriden using the styleguideComponents?

If so, then the following change would still not be able to help in overriding the UsageTabButton file right?

[sapegin]

It should work with any component that's imported using the webpack alias rsg-components, though we don't recommend overriding non-render components.

[styleguidist-bot]

:tada: This issue has been resolved in version 7.2.3 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[aversini]

Did the fix work for you @sibamohanty995 ? I tried to override CodeTabButton that is located under slots with the latest build of RSG to no avail. I do override other components with no problem though (Ribbon, PlaygroundRenderer, etc.) Let me know if that worked for you, I may be having an issue in the way I'm configuring my styleguide.config.js for slots... Thanks!

[sibamohanty995]

@aversini Yes, it did work for me. Actually for other components when you override them in your styleguide.config.js, you just write the component name to be overriden : path of the overriding component
But for CodeTabButton, since it resides inside the slots folder, you've to write it like this in the styleguide.config.js :-
"slots/CodeTabButton" : path of the overriding component

[aversini]

Aaah, that makes sense, yes it's working for me too with that syntax, thanks a lot for the tip @sibamohanty995 👍

[caseycallow]

@sibamohanty995 Did you have any luck overriding not just a tab button but slots itself? I was doing this successfully prior to 7.2.3 in order to add my own HTML tab button, alongside the current React one. Now I get a Cannot find module 'rsg-components/slots/IsolateButton' error in my browser, even though I'm not importing it into the new slots override file. Let me know if you have any ideas! 🙌