microsoft / fluentui Goto Github PK

<Button
buttonType={ButtonType.icon}
onClick={this.onClickAttachmentButton}
icon='attachment'
className={classNames(['ms-icon-font-size-22', 'ms-bg-color-neutralLight-hover', 'ms-font-color-white'])}/>

Currently all the three ms symbols are ignored due the conflicting css from ms-Icon\ms-button-Icon.

From Button.tsx, I found the following code:
const className = css((this.props.className), 'ms-Button', {
'ms-Button--primary': buttonType === ButtonType.primary,
'ms-Button--hero': buttonType === ButtonType.hero,
'ms-Button--compound': buttonType === ButtonType.compound,
'ms-Button--command': buttonType === ButtonType.command,
'ms-Button--icon': buttonType === ButtonType.icon,
'disabled': (renderAsAnchor && disabled) // add disable styling if it is an anchor
// if not utilize default button disabled behavior.
});

Can we fix this issue via moving this.props.className to be the last parameter? I'm not a CSS expert. But I guess the order may matter.

There appears to be issues when trying to use the library with 15.2.1. I was getting a bunch of warnings in my app that were not appearing in the demo (gulp serve) app. I bumped up the version of react and react-dom the demo is downloading from the CDN from 0.14.7 to 15.2.1 and the demo app started throwing the same warnings.

If I track it down, I'll post more info. So far the warnings are just cluttering up my console, nothing broken. The warnings seem to be throwing across multiple pages so a lot of files might need to be updated. The one page that I looked at appeared like the code was written exactly like the latest react docs said it should be written, but that was just a quick glance.

Link to warning page in react docs

Could we provide a build of Fabric React that can be used directly in a simple app, without any NPM dependencies, build process, etc? I'm anticipating that we'll get questions like this from developers who are working on simple add-ins and want to just drop a reference in and start using it.

Are there any plans to add support for <input type="number"/>?

The documentation for DetailsList doesn't include the values for SelectionMode.

The <Layer> component is useful for ensuring that child content displays 'over top' of all other content. However, since the layer DOM is rendered elsewhere on the page, it plays havoc with normal eventing behaviors which are useful for tracking focus and handling dismissal of popups via 'outside' clicks.

Ideally, one should be able to define a <ChildFocus> component which detects whether child elements have focus. This should include any content rendered within a <Layer>. Also, a <Dismiss> wrapper should be able to determine that clicks within a child <Layer> are not actually clicks outside the component.

To fix this, I propose we do a couple of things:

1. Define a way to associate two disparate DOM elements as a 'virtual' parent and child.
2. Write wrapper methods for DOM traversal which may account for these virtual relationships. For example, create wrappers such getParent and contains which check for 'virtual' parent DOM elements before the real DOM parents.
3. Update all existing components to use the wrapper DOM traversal methods, allowing for handling of 'virtual' parents where appropriate.

/**
 * Marks a element as the virtual parent of a child. 
*/
export function setVirtualParent(virtualChild: HTMLElement, virtualParent: HTMLElement): void;

/**
 * Gets the element which is the virtual parent of a child, if such exists.
 */
export function getVirtualParent(element: HTMLElement): HTMLElement | undefined;

/**
 * Gets the effective parent of the given element, prefering virtual parents first if allowed.
 */ 
export function getEffectiveParent(element: HTMLElement, allowVirtual: boolean = true): HTMLElement | undefined;

/**
 * Determines whether an element has a given element as its ancestor.
 */
export function isAncestorOrSelf(element: HTMLElement, ancestor: HTMLElement, allowVirtual: boolean = true): boolean {
    let isAncestor: boolean;

    while (!(isAncestor = element !== ancestor) && getEffectiveParent(element, allowVirtual)) {
        element = getEffectiveParent(element);
    }

    return isAncestor;
}

When clearing the SearchBox using the X button, the onChanged event should be called so that the app can respond to the change in text.

The ChoiceGroup has an optional imageSrc string parameter. How can I give it a Icon like the one below.
<i className='ms-Icon ms-Icon-star' />
let me know if the question is not clear.

The CommandBar components does not apply the clicked item and event as the arguments to the onClick callback. Currently the _onItemClick function is:

if (item.onClick) {
      item.onClick();
    }

while it should be

if (item.onClick) {
      item.onClick(item, ev);
    }

to match the definition in IContextualMenuItem

/**
   * Callback issued when the menu item is invoked
   */
  onClick?: (item?: IContextualMenuItem, ev?: React.MouseEvent) => void

If I am reading the documentation right, I can only add an icon to hero or command buttons. So this is likely by design. Is there a way I can have the ButtonType.primary button look and have an icon?

I tried this:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Button, ButtonType } from 'office-ui-fabric-react/lib/Button';

const MyPage = () => (<div><Button icon="personAdd" buttonType={ ButtonType.primary }>I am a button.</Button></div>);

