Comments (11)
+1 for using SearchBox instead of own implementation.
Current implementation is useless, because there is no event for text input?
from fluentui.
+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.
from fluentui.
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...
from fluentui.
Recommend we split out a CommandList, but just remove Searchbox from command bar completely.
from fluentui.
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
- Move to flexbox based layouts
- Update search and CommandBar Icons to fill the Vspace they are placed into.
- Create 3 layout regions (rather than fixing the width of the search component)
from fluentui.
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
from fluentui.
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
- Move to flexbox based layouts
- Update search and CommandBar Icons to fill the Vspace they are placed into.
- Create 3 layout regions (rather than fixing the width of the search component)
- 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?)
- 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.
from fluentui.
My todos
- v align of icons
- remove ... from search
- white bg of search box
- remove 'info' from (i)
- Change grid view to tile view
from fluentui.
☺
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.
from fluentui.
Issue got closed almost a month ago. Updating the status.
from fluentui.
@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?
from fluentui.
Related Issues (20)
- [Bug]: InfoLabel does not respect `mountNode` property
- [Bug]: Switch disappears on mouse-down in high contrast (forced colors)
- Deprecated props do not have any indication they are deprecated in storybook
- [Bug]: In IOS, People picker fly out pannel is closing when user minimize the keypad & not able to select last user HOT 1
- [Bug]: Documentation for Dropdown is missing for some properties
- [Feature]: Allow binding to different Cultures for NumberField
- [Bug]: @fluentui/react-datepicker-compat and @fluentui/react-timepicker-compat css are broken HOT 2
- [Bug]: react-tag-picker-preview : pressing space on keyboard causing pickier closing HOT 1
- [Feature]: Can we have a paginated/Infinite scrolling ComboBox.
- [Bug]: Skeleton uses main thread for animation, causes jank under CPU load HOT 1
- [Feature]: Can we add props "focusMode" to DataGridHeaderCell component?
- [Bug]: Chart tooltip not visible when rendered on OverlayDrawer (on drawer reopen) HOT 1
- [Bug]: Charting: customDateTimeFormatter and timeFormatLocale does not display the correct date for x axis HOT 4
- [Bug]: Tooltip scrolling issues with long text HOT 1
- [Bug]: Charting: customDateTimeFormatter and timeFormatLocale does not display the correct date for x axis (duplicate from comment) HOT 1
- [Bug]: heavy webpack warnings logs in all cypress tests
- Create donut chart and line chart as web components
- [Feature]: Exclude Typescript types from `no-restricted-globals` eslint rule
- [Bug]: Accessibility issue while using @fluentui/react/lib/GroupedList
- [Bug]: Dropdown does not have focus indicators in Strict Mode
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fluentui.