Skip to content

Commit 83c5d6d

Browse files
lyzadangerlyzadanger
committed
Add table pattern
1 parent 582a0fa commit 83c5d6d

File tree

6 files changed

+214
-0
lines changed

6 files changed

+214
-0
lines changed

‎src/pattern-library/components/patterns/TablePatterns.js

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import Library from '../Library';
2+
3+
// "Fixture" for example table contents
4+
function ExampleTBody() {
5+
return (
6+
<tbody>
7+
<tr>
8+
<td>Alphanumeric Balloons</td>
9+
<td>Champagne Delusions</td>
10+
</tr>
11+
<tr>
12+
<td>Elephantine Fry-ups</td>
13+
<td>Gargantuan Hiccups</td>
14+
</tr>
15+
<tr className="is-selected">
16+
<td>Illicit Jugglers</td>
17+
<td>Katydid Lozenges Meringue</td>
18+
</tr>
19+
<tr>
20+
<td>Alphanumeric Balloons</td>
21+
<td>Champagne Delusions</td>
22+
</tr>
23+
<tr>
24+
<td>Elephantine Fry-ups</td>
25+
<td>Gargantuan Hiccups</td>
26+
</tr>
27+
<tr>
28+
<td>Illicit Jugglers</td>
29+
<td>Katydid Lozenges Moebius</td>
30+
</tr>
31+
<tr>
32+
<td>Elephantine Fry-ups</td>
33+
<td>Gargantuan Hiccups</td>
34+
</tr>
35+
<tr>
36+
<td>Illicit Jugglers</td>
37+
<td>Katydid Lozenges Meringue</td>
38+
</tr>
39+
<tr>
40+
<td>Alphanumeric Balloons</td>
41+
<td>Champagne Delusions</td>
42+
</tr>
43+
</tbody>
44+
);
45+
}
46+
47+
export default function TablePatterns() {
48+
return (
49+
<Library.Page title="Tables">
50+
<p>
51+
These <code>table</code> patterns support a basic table layout that
52+
adapts to available space. They are intended for simpler tabular
53+
display: maximum 2 or possibly 3 columns. Remember that{' '}
54+
<code>table</code> content needs to be usable in tight and narrow
55+
spaces.
56+
</p>
57+
<Library.Pattern title="Table">
58+
<Library.Example title="Basic table" variant="wide">
59+
<p>
60+
By default, a <code>table</code> will fill available horizontal
61+
space, and will use whatever height is needed to render its rows.{' '}
62+
<code>tr.is-selected</code> styles a row as selected.
63+
</p>
64+
65+
<Library.Demo withSource>
66+
<table className="hyp-table">
67+
<thead>
68+
<tr>
69+
<th scope="col">Column A</th>
70+
<th scope="col">Column B</th>
71+
</tr>
72+
</thead>
73+
<ExampleTBody />
74+
</table>
75+
</Library.Demo>
76+
</Library.Example>
77+
78+
<Library.Example title="Adjusting column widths">
79+
<p>
80+
Table column widths may be adjusted by styling <code>thead th</code>{' '}
81+
elements. In this example, the column widths are set to 30% and 70%.
82+
</p>
83+
<Library.Demo withSource>
84+
<table className="hyp-table">
85+
<thead>
86+
<tr>
87+
<th scope="col" style="width:30%">
88+
Column A
89+
</th>
90+
<th scope="col" style="width:70%">
91+
Column B
92+
</th>
93+
</tr>
94+
</thead>
95+
<ExampleTBody />
96+
</table>
97+
</Library.Demo>
98+
</Library.Example>
99+
100+
<Library.Example title="Constraining with a scrollbox">
101+
<p>
102+
In this example, the <code>table</code> is constrained within a{' '}
103+
<code>scrollbox</code> with a <code>max-height</code>.
104+
</p>
105+
<Library.Demo withSource>
106+
<div
107+
style="max-height:250px"
108+
className="hyp-scrollbox--with-header"
109+
>
110+
<table className="hyp-table">
111+
<thead>
112+
<tr>
113+
<th scope="col">Column A</th>
114+
<th scope="col">Column B</th>
115+
</tr>
116+
</thead>
117+
<ExampleTBody />
118+
</table>
119+
</div>
120+
</Library.Demo>
121+
</Library.Example>
122+
</Library.Pattern>
123+
</Library.Page>
124+
);
125+
}

