diff --git a/change/office-ui-fabric-react-2019-12-18-15-14-21-detailsListSelectedCount.json b/change/office-ui-fabric-react-2019-12-18-15-14-21-detailsListSelectedCount.json new file mode 100644 index 00000000000000..62891b6a6296cd --- /dev/null +++ b/change/office-ui-fabric-react-2019-12-18-15-14-21-detailsListSelectedCount.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "DetailsList: Adding Announced section for examples that have '# of items selected' message in display.", + "packageName": "office-ui-fabric-react", + "email": "Humberto.Morimoto@microsoft.com", + "commit": "3843534144011bbca749b526c94964d409adee88", + "date": "2019-12-18T23:14:21.839Z" +} diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx index f50b8683e5ef9a..f658b9c9a5586a 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx @@ -160,6 +160,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList )} farItems={[{ key: 'count', text: `${this.state.selectionCount} selected` }]} /> + {isGrouped ? : null} diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx index 0c1928800ef05e..db64bb2eaef380 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { Announced } from 'office-ui-fabric-react/lib/Announced'; import { TextField } from 'office-ui-fabric-react/lib/TextField'; import { DetailsList, DetailsListLayoutMode, Selection, IColumn } from 'office-ui-fabric-react/lib/DetailsList'; import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection'; @@ -18,7 +19,7 @@ export interface IDetailsListBasicExampleItem { export interface IDetailsListBasicExampleState { items: IDetailsListBasicExampleItem[]; - selectionDetails: {}; + selectionDetails: string; } export class DetailsListBasicExample extends React.Component<{}, IDetailsListBasicExampleState> { @@ -60,6 +61,7 @@ export class DetailsListBasicExample extends React.Component<{}, IDetailsListBas return (
{selectionDetails}
+
{selectionDetails}
+
{selectionDetails}
+ {announcedMessage ? : undefined} {isModalSelection ? ( diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Advanced.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Advanced.Example.tsx.shot index a9d44491b2e760..b0e49784a7a46b 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Advanced.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/DetailsList.Advanced.Example.tsx.shot @@ -799,6 +799,13 @@ exports[`Component Examples renders DetailsList.Advanced.Example.tsx correctly 1 +
No items selected
+
No items selected
+
No items selected
+