Fluentui: CommandBar: Make it composition of Components

[atneik]

Proposal to use SearchBox component in CommandBar instead of its own implementation.

[dzearing]

+1. And also to split out a couple extra components:

CommandList - a collapsable list of command buttons
CommandButton - a button styled for a command bar with an optional dropdown

CommandBar should be a composite of:

• Searchbox
• CommandList for near commands
• CommandList for far commands

That's about it. It should be very little code.

[dzearing]

Recommend we split out a CommandList, but just remove Searchbox from command bar completely.

[micahgodbolt]

After a little tinkering I'm noticing that the search component is a different fixed height than the fixed height of everything in the CommandBar. I'm wondering why we're messing with fixed heights at all, so this is my proposition. Would like some feedback before putting too much work into this.

Proposed Set of Changes

1. Move to flexbox based layouts
2. Update search and CommandBar Icons to fill the Vspace they are placed into.
3. Create 3 layout regions (rather than fixing the width of the search component)

[micahgodbolt]

Got a jump on this today. Was able to do 1, 2 and 3. Seems the overflow is already set up in the list, so 4 is kinda working as expected.

I got a start on pulling the CommandList out, but there are tons of things I don't know if they belong to the list or the Bar. @dzearing if you wanted to take a look, I'm sure you could seperate the chaff from the wheat much faster.

https://github.com/micahgodbolt/office-ui-fabric-react/tree/CommandBar-componetize

[betrue-final-final]

Let's talk about this next week.

---

From: Micah Godbolt [email protected]
Sent: Friday, October 14, 2016 11:25:09 AM
To: OfficeDev/office-ui-fabric-react
Subject: Re: [OfficeDev/office-ui-fabric-react] CommandBar: Make it composition of Components (#94)

After a little tinkering I'm noticing that the search component is a different fixed height than the fixed height of everything in the CommandBar. I'm wondering why we're messing with fixed heights at all, so this is my proposition. Would like some feedback before putting too much work into this.

Proposed Set of Changes

1. Move to flexbox based layouts
2. Update search and CommandBar Icons to fill the Vspace they are placed into.
3. Create 3 layout regions (rather than fixing the width of the search component)
4. Create an overflow component to put commands into (seem to recall @dzearinghttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdzearing&data=01%7C01%7Cbetrue%40exchange.microsoft.com%7C8a279e661a95498b8d8208d3f45f6f1f%7C72f988bf86f141af91ab2d7cd011db47%7C1&sdata=OvwPWDkfSJ8Sg2tmQWO%2Blcl3lGY99xL4ZSJIxr2sk6M%3D&reserved=0 working on one?)
5. Mobile Layout???? 3 rows? Search with Hamburger to expose commands as grid?

You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FOfficeDev%2Foffice-ui-fabric-react%2Fissues%2F94%23issuecomment-253882834&data=01%7C01%7Cbetrue%40exchange.microsoft.com%7C8a279e661a95498b8d8208d3f45f6f1f%7C72f988bf86f141af91ab2d7cd011db47%7C1&sdata=0RPwAFHGSCroi3UcMPdLDGV9qlqK8LpjVLieIkKLa0M%3D&reserved=0, or mute the threadhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FATa3HVvvCNxx9ab_JFaNlm6h4ZtxVAjNks5qz8kFgaJpZM4JfoIQ&data=01%7C01%7Cbetrue%40exchange.microsoft.com%7C8a279e661a95498b8d8208d3f45f6f1f%7C72f988bf86f141af91ab2d7cd011db47%7C1&sdata=5bHuiAIKtEYqdRLckcwFzFTTz%2F4OZfl4DhFynMxrb%2FM%3D&reserved=0.

[micahgodbolt]

My todos

• v align of icons
• remove ... from search
• white bg of search box
• remove 'info' from (i)
• Change grid view to tile view

[betrue-final-final]

☺

From: Micah Godbolt [mailto:[email protected]]
Sent: Tuesday, October 18, 2016 9:25 AM
To: OfficeDev/office-ui-fabric-react [email protected]
Cc: Ben Truelove [email protected]; Comment [email protected]
Subject: Re: [OfficeDev/office-ui-fabric-react] CommandBar: Make it composition of Components (#94)

My todos

• v align of icons
• remove ... from search
• white bg of search box
• remove 'info' from (i)
• Change grid view to tile view

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FOfficeDev%2Foffice-ui-fabric-react%2Fissues%2F94%23issuecomment-254562117&data=02%7C01%7Cbetrue%40exchange.microsoft.com%7C2adda4cdec5243274d9508d3f7734d94%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636124046993823746&sdata=SnM0KUvE%2BnUKBIOZpAHdaUJYjg%2BEpo3Gs5zquxGYzII%3D&reserved=0, or mute the threadhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FATa3HSm4DlSpj7A4noEDWfyQfdRq0KsWks5q1PLYgaJpZM4JfoIQ&data=02%7C01%7Cbetrue%40exchange.microsoft.com%7C2adda4cdec5243274d9508d3f7734d94%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C636124046993823746&sdata=%2FaplzEY7d1f2WdxxJI2j6e673CyP2Sur2jBWKSPq%2BTQ%3D&reserved=0.

[geraldhe]

+1 for using SearchBox instead of own implementation.
Current implementation is useless, because there is no event for text input?

[jrsell]

Or, how about adding an 'onRender', similar to how it is done for items in ContextualMenu? Then clients can hang whatever they want off the bar, be it a SearchBox, or whatever else...

[gitjain]

Issue got closed almost a month ago. Updating the status.

[petdun2519]

@gitjain is this fixed in next release of office fabric? Currently command bar does not respect the onRender of it's items props or it's faritems props. Is this fixed now?