Skip to content

support cross story linking and create example in Menu story#25850

Merged
micahgodbolt merged 2 commits intomicrosoft:masterfrom
micahgodbolt:links-in-storybook
Dec 1, 2022
Merged

support cross story linking and create example in Menu story#25850
micahgodbolt merged 2 commits intomicrosoft:masterfrom
micahgodbolt:links-in-storybook

Conversation

@micahgodbolt
Copy link
Member

@micahgodbolt micahgodbolt commented Nov 30, 2022

since URLs are hosted inside of an iframe, any anchor tag is going to be relative to that iframe...just doesn't work.

with addon-links, and the decorator, we can use link in markdown, or in examples via buttons or anchor tags.

<a href="#" data-sb-kind="components-button-menubutton--default">MenuButton</a>
<button data-sb-kind="components-button-menubutton--default">MenuButton</button>
// note that we use data-sb-kind and not data-sb-story

https://storybook.js.org/addons/@storybook/addon-links

@size-auditor
Copy link

size-auditor bot commented Nov 30, 2022

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 5079ab52943dded035d7bf7348d1c2762271ae9d (build)

@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 592abf5:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1492 1533 5000
Button mount 1103 1059 5000
FluentProvider mount 1781 1835 5000
FluentProviderWithTheme mount 732 715 10
FluentProviderWithTheme virtual-rerender 691 681 10
FluentProviderWithTheme virtual-rerender-with-unmount 732 730 10
MakeStyles mount 2227 2193 50000
SpinButton mount 2987 2896 5000

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-northstar)

⚠️ No perf measurements available

@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 Open the Visual Regressions report to inspect the 2 screenshots

✅ There was 2 screenshots added, 0 screenshots removed, 1037 screenshots unchanged, 0 screenshots with different dimensions and 0 screenshots with visible difference.

unknown 2 screenshots
Image Name Diff(in Pixels) Image Type
Pivot - Overflow.Tabs - RTL.Narrow - Last tab selected.chromium.png 0 Added
Pivot - Overflow.Tabs - RTL.Narrow - Overflow menu.chromium.png 0 Added

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
533 B
341 B
global-context
createContextSelector
554 B
348 B
priority-overflow
createOverflowManager
3.153 kB
1.299 kB
react-accordion
Accordion (including children components)
79.294 kB
24.443 kB
react-alert
Alert
82.967 kB
21.022 kB
react-avatar
Avatar
51.076 kB
14.285 kB
react-avatar
AvatarGroup
15.006 kB
6.009 kB
react-avatar
AvatarGroupItem
67.306 kB
18.581 kB
react-badge
Badge
23.357 kB
7.361 kB
react-badge
CounterBadge
24.247 kB
7.643 kB
react-badge
PresenceBadge
24.001 kB
7.049 kB
react-button
Button
32.923 kB
8.61 kB
react-button
CompoundButton
39.953 kB
9.933 kB
react-button
MenuButton
37.611 kB
9.942 kB
react-button
SplitButton
45.057 kB
11.323 kB
react-button
ToggleButton
48.753 kB
10.715 kB
react-card
Card - All
71.873 kB
20.936 kB
react-card
Card
67.651 kB
19.892 kB
react-card
CardFooter
8.617 kB
3.62 kB
react-card
CardHeader
9.792 kB
3.995 kB
react-card
CardPreview
8.718 kB
3.674 kB
react-combobox
Combobox (including child components)
78.244 kB
25.015 kB
react-combobox
Dropdown (including child components)
77.531 kB
24.927 kB
react-components
react-components: Button, FluentProvider & webLightTheme
59.018 kB
16.371 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
186.456 kB
52.327 kB
react-components
react-components: FluentProvider & webLightTheme
33.48 kB
11.037 kB
react-dialog
Dialog (including children components)
83.036 kB
24.754 kB
react-divider
Divider
16.515 kB
5.921 kB
react-image
Image
10.836 kB
4.283 kB
react-infobutton
InfoButton
117.922 kB
35.391 kB
react-input
Input
24.194 kB
7.89 kB
react-label
Label
9.394 kB
3.88 kB
react-link
Link
11.862 kB
4.885 kB
react-menu
Menu (including children components)
117.61 kB
36.287 kB
react-menu
Menu (including selectable components)
120.679 kB
36.82 kB
react-overflow
hooks only
11.004 kB
4.188 kB
react-persona
Persona
57.131 kB
15.951 kB
react-popover
Popover
103.666 kB
31.858 kB
react-portal
Portal
10.495 kB
3.851 kB
react-portal-compat
PortalCompatProvider
5.857 kB
1.978 kB
react-positioning
usePositioning
19.826 kB
7.417 kB
react-progress
Progress
13.536 kB
5.107 kB
react-provider
FluentProvider
15.817 kB
5.905 kB
react-radio
Radio
36.446 kB
12.123 kB
react-radio
RadioGroup
14.304 kB
5.72 kB
react-select
Select
23.474 kB
8.017 kB
react-slider
Slider
32.118 kB
10.192 kB
react-spinbutton
SpinButton
44.502 kB
12.812 kB
react-spinner
Spinner
20.013 kB
6.446 kB
react-switch
Switch
33.453 kB
10.581 kB
react-text
Text - Default
11.838 kB
4.625 kB
react-text
Text - Wrappers
15.148 kB
5.06 kB
react-textarea
Textarea
25.733 kB
8.328 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
29.722 kB
6.462 kB
react-theme
Teams: Light theme
17.51 kB
5.075 kB
react-tooltip
Tooltip
42.032 kB
14.739 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 5079ab52943dded035d7bf7348d1c2762271ae9d

