Skip to content

Commit cf888fa

Browse files
semantic-release-botsemantic-release-bot
committed
chore(release): 4.1.2 [skip ci]
## [4.1.2](v4.1.1...v4.1.2) (2025-07-17) ### Bug Fixes * add heading class to th ([7e0d6ca](7e0d6ca)) * add themeable type classes ([d52759b](d52759b)) * update docs head content ([5609336](5609336)) * update packages ([fdaeaaa](fdaeaaa))
1 parent 7e0d6ca commit cf888fa

File tree

5 files changed

+245
-2
lines changed

5 files changed

+245
-2
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
# Semantic Release Automated Changelog
22

3+
## [4.1.2](https://github.com/AlaskaAirlines/auro-table/compare/v4.1.1...v4.1.2) (2025-07-17)
4+
5+
6+
### Bug Fixes
7+
8+
* add heading class to th ([7e0d6ca](https://github.com/AlaskaAirlines/auro-table/commit/7e0d6ca20912ef5a95be7218616893467bd5a774))
9+
* add themeable type classes ([d52759b](https://github.com/AlaskaAirlines/auro-table/commit/d52759b0e29e75cad52389b3da7e37c5259f98f1))
10+
* update docs head content ([5609336](https://github.com/AlaskaAirlines/auro-table/commit/560933624bbbaa672959ec519eaf267994088e70))
11+
* update packages ([fdaeaaa](https://github.com/AlaskaAirlines/auro-table/commit/fdaeaaa577520513a1194e5444ea83fb62285eeb))
12+
313
## [4.1.1](https://github.com/AlaskaAirlines/auro-table/compare/v4.1.0...v4.1.1) (2025-06-11)
414

515

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
104104
```html
105105
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@/dist/auro-classic/CSSCustomProperties.css" />
106106
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@/dist/bundled/essentials.css" />
107-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected].1/dist/auro-table__bundled.js" type="module"></script>
107+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected].2/dist/auro-table__bundled.js" type="module"></script>
108108
```
109109

110110
<!-- AURO-GENERATED-CONTENT:END -->

‎demo/api.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
2+
<!-- The below content is automatically added from ../docs/api.md -->
3+
4+
# auro-table
5+
6+
## Properties
7+
8+
| Property | Attribute | Type | Default |
9+
|-----------------|-----------------|-----------|---------|
10+
| [columnHeaders](#columnHeaders) | `columnHeaders` | `array` | |
11+
| [componentData](#componentData) | `componentData` | `array` | |
12+
| [nowrap](#nowrap) | `nowrap` | `boolean` | false |
13+
<!-- AURO-GENERATED-CONTENT:END -->
14+
15+
## API Examples
16+
17+
### Basic
18+
19+
<div class="exampleWrapper">
20+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
21+
<!-- The below content is automatically added from ../apiExamples/basic.html -->
22+
<auro-table
23+
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
24+
componentData='[
25+
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
26+
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
27+
{"": "Team meeting", "Wednesday": "10:00am" },
28+
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
29+
]'>My morning schedule
30+
</auro-table>
31+
<!-- AURO-GENERATED-CONTENT:END -->
32+
</div>
33+
<auro-accordion alignRight>
34+
<span slot="trigger">See code</span>
35+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
36+
<!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
37+
38+
```html
39+
<auro-table
40+
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
41+
componentData='[
42+
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
43+
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
44+
{"": "Team meeting", "Wednesday": "10:00am" },
45+
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
46+
]'>My morning schedule
47+
</auro-table>
48+
```
49+
<!-- AURO-GENERATED-CONTENT:END -->
50+
</auro-accordion>
51+
52+
### Attribute Examples
53+
54+
#### columnHeaders
55+
56+
The `columnHeaders` attribute is used to provide the column header content for the table.
57+
58+
</auro-accordion>
59+
60+
#### componentData
61+
62+
The `componentData` attribute is used to provide the table TD content for the table.
63+
64+
#### noWrap
65+
66+
The `nowrap` attribute, when applied, will prevent table content from word wrapping, i.e. all text content will be on a single line.
67+
68+
</auro-accordion>
69+
70+
## Theme Support
71+
72+
The component may be restyled using the following code sample and changing the values of the following token(s).
73+
74+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
75+
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
76+
77+
```scss
78+
@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
79+
80+
:host {
81+
--ds-auro-table-alt-row-container-color: var(--ds-advanced-color-shared-background-muted, #{v.$ds-advanced-color-shared-background-muted});
82+
--ds-auro-table-border-color: var(--ds-basic-color-border-subtle, #{v.$ds-basic-color-border-subtle});
83+
}
84+
```
85+
<!-- AURO-GENERATED-CONTENT:END -->

‎demo/index.md‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!--
2+
The index.md file is a compiled document. No edits should be made directly to this file.
3+
README.md is created by running `npm run build:docs`.
4+
This file is generated based on a template fetched from `../docs/partials/index.md`
5+
-->
6+
7+
# Table
8+
9+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/description.md) -->
10+
<!-- The below content is automatically added from ../docs/partials/description.md -->
11+
Use the `auro-table` custom element to illustrate non-dynamic tabular data. The auro-table element is responsive, with a flexible layout and an easy-to-use JSON API.
12+
<!-- AURO-GENERATED-CONTENT:END -->
13+
14+
## Use Cases
15+
16+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/useCases.md) -->
17+
<!-- The below content is automatically added from ../docs/partials/useCases.md -->
18+
The `<auro-table>` element should be used in situations where users may:
19+
20+
* Show static tabular data
21+
<!-- AURO-GENERATED-CONTENT:END -->
22+
23+
## Example(s)
24+
25+
<div class="exampleWrapper">
26+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
27+
<!-- The below content is automatically added from ../apiExamples/basic.html -->
28+
<auro-table
29+
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
30+
componentData='[
31+
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
32+
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
33+
{"": "Team meeting", "Wednesday": "10:00am" },
34+
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
35+
]'>My morning schedule
36+
</auro-table>
37+
<!-- AURO-GENERATED-CONTENT:END -->
38+
</div>
39+
<auro-accordion alignRight>
40+
<span slot="trigger">See code</span>
41+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
42+
<!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
43+
44+
```html
45+
<auro-table
46+
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
47+
componentData='[
48+
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
49+
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
50+
{"": "Team meeting", "Wednesday": "10:00am" },
51+
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
52+
]'>My morning schedule
53+
</auro-table>
54+
```
55+
<!-- AURO-GENERATED-CONTENT:END -->
56+
</auro-accordion>
57+
58+
## React and Svelte support
59+
60+
```js
61+
const headers=JSON.stringify(["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]);
62+
const data=JSON.stringify([
63+
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
64+
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
65+
{"": "Team meeting", "Wednesday": "10:00am" },
66+
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
67+
])
68+
69+
<auro-table nowrap columnHeaders={headers} componentData={data}>Default text</auro-table>
70+
```
71+
72+
Having a closing statement about your example helps to really complete the thought with your reader.
73+
74+
## WC Style Sheets support
75+
76+
For use cases where the general design of the Auro Table is needed, but the component is unseable, please use the [.auro_table](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-auro-css-#{$scope}.auro_table) styles from the Web Core Style Sheets library.
77+
78+
```html
79+
<table class="auro_table">
80+
<thead>
81+
<tr>
82+
<th>The table header</th>
83+
<th>The table header</th>
84+
</tr>
85+
</thead>
86+
<tbody>
87+
<tr>
88+
<td>The table body</td>
89+
<td>with two columns</td>
90+
</tr>
91+
<tr>
92+
<td>The table body</td>
93+
<td>with two columns</td>
94+
</tr>
95+
<tr>
96+
<td>The table body</td>
97+
<td>with two columns</td>
98+
</tr>
99+
</tbody>
100+
</table>
101+
```
102+
103+
## Recommended Use and Version Control
104+
105+
There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-table` custom element is defined automatically.
106+
107+
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroTable.register(name)` method and pass in a unique name.
108+
109+
```js
110+
import { AuroTable } from './src/auro-table.js';
111+
112+
AuroTable.register('custom-table');
113+
```
114+
115+
This will create a new custom element that you can use in your HTML that will function identically to the `auro-table` element.
116+
117+
<div class="exampleWrapper">
118+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customTable.html) -->
119+
<!-- The below content is automatically added from ../apiExamples/customTable.html -->
120+
<custom-table
121+
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
122+
componentData='[
123+
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
124+
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
125+
{"": "Team meeting", "Wednesday": "10:00am" },
126+
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
127+
]'>My morning schedule
128+
</custom-table>
129+
<!-- AURO-GENERATED-CONTENT:END -->
130+
</div>
131+
<auro-accordion alignRight>
132+
<span slot="trigger">See code</span>
133+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/customTable.html) -->
134+
<!-- The below code snippet is automatically added from ../apiExamples/customTable.html -->
135+
136+
```html
137+
<custom-table
138+
columnHeaders='["","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]'
139+
componentData='[
140+
{"": "Dance class", "Monday": "5:00pm","Wednesday": "5:00pm" },
141+
{"": "Night classes", "Thursday": "7:00pm","Friday": "7:00pm" },
142+
{"": "Team meeting", "Wednesday": "10:00am" },
143+
{"": "Morning workout", "Monday": "8:00am", "Tuesday": "8:00am", "Wednesday": "8:00am", "Thursday": "8:00am", "Friday": "8:00am" }
144+
]'>My morning schedule
145+
</custom-table>
146+
```
147+
<!-- AURO-GENERATED-CONTENT:END -->
148+
</auro-accordion>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"================================================================================"
88
],
99
"name": "@aurodesignsystem/auro-table",
10-
"version": "4.1.1",
10+
"version": "4.1.2",
1111
"description": "auro-table HTML custom element",
1212
"repository": {
1313
"type": "git",

0 commit comments

Comments
 (0)