Skip to content

Commit

Permalink
docs: v11 color token updates for data table component (#2313)
Browse files Browse the repository at this point in the history 
* docs: v11 color token updates for data table component

This PR updates the color tokens on the Style tab for the accordion component.

* fix: adjust spacing

* update: enhancment icons

* update: layer token changes

* update: description for ghost button

* update: placement of description

* update: consistent use of dashes

* chore: format

* Update style.mdx

* Update style.mdx

* update: button guidance link

* Update style.mdx

* Update style.mdx

Co-authored-by: emyarod <afw5059@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@laurenmrice @emyarod @kodiakhq
3 people authored May 21, 2021
1 parent 3467f05 commit 2145c09
Showing 1 changed file with 73 additions and 71 deletions.
144 changes: 73 additions & 71 deletions src/pages/components/data-table/style.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

## Color

| Class | Property | Color token |
| ------------------------- | ---------------- | ----------- |
| `.bx--data-table-header` | background-color | `$ui-01` |
| `.bx--data-table-header` | text color | `$text-01` |
| `.bx--data-table thead` | background-color | `$ui-03` |
| `.bx--table-header-label` | text color | `$text-01` |
| `.bx--data-table tbody` | background-color | `$ui-01` |
| `.bx--data-table td` | text color | `$text-02` |
| Element | Property | Color token |
| ------------- | ---------------- | ----------------- |
| Table header | background-color | `$layer` |
| Title | text-color | `$text-primary` |
| Description | text-color | `$text-secondary` |
| Column header | background-color | `$layer-accent` |
| | text-color | `$text-primary` |
| Row | background-color | `$layer` |
| | text-color | `$text-secondary` |
| | border-bottom | `$border-subtle` |

<Row>
<Column colLg={8}>
Expand All @@ -27,28 +29,30 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

### Enhancements

| Class | Property | Color token |
| --------------------------------------------------------------------------------------------- | ---------------- | ----------------- |
| `.bx--data-table--zebra` | background-color | – |
| `.bx--expandable-row-v2` | background-color | `$ui-01` |
| `.bx--table-sort-v2__icon` <br/> `.bx--table-expand-v2__svg` <br/> `.bx--overflow-menu__icon` | fill | `$icon-01` |
| `.bx--batch-actions--active` | background-color | `$interactive-01` |
| `.bx--batch-summary__para` | background-color | `$text-04` |
| `.bx--batch-actions .bx--btn` | text-color | `$text-04` |
| `.bx--overflow-menu-options` | text-color | `$text-02` |
| `.bx--overflow-menu-options` | background color | `$ui-02` |
| Element | Property | Color token |
| ---------------- | ---------------- | ------------------------------- |
| Zebra row | background-color | `$layer-accent` |
| Expanded row | background-color | `$layer` |
| Sort icon | svg | `$icon-primary` |
| Chevron icon | svg | `$icon-primary` |
| Overflow icon | svg | `$icon-primary` |
| Batch action bar | background-color | `$background-brand` |
| | text-color | `$text-on-color` |
| | svg | `icon-on-color` |
| Overflow menu | background-color | `$layer: inline theme` |
| | text-color | `$text-secondary: inline theme` |

### Interactive states

| Class | Property | Color token |
| ----------------------------------- | ---------------- | -------------------- |
| `.bx--data-table tr:hover td` | background-color | `$hover-ui` |
| `.bx--data-table td:hover` | text color | `$text-01` |
| `.bx--data-table td:focus` | border | `$focus` |
| `.bx--data-table--selected` | background-color | `$selected-ui` |
| `.bx--data-table--selected td` | text color | `$text-01` |
| `.bx--data-table--selected:hover` | background-color | `$hover-selected-ui` |
| `.bx--batch-actions .bx--btn:hover` | background color | `$hover-primary` |
| Element | Property | Color token |
| ------------------------ | --------------------------------------------------------------------------------------- | ----------------------- |
| Row: hover | background-color | `$layer-hover` |
| | text-color | `$text-primary` |
| Row: focus | border | `$focus` |
| Row: selected | background-color | `$layer-selected` |
| | text-color | `$text-primary` |
| Row: selected + hover | background-color | `$layer-selected-hover` |
| Batch action bar: button | See [ghost button](https://carbondesignsystem.com/components/button/style#ghost-button) | |

<Row>
<Column colLg={8}>
Expand All @@ -60,11 +64,11 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

## Typography

| Class | Font-size (px/rem) | Font-weight | Type token |
| ------------------------- | ------------------ | -------------- | ------------------------ |
| `.bx--data-table-header` | 20 / 1.25 | Regular / 400 | `$productive-heading-03` |
| `.bx--table-header-label` | 14 / 0.875 | SemiBold / 600 | `$productive-heading-01` |
| `.bx--data-table td` | 14 / 0.875 | Regular / 400 | `$body-short-01` |
| Element | Font-size (px / rem) | Font-weight | Type token |
| ------------- | -------------------- | -------------- | ------------------------ |
| Table header | 20 / 1.25 | Regular / 400 | `$productive-heading-03` |
| Column header | 14 / 0.875 | SemiBold / 600 | `$productive-heading-01` |
| Row text | 14 / 0.875 | Regular / 400 | `$body-short-01` |

## Structure

Expand All @@ -73,13 +77,13 @@ choose certain elements and interactions. The basic table style is the required
base from which tables can be developed. Basic tables are composed of a header
row followed by rows of data below.

| Class | Property | px / rem | Spacing token |
| -------------------------------------------------------------------------- | --------------------------- | -------- | ------------- |
| `.bx--data-table-header` | margin-top | 16 / 1 | `$spacing-05` |
| `.bx--data-table-header` | margin-bottom | 24 / 1.5 | `$spacing-06` |
| `.bx--data-table-header` | padding left, padding right | 16 / 1 | `$spacing-05` |
| `.bx--table-sort-v2__icon` | padding | 8 / 0.5 | `$spacing-03` |
| `.bx--data-table td:first-of-type` <br/> `.bx--data-table td:last-of-type` | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| Element | Property | px / rem | Spacing token |
| --------------------- | --------------------------- | -------- | ------------- |
| Table header | margin-top | 16 / 1 | `$spacing-05` |
| | margin-bottom | 24 / 1.5 | `$spacing-06` |
| | padding left, padding right | 16 / 1 | `$spacing-05` |
| Sort icon | padding | 8 / 0.5 | `$spacing-03` |
| Before and after text | padding-left, padding-right | 16 / 1 | `$spacing-05` |

<div className="image--fixed">

Expand Down Expand Up @@ -112,16 +116,14 @@ columns. Tables require three or more columns.

### Rows

Row sizes are customizable. The column header row `.bx--data-table thead` should
always match the row size of the table. Tall row heights are only recommended if
your data is expected to have 2 lines of content in a single row.
Row sizes are customizable. The column header row should always match the row size of the table. Tall row heights are only recommended if your data is expected to have 2 lines of content in a single row.

| Class | Size | Row Height (px/rem) |
| -------------------------- | ------- | ------------------- |
| `.bx--data-table--compact` | Compact | 24 / 1.5 |
| `.bx--data-table--short` | Short | 32 / 2 |
| `.bx--data-table tr` | Default | 48 / 3 |
| `.bx--data-table--tall` | Tall | 64 / 4 |
| Element | Property | Size | px / rem |
| ------- | -------- | ------- | -------- |
| Row | height | Compact | 24 / 1.5 |
| | height | Short | 32 / 2 |
| | height | Default | 48 / 3 |
| | height | Tall | 64 / 4 |

<Row>
<Column colLg={8}>
Expand All @@ -137,15 +139,15 @@ After the simple table structure, tables can be enhanced by adding any of the
following: selectable rows, expanding rows, nested tables, row menus, table
batch actions, overall table menu, and/or table filter.

| Class | Property | px / rem | Spacing token |
| ------------------------------- | -------------------------- | --------- | ------------- |
| `.bx--checkbox-appearance` | height, width | 20 / 1.25 | – |
| `.bx--radio-button__appearance` | height, width | 20 / 1.25 | – |
| `.bx--overflow-menu-options` | height | 40 / 2.5 | – |
| `.bx--table-expand__svg` | icon | 16 / 1 | – |
| `.bx--expandable-row` | padding-top, padding-right | 16 / 1 | `$spacing-05` |
| `.bx--expandable-row` | padding-left | 48 / 3 | `$spacing-09` |
| `.bx--expandable-row` | padding-bottom | 24 / 1.5 | `$spacing-06` |
| Element | Property | px / rem | Spacing token |
| --------------- | -------------------------- | --------- | ------------- |
| Checkbox | height, width | 20 / 1.25 | – |
| Radio button | height, width | 20 / 1.25 | – |
| Overflow menu | height | 40 / 2.5 | – |
| Chevron icon | svg | 16 / 1 | – |
| Row: expandable | padding-top, padding-right | 16 / 1 | `$spacing-05` |
| | padding-left | 48 / 3 | `$spacing-09` |
| | padding-bottom | 24 / 1.5 | `$spacing-06` |

<div className="image--fixed">

Expand All @@ -160,12 +162,12 @@ batch actions, overall table menu, and/or table filter.
The default 48px toolbar is paired with the tall and default row sizes. The
small toolbar is paired with the short and compact row sizes.

| Class | Property | px/rem | Spacing token |
| ---------------------------- | ------------------------- | ------- | ------------- |
| `.bx--toolbar-action` | height, width | 48 / 3 | – |
| `.bx--toolbar-action--small` | height, width | 32 / 2 | – |
| `.bx--toolbar` | margin-top, margin-bottom | 16 / 1 | `$spacing-05` |
| `.bx--toolbar--small` | margin-top, margin-bottom | 8 / 0.5 | `$spacing-03` |
| Element | Property | px / rem | Spacing token |
| ---------------------------- | ------------------------- | -------- | ------------- |
| Toolbar: large | height, width | 48 / 3 | – |
| | margin-top, margin-bottom | 16 / 1 | `$spacing-05` |
| Toolbar: small | height, width | 32 / 2 | – |
| | margin-top, margin-bottom | 8 / 0.5 | `$spacing-03` |

<div className="image--fixed">

Expand All @@ -180,14 +182,14 @@ small toolbar is paired with the short and compact row sizes.
The default 48px batch action bar is paired with the tall and default row sizes.
The small batch action bar is paired with the short and compact row sizes.

| Class | Property | px/rem | Spacing token |
| --------------------------- | --------------------------- | ------ | ------------- |
| `.bx--batch-actions` | height | 48 / 3 | – |
| `.bx--batch-actions--small` | height | 32 / 2 | – |
| `.bx--batch-actions` | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| `.bx--btn` | default size | 48px | – |
| `.bx--btn` | small size | 32px | – |
| `.bx--btn__icon` | padding-right | 16/1 | `$spacing-05` |
| Element | Property | px / rem | Spacing token |
| ----------------------- | --------------------------- | -------- | ------------- |
| Batch action bar: large | height | 48 / 3 | – |
| Button | size | 48px | – |
| Batch action bar: small | height | 32 / 2 | – |
| Button | size | 32px | – |
| Before and after text | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| Button: icon | padding-right | 16 / 1 | `$spacing-05` |

<div className="image--fixed">

Expand Down

0 comments on commit 2145c09

Please sign in to comment.