Skip to content

Commit

Permalink
docs(table): assorted additions (#2599)
Browse files Browse the repository at this point in the history 
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@aagonzales @kodiakhq
aagonzales and kodiakhq[bot] authored Oct 27, 2021
1 parent 6643e90 commit b712168
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 50 deletions.
Binary file added src/pages/components/data-table/images/datatable-style-10.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/pages/components/data-table/images/datatable-style-11.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/pages/components/data-table/images/datatable-style-12.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/pages/components/data-table/images/datatable-style-9.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
138 changes: 91 additions & 47 deletions src/pages/components/data-table/style.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,56 +8,98 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

## Color

| 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` |
### Table header

| Element | Property | Color token |
| ------------ | ---------------- | ----------------- |
| Table header | background-color | `$layer` |
| Title | text-color | `$text-primary` |
| Description | text-color | `$text-secondary` |

<Row>
<Column colLg={8}>

![Basic data table](images/datatable-style-3.png)
![Data table header](images/datatable-style-11.png)

</Column>
</Row>

### Enhancements
### Column header

| State | Property | Color token |
| ------- | ---------------- | ---------------------- |
| Enabled | background-color | `$layer-accent` |
| | text-color | `$text-primary` |
| | svg | `$icon-primary` |
| Hover | background-color | `$layer-accent-hover` |
| | text-color | `$text-primary` |
| Focus | border | `$focus` |
| Active | background-color | `$layer-accent-active` |

<Row>
<Column colLg={8}>

![Column headers](images/datatable-style-9.png)

</Column>
</Row>

### Row

| State | Property | Color token |
| ---------------- | ---------------- | ------------------------- |
| Enabled | background-color | `$layer` |
| | text-color | `$text-secondary` |
| | border-bottom | `$border-subtle` |
| | svg | `$icon-secondary` |
| Hover | background-color | `$layer-hover` |
| | text-color | `$text-primary` |
| Focus | border | `$focus` |
| Selected | background-color | `$layer-selected` |
| | text-color | `$text-primary` |
| | border-bottom | `$border-subtle-selected` |
| | svg | `$icon-primary` |
| Selected + hover | background-color | `$layer-selected-hover` |
| Expanded | background-color | `$layer` |
| | svg | `$icon-primary` |
| Zebra | background-color | `$layer-accent` |

<Row>
<Column colLg={8}>

![Data table rows](images/datatable-style-3.png)

</Column>
</Row>

### Toolbar

| Element | Property | Color token |
| ----------- | ------------------------------------------------------------------------------------------- | ----------- |
| Toolbar | background-color | `$layer` |
| Icon button | See [ghost button](https://carbondesignsystem.com/components/button/style#ghost-button) | |
| Button | See [primary button](https://carbondesignsystem.com/components/button/style#primary-button) | |

<Row>
<Column colLg={8}>

![Data table toolbar](images/datatable-style-10.png)

</Column>
</Row>

### Batch action bar

| 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

| 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) | |
| Element | Property | Color token |
| ------- | ------------------------------------------------------------------------------------------- | ------------------- |
| Bar | background-color | `$background-brand` |
| Summary | text-color | `$text-on-color` |
| Button | See [primary button](https://carbondesignsystem.com/components/button/style#primary-button) | |

<Row>
<Column colLg={8}>

![data table states](images/datatable-style-4.png)
![data table batch actions](images/datatable-style-12.png)

</Column>
</Row>
Expand Down Expand Up @@ -117,16 +159,18 @@ columns. Tables require three or more columns.
### Rows

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.

| Size | Height px / rem |
| ---------------- | --------------- |
| Extra small (xs) | 24 / 1.5 |
| Small (sm) | 32 / 2 |
| Medium (md) | 40 / 2.5 |
| Large (lg) | 48 / 3 |
| Extra large (xl) | 64 / 4 |
size of the table. Column header and row text is always centered in the row with
the expecption of the extra large which is offset by `padding-top: 16px`. Extra
large row heights are only recommended if your data is expected to have two
lines of content in a single row.

| Size | Height (px / rem) |
| ---------------- | ----------------- |
| Extra small (xs) | 24 / 1.5 |
| Small (sm) | 32 / 2 |
| Medium (md) | 40 / 2.5 |
| Large (lg) | 48 / 3 |
| Extra large (xl) | 64 / 4 |

<Row>
<Column colLg={8}>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/guidelines/color/implementation.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -495,7 +495,7 @@ color backgrounds with light color text.
</Column>
</Row>

### When to use inline theming
### When to use modes

Adding the ability to change between a light or dark mode in your product is not
required as an IBM product but is highly encouraged. Attention to detail,
Expand All @@ -518,7 +518,7 @@ dark mode is better for people with cataract and related disorders. Dark mode
emits less light and can therefor reduces eyes strain and help prevent headaches
and migraine.

### How inline theming works
### How modes works

The themes use color tokens to interpret which values are needed for each theme.
It is the color tokens that allows a UI to so easily switch from one mode to the
Expand Down Expand Up @@ -579,7 +579,7 @@ a mode control in IBM products may be offered in the future.
where the user can save their theme preference (right).
</Caption>

#### Inline themes
#### Inline themes with modes

Mixing themes inline is still allowed with light or dark mode. Mixing inline
theme contrast between elements in different modes is also allowed. It is very
Expand Down

0 comments on commit b712168

Please sign in to comment.