A menu displays a list of actions. The Menu component handles the
state management of the passed in list of actions.

See also <a href="#" data-sb-kind="components-button-menubutton--default">MenuButton</a>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This approach still breaks copying link URLs to share or open somewhere else, and also opening links in a new tab. That's not much worse than what we currently have (only worse in the sense that at least the current approach lets you copy the ?path=etc params), but it'd be nice to use something that supports actual link functionality.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other than that, I like this better than our current approach 😊

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 Open the Visual Regressions report to inspect the 1 screenshots

✅ There was 0 screenshots added, 0 screenshots removed, 1753 screenshots unchanged, 0 screenshots with different dimensions and 1 screenshots with visible difference.

unknown 1 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.size+active+badge.normal.chromium.png 10 Changed

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1210 1149 5000
Breadcrumb mount 2983 2954 1000
Checkbox mount 2571 2533 5000
CheckboxBase mount 2378 2287 5000
ChoiceGroup mount 4529 4518 5000
ComboBox mount 1162 1288 1000
CommandBar mount 9494 9290 1000
ContextualMenu mount 11556 11495 1000
DefaultButton mount 1328 1393 5000
DetailsRow mount 3549 3555 5000
DetailsRowFast mount 3600 3573 5000
DetailsRowNoStyles mount 3459 3495 5000
Dialog mount 3193 3231 1000
DocumentCardTitle mount 581 599 1000
Dropdown mount 3165 3212 5000
FocusTrapZone mount 2053 2063 5000
FocusZone mount 1888 1770 5000
GroupedList mount 1823 2066 2
GroupedList virtual-rerender 1158 1142 2
GroupedList virtual-rerender-with-unmount 1686 1710 2
GroupedListV2 mount 586 565 2
GroupedListV2 virtual-rerender 536 565 2
GroupedListV2 virtual-rerender-with-unmount 556 555 2
IconButton mount 1971 1906 5000
Label mount 732 739 5000
Layer mount 4190 4304 5000
Link mount 850 837 5000
MenuButton mount 1743 1709 5000
MessageBar mount 2333 2322 5000
Nav mount 3260 3286 1000
OverflowSet mount 1392 1399 5000
Panel mount 2520 2516 1000
Persona mount 1274 1305 1000
Pivot mount 1638 1643 1000
PrimaryButton mount 1496 1515 5000
Rating mount 6977 6726 5000
SearchBox mount 1327 1421 5000
Shimmer mount 2742 2658 5000
Slider mount 2076 2062 5000
SpinButton mount 4512 4626 5000
Spinner mount 778 791 5000
SplitButton mount 2915 2862 5000
Stack mount 829 871 5000
StackWithIntrinsicChildren mount 2505 2444 5000
StackWithTextChildren mount 4979 4798 5000
SwatchColorPicker mount 10051 10552 5000
TagPicker mount 2541 2647 5000
TeachingBubble mount 89401 89998 5000
Text mount 771 706 5000
TextField mount 1460 1634 5000
ThemeProvider mount 1568 1465 5000
ThemeProvider virtual-rerender 1021 1045 5000
ThemeProvider virtual-rerender-with-unmount 2143 2161 5000
Toggle mount 1068 1141 5000
buttonNative mount 542 569 5000

Copy link
Contributor

@ling1726 ling1726 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While there are still problems like @smhigley mentioned, they have always been a problem with storybook, especially opening links in new tabs

@micahgodbolt micahgodbolt merged commit b7bc3ca into microsoft:master Dec 1, 2022
@micahgodbolt micahgodbolt deleted the links-in-storybook branch December 1, 2022 16:14
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Dec 2, 2022
* master:
  fix: Pressed and Hover states for toolbar buttons (microsoft#25835)
  feat: add large size for toolbar (microsoft#25830)
  applying package updates
  adding perf test for Persona (microsoft#25863)
  fix: Fixing Slider's programmatic focus (microsoft#25869)
  chore(v0 docs): Add storybook stories that reference docsite examples for 1JS VR tool migration (microsoft#25663)
  fix: Respecting user-provided ids in ComboBox options (microsoft#25867)
  refactor(scripts): more domain boundaries encapsulation (microsoft#25851)
  docs: add documentation about how to migrate V0 createSvgIcon (microsoft#25828)
  support cross story linking and create example in Menu story (microsoft#25850)
Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023
…ft#25850)

* support cross story linking and create example in Menu story

* change
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants