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(react-tree): creates TreeItemAside component #27701

Conversation

bsunderhus
Copy link
Contributor

@bsunderhus bsunderhus commented Apr 26, 2023

New Behavior

  1. creates TreeItemAside component with visible property that allows the control of the visibility of actions
  2. Updates stories accordingly
  3. Removes actions and aside slots from layout components

Related Issue(s)

@bsunderhus bsunderhus self-assigned this Apr 26, 2023
@github-actions github-actions bot added this to the April Project Cycle Q2 2023 milestone Apr 26, 2023
@bsunderhus bsunderhus force-pushed the react-tree/feat--adds-active-state-to-TreeItem branch from ef7f8fe to 200cfab Compare April 26, 2023 13:58
@fabricteam
Copy link
Collaborator

fabricteam commented Apr 26, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
64.855 kB
17.852 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
203.937 kB
57.086 kB
react-components
react-components: FluentProvider & webLightTheme
36.086 kB
11.9 kB
react-portal-compat
PortalCompatProvider
6.446 kB
2.186 kB
🤖 This report was generated against 0ffdc48b94a76bfd209015b1a9c49eb62aca1ba0

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 26, 2023

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 689 714 5000
Button mount 367 377 5000
Field mount 1258 1283 5000
FluentProvider mount 912 911 5000
FluentProviderWithTheme mount 119 116 10
FluentProviderWithTheme virtual-rerender 99 103 10
FluentProviderWithTheme virtual-rerender-with-unmount 108 121 10
InfoButton mount 19 21 5000
MakeStyles mount 1148 1124 50000
Persona mount 1994 2012 5000
SpinButton mount 1557 1554 5000

@bsunderhus bsunderhus force-pushed the react-tree/feat--adds-active-state-to-TreeItem branch from 200cfab to fa982b7 Compare April 26, 2023 14:07
@codesandbox-ci
Copy link

codesandbox-ci bot commented Apr 26, 2023

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 1267096:

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

@size-auditor
Copy link

size-auditor bot commented Apr 26, 2023

Asset size changes

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

Baseline commit: 0ffdc48b94a76bfd209015b1a9c49eb62aca1ba0 (build)

@bsunderhus bsunderhus marked this pull request as ready for review April 26, 2023 14:33
@bsunderhus bsunderhus requested a review from a team as a code owner April 26, 2023 14:33
@bsunderhus bsunderhus marked this pull request as draft April 28, 2023 06:01
@bsunderhus bsunderhus force-pushed the react-tree/feat--adds-active-state-to-TreeItem branch 2 times, most recently from bc255c3 to 2804ffa Compare May 3, 2023 07:17
@bsunderhus bsunderhus force-pushed the react-tree/feat--adds-active-state-to-TreeItem branch 3 times, most recently from 08eb844 to e35f835 Compare May 3, 2023 10:14
Copy link
Member

@layershifter layershifter left a comment

Choose a reason for hiding this comment

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

Few notes:

  • Navigation in actions is a bit non-intuitive to me, may be something to check
    • Open packages/react-components/react-tree/stories/B_TreeItem/TreeItemActions.stories.tsx

    • Focus an item with actions
      image

    • Press Tab ➡️ an item with a pencil is focused

    • Press Tab ➡️ an item with dots is focused

    • Press Tab ➡️ URL bar is focused

  • Hover behavior with actions is also a bit strange, once I hover a tree item ➡️ actions will close

@bsunderhus
Copy link
Contributor Author

Few notes:

  • Navigation in actions is a bit non-intuitive to me, may be something to check

    • Open packages/react-components/react-tree/stories/B_TreeItem/TreeItemActions.stories.tsx
    • Focus an item with actions
      image
    • Press Tab ➡️ an item with a pencil is focused
    • Press Tab ➡️ an item with dots is focused
    • Press Tab ➡️ URL bar is focused
  • Hover behavior with actions is also a bit strange, once I hover a tree item ➡️ actions will close

The whole navigation is still an ongoing discussion, Milan has already raised some good points against current model. I'll see to have your perceptions included.

@bsunderhus bsunderhus force-pushed the react-tree/feat--adds-active-state-to-TreeItem branch 2 times, most recently from 6f84da4 to 5f01600 Compare May 4, 2023 12:59
@bsunderhus bsunderhus force-pushed the react-tree/feat--adds-active-state-to-TreeItem branch 2 times, most recently from 8734b5e to 1b5bce3 Compare May 10, 2023 12:47
@bsunderhus bsunderhus changed the title feat(react-tree): adds active state to TreeItem feat(react-tree): creates TreeItemAside component May 10, 2023
@bsunderhus bsunderhus marked this pull request as ready for review May 10, 2023 12:48
@bsunderhus bsunderhus removed the Status: Blocked Resolution blocked by another issue label May 10, 2023
@bsunderhus bsunderhus force-pushed the react-tree/feat--adds-active-state-to-TreeItem branch from 1b5bce3 to 2f03acd Compare May 10, 2023 12:53
@bsunderhus bsunderhus force-pushed the react-tree/feat--adds-active-state-to-TreeItem branch 3 times, most recently from c082a8e to 0a53d10 Compare May 10, 2023 13:40
@bsunderhus bsunderhus force-pushed the react-tree/feat--adds-active-state-to-TreeItem branch from 0a53d10 to 1267096 Compare May 12, 2023 11:18
@bsunderhus bsunderhus enabled auto-merge (squash) May 12, 2023 11:34
@bsunderhus bsunderhus merged commit e741b28 into microsoft:master May 12, 2023
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request May 12, 2023
* feat/drawer-header:
  feat: Update existing toasts (microsoft#27827)
  bugfix: fix horizontal overflow on tree (microsoft#27825)
  feat: Allow toast options to be configured from the toaster (microsoft#27820)
  feat: creates TreeItemAside component (microsoft#27701)
  fix: generate API
  fix: use composition to build DrawerHeaderTitle
  Virtualizer: Dynamic scroll view and optimizations (microsoft#27298)
  bugfix(react-dialog): change DialogTitle default action icon size (microsoft#27815)
  feat: Implement Toast pause (microsoft#27811)
  fix: ToolbarToggleButton should not follow Toolbar size (microsoft#27797)
  feat: defers useControllableState state to initializer method (microsoft#27717)
  feat: Implement toast dismiss (microsoft#27810)
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-components@v9.20.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react-tree@v9.0.0-beta.13 has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature]: v9 Tree make active state declarative
5 participants