Skip to content

Add the ability to use custom props for the panel used to render options #4438

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.

Sign up for GitHub

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

Merged
micahgodbolt merged 1 commit into from
Apr 4, 2018
Merged

Add the ability to use custom props for the panel used to render options #4438

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/jochiari-cutom-props_2018-04-02-22-34.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "Add the ability to use custom props for the panel used to render options on small devices.",
"type": "minor"
}
],
"packageName": "office-ui-fabric-react",
"email": "jchiarino@gmail.com"
}
6 changes: 4 additions & 2 deletions packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -346,6 +346,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
onRenderList = this._onRenderList,
responsiveMode,
calloutProps,
panelProps,
dropdownWidth
} = this.props;

Expand All @@ -355,11 +356,12 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
isSmall ?
(
<Panel
className={ css('ms-Dropdown-panel', styles.panel) }
className={ css('ms-Dropdown-panel', styles.panel, !!panelProps && panelProps.className) }
isOpen={ true }
isLightDismiss={ true }
onDismissed={ this._onDismiss }
hasCloseButton={ false }
{ ...panelProps }
>
{ onRenderList(props, this._onRenderList) }
</Panel>
Expand All @@ -373,7 +375,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
directionalHintFixed={ true }
directionalHint={ DirectionalHint.bottomLeftEdge }
{ ...calloutProps }
className={ css('ms-Dropdown-callout', styles.callout, calloutProps ? calloutProps.className : undefined) }
className={ css('ms-Dropdown-callout', styles.callout, !!calloutProps && calloutProps.className) }
target={ this._dropDown.value }
onDismiss={ this._onDismiss }
onScroll={ this._onScroll }
Expand Down
6 changes: 6 additions & 0 deletions ...es/office-ui-fabric-react/src/utilities/selectableOption/SelectableDroppableText.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import { IRenderFunction } from '../../Utilities';
import { ICalloutProps } from '../../Callout';
import { IPanelProps } from '../../Panel';
import { ISelectableOption } from '../../utilities/selectableOption/SelectableOption.types';

export interface ISelectableDroppableTextProps<T> extends React.HTMLAttributes<T> {
Expand Down Expand Up @@ -86,6 +87,11 @@ export interface ISelectableDroppableTextProps<T> extends React.HTMLAttributes<T
*/
calloutProps?: ICalloutProps;

/**
* Custom properties for ISelectableDroppableText's Panel used to render options on small devices.
*/
panelProps?: IPanelProps;

Copy link
Copy Markdown
Member

@micahgodbolt micahgodbolt Apr 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain why panelProps needs to be added to this types file?

Copy link
Copy Markdown

@MEIFLWR MEIFLWR Apr 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The dropdown component renders a callout for a normal sized device, and a panel for small devices. Inside calloutProps, there's a field for specifying focustrapprops (and inside that, we can set the field forcefocusinsidetrap to be false). By setting these fields, we can click "outside" (ie, past the first page of items) and not have the focus forced to the top of the dropdown list. We need the ability to set these same props for the mobile implementation, since when the dropdown is rendered on mobile, it's a panel.

Copy link
Copy Markdown
Contributor Author

@joeuy joeuy Apr 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand that panelProps only apply to Dropdown component (when rendered in small devices), and SelectableDroppableText.types.ts factors out common props to both Dropdown and ComboBox component. However, because SelectableDroppableText.types.ts already contains calloutProps I though it was confusing to devs to find panelProps on a different file. Moreover, eventually ComboBox could benefit of the same behavior dropdown has today for small devices. Let me know your thoughts, thanks!

/**
* Descriptive label for the ISelectableDroppableText Error Message
*/
Expand Down