Canvas UI Component Update - Tables
Fixes: CNVS-15536 This change removes the existing table examples from the styleguide, but keeps the styles so as not to break anything. New table styles and examples have been added to the styleguide, per mockups from the UI team. Test plan: - Open the /styleguide page from the main Canvas url - Click on Tables on the left-side nav - Go through each table example and make sure it's working as the text says it should be (i.e., is the row-hover table actually showing a hover effect, etc.) - Check the colors against color contrast requirements for both regular and high-contrast UIs - NOTE: the new table styles are only being used in the styleguide right now, so no testing of any app areas is needed. Change-Id: Iaf04703dc1e2d6a6815070fe1a4c299ab152378f Reviewed-on: https://gerrit.instructure.com/43515 Reviewed-by: Colleen Palmer <colleen@instructure.com> Tested-by: Jenkins <jenkins@instructure.com> Reviewed-by: Anna Koalenz <akoalenz@instructure.com> QA-Review: Matt Fairbourn <mfairbourn@instructure.com> Product-Review: Chris Hart <chart@instructure.com>
This commit is contained in:
Chris Hart
parent
524b9dab17
commit
1b942eb942
|
|
@ -219,3 +219,65 @@ $wellBackground: #e8ecef;
|
|||
// override bootstrap orange color for k-12
|
||||
@if $is-k12 { $orange: #f55e22; }
|
||||
|
||||
|
||||
//
|
||||
// New-component variables that will eventually phase out the legacy stuff above
|
||||
//==================================================================================
|
||||
//
|
||||
|
||||
/// Global light background colors
|
||||
//================================
|
||||
|
||||
// $can-bg-light-neutral
|
||||
@if $use_new_styles { $can-bg-light-neutral: $canvas-neutral; }
|
||||
@else { $can-bg-light-neutral: lighten($canvas-neutral, 6%); }
|
||||
|
||||
// $can-bg-light-primary
|
||||
@if $use_new_styles {
|
||||
$can-bg-light-primary: lighten($canvas-primary, 53%);
|
||||
@if $use_high_contrast { $can-bg-light-primary: lighten($canvas-primary, 58%); }
|
||||
}
|
||||
@else {
|
||||
$can-bg-light-primary: lighten($canvas-primary, 56%);
|
||||
@if $use_high_contrast { $can-bg-light-primary: lighten($canvas-primary, 64%); }
|
||||
}
|
||||
|
||||
// $can-bg-light-success
|
||||
@if $use_new_styles {
|
||||
$can-bg-light-success: lighten($canvas-success, 62%);
|
||||
@if $use_high_contrast { $can-bg-light-success: lighten($canvas-success, 69%) }
|
||||
}
|
||||
@else {
|
||||
$can-bg-light-success: lighten($canvas-success, 60%); // No high contrast color exists for legacy $canvas-success
|
||||
}
|
||||
|
||||
// $can-bg-light-alert
|
||||
@if $use_new_styles {
|
||||
$can-bg-light-alert: lighten($canvas-alert, 54%);
|
||||
@if $use_high_contrast { $can-bg-light-alert: lighten($canvas-alert, 58%); }
|
||||
}
|
||||
@else {
|
||||
$can-bg-light-alert: lighten($canvas-alert, 50%);
|
||||
@if $use_high_contrast { $can-bg-light-alert: lighten($canvas-alert, 66%); }
|
||||
}
|
||||
|
||||
// $can-bg-light-danger
|
||||
@if $use_new_styles {
|
||||
$can-bg-light-danger: lighten($canvas-danger, 48%);
|
||||
@if $use_high_contrast { $can-bg-light-danger: lighten($canvas-danger, 50%); }
|
||||
}
|
||||
@else {
|
||||
$can-bg-light-danger: lighten($canvas-danger, 48%); // No high contrast color exists for legacy $canvas-danger
|
||||
}
|
||||
|
||||
|
||||
/// Global border colors
|
||||
//======================
|
||||
|
||||
// If it's a light border, it should be this color.
|
||||
@if $use_new_styles { $can-border-light: lighten($canvas-secondary, 42%); }
|
||||
@else { $can-border-light: $menu-border-color; }
|
||||
|
||||
// If it's a dark border, it should be this color.
|
||||
@if $use_new_styles { $can-border-dark: lighten($canvas-secondary, 25%); }
|
||||
@else { $can-border-dark: lighten(#4b5662, 20%); }
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
// Canvas components and area-specific styles
|
||||
@import "components/g_base";
|
||||
@import "components/g_instructure";
|
||||
@import "components/tables";
|
||||
@import "components/g_assignments";
|
||||
@import "components/g_groups";
|
||||
@import "components/g_media_comments";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,303 @@
|
|||
/*
|
||||
@styleguide Tables
|
||||
|
||||
### Default table
|
||||
|
||||
```html
|
||||
<table class="ic-Table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email address</th>
|
||||
<th>Section</th>
|
||||
<th>Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
### Row-hover table
|
||||
|
||||
Adding **.ic-Table--hover-row** to the table element will produce a background color when the user hovers over each table row in the table body.
|
||||
|
||||
```html
|
||||
<table class="ic-Table ic-Table--hover-row">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email address</th>
|
||||
<th>Section</th>
|
||||
<th>Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
### Striped table
|
||||
|
||||
Add **.ic-Table--striped** to the table element to produce a striped table among rows in the table body.
|
||||
|
||||
```html
|
||||
<table class="ic-Table ic-Table--hover-row ic-Table--striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email address</th>
|
||||
<th>Section</th>
|
||||
<th>Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
### Row background color options
|
||||
|
||||
We will reserve $canvas-primary (traditionally blue) for the hover state background color.
|
||||
|
||||
```html
|
||||
<table class="ic-Table ic-Table--hover-row">
|
||||
<thead>
|
||||
<tr class="ic-Table__row--bg-neutral">
|
||||
<th>Name</th>
|
||||
<th>Email address</th>
|
||||
<th>Section</th>
|
||||
<th>Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="ic-Table__row--bg-success">
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
</tr>
|
||||
<tr class="ic-Table__row--bg-alert">
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
</tr>
|
||||
<tr class="ic-Table__row--bg-danger">
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
### Condensed table
|
||||
|
||||
Add **.ic-Table--condensed** to the table element to reduce the default cell padding.
|
||||
|
||||
```html
|
||||
<table class="ic-Table ic-Table--condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email address</th>
|
||||
<th>Section</th>
|
||||
<th>Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
### Table with cog (admin link dropdown)
|
||||
|
||||
Enclose our standard Cog Dropdown within a **div class="ic-Table--actions** to right-align the button and make sure the cog dropdown appears in the right place.
|
||||
|
||||
```html
|
||||
<table class="ic-Table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email address</th>
|
||||
<th>Section</th>
|
||||
<th>Role</th>
|
||||
<th><span class="screenreader-only">Actions</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#">Paul Howard</a></td>
|
||||
<td>paulhowardemail@gmail.com</td>
|
||||
<td>Advanced students</td>
|
||||
<td>Student</td>
|
||||
<td>
|
||||
<div class="ic-Table__actions">
|
||||
<a class="al-trigger btn btn-small" role="button" href="#">
|
||||
<i class="icon-settings"></i>
|
||||
<i class="icon-mini-arrow-down"></i>
|
||||
<span class="screenreader-only">Actions</span>
|
||||
</a>
|
||||
<ul id="toolbar-1" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="toolbar-2">
|
||||
<li role="presentation">
|
||||
<a href="#" class="icon-edit" id="toolbar-2" tabindex="-1" role="menuitem">Edit student</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a href="#" class="icon-trash" id="toolbar-3" tabindex="-1" role="menuitem">Delete student</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
*/
|
||||
|
||||
$sp-table: 14px; // Will replace this with global spacing variable, when it hits master
|
||||
|
||||
//ic-Tab__Panel--is-open
|
||||
|
||||
.ic-Table {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
|
||||
th, td {
|
||||
padding: $sp-table $sp-table/2;
|
||||
line-height: 1.3;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
tr {
|
||||
&.ic-Table__row--bg-neutral { background-color: $can-bg-light-neutral; }
|
||||
&.ic-Table__row--bg-success { background-color: $can-bg-light-success; }
|
||||
&.ic-Table__row--bg-alert { background-color: $can-bg-light-alert; }
|
||||
&.ic-Table__row--bg-danger { background-color: $can-bg-light-danger; }
|
||||
}
|
||||
|
||||
th {
|
||||
border-bottom-color: $can-border-dark;
|
||||
padding-bottom: $sp-table/2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom-color: $can-border-light;
|
||||
// If you need to add admin links to the far-right cell, enclose them in .ic-Table--actions
|
||||
.ic-Table__actions {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&.ic-Table--condensed {
|
||||
th, td { padding: $sp-table/2; }
|
||||
th { padding-bottom: $sp-table/4; }
|
||||
}
|
||||
|
||||
&.ic-Table--striped {
|
||||
tbody {
|
||||
tr:nth-child(odd) { background-color: $can-bg-light-neutral; }
|
||||
}
|
||||
}
|
||||
|
||||
&.ic-Table--hover-row {
|
||||
tbody {
|
||||
// High contrast UI uses left and right borders to show row hover state
|
||||
@if $use_high_contrast {
|
||||
tr {
|
||||
transition: border-color 0.3s;
|
||||
border: 4px solid transparent;
|
||||
border-top: none; border-bottom: none;
|
||||
&:hover { border-color: $canvas-primary; }
|
||||
}
|
||||
}
|
||||
|
||||
// Regular UI uses zebra stripes
|
||||
@else {
|
||||
tr { transition: background-color 0.3s; }
|
||||
tr,
|
||||
tr.ic-Table__row--bg-neutral,
|
||||
tr.ic-Table__row--bg-success,
|
||||
tr.ic-Table__row--bg-alert,
|
||||
tr.ic-Table__row--bg-danger {
|
||||
&:hover { background-color: $can-bg-light-primary; }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
// Look in app/stylesheets/vendor/bootstrap/_tables.scss for the source.
|
||||
// This file is for DOCUMENTATION ONLY!
|
||||
|
||||
/*
|
||||
@styleguide Tables
|
||||
|
||||
```html
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Column Heading 1</td>
|
||||
<td>Column Heading 2</td>
|
||||
<td>Column Heading 3</td>
|
||||
<td>Column Heading 4</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
*/
|
||||
|
||||
/*
|
||||
@styleguide Tables: Condensed/Half-Padding
|
||||
|
||||
```html
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Column Heading 1</td>
|
||||
<td>Column Heading 2</td>
|
||||
<td>Column Heading 3</td>
|
||||
<td>Column Heading 4</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
*/
|
||||
|
||||
/*
|
||||
@styleguide Tables: Bordered
|
||||
|
||||
```html
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Column Heading 1</td>
|
||||
<td>Column Heading 2</td>
|
||||
<td>Column Heading 3</td>
|
||||
<td>Column Heading 4</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
*/
|
||||
|
||||
/*
|
||||
@styleguide Tables: Zebra-Striping
|
||||
|
||||
```html
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Column Heading 1</td>
|
||||
<td>Column Heading 2</td>
|
||||
<td>Column Heading 3</td>
|
||||
<td>Column Heading 4</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 1</td>
|
||||
<td>Cell 2</td>
|
||||
<td>Cell 3</td>
|
||||
<td>Cell 4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
*/
|
||||
|
||||
/*
|
||||
@styleguide Tables: Backgrounds
|
||||
|
||||
```html
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Column Heading 1</td>
|
||||
<td>Column Heading 2</td>
|
||||
<td>Column Heading 3</td>
|
||||
<td>Column Heading 4</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="success">
|
||||
<td>Success</td>
|
||||
<td>Success</td>
|
||||
<td>Success</td>
|
||||
<td>Success</td>
|
||||
</tr>
|
||||
<tr class="error">
|
||||
<td>Error</td>
|
||||
<td>Error</td>
|
||||
<td>Error</td>
|
||||
<td>Error</td>
|
||||
</tr>
|
||||
<tr class="warning">
|
||||
<td>Warning</td>
|
||||
<td>Warning</td>
|
||||
<td>Warning</td>
|
||||
<td>Warning</td>
|
||||
</tr>
|
||||
<tr class="info">
|
||||
<td>Info</td>
|
||||
<td>Info</td>
|
||||
<td>Info</td>
|
||||
<td>Info</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
*/
|
||||
|
||||
Loading…
Reference in New Issue