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.

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

Button: Conditionally rendering KeytipData #9276

Merged
merged 4 commits into from
Jun 3, 2019
Merged

Button: Conditionally rendering KeytipData #9276

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
71e1ac9
Adding conditional rendering of KeytipData in oufr Button.
khmakoto May 29, 2019
3c91338
Moving Tag inside KeytipData and adding the same conditional renderin…
khmakoto May 30, 2019
f7b4b61
Calling function instead of using JSX Element for Keytips.
khmakoto Jun 3, 2019
d9f7fdc
Calling function instead of using JSX Element for Keytips in Button.view
khmakoto Jun 3, 2019
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/@uifabric/experiments/buttonKeytip_2019-05-29-23-51.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "@uifabric/experiments",
"comment": "Button: Conditionally rendering KeytipData.",
"type": "patch"
}
],
"packageName": "@uifabric/experiments",
"email": "[email protected]"
}
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/buttonKeytip_2019-05-29-23-51.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": "Button: Conditionally rendering KeytipData.",
"type": "patch"
}
],
"packageName": "office-ui-fabric-react",
"email": "[email protected]"
}
46 changes: 25 additions & 21 deletions packages/experiments/src/components/Button/Button.view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,29 +29,33 @@ export const ButtonView: IButtonComponent['view'] = props => {
}
};

return (
const Button = (keytipAttributes: any): JSX.Element => (
<Slots.root
type="button" // stack doesn't take in native button props
role="button"
onClick={_onClick}
{...buttonProps}
{...keytipAttributes}
disabled={disabled && !allowDisabledFocus}
aria-disabled={disabled}
tabIndex={!disabled || allowDisabledFocus ? 0 : undefined}
aria-label={ariaLabel}
ref={buttonRef}
>
<Slots.stack horizontal as="span" tokens={{ childrenGap: 8 }} verticalAlign="center" horizontalAlign="center" verticalFill>
<Slots.icon />
<Slots.content />
{children}
</Slots.stack>
</Slots.root>
);

return keytipProps ? (
<KeytipData keytipProps={keytipProps} disabled={disabled && !allowDisabledFocus}>
{(keytipAttributes: any): JSX.Element => (
<Slots.root
type="button" // stack doesn't take in native button props
role="button"
onClick={_onClick}
{...buttonProps}
{...keytipAttributes}
disabled={disabled && !allowDisabledFocus}
aria-disabled={disabled}
tabIndex={!disabled || allowDisabledFocus ? 0 : undefined}
aria-label={ariaLabel}
ref={buttonRef}
>
<Slots.stack horizontal as="span" tokens={{ childrenGap: 8 }} verticalAlign="center" horizontalAlign="center" verticalFill>
<Slots.icon />
<Slots.content />
{children}
</Slots.stack>
</Slots.root>
)}
{(keytipAttributes: any): JSX.Element => <Button keytipAttributes={keytipAttributes} />}
</KeytipData>
) : (
<Button />
khmakoto marked this conversation as resolved.
Show resolved Hide resolved
);
};

Expand Down
30 changes: 19 additions & 11 deletions packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,7 +274,20 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
};
}

const Content = (
const Button = () => (
khmakoto marked this conversation as resolved.
Show resolved Hide resolved
<div className={this._classNames.flexContainer}>
{onRenderIcon(props, this._onRenderIcon)}
{this._onRenderTextContents()}
{onRenderAriaDescription(props, this._onRenderAriaDescription)}
{onRenderChildren(props, this._onRenderChildren)}
{!this._isSplitButton &&
(menuProps || menuIconProps || this.props.onRenderMenuIcon) &&
onRenderMenuIcon(this.props, this._onRenderMenuIcon)}
{this.state.menuProps && !this.state.menuProps.doNotLayer && onRenderMenu(menuProps, this._onRenderMenu)}
</div>
);

const Content = keytipProps ? (
// If we're making a split button, we won't put the keytip here
<KeytipData
keytipProps={!this._isSplitButton ? keytipProps : undefined}
Expand All @@ -283,19 +296,14 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
>
{(keytipAttributes: any): JSX.Element => (
<Tag {...buttonProps} {...keytipAttributes}>
<div className={this._classNames.flexContainer}>
{onRenderIcon(props, this._onRenderIcon)}
{this._onRenderTextContents()}
{onRenderAriaDescription(props, this._onRenderAriaDescription)}
{onRenderChildren(props, this._onRenderChildren)}
{!this._isSplitButton &&
(menuProps || menuIconProps || this.props.onRenderMenuIcon) &&
onRenderMenuIcon(this.props, this._onRenderMenuIcon)}
{this.state.menuProps && !this.state.menuProps.doNotLayer && onRenderMenu(menuProps, this._onRenderMenu)}
</div>
<Button />
</Tag>
)}
</KeytipData>
) : (
<Tag {...buttonProps}>
<Button />
</Tag>
);

if (menuProps && menuProps.doNotLayer) {
Expand Down