@workday/canvas-kit-labs-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.78-next.6

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.
Files changed (23) hide show
  1. package/combobox/README.md +1 -1
  2. package/combobox/lib/Combobox.tsx +6 -10
  3. package/dist/commonjs/combobox/lib/Combobox.d.ts +3 -4
  4. package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -1
  5. package/dist/commonjs/combobox/lib/Combobox.js +3 -6
  6. package/dist/commonjs/drawer/lib/DrawerHeader.js +2 -2
  7. package/dist/commonjs/search-form/lib/SearchForm.d.ts +7 -2
  8. package/dist/commonjs/search-form/lib/SearchForm.d.ts.map +1 -1
  9. package/dist/commonjs/search-form/lib/SearchForm.js +16 -22
  10. package/dist/es6/combobox/lib/Combobox.d.ts +3 -4
  11. package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -1
  12. package/dist/es6/combobox/lib/Combobox.js +4 -7
  13. package/dist/es6/drawer/lib/DrawerHeader.js +3 -3
  14. package/dist/es6/search-form/lib/SearchForm.d.ts +7 -2
  15. package/dist/es6/search-form/lib/SearchForm.d.ts.map +1 -1
  16. package/dist/es6/search-form/lib/SearchForm.js +17 -23
  17. package/drawer/lib/DrawerHeader.tsx +3 -3
  18. package/package.json +4 -4
  19. package/search-form/lib/SearchForm.tsx +25 -37
  20. package/ts3.5/dist/commonjs/combobox/lib/Combobox.d.ts +3 -4
  21. package/ts3.5/dist/commonjs/search-form/lib/SearchForm.d.ts +7 -2
  22. package/ts3.5/dist/es6/combobox/lib/Combobox.d.ts +3 -4
  23. package/ts3.5/dist/es6/search-form/lib/SearchForm.d.ts +7 -2
package/combobox/README.md CHANGED
@@ -68,7 +68,7 @@ const autocompleteCallback = event => console.log('Adjust menu items here')
68
68
 
69
69
  ---
70
70
 
71
- #### `clearButtonVariant: IconButtonProps['variant']`
71
+ #### `clearButtonVariant: TertiaryButtonProps['variant']`
72
72
 
73
73
  > The type of icon button to use for clearing input.
74
74
 
