[fluent] Add TooltipBox and FlyoutAnchorScope
#90
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
This change simplifies the implementation of `AutoSuggestBox` and improves its flexibility. The `suggestFlyoutAnchor` and `suggestFlyoutSize` modifiers have been replaced with `flyoutAnchor` and `flyoutSize` modifiers, respectively, which are now provided by the `FlyoutAnchorScope`. This refactor also removes the need for the `rememberSuggestFlyoutCalculateMaxHeight` function, as the `Flyout` component handles the calculation of the maximum height for the suggestion flyout.
This commit introduces scrolling behavior to `MenuFlyout` using `ScrollbarContainer` and `verticalScroll`. It also refactors `FlyoutContainerScope` to inherit from `FlyoutAnchorScope`, allowing for better placement control of flyouts using `flyoutAnchor()` and `flyoutSize()` modifiers. These changes enhance the functionality of components like `TopNav`, `NavigationView`, and `AutoSuggestBox` by providing a more user-friendly experience for menus and flyouts.
This commit introduces the `TooltipBox` component, which displays more information about a UI element in a pop-up window. - The `TooltipBox` can be used to show what an element does or what the user should do with it. - It is shown when the user hovers over or presses and holds the UI element. - The position of the Tooltip can be customized using the `positionProvider` parameter. Additionally, this commit: - Updates the `GalleryHeader` component to use the `TooltipBox` for documentation and source code buttons. - Updates the `WindowsWindowFrame` component to use the `TooltipBox` for caption buttons. - Adds the `TooltipScreen` to the gallery to showcase the `TooltipBox` component. - Updates the `CopyButton` component to use the `TooltipBox`. - Updates the `SideNavItem` component to use the `TooltipBox` for the text label when the item is not expanded. - Updates the `NavigationView` component to use the `TooltipBox` for the navigation buttons and menu items.
This commit adds a label to the Slider's thumb that displays the current value of the Slider. The label is visible when the thumb is being dragged and is positioned above the thumb. This change improves the usability of the Slider by providing visual feedback to the user about the current value of the Slider.
Sanlorng
force-pushed
the
component/flyout_components
branch
from
8ac699d to
79f39ab
Compare
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.
FlyoutAnchorScope.TooltipBox