@kaizen/components 0.0.0-canary-stable-bundler-20240515025934 → 0.0.0-canary-stable-bundler-20240515064749
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/dist/cjs/Table/Table.cjs +17 -23
- package/dist/cjs/Table/Table.module.scss.cjs +2 -1
- package/dist/esm/Table/Table.mjs +17 -23
- package/dist/esm/Table/Table.module.scss.mjs +2 -1
- package/dist/types/Filter/Filter/types.d.ts +0 -1
- package/dist/types/Filter/FilterBar/types.d.ts +0 -1
- package/dist/types/Filter/FilterDatePicker/hooks/useDateValidation.d.ts +0 -1
- package/dist/types/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.d.ts +0 -1
- package/dist/types/Modal/GenericModal/context/ModalContext.d.ts +0 -1
- package/dist/types/MultiSelect/types.d.ts +0 -1
- package/dist/types/Notification/ToastNotification/types.d.ts +0 -1
- package/dist/types/RichTextEditor/utils/core/hooks/useRichTextEditor.d.ts +0 -1
- package/dist/types/RichTextEditor/utils/plugins/LinkManager/validation.d.ts +0 -1
- package/dist/types/Table/Table.d.ts +15 -5
- package/dist/types/TitleBlockZen/types.d.ts +0 -1
- package/dist/types/utils/isRefObject.d.ts +0 -1
- package/package.json +11 -8
- package/src/Table/Table.module.scss +68 -8
- package/src/Table/Table.tsx +27 -11
- package/src/Table/_docs/Table.mdx +43 -13
- package/src/Table/_docs/Table.stickersheet.stories.tsx +703 -0
- package/src/Table/_docs/Table.stories.tsx +290 -158
- package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx +12 -4
|
@@ -23,31 +23,61 @@ A table displays rows of data, including all data in a set, making it efficient
|
|
|
23
23
|
|
|
24
24
|
<Canvas of={TableStories.Playground} />
|
|
25
25
|
|
|
26
|
-
## API
|
|
26
|
+
## TableContainer API
|
|
27
27
|
|
|
28
|
-
###
|
|
28
|
+
### Variant
|
|
29
|
+
|
|
30
|
+
Controls the spacing in each cell within the table. Options available are `compact`, `default` and `data`.
|
|
31
|
+
|
|
32
|
+
#### Compact
|
|
29
33
|
<Canvas of={TableStories.Data} />
|
|
30
34
|
|
|
31
|
-
|
|
32
|
-
<Canvas of={TableStories.
|
|
35
|
+
#### Default
|
|
36
|
+
<Canvas of={TableStories.Default} />
|
|
33
37
|
|
|
34
|
-
|
|
35
|
-
<Canvas of={TableStories.
|
|
38
|
+
#### Data
|
|
39
|
+
<Canvas of={TableStories.Data} />
|
|
40
|
+
|
|
41
|
+
## TableHeaderRowCell API
|
|
42
|
+
|
|
43
|
+
### Sorting
|
|
44
|
+
<Canvas of={TableStories.Sorting} />
|
|
45
|
+
|
|
46
|
+
### Checkbox
|
|
47
|
+
|
|
48
|
+
To ensure there appropriate context for users of assistive technologies, when using a `checkable` `TableHeaderRowCell`, we advise in the `checkboxLabel`. This will be passed to the a checkbox aria-label and be announce to screen reader users when focused.
|
|
36
49
|
|
|
37
|
-
### CheckboxVariant
|
|
38
50
|
<Canvas of={TableStories.CheckboxVariant} />
|
|
39
51
|
|
|
40
|
-
###
|
|
41
|
-
<Canvas of={TableStories.IconVariant} />
|
|
52
|
+
### Icon
|
|
42
53
|
|
|
43
|
-
|
|
44
|
-
|
|
54
|
+
When using providing `icon` to `TableHeaderRowCell` the `labelText` will be passed to the `aria-label` of the SVG.
|
|
55
|
+
|
|
56
|
+
<Canvas of={TableStories.IconVariant} />
|
|
45
57
|
|
|
46
|
-
###
|
|
58
|
+
### Align and wrapping
|
|
47
59
|
<Canvas of={TableStories.HeaderAlignmentAndWrapping} />
|
|
48
60
|
|
|
49
|
-
###
|
|
61
|
+
### Tooltips
|
|
62
|
+
|
|
63
|
+
While Tooltip content can be passed to any table header via the `tooltipInfo` prop, it is strong advised to avoid this if the header is not an interactive element as the tooltip content will be unreadable to keyboard users or those that use assistive technologies.
|
|
64
|
+
|
|
50
65
|
<Canvas of={TableStories.Tooltip} />
|
|
51
66
|
|
|
67
|
+
You can read more about the Tooltip component and accessibility limitation [here](https://cultureamp.design/?path=/docs/components-tooltip--docs#screen-reader-accessibility).
|
|
68
|
+
|
|
52
69
|
### Reversed
|
|
53
70
|
<Canvas of={TableStories.Reversed} />
|
|
71
|
+
|
|
72
|
+
## TableCard API
|
|
73
|
+
|
|
74
|
+
### Link
|
|
75
|
+
<Canvas of={TableStories.LinkVariant} />
|
|
76
|
+
|
|
77
|
+
### Expandable
|
|
78
|
+
|
|
79
|
+
The `expandable` prop introduces known accessibility issues with nesting interactive elements as children of a `button` or `anchor` tag. We recommend avoiding this pattern if possible, or creating a tier 3 component that adheres to correct WCAG hierarchy.
|
|
80
|
+
|
|
81
|
+
<Canvas of={TableStories.Expandable} />
|
|
82
|
+
|
|
83
|
+
|