Skip to content

Commit bf8d6d1

Browse files
dlockhartdlockhart
authored
feat: switching to use Lit table and scroll wrapper (#243)
1 parent 7c185df commit bf8d6d1

34 files changed

Lines changed: 2082 additions & 5295 deletions

‎.csslintrc‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎.eslintignore‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎.gitignore‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
11
node_modules
2-
*.css
3-
.DS_STORE
42
package-lock.json

‎.npmignore‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎CODEOWNERS‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
* @awikkerink
1+
* @dlockhart

‎README.md‎

Lines changed: 1 addition & 278 deletions
Original file line numberDiff line numberDiff line change
@@ -1,278 +1 @@
1-
**Looking for SASS-based `d2l-table`?** It's [over here](https://github.com/BrightspaceUI/table/tree/sass).
2-
3-
# d2l-table
4-
5-
Tables are styled like this:
6-
7-
A [Polymer](https://www.polymer-project.org)-based web component for D2L tables, which includes styling for tables.
8-
9-
![screenshot of table](test/acceptance/dumps/d2l-table-demo/objects/small.png)
10-
11-
![screenshot of responsive table](test/acceptance/dumps/d2l-table/objects/wide.png)
12-
13-
For further information on this and other components, refer to [The Brightspace UI Guide](https://github.com/BrightspaceUI/guide/wiki).
14-
15-
## Installation
16-
17-
`d2l-table` can be installed from [Bower][bower-url]:
18-
```shell
19-
bower install d2l-table
20-
```
21-
22-
## Usage
23-
24-
Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-table.html`:
25-
26-
```html
27-
<head>
28-
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
29-
<link rel="import" href="../d2l-table/d2l-table.html">
30-
<!-- Alternatively use the style include only in custom components that use d2l-table -->
31-
<custom-style>
32-
<style include="d2l-table-style"></style>
33-
</custom-style>
34-
</head>
35-
```
36-
37-
HTML:
38-
```html
39-
<!-- use the style include in custom components -->
40-
<style include="d2l-table-style"></style>
41-
<d2l-table-wrapper><table class="d2l-table">
42-
<thead>
43-
<tr>
44-
<th>Header column 1</th>
45-
<th>Header column 2</th>
46-
</tr>
47-
</thead>
48-
<tbody>
49-
<tr>
50-
<td>row 1 column 1</td>
51-
<td>row 1 column 2</td>
52-
</tr>
53-
<tr>
54-
<td>row 2 column 1</td>
55-
<td>row 2 column 2</td>
56-
</tr>
57-
</tbody>
58-
</table></d2l-table-wrapper>
59-
```
60-
61-
Alternatively, use the d2l-t* elements (allows use of dom-repeat, etc.)
62-
HTML:
63-
```html
64-
<!-- d2l-t* elements still need the d2l-table-style,
65-
since the table styling can't be done with polyfilled css mixins yet -->
66-
<style include="d2l-table-style"></style>
67-
<d2l-table>
68-
<d2l-thead>
69-
<d2l-tr>
70-
<d2l-th>Header column 1</d2l-th>
71-
<d2l-th>Header column 2</d2l-th>
72-
</d2l-tr>
73-
</d2l-thead>
74-
<d2l-tbody>
75-
<d2l-tr>
76-
<d2l-td>row 1 column 1</d2l-td>
77-
<d2l-td>row 1 column 2</d2l-td>
78-
</d2l-tr>
79-
<d2l-tr>
80-
<d2l-td>row 2 column 1</d2l-td>
81-
<d2l-td>row 2 column 2</d2l-td>
82-
</d2l-tr>
83-
</d2l-tbody>
84-
</d2l-table>
85-
```
86-
87-
The `d2l-tr` element does not support the `colspan` attribute. To create a row containing only a single cell that
88-
spans the entire width of the table, use `d2l-tspan` instead. Note that `d2l-tspan` rows are unaffected by horizontal
89-
scrolling.
90-
91-
HTML:
92-
```html
93-
<style include="d2l-table-style"></style>
94-
<d2l-table>
95-
<d2l-tbody>
96-
<d2l-tr>
97-
<d2l-td>row 1 column 1</d2l-td>
98-
<d2l-td>row 1 column 2</d2l-td>
99-
</d2l-tr>
100-
<d2l-tspan>
101-
row 2 (spans entire table width)
102-
</d2l-tspan>
103-
<d2l-tr>
104-
<d2l-td>row 3 column 1</d2l-td>
105-
<d2l-td>row 3 column 2</d2l-td>
106-
</d2l-tr>
107-
</d2l-tbody>
108-
</d2l-table>
109-
```
110-
111-
#### Row Styles
112-
113-
![screenshot of table with styled rows](test/acceptance/dumps/d2l-table-demo/objects/rows.png)
114-
115-
HTML:
116-
```html
117-
<!-- use the style include in custom components -->
118-
<style include="d2l-table-style"></style>
119-
<d2l-table-wrapper><table class="d2l-table">
120-
<tr selected>
121-
<td>selected</td>
122-
</tr>
123-
</table></d2l-table-wrapper>
124-
```
125-
126-
#### Header Icons
127-
128-
![screenshot of table with sort icons](test/acceptance/dumps/d2l-table-demo/objects/sort.png)
129-
130-
HTML:
131-
```html
132-
<!-- use the style include in custom components -->
133-
<style include="d2l-table-style"></style>
134-
<d2l-table-wrapper><table class="d2l-table">
135-
<thead>
136-
<th>
137-
<d2l-table-col-sort-button>Ascending</d2l-table-col-sort-button>
138-
</th>
139-
<th>
140-
<d2l-table-col-sort-button desc>Descending</d2l-table-col-sort-button>
141-
</th>
142-
</thead>
143-
<tbody>
144-
<tr>
145-
<td>123</td>
146-
<td>321</td>
147-
</tr>
148-
<tr>
149-
<td>456</td>
150-
<td>654</td>
151-
</tr>
152-
</tbody>
153-
</table></d2l-table-wrapper>
154-
```
155-
156-
#### Light Style - Full Design Spec Still In Progress
157-
158-
<img src="/images/light.png?raw=true" width="350">
159-
160-
Lightweight data tables are used to display tabular data in rows when column dividers or individual cell colors are not required. They are best suited for data that is primarily organized by row while still allowing users to order the rows by using column header sorting.
161-
162-
You can get this style by setting the `type` attribute to `light`.
163-
164-
HTML:
165-
```html
166-
<!-- use the style include in custom components -->
167-
<style include="d2l-table-style"></style>
168-
<d2l-table-wrapper type="light"><table class="d2l-table">
169-
...
170-
</table></d2l-table-wrapper>
171-
172-
<style include="d2l-table-style"></style>
173-
<d2l-table type="light">
174-
<d2l-tbody>
175-
...
176-
</d2l-tbody>
177-
</d2l-table>
178-
```
179-
180-
### Sticky Headers
181-
182-
Note: This feature is only works with browsers that support `position: sticky` which currently includes:
183-
- Chrome 56+
184-
- FF 59+
185-
- Safari 8+
186-
187-
Edge 16 is currently not working due to bugs with `position: sticky;` and right-to-left as well as border issues.
188-
189-
The header row will always be vertically sticky. To add a sticky column, you add the `sticky` attribute to each cell in the column.
190-
191-
```html
192-
<d2l-table-wrapper sticky-headers>
193-
<table>
194-
<thead>
195-
<tr>
196-
<th sticky>Sticky Column</th>
197-
<th>Not sticky column</th>
198-
</tr>
199-
</thead>
200-
<tbody>
201-
<tr>
202-
<th sticky>Sticky Column</th>
203-
<th>Not sticky column</th>
204-
</tr>
205-
</tbody>
206-
</table>
207-
```
208-
## Developing, Testing and Contributing
209-
210-
After cloning the repo, run `npm install` to install dependencies.
211-
212-
If you don't have it already, install the [Polymer CLI](https://www.polymer-project.org/2.0/docs/tools/polymer-cli) globally:
213-
214-
```shell
215-
npm install -g polymer-cli
216-
```
217-
218-
To start a [local web server](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#serve) that hosts the demo page and tests:
219-
220-
```shell
221-
polymer serve
222-
```
223-
224-
To lint ([eslint](http://eslint.org/) and [Polymer lint](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#lint)):
225-
226-
```shell
227-
npm run lint
228-
```
229-
230-
To run unit tests locally using [Polymer test](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#tests):
231-
232-
```shell
233-
polymer test --skip-plugin sauce
234-
```
235-
236-
To lint AND run local unit tests:
237-
238-
```shell
239-
npm test
240-
```
241-
242-
## Versioning & Releasing
243-
244-
> TL;DR: Commits prefixed with `fix:` and `feat:` will trigger patch and minor releases when merged to `master`. Read on for more details...
245-
246-
The [sematic-release GitHub Action](https://github.com/BrightspaceUI/actions/tree/master/semantic-release) is called from the `release.yml` GitHub Action workflow to handle version changes and releasing.
247-
248-
### Version Changes
249-
250-
All version changes should obey [semantic versioning](https://semver.org/) rules:
251-
1. **MAJOR** version when you make incompatible API changes,
252-
2. **MINOR** version when you add functionality in a backwards compatible manner, and
253-
3. **PATCH** version when you make backwards compatible bug fixes.
254-
255-
The next version number will be determined from the commit messages since the previous release. Our semantic-release configuration uses the [Angular convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular) when analyzing commits:
256-
* Commits which are prefixed with `fix:` or `perf:` will trigger a `patch` release. Example: `fix: validate input before using`
257-
* Commits which are prefixed with `feat:` will trigger a `minor` release. Example: `feat: add toggle() method`
258-
* To trigger a MAJOR release, include `BREAKING CHANGE:` with a space or two newlines in the footer of the commit message
259-
* Other suggested prefixes which will **NOT** trigger a release: `build:`, `ci:`, `docs:`, `style:`, `refactor:` and `test:`. Example: `docs: adding README for new component`
260-
261-
To revert a change, add the `revert:` prefix to the original commit message. This will cause the reverted change to be omitted from the release notes. Example: `revert: fix: validate input before using`.
262-
263-
### Releases
264-
265-
When a release is triggered, it will:
266-
* Update the version in `package.json`
267-
* Tag the commit
268-
* Create a GitHub release (including release notes)
269-
270-
### Releasing from Maintenance Branches
271-
272-
Occasionally you'll want to backport a feature or bug fix to an older release. `semantic-release` refers to these as [maintenance branches](https://semantic-release.gitbook.io/semantic-release/usage/workflow-configuration#maintenance-branches).
273-
274-
Maintenance branch names should be of the form: `+([0-9])?(.{+([0-9]),x}).x`.
275-
276-
Regular expressions are complicated, but this essentially means branch names should look like:
277-
* `1.15.x` for patch releases on top of the `1.15` release (after version `1.16` exists)
278-
* `2.x` for feature releases on top of the `2` release (after version `3` exists)
1+
> Deprecated: use [BrightspaceUI/core/components/table](https://github.com/BrightspaceUI/core/tree/master/components/table) and [BrightspaceUI/core/components/scroll-wrapper](https://github.com/BrightspaceUI/core/tree/master/components/scroll-wrapper) web components instead.

0 commit comments

Comments
 (0)