Introduce new command bar design behind feature flag #1933
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.
Preview this branch
This introduces a new command bar component, based off Fluent UI 9, behind a feature flag. It also moves the command bar under the tab bar, as specified in the new designs.
To activate the new command bar, you need the
feature.commandBarV2=true
feature flag (which is enabled in the preview link above). I wanted to do a bit more iteration here before pushing this live, and I'm also interested in figuring out if/how we can control this flag in production to have even more flexibility here. The design spec also includes changes to the button layout and groupings of buttons which is not yet present, but will be done behind the feature flag in later PRs.This PR does include a few small changes that will affect the old command bar too:
onCommandClick
handler for command buttons to take anExplorer
, thus allowing all the button creation logic to run without having anExplorer
. This allows buttons to be created as static constants, where appropriate, or in other environments that don't have access toExplorer
, while still allowing them to take actions on theExplorer
when clicked. The only thing we were usingExplorer
for when constructing the buttons was to capture it for theonCommandClick
handler, so this seemed like a safe refactor. TheExplorer
is provided when we translate our "abstract" CommandButtonProps into an actual button for rendering.A quick preview of the new Command Bar:
Because of it's location, there are some weird things. The global account-level "Call to Action" buttons (Synapse, Data-Plane RBAC, etc.) are in the command bar under the tab bar. Other global account-level actions (New Container/Database) were moved to the sidebar, but we haven't figured out the right home for the "Call to Action" buttons, DE settings, portal full screen, etc.
It works for now, but we're continuing to iterate on that. For example, if you have no tabs open, the command bar is still present (in order to show the global account-level actions).
Another quirk of the new command bar for now, is that the Fluent UI 9 toolbar doesn't have a great Split Button/Menu experience. You can put a standard split-button in, but it looks clunky. For now, I've used a standard button for commands with children:
I'm also working on improving this.
Since this is behind a feature flag, we can continue iterating on these before we start to roll it out to customers.