Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Stack): Add deprecated flag to render null when receiving a falsy value #28978

Merged
merged 3 commits into from
Aug 24, 2023

Conversation

sopranopillow
Copy link
Contributor

Previous Behavior

After #25685, we no longer render null when receiving a falsy value in Stack. Instead, we render the actual child.

New Behavior

We keep the same behavior, but allow the previous behavior under a doNotRenderFalsyValues prop.

Related Issue(s)

@sopranopillow sopranopillow self-assigned this Aug 24, 2023
@sopranopillow sopranopillow requested review from khmakoto and a team as code owners August 24, 2023 19:03
@fabricteam
Copy link
Collaborator

fabricteam commented Aug 24, 2023

📊 Bundle size report

🤖 This report was generated against 0dfca34f7aabc1ee0c087a1dfcc4d55b6880c883

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 24, 2023

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 24, 2023

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 627 635 5000
Breadcrumb mount 1668 1635 1000
Checkbox mount 1684 1692 5000
CheckboxBase mount 1471 1455 5000
ChoiceGroup mount 2932 2914 5000
ComboBox mount 662 656 1000
CommandBar mount 6117 6058 1000
ContextualMenu mount 11671 11768 1000
DefaultButton mount 746 744 5000
DetailsRow mount 2192 2169 5000
DetailsRowFast mount 2164 2147 5000
DetailsRowNoStyles mount 2012 1986 5000
Dialog mount 2600 2780 1000
DocumentCardTitle mount 229 220 1000
Dropdown mount 1944 1967 5000
FocusTrapZone mount 1100 1096 5000
FocusZone mount 1047 1029 5000
GroupedList mount 41114 41138 2
GroupedList virtual-rerender 17540 19690 2
GroupedList virtual-rerender-with-unmount 50210 50148 2
GroupedListV2 mount 222 233 2
GroupedListV2 virtual-rerender 208 211 2
GroupedListV2 virtual-rerender-with-unmount 220 229 2
IconButton mount 1068 1085 5000
Label mount 335 337 5000
Layer mount 2687 2726 5000
Link mount 369 384 5000
MenuButton mount 932 925 5000
MessageBar mount 21211 21256 5000
Nav mount 1904 1921 1000
OverflowSet mount 758 770 5000
Panel mount 2008 1770 1000
Persona mount 733 726 1000
Pivot mount 863 862 1000
PrimaryButton mount 852 837 5000
Rating mount 4573 4546 5000
SearchBox mount 921 887 5000
Shimmer mount 1837 1847 5000
Slider mount 1301 1322 5000
SpinButton mount 2861 2881 5000
Spinner mount 381 385 5000
SplitButton mount 1824 1770 5000
Stack mount 411 404 5000
StackWithIntrinsicChildren mount 823 862 5000
StackWithTextChildren mount 2565 2561 5000
SwatchColorPicker mount 6139 6187 5000
TagPicker mount 1466 1491 5000
Text mount 371 399 5000
TextField mount 949 958 5000
ThemeProvider mount 811 824 5000
ThemeProvider virtual-rerender 577 571 5000
ThemeProvider virtual-rerender-with-unmount 1260 1263 5000
Toggle mount 596 604 5000
buttonNative mount 194 187 5000

@khmakoto
Copy link
Member

You probably need to update the API file.

@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 d92bbef:

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

@size-auditor
Copy link

size-auditor bot commented Aug 24, 2023

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-Stack 40.598 kB 40.75 kB ExceedsBaseline     152 bytes
office-ui-fabric-react fluentui-react-TeachingBubble 197.526 kB 197.678 kB ExceedsBaseline     152 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 0e33d8ebd9aecc1efe0cc664288ec433a8878ff8 (build)

