From a37ab03dc59156ce1f367e9c32ce5e18944a90aa Mon Sep 17 00:00:00 2001 From: David Zearing Date: Wed, 10 Aug 2016 18:08:25 -0700 Subject: [PATCH] FocusZone: minor documentation cleanup. (#113) * Adding autoscroll utility and marquee selection. * More fixes. * Enables selection preservation even when items dematerialize. * Math rounding tweak in auto scrolling. * Updating small nits. * Adding example page, improving props documentation, adding memoization to measures to improve performance. * More performance improvements. * Moving files to a more logical location. * Missing an index change. * Adding more best practices content. * Updating documentation. * Removing unnecessary call. * Removing dir from html. * Removing an unnecessary measure from autoscroll. * Updating basic details list example to use marquee selection. * With scrolltop fix (#3) * With scrolltop fix. * addressing lint issues * Improving the example by removing the images. * Removing the scroll monitoring and css tweaking from Fabric component, due to performance. * Fixing issues related to safari support. * Minor improvement to EventGroup. * Lint fixes. * Updates for PR comments. * Fixing hovers. * Updating checkbox to a cleaner contract. This is a breaking change for CheckBox! * Updating comments. * Minor pr updates. * Feedback. * Updating focuszone to have inputProps. * Tweaks to documentation. * Adding a class interface. --- src/components/Checkbox/Checkbox.Props.ts | 7 +++-- src/components/CommandBar/CommandBar.tsx | 2 +- .../ContextualMenu/ContextualMenu.tsx | 6 ++-- src/components/FocusZone/FocusZone.Props.ts | 28 +++++++++++++------ src/components/FocusZone/FocusZone.tsx | 10 +++++-- 5 files changed, 34 insertions(+), 19 deletions(-) diff --git a/src/components/Checkbox/Checkbox.Props.ts b/src/components/Checkbox/Checkbox.Props.ts index 832723238cbd3..a0bf3e9023894 100644 --- a/src/components/Checkbox/Checkbox.Props.ts +++ b/src/components/Checkbox/Checkbox.Props.ts @@ -49,9 +49,10 @@ export interface ICheckboxProps extends React.Props { onChange?: (ev?: React.FormEvent, isChecked?: boolean) => void; /** - * Input props that will be mixed into the input element, *before* other props are applied. This allows you to extend - * the input element with additional attributes, such as data-automation-id needed for automation. Note that if you - * provide, for example, "disabled" as well as "inputProps.disabled", the former will take precedence of the later. + * Optional input props that will be mixed into the input element, *before* other props are applied. This allows + * you to extend the input element with additional attributes, such as data-automation-id needed for automation. + * Note that if you provide, for example, "disabled" as well as "inputProps.disabled", the former will take + * precedence over the later. */ inputProps?: React.Props; } diff --git a/src/components/CommandBar/CommandBar.tsx b/src/components/CommandBar/CommandBar.tsx index d1fddfa4403e4..18ed069a4071a 100644 --- a/src/components/CommandBar/CommandBar.tsx +++ b/src/components/CommandBar/CommandBar.tsx @@ -100,7 +100,7 @@ export class CommandBar extends React.Component { searchBox } - +
{ renderedItems.map((item, index) => ( this._renderItemInCommandBar(item, index, expandedMenuItemKey) diff --git a/src/components/ContextualMenu/ContextualMenu.tsx b/src/components/ContextualMenu/ContextualMenu.tsx index 863eea596d0ab..6ac3e2c7c8fac 100644 --- a/src/components/ContextualMenu/ContextualMenu.tsx +++ b/src/components/ContextualMenu/ContextualMenu.tsx @@ -187,13 +187,11 @@ export class ContextualMenu extends React.Component this._host = host} id={ id } className={ css('ms-ContextualMenu-container', className) }> { (items && items.length) ? ( this._focusZone = focusZone } - rootProps={ { - className: 'ms-ContextualMenu is-open', - role: 'menu' - } } + rootProps={ { role: 'menu' } } >
    { items.map((item, index) => ( diff --git a/src/components/FocusZone/FocusZone.Props.ts b/src/components/FocusZone/FocusZone.Props.ts index 757c4589add62..0285f1bdf12fe 100644 --- a/src/components/FocusZone/FocusZone.Props.ts +++ b/src/components/FocusZone/FocusZone.Props.ts @@ -1,7 +1,23 @@ import * as React from 'react'; import { FocusZone } from './FocusZone'; +/** + * FocusZone component class interface. + */ +export interface IFocusZone { + /** Sets focus to the checkbox. */ + focus(): void; +} + +/** + * FocusZone component props. + */ export interface IFocusZoneProps extends React.Props { + /** + * Additional class name to provide on the root element, in addition to the ms-FocusZone class. + */ + className?: string; + /** * Defines which arrows to react to. * @default FocusZoneDirection.bidriectional @@ -39,14 +55,10 @@ export interface IFocusZoneProps extends React.Props { onActiveElementChanged?: (element?: HTMLElement, ev?: React.FocusEvent) => void; /** - * If provided, additional class name to provide on the root element. - */ - className?: string; - - /** - * If provided, HTMLProps which will be mixed in onto the root element emitted by the FocusZone, before - * other props are applied. This allows you to extend the root element with additional attributes, such as - * data-automation-id needed for automation. + * Optional DIV props 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. */ rootProps?: React.HTMLProps; } diff --git a/src/components/FocusZone/FocusZone.tsx b/src/components/FocusZone/FocusZone.tsx index bef60440fd2e3..09f95ef10f8e0 100644 --- a/src/components/FocusZone/FocusZone.tsx +++ b/src/components/FocusZone/FocusZone.tsx @@ -1,5 +1,9 @@ import * as React from 'react'; -import { IFocusZoneProps, FocusZoneDirection } from './FocusZone.Props'; +import { + FocusZoneDirection, + IFocusZone, + IFocusZoneProps +} from './FocusZone.Props'; import { EventGroup } from '../../utilities/eventGroup/EventGroup'; import { KeyCodes } from '../../utilities/KeyCodes'; import { getRTL } from '../../utilities/rtl'; @@ -26,7 +30,7 @@ interface IPoint { top: number; } -export class FocusZone extends React.Component { +export class FocusZone extends React.Component implements IFocusZone { public static defaultProps: IFocusZoneProps = { isCircularNavigation: false, @@ -90,7 +94,7 @@ export class FocusZone extends React.Component { return (