feat(storybook): implement argTypeEnhancers for improved Slot API docs rendering #33838
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Hotell
changed the title
📊 Bundle size report✅ No changes found |
🕵 FluentUIV0 No visual regressions between this PR and main |
|
Pull request demo site: URL |
fabricteam
reviewed
Feb 13, 2025
Hotell
changed the title
Hotell
commented
Feb 14, 2025
Hotell
commented
Feb 14, 2025
| const styles = useStyles(); | ||
|
|
||
| const { component } = withSlotEnhancer(story); |
There was a problem hiding this comment.
Task:
- verify that this doesn't mutate story object as we don't wanna do that to prevent any unwanted side effects
Hotell
commented
Feb 14, 2025
| @@ -219,7 +256,7 @@ export const FluentDocsPage = () => { | |||
| {videos && <VideoPreviews videos={videos} />} | |||
| </div> | |||
| <RenderPrimaryStory primaryStory={primaryStory} skipPrimaryStory={skipPrimaryStory} /> | |||
| <RenderArgsTable primaryStory={primaryStory} hideArgsTable={hideArgsTable} /> | |||
| <RenderArgsTable story={primaryStory} hideArgsTable={hideArgsTable} argTypes={primaryStoryContext.argTypes} /> | |||
There was a problem hiding this comment.
these argTypes are properly transformed via preview enhance in preview.js although we cannot use them it seems
Task:
- revert this argTypes prop change
|
@carlamntn please see comments and Task to follow-up/finish this PR ty |
Hotell
commented
Feb 19, 2025
Hotell
commented
Feb 19, 2025
apps/public-docsite-v9/src/DocsComponents/FluentDocsPage.stories.tsx
Outdated
Show resolved
Hide resolved
Hotell
commented
Feb 27, 2025
| all <code>aria-*</code> and <code>data-*</code> attributes, can be applied as native props on this | ||
| component. | ||
| </span> | ||
| {story.argTypes.as && story.argTypes.as?.type?.name === 'enum' && ( |
There was a problem hiding this comment.
we have here a repetition already - time to encapsulate this into separate component
Task:
- create a local component with following API usage:
<AdditionalApiDocs>
custom content
</AdditionalApiDocs>- render these components with extra info conditionaly
const hasArgAsProp = story.argTypes.as && story.argTypes.as?.type?.name === 'enum';
const hasArgSlotProp = ???;
return
{ hasArgAsProp ? <AdditionalApiDocs>
custom content
</AdditionalApiDocs>: null }
{ hasArgSlotProp ? <AdditionalApiDocs>
custom content
</AdditionalApiDocs>: null }
Hotell
commented
Feb 27, 2025
| const RenderArgsTable = ({ hideArgsTable, primaryStory }: { primaryStory: PrimaryStory; hideArgsTable: boolean }) => { | ||
| const slotRegex = /as\?:\s*"([^"]+)"/; | ||
|
|
||
| function withSlotEnhancer(story: PreparedStory) { |
There was a problem hiding this comment.
Task:
- tweak this function to get info if Slot was set
We can leverage this logic to flag if Slot was found and set.
Later on, this flag can be used as part of the API of this function to be leveraged later in conditional rendering of additional info component.
github-actions
bot
modified the milestones:
February Project Cycle Q1 2025,
March Project Cycle Q1 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Previous Behavior
New Behavior
Leverages Storybook Arg enhancer hook to tweak ouput as needed without any changes necessary in v9 codebase ( not affecting consumers of v9 )
Related Issue(s)
Slot<T>type #27105