From 728560ad989d12a84e5d6eb36415362cf2890cd5 Mon Sep 17 00:00:00 2001 From: Craig Lordan Date: Fri, 9 Aug 2024 13:57:42 -0400 Subject: [PATCH 1/4] Fix broken link to gutter mode guidelines --- src/pages/components/data-table/usage.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/components/data-table/usage.mdx b/src/pages/components/data-table/usage.mdx index 969cd5b697c..3afeb61588f 100755 --- a/src/pages/components/data-table/usage.mdx +++ b/src/pages/components/data-table/usage.mdx @@ -232,7 +232,7 @@ tables or smaller containers where the information can feel cramped or needs truncation. The data table can be placed on the grid following the three different -[gutter modes](/guidelines/2x-grid/implementation#gutter-modes) outlined in the +[gutter modes](/elements/2x-grid/usage/#gutter-modes) outlined in the 2x grid guidelines. Although, the data table can share horizontal space with other components and content, consider giving your data table the most width on the page to help your user view dense data. From 41bb5848b957b2a328832fc4205a153f14893665 Mon Sep 17 00:00:00 2001 From: Craig Lordan Date: Fri, 4 Oct 2024 14:20:27 -0400 Subject: [PATCH 2/4] Update usage.mdx - Added subhead to the entry in the Modifiers section - Copy edit on all sections in Universal Behaviors --- src/pages/components/data-table/usage.mdx | 43 ++++++++++++----------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/src/pages/components/data-table/usage.mdx b/src/pages/components/data-table/usage.mdx index 3afeb61588f..e0d553687dd 100755 --- a/src/pages/components/data-table/usage.mdx +++ b/src/pages/components/data-table/usage.mdx @@ -409,16 +409,16 @@ The expandable icon always appears first and to the left of the selection icon. ### Interactions -The data table’s toolbar and rows follow interaction conventions found in other +The data table’s toolbar and rows follow interaction conventions that are found in other Carbon components. Buttons, checkboxes, radio buttons, overflow menus, search, -and expanding elements are used in the data table, and all behave accordingly to +and expanding elements are used in the data table, and all behave according to their guidelines. #### Mouse Users can trigger an action or function in the table by clicking the associated button or component. Each action or function has its own distinct click target. -See the accessibility tab for additional interactive guidance. +See the Accessibility tab for more information. @@ -446,13 +446,12 @@ interactive. ### Pagination -Pagination divides table data into separate pages. Simple pagination indicates -the current page in view and offers controls to incrementally navigate to the +Pagination divides a data table into separate pages. Simple pagination indicates +the current page in view and offers controls to go to the previous or next page. Advanced pagination is accompanied by an option that enables the user to change the number of items per page and to jump to a specific page number. The pagination component is always placed at the bottom of -the data table. See the [pagination](/components/pagination/usage) component for -further guidelines and configurations. +the data table. For more information, see the [pagination](/components/pagination/usage) component. @@ -467,9 +466,9 @@ further guidelines and configurations. ### Table toolbar The table toolbar is reserved for global table actions such as table settings, -complex filters, exporting or editing table data. Actions in the toolbar can use -primary, ghost, or icon-only buttons. We recommend showing at most five actions -within the table toolbar. Additional actions can be made available through an +complex filters, exporting, or editing table data. Actions in the toolbar can use +primary, ghost, or icon-only buttons. Include up to five actions +within the table toolbar. More actions can be made available through an overflow menu, combo button, or similar components. @@ -485,9 +484,9 @@ overflow menu, combo button, or similar components. #### Collapsed search A search field can be triggered through an icon button in the data table -toolbar. By default the search functionality follows the +toolbar. By default search follows the [active search](/patterns/search-pattern/#active-search) pattern. The search -should be closed by default, and placed below the table title. +is closed by default, and placed below the table title. @@ -520,13 +519,13 @@ the actions on the right. Columns can be sorted in ascending or descending order. Sorting controls are located in the column headers and indicated with an arrow icon on hover and when -a column has been sorted. +a column is sorted. A sorted data table has three states: unsorted (`arrows`), sorted-up (`arrow--up`) or sorted-down (`arrow--down`). The icon indicates the current -sorted state and is only shown if sorting is activated. Only the column being -sorted should display an icon, and unsorted icons are only visible on hover. You -can see a demo of table sorting in +sorted state and is shown only when the sorting is activated. Only the sorted column +displays an icon, and unsorted icons are only visible on hover. You +can see a demo of sorting in Carbon’s [React Storybook](https://react.carbondesignsystem.com/?path=/story/components-datatable-sorting--default). @@ -559,13 +558,13 @@ right of the bar or deselect all items. ### Inline actions -Inline actions are functions that may be performed on a specific table row. Each +Inline actions are functions that might be performed on a specific table row. Each row is accompanied by an [overflow menu](https://www.carbondesignsystem.com/components/overflow-menu/code) that -contains actions related specifically to that row. +contains actions that are related specifically to that row. When the overflow menu contains fewer than three options, keep the actions -inline as icon buttons instead. This reduces a click and makes available actions +inline as icon buttons instead. This approach reduces a click and makes available actions visible at a glance. @@ -600,7 +599,7 @@ supports hover-over and persist the overflow menus even if the ### Loading -If additional load time is expected to display information, use skeleton states +If extra load time is expected to display information, use skeleton states instead of spinners. @@ -615,7 +614,9 @@ instead of spinners. ## Modifiers -The data table features a zebra stripes modifier that styles the table rows with +### Alernating row color + +The data table can use a zebra stripes modifier to style the table rows with alternating colors to make scanning horizontal information easier for the user. From 46b683b9a86958aa5cba2145118aebaaff15bf2f Mon Sep 17 00:00:00 2001 From: Craig Lordan Date: Thu, 10 Oct 2024 10:19:51 -0400 Subject: [PATCH 3/4] Ran yard format --- src/pages/components/data-table/usage.mdx | 44 +++++++++++------------ 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/pages/components/data-table/usage.mdx b/src/pages/components/data-table/usage.mdx index 8462f20167d..7021455f2ed 100755 --- a/src/pages/components/data-table/usage.mdx +++ b/src/pages/components/data-table/usage.mdx @@ -429,10 +429,10 @@ The expandable icon always appears first and to the left of the selection icon. ### Interactions -The data table’s toolbar and rows follow interaction conventions that are found in other -Carbon components. Buttons, checkboxes, radio buttons, overflow menus, search, -and expanding elements are used in the data table, and all behave according to -their guidelines. +The data table’s toolbar and rows follow interaction conventions that are found +in other Carbon components. Buttons, checkboxes, radio buttons, overflow menus, +search, and expanding elements are used in the data table, and all behave +according to their guidelines. #### Mouse @@ -467,11 +467,11 @@ interactive. ### Pagination Pagination divides a data table into separate pages. Simple pagination indicates -the current page in view and offers controls to go to the -previous or next page. Advanced pagination is accompanied by an option that -enables the user to change the number of items per page and to jump to a -specific page number. The pagination component is always placed at the bottom of -the data table. For more information, see the [pagination](/components/pagination/usage) component. +the current page in view and offers controls to go to the previous or next page. +Advanced pagination is accompanied by an option that enables the user to change +the number of items per page and to jump to a specific page number. The +pagination component is always placed at the bottom of the data table. For more +information, see the [pagination](/components/pagination/usage) component. @@ -486,10 +486,10 @@ the data table. For more information, see the [pagination](/components/paginati ### Table toolbar The table toolbar is reserved for global table actions such as table settings, -complex filters, exporting, or editing table data. Actions in the toolbar can use -primary, ghost, or icon-only buttons. Include up to five actions -within the table toolbar. More actions can be made available through an -overflow menu, combo button, or similar components. +complex filters, exporting, or editing table data. Actions in the toolbar can +use primary, ghost, or icon-only buttons. Include up to five actions within the +table toolbar. More actions can be made available through an overflow menu, +combo button, or similar components. @@ -505,8 +505,8 @@ overflow menu, combo button, or similar components. A search field can be triggered through an icon button in the data table toolbar. By default search follows the -[active search](/patterns/search-pattern/#active-search) pattern. The search -is closed by default, and placed below the table title. +[active search](/patterns/search-pattern/#active-search) pattern. The search is +closed by default, and placed below the table title. @@ -543,9 +543,9 @@ a column is sorted. A sorted data table has three states: unsorted (`arrows`), sorted-up (`arrow--up`) or sorted-down (`arrow--down`). The icon indicates the current -sorted state and is shown only when the sorting is activated. Only the sorted column -displays an icon, and unsorted icons are only visible on hover. You -can see a demo of sorting in +sorted state and is shown only when the sorting is activated. Only the sorted +column displays an icon, and unsorted icons are only visible on hover. You can +see a demo of sorting in Carbon’s [React Storybook](https://react.carbondesignsystem.com/?path=/story/components-datatable-sorting--default). @@ -578,14 +578,14 @@ right of the bar or deselect all items. ### Inline actions -Inline actions are functions that might be performed on a specific table row. Each -row is accompanied by +Inline actions are functions that might be performed on a specific table row. +Each row is accompanied by an [overflow menu](https://www.carbondesignsystem.com/components/overflow-menu/code) that contains actions that are related specifically to that row. When the overflow menu contains fewer than three options, keep the actions -inline as icon buttons instead. This approach reduces a click and makes available actions -visible at a glance. +inline as icon buttons instead. This approach reduces a click and makes +available actions visible at a glance. From 75e368478e56477aa06e61cf142c05706afc9491 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Mon, 4 Nov 2024 08:03:25 -0600 Subject: [PATCH 4/4] Update src/pages/components/data-table/usage.mdx Co-authored-by: Anna Gonzales --- src/pages/components/data-table/usage.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/components/data-table/usage.mdx b/src/pages/components/data-table/usage.mdx index 7021455f2ed..34655b0c5fc 100755 --- a/src/pages/components/data-table/usage.mdx +++ b/src/pages/components/data-table/usage.mdx @@ -438,7 +438,7 @@ according to their guidelines. Users can trigger an action or function in the table by clicking the associated button or component. Each action or function has its own distinct click target. -See the Accessibility tab for more information. +See the [Accessibility](/components/data-table/accessibility/) tab for more information.