@instructure/ui-table 11.0.2-snapshot-1 → 11.0.2-snapshot-2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -1
- package/README.md +1 -1
- package/package.json +14 -14
- package/src/Table/README.md +7 -7
- package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
## [11.0.2-snapshot-
|
|
6
|
+
## [11.0.2-snapshot-2](https://github.com/instructure/instructure-ui/compare/v11.0.1...v11.0.2-snapshot-2) (2025-10-20)
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
### Bug Fixes
|
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-table",
|
|
3
|
-
"version": "11.0.2-snapshot-
|
|
3
|
+
"version": "11.0.2-snapshot-2",
|
|
4
4
|
"description": "A styled HTML table component",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -23,10 +23,10 @@
|
|
|
23
23
|
},
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@instructure/ui-axe-check": "11.0.2-snapshot-
|
|
27
|
-
"@instructure/ui-babel-preset": "11.0.2-snapshot-
|
|
28
|
-
"@instructure/ui-color-utils": "11.0.2-snapshot-
|
|
29
|
-
"@instructure/ui-themes": "11.0.2-snapshot-
|
|
26
|
+
"@instructure/ui-axe-check": "11.0.2-snapshot-2",
|
|
27
|
+
"@instructure/ui-babel-preset": "11.0.2-snapshot-2",
|
|
28
|
+
"@instructure/ui-color-utils": "11.0.2-snapshot-2",
|
|
29
|
+
"@instructure/ui-themes": "11.0.2-snapshot-2",
|
|
30
30
|
"@testing-library/jest-dom": "^6.6.3",
|
|
31
31
|
"@testing-library/react": "15.0.7",
|
|
32
32
|
"@testing-library/user-event": "^14.6.1",
|
|
@@ -34,15 +34,15 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@babel/runtime": "^7.27.6",
|
|
37
|
-
"@instructure/console": "11.0.2-snapshot-
|
|
38
|
-
"@instructure/emotion": "11.0.2-snapshot-
|
|
39
|
-
"@instructure/shared-types": "11.0.2-snapshot-
|
|
40
|
-
"@instructure/ui-a11y-content": "11.0.2-snapshot-
|
|
41
|
-
"@instructure/ui-icons": "11.0.2-snapshot-
|
|
42
|
-
"@instructure/ui-react-utils": "11.0.2-snapshot-
|
|
43
|
-
"@instructure/ui-simple-select": "11.0.2-snapshot-
|
|
44
|
-
"@instructure/ui-utils": "11.0.2-snapshot-
|
|
45
|
-
"@instructure/ui-view": "11.0.2-snapshot-
|
|
37
|
+
"@instructure/console": "11.0.2-snapshot-2",
|
|
38
|
+
"@instructure/emotion": "11.0.2-snapshot-2",
|
|
39
|
+
"@instructure/shared-types": "11.0.2-snapshot-2",
|
|
40
|
+
"@instructure/ui-a11y-content": "11.0.2-snapshot-2",
|
|
41
|
+
"@instructure/ui-icons": "11.0.2-snapshot-2",
|
|
42
|
+
"@instructure/ui-react-utils": "11.0.2-snapshot-2",
|
|
43
|
+
"@instructure/ui-simple-select": "11.0.2-snapshot-2",
|
|
44
|
+
"@instructure/ui-utils": "11.0.2-snapshot-2",
|
|
45
|
+
"@instructure/ui-view": "11.0.2-snapshot-2"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"react": ">=18 <=19"
|
package/src/Table/README.md
CHANGED
|
@@ -6,9 +6,9 @@ describes: Table
|
|
|
6
6
|
|
|
7
7
|
In stacked layout, column header is rendered in each cell, but not in row header.
|
|
8
8
|
|
|
9
|
-
> If you are using [TruncateText](
|
|
9
|
+
> If you are using [TruncateText](TruncateText) (or CSS ellipsis) in your Table, set the
|
|
10
10
|
> layout to `fixed` or `stacked`, or the text truncation will not work. To force long strings to break and not
|
|
11
|
-
> exceed the bounds of the table cell, use `fixed` or `stacked`, together with the [Text](
|
|
11
|
+
> exceed the bounds of the table cell, use `fixed` or `stacked`, together with the [Text](Text) component:
|
|
12
12
|
> `<Text wrap="break-word">[long string]</Text>`.
|
|
13
13
|
|
|
14
14
|
```js
|
|
@@ -220,7 +220,7 @@ render(
|
|
|
220
220
|
|
|
221
221
|
### A sortable table using our Responsive component
|
|
222
222
|
|
|
223
|
-
Resize the window to see how column headers transition into a `Select` for sorting table content when the traditional Table Header is no longer clickable. The Table layout itself switches from the horizontal view to the stacked view allowing content to be viewed without horizontal scrolling. See [Responsive](
|
|
223
|
+
Resize the window to see how column headers transition into a `Select` for sorting table content when the traditional Table Header is no longer clickable. The Table layout itself switches from the horizontal view to the stacked view allowing content to be viewed without horizontal scrolling. See [Responsive](Responsive) for more examples.
|
|
224
224
|
|
|
225
225
|
By default, the options in the `Select` for sorting in stacked layout are generated from the `id` property of the `Table.ColHeader` components. If you want to display custom strings, use the `stackedSortByLabel` property.
|
|
226
226
|
|
|
@@ -868,7 +868,7 @@ render(<Example />)
|
|
|
868
868
|
If you want to use fully custom components you have to pay attention to the following:
|
|
869
869
|
|
|
870
870
|
- Render them as the appropriate HTML Table tags (`tr`, `th`, ...)
|
|
871
|
-
- Read the `hover` prop from [TableContext](
|
|
871
|
+
- Read the `hover` prop from [TableContext](TableContext) to customize hover behaviour
|
|
872
872
|
- A11y: Row header cells must have the `scope='row'` HTML attribute
|
|
873
873
|
- A11y: Column header cells must have the `scope='col'` and `aria-sort` (if sortable) HTML attribute
|
|
874
874
|
|
|
@@ -973,13 +973,13 @@ render(<Example />)
|
|
|
973
973
|
|
|
974
974
|
#### Fully custom components with `stacked` layout
|
|
975
975
|
|
|
976
|
-
This layout for small screens displays the table as a list. To accomplish this the headers are passed down to cells (in [TableContext](
|
|
976
|
+
This layout for small screens displays the table as a list. To accomplish this the headers are passed down to cells (in [TableContext](TableContext)), so they can display what column they are rendering.
|
|
977
977
|
In this layout for accessibility not render HTML table tags, just plain DOM elements (e.g. `div`) and use the appropriate ARIA role to signify that it's actually a `Table` (e.g. [`cell`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/cell_role), [`row`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/row_role), [`rowheader`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/rowheader_role)).
|
|
978
978
|
Also you need the following props on the components:
|
|
979
979
|
|
|
980
980
|
##### Table rows
|
|
981
981
|
|
|
982
|
-
- It should read the `headers` array from [TableContext](
|
|
982
|
+
- It should read the `headers` array from [TableContext](TableContext) and pass its nth element to its nth child (if they have such prop).
|
|
983
983
|
|
|
984
984
|
##### The children of the first row in `Table.Head` (`Table.ColHeader` by default)
|
|
985
985
|
|
|
@@ -987,7 +987,7 @@ Also you need the following props on the components:
|
|
|
987
987
|
|
|
988
988
|
##### Table cells
|
|
989
989
|
|
|
990
|
-
- It needs to have an optional `header` prop and should display its value so the user knows which column the cell's value belongs to (you can read whether the table is using `stacked` layout from [TableContext](
|
|
990
|
+
- It needs to have an optional `header` prop and should display its value so the user knows which column the cell's value belongs to (you can read whether the table is using `stacked` layout from [TableContext](TableContext).
|
|
991
991
|
|
|
992
992
|
Custom table with `stacked` layout support:
|
|
993
993
|
|