@workday/canvas-kit-docs 12.1.7 → 12.1.9
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.
|
@@ -7,12 +7,43 @@ document to learn about what a compound component is.
|
|
|
7
7
|
This document will go through building a simplified Disclosure component to help solidify the
|
|
8
8
|
concepts. We will cover:
|
|
9
9
|
|
|
10
|
+
- [Non Coordinated Components](#non-coordinated-components)
|
|
10
11
|
- [Models](#models)
|
|
11
12
|
- [Container Components](#disclosure-component)
|
|
12
13
|
- [Sub-components](#disclosuretarget-component)
|
|
13
14
|
- [Model Composition](#model-composition)
|
|
14
15
|
- [Behavior hooks](#behavior-hooks)
|
|
15
16
|
|
|
17
|
+
## Non Coordinated Components
|
|
18
|
+
|
|
19
|
+
In most cases you'll create compound components that have a model and share information across subcomponents. However, in the case where information doesn't need to be shared, you can create a non
|
|
20
|
+
coordinated component. These components often represent some styled element with no associated role
|
|
21
|
+
or behavior and don't rely on state and events such as a `Card`, `Flex` or `Button` components. Use
|
|
22
|
+
`createComponent` factory function in these scenarios.
|
|
23
|
+
|
|
24
|
+
### `createComponent`
|
|
25
|
+
|
|
26
|
+
Use `createComponent` when you want to create a rendered element with _no behavior_. This is useful
|
|
27
|
+
for elements that you want to use for styling purposes like container elements, or subcomponents
|
|
28
|
+
that are simple rendered elements. This utility function will wrap your component in a
|
|
29
|
+
`React.ForwardRef` and allow you to add subcomponents as well.
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
export const Card = createComponent('div')({
|
|
33
|
+
displayName: 'Card',
|
|
34
|
+
subComponents: {
|
|
35
|
+
Heading: CardHeading, // this is also using createComponent
|
|
36
|
+
},
|
|
37
|
+
Component: ({children, ...elemProps}: CardProps, ref, Element) => {
|
|
38
|
+
return (
|
|
39
|
+
<Box as={Element} {...elemProps} ref={ref}>
|
|
40
|
+
{children}
|
|
41
|
+
</Box>
|
|
42
|
+
);
|
|
43
|
+
},
|
|
44
|
+
});
|
|
45
|
+
```
|
|
46
|
+
|
|
16
47
|
## Models
|
|
17
48
|
|
|
18
49
|
A model is composed of state and events. The shape of the model used by components looks like this:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "12.1.
|
|
3
|
+
"version": "12.1.9",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^12.1.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^12.1.
|
|
49
|
-
"@workday/canvas-kit-react": "^12.1.
|
|
50
|
-
"@workday/canvas-kit-styling": "^12.1.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^12.1.9",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^12.1.9",
|
|
49
|
+
"@workday/canvas-kit-react": "^12.1.9",
|
|
50
|
+
"@workday/canvas-kit-styling": "^12.1.9",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^2.0.1",
|
|
53
53
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"mkdirp": "^1.0.3",
|
|
61
61
|
"typescript": "5.0"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "af0aae95c02e68874b831541306e1716a3070327"
|
|
64
64
|
}
|