@workday/canvas-kit-labs-react 5.3.15 → 5.4.0-next.1
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/combobox/lib/AutocompleteList.tsx +2 -3
- package/combobox/lib/Combobox.tsx +10 -4
- package/common/README.md +32 -0
- package/common/lib/Box.tsx +21 -4
- package/common/lib/theming/index.ts +1 -0
- package/common/lib/theming/useThemedRing.ts +82 -0
- package/dist/commonjs/combobox/lib/AutocompleteList.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/AutocompleteList.js +1 -2
- package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/Combobox.js +3 -3
- package/dist/commonjs/common/lib/Box.d.ts.map +1 -1
- package/dist/commonjs/common/lib/Box.js +10 -2
- package/dist/commonjs/common/lib/theming/index.d.ts +1 -0
- package/dist/commonjs/common/lib/theming/index.d.ts.map +1 -1
- package/dist/commonjs/common/lib/theming/index.js +1 -0
- package/dist/commonjs/common/lib/theming/useThemedRing.d.ts +11 -0
- package/dist/commonjs/common/lib/theming/useThemedRing.d.ts.map +1 -0
- package/dist/commonjs/common/lib/theming/useThemedRing.js +65 -0
- package/dist/commonjs/header/index.d.ts +5 -5
- package/dist/commonjs/header/index.d.ts.map +1 -1
- package/dist/commonjs/header/index.js +2 -2
- package/dist/commonjs/header/lib/GlobalHeader.d.ts +11 -2
- package/dist/commonjs/header/lib/GlobalHeader.d.ts.map +1 -1
- package/dist/commonjs/header/lib/GlobalHeader.js +19 -8
- package/dist/commonjs/header/lib/Header.d.ts +17 -8
- package/dist/commonjs/header/lib/Header.d.ts.map +1 -1
- package/dist/commonjs/header/lib/Header.js +27 -14
- package/dist/commonjs/header/lib/parts/DubLogoTitle.d.ts +13 -4
- package/dist/commonjs/header/lib/parts/DubLogoTitle.d.ts.map +1 -1
- package/dist/commonjs/header/lib/parts/DubLogoTitle.js +22 -11
- package/dist/commonjs/header/lib/parts/WorkdayLogoTitle.d.ts +14 -5
- package/dist/commonjs/header/lib/parts/WorkdayLogoTitle.d.ts.map +1 -1
- package/dist/commonjs/header/lib/parts/WorkdayLogoTitle.js +25 -12
- package/dist/commonjs/header/lib/parts/index.d.ts +2 -3
- package/dist/commonjs/header/lib/parts/index.d.ts.map +1 -1
- package/dist/commonjs/header/lib/parts/index.js +2 -4
- package/dist/commonjs/header/lib/shared/themes.d.ts +28 -19
- package/dist/commonjs/header/lib/shared/themes.d.ts.map +1 -1
- package/dist/commonjs/header/lib/shared/themes.js +13 -36
- package/dist/commonjs/header/lib/shared/types.d.ts +3 -8
- package/dist/commonjs/header/lib/shared/types.d.ts.map +1 -1
- package/dist/commonjs/header/lib/shared/types.js +17 -23
- package/dist/commonjs/index.d.ts +1 -0
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +1 -0
- package/dist/commonjs/layout/lib/Stack.d.ts.map +1 -1
- package/dist/commonjs/layout/lib/Stack.js +1 -1
- package/dist/commonjs/layout/lib/utils/getValidChildren.d.ts +1 -1
- package/dist/commonjs/layout/lib/utils/getValidChildren.d.ts.map +1 -1
- package/dist/commonjs/search-form/index.d.ts +3 -0
- package/dist/commonjs/search-form/index.d.ts.map +1 -0
- package/dist/commonjs/search-form/index.js +7 -0
- package/dist/commonjs/{header/lib/parts/SearchBar.d.ts → search-form/lib/SearchForm.d.ts} +27 -23
- package/dist/commonjs/search-form/lib/SearchForm.d.ts.map +1 -0
- package/dist/commonjs/{header/lib/parts/SearchBar.js → search-form/lib/SearchForm.js} +17 -19
- package/dist/commonjs/search-form/lib/themes.d.ts +21 -0
- package/dist/commonjs/search-form/lib/themes.d.ts.map +1 -0
- package/dist/commonjs/search-form/lib/themes.js +41 -0
- package/dist/es6/combobox/lib/AutocompleteList.d.ts.map +1 -1
- package/dist/es6/combobox/lib/AutocompleteList.js +2 -3
- package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -1
- package/dist/es6/combobox/lib/Combobox.js +4 -4
- package/dist/es6/common/lib/Box.d.ts.map +1 -1
- package/dist/es6/common/lib/Box.js +11 -3
- package/dist/es6/common/lib/theming/index.d.ts +1 -0
- package/dist/es6/common/lib/theming/index.d.ts.map +1 -1
- package/dist/es6/common/lib/theming/index.js +1 -0
- package/dist/es6/common/lib/theming/useThemedRing.d.ts +11 -0
- package/dist/es6/common/lib/theming/useThemedRing.d.ts.map +1 -0
- package/dist/es6/common/lib/theming/useThemedRing.js +59 -0
- package/dist/es6/header/index.d.ts +5 -5
- package/dist/es6/header/index.d.ts.map +1 -1
- package/dist/es6/header/index.js +5 -5
- package/dist/es6/header/lib/GlobalHeader.d.ts +11 -2
- package/dist/es6/header/lib/GlobalHeader.d.ts.map +1 -1
- package/dist/es6/header/lib/GlobalHeader.js +22 -11
- package/dist/es6/header/lib/Header.d.ts +17 -8
- package/dist/es6/header/lib/Header.d.ts.map +1 -1
- package/dist/es6/header/lib/Header.js +30 -17
- package/dist/es6/header/lib/parts/DubLogoTitle.d.ts +13 -4
- package/dist/es6/header/lib/parts/DubLogoTitle.d.ts.map +1 -1
- package/dist/es6/header/lib/parts/DubLogoTitle.js +23 -12
- package/dist/es6/header/lib/parts/WorkdayLogoTitle.d.ts +14 -5
- package/dist/es6/header/lib/parts/WorkdayLogoTitle.d.ts.map +1 -1
- package/dist/es6/header/lib/parts/WorkdayLogoTitle.js +26 -13
- package/dist/es6/header/lib/parts/index.d.ts +2 -3
- package/dist/es6/header/lib/parts/index.d.ts.map +1 -1
- package/dist/es6/header/lib/parts/index.js +2 -3
- package/dist/es6/header/lib/shared/themes.d.ts +28 -19
- package/dist/es6/header/lib/shared/themes.d.ts.map +1 -1
- package/dist/es6/header/lib/shared/themes.js +14 -37
- package/dist/es6/header/lib/shared/types.d.ts +3 -8
- package/dist/es6/header/lib/shared/types.d.ts.map +1 -1
- package/dist/es6/header/lib/shared/types.js +17 -23
- package/dist/es6/index.d.ts +1 -0
- package/dist/es6/index.d.ts.map +1 -1
- package/dist/es6/index.js +1 -0
- package/dist/es6/layout/lib/Stack.d.ts.map +1 -1
- package/dist/es6/layout/lib/Stack.js +1 -1
- package/dist/es6/layout/lib/utils/getValidChildren.d.ts +1 -1
- package/dist/es6/layout/lib/utils/getValidChildren.d.ts.map +1 -1
- package/dist/es6/search-form/index.d.ts +3 -0
- package/dist/es6/search-form/index.d.ts.map +1 -0
- package/dist/es6/search-form/index.js +2 -0
- package/{ts3.5/dist/commonjs/header/lib/parts/SearchBar.d.ts → dist/es6/search-form/lib/SearchForm.d.ts} +107 -103
- package/dist/es6/search-form/lib/SearchForm.d.ts.map +1 -0
- package/dist/es6/{header/lib/parts/SearchBar.js → search-form/lib/SearchForm.js} +16 -18
- package/dist/es6/search-form/lib/themes.d.ts +21 -0
- package/dist/es6/search-form/lib/themes.d.ts.map +1 -0
- package/dist/es6/search-form/lib/themes.js +39 -0
- package/header/README.md +37 -181
- package/header/index.ts +5 -5
- package/header/lib/GlobalHeader.tsx +26 -9
- package/header/lib/Header.tsx +58 -26
- package/header/lib/parts/DubLogoTitle.tsx +26 -9
- package/header/lib/parts/WorkdayLogoTitle.tsx +40 -11
- package/header/lib/parts/index.ts +2 -3
- package/header/lib/shared/themes.tsx +32 -56
- package/header/lib/shared/types.tsx +3 -9
- package/index.ts +1 -0
- package/layout/lib/Stack.tsx +3 -1
- package/package.json +5 -7
- package/search-form/LICENSE +52 -0
- package/search-form/README.md +6 -0
- package/search-form/index.ts +2 -0
- package/{header/lib/parts/SearchBar.tsx → search-form/lib/SearchForm.tsx} +40 -35
- package/search-form/lib/themes.ts +54 -0
- package/search-form/package.json +5 -0
- package/ts3.5/dist/commonjs/common/lib/theming/index.d.ts +1 -0
- package/ts3.5/dist/commonjs/common/lib/theming/useThemedRing.d.ts +11 -0
- package/ts3.5/dist/commonjs/header/index.d.ts +5 -5
- package/ts3.5/dist/commonjs/header/lib/GlobalHeader.d.ts +11 -2
- package/ts3.5/dist/commonjs/header/lib/Header.d.ts +17 -8
- package/ts3.5/dist/commonjs/header/lib/parts/DubLogoTitle.d.ts +13 -4
- package/ts3.5/dist/commonjs/header/lib/parts/WorkdayLogoTitle.d.ts +14 -5
- package/ts3.5/dist/commonjs/header/lib/parts/index.d.ts +2 -3
- package/ts3.5/dist/commonjs/header/lib/shared/themes.d.ts +28 -19
- package/ts3.5/dist/commonjs/header/lib/shared/types.d.ts +3 -8
- package/ts3.5/dist/commonjs/index.d.ts +1 -0
- package/ts3.5/dist/commonjs/layout/lib/utils/getValidChildren.d.ts +1 -1
- package/ts3.5/dist/commonjs/search-form/index.d.ts +3 -0
- package/ts3.5/dist/{es6/header/lib/parts/SearchBar.d.ts → commonjs/search-form/lib/SearchForm.d.ts} +27 -23
- package/ts3.5/dist/commonjs/search-form/lib/themes.d.ts +21 -0
- package/ts3.5/dist/es6/common/lib/theming/index.d.ts +1 -0
- package/ts3.5/dist/es6/common/lib/theming/useThemedRing.d.ts +11 -0
- package/ts3.5/dist/es6/header/index.d.ts +5 -5
- package/ts3.5/dist/es6/header/lib/GlobalHeader.d.ts +11 -2
- package/ts3.5/dist/es6/header/lib/Header.d.ts +17 -8
- package/ts3.5/dist/es6/header/lib/parts/DubLogoTitle.d.ts +13 -4
- package/ts3.5/dist/es6/header/lib/parts/WorkdayLogoTitle.d.ts +14 -5
- package/ts3.5/dist/es6/header/lib/parts/index.d.ts +2 -3
- package/ts3.5/dist/es6/header/lib/shared/themes.d.ts +28 -19
- package/ts3.5/dist/es6/header/lib/shared/types.d.ts +3 -8
- package/ts3.5/dist/es6/index.d.ts +1 -0
- package/ts3.5/dist/es6/layout/lib/utils/getValidChildren.d.ts +1 -1
- package/ts3.5/dist/es6/search-form/index.d.ts +3 -0
- package/{dist/es6/header/lib/parts/SearchBar.d.ts → ts3.5/dist/es6/search-form/lib/SearchForm.d.ts} +107 -103
- package/ts3.5/dist/es6/search-form/lib/themes.d.ts +21 -0
- package/dist/commonjs/header/lib/parts/SearchBar.d.ts.map +0 -1
- package/dist/es6/header/lib/parts/SearchBar.d.ts.map +0 -1
|
@@ -1,34 +1,32 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import {CSSObject} from '@emotion/core';
|
|
3
3
|
import {colors, space, spaceNumbers} from '@workday/canvas-kit-react/tokens';
|
|
4
|
-
import {GrowthBehavior, styled} from '@workday/canvas-kit-react/common';
|
|
4
|
+
import {GrowthBehavior, styled, generateUniqueId} from '@workday/canvas-kit-react/common';
|
|
5
5
|
import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
|
|
6
6
|
import {searchIcon, xIcon} from '@workday/canvas-system-icons-web';
|
|
7
7
|
import {FormField, FormFieldLabelPosition} from '@workday/canvas-kit-react/form-field';
|
|
8
8
|
import {Combobox} from '@workday/canvas-kit-labs-react/combobox';
|
|
9
9
|
import {TextInput} from '@workday/canvas-kit-react/text-input';
|
|
10
10
|
import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
|
|
11
|
-
import {SearchThemeAttributes, searchThemes} from '
|
|
12
|
-
import {SearchTheme} from '../shared/types';
|
|
11
|
+
import {SearchThemeAttributes, searchThemes, SearchTheme} from './themes';
|
|
13
12
|
import chroma from 'chroma-js';
|
|
14
|
-
import uuid from 'uuid/v4';
|
|
15
13
|
|
|
16
|
-
export interface
|
|
14
|
+
export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
|
|
17
15
|
/**
|
|
18
|
-
* The function called when the
|
|
16
|
+
* The function called when the SearchForm form is submitted. The current input value is passed to the callback function.
|
|
19
17
|
*/
|
|
20
18
|
onSubmit: React.FormEventHandler<HTMLFormElement>;
|
|
21
19
|
/**
|
|
22
|
-
* If true, collapse the
|
|
20
|
+
* If true, collapse the SearchForm text input into a toggle icon. Useful for responsive layouts.
|
|
23
21
|
* @default false
|
|
24
22
|
*/
|
|
25
23
|
isCollapsed?: boolean;
|
|
26
24
|
/**
|
|
27
|
-
* The function called when the
|
|
25
|
+
* The function called when the SearchForm text input changes.
|
|
28
26
|
*/
|
|
29
27
|
onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
30
28
|
/**
|
|
31
|
-
* The autocomplete items of the
|
|
29
|
+
* The autocomplete items of the SearchForm. This array of menu items is shown under the search bar.
|
|
32
30
|
*/
|
|
33
31
|
autocompleteItems?: React.ReactElement<MenuItemProps>[];
|
|
34
32
|
/**
|
|
@@ -36,57 +34,62 @@ export interface SearchBarProps extends GrowthBehavior, React.FormHTMLAttributes
|
|
|
36
34
|
*/
|
|
37
35
|
searchTheme?: SearchTheme | SearchThemeAttributes;
|
|
38
36
|
/**
|
|
39
|
-
* The placeholder text of the
|
|
37
|
+
* The placeholder text of the SearchForm text input.
|
|
40
38
|
* @default Search
|
|
41
39
|
*/
|
|
42
40
|
placeholder?: string;
|
|
43
41
|
/**
|
|
44
|
-
* The initial value of the
|
|
42
|
+
* The initial value of the SearchForm text input.
|
|
45
43
|
*/
|
|
46
44
|
initialValue?: string;
|
|
47
45
|
/**
|
|
48
|
-
* If true, right-align the
|
|
46
|
+
* If true, right-align the SearchForm. If false, the text input should grow to left-align the SearchForm.
|
|
49
47
|
* @default false
|
|
50
48
|
*/
|
|
51
49
|
rightAlign?: boolean;
|
|
52
50
|
/**
|
|
53
|
-
* The screenreader label text for the
|
|
51
|
+
* The screenreader label text for the SearchForm text input.
|
|
54
52
|
* @default Search
|
|
55
53
|
*/
|
|
56
54
|
inputLabel?: string;
|
|
57
55
|
/**
|
|
58
|
-
* The screenreader label text for the
|
|
56
|
+
* The screenreader label text for the SearchForm submit button.
|
|
59
57
|
* @default Search
|
|
60
58
|
*/
|
|
61
59
|
submitAriaLabel?: string;
|
|
62
60
|
/**
|
|
63
|
-
* The screenreader label text for the
|
|
61
|
+
* The screenreader label text for the SearchForm clear button.
|
|
64
62
|
* @default Reset Search Form
|
|
65
63
|
*/
|
|
66
64
|
clearButtonAriaLabel?: string;
|
|
67
65
|
/**
|
|
68
|
-
* The screenreader label text for the button to open the collapsed
|
|
66
|
+
* The screenreader label text for the button to open the collapsed SearchForm.
|
|
69
67
|
* @default Open Search
|
|
70
68
|
*/
|
|
71
69
|
openButtonAriaLabel?: string;
|
|
72
70
|
/**
|
|
73
|
-
* The screenreader label text for the button to close the open
|
|
71
|
+
* The screenreader label text for the button to close the open SearchForm.
|
|
74
72
|
* @default Cancel
|
|
75
73
|
*/
|
|
76
74
|
closeButtonAriaLabel?: string;
|
|
77
75
|
/**
|
|
78
|
-
* If true, render the
|
|
76
|
+
* If true, render the SearchForm with a button to clear the text input.
|
|
79
77
|
* @default true
|
|
80
78
|
*/
|
|
81
79
|
showClearButton?: boolean;
|
|
82
80
|
/**
|
|
83
|
-
* Height of the Search
|
|
84
|
-
* @default
|
|
81
|
+
* Height of the Search Form in pixels
|
|
82
|
+
* @default 40
|
|
85
83
|
*/
|
|
86
84
|
height?: number;
|
|
85
|
+
/**
|
|
86
|
+
* If true, allow onSubmit being called when input value is empty.
|
|
87
|
+
* @default false
|
|
88
|
+
*/
|
|
89
|
+
allowEmptyStringSearch?: boolean;
|
|
87
90
|
}
|
|
88
91
|
|
|
89
|
-
export interface
|
|
92
|
+
export interface SearchFormState {
|
|
90
93
|
showForm: boolean;
|
|
91
94
|
searchQuery: string;
|
|
92
95
|
isFocused: boolean;
|
|
@@ -110,8 +113,8 @@ const formCollapsedBackground = colors.frenchVanilla100;
|
|
|
110
113
|
const maxWidth = 480;
|
|
111
114
|
const minWidth = 120;
|
|
112
115
|
|
|
113
|
-
const
|
|
114
|
-
Pick<
|
|
116
|
+
const StyledSearchForm = styled('form')<
|
|
117
|
+
Pick<SearchFormProps, 'isCollapsed' | 'rightAlign' | 'grow'> & Pick<SearchFormState, 'showForm'>
|
|
115
118
|
>(
|
|
116
119
|
{
|
|
117
120
|
position: 'relative',
|
|
@@ -148,7 +151,7 @@ const SearchForm = styled('form')<
|
|
|
148
151
|
}
|
|
149
152
|
);
|
|
150
153
|
|
|
151
|
-
const SearchContainer = styled('div')<Pick<
|
|
154
|
+
const SearchContainer = styled('div')<Pick<SearchFormProps, 'height'>>(
|
|
152
155
|
{
|
|
153
156
|
position: `relative`,
|
|
154
157
|
display: 'flex',
|
|
@@ -166,7 +169,7 @@ const SearchCombobox = styled(Combobox)({
|
|
|
166
169
|
width: `100%`,
|
|
167
170
|
});
|
|
168
171
|
|
|
169
|
-
const SearchIcon = styled(IconButton)<Pick<
|
|
172
|
+
const SearchIcon = styled(IconButton)<Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}>(
|
|
170
173
|
({isCollapsed, isHidden}) => {
|
|
171
174
|
const collapsedSize = 40;
|
|
172
175
|
const size = 32;
|
|
@@ -199,7 +202,7 @@ const SearchIcon = styled(IconButton)<Pick<SearchBarProps, 'isCollapsed'> & {isH
|
|
|
199
202
|
);
|
|
200
203
|
|
|
201
204
|
const CloseButton = styled(IconButton)<
|
|
202
|
-
Pick<
|
|
205
|
+
Pick<SearchFormProps, 'isCollapsed'> & Pick<SearchFormState, 'showForm'>
|
|
203
206
|
>(({isCollapsed, showForm}) => {
|
|
204
207
|
const collapseStyles: CSSObject =
|
|
205
208
|
isCollapsed && showForm
|
|
@@ -222,7 +225,7 @@ const CloseButton = styled(IconButton)<
|
|
|
222
225
|
});
|
|
223
226
|
|
|
224
227
|
const SearchField = styled(FormField)<
|
|
225
|
-
Pick<
|
|
228
|
+
Pick<SearchFormProps, 'isCollapsed' | 'grow' | 'height'> & Pick<SearchFormState, 'showForm'>
|
|
226
229
|
>(({isCollapsed, showForm, grow, height}) => {
|
|
227
230
|
return {
|
|
228
231
|
display: (isCollapsed && showForm) || !isCollapsed ? 'inline-block' : 'none',
|
|
@@ -237,7 +240,7 @@ const SearchField = styled(FormField)<
|
|
|
237
240
|
});
|
|
238
241
|
|
|
239
242
|
const SearchInput = styled(TextInput)<
|
|
240
|
-
Pick<
|
|
243
|
+
Pick<SearchFormProps, 'isCollapsed' | 'grow' | 'height'> & {
|
|
241
244
|
inputColors: ReturnType<typeof getInputColors>;
|
|
242
245
|
}
|
|
243
246
|
>(({isCollapsed, inputColors, grow, height}) => {
|
|
@@ -289,14 +292,14 @@ const SearchInput = styled(TextInput)<
|
|
|
289
292
|
};
|
|
290
293
|
});
|
|
291
294
|
|
|
292
|
-
export class
|
|
295
|
+
export class SearchForm extends React.Component<SearchFormProps, SearchFormState> {
|
|
293
296
|
static Theme = SearchTheme;
|
|
294
297
|
|
|
295
298
|
private inputRef = React.createRef<HTMLInputElement>();
|
|
296
299
|
private openRef = React.createRef<HTMLButtonElement>();
|
|
297
|
-
private labelId =
|
|
300
|
+
private labelId = generateUniqueId();
|
|
298
301
|
|
|
299
|
-
state: Readonly<
|
|
302
|
+
state: Readonly<SearchFormState> = {
|
|
300
303
|
showForm: false,
|
|
301
304
|
searchQuery: '',
|
|
302
305
|
isFocused: false,
|
|
@@ -333,7 +336,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
|
|
|
333
336
|
|
|
334
337
|
handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
|
|
335
338
|
event.preventDefault();
|
|
336
|
-
if (this.state.searchQuery.trim()) {
|
|
339
|
+
if (this.props.allowEmptyStringSearch || this.state.searchQuery.trim()) {
|
|
337
340
|
this.props.onSubmit(event);
|
|
338
341
|
} else {
|
|
339
342
|
this.focusInput();
|
|
@@ -352,7 +355,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
|
|
|
352
355
|
}
|
|
353
356
|
};
|
|
354
357
|
|
|
355
|
-
componentDidUpdate(prevProps:
|
|
358
|
+
componentDidUpdate(prevProps: SearchFormProps, prevState: SearchFormState) {
|
|
356
359
|
const showFormToggled = this.state.showForm !== prevState.showForm;
|
|
357
360
|
if (showFormToggled) {
|
|
358
361
|
if (this.state.showForm) {
|
|
@@ -409,11 +412,12 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
|
|
|
409
412
|
initialValue,
|
|
410
413
|
searchTheme,
|
|
411
414
|
rightAlign,
|
|
415
|
+
allowEmptyStringSearch = false,
|
|
412
416
|
...elemProps
|
|
413
417
|
} = this.props;
|
|
414
418
|
|
|
415
419
|
return (
|
|
416
|
-
<
|
|
420
|
+
<StyledSearchForm
|
|
417
421
|
role="search"
|
|
418
422
|
action="."
|
|
419
423
|
rightAlign={rightAlign}
|
|
@@ -473,6 +477,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
|
|
|
473
477
|
inputColors={this.getThemeColors()}
|
|
474
478
|
height={height}
|
|
475
479
|
name="search"
|
|
480
|
+
autoComplete="off"
|
|
476
481
|
/>
|
|
477
482
|
</SearchCombobox>
|
|
478
483
|
</SearchField>
|
|
@@ -486,7 +491,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
|
|
|
486
491
|
type="button"
|
|
487
492
|
/>
|
|
488
493
|
</SearchContainer>
|
|
489
|
-
</
|
|
494
|
+
</StyledSearchForm>
|
|
490
495
|
);
|
|
491
496
|
}
|
|
492
497
|
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import {focusRing} from '@workday/canvas-kit-react/common';
|
|
2
|
+
import {colors} from '@workday/canvas-kit-react/tokens';
|
|
3
|
+
|
|
4
|
+
export enum SearchTheme {
|
|
5
|
+
Light,
|
|
6
|
+
Dark,
|
|
7
|
+
Transparent,
|
|
8
|
+
}
|
|
9
|
+
export interface SearchThemeAttributes {
|
|
10
|
+
background?: string;
|
|
11
|
+
backgroundFocus?: string;
|
|
12
|
+
backgroundHover?: string;
|
|
13
|
+
color?: string;
|
|
14
|
+
colorFocus?: string;
|
|
15
|
+
placeholderColor?: string;
|
|
16
|
+
placeholderColorFocus?: string;
|
|
17
|
+
boxShadow?: string | string[];
|
|
18
|
+
boxShadowFocus?: string | string[];
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export interface SearchThemes {
|
|
22
|
+
[key: string]: SearchThemeAttributes;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export const searchThemes: SearchThemes = {
|
|
26
|
+
[SearchTheme.Transparent]: {
|
|
27
|
+
background: 'rgba(0, 0, 0, 0)',
|
|
28
|
+
backgroundFocus: 'rgba(0, 0, 0, 0)',
|
|
29
|
+
color: colors.blackPepper300,
|
|
30
|
+
colorFocus: colors.blackPepper300,
|
|
31
|
+
placeholderColor: colors.licorice300,
|
|
32
|
+
placeholderColorFocus: colors.licorice300,
|
|
33
|
+
boxShadow: 'none',
|
|
34
|
+
boxShadowFocus: 'none',
|
|
35
|
+
},
|
|
36
|
+
[SearchTheme.Light]: {
|
|
37
|
+
background: colors.soap200,
|
|
38
|
+
backgroundFocus: colors.soap200,
|
|
39
|
+
backgroundHover: colors.soap300,
|
|
40
|
+
color: colors.blackPepper300,
|
|
41
|
+
placeholderColor: colors.licorice300,
|
|
42
|
+
boxShadow: 'none',
|
|
43
|
+
boxShadowFocus: focusRing().boxShadow,
|
|
44
|
+
},
|
|
45
|
+
[SearchTheme.Dark]: {
|
|
46
|
+
background: 'rgba(0, 0, 0, 0.2)',
|
|
47
|
+
backgroundFocus: colors.frenchVanilla100,
|
|
48
|
+
color: colors.frenchVanilla100,
|
|
49
|
+
colorFocus: colors.blackPepper300,
|
|
50
|
+
placeholderColor: colors.frenchVanilla100,
|
|
51
|
+
placeholderColorFocus: colors.licorice300,
|
|
52
|
+
boxShadow: 'none',
|
|
53
|
+
},
|
|
54
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
|
|
2
|
+
import { CSSProperties } from '@workday/canvas-kit-react/tokens';
|
|
3
|
+
declare type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
|
|
4
|
+
interface ContrastColors {
|
|
5
|
+
outer?: string;
|
|
6
|
+
inner?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): ContrastColors;
|
|
9
|
+
export declare const useThemedRing: (type: "alert" | "error" | "primary" | "success" | "neutral") => CSSProperties;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=useThemedRing.d.ts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
export default
|
|
4
|
-
export {
|
|
5
|
-
export {
|
|
1
|
+
import DeprecatedHeader from './lib/Header';
|
|
2
|
+
import DeprecatedGlobalHeader from './lib/GlobalHeader';
|
|
3
|
+
export default DeprecatedHeader;
|
|
4
|
+
export { DeprecatedHeader };
|
|
5
|
+
export { DeprecatedGlobalHeader };
|
|
6
6
|
export * from './lib/parts';
|
|
7
7
|
export * from './lib/shared/themes';
|
|
8
8
|
export * from './lib/shared/types';
|
|
@@ -19,11 +19,20 @@ export interface GlobalHeaderProps {
|
|
|
19
19
|
*/
|
|
20
20
|
isCollapsed?: boolean;
|
|
21
21
|
/**
|
|
22
|
-
* The React element to render in the left slot of the GlobalHeader. This is typically a
|
|
22
|
+
* The React element to render in the left slot of the GlobalHeader. This is typically a SearchForm component.
|
|
23
23
|
*/
|
|
24
24
|
leftSlot?: React.ReactElement;
|
|
25
25
|
}
|
|
26
|
-
|
|
26
|
+
/**
|
|
27
|
+
* ### Deprecated Global Header
|
|
28
|
+
*
|
|
29
|
+
* As of Canvas Kit v6, this component is being soft-deprecated.
|
|
30
|
+
* It will be hard-deprecated (completely removed) in v7. Please see the
|
|
31
|
+
* [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
|
|
32
|
+
* for more information.
|
|
33
|
+
*/
|
|
34
|
+
export default class DeprecatedGlobalHeader extends React.Component<GlobalHeaderProps> {
|
|
35
|
+
componentDidMount(): void;
|
|
27
36
|
render(): JSX.Element;
|
|
28
37
|
}
|
|
29
38
|
//# sourceMappingURL=GlobalHeader.d.ts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { DeprecatedHeaderTheme, DeprecatedHeaderVariant } from './shared/types';
|
|
3
3
|
export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
4
|
/**
|
|
5
5
|
* The custom menu toggle node of the Header. This React node replaces the default menu toggle.
|
|
@@ -7,14 +7,14 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
7
7
|
menuToggle?: React.ReactNode;
|
|
8
8
|
/**
|
|
9
9
|
* The theme of the Header. Accepts `White`, `Blue`, or `Transparent`.
|
|
10
|
-
* @default
|
|
10
|
+
* @default DeprecatedHeaderTheme.White
|
|
11
11
|
*/
|
|
12
|
-
themeColor?:
|
|
12
|
+
themeColor?: DeprecatedHeaderTheme;
|
|
13
13
|
/**
|
|
14
14
|
* The variant of the Header. Accepts `Dub` (small) or `Full` (large).
|
|
15
|
-
* @default
|
|
15
|
+
* @default DeprecatedHeaderVariant.Dub
|
|
16
16
|
*/
|
|
17
|
-
variant?:
|
|
17
|
+
variant?: DeprecatedHeaderVariant;
|
|
18
18
|
/**
|
|
19
19
|
* The text of the Header title. Not used if `brand` is provided.
|
|
20
20
|
*/
|
|
@@ -37,7 +37,7 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
37
37
|
*/
|
|
38
38
|
onMenuClick?: (e: React.MouseEvent) => void;
|
|
39
39
|
/**
|
|
40
|
-
* The React element to render in the left slot of the Header. This is typically a
|
|
40
|
+
* The React element to render in the left slot of the Header. This is typically a SearchForm component.
|
|
41
41
|
*/
|
|
42
42
|
leftSlot?: React.ReactElement;
|
|
43
43
|
/**
|
|
@@ -46,9 +46,18 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
46
46
|
*/
|
|
47
47
|
isCollapsed?: boolean;
|
|
48
48
|
}
|
|
49
|
+
/**
|
|
50
|
+
* ### Deprecated Header
|
|
51
|
+
*
|
|
52
|
+
* As of Canvas Kit v6, this component is being soft-deprecated.
|
|
53
|
+
* It will be hard-deprecated (completely removed) in v7. Please see the
|
|
54
|
+
* [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
|
|
55
|
+
* for more information.
|
|
56
|
+
*/
|
|
49
57
|
export default class Header extends React.Component<HeaderProps, {}> {
|
|
50
|
-
static Theme: typeof
|
|
51
|
-
static Variant: typeof
|
|
58
|
+
static Theme: typeof DeprecatedHeaderTheme;
|
|
59
|
+
static Variant: typeof DeprecatedHeaderVariant;
|
|
60
|
+
componentDidMount(): void;
|
|
52
61
|
/**
|
|
53
62
|
* Helper that recursively maps ReactNodes to their theme-based equivalent.
|
|
54
63
|
* Any children that are included in a Header may need to undergo transformation
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { DeprecatedHeaderTheme } from '../shared/types';
|
|
3
3
|
export declare type DubTitleProps = {
|
|
4
4
|
/**
|
|
5
5
|
* The theme of the DubLogoTitle. Accepts `White`, `Blue`, or `Transparent`.
|
|
6
|
-
* @default
|
|
6
|
+
* @default DeprecatedHeaderTheme.White
|
|
7
7
|
*/
|
|
8
|
-
themeColor?:
|
|
8
|
+
themeColor?: DeprecatedHeaderTheme;
|
|
9
9
|
/**
|
|
10
10
|
* The text of the DubLogoTitle. Not used if `brand` is provided.
|
|
11
11
|
*/
|
|
@@ -15,7 +15,16 @@ export declare type DubTitleProps = {
|
|
|
15
15
|
*/
|
|
16
16
|
bgColor?: string;
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
/**
|
|
19
|
+
* ### Deprecated Dub Logo Title
|
|
20
|
+
*
|
|
21
|
+
* As of Canvas Kit v6, this component is being soft-deprecated.
|
|
22
|
+
* It will be hard-deprecated (completely removed) in v7. Please see the
|
|
23
|
+
* [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
|
|
24
|
+
* for more information.
|
|
25
|
+
*/
|
|
26
|
+
export declare class DeprecatedDubLogoTitle extends React.Component<DubTitleProps> {
|
|
27
|
+
componentDidMount(): void;
|
|
19
28
|
render(): JSX.Element;
|
|
20
29
|
}
|
|
21
30
|
//# sourceMappingURL=DubLogoTitle.d.ts.map
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { DeprecatedHeaderTheme, DeprecatedHeaderVariant } from '../shared/types';
|
|
3
3
|
export declare type WorkdayLogoTitleProps = {
|
|
4
4
|
/**
|
|
5
5
|
* The theme of the WorkdayLogoTitle. Accepts `White`, `Blue`, or `Transparent`.
|
|
6
|
-
* @default
|
|
6
|
+
* @default DeprecatedHeaderTheme.White
|
|
7
7
|
*/
|
|
8
|
-
themeColor?:
|
|
8
|
+
themeColor?: DeprecatedHeaderTheme;
|
|
9
9
|
/**
|
|
10
10
|
* The text of the WorkdayLogoTitle. Not used if `brand` is provided.
|
|
11
11
|
* @default ''
|
|
@@ -14,9 +14,18 @@ export declare type WorkdayLogoTitleProps = {
|
|
|
14
14
|
/**
|
|
15
15
|
* The variant of the WorkdayLogoTitle.
|
|
16
16
|
*/
|
|
17
|
-
variant?:
|
|
17
|
+
variant?: DeprecatedHeaderVariant;
|
|
18
18
|
};
|
|
19
|
-
|
|
19
|
+
/**
|
|
20
|
+
* ### Deprecated Workday Logo Title
|
|
21
|
+
*
|
|
22
|
+
* As of Canvas Kit v6, this component is being soft-deprecated.
|
|
23
|
+
* It will be hard-deprecated (completely removed) in v7. Please see the
|
|
24
|
+
* [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
|
|
25
|
+
* for more information.
|
|
26
|
+
*/
|
|
27
|
+
export declare class DeprecatedWorkdayLogoTitle extends React.Component<WorkdayLogoTitleProps> {
|
|
28
|
+
componentDidMount(): void;
|
|
20
29
|
render(): JSX.Element;
|
|
21
30
|
}
|
|
22
31
|
//# sourceMappingURL=WorkdayLogoTitle.d.ts.map
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
3
|
-
export { WorkdayLogoTitle } from './WorkdayLogoTitle';
|
|
1
|
+
export { DeprecatedDubLogoTitle } from './DubLogoTitle';
|
|
2
|
+
export { DeprecatedWorkdayLogoTitle } from './WorkdayLogoTitle';
|
|
4
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import { CSSProperties } from '@workday/canvas-kit-react/tokens';
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* ### Deprecated Header Theme Attributes Interface
|
|
4
|
+
*
|
|
5
|
+
* As of Canvas Kit v6, this type interface is being soft-deprecated along with the rest of the labs/header package.
|
|
6
|
+
* It will be hard-deprecated (completely removed) in v7. Please see the
|
|
7
|
+
* [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
|
|
8
|
+
* for more information.
|
|
9
|
+
*/
|
|
10
|
+
export interface DeprecatedHeaderThemeAttributes {
|
|
3
11
|
color: string;
|
|
4
12
|
background: string;
|
|
5
13
|
depth: CSSProperties;
|
|
@@ -12,23 +20,24 @@ export interface ThemeAttributes {
|
|
|
12
20
|
currentLinkColor: string;
|
|
13
21
|
chipColor: string;
|
|
14
22
|
}
|
|
15
|
-
|
|
16
|
-
|
|
23
|
+
/**
|
|
24
|
+
* ### Deprecated Header Themes Interface
|
|
25
|
+
*
|
|
26
|
+
* As of Canvas Kit v6, this type interface is being soft-deprecated along with the rest of the labs/header package.
|
|
27
|
+
* It will be hard-deprecated (completely removed) in v7. Please see the
|
|
28
|
+
* [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
|
|
29
|
+
* for more information.
|
|
30
|
+
*/
|
|
31
|
+
export interface DeprecatedHeaderThemes {
|
|
32
|
+
[key: string]: DeprecatedHeaderThemeAttributes;
|
|
17
33
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
boxShadow?: string | string[];
|
|
28
|
-
boxShadowFocus?: string | string[];
|
|
29
|
-
}
|
|
30
|
-
export interface SearchThemes {
|
|
31
|
-
[key: string]: SearchThemeAttributes;
|
|
32
|
-
}
|
|
33
|
-
export declare const searchThemes: SearchThemes;
|
|
34
|
+
/**
|
|
35
|
+
* ### Deprecated Header Themes
|
|
36
|
+
*
|
|
37
|
+
* As of Canvas Kit v6, this theme object is being soft-deprecated along with the rest of the labs/header package.
|
|
38
|
+
* It will be hard-deprecated (completely removed) in v7. Please see the
|
|
39
|
+
* [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
|
|
40
|
+
* for more information.
|
|
41
|
+
*/
|
|
42
|
+
export declare const deprecatedHeaderThemes: DeprecatedHeaderThemes;
|
|
34
43
|
//# sourceMappingURL=themes.d.ts.map
|
|
@@ -1,20 +1,15 @@
|
|
|
1
|
-
export declare enum
|
|
1
|
+
export declare enum DeprecatedHeaderTheme {
|
|
2
2
|
White = 0,
|
|
3
3
|
Blue = 1,
|
|
4
4
|
Transparent = 2
|
|
5
5
|
}
|
|
6
|
-
export declare enum
|
|
6
|
+
export declare enum DeprecatedHeaderVariant {
|
|
7
7
|
Dub = 0,
|
|
8
8
|
Full = 1,
|
|
9
9
|
Global = 2
|
|
10
10
|
}
|
|
11
|
-
export declare enum
|
|
11
|
+
export declare enum DeprecatedHeaderHeight {
|
|
12
12
|
Small = "64px",
|
|
13
13
|
Large = "80px"
|
|
14
14
|
}
|
|
15
|
-
export declare enum SearchTheme {
|
|
16
|
-
Light = 0,
|
|
17
|
-
Dark = 1,
|
|
18
|
-
Transparent = 2
|
|
19
|
-
}
|
|
20
15
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
export declare function getValidChildren(children: React.ReactNode): React.ReactElement<any, string | ((props: any) => React.ReactElement<any,
|
|
2
|
+
export declare function getValidChildren(children: React.ReactNode): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>[];
|
|
3
3
|
//# sourceMappingURL=getValidChildren.d.ts.map
|