package/combobox/lib/Combobox.tsx CHANGED
@@ -10,7 +10,7 @@ import {
10
10
  import {space, commonColors, borderRadius} from '@workday/canvas-kit-react/tokens';
11
11
  import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
12
12
  import {Card} from '@workday/canvas-kit-react/card';
13
- import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
13
+ import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
14
14
  import {xSmallIcon} from '@workday/canvas-system-icons-web';
15
15
  import {TextInputProps} from '@workday/canvas-kit-react/text-input';
16
16
  import flatten from 'lodash.flatten';
@@ -34,10 +34,9 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
34
34
  */
35
35
  initialValue?: string;
36
36
  /**
37
- * The variant of the Combobox clear button.
38
- * @default IconButton.Variant.Plain
37
+ * The variant of the Combobox clear button. The default is a TertiaryButton
39
38
  */
40
- clearButtonVariant?: IconButtonProps['variant'];
39
+ clearButtonVariant?: TertiaryButtonProps['variant'];
41
40
  /**
42
41
  * If true, render the Combobox with a button to clear the text input.
43
42
  * @default false
@@ -113,11 +112,8 @@ const MenuContainer = styled(Card)({
113
112
  maxHeight: 200,
114
113
  });
115
114
 
116
- const ResetButton = styled(IconButton)<{shouldShow: boolean}>(
115
+ const ResetButton = styled(TertiaryButton)<{shouldShow: boolean}>(
117
116
  {
118
- width: space.l,
119
- minWidth: space.l,
120
- height: space.l,
121
117
  position: 'absolute',
122
118
  margin: `auto ${space.xxxs}`,
123
119
  top: 0,
@@ -173,7 +169,7 @@ const Combobox = ({
173
169
  onFocus,
174
170
  onBlur,
175
171
  showClearButton,
176
- clearButtonVariant = 'plain',
172
+ clearButtonVariant = undefined,
177
173
  clearButtonAriaLabel = `Reset Search Input`,
178
174
  labelId,
179
175
  getStatusText = buildStatusString,
@@ -469,9 +465,9 @@ const Combobox = ({
469
465
  aria-label={clearButtonAriaLabel}
470
466
  icon={xSmallIcon}
471
467
  variant={clearButtonVariant}
472
- toggled={undefined}
473
468
  onClick={resetSearchInput}
474
469
  onBlur={handleBlur}
470
+ size="small"
475
471
  type="button"
476
472
  />
477
473
  )}
package/dist/commonjs/combobox/lib/Combobox.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { GrowthBehavior } from '@workday/canvas-kit-react/common';
3
3
  import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
4
- import { IconButtonProps } from '@workday/canvas-kit-react/button';
4
+ import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
5
5
  import { TextInputProps } from '@workday/canvas-kit-react/text-input';
6
6
  export interface ComboBoxMenuItemGroup {
7
7
  header: React.ReactElement<MenuItemProps>;
@@ -17,10 +17,9 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
17
17
  */
18
18
  initialValue?: string;
19
19
  /**
20
- * The variant of the Combobox clear button.
21
- * @default IconButton.Variant.Plain
20
+ * The variant of the Combobox clear button. The default is a TertiaryButton
22
21
  */
23
- clearButtonVariant?: IconButtonProps['variant'];
22
+ clearButtonVariant?: TertiaryButtonProps['variant'];
24
23
  /**
25
24
  * If true, render the Combobox with a button to clear the text input.
26
25
  * @default false
package/dist/commonjs/combobox/lib/Combobox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF,QAAA,MAAM,QAAQ,wLAeX,aAAa,gBA0Tf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAErF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACpD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA0DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF,QAAA,MAAM,QAAQ,wLAeX,aAAa,gBA0Tf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
package/dist/commonjs/combobox/lib/Combobox.js CHANGED
@@ -90,10 +90,7 @@ var MenuContainer = common_1.styled(card_1.Card)({
90
90
  animation: fadeInKeyframes + " 200ms ease-out",
91
91
  maxHeight: 200,
92
92
  });
93
- var ResetButton = common_1.styled(button_1.IconButton)({
94
- width: tokens_1.space.l,
95
- minWidth: tokens_1.space.l,
96
- height: tokens_1.space.l,
93
+ var ResetButton = common_1.styled(button_1.TertiaryButton)({
97
94
  position: 'absolute',
98
95
  margin: "auto " + tokens_1.space.xxxs,
99
96
  top: 0,
@@ -141,7 +138,7 @@ var isValidSingleChild = function (child) {
141
138
  return react_1.default.isValidElement(child) && react_1.default.Children.only(child);
142
139
  };
143
140
  var Combobox = function (_a) {
144
- var autocompleteItems = _a.autocompleteItems, children = _a.children, grow = _a.grow, initialValue = _a.initialValue, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, showClearButton = _a.showClearButton, _b = _a.clearButtonVariant, clearButtonVariant = _b === void 0 ? 'plain' : _b, _c = _a.clearButtonAriaLabel, clearButtonAriaLabel = _c === void 0 ? "Reset Search Input" : _c, labelId = _a.labelId, _d = _a.getStatusText, getStatusText = _d === void 0 ? buildStatusString : _d, id = _a.id, elemProps = __rest(_a, ["autocompleteItems", "children", "grow", "initialValue", "onChange", "onFocus", "onBlur", "showClearButton", "clearButtonVariant", "clearButtonAriaLabel", "labelId", "getStatusText", "id"]);
141
+ var autocompleteItems = _a.autocompleteItems, children = _a.children, grow = _a.grow, initialValue = _a.initialValue, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, showClearButton = _a.showClearButton, _b = _a.clearButtonVariant, clearButtonVariant = _b === void 0 ? undefined : _b, _c = _a.clearButtonAriaLabel, clearButtonAriaLabel = _c === void 0 ? "Reset Search Input" : _c, labelId = _a.labelId, _d = _a.getStatusText, getStatusText = _d === void 0 ? buildStatusString : _d, id = _a.id, elemProps = __rest(_a, ["autocompleteItems", "children", "grow", "initialValue", "onChange", "onFocus", "onBlur", "showClearButton", "clearButtonVariant", "clearButtonAriaLabel", "labelId", "getStatusText", "id"]);
145
142
  var _e = react_1.useState(false), isOpened = _e[0], setIsOpened = _e[1];
146
143
  var _f = react_1.useState(''), value = _f[0], _setValue = _f[1]; // Don't call _setValue directly instead call setInputValue to make sure onChange fires correctly
147
144
  var _g = react_1.useState(false), showingAutocomplete = _g[0], setShowingAutocomplete = _g[1];
@@ -366,7 +363,7 @@ var Combobox = function (_a) {
366
363
  return (react_1.default.createElement(Container, __assign({ grow: grow }, elemProps),
367
364
  react_1.default.createElement(InputContainer, { ref: comboboxRef },
368
365
  isValidSingleChild(children) && react_1.default.Children.map(children, renderChildren),
369
- showClearButton && (react_1.default.createElement(ResetButton, { shouldShow: !!value, "aria-label": clearButtonAriaLabel, icon: canvas_system_icons_web_1.xSmallIcon, variant: clearButtonVariant, toggled: undefined, onClick: resetSearchInput, onBlur: handleBlur, type: "button" })),
366
+ showClearButton && (react_1.default.createElement(ResetButton, { shouldShow: !!value, "aria-label": clearButtonAriaLabel, icon: canvas_system_icons_web_1.xSmallIcon, variant: clearButtonVariant, onClick: resetSearchInput, onBlur: handleBlur, size: "small", type: "button" })),
370
367
  showingAutocomplete && autocompleteItems && (react_1.default.createElement(MenuContainer, { padding: tokens_1.space.zero, depth: 1 },
371
368
  react_1.default.createElement(card_1.Card.Body, null,
372
369
  react_1.default.createElement(AutocompleteList_1.default, { comboboxId: componentId, autocompleteItems: autocompleteItems, selectedIndex: selectedAutocompleteIndex, handleAutocompleteClick: handleAutocompleteClick, labelId: formLabelId, showGroupText: showGroupText }))))),
package/dist/commonjs/drawer/lib/DrawerHeader.js CHANGED
@@ -86,7 +86,7 @@ var HeaderTitle = styled_1.default('h4')(__assign(__assign({}, tokens_1.type.lev
86
86
  color: inverse ? tokens_1.colors.frenchVanilla100 : tokens_1.typeColors.heading,
87
87
  });
88
88
  });
89
- var CloseButton = styled_1.default(button_1.IconButton)({
89
+ var CloseButton = styled_1.default(button_1.TertiaryButton)({
90
90
  margin: '-8px',
91
91
  });
92
92
  var DrawerHeader = /** @class */ (function (_super) {
@@ -98,7 +98,7 @@ var DrawerHeader = /** @class */ (function (_super) {
98
98
  var _a = this.props, _b = _a.closeIconAriaLabel, closeIconAriaLabel = _b === void 0 ? 'Close' : _b, _c = _a.headerColor, headerColor = _c === void 0 ? tokens_1.colors.soap100 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? tokens_1.colors.soap500 : _d, _e = _a.inverse, inverse = _e === void 0 ? false : _e, onClose = _a.onClose, title = _a.title, id = _a.id, elemProps = __rest(_a, ["closeIconAriaLabel", "headerColor", "borderColor", "inverse", "onClose", "title", "id"]);
99
99
  return (React.createElement(HeaderContainer, __assign({ borderColor: borderColor }, elemProps, { headerColor: headerColor }),
100
100
  React.createElement(HeaderTitle, { id: id, inverse: inverse, title: title }, title),
101
- onClose && closeIconAriaLabel && (React.createElement(CloseButton, { variant: inverse ? 'inverse' : 'plain', onClick: onClose, "aria-label": closeIconAriaLabel, icon: canvas_system_icons_web_1.xIcon }))));
101
+ onClose && closeIconAriaLabel && (React.createElement(CloseButton, { variant: inverse ? 'inverse' : undefined, onClick: onClose, "aria-label": closeIconAriaLabel, icon: canvas_system_icons_web_1.xIcon }))));
102
102
  };
103
103
  return DrawerHeader;
104
104
  }(React.Component));
package/dist/commonjs/search-form/lib/SearchForm.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { GrowthBehavior } from '@workday/canvas-kit-react/common';
3
- import { IconButtonProps } from '@workday/canvas-kit-react/button';
3
+ import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
4
4
  import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
5
5
  import { SearchTheme, SearchThemeAttributes } from './themes';
6
6
  export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
@@ -74,6 +74,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
74
74
  * @default 40
75
75
  */
76
76
  height?: number;
77
+ /**
78
+ * If true, allow onSubmit being called when input value is empty.
79
+ * @default false
80
+ */
81
+ allowEmptyStringSearch?: boolean;
77
82
  }