‎src/pattern-library/routes.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import FormPatterns from './components/patterns/FormPatterns';
77
import ContainerPatterns from './components/patterns/ContainerPatterns';
88
import PanelPatterns from './components/patterns/PanelPatterns';
99
import SpinnerPatterns from './components/patterns/SpinnerPatterns';
10+
import TablePatterns from './components/patterns/TablePatterns';
1011
import ThumbnailPatterns from './components/patterns/ThumbnailPatterns';
1112

1213
import ButtonComponents from './components/patterns/ButtonComponents';
@@ -73,6 +74,12 @@ const routes = [
7374
component: SpinnerPatterns,
7475
group: 'patterns',
7576
},
77+
{
78+
route: '/patterns-tables',
79+
title: 'Tables',
80+
component: TablePatterns,
81+
group: 'patterns',
82+
},
7683
{
7784
route: '/patterns-thumbnails',
7885
title: 'Thumbnails',

‎styles/mixins/patterns/_tables.scss

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
@use '../../variables' as var;
2+
3+
@use '../atoms';
4+
@use '../focus';
5+
@use '../layout';
6+
7+
$-color-background--light: var.$color-white;
8+
$-color-background--dark: var.$color-grey-7;
9+
$-color-header-background: var.$color-grey-1;
10+
$-min-row-height: var.$touch-target-size;
11+
12+
@mixin table {
13+
@include focus.outline-on-keyboard-focus;
14+
15+
// Keep separate borders (this is browser default) to allow control over
16+
// the borders of the sticky-positioned top header row: this is needed to
17+
// prevent gaps at the top of the <thead> row that scrolling content could peek
18+
// through, and to assert control over the sticky-<th> borders as positioning
19+
// changes.
20+
border-collapse: separate;
21+
border-spacing: 0;
22+
// Allow th styles to define overall column widths for table
23+
table-layout: fixed;
24+
width: 100%;
25+
color: var.$color-text;
26+
27+
th,
28+
td {
29+
@include layout.padding;
30+
}
31+
32+
td {
33+
@include atoms.border(top);
34+
}
35+
36+
thead {
37+
// Prevent extra vertical height with <th> elements
38+
// FIXME: Review after typography patterns introduced
39+
line-height: 1;
40+
41+
th {
42+
@include atoms.border(bottom);
43+
height: $-min-row-height;
44+
position: sticky;
45+
top: 0;
46+
47+
// Ensure the header is displayed above content in the table when it is
48+
// scrolled, including any content which establishes a new stacking context.
49+
z-index: 1;
50+
51+
background-color: $-color-header-background;
52+
text-align: left;
53+
}
54+
}
55+
56+
tbody {
57+
// Make table content look interact-able
58+
cursor: pointer;
59+
60+
// No border on top of first row's <td> elements, to eliminate a
61+
// double border with the <th>s
62+
& tr:first-child td {
63+
border-top: none;
64+
}
65+
66+
& tr {
67+
height: $-min-row-height;
68+
69+
&.is-selected {
70+
background-color: $-color-background--dark;
71+
color: var.$color-white;
72+
}
73+
}
74+
}
75+
}

‎styles/patterns/_tables.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@use '../mixins/patterns/tables';
2+
3+
.hyp-table {
4+
@include tables.table;
5+
}

‎styles/patterns/index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
@use 'forms';
33
@use 'panels';
44
@use 'spinners';
5+
@use 'tables';
56
@use 'thumbnails';

‎styles/variables/_colors.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ $black: black;
2525
// Typography: TODO refactor when adding typography patterns
2626
$text: $grey-9;
2727
$text--light: $grey-6;
28+
$text--inverted: $grey-1;
2829
// This does not provide enough contrast on white to meet WCAG AA standards,
2930
// and should only be used for disabled interfaces.
3031
$text--disabled: $grey-4;

0 commit comments

Comments
 (0)