Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migration to module css! #1211

Merged
merged 62 commits into from
Mar 9, 2017
Merged
Changes from 1 commit
Commits
Show all changes
62 commits
Select commit Hold shift + click to select a range
b58e9bf
CSS modules: Buttons and Links (#1033)
dzearing Feb 21, 2017
1024bcd
CSS modules: Breadcrumb (#1035)
dzearing Feb 22, 2017
7589b20
Merge branch 'master' into module-css-updates
micahgodbolt Feb 23, 2017
291014e
CSS modules: Calendar, DatePicker (#1053)
dzearing Feb 24, 2017
e20edf9
CSS modules: Callout, ContextualMenu, Tooltip, TeachingBubble, Dialog…
dzearing Feb 24, 2017
ef66289
CSS modules: DetailsList, GroupedList (#1052)
dzearing Feb 24, 2017
440ac0f
MessageBar: Convert to CSS modules (#1086)
bomoldov Feb 24, 2017
03d3c03
Dzearing component css form (#1102)
micahgodbolt Feb 24, 2017
5da5647
CSS modules for dropdown, added base button flexContainer to be able …
micahgodbolt Feb 24, 2017
e732592
Refactoring module css for PeoplePicker. (#1069)
luhu Feb 27, 2017
e75d124
Pivot css module. (#1066)
YusongLiu Feb 27, 2017
edfc7fd
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
dzearing Feb 27, 2017
96ede42
Adding Searchbox css modules (#1068)
gokunymbus Feb 27, 2017
ddd12bf
Pickers: css modularize to keep it consistent (#1065)
joschect Feb 27, 2017
5fe1632
CSS Module Persona (#1109)
micahgodbolt Feb 27, 2017
15f1b57
Converts Nav component into modular css (#1089)
aleksandrjPersonal Feb 27, 2017
c3119f0
Module css: commandbar (#1125)
dzearing Feb 27, 2017
8aa9ec2
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
dzearing Feb 27, 2017
b262bfa
CSS Modules: Facepile (#1128)
micahgodbolt Feb 27, 2017
1e0df72
Fixing some typos in checkbox.
dzearing Feb 28, 2017
aa10e2a
Fixing padding rule in groupedlist.
dzearing Feb 28, 2017
c7acc07
Fixing ui nits in picker.
dzearing Feb 28, 2017
32b8e25
Polish on css. Making command buttons correctly left aligned.
dzearing Feb 28, 2017
bebc4d5
Updates to Panel for module css. (#1137)
dzearing Feb 28, 2017
d7e8998
Fixing Dropdown styling and focus issues.
dzearing Feb 28, 2017
39f5a64
CSS Modules: Document Card (#1149)
micahgodbolt Feb 28, 2017
4ae346a
Resolve merge conflicts pulling in master
micahgodbolt Feb 28, 2017
80c722f
Merge branch 'module-css-updates' of https://github.com/OfficeDev/off…
micahgodbolt Feb 28, 2017
c15cde4
Fixing test failure.
dzearing Mar 1, 2017
2f97bb9
More polish.
dzearing Mar 1, 2017
daf0715
Fixing ImageFit.cover
dzearing Mar 1, 2017
4bda64e
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
micahgodbolt Mar 1, 2017
ecdfb43
Setting version to beta1.
dzearing Mar 1, 2017
3ba9fb0
Merge branch 'module-css-updates' of https://github.com/OfficeDev/off…
micahgodbolt Mar 1, 2017
908140c
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
dzearing Mar 1, 2017
e191a5c
Merge branch 'module-css-updates' of https://github.com/OfficeDev/off…
dzearing Mar 1, 2017
76ec5a9
Fixed breadcrumb overflow bg on hover (#1159)
micahgodbolt Mar 1, 2017
bd867cf
Changed button label to button text, added prop and fixed examples (#…
micahgodbolt Mar 2, 2017
acffa26
Addressing tslint problems.
dzearing Mar 2, 2017
b645209
Bumping version.
dzearing Mar 2, 2017
41f3ce5
Remove width from icon in buttons (#1167)
micahgodbolt Mar 2, 2017
8b614cb
allow icon button to render children
micahgodbolt Mar 2, 2017
28bb746
Merge branch 'module-css-updates' of https://github.com/OfficeDev/off…
micahgodbolt Mar 2, 2017
9afa8a2
#791 Fixes command bar button layout shifting on hover in HighContras…
aleksandrjPersonal Mar 2, 2017
5f054d2
Updates to the Panel to position absolutely. Should unbreak Outlook.
dzearing Mar 3, 2017
6a3c302
Merge branch 'module-css-updates' of https://github.com/OfficeDev/off…
dzearing Mar 3, 2017
6831a4e
Updating package.
dzearing Mar 3, 2017
298a3ec
Add style property to IContextualMenuItem
MLoughry Mar 3, 2017
11e9fb5
Add change file
MLoughry Mar 3, 2017
c3817c9
Merge pull request #1172 from OfficeDev/contextual-menu/item-styles
MLoughry Mar 3, 2017
53fab45
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
dzearing Mar 6, 2017
0a5ab7d
Fixing lint.
dzearing Mar 6, 2017
29e7c2c
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
dzearing Mar 6, 2017
f7a3fdc
Fixing conflicts.
dzearing Mar 6, 2017
2a75005
Fixes
dzearing Mar 7, 2017
febe575
bump.
dzearing Mar 7, 2017
7c35e52
Resolved conflicts, fixed facepile button outline
micahgodbolt Mar 8, 2017
39abc0e
Merge branch 'master' into module-css-updates
micahgodbolt Mar 8, 2017
0762b51
Updated changes file
micahgodbolt Mar 8, 2017
fb86f2d
Merge branch 'master' into module-css-updates
micahgodbolt Mar 8, 2017
31b10fa
#1128 -- Fixes missing truncation in IE 11 for Persona text (#1219)
aleksandrjPersonal Mar 8, 2017
254f7ba
Merge branch 'master' into module-css-updates
dzearing Mar 9, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fixing Dropdown styling and focus issues.
  • Loading branch information
dzearing committed Feb 28, 2017
commit d7e8998b2f6a9aa7694aa0524c413585a4082cba
Original file line number Diff line number Diff line change
@@ -20,7 +20,6 @@ export class DropdownBasicExample extends React.Component<any, any> {
label='Basic uncontrolled example:'
id='Basicdrop1'
ariaLabel='Basic dropdown example'
onChanged={ (item) => this.setState({ selectedItem: item }) }
options={
[
{ key: 'A', text: 'Option a' },
@@ -78,7 +77,7 @@ export class DropdownBasicExample extends React.Component<any, any> {

public makeList(items) {
let list = [];
for (var i = 0; i < items; i++) {
for (let i = 0; i < items; i++) {
list.push({ key: i, text: 'Option ' + i })
};
return list;
Original file line number Diff line number Diff line change
@@ -178,6 +178,7 @@ $DropDown-item-height: 36px;
cursor: pointer;
display: block;
width: 100%;
height: 36px;
min-height: $DropDown-item-height;
line-height: 20px;
padding: 5px 16px;
Original file line number Diff line number Diff line change
@@ -2,8 +2,7 @@ import * as React from 'react';
import { IDropdownProps, IDropdownOption } from './Dropdown.Props';
import { DirectionalHint } from '../../common/DirectionalHint';
import { Callout } from '../../Callout';
import { BaseButton } from '../../Button';
import { List } from '../../List';
import { CommandButton } from '../../Button';
import { Panel } from '../../Panel';
import { FocusZone, FocusZoneDirection } from '../../FocusZone';
import { withResponsiveMode, ResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
@@ -72,7 +71,12 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
selectedIndex: this._getSelectedIndex(newProps.options, newProps.selectedKey)
});
}
}

public componentDidUpdate(prevProps: IDropdownProps, prevState: IDropdownState) {
if (prevState.isOpen === true && this.state.isOpen === false) {
this._dropDown.focus();
}
}

// Primary Render
@@ -97,7 +101,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
) }
<div
data-is-focusable={ !disabled }
ref={ (c): HTMLElement => this._dropDown = c }
ref={ this._resolveRef('_dropDown') }
id={ id }
className={ css('ms-Dropdown', styles.root, className, {
'is-open': isOpen,
@@ -216,19 +220,12 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
ref={ this._resolveRef('_focusZone') }
direction={ FocusZoneDirection.vertical }
defaultActiveElement={ '#' + id + '-list' + selectedIndex }
id={ id + '-list' }
className={ css('ms-Dropdown-items', styles.items) }
aria-labelledby={ id + '-label' }
onKeyDown={ this._onZoneKeyDown }
>
<List
id={ id + '-list' }
className={ css('ms-Dropdown-items', styles.items) }
aria-labelledby={ id + '-label' }
items={ props.options }
onRenderCell={
(item: IDropdownOption, index: number) => {
item.index = index;
return onRenderItem(item, this._onRenderItem);
}
}
/>
{ this.props.options.map((item, index) => onRenderItem({ ...item, index }, this._onRenderItem)) }
</FocusZone>
);
}
@@ -239,7 +236,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
let { onRenderOption = this._onRenderOption } = this.props;
let id = this._id;
return (
<BaseButton
<CommandButton
id={ id + '-list' + item.index }
ref={ Dropdown.Option + item.index }
key={ item.key }
@@ -252,11 +249,10 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
}
) }
onClick={ () => this._onItemClick(item.index) }
onFocus={ () => this.setSelectedIndex(item.index) }
role='option'
aria-selected={ this.state.selectedIndex === item.index ? 'true' : 'false' }
aria-label={ item.text }
> { onRenderOption(item, this._onRenderOption) }</BaseButton>
> { onRenderOption(item, this._onRenderOption) }</CommandButton>
);
}

@@ -281,6 +277,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
@autobind
private _onDismiss() {
this.setState({ isOpen: false });
this._dropDown.focus();
}

private _getSelectedIndex(options: IDropdownOption[], selectedKey: string | number) {
@@ -311,7 +308,11 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
break;

case KeyCodes.down:
this.setSelectedIndex(this.state.selectedIndex + 1);
if (ev.altKey || ev.metaKey) {
this.setState({ isOpen: true });
} else {
this.setSelectedIndex(this.state.selectedIndex + 1);
}
break;

case KeyCodes.home:
@@ -330,6 +331,30 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
ev.preventDefault();
}

@autobind
private _onZoneKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
switch (ev.which) {

case KeyCodes.up:
if (ev.altKey || ev.metaKey) {
this.setState({ isOpen: false });
break;
}

return;

case KeyCodes.escape:
this.setState({ isOpen: false });
break;

default:
return;
}

ev.stopPropagation();
ev.preventDefault();
}

@autobind
private _onDropdownClick() {
let { disabled, isDisabled } = this.props;
Original file line number Diff line number Diff line change
@@ -25,7 +25,10 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
let { elementToFocusOnDismiss, isClickableOutsideFocusTrap = false, forceFocusInsideTrap = true } = this.props;

this._previouslyFocusedElement = elementToFocusOnDismiss ? elementToFocusOnDismiss : document.activeElement as HTMLElement;
this.focus();

if (!elementContains(this.refs.root, this._previouslyFocusedElement)) {
this.focus();
}

if (forceFocusInsideTrap) {
this._events.on(window, 'focus', this._forceFocusInTrap, true);
Original file line number Diff line number Diff line change
@@ -24,7 +24,7 @@ export interface IFocusZone {
/**
* FocusZone component props.
*/
export interface IFocusZoneProps extends React.Props<FocusZone> {
export interface IFocusZoneProps extends React.HTMLProps<HTMLElement | FocusZone> {
/**
* Additional class name to provide on the root element, in addition to the ms-FocusZone class.
*/
@@ -72,10 +72,9 @@ export interface IFocusZoneProps extends React.Props<FocusZone> {
onActiveElementChanged?: (element?: HTMLElement, ev?: React.FocusEvent<HTMLElement>) => void;

/**
* Props mixed into the div root element that will be mixed into the root element, *before* other props are applied.
* This allows you to extend the root element with additional attributes, such as data-automation-id needed for
* automation. Note that if you provide, for example, "ariaLabelledBy" as well as "rootProps.ariaLabelledBy", the
* former will take precedence over the later.
* Root props to mix into the root element.
* @deprecated
* Deprecated at v1.12.1, to be removed at >= v2.0.0. Use specific button component instead
*/
rootProps?: React.HTMLProps<HTMLDivElement>;

Original file line number Diff line number Diff line change
@@ -10,10 +10,12 @@ import {
KeyCodes,
autobind,
css,
divProperties,
elementContains,
getDocument,
getId,
getNextElement,
getNativeProps,
getParent,
getPreviousElement,
getRTL,
@@ -54,7 +56,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
private _isInnerZone: boolean;

constructor(props) {
super(props);
super(props, { 'rootProps': null });

this._id = getId('FocusZone');
_allInstances[this._id] = this;
@@ -89,6 +91,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo

if (this.props.defaultActiveElement) {
this._activeElement = getDocument().querySelector(this.props.defaultActiveElement) as HTMLElement;
this.focus();
}
}

@@ -98,9 +101,11 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo

public render() {
let { rootProps, ariaLabelledBy, className } = this.props;
let divProps = getNativeProps(this.props, divProperties);

return (
<div
{ ...divProps }
{ ...rootProps }
className={ css('ms-FocusZone', className) }
ref='root'
@@ -109,7 +114,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
onKeyDown={ this._onKeyDown }
onFocus={ this._onFocus }
{ ...{ onMouseDownCapture: this._onMouseDown } }
>
>
{ this.props.children }
</div>
);
@@ -237,6 +242,14 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
return;
}

if (this.props.onKeyDown) {
this.props.onKeyDown(ev);

if (ev.isDefaultPrevented()) {
return;
}
}

if (
isInnerZoneKeystroke &&
this._isImmediateDescendantOfZone(ev.target as HTMLElement) &&