Skip to content

Commit 7b1312c

Browse files
authored
Edit pass complete
1 parent 4203c49 commit 7b1312c

File tree

1 file changed

+17
-13
lines changed

1 file changed

+17
-13
lines changed

docs/design/web-part-commanding.md

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,38 @@
11
---
2-
title: Commanding and See all
2+
title: Commanding within a web part
33
ms.date: 4/16/2018
44
---
55

66
# Commanding within a web part
77

8-
The commanding with in a web part consists of a single line of commands which sit below the web part title. These commands contain and icon and text, for example the <b>+ plus</b> icon and the text <b>Add</b>. The command bar can be extended to support multiple commands but be aware of overloading the web part with too many commands and how they reflow when the web part is placed in different columns or when the page reflows to smaller screen sizes.
8+
Commanding within a web part consists of a single line of commands that sits under the web part title. These commands contain an icon and text, for example the `+` (plus) icon and the text **Add**. The command bar can be extended to support multiple commands. However, be aware of overloading the web part with too many commands. Also, note how the commands reflow when the web part is placed in different columns, or when the page reflows to smaller screen sizes.
99

10-
![Single +Add command below the Title](../images/Commanding_Events_1column_01.png)
10+
![Single +Add command under the title](../images/Commanding_Events_1column_01.png)
1111

12-
![Mulitple commands on the left and secondary commands on the right](../images/Commanding_Doclib_multiplecommands_05.png)
12+
<br/>
1313

14-
# See all
14+
![Multiple commands on the left, and secondary commands on the right](../images/Commanding_Doclib_multiplecommands_05.png)
1515

16-
Many web part may need to support the overflow of content to a secondary page such as the case with News and Events. As well, only specific layouts within the web part may need to support the overflow. The recommended pattern is to place a See all command on the far right corner. This command should be last in the tab order of the web part to support keyboard navigation.
16+
## See all
17+
18+
Many web parts may need to support the overflow of content to a secondary page (for example, in News and Events web parts). In addition, only specific layouts within the web part may need to support the overflow. The recommended pattern is to place a **See all** command in the far-right corner. To support keyboard navigation, this command should be last in the tab order of the web part.
1719

1820
![Single +Add command with See All command](../images/Commanding_News_1column_02.png)
1921

20-
# Command bar states
22+
## Command bar states
23+
24+
A common command is **Add** for many web parts that require content to be created. In the case of News and Events, the **Add** command is only enabled in read mode because it takes the user to a new page or form to create content. The desired web part user experience should determine if commands are active in both read and edit modes, only edit, or only read. Most likely this is driven by whether the web part is designed to be configured by the author of the page and static to the viewer, or if the viewer/reader can interact with the web part.
2125

22-
A common command is Add for many web part that require content to be created. In the case of News and Event the Add command is only enabled in read mode as it takes user to a new page or form to create content. The desired web part user experience should determine if commands are active in both read and edit modes, only edit, or only read. Most likely this will be driven by whether or not the web part is designed to be configured by the author of the page and static to the viewer or if the viewer/reader can interact with the web part.
26+
## Placement and accessibility of commands
2327

24-
# Placement and accessibility of commands
28+
Core commands, even when the web part has only one command such as **Add**, should sit under the title to create consistency and discoverability, and to support easy reflow across all column sizes. Long web part titles should wrap to two lines, but not interfere with the placement of the commands.
2529

26-
Core commands, even when the webpart has only 1 command such as Add, should sit below the Title to create consistancy, discoverability and support easy reflow across all column sizes. Long web part Titles should wrap to two lines but not interfere with the placement of the commands.
30+
![Two-column reflow and title wrap](../images/Commanding_Events_2column_03.png)
2731

28-
![Two column reflow and title wrap](../images/Commanding_Events_2column_03.png)
32+
<br/>
2933

30-
![Three column reflow and title wrap](../images/Commanding_Events_3column_04.png)
34+
![Three-column reflow and title wrap](../images/Commanding_Events_3column_04.png)
3135

32-
Here is an example of a web part with a simple set of commands that follow the placement guidance. Follow the guide below when deciding how to make your web part accessible to suppot keyboard navigation and screen reader lables. [To learn more about accessibility!](https://docs.microsoft.com/en-us/sharepoint/dev/design/accessibility)
36+
Following is an example of a web part with a simple set of commands that follow the placement guidance. Follow this guide when deciding how to make your web part accessible to support keyboard navigation and screen reader labels. To learn more about accessibility, see [Accessibility in SharePoint web part design](accessibility.md).
3337

3438
![Commmand keyboarding example](../images/Commanding_News_tab_order_06.png)

0 commit comments

Comments
 (0)