@workday/canvas-kit-docs 14.0.0-alpha.1133-next.0 → 14.0.0-alpha.1135-next.0
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/es6/lib/docs.js +8664 -5157
- package/dist/mdx/14.0-UPGRADE-GUIDE.mdx +53 -2
- package/dist/mdx/labs-react/search-form/SearchForm.mdx +14 -0
- package/dist/mdx/labs-react/search-form/examples/Collapsed.tsx +64 -0
- package/dist/mdx/labs-react/search-form/examples/CustomStyles.tsx +91 -0
- package/dist/mdx/labs-react/search-form/examples/CustomTheme.tsx +4 -5
- package/package.json +6 -6
|
@@ -10,6 +10,7 @@ any questions.
|
|
|
10
10
|
- [Instructions](#instructions)
|
|
11
11
|
- [Component Updates](#component-updates)
|
|
12
12
|
- [Styling API and CSS Tokens](#styling-api-and-css-tokens)
|
|
13
|
+
- [SearchForm](#search-form)
|
|
13
14
|
- [Troubleshooting](#troubleshooting)
|
|
14
15
|
- [Glossary](#glossary)
|
|
15
16
|
- [Main](#main)
|
|
@@ -88,11 +89,61 @@ interface has not changed, but Canvas Tokens are now used for dynamic properties
|
|
|
88
89
|
The following components have been updated:
|
|
89
90
|
|
|
90
91
|
- `Breadcrumbs` [#3270](https://github.com/Workday/canvas-kit/pull/3270)
|
|
91
|
-
- `
|
|
92
|
-
- `
|
|
92
|
+
- `Pagination` (Preview) [#3300](https://github.com/Workday/canvas-kit/pull/3300)
|
|
93
|
+
- `SearchForm` (Labs) [#3303](https://github.com/Workday/canvas-kit/pull/3303)
|
|
94
|
+
- `SegmentedControl` (Main) [#3278](https://github.com/Workday/canvas-kit/pull/3278)
|
|
95
|
+
- `SegmentedControl` (Preview) [#3278](https://github.com/Workday/canvas-kit/pull/3278)
|
|
93
96
|
- `ToolbarDropdownButton` [#3293](https://github.com/Workday/canvas-kit/pull/3293)
|
|
94
97
|
- `ToolbarIconButton` [#3293](https://github.com/Workday/canvas-kit/pull/3293)
|
|
95
98
|
|
|
99
|
+
### Search Form 🚨
|
|
100
|
+
|
|
101
|
+
**PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
|
|
102
|
+
|
|
103
|
+
- `SearchThemeAttributes` type has been updated. Both `boxShadow` and `boxShadowFocus` now only accept a `string` instead of `string | string[]`.
|
|
104
|
+
|
|
105
|
+
**Before in v13**
|
|
106
|
+
```tsx
|
|
107
|
+
const customTheme = {
|
|
108
|
+
background: colors.cinnamon600,
|
|
109
|
+
backgroundFocus: colors.frenchVanilla100,
|
|
110
|
+
placeholderColor: colors.frenchVanilla100,
|
|
111
|
+
placeholderColorFocus: colors.blackPepper400,
|
|
112
|
+
boxShadow: ['10px 5px 5px red', '60px -16px teal']
|
|
113
|
+
boxShadowFocus: ['10px 5px 5px red', '60px -16px teal']
|
|
114
|
+
} as SearchThemeAttributes;
|
|
115
|
+
//...
|
|
116
|
+
|
|
117
|
+
<SearchForm
|
|
118
|
+
searchTheme={customTheme}
|
|
119
|
+
autocompleteItems={menuItems}
|
|
120
|
+
onInputChange={filterMenuItems}
|
|
121
|
+
onSubmit={handleSubmit}
|
|
122
|
+
/>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
**After in v14**
|
|
126
|
+
|
|
127
|
+
```tsx
|
|
128
|
+
const customTheme = {
|
|
129
|
+
background: colors.cinnamon600,
|
|
130
|
+
backgroundFocus: colors.frenchVanilla100,
|
|
131
|
+
placeholderColor: colors.frenchVanilla100,
|
|
132
|
+
placeholderColorFocus: colors.blackPepper400,
|
|
133
|
+
boxShadow: '10px 5px 5px red',
|
|
134
|
+
boxShadowFocus: '10px 5px 5px red'
|
|
135
|
+
} as SearchThemeAttributes;
|
|
136
|
+
//...
|
|
137
|
+
|
|
138
|
+
<SearchForm
|
|
139
|
+
searchTheme={customTheme}
|
|
140
|
+
autocompleteItems={menuItems}
|
|
141
|
+
onInputChange={filterMenuItems}
|
|
142
|
+
onSubmit={handleSubmit}
|
|
143
|
+
/>
|
|
144
|
+
```
|
|
145
|
+
- `SearchTheme` enum type has been updated to have string values `light`, `dark` and `transparent`. This **should not** affect the way you use the type unless you're passing a `number` of `0`, `1` or `2` to the `searchTheme` prop.
|
|
146
|
+
|
|
96
147
|
## Troubleshooting
|
|
97
148
|
|
|
98
149
|
- When upgrading to the latest major version of Canvas Kit, all related Canvas Kit packages should
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';import Basic from './examples/Basic';
|
|
2
|
+
import Collapsed from './examples/Collapsed';
|
|
2
3
|
import CustomTheme from './examples/CustomTheme';
|
|
3
4
|
import Grow from './examples/Grow';
|
|
4
5
|
import RTL from './examples/RTL';
|
|
5
6
|
import Theming from './examples/Theming';
|
|
7
|
+
import CustomStyles from './examples/CustomStyles';
|
|
6
8
|
|
|
7
9
|
|
|
8
10
|
# Canvas Kit Search Form
|
|
@@ -54,6 +56,18 @@ additional configuration.
|
|
|
54
56
|
|
|
55
57
|
<ExampleCodeBlock code={RTL} />
|
|
56
58
|
|
|
59
|
+
### Collapsed
|
|
60
|
+
|
|
61
|
+
<ExampleCodeBlock code={Collapsed} />
|
|
62
|
+
|
|
63
|
+
### Custom Styles
|
|
64
|
+
|
|
65
|
+
You can apply custom styles to the component via the `cs` prop. The example below uses CSS Variables and [createStencil](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs#stencils) to create a custom style for the `SearchForm` component.
|
|
66
|
+
|
|
67
|
+
<ExampleCodeBlock code={CustomStyles} />
|
|
68
|
+
|
|
69
|
+
Learn more in our [Styling](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs) docs.
|
|
70
|
+
|
|
57
71
|
## Component API
|
|
58
72
|
|
|
59
73
|
### SearchForm
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
|
|
3
|
+
import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
|
|
4
|
+
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
5
|
+
|
|
6
|
+
const initialWineList = [
|
|
7
|
+
'Beaujolais',
|
|
8
|
+
'Bordeaux',
|
|
9
|
+
'Cabernet Sauvignon',
|
|
10
|
+
'Champagne',
|
|
11
|
+
'Chardonnay',
|
|
12
|
+
'Chianti',
|
|
13
|
+
'Malbec',
|
|
14
|
+
'Merlot',
|
|
15
|
+
'Pinot Grigio',
|
|
16
|
+
'Pinot Gris',
|
|
17
|
+
'Pinot Noir',
|
|
18
|
+
'Primitivo',
|
|
19
|
+
'Prosecco',
|
|
20
|
+
'Riesling',
|
|
21
|
+
'Rioja',
|
|
22
|
+
'Rosé',
|
|
23
|
+
'Sauvignon Blanc',
|
|
24
|
+
'Syrah',
|
|
25
|
+
'Zinfandel',
|
|
26
|
+
];
|
|
27
|
+
|
|
28
|
+
export default () => {
|
|
29
|
+
const [wineList, setWineList] = React.useState(initialWineList);
|
|
30
|
+
// Tracking the input value for onSubmit
|
|
31
|
+
const [searchInput, setSearchInput] = React.useState('');
|
|
32
|
+
const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
|
|
33
|
+
|
|
34
|
+
const filterMenuItems = e => {
|
|
35
|
+
setSearchInput(e.target.value);
|
|
36
|
+
const formattedValue = e.target.value.toLowerCase();
|
|
37
|
+
|
|
38
|
+
// Reset the list if the input is cleared
|
|
39
|
+
if (!formattedValue.length) {
|
|
40
|
+
setWineList(initialWineList);
|
|
41
|
+
} else {
|
|
42
|
+
const filteredItems = initialWineList.filter(wine =>
|
|
43
|
+
wine.toLowerCase().includes(formattedValue)
|
|
44
|
+
);
|
|
45
|
+
setWineList(filteredItems);
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const handleSubmit = () => {
|
|
50
|
+
// We don't need to prevent the default event because SearchForm handles that internally
|
|
51
|
+
console.log(`Searching for: ${searchInput}`);
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
return (
|
|
55
|
+
<Flex minHeight={200} alignItems="flex-start" padding="xs">
|
|
56
|
+
<SearchForm
|
|
57
|
+
autocompleteItems={menuItems}
|
|
58
|
+
onInputChange={filterMenuItems}
|
|
59
|
+
onSubmit={handleSubmit}
|
|
60
|
+
isCollapsed
|
|
61
|
+
/>
|
|
62
|
+
</Flex>
|
|
63
|
+
);
|
|
64
|
+
};
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
|
|
3
|
+
import {SearchForm, searchFormStencil} from '@workday/canvas-kit-labs-react/search-form';
|
|
4
|
+
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
5
|
+
import {createStencil} from '@workday/canvas-kit-styling';
|
|
6
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
7
|
+
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
8
|
+
|
|
9
|
+
const initialWineList = [
|
|
10
|
+
'Beaujolais',
|
|
11
|
+
'Bordeaux',
|
|
12
|
+
'Cabernet Sauvignon',
|
|
13
|
+
'Champagne',
|
|
14
|
+
'Chardonnay',
|
|
15
|
+
'Chianti',
|
|
16
|
+
'Malbec',
|
|
17
|
+
'Merlot',
|
|
18
|
+
'Pinot Grigio',
|
|
19
|
+
'Pinot Gris',
|
|
20
|
+
'Pinot Noir',
|
|
21
|
+
'Primitivo',
|
|
22
|
+
'Prosecco',
|
|
23
|
+
'Riesling',
|
|
24
|
+
'Rioja',
|
|
25
|
+
'Rosé',
|
|
26
|
+
'Sauvignon Blanc',
|
|
27
|
+
'Syrah',
|
|
28
|
+
'Zinfandel',
|
|
29
|
+
];
|
|
30
|
+
|
|
31
|
+
const customSearchFormStencil = createStencil({
|
|
32
|
+
extends: searchFormStencil,
|
|
33
|
+
base: ({submitSearchIconPart}) => ({
|
|
34
|
+
[searchFormStencil.vars.background]: 'black',
|
|
35
|
+
[searchFormStencil.vars.backgroundHover]: system.color.bg.muted.strong,
|
|
36
|
+
[searchFormStencil.vars.color]: system.color.text.inverse,
|
|
37
|
+
[searchFormStencil.vars.placeholderColor]: system.color.bg.alt.softer,
|
|
38
|
+
[submitSearchIconPart]: {
|
|
39
|
+
[systemIconStencil.vars.color]: system.color.fg.inverse,
|
|
40
|
+
},
|
|
41
|
+
[`& [data-part="combobox-reset-button"]`]: {
|
|
42
|
+
[systemIconStencil.vars.color]: system.color.fg.inverse,
|
|
43
|
+
},
|
|
44
|
+
'&:focus-within': {
|
|
45
|
+
[submitSearchIconPart]: {
|
|
46
|
+
[systemIconStencil.vars.color]: system.color.fg.default,
|
|
47
|
+
},
|
|
48
|
+
[`& [data-part="combobox-reset-button"]`]: {
|
|
49
|
+
[systemIconStencil.vars.color]: system.color.fg.default,
|
|
50
|
+
},
|
|
51
|
+
},
|
|
52
|
+
}),
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
export default () => {
|
|
56
|
+
const [wineList, setWineList] = React.useState(initialWineList);
|
|
57
|
+
// Tracking the input value for onSubmit
|
|
58
|
+
const [searchInput, setSearchInput] = React.useState('');
|
|
59
|
+
const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
|
|
60
|
+
|
|
61
|
+
const filterMenuItems = e => {
|
|
62
|
+
setSearchInput(e.target.value);
|
|
63
|
+
const formattedValue = e.target.value.toLowerCase();
|
|
64
|
+
|
|
65
|
+
// Reset the list if the input is cleared
|
|
66
|
+
if (!formattedValue.length) {
|
|
67
|
+
setWineList(initialWineList);
|
|
68
|
+
} else {
|
|
69
|
+
const filteredItems = initialWineList.filter(wine =>
|
|
70
|
+
wine.toLowerCase().includes(formattedValue)
|
|
71
|
+
);
|
|
72
|
+
setWineList(filteredItems);
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
const handleSubmit = () => {
|
|
77
|
+
// We don't need to prevent the default event because SearchForm handles that internally
|
|
78
|
+
console.log(`Searching for: ${searchInput}`);
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
return (
|
|
82
|
+
<Flex minHeight={200} alignItems="flex-start" padding="xs">
|
|
83
|
+
<SearchForm
|
|
84
|
+
cs={customSearchFormStencil()}
|
|
85
|
+
autocompleteItems={menuItems}
|
|
86
|
+
onInputChange={filterMenuItems}
|
|
87
|
+
onSubmit={handleSubmit}
|
|
88
|
+
/>
|
|
89
|
+
</Flex>
|
|
90
|
+
);
|
|
91
|
+
};
|
|
@@ -2,7 +2,6 @@ import * as React from 'react';
|
|
|
2
2
|
import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
|
|
3
3
|
import {SearchForm, SearchThemeAttributes} from '@workday/canvas-kit-labs-react/search-form';
|
|
4
4
|
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
5
|
-
import {colors} from '@workday/canvas-kit-react/tokens';
|
|
6
5
|
|
|
7
6
|
const initialWineList = [
|
|
8
7
|
'Beaujolais',
|
|
@@ -53,10 +52,10 @@ export default () => {
|
|
|
53
52
|
};
|
|
54
53
|
|
|
55
54
|
const customTheme = {
|
|
56
|
-
background:
|
|
57
|
-
backgroundFocus:
|
|
58
|
-
placeholderColor:
|
|
59
|
-
placeholderColorFocus:
|
|
55
|
+
background: '#a31b12',
|
|
56
|
+
backgroundFocus: '#fff',
|
|
57
|
+
placeholderColor: '#fff',
|
|
58
|
+
placeholderColorFocus: '#333333',
|
|
60
59
|
} as SearchThemeAttributes;
|
|
61
60
|
|
|
62
61
|
return (
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1135-next.0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@stackblitz/sdk": "^1.11.0",
|
|
47
47
|
"@storybook/csf": "0.0.1",
|
|
48
|
-
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.1135-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.1135-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1135-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1135-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
53
53
|
"@workday/canvas-tokens-web": "^2.1.1",
|
|
54
54
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"mkdirp": "^1.0.3",
|
|
62
62
|
"typescript": "5.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "3c15a81810dfe2232ca4519ae857a0e3b2a3d484"
|
|
65
65
|
}
|