Skip to content

DetailsList: selection column header in single selection mode #7842

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
leddie24 merged 15 commits into from
Feb 4, 2019
Merged

DetailsList: selection column header in single selection mode #7842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
bf0ffef
render plain column header for selection column
natalieethell Jan 25, 2019
b388c44
remove unnecessary styles
natalieethell Jan 25, 2019
82feea6
change file
natalieethell Jan 25, 2019
c083aec
remove more unnecessary styling
natalieethell Jan 29, 2019
8658371
do not render select all label if in single selection mode
natalieethell Jan 29, 2019
080f7e5
Merge branch 'master' into detailsListSelectionColumnHeader
natalieethell Jan 29, 2019
7bf83a4
add vr tests
natalieethell Jan 29, 2019
beb9a3f
add aria-describedby
natalieethell Jan 30, 2019
179f525
render an empty check for single selection mode
natalieethell Jan 31, 2019
59087b4
cleanup old styling
natalieethell Jan 31, 2019
b123b33
keep is-disabled classname
natalieethell Jan 31, 2019
95808a2
Update packages/office-ui-fabric-react/src/components/DetailsList/Det…
KevinTCoughlin Feb 2, 2019
578bb0d
Update packages/office-ui-fabric-react/src/components/DetailsList/Det…
KevinTCoughlin Feb 2, 2019
da5946e
add snapshot test
natalieethell Feb 2, 2019
6d4c13c
Merge branch 'detailsListSelectionColumnHeader' of https://github.com…
natalieethell Feb 2, 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
13 changes: 12 additions & 1 deletion apps/vr-tests/src/stories/DetailsList.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import {
DetailsList,
DetailsListLayoutMode,
IColumn,
CheckboxVisibility
CheckboxVisibility,
SelectionMode
} from 'office-ui-fabric-react';

const items = [
Expand Down Expand Up @@ -150,6 +151,16 @@ storiesOf('DetailsList', module)
isHeaderVisible={true}
/>
))
.addStory('Single Selection Mode', () => (
<DetailsList
items={items}
compact={false}
columns={columns}
selectionMode={SelectionMode.single}
layoutMode={DetailsListLayoutMode.justified}
isHeaderVisible={true}
/>
))
.addStory('Grouped', () => (
<DetailsList
items={items}
Expand Down
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/detailsListSelectionColumnHeader_2019-01-25-06-58.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": "DetailsList: render a simple column header for checkboxes in single selection mode",
"type": "patch"
}
],
"packageName": "office-ui-fabric-react",
"email": "natalie.ethell@microsoft.com"
}
26 changes: 19 additions & 7 deletions packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,7 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
});

const classNames = this._classNames;

const isRTL = getRTL();
return (
<FocusZone
Expand All @@ -232,7 +233,6 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
onClick={!isCheckboxHidden ? this._onSelectAllClicked : undefined}
aria-colindex={1}
role={'columnheader'}
aria-hidden={isCheckboxHidden ? true : undefined}
>
{onRenderColumnHeaderTooltip(
{
Expand All @@ -245,9 +245,15 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
id={`${this._id}-check`}
aria-label={ariaLabelForSelectionColumn}
aria-describedby={
ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip ? `${this._id}-checkTooltip` : undefined
!isCheckboxHidden
? ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip
? `${this._id}-checkTooltip`
: undefined
: ariaLabelForSelectionColumn && !this.props.onRenderColumnHeaderTooltip
? `${this._id}-checkTooltip`
: undefined
}
data-is-focusable={!isCheckboxHidden}
data-is-focusable={!isCheckboxHidden || undefined}
isHeader={true}
selected={isAllSelected}
anySelected={false}
Expand All @@ -259,10 +265,16 @@ export class DetailsHeaderBase extends BaseComponent<IDetailsHeaderBaseProps, ID
this._onRenderColumnHeaderTooltip
)}
</div>,
ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip ? (

@natalieethell natalieethell Jan 30, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

All I did here was render ariaLabelForSelectionColumn in the label when isCheckboxHidden is true, since it becomes a header instead of a select all checkbox.

<label key="__checkboxLabel" id={`${this._id}-checkTooltip`} className={classNames.accessibleLabel}>
{ariaLabelForSelectAllCheckbox}
</label>
!this.props.onRenderColumnHeaderTooltip ? (
ariaLabelForSelectAllCheckbox && !isCheckboxHidden ? (
<label key="__checkboxLabel" id={`${this._id}-checkTooltip`} className={classNames.accessibleLabel}>
{ariaLabelForSelectAllCheckbox}
</label>
) : ariaLabelForSelectionColumn && isCheckboxHidden ? (
<label key="__checkboxLabel" id={`${this._id}-checkTooltip`} className={classNames.accessibleLabel}>
{ariaLabelForSelectionColumn}
</label>
) : null
) : null
]
: null}
Expand Down
15 changes: 14 additions & 1 deletion packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { DetailsHeader } from './DetailsHeader';
import { IDetailsHeader, IDropHintDetails } from './DetailsHeader.types';
import { IDetailsHeader, IDropHintDetails, SelectAllVisibility } from './DetailsHeader.types';
import { DetailsListLayoutMode, IColumn, ColumnActionsMode } from './DetailsList.types';
import { Selection, SelectionMode } from '../../utilities/selection/index';
import { EventGroup } from '../../Utilities';
Expand Down Expand Up @@ -247,6 +247,19 @@ describe('DetailsHeader', () => {
expect(component.toJSON()).toMatchSnapshot();
});

it('can render a hidden select all checkbox in single selection mode', () => {
const component = renderer.create(
<DetailsHeader
selection={_selection}
selectionMode={SelectionMode.single}
layoutMode={DetailsListLayoutMode.fixedColumns}
selectAllVisibility={SelectAllVisibility.hidden}
columns={_columns}
/>
);
expect(component.toJSON()).toMatchSnapshot();
});

it('can resize columns', () => {
let lastResize = { size: -1, index: -1 };

Expand Down
2 changes: 1 addition & 1 deletion packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const getStyles = (props: IDetailsRowCheckStyleProps): IDetailsRowCheckSt
root: [classNames.root, className],

check: [
!canSelect && [classNames.isDisabled, { visibility: 'hidden' }],
!canSelect && classNames.isDisabled,
isHeader && classNames.isHeader,
getFocusStyle(theme),
theme.fonts.small,
Expand Down
4 changes: 3 additions & 1 deletion packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const DetailsRowCheckBase = (props: IDetailsRowCheckProps) => {
compact
});

return (
return canSelect ? (
<div
{...buttonProps}
role="checkbox"
Expand All @@ -57,6 +57,8 @@ const DetailsRowCheckBase = (props: IDetailsRowCheckProps) => {
>
<Check checked={isPressed} />
</div>
) : (
<div {...buttonProps} className={css(classNames.root, classNames.check)} />
);
};

Expand Down
Loading