78
83
  export interface SearchFormState {
79
84
  showForm: boolean;
@@ -88,7 +93,7 @@ export declare class SearchForm extends React.Component<SearchFormProps, SearchF
88
93
  state: Readonly<SearchFormState>;
89
94
  private getTheme;
90
95
  private getThemeColors;
91
- getIconButtonType: () => IconButtonProps['variant'];
96
+ getIconButtonType: () => TertiaryButtonProps['variant'];
92
97
  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
93
98
  openCollapsedSearch: () => void;
94
99
  closeCollapsedSearch: () => void;
package/dist/commonjs/search-form/lib/SearchForm.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAA2B,MAAM,kCAAkC,CAAC;AAC1F,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAK7E,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAe,WAAW,EAAE,qBAAqB,EAAC,MAAM,UAAU,CAAC;AAG1E,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC;IAChG;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC3D;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,qBAAqB,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAuMD,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,MAAM,CAAC,KAAK,qBAAe;IAE3B,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,OAAO,CAAwC;IACvD,OAAO,CAAC,OAAO,CAAsB;IAErC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAI9B;IAEF,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,iBAAiB,QAAO,eAAe,CAAC,SAAS,CAAC,CAOhD;IAEF,YAAY,UAAW,MAAM,SAAS,CAAC,eAAe,CAAC,KAAG,IAAI,CAO5D;IAEF,mBAAmB,QAAO,IAAI,CAI5B;IAEF,oBAAoB,QAAO,IAAI,CAI7B;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,QAAO,IAAI,CAInB;IAEF,SAAS,QAAO,IAAI,CAIlB;IAEF,WAAW,QAAO,IAAI,CAEpB;IAEF,UAAU,QAAO,IAAI,CAEnB;IAEF,uBAAuB,UAAW,MAAM,WAAW,CAAC,gBAAgB,CAAC,KAAG,IAAI,CAM1E;IAEF,MAAM;CAmGP"}
1
+ {"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAA2B,MAAM,kCAAkC,CAAC;AAC1F,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAe,WAAW,EAAE,qBAAqB,EAAC,MAAM,UAAU,CAAC;AAG1E,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC;IAChG;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC3D;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,qBAAqB,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAsLD,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,MAAM,CAAC,KAAK,qBAAe;IAE3B,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,OAAO,CAAwC;IACvD,OAAO,CAAC,OAAO,CAAsB;IAErC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAI9B;IAEF,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,iBAAiB,QAAO,mBAAmB,CAAC,SAAS,CAAC,CAOpD;IAEF,YAAY,UAAW,MAAM,SAAS,CAAC,eAAe,CAAC,KAAG,IAAI,CAO5D;IAEF,mBAAmB,QAAO,IAAI,CAI5B;IAEF,oBAAoB,QAAO,IAAI,CAI7B;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,QAAO,IAAI,CAInB;IAEF,SAAS,QAAO,IAAI,CAIlB;IAEF,WAAW,QAAO,IAAI,CAEpB;IAEF,UAAU,QAAO,IAAI,CAEnB;IAEF,uBAAuB,UAAW,MAAM,WAAW,CAAC,gBAAgB,CAAC,KAAG,IAAI,CAM1E;IAEF,MAAM;CAmGP"}
package/dist/commonjs/search-form/lib/SearchForm.js CHANGED
@@ -131,26 +131,20 @@ var SearchContainer = common_1.styled('div')({
131
131
  var SearchCombobox = common_1.styled(combobox_1.Combobox)({
132
132
  width: "100%",
133
133
  });
134
- var SearchIcon = common_1.styled(button_1.IconButton)(function (_a) {
134
+ var SearchIcon = common_1.styled(button_1.TertiaryButton)(function (_a) {
135
135
  var isCollapsed = _a.isCollapsed, isHidden = _a.isHidden;
136
- var collapsedSize = 40;
137
- var size = 32;
138
- var collapseStyles = isCollapsed
139
- ? {
140
- minWidth: collapsedSize,
141
- width: collapsedSize,
142
- minHeight: collapsedSize,
143
- height: collapsedSize,
144
- }
145
- : {
146
- minWidth: size,
147
- width: size,
148
- minHeight: size,
149
- height: size,
150
- };
151
- return __assign({ position: "absolute", margin: isCollapsed ? "auto " + tokens_1.space.xxs : "auto " + tokens_1.space.xxxs, top: 0, bottom: 0, left: 0, padding: 0, zIndex: 3, display: isHidden ? 'none' : 'flex' }, collapseStyles);
136
+ return {
137
+ position: "absolute",
138
+ margin: isCollapsed ? "auto " + tokens_1.space.xxs : "auto " + tokens_1.space.xxxs,
139
+ top: 0,
140
+ bottom: 0,
141
+ left: 0,
142
+ padding: 0,
143
+ zIndex: 3,
144
+ display: isHidden ? 'none' : 'flex',
145
+ };
152
146
  });
153
- var CloseButton = common_1.styled(button_1.IconButton)(function (_a) {
147
+ var CloseButton = common_1.styled(button_1.TertiaryButton)(function (_a) {
154
148
  var isCollapsed = _a.isCollapsed, showForm = _a.showForm;
155
149
  var collapseStyles = isCollapsed && showForm
156
150
  ? {
@@ -246,11 +240,11 @@ var SearchForm = /** @class */ (function (_super) {
246
240
  background = formCollapsedBackground;
247
241
  }
248
242
  var isDarkBackground = chroma_js_1.default(background).get('lab.l') < 70;
249
- return isDarkBackground ? 'inverse' : 'plain';
243
+ return isDarkBackground ? 'inverse' : undefined;
250
244
  };
251
245
  _this.handleSubmit = function (event) {
252
246
  event.preventDefault();
253
- if (_this.state.searchQuery.trim()) {
247
+ if (_this.props.allowEmptyStringSearch || _this.state.searchQuery.trim()) {
254
248
  _this.props.onSubmit(event);
255
249
  }
256
250
  else {
@@ -304,7 +298,7 @@ var SearchForm = /** @class */ (function (_super) {
304
298
  }
305
299
  };
306
300
  SearchForm.prototype.render = function () {
307
- var _a = this.props, _b = _a.clearButtonAriaLabel, clearButtonAriaLabel = _b === void 0 ? 'Reset Search Form' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Search' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Search' : _d, _e = _a.submitAriaLabel, submitAriaLabel = _e === void 0 ? 'Search' : _e, _f = _a.openButtonAriaLabel, openButtonAriaLabel = _f === void 0 ? 'Open Search' : _f, _g = _a.closeButtonAriaLabel, closeButtonAriaLabel = _g === void 0 ? 'Cancel' : _g, _h = _a.showClearButton, showClearButton = _h === void 0 ? true : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, grow = _a.grow, onSubmit = _a.onSubmit, isCollapsed = _a.isCollapsed, onInputChange = _a.onInputChange, autocompleteItems = _a.autocompleteItems, initialValue = _a.initialValue, searchTheme = _a.searchTheme, rightAlign = _a.rightAlign, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign"]);
301
+ var _a = this.props, _b = _a.clearButtonAriaLabel, clearButtonAriaLabel = _b === void 0 ? 'Reset Search Form' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Search' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Search' : _d, _e = _a.submitAriaLabel, submitAriaLabel = _e === void 0 ? 'Search' : _e, _f = _a.openButtonAriaLabel, openButtonAriaLabel = _f === void 0 ? 'Open Search' : _f, _g = _a.closeButtonAriaLabel, closeButtonAriaLabel = _g === void 0 ? 'Cancel' : _g, _h = _a.showClearButton, showClearButton = _h === void 0 ? true : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, grow = _a.grow, onSubmit = _a.onSubmit, isCollapsed = _a.isCollapsed, onInputChange = _a.onInputChange, autocompleteItems = _a.autocompleteItems, initialValue = _a.initialValue, searchTheme = _a.searchTheme, rightAlign = _a.rightAlign, _k = _a.allowEmptyStringSearch, allowEmptyStringSearch = _k === void 0 ? false : _k, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign", "allowEmptyStringSearch"]);
308
302
  return (React.createElement(StyledSearchForm, __assign({ role: "search", action: ".", rightAlign: rightAlign, grow: grow, "aria-labelledby": this.labelId, isCollapsed: isCollapsed, onSubmit: this.handleSubmit, showForm: this.state.showForm }, elemProps),
309
303
  React.createElement(SearchContainer, { height: height },
310
304
  React.createElement(SearchIcon, { "aria-label": submitAriaLabel, icon: canvas_system_icons_web_1.searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), type: "submit", isHidden: !!isCollapsed && !this.state.showForm }),
@@ -312,7 +306,7 @@ var SearchForm = /** @class */ (function (_super) {
312
306
  React.createElement(SearchField, { grow: grow, id: this.labelId, inputId: "input-" + this.labelId, label: inputLabel, labelPosition: form_field_1.FormFieldLabelPosition.Hidden, useFieldset: false, isCollapsed: isCollapsed, showForm: this.state.showForm, height: height },
313
307
  React.createElement(SearchCombobox, { initialValue: initialValue, clearButtonVariant: this.getIconButtonType(), autocompleteItems: autocompleteItems, onChange: this.handleSearchInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, showClearButton: !isCollapsed && showClearButton, clearButtonAriaLabel: clearButtonAriaLabel, labelId: this.labelId },
314
308
  React.createElement(SearchInput, { ref: this.inputRef, value: this.state.searchQuery, placeholder: placeholder, isCollapsed: isCollapsed, inputColors: this.getThemeColors(), height: height, name: "search", autoComplete: "off" }))),
315
- React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: canvas_system_icons_web_1.xIcon, isCollapsed: isCollapsed, variant: "plain", showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
309
+ React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: canvas_system_icons_web_1.xIcon, isCollapsed: isCollapsed, showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
316
310
  };
317
311
  SearchForm.Theme = themes_1.SearchTheme;
318
312
  return SearchForm;
package/dist/es6/combobox/lib/Combobox.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { GrowthBehavior } from '@workday/canvas-kit-react/common';
3
3
  import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
4
- import { IconButtonProps } from '@workday/canvas-kit-react/button';
4
+ import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
5
5
  import { TextInputProps } from '@workday/canvas-kit-react/text-input';
6
6
  export interface ComboBoxMenuItemGroup {
7
7
  header: React.ReactElement<MenuItemProps>;
@@ -17,10 +17,9 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
17
17
  */
18
18
  initialValue?: string;
19
19
  /**
20
- * The variant of the Combobox clear button.
21
- * @default IconButton.Variant.Plain
20
+ * The variant of the Combobox clear button. The default is a TertiaryButton
22
21
  */
23
- clearButtonVariant?: IconButtonProps['variant'];
22
+ clearButtonVariant?: TertiaryButtonProps['variant'];
24
23
  /**
25
24
  * If true, render the Combobox with a button to clear the text input.
26
25
  * @default false
package/dist/es6/combobox/lib/Combobox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF,QAAA,MAAM,QAAQ,wLAeX,aAAa,gBA0Tf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAErF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACpD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA0DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF,QAAA,MAAM,QAAQ,wLAeX,aAAa,gBA0Tf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
package/dist/es6/combobox/lib/Combobox.js CHANGED
@@ -25,7 +25,7 @@ import { jsx, keyframes } from '@emotion/react';
25
25
  import { useForkRef, styled, useIsRTL, useUniqueId, } from '@workday/canvas-kit-react/common';
26
26
  import { space, commonColors, borderRadius } from '@workday/canvas-kit-react/tokens';
27
27
  import { Card } from '@workday/canvas-kit-react/card';
28
- import { IconButton } from '@workday/canvas-kit-react/button';
28
+ import { TertiaryButton } from '@workday/canvas-kit-react/button';
29
29
  import { xSmallIcon } from '@workday/canvas-system-icons-web';
30
30
  import flatten from 'lodash.flatten';
31
31
  import AutocompleteList from './AutocompleteList';
@@ -65,10 +65,7 @@ var MenuContainer = styled(Card)({
65
65
  animation: fadeInKeyframes + " 200ms ease-out",
66
66
  maxHeight: 200,
67
67
  });
68
- var ResetButton = styled(IconButton)({
69
- width: space.l,
70
- minWidth: space.l,
71
- height: space.l,
68
+ var ResetButton = styled(TertiaryButton)({
72
69
  position: 'absolute',
73
70
  margin: "auto " + space.xxxs,
74
71
  top: 0,
@@ -114,7 +111,7 @@ var isValidSingleChild = function (child) {
114
111
  return React.isValidElement(child) && React.Children.only(child);
115
112
  };
116
113
  var Combobox = function (_a) {
117
- var autocompleteItems = _a.autocompleteItems, children = _a.children, grow = _a.grow, initialValue = _a.initialValue, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, showClearButton = _a.showClearButton, _b = _a.clearButtonVariant, clearButtonVariant = _b === void 0 ? 'plain' : _b, _c = _a.clearButtonAriaLabel, clearButtonAriaLabel = _c === void 0 ? "Reset Search Input" : _c, labelId = _a.labelId, _d = _a.getStatusText, getStatusText = _d === void 0 ? buildStatusString : _d, id = _a.id, elemProps = __rest(_a, ["autocompleteItems", "children", "grow", "initialValue", "onChange", "onFocus", "onBlur", "showClearButton", "clearButtonVariant", "clearButtonAriaLabel", "labelId", "getStatusText", "id"]);
114
+ var autocompleteItems = _a.autocompleteItems, children = _a.children, grow = _a.grow, initialValue = _a.initialValue, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, showClearButton = _a.showClearButton, _b = _a.clearButtonVariant, clearButtonVariant = _b === void 0 ? undefined : _b, _c = _a.clearButtonAriaLabel, clearButtonAriaLabel = _c === void 0 ? "Reset Search Input" : _c, labelId = _a.labelId, _d = _a.getStatusText, getStatusText = _d === void 0 ? buildStatusString : _d, id = _a.id, elemProps = __rest(_a, ["autocompleteItems", "children", "grow", "initialValue", "onChange", "onFocus", "onBlur", "showClearButton", "clearButtonVariant", "clearButtonAriaLabel", "labelId", "getStatusText", "id"]);
118
115
  var _e = useState(false), isOpened = _e[0], setIsOpened = _e[1];
119
116
  var _f = useState(''), value = _f[0], _setValue = _f[1]; // Don't call _setValue directly instead call setInputValue to make sure onChange fires correctly
120
117
  var _g = useState(false), showingAutocomplete = _g[0], setShowingAutocomplete = _g[1];
@@ -339,7 +336,7 @@ var Combobox = function (_a) {
339
336
  return (React.createElement(Container, __assign({ grow: grow }, elemProps),
340
337
  React.createElement(InputContainer, { ref: comboboxRef },
341
338
  isValidSingleChild(children) && React.Children.map(children, renderChildren),
342
- showClearButton && (React.createElement(ResetButton, { shouldShow: !!value, "aria-label": clearButtonAriaLabel, icon: xSmallIcon, variant: clearButtonVariant, toggled: undefined, onClick: resetSearchInput, onBlur: handleBlur, type: "button" })),
339
+ showClearButton && (React.createElement(ResetButton, { shouldShow: !!value, "aria-label": clearButtonAriaLabel, icon: xSmallIcon, variant: clearButtonVariant, onClick: resetSearchInput, onBlur: handleBlur, size: "small", type: "button" })),
343
340
  showingAutocomplete && autocompleteItems && (React.createElement(MenuContainer, { padding: space.zero, depth: 1 },
344
341
  React.createElement(Card.Body, null,
345
342
  React.createElement(AutocompleteList, { comboboxId: componentId, autocompleteItems: autocompleteItems, selectedIndex: selectedAutocompleteIndex, handleAutocompleteClick: handleAutocompleteClick, labelId: formLabelId, showGroupText: showGroupText }))))),
package/dist/es6/drawer/lib/DrawerHeader.js CHANGED
@@ -36,7 +36,7 @@ var __rest = (this && this.__rest) || function (s, e) {
36
36
  import * as React from 'react';
37
37
  import styled from '@emotion/styled';
38
38
  import { colors, space, type, typeColors } from '@workday/canvas-kit-react/tokens';
39
- import { IconButton } from '@workday/canvas-kit-react/button';
39
+ import { TertiaryButton } from '@workday/canvas-kit-react/button';
40
40
  import { xIcon } from '@workday/canvas-system-icons-web';
41
41
  var headerHeight = 56;
42
42
  var HeaderContainer = styled('div')({
@@ -62,7 +62,7 @@ var HeaderTitle = styled('h4')(__assign(__assign({}, type.levels.body.small), {
62
62
  color: inverse ? colors.frenchVanilla100 : typeColors.heading,
63
63
  });
64
64
  });
65
- var CloseButton = styled(IconButton)({
65
+ var CloseButton = styled(TertiaryButton)({
66
66
  margin: '-8px',
67
67
  });
68
68
  var DrawerHeader = /** @class */ (function (_super) {
@@ -74,7 +74,7 @@ var DrawerHeader = /** @class */ (function (_super) {
74
74
  var _a = this.props, _b = _a.closeIconAriaLabel, closeIconAriaLabel = _b === void 0 ? 'Close' : _b, _c = _a.headerColor, headerColor = _c === void 0 ? colors.soap100 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? colors.soap500 : _d, _e = _a.inverse, inverse = _e === void 0 ? false : _e, onClose = _a.onClose, title = _a.title, id = _a.id, elemProps = __rest(_a, ["closeIconAriaLabel", "headerColor", "borderColor", "inverse", "onClose", "title", "id"]);
75
75
  return (React.createElement(HeaderContainer, __assign({ borderColor: borderColor }, elemProps, { headerColor: headerColor }),
76
76
  React.createElement(HeaderTitle, { id: id, inverse: inverse, title: title }, title),
77
- onClose && closeIconAriaLabel && (React.createElement(CloseButton, { variant: inverse ? 'inverse' : 'plain', onClick: onClose, "aria-label": closeIconAriaLabel, icon: xIcon }))));
77
+ onClose && closeIconAriaLabel && (React.createElement(CloseButton, { variant: inverse ? 'inverse' : undefined, onClick: onClose, "aria-label": closeIconAriaLabel, icon: xIcon }))));
78
78
  };
79
79
  return DrawerHeader;
80
80
  }(React.Component));
package/dist/es6/search-form/lib/SearchForm.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { GrowthBehavior } from '@workday/canvas-kit-react/common';
3
- import { IconButtonProps } from '@workday/canvas-kit-react/button';
3
+ import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
4
4
  import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
5
5
  import { SearchTheme, SearchThemeAttributes } from './themes';
6
6
  export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
@@ -74,6 +74,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
74
74
  * @default 40
75
75
  */
76
76
  height?: number;
77
+ /**
78
+ * If true, allow onSubmit being called when input value is empty.
79
+ * @default false
80
+ */
81
+ allowEmptyStringSearch?: boolean;
77
82
  }
78
83
  export interface SearchFormState {
79
84
  showForm: boolean;
@@ -88,7 +93,7 @@ export declare class SearchForm extends React.Component<SearchFormProps, SearchF
88
93
  state: Readonly<SearchFormState>;
89
94
  private getTheme;
90
95
  private getThemeColors;
91
- getIconButtonType: () => IconButtonProps['variant'];
96
+ getIconButtonType: () => TertiaryButtonProps['variant'];
92
97
  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
93
98
  openCollapsedSearch: () => void;
94
99
  closeCollapsedSearch: () => void;
package/dist/es6/search-form/lib/SearchForm.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAA2B,MAAM,kCAAkC,CAAC;AAC1F,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAK7E,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAe,WAAW,EAAE,qBAAqB,EAAC,MAAM,UAAU,CAAC;AAG1E,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC;IAChG;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC3D;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,qBAAqB,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAuMD,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,MAAM,CAAC,KAAK,qBAAe;IAE3B,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,OAAO,CAAwC;IACvD,OAAO,CAAC,OAAO,CAAsB;IAErC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAI9B;IAEF,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,iBAAiB,QAAO,eAAe,CAAC,SAAS,CAAC,CAOhD;IAEF,YAAY,UAAW,MAAM,SAAS,CAAC,eAAe,CAAC,KAAG,IAAI,CAO5D;IAEF,mBAAmB,QAAO,IAAI,CAI5B;IAEF,oBAAoB,QAAO,IAAI,CAI7B;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,QAAO,IAAI,CAInB;IAEF,SAAS,QAAO,IAAI,CAIlB;IAEF,WAAW,QAAO,IAAI,CAEpB;IAEF,UAAU,QAAO,IAAI,CAEnB;IAEF,uBAAuB,UAAW,MAAM,WAAW,CAAC,gBAAgB,CAAC,KAAG,IAAI,CAM1E;IAEF,MAAM;CAmGP"}
1
+ {"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAA2B,MAAM,kCAAkC,CAAC;AAC1F,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAe,WAAW,EAAE,qBAAqB,EAAC,MAAM,UAAU,CAAC;AAG1E,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC;IAChG;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC3D;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,qBAAqB,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAsLD,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,MAAM,CAAC,KAAK,qBAAe;IAE3B,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,OAAO,CAAwC;IACvD,OAAO,CAAC,OAAO,CAAsB;IAErC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAI9B;IAEF,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,iBAAiB,QAAO,mBAAmB,CAAC,SAAS,CAAC,CAOpD;IAEF,YAAY,UAAW,MAAM,SAAS,CAAC,eAAe,CAAC,KAAG,IAAI,CAO5D;IAEF,mBAAmB,QAAO,IAAI,CAI5B;IAEF,oBAAoB,QAAO,IAAI,CAI7B;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,QAAO,IAAI,CAInB;IAEF,SAAS,QAAO,IAAI,CAIlB;IAEF,WAAW,QAAO,IAAI,CAEpB;IAEF,UAAU,QAAO,IAAI,CAEnB;IAEF,uBAAuB,UAAW,MAAM,WAAW,CAAC,gBAAgB,CAAC,KAAG,IAAI,CAM1E;IAEF,MAAM;CAmGP"}
package/dist/es6/search-form/lib/SearchForm.js CHANGED
@@ -36,7 +36,7 @@ var __rest = (this && this.__rest) || function (s, e) {
36
36
  import * as React from 'react';
37
37
  import { colors, space, spaceNumbers } from '@workday/canvas-kit-react/tokens';
38
38
  import { styled, generateUniqueId } from '@workday/canvas-kit-react/common';
39
- import { IconButton } from '@workday/canvas-kit-react/button';
39
+ import { TertiaryButton } from '@workday/canvas-kit-react/button';
40
40
  import { searchIcon, xIcon } from '@workday/canvas-system-icons-web';
41
41
  import { FormField, FormFieldLabelPosition } from '@workday/canvas-kit-react/form-field';
42
42
  import { Combobox } from '@workday/canvas-kit-labs-react/combobox';
@@ -106,26 +106,20 @@ var SearchContainer = styled('div')({
106
106
  var SearchCombobox = styled(Combobox)({
107
107
  width: "100%",
108
108
  });
109
- var SearchIcon = styled(IconButton)(function (_a) {
109
+ var SearchIcon = styled(TertiaryButton)(function (_a) {
110
110
  var isCollapsed = _a.isCollapsed, isHidden = _a.isHidden;
111
- var collapsedSize = 40;
112
- var size = 32;
113
- var collapseStyles = isCollapsed
114
- ? {
115
- minWidth: collapsedSize,
116
- width: collapsedSize,
117
- minHeight: collapsedSize,
118
- height: collapsedSize,
119
- }
120
- : {
121
- minWidth: size,
122
- width: size,
123
- minHeight: size,
124
- height: size,
125
- };
126
- return __assign({ position: "absolute", margin: isCollapsed ? "auto " + space.xxs : "auto " + space.xxxs, top: 0, bottom: 0, left: 0, padding: 0, zIndex: 3, display: isHidden ? 'none' : 'flex' }, collapseStyles);
111
+ return {
112
+ position: "absolute",
113
+ margin: isCollapsed ? "auto " + space.xxs : "auto " + space.xxxs,
114
+ top: 0,
115
+ bottom: 0,
116
+ left: 0,
117
+ padding: 0,
118
+ zIndex: 3,
119
+ display: isHidden ? 'none' : 'flex',
120
+ };
127
121
  });
128
- var CloseButton = styled(IconButton)(function (_a) {
122
+ var CloseButton = styled(TertiaryButton)(function (_a) {
129
123
  var isCollapsed = _a.isCollapsed, showForm = _a.showForm;
130
124
  var collapseStyles = isCollapsed && showForm
131
125
  ? {
@@ -221,11 +215,11 @@ var SearchForm = /** @class */ (function (_super) {
221
215
  background = formCollapsedBackground;
222
216
  }
223
217
  var isDarkBackground = chroma(background).get('lab.l') < 70;
224
- return isDarkBackground ? 'inverse' : 'plain';
218
+ return isDarkBackground ? 'inverse' : undefined;
225
219
  };
226
220
  _this.handleSubmit = function (event) {
227
221
  event.preventDefault();
228
- if (_this.state.searchQuery.trim()) {
222
+ if (_this.props.allowEmptyStringSearch || _this.state.searchQuery.trim()) {
229
223
  _this.props.onSubmit(event);
230
224
  }
231
225
  else {
@@ -279,7 +273,7 @@ var SearchForm = /** @class */ (function (_super) {
279
273
  }
280
274
  };
281
275
  SearchForm.prototype.render = function () {
282
- var _a = this.props, _b = _a.clearButtonAriaLabel, clearButtonAriaLabel = _b === void 0 ? 'Reset Search Form' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Search' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Search' : _d, _e = _a.submitAriaLabel, submitAriaLabel = _e === void 0 ? 'Search' : _e, _f = _a.openButtonAriaLabel, openButtonAriaLabel = _f === void 0 ? 'Open Search' : _f, _g = _a.closeButtonAriaLabel, closeButtonAriaLabel = _g === void 0 ? 'Cancel' : _g, _h = _a.showClearButton, showClearButton = _h === void 0 ? true : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, grow = _a.grow, onSubmit = _a.onSubmit, isCollapsed = _a.isCollapsed, onInputChange = _a.onInputChange, autocompleteItems = _a.autocompleteItems, initialValue = _a.initialValue, searchTheme = _a.searchTheme, rightAlign = _a.rightAlign, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign"]);
276
+ var _a = this.props, _b = _a.clearButtonAriaLabel, clearButtonAriaLabel = _b === void 0 ? 'Reset Search Form' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Search' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Search' : _d, _e = _a.submitAriaLabel, submitAriaLabel = _e === void 0 ? 'Search' : _e, _f = _a.openButtonAriaLabel, openButtonAriaLabel = _f === void 0 ? 'Open Search' : _f, _g = _a.closeButtonAriaLabel, closeButtonAriaLabel = _g === void 0 ? 'Cancel' : _g, _h = _a.showClearButton, showClearButton = _h === void 0 ? true : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, grow = _a.grow, onSubmit = _a.onSubmit, isCollapsed = _a.isCollapsed, onInputChange = _a.onInputChange, autocompleteItems = _a.autocompleteItems, initialValue = _a.initialValue, searchTheme = _a.searchTheme, rightAlign = _a.rightAlign, _k = _a.allowEmptyStringSearch, allowEmptyStringSearch = _k === void 0 ? false : _k, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign", "allowEmptyStringSearch"]);
283
277
  return (React.createElement(StyledSearchForm, __assign({ role: "search", action: ".", rightAlign: rightAlign, grow: grow, "aria-labelledby": this.labelId, isCollapsed: isCollapsed, onSubmit: this.handleSubmit, showForm: this.state.showForm }, elemProps),
284
278
  React.createElement(SearchContainer, { height: height },
285
279
  React.createElement(SearchIcon, { "aria-label": submitAriaLabel, icon: searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), type: "submit", isHidden: !!isCollapsed && !this.state.showForm }),
@@ -287,7 +281,7 @@ var SearchForm = /** @class */ (function (_super) {
287
281
  React.createElement(SearchField, { grow: grow, id: this.labelId, inputId: "input-" + this.labelId, label: inputLabel, labelPosition: FormFieldLabelPosition.Hidden, useFieldset: false, isCollapsed: isCollapsed, showForm: this.state.showForm, height: height },
288
282
  React.createElement(SearchCombobox, { initialValue: initialValue, clearButtonVariant: this.getIconButtonType(), autocompleteItems: autocompleteItems, onChange: this.handleSearchInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, showClearButton: !isCollapsed && showClearButton, clearButtonAriaLabel: clearButtonAriaLabel, labelId: this.labelId },
289
283
  React.createElement(SearchInput, { ref: this.inputRef, value: this.state.searchQuery, placeholder: placeholder, isCollapsed: isCollapsed, inputColors: this.getThemeColors(), height: height, name: "search", autoComplete: "off" }))),
290
- React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: xIcon, isCollapsed: isCollapsed, variant: "plain", showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
284
+ React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: xIcon, isCollapsed: isCollapsed, showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
291
285
  };
292
286
  SearchForm.Theme = SearchTheme;
293
287
  return SearchForm;
package/drawer/lib/DrawerHeader.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import styled from '@emotion/styled';
3
3
  import {colors, space, type, CanvasColor, typeColors} from '@workday/canvas-kit-react/tokens';
4
- import {IconButton} from '@workday/canvas-kit-react/button';
4
+ import {TertiaryButton} from '@workday/canvas-kit-react/button';
5
5
  import {xIcon} from '@workday/canvas-system-icons-web';
6
6
 
7
7
  export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -69,7 +69,7 @@ const HeaderTitle = styled('h4')<Pick<DrawerHeaderProps, 'inverse'>>(
69
69
  })
70
70
  );
71
71
 
72
- const CloseButton = styled(IconButton)({
72
+ const CloseButton = styled(TertiaryButton)({
73
73
  margin: '-8px', // for inverse and plain button, we always want this margin
74
74
  });
75
75
 
@@ -93,7 +93,7 @@ export default class DrawerHeader extends React.Component<DrawerHeaderProps, {}>
93
93
  </HeaderTitle>
94
94
  {onClose && closeIconAriaLabel && (
95
95
  <CloseButton
96
- variant={inverse ? 'inverse' : 'plain'}
96
+ variant={inverse ? 'inverse' : undefined}
97
97
  onClick={onClose}
98
98
  aria-label={closeIconAriaLabel}
99
99
  icon={xIcon}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-labs-react",
3
- "version": "7.0.0-alpha.0-next.7+23568685",
3
+ "version": "7.0.0-alpha.78-next.6+400ffc0b",
4
4
  "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -54,8 +54,8 @@
54
54
  "dependencies": {
55
55
  "@emotion/react": "^11.7.1",
56
56
  "@emotion/styled": "^11.6.0",
57
- "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.7+23568685",
58
- "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.7+23568685",
57
+ "@workday/canvas-kit-preview-react": "^7.0.0-alpha.78-next.6+400ffc0b",
58
+ "@workday/canvas-kit-react": "^7.0.0-alpha.78-next.6+400ffc0b",
59
59
  "@workday/canvas-system-icons-web": "1.0.41",
60
60
  "chroma-js": "^2.1.0",
61
61
  "lodash.flatten": "^4.4.0",
@@ -64,5 +64,5 @@
64
64
  "devDependencies": {
65
65
  "@types/lodash.flatten": "^4.4.6"
66
66
  },
67
- "gitHead": "23568685fec785046d37cb320289d8ab9e74e283"
67
+ "gitHead": "400ffc0b29c2762180758d9b7c1bdc0562cb01e4"
68
68
  }
package/search-form/lib/SearchForm.tsx CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import {CSSObject} from '@emotion/styled';
3
3
  import {colors, space, spaceNumbers} from '@workday/canvas-kit-react/tokens';
4
4
  import {GrowthBehavior, styled, generateUniqueId} from '@workday/canvas-kit-react/common';
5
- import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
5
+ import {TertiaryButton, TertiaryButtonProps} 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';
@@ -82,6 +82,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
82
82
  * @default 40
83
83
  */
84
84
  height?: number;
85
+ /**
86
+ * If true, allow onSubmit being called when input value is empty.
87
+ * @default false
88
+ */
89
+ allowEmptyStringSearch?: boolean;
85
90
  }
86
91
 
87
92
  export interface SearchFormState {
@@ -164,39 +169,22 @@ const SearchCombobox = styled(Combobox)({
164
169
  width: `100%`,
165
170
  });
166
171
 
167
- const SearchIcon = styled(IconButton)<Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}>(
168
- ({isCollapsed, isHidden}) => {
169
- const collapsedSize = 40;
170
- const size = 32;
171
- const collapseStyles: CSSObject = isCollapsed
172
- ? {
173
- minWidth: collapsedSize,
174
- width: collapsedSize,
175
- minHeight: collapsedSize,
176
- height: collapsedSize,
177
- }
178
- : {
179
- minWidth: size,
180
- width: size,
181
- minHeight: size,
182
- height: size,
183
- };
184
-
185
- return {
186
- position: `absolute`,
187
- margin: isCollapsed ? `auto ${space.xxs}` : `auto ${space.xxxs}`,
188
- top: 0,
189
- bottom: 0,
190
- left: 0,
191
- padding: 0,
192
- zIndex: 3,
193
- display: isHidden ? 'none' : 'flex',
194
- ...collapseStyles,
195
- };
196
- }
197
- );
172
+ const SearchIcon = styled(TertiaryButton)<
173
+ Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}
174
+ >(({isCollapsed, isHidden}) => {
175
+ return {
176
+ position: `absolute`,
177
+ margin: isCollapsed ? `auto ${space.xxs}` : `auto ${space.xxxs}`,
178
+ top: 0,
179
+ bottom: 0,
180
+ left: 0,
181
+ padding: 0,
182
+ zIndex: 3,
183
+ display: isHidden ? 'none' : 'flex',
184
+ };
185
+ });
198
186
 
199
- const CloseButton = styled(IconButton)<
187
+ const CloseButton = styled(TertiaryButton)<
200
188
  Pick<SearchFormProps, 'isCollapsed'> & Pick<SearchFormState, 'showForm'>
201
189
  >(({isCollapsed, showForm}) => {
202
190
  const collapseStyles: CSSObject =
@@ -320,18 +308,18 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
320
308
  return getInputColors(theme, this.state.isFocused);
321
309
  };
322
310
 
323
- getIconButtonType = (): IconButtonProps['variant'] => {
311
+ getIconButtonType = (): TertiaryButtonProps['variant'] => {
324
312
  let background = this.getThemeColors().background || `#fff`;
325
313
  if (this.props.isCollapsed && this.state.showForm) {
326
314
  background = formCollapsedBackground;
327
315
  }
328
316
  const isDarkBackground = chroma(background as string).get('lab.l') < 70;
329
- return isDarkBackground ? 'inverse' : 'plain';
317
+ return isDarkBackground ? 'inverse' : undefined;
330
318
  };
331
319
 
332
320
  handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
333
321
  event.preventDefault();
334
- if (this.state.searchQuery.trim()) {
322
+ if (this.props.allowEmptyStringSearch || this.state.searchQuery.trim()) {
335
323
  this.props.onSubmit(event);
336
324
  } else {
337
325
  this.focusInput();
@@ -407,6 +395,7 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
407
395
  initialValue,
408
396
  searchTheme,
409
397
  rightAlign,
398
+ allowEmptyStringSearch = false,
410
399
  ...elemProps
411
400
  } = this.props;
412
401
 
@@ -479,7 +468,6 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
479
468
  aria-label={closeButtonAriaLabel}
480
469
  icon={xIcon}
481
470
  isCollapsed={isCollapsed}
482
- variant="plain"
483
471
  showForm={this.state.showForm}
484
472
  onClick={this.closeCollapsedSearch}
485
473
  type="button"
package/ts3.5/dist/commonjs/combobox/lib/Combobox.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { GrowthBehavior } from '@workday/canvas-kit-react/common';
3
3
  import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
4
- import { IconButtonProps } from '@workday/canvas-kit-react/button';
4
+ import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
5
5
  import { TextInputProps } from '@workday/canvas-kit-react/text-input';
6
6
  export interface ComboBoxMenuItemGroup {
7
7
  header: React.ReactElement<MenuItemProps>;
@@ -17,10 +17,9 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
17
17
  */
18
18
  initialValue?: string;
19
19
  /**
20
- * The variant of the Combobox clear button.
21
- * @default IconButton.Variant.Plain
20
+ * The variant of the Combobox clear button. The default is a TertiaryButton
22
21
  */
23
- clearButtonVariant?: IconButtonProps['variant'];
22
+ clearButtonVariant?: TertiaryButtonProps['variant'];
24
23
  /**
25
24
  * If true, render the Combobox with a button to clear the text input.
26
25
  * @default false
package/ts3.5/dist/commonjs/search-form/lib/SearchForm.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { GrowthBehavior } from '@workday/canvas-kit-react/common';
3
- import { IconButtonProps } from '@workday/canvas-kit-react/button';
3
+ import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
4
4
  import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
5
5
  import { SearchTheme, SearchThemeAttributes } from './themes';
6
6
  export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
@@ -74,6 +74,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
74
74
  * @default 40
75
75
  */
76
76
  height?: number;
77
+ /**
78
+ * If true, allow onSubmit being called when input value is empty.
79
+ * @default false
80
+ */
81
+ allowEmptyStringSearch?: boolean;
77
82
  }
78
83
  export interface SearchFormState {
79
84
  showForm: boolean;
@@ -88,7 +93,7 @@ export declare class SearchForm extends React.Component<SearchFormProps, SearchF
88
93
  state: Readonly<SearchFormState>;
89
94
  private getTheme;
90
95
  private getThemeColors;
91
- getIconButtonType: () => IconButtonProps['variant'];
96
+ getIconButtonType: () => TertiaryButtonProps['variant'];
92
97
  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
93
98
  openCollapsedSearch: () => void;
94
99
  closeCollapsedSearch: () => void;
package/ts3.5/dist/es6/combobox/lib/Combobox.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { GrowthBehavior } from '@workday/canvas-kit-react/common';
3
3
  import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
4
- import { IconButtonProps } from '@workday/canvas-kit-react/button';
4
+ import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
5
5
  import { TextInputProps } from '@workday/canvas-kit-react/text-input';
6
6
  export interface ComboBoxMenuItemGroup {
7
7
  header: React.ReactElement<MenuItemProps>;
@@ -17,10 +17,9 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
17
17
  */
18
18
  initialValue?: string;
19
19
  /**
20
- * The variant of the Combobox clear button.
21
- * @default IconButton.Variant.Plain
20
+ * The variant of the Combobox clear button. The default is a TertiaryButton
22
21
  */
23
- clearButtonVariant?: IconButtonProps['variant'];
22
+ clearButtonVariant?: TertiaryButtonProps['variant'];
24
23
  /**
25
24
  * If true, render the Combobox with a button to clear the text input.
26
25
  * @default false
package/ts3.5/dist/es6/search-form/lib/SearchForm.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { GrowthBehavior } from '@workday/canvas-kit-react/common';
3
- import { IconButtonProps } from '@workday/canvas-kit-react/button';
3
+ import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
4
4
  import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
5
5
  import { SearchTheme, SearchThemeAttributes } from './themes';
6
6
  export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
@@ -74,6 +74,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
74
74
  * @default 40
75
75
  */
76
76
  height?: number;
77
+ /**
78
+ * If true, allow onSubmit being called when input value is empty.
79
+ * @default false
80
+ */
81
+ allowEmptyStringSearch?: boolean;
77
82
  }
78
83
  export interface SearchFormState {
79
84
  showForm: boolean;
@@ -88,7 +93,7 @@ export declare class SearchForm extends React.Component<SearchFormProps, SearchF
88
93
  state: Readonly<SearchFormState>;
89
94
  private getTheme;
90
95
  private getThemeColors;
91
- getIconButtonType: () => IconButtonProps['variant'];
96
+ getIconButtonType: () => TertiaryButtonProps['variant'];
92
97
  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
93
98
  openCollapsedSearch: () => void;
94
99
  closeCollapsedSearch: () => void;