From @mikewheaton on June 5, 2016 21:47

The dropdown should be keyboard accessible, both in its regular view and when displayed as a panel on small screens.

Copied from original issue: OfficeDev/office-ui-fabric-core#639

From @atneik on July 28, 2016 21:39

At end of line 136: @media screen and (max-width: $ms-screen-md-max) {å

Copied from original issue: OfficeDev/office-ui-fabric-core#752

From @mikewheaton on February 2, 2016 1:11

Form elements and labels have inconsistent spacing:

• Most labels have padding: 5px 0, except for the .ms-Toggle-description
• Dropdown has 10px of margin at the bottom, text box has 8px, toggle has 26px

See the repro on CodePen.

Copied from original issue: OfficeDev/office-ui-fabric-core#306

From @mikewheaton on June 8, 2016 16:33

Currently the Dialog shows and hides instantly. There should be an animation so that this is less jarring.

Copied from original issue: OfficeDev/office-ui-fabric-core#651

From @mikewheaton on June 5, 2016 22:5

An accessibility review turned up the following:

Usually a checkbox appears either as a toggle, as part of a "Select items on this list", or contains a Select all option. Both case 2 and 3 are issues customers have repeatedly logged QFEs on so if we can provide proper guidance we can help a lot.

For tying the checkboxes to a title, follow this example:
http://oaa-accessibility.org/example/5/

For tying the "Select items on this list" to checkbox since its something we screwed up in SharePoint before. So basically properly naming the group of checkboxes. Check out the following example, where they use role = group, followed by role = checkbox:
http://oaa-accessibility.org/example/6/

For tying radio buttons, use the following examples:
http://oaa-accessibility.org/example/31/

Copied from original issue: OfficeDev/office-ui-fabric-core#646

From @mikewheaton on February 17, 2016 0:7

The form components (textfield, radio buttons, dropdown, toggle, etc.) do not have standard error states. We have designs for this, those states just need to be added.

Copied from original issue: OfficeDev/office-ui-fabric-core#359

From @wdo3650 on July 8, 2016 18:10

Copied from original issue: OfficeDev/office-ui-fabric-core#710

From @manndave on July 8, 2016 22:22

Is the gulp build process supposed to generate HTML files? All I'm getting in the dist\components* folders are .hbs, .json, and .scss. What am I doing wrong?

Thanks.

Copied from original issue: OfficeDev/office-ui-fabric-core#712

From @manndave on July 15, 2016 1:26

The css files have a comment at the top /** * Office UI Fabric 3.0.0 *. Please consider adding this to the JS (and conceivably the hbs, scss and json ) files so that automated tooling can check version numbers. It could be done via a Gulp task to streamline it.

Thanks.

Copied from original issue: OfficeDev/office-ui-fabric-core#725

From @johnnyongesa on June 14, 2016 9:23

Adding the class="multiple" keyword does not change anything

Copied from original issue: OfficeDev/office-ui-fabric-core#663

Now that these components have been separated out from the main Fabric repo, we need to remove all of the core styles (type, color, icons, etc.) in this repo and instead use the NPM package for Fabric Core.

From @mikewheaton on June 5, 2016 19:34

1. Checkboxes need a hover and a focus state in high contrast mode.
2. Disabled states aren't indicated correctly. Needs to be green in HC black, and maroon in HC White.
   • 

Copied from original issue: OfficeDev/office-ui-fabric-core#632

From @mikewheaton on June 5, 2016 21:57

On iOS, go to DatePicker and tap on the picker to choose a date. Unable to focus away from the picker in the sample page and the menu will not reopen when tapping on the field.

Copied from original issue: OfficeDev/office-ui-fabric-core#642

From @Etheryte on July 13, 2016 14:48

The latest stable release, 2.6.1, has a bug in the Callout component.
Line 280 in Callout.scss:

top: calc('50% - 10px');

Both the line above and the generated CSS (which is identical), are naturally invalid CSS.
The fix would be to remove the unnecessary apostrophe:

top: calc(50% - 10px);

The component isn't unusably broken as a different (static) value is inherited from elsewhere, but it never functions as intended.

Copied from original issue: OfficeDev/office-ui-fabric-core#722

From @cut2run on July 20, 2016 14:51

Hello,

Would you mind to clarify on best practice to use "Office.context.officeTheme" object to set appropriate theme in the Fabric.

There are 3 Office themes:

1. Colorful
2. Dark Gray
3. White

There are 4 object properties:

1. bodyBackgroundColor (colorful: e6e6e6; dark: 6a6a6a; white: ffffff)
2. bodyForegroundColor (colorful: 444444; dark: f0f0f0; white: 444444)
3. controlBackgroundColor (colorful: fdfdfd; dark: d4d4d4; white: fdfdfd)
4. controlForegroundColor (colorful: 444444; dark: 262626; white: 444444)

Is there any corresponding CSS classes in Fabric I can use to set those colors/themes? Can I set the theme per page once or I need to set each color for every single control I use on the page? Basically I'd like to know I you have some "Colorful" class corresponding to Office properties or I have to set those colors manually, when retrieved?

This particular way I don't like as I have to take care about every element I use:

`function applyOfficeTheme(){
// Get office theme colors.
var bodyBackgroundColor = Office.context.officeTheme.bodyBackgroundColor;
var bodyForegroundColor = Office.context.officeTheme.bodyForegroundColor;
var controlBackgroundColor = Office.context.officeTheme.controlBackgroundColor
var controlForegroundColor = Office.context.officeTheme.controlForegroundColor;

// Apply body background color to a CSS class.
$('.body').css('background-color', bodyBackgroundColor);

}`

Please let me know.
Thank you.

Copied from original issue: OfficeDev/office-ui-fabric-core#732

From @johnnyongesa on July 3, 2016 8:5

Hi Guys, I have managed to read all users from sharepoint and added ui fabric people picker, but its show all the user in the list. I want it behave same way as the old people picker. List user as the user types

Copied from original issue: OfficeDev/office-ui-fabric-core#701

From @marekszala-microsoft on June 6, 2016 7:13

When I click the space between a label and its bottom bar a selection animation is played but the selected item does not change.
See the attachment:

Copied from original issue: OfficeDev/office-ui-fabric-core#647

From @dzearing on February 10, 2016 3:1

To be clear; most of the components in Fabric use a specific blue rectangle around the cell to indicate focus. However many, including Link, Dropdown, ContextualMenu, are missing the blue rectangle and leave it up to the browser to render the default focus styling which looks really bad on Mac in particular. Let's fix this.

Copied from original issue: OfficeDev/office-ui-fabric-core#339

From @MJZawacki on June 24, 2016 22:19

I'm seeing issues in an Office add-in on Mac where the event is not fired when the command is hidden in the overflow menu.

What is the intended way to link up click events so that they work while inside the overflow menu? The element id's from the original ms-CommandBarItem's are not persisted by createMenuItem so it's unclear to me how you intended to hook up the event.

Copied from original issue: OfficeDev/office-ui-fabric-core#691

From @mikewheaton on June 5, 2016 21:50

On iOS the checkmark sits too high in its box.

Copied from original issue: OfficeDev/office-ui-fabric-core#640

From @mikewheaton on February 5, 2016 17:23

@ericthompson noticed this issue, on both IE and Chrome. If the vertical scroll bar is that wide the design should probably be updated to have more space to the right. The horizontal scroll bar shouldn't be there.

Copied from original issue: OfficeDev/office-ui-fabric-core#317

From @manndave on July 14, 2016 20:11

I'm looking at v3 beta 2 to determine how best to generate snippets from the .hbs files in the src folder for each component. I think I've come up with a way to make this work but have a few questions before I go too far.

Will it be a problem for me to:

• modify the build process and add another gulp task which generates the snippet files?
• add a new context file (.json) to each component that contains the data necessary for generating the snippets?
• Add a small amount of Handlebars markup and/or comments to the .hbs files for some components (probably just the more complex ones) to add information necessary for the snippet generation task? In all likelihood, this will mean modifying the existing build task to ignore this information and then the snippet build task will ignore some of the information used by the regular build.

I can develop a POC and provide more information if these are all OK. If these won't be acceptable then I'll try to come up with a different approach, but I'm not sure how that will work out. I spent some time trying to work around these issues already but can't see any way to do so.

The goal is to be able to automatically generate snippet files for VS and VSCode directly from the source files as part of the automated build so they don't have to be created manually.

Please let me know the team's thoughts.

Thanks,

Dave

Copied from original issue: OfficeDev/office-ui-fabric-core#724

From @wdo3650 on July 6, 2016 20:28

This might have to do with an error that's happening because dispatchEvent is not supported in IE.

Copied from original issue: OfficeDev/office-ui-fabric-core#706

From @s-KaiNet on July 27, 2016 7:49

All CSS3 key frame animation doesn't contain prefix version for Chrome, i.e.
@-webkit-keyframes fadeIn. Chrome still requires prefix according to this.
You have ready to use animation such as .ms-u-fadeIn400 which is prefixed, but sometimes it's useful to create your own using key frame animation name.
For example angular 1.x adds its own classes for animation [class-name]-add, [class-name]-remove, etc. so it's not possible to use classes such as .ms-u-fadeIn400. But it's possible to provide your own animation rule using key frame from fabric.css:

.is-open-add{
    animation: 0.367s cubic-bezier(0.1, 0.9, 0.2, 1) fadeIn, slideRightIn40;
    -webkit-animation: 0.367s cubic-bezier(0.1, 0.9, 0.2, 1) fadeIn, slideRightIn40;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

But currently this is broken in Chrome because of missing prefix for @keyframe.
Sorry, accidentally mentioned user with name @keyframe :)

Copied from original issue: OfficeDev/office-ui-fabric-core#745

From @mikewheaton on June 5, 2016 22:3

Here is the bug report:

Navigate to this page: Components/ChoiceField/index.html
Using TAB navigate to the third checkbox
It reads "Checkbox selected, checkboxes unchecked"
It should have read "Checkbox selected, checkbox checked".

Once I pressed spacebar to uncheck and recheck it fixed itself but not on first load.

Same behavior happens for radio buttons

Copied from original issue: OfficeDev/office-ui-fabric-core#645

From @cut2run on February 5, 2016 21:15

Request:
I need to initialize Dropdown control with certain pre-selected value. The control doesn't looks like have documentation on how to properly do that.

Try and fail:

1. If control initialized first $('.ms-Dropdown').Dropdown(); and after select a value $('#select_language').val('en-us').change(); nothing happen at all from UI point of view. Query back value from select and it will return proper "changed" value.
2. If set the value first and after initialize control as "Dropdown" the control appear with pre-selected value. This is good sign. When you click on dropdown to see the options, pre-selected option doesn't have "blue" highlights as it happen when you click on the option. Another thing I have to care of double initialization of control and this will lead to remove and re-insert it. This is not good at all.

Suggestion:
Would it be possible to have initialization with a value at any time with some method? At this point I assume control should look exactly the same as it would look when user choose an option from dropdown manually. As such: option preselected and when dropdown open the same option highlighted in the list.

Thanks.

Copied from original issue: OfficeDev/office-ui-fabric-core#321

From @dmitriyyepishin on July 15, 2016 20:33

If a dropdown is created in an area below the initial visible area of an app, the options that are shown when dropdown is clocked show up above the visible area. See sample here:

http://aka.ms/Ybel14

Copied from original issue: OfficeDev/office-ui-fabric-core#728

From @wdo3650 on July 8, 2016 18:9

Copied from original issue: OfficeDev/office-ui-fabric-core#709

From @atneik on July 28, 2016 21:36

Missing first chevron icon. The one between ellipsis and Folder 4. Or is it by Design?

Copied from original issue: OfficeDev/office-ui-fabric-core#751

From @mikewheaton on July 23, 2016 17:27

The Blocked2 icon, which is used in the MessageBar component, is not included in the icon font on our CDN. This causes a bug where no icon is shown in that MessageBar variant:

Copied from original issue: OfficeDev/office-ui-fabric-core#738

From @mikewheaton on June 5, 2016 21:54

Right now whenever the DatePicker is opened we scroll the page so that the input is at the top. This is very annoying (scrolling is up to the user, not us) and still doesn't guarantee that there's room for the picker to open below the input. Let's instead open it up wherever there is available room.

Copied from original issue: OfficeDev/office-ui-fabric-core#641

From @mikewheaton on June 5, 2016 19:42

For tables with selectable rows, it should be possible to arrow between the rows and use enter/space to select a row. Refer to OneDrive's file list as a reference.

Copied from original issue: OfficeDev/office-ui-fabric-core#633

From @battletoilet on June 22, 2016 18:51

If the page goes beyond the screen size and Panel is opened, PanelHost does not stop the screen from scrolling and causes the panel to stay at the top of the screen. See screenshot below.

Copied from original issue: OfficeDev/office-ui-fabric-core#683

From @mikewheaton on June 5, 2016 19:27

A few accessibility issues with the Callout:

1. When focusing on any of the callout variants, we'd expect the screen reader to automatically start reading its contents but it doesn't. Perhaps we should tag with ARIA Role = dialog or alert so that it does this behavior.
2. For the callout with the commands, focus is not trapping.
3. Learn more link default callout is not keyboard tabbable

Copied from original issue: OfficeDev/office-ui-fabric-core#631

From @mikewheaton on June 30, 2016 22:19

The CommandBar moves commands into an overflow menu when there is not enough space to display them all. What is the threshold at which we should move items into the overflow? It's currently inconsistent across our samples:

Copied from original issue: OfficeDev/office-ui-fabric-core#700

From @Fensterbank on June 13, 2016 11:59

I implemented DatePicker with your sample code in my application and got an infinite loop when using the month picker to change the selected month.

The problem occured in your example function changeHighlightedDate where the undefined checks don't work.

The picker highlight function was called with two undefined values in the array which resulted in an infinite loop.

Why did you use such unusual undefined checks?
when foo is undefined, typeof(foo) would return a string 'undefined'.
I don't think the typeof function would ever return an empty string.

I would have just used if (newYear == undefined) or if (typeof(newYear) == 'undefined').
Also if (isNaN(newYear)) could be a nice solution to prevent bad parameters for the picker's highlight function.

Copied from original issue: OfficeDev/office-ui-fabric-core#661

From @cut2run on February 24, 2016 20:36

When NavBar item ("ms-NavBar-item") has right alignment ("ms-NavBar-item--right") and context menu ("ms-NavBar-item--hasMenu") would it be appropriate to align this context menu to the right? Currently if context menu added its position will start from beginning of the NavBar item and will be out of screen boundaries that produce horizontal scroll bar. You probably can read style of NavBar item and if it has class "ms-NavBar-item--right" add context menu style "right:0px" to make menu appear aligned to the right window boundary. Screenshots before and after as follow ...

Copied from original issue: OfficeDev/office-ui-fabric-core#384

From @jigargandhi on July 27, 2016 5:56

The ms-Dialog class has set font-size:0 explicitly.
This causes elements without OfficeUI's classes to have a size of 0 pixels and hence invisible.
See plnk for sample.

Expected Output:
ms-Dialog should not have font-size set.

Copied from original issue: OfficeDev/office-ui-fabric-core#744

From @StfBauer on June 9, 2016 22:7

Just wanted to let you know that the Office UI Fabric table design is inconsitent with the new SharePoint and Office 365 Design.

Office UI Fabric use squared boxes.

All other Office 365 Applications use round check boxes.

Copied from original issue: OfficeDev/office-ui-fabric-core#657

From @mikewheaton on June 5, 2016 21:58

It's not possible to select a month or year using the keyboard.

Copied from original issue: OfficeDev/office-ui-fabric-core#643

From @git-sdavidpaul on September 16, 2015 1:40

Is there any components (current or upcoming) for grouping content? something like Accordion panels etc. or some other intuitive controls for grouping content under some common entities.

Copied from original issue: OfficeDev/office-ui-fabric-core#128

From @dmitriyyepishin on July 15, 2016 20:15

Sample HTML files in documentation\Components\ has incorrect have incorrect path to Fabric JS and CSS files. The path is missing one "..". For example

<script type="text/javascript" src="../../js/fabric.js"></script>

should be

<script type="text/javascript" src="../../../js/fabric.js"></script>

Copied from original issue: OfficeDev/office-ui-fabric-core#727

From @mikewheaton on June 5, 2016 22:0

Currently you can tab through the options, but it should support using arrow keys to change options and spacebar to select one.

Copied from original issue: OfficeDev/office-ui-fabric-core#644

From @mikewheaton on June 5, 2016 21:42

Right now all of the variants are shown with the blue underline. Do we no longer have PeoplePicker attached to a more standard looking text box?

Copied from original issue: OfficeDev/office-ui-fabric-core#637

From @DwayneSmurdon on June 24, 2016 6:28

On http://dev.office.com/fabric/styles there is a Font weight section. Under it are two columns and the "class" and "weight" columns are swapped.

Also, I believe it would prove useful for this information (styles) could be included under the dist/documentation folder.

Copied from original issue: OfficeDev/office-ui-fabric-core#688

From @Rick-Kirkham on June 22, 2016 0:11

The JS version of MessageBanner exposes a hideBanner() method. This is not exposed in the TypeScript verson. As a result the only way that the MessageBanner can be hidden on startup, which is normally what a developer would want, is to add the class "is-hidden" to the

From @mikewheaton on June 5, 2016 19:24

We have two reported high contrast issues for the Callout:

1. There are no outlines around the callout:
   • 
2. Callout links are purple in HC Black. They should be yellow.
   • 

Copied from original issue: OfficeDev/office-ui-fabric-core#630

From @brian-ding on June 16, 2016 15:14

i am playing with newly released 3.0.0 beta, it is great that navbar and commandbar are merged into a single component.

i found some html code like this in ./documentation/Components/CommandBar/index.html

         <!-- Overflow Command -->
            <!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->
            <div class="ms-CommandButton ms-CommandBar-overflowButton ms-CommandButton--noLabel">
                <button class="ms-CommandButton-button">
                    <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--ellipsis"></i></span><span class="ms-CommandButton-label"></span>
                </button>
                <ul class="ms-ContextualMenu  is-opened ms-ContextualMenu--hasIcons">
                    <li class="ms-ContextualMenu-item ">
                        <a class="ms-ContextualMenu-link " tabindex="1">Folder</a>
                        <i class="ms-Icon ms-Icon--folder "></i>
                    </li>
                    <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
                    <li class="ms-ContextualMenu-item ">
                        <a class="ms-ContextualMenu-link " tabindex="1">Plain Text Document</a>
                        <i class="ms-Icon ms-Icon--document "></i>
                    </li>
                    <li class="ms-ContextualMenu-item ">
                        <a class="ms-ContextualMenu-link " tabindex="1">A Dog</a>
                        <i class="ms-Icon ms-Icon--dogAlt "></i>
                    </li>
                    <li class="ms-ContextualMenu-item ">
                        <a class="ms-ContextualMenu-link " tabindex="1">The Sun</a>
                        <i class="ms-Icon ms-Icon--sun "></i>
                    </li>
                    <li class="ms-ContextualMenu-item ">
                        <a class="ms-ContextualMenu-link " tabindex="1">Money</a>
                        <i class="ms-Icon ms-Icon--money "></i>
                    </li>
                </ul>
            </div>
            <!-- End Overflow Command -->

1. the weired thing is, if i delete any of those li inside ul label, seems has no effect. Everything is still the way it was. Could anyone help me the logic here?
2. if i comment out the whole ul section, "..." will always be showing in the commandbar, no matter what size of my browser is
3. if l leave the code the way it is, in a large screen, everything works fine. but when i adjust browser(Edge) to be a smaller size, click on "..." does popup the list of buttons, but clicking on these buttons has no effect, no navigation, nothing happens

i referen these js files

fabric.js
fabric.templates.js
PickaDate.js

and add the js code like below

 var CommandBarElements = document.querySelectorAll(".ms-CommandBar");
    for (var i = 0; i < CommandBarElements.length; i++) {
        new fabric['CommandBar'](CommandBarElements[i]);
    }

Any help is appreciated, thank you!

Copied from original issue: OfficeDev/office-ui-fabric-core#668

From @schott12521 on July 27, 2016 15:21

I'm trying to make a ContextualMenu for filtering and sorting lists and tables and such, and I'm wondering what the best way to achieve something like the menu used in Office 365's Outlook app, seen here:

It seems that all the ContextualMenu javascript doesn't do that much, and if I have the ContextualMenu inside a CommandBar or NavBar, then I can't have submenus and the is-selected doesn't persist, it only can take me to an href. Any suggestions would be awesome, thanks.

Copied from original issue: OfficeDev/office-ui-fabric-core#746

From @sivarajanr on July 24, 2016 3:42

Team,

I have created the Office UI Fabric code snippets for Visual Studio Code.

https://marketplace.visualstudio.com/items?itemName=sivarajanraju.vs-code-office-ui-fabric

Please include in Office UI Fabric resources section.

Copied from original issue: OfficeDev/office-ui-fabric-core#740