ReactDOM.render(<MyPage />, document.getElementById("content") as Element);

If you render the DetailsList in a hidden DIV, and then do something that causes the DIV to become visible, the withViewport decorator is never made aware of the change, so it doesn't re-render.

Consider a solution like:

https://www.npmjs.com/package/element-resize-event

Many components in fabric-react consume props which have initial values as well as callbacks for when those values change. However, since these are all passed separately the relationships are not always crystal clear.

For example:

interface IColorSliderProps {
    ...
    initialValue?: number;
    onChanged?: (newValue: number) => void;
}

interface ITextFieldProps {
    ...
    value?: string;
    onChanged?: (newValue: any) => void; // Bug: this is 'any' but the type should be 'string'
}

I propose that we adopt a loose concept for subscribable values, such as IValueHandler<T>:

interface IValueHandler<T> {
    initial?: T;
    onBeforeChange?: (newValue: T) => void;
    onChange?: (newValue: T) => void;
}

Then, props nicely clean up to this:

interface IColorSliderProps {
    color?: IValueHandler<number>;
}

interface ITextFieldProps {
    text?: IValueHandler<string>;
}

One could then write some utility methods to read and write IValueHandler<T> instances, so components do not have to handle all the cases themselves:

export function updateValueHandler<T>(handler: IValueHandler<T> = {}, value: T): void {
    let {
        onChange
    } = handler;

    if (onChange) {
        onChange(value);
    }
}
...
updateValueHandler(this.props.color, newColor);

What is nice about this pattern is that components would not need to store the callbacks from props, and could handle changes and updates to the callbacks. The callbacks would always be grouped and type-matched to their values.

The red area is the layout space consumed. It doesn't actually flow around the content with the text, causing alignment issues if you try to center it.

Repro steps:

1. Keyboard to a interaction that brings up ContexualMenu
2. Hit Space/Enter
3. ContexualMenu appears in top left corner

Cannot set tabindex on DatePicker, meaning that its use in forms becomes difficult. DatePickerProps should extend from HTMLProps

When setting the isOpen property to false the animation is not triggered because the actual panel will not be rendered anymore.

This piece of code in componentWillReceiveProps

this.setState({
        isOpen: newProps.isOpen,
        isAnimatingOpen: newProps.isOpen ? true : false,
        isAnimatingClose: newProps.isOpen ? false : true
      });

should read

this.setState({
        isOpen: true,
        isAnimatingOpen: newProps.isOpen ? true : false,
        isAnimatingClose: newProps.isOpen ? false : true
      });

which prevents the panel from closing immediately and triggers the closing animation instead. The _onAnimationEnd handler will take care of setting isOpen to false.

In ContextualMenu customization example the class Charm-list is not being applied to the item's ContextualMenu.

Repro steps:

1. Go to ContextualMenu customization example
2. Click on button to get the parent ContextualMenu, and then on Charm.
3. Notice charms not is center aligned, as .Charm-List is not applied to charm item's context menu.

When a DetailsList is given SelectionMode.none, should it still render FocusZones around the rows? I'm attempting to use it for a simple, non-interactive table and the rows have a focus state:

For some reason the onRenderHeader callback in groupedList takes in IGroup, rather than the component props.

This prevents partners from implementing their own headers that have a select group button.

Is there a reason that jsx attributes use single quote marks? I haven't seen any other React library that does it that way (and it looks weird :)). Guess that is also a problem of coding conventions vs HTML conventions?

The tslint rule supports different rules for jsx attributes and string literals.

...because it uses padding-right when it should use symmetrical padding.

Please fix. There are a variety of scenarios we have with icon only buttons. We should be using and it should look correct.

IE 11 bug only (all other browsers fail much more gracefully it seems)

With a large dialog that would usually require a scroll bar, it seems that due to IE 11's poor implementation of flex-box the dialog is always centered in the middle which means the top and bottom of the dialog get cut off.

This is in ^47.0.0

Here is the current disabled state of the icon-only button:

It should instead use neutralTeriaryAlt (#C8C8C8) for the icon color, and have no background color. There should also be no change to the button's background color when hovering over a disabled button.

Dropdown can't render icons with items. We had an ask to support this.

At a bare minimum we should enable the component to allow custom item renderers to be provided.

Presently, <Layer> relies on a default, static implementation of a <LayerHost> in order to render layers. This ensures that all layers are rendered in a <div> at the end of the DOM.

However, the frameworks in host applications may already provide a layering mechanic. In which case, office-ui-fabric-react's layering mechanic will interfere because it cannot interleave layers with the ones provided by the host framework.

<Layer> can be used by any React component, so it would be incorrect to require the consumer of any <Layer> to accept an override for the current LayerHost. I would propose that <Layer> should first check the React context for a LayerHost before defaulting to the static singleton instance.

This would allow a host app to expose an override for the LayerHost via context before rendering child React components.

Repro steps:

1. Reduce width of screen < 480px
2. Open a dropdown
3. Dropdown list appears in top right corner

The DatePicker does not dismiss properly when used in a Panel (and possibly other layer host components)

1. User clicks datepicker field, datepicker opens
2. User selects date, onSelected is successfully called
3. User clicks anywhere in the layer host, onSelected is called again with a null value
4. Date in datepicker field is reset to today

It's way too complex for a simple TextField. We need to factor out a simple textfield and clean this up.

Right now it has added all of this async validation logic, which delays the change events unnecessarily by default, and when you set delays to 0 it stops firing change events. This is all totally unnecessary. It needs to be slimmed down and a new component for validation should be layered on top of it. That way people that need a simple, predictable textfield can use it, without being concerned with delays and promises.

There are some issues with the input components which make them awkward to use in my opinion, especially when used in combination with form libraries like redux-form or react-forms.

In my opinion, the components should be as dump as possible and the api/functionality of the input controls should a superset of the native<input />, <textarea /> and <select /> controls.

Checkbox

• Component should be named ChoiceField
• Why use isChecked / onChanged as props instead of using the standard checked / onChange
• name prop is missing
• text prop should be names label (to be consistent with Toggle)
• Internal state should be removed. Could even be a functional component by making name or id required.
• defaultChecked and checked() getter should be added (to be consistent with Toggle)

Toggle

• Why use checked / onChanged as props instead of using the standard checked / onChange
• name prop is missing
• Internal state should be removed. Could even be a functional component by making name or id required. checked() getter should use the DOM element instead of state.

TextField

• Currently, when neither value nor defaultValue is passed as a prop, the underlying <input /> element switches from uncontrolled to controlled and an error is thrown. This is again an issues when maintaining internal state.
• The prop names for validation callbacks are confusing.
• The validation stuff should be moved into a HOC, i.e. ValidatingTextField, the TextField component does too much stuff in my opinion.
• Should support the value / onChange props standard.

Haven't looked at Dropdown/ChoiceFieldGroup yet.

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

I am using the react fabric dialog control inside which we load an iframe to render a web page. I am setting isOpen to false as I want the dialog to be invisible. When an event occurs I want the dialog to be visible which will get hidden again when another event occurs.

The issue is that setting isOpen to false does not render the child components. I looked at the code of the control and it looks like we are returning null when isOpen is false.

Can we get some kind of isVisible property or equivalent to be able to accomplish this scenario. We are currently blocked on this issue and looking for a fast resolution.

I know it might seem weird at first on the kind of requirement we have. There is a feature that we support known as the UiLess Addin. Its Hidden all the time but displayed temporarily when a user action is needed inside a dialog. I cannot dynamically move the iframe inside a dialog as mike suggested without causing a re-render. I tried all these things out myself to try and overcome the need to alter the visibility of the dialog but nothing works.

The hero button is no longer part of the design language, and should be removed.

Add animations to Dialog similar to that of Panel

• This Callout could be used to draw attention to one aspect of the application during a product tour.

Currently ContextMenu control does not provide a way to override the z-index of the main div inside of the context menu control causing it to be overlapped by other components in our application. Please provide a way similar to what we did for the dialog. (Refer Pull Request #16 )

In our application we have several very large dialogs of which on small windows would require scroll bars (vertical mainly as we try to have the contents variable up to 250px).

Seems the current instance of the dialog as of ^0.47.0 doesn't support scrolling dialogs.

The <ContextualMenu> class has more responsibilities than it should. In addition to taking a command list and rendering a callout, it also handles the interaction with the command list and rendering of menu items.

Ideally, <ContextualMenu> should just be a compositional component that wraps a <Callout> around a <Menu> component. The <Menu> component would render a veritically-navigable list of commands, handling keyboard focus and selection, and would provide a callback with regard to how to render child menus.

export default class Callout extends ___ {
    public render() {
        ...
        return (
            <Callout
                ...
                >
                <Menu
                    ...
                    renderChildMenu={
                        (items: IMenuItems) => 
                            (
                                <ContextualMenu
                                    items={ items }
                                    />
                             )
                    />
            </Callout>
        )
    }
}

The idea is that <ContextualMenu> would now just delegate all menu item rendering to a <Menu> component, but tell the <Menu> that child menu item lists need to render using another <ContextualMenu> component.

If we have a <Menu> component, it could be re-used in the <LeftNav> component, ensuring that all the latest accessibility enhancements and ability to render different menu item templates are shared.

ContexualMenu doesn't change it's direction when in RTL

Left to Right, Right Center
Excepted: Right Center

Right to Left, Right Center
Expected: Left Center, but it's Right Center

• Go to the People picker component demo page
• Type any name on the control.
• Click on Search contact & directory
  => it doesn't show Searching indicator!

Just created sample react+redux app using yo aspnetcore-spa and added office-ui-fabric-react
And ive occured with a strange problem after adding a button from the sample
import { Button } from 'office-ui-fabric-react/lib/Button';
Office UI Fabric button

Exception: Call to Node module failed with error: ReferenceError: document is not defined
at registerStyles (C:\Projects\IMS\node_modules\load-themed-styles\lib\index.js:152:16)
at applyThemableStyles (C:\Projects\IMS\node_modules\load-themed-styles\lib\index.js:45:9)
at Object.loadStyles (C:\Projects\IMS\node_modules\load-themed-styles\lib\index.js:33:5)
at Object. (C:\Projects\IMS\node_modules\office-ui-fabric-react\lib\components\Button\Button.scss.js:3:22)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)

Exception: Call to Node module failed with error: ReferenceError: document is not defined at registerStyles (C:\Projects\IMS\node_modules\load-themed-styles\lib\index.js:152:16) at applyThemableStyles (C:\Projects\IMS\node_modules\load-themed-styles\lib\index.js:45:9) at Object.loadStyles (C:\Projects\IMS\node_modules\load-themed-styles\lib\index.js:33:5) at Object. (C:\Projects\IMS\node_modules\office-ui-fabric-react\lib\components\Button\Button.scss.js:3:22) at Module._compile (module.js:541:32) at Object.Module._extensions..js (module.js:550:10) at Module.load (module.js:458:32) at tryModuleLoad (module.js:417:12) at Function.Module._load (module.js:409:3) at Module.require (module.js:468:17)

On and Off states are not distinguishable in high contrast mode (black and white)

Looks like the css class ms-TextField-field has a min-width of 180px. This is slightly annoying for those of us who have slim controls who may need a much smaller space (e.g. a numerical input box which only goes up to 99).

The other issue is to make the min-width value public. In my code I have 4 fields, some dropdowns and some text inputs. I want them all to be the exact size so I used flexbox. I originally had

.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.parent > * {
flex: 1 1 150px;
}

But due to the min-width on the text input, the 150 got overridden and it ended up being 180 only for those fields. Since it's not a public variable, I can't change my flex values to so all my sizes match which would be like so:

.parent > * {
flex: 1 1 max($minWidthOfTextField, $minWidthOfDropdown, $minWidthOfDatepicker);
}

But to be honest, to skip all this complexity, if we could just remove the min-width field, that would be better.

ERROR: 'Warning: TextField contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://fb.me/react-controlled-components'

regarding the date-picker
I can pragmatically change the value of the date picker by changing the value prop. Intuitively I would think I could set it to blank by giving it a null date. However this does not seem to make it blank. Is there a way to pragmatically reset the date-picker and make it blank.

In general, layered components have a 'light-dismiss' mechanic by which user action outside the layer content should trigger a dismissal of the layer, either immediately or after a short period of time.

At present, each fabric-react component implements this mechanic independently, preventing standardization of this behavior as well as making it more difficult to handle issues such as 'virtual' parents (see #68).

The 'light-dismiss' behavior should be factored into a <LightDismiss> component which wraps content and tracks user interaction that only occurs outside all wrapped content. This should properly handle child and nested <Layer> elements by making use of the 'virtual'-aware isAncestorOrSelf methods.

<LightDismiss
    onDismiss={ this._onDismiss }
    >
    // Clicking on the button will *not* dismiss the popup, since it is within the <LightDismiss>
    <TextField text={ onChange: this._onTextChange } />
    <Dropdown>
        <ul>
            ...
        </ul>
    </Dropdown>
</LightDismiss>

The purpose of <LightDismiss> is to allow parent content to be treated as still in the 'active' zone, so that clicking outside the layer onto a sibling element does not automatically dismiss the layer.

One thing that <LightDismiss> could supply, in addition to rendering the content and wiring up the event handlers, is a hidden 'close' button, that is both focusable and visible to screen readers. This would improve accessibility in such situations.

Many of the components have z-index values baked in, which might work relative to other Fabric components but are often wrong for fitting into an existing app. I haven't dug into the Layer component but I understand it is an alternative to this. If not, we should at least provide an interface to every z-index so that developers can stack the components however their app requires.

It seems that when isMonthPickerVisible = false it doesn't render very well. This is a screenshot from IE 11 and ^47.0.0.

It would be great if it only took up the smallest amount of space it needs to and didn't have the white space to the right.

See screenshot.

The text field should be optional. If I get some time, I will submit a PR, but customers are keeping me busy.

I am doing <Checkbox text="" /> as workaround.

For rendering the list items a Dropdown should use a Callout component.

This will also fix the issue where it currently does not dismiss when clicked outside of the component.