@workday/canvas-kit-docs 10.0.25 → 10.0.27
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.
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import SearchFormBasic from './examples/SearchFormBasic';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
# Canvas Kit Examples
|
|
5
|
+
|
|
6
|
+
## Search Form Basic
|
|
7
|
+
|
|
8
|
+
A search form has a couple unique attributes to work correctly across platforms.
|
|
9
|
+
|
|
10
|
+
If you are a SPA and use an `onSubmit` attritbute be sure to also include a `action="."` attribute
|
|
11
|
+
to get the correct keyboard on mobile devices.
|
|
12
|
+
|
|
13
|
+
The form should always have a `role="search"` and the input should be `type="search"`
|
|
14
|
+
|
|
15
|
+
If you want to use a CKR clear button you will need to hide the webkit default one using the
|
|
16
|
+
`::-webkit-search-cancel-button` pseudo selector.
|
|
17
|
+
|
|
18
|
+
<ExampleCodeBlock code={SearchFormBasic} />
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {TertiaryButton} from '@workday/canvas-kit-react/button';
|
|
3
|
+
import {InputGroup} from '@workday/canvas-kit-react/text-input';
|
|
4
|
+
import {searchIcon} from '@workday/canvas-system-icons-web';
|
|
5
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
6
|
+
|
|
7
|
+
const hideNativeClearStyles = createStyles({
|
|
8
|
+
'&::-webkit-search-cancel-button': {
|
|
9
|
+
display: 'none',
|
|
10
|
+
},
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
export default () => {
|
|
14
|
+
const handleSubmit = (e: React.FormEvent) => {
|
|
15
|
+
e.preventDefault();
|
|
16
|
+
console.log(e.target[1]);
|
|
17
|
+
};
|
|
18
|
+
return (
|
|
19
|
+
<form role="search" action="." onSubmit={handleSubmit}>
|
|
20
|
+
<InputGroup>
|
|
21
|
+
<InputGroup.InnerStart>
|
|
22
|
+
<TertiaryButton size="small" aria-label="Search" icon={searchIcon} type="submit" />
|
|
23
|
+
</InputGroup.InnerStart>
|
|
24
|
+
<InputGroup.Input
|
|
25
|
+
type="search"
|
|
26
|
+
placeholder="Search for your favorite wine"
|
|
27
|
+
cs={hideNativeClearStyles}
|
|
28
|
+
/>
|
|
29
|
+
<InputGroup.InnerEnd>
|
|
30
|
+
<InputGroup.ClearButton />
|
|
31
|
+
</InputGroup.InnerEnd>
|
|
32
|
+
</InputGroup>
|
|
33
|
+
</form>
|
|
34
|
+
);
|
|
35
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "10.0.
|
|
3
|
+
"version": "10.0.27",
|
|
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": "^10.0.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^10.0.
|
|
49
|
-
"@workday/canvas-kit-react": "^10.0.
|
|
50
|
-
"@workday/canvas-kit-styling": "^10.0.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^10.0.27",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^10.0.27",
|
|
49
|
+
"@workday/canvas-kit-react": "^10.0.27",
|
|
50
|
+
"@workday/canvas-kit-styling": "^10.0.27",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^1.0.0",
|
|
53
53
|
"markdown-to-jsx": "^6.10.3",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"mkdirp": "^1.0.3",
|
|
60
60
|
"typescript": "4.2"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "859030fddee1c6520fcd37656ab0779ce6a0d2b1"
|
|
63
63
|
}
|