@sopranopillow sopranopillow enabled auto-merge (squash) August 24, 2023 22:56
@sopranopillow sopranopillow merged commit 846a454 into microsoft:master Aug 24, 2023
@sopranopillow sopranopillow deleted the stack-render-falsy branch August 25, 2023 17:06
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* master: (23 commits)
  feat: add closeOnIframeFocus prop to Popover (microsoft#28881)
  chore: updates .devcontainer to follow new format (microsoft#28990)
  Line Chart and Area Chart - Component tests (microsoft#28235)
  applying package updates
  28576 small button is using 3px border radius (microsoft#28589)
  In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975)
  chore: Migrate bot config to yml (microsoft#28981)
  fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968)
  fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963)
  applying package updates
  feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978)
  feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605)
  fix(Dialog): Add displayName for dialog footer and content (microsoft#28939)
  Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977)
  Vertical stacked bar chart - Component tests (microsoft#28594)
  docs: update drawer spec to be inline with changes to component (microsoft#28934)
  Table/DataGrid: fix visuals for overflow (microsoft#28940)
  Focus indicator bug in bar charts (microsoft#28414)
  Pie chart focus spacing (microsoft#28504)
  applying package updates
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* master: (24 commits)
  feat(react-motion): add useMotion hook (microsoft#28699)
  feat: add closeOnIframeFocus prop to Popover (microsoft#28881)
  chore: updates .devcontainer to follow new format (microsoft#28990)
  Line Chart and Area Chart - Component tests (microsoft#28235)
  applying package updates
  28576 small button is using 3px border radius (microsoft#28589)
  In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975)
  chore: Migrate bot config to yml (microsoft#28981)
  fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968)
  fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963)
  applying package updates
  feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978)
  feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605)
  fix(Dialog): Add displayName for dialog footer and content (microsoft#28939)
  Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977)
  Vertical stacked bar chart - Component tests (microsoft#28594)
  docs: update drawer spec to be inline with changes to component (microsoft#28934)
  Table/DataGrid: fix visuals for overflow (microsoft#28940)
  Focus indicator bug in bar charts (microsoft#28414)
  Pie chart focus spacing (microsoft#28504)
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* master: (24 commits)
  feat(react-motion): add useMotion hook (microsoft#28699)
  feat: add closeOnIframeFocus prop to Popover (microsoft#28881)
  chore: updates .devcontainer to follow new format (microsoft#28990)
  Line Chart and Area Chart - Component tests (microsoft#28235)
  applying package updates
  28576 small button is using 3px border radius (microsoft#28589)
  In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975)
  chore: Migrate bot config to yml (microsoft#28981)
  fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968)
  fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963)
  applying package updates
  feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978)
  feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605)
  fix(Dialog): Add displayName for dialog footer and content (microsoft#28939)
  Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977)
  Vertical stacked bar chart - Component tests (microsoft#28594)
  docs: update drawer spec to be inline with changes to component (microsoft#28934)
  Table/DataGrid: fix visuals for overflow (microsoft#28940)
  Focus indicator bug in bar charts (microsoft#28414)
  Pie chart focus spacing (microsoft#28504)
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* master: (26 commits)
  chore: Make triage bot add needs triage label to new issues (microsoft#28994)
  fix(react-tags-preview): use regular icon for dismiss (microsoft#28958)
  feat(react-motion): add useMotion hook (microsoft#28699)
  feat: add closeOnIframeFocus prop to Popover (microsoft#28881)
  chore: updates .devcontainer to follow new format (microsoft#28990)
  Line Chart and Area Chart - Component tests (microsoft#28235)
  applying package updates
  28576 small button is using 3px border radius (microsoft#28589)
  In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975)
  chore: Migrate bot config to yml (microsoft#28981)
  fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968)
  fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963)
  applying package updates
  feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978)
  feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605)
  fix(Dialog): Add displayName for dialog footer and content (microsoft#28939)
  Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977)
  Vertical stacked bar chart - Component tests (microsoft#28594)
  docs: update drawer spec to be inline with changes to component (microsoft#28934)
  Table/DataGrid: fix visuals for overflow (microsoft#28940)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants