@workday/canvas-kit-labs-react 5.3.0-next.2 → 5.3.0-next.24

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 (150) hide show
  1. package/combobox/lib/AutocompleteList.tsx +5 -2
  2. package/combobox/lib/Combobox.tsx +0 -1
  3. package/common/README.md +32 -0
  4. package/common/lib/theming/index.ts +1 -0
  5. package/common/lib/theming/useThemedRing.ts +78 -0
  6. package/dist/commonjs/combobox/lib/AutocompleteList.d.ts.map +1 -1
  7. package/dist/commonjs/combobox/lib/AutocompleteList.js +5 -2
  8. package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -1
  9. package/dist/commonjs/combobox/lib/Combobox.js +0 -1
  10. package/dist/commonjs/common/lib/theming/index.d.ts +1 -0
  11. package/dist/commonjs/common/lib/theming/index.d.ts.map +1 -1
  12. package/dist/commonjs/common/lib/theming/index.js +1 -0
  13. package/dist/commonjs/common/lib/theming/useThemedRing.d.ts +11 -0
  14. package/dist/commonjs/common/lib/theming/useThemedRing.d.ts.map +1 -0
  15. package/dist/commonjs/common/lib/theming/useThemedRing.js +61 -0
  16. package/dist/commonjs/header/index.d.ts +5 -5
  17. package/dist/commonjs/header/index.d.ts.map +1 -1
  18. package/dist/commonjs/header/index.js +2 -2
  19. package/dist/commonjs/header/lib/GlobalHeader.d.ts +11 -2
  20. package/dist/commonjs/header/lib/GlobalHeader.d.ts.map +1 -1
  21. package/dist/commonjs/header/lib/GlobalHeader.js +19 -8
  22. package/dist/commonjs/header/lib/Header.d.ts +17 -8
  23. package/dist/commonjs/header/lib/Header.d.ts.map +1 -1
  24. package/dist/commonjs/header/lib/Header.js +27 -14
  25. package/dist/commonjs/header/lib/parts/DubLogoTitle.d.ts +13 -4
  26. package/dist/commonjs/header/lib/parts/DubLogoTitle.d.ts.map +1 -1
  27. package/dist/commonjs/header/lib/parts/DubLogoTitle.js +22 -11
  28. package/dist/commonjs/header/lib/parts/WorkdayLogoTitle.d.ts +14 -5
  29. package/dist/commonjs/header/lib/parts/WorkdayLogoTitle.d.ts.map +1 -1
  30. package/dist/commonjs/header/lib/parts/WorkdayLogoTitle.js +25 -12
  31. package/dist/commonjs/header/lib/parts/index.d.ts +2 -3
  32. package/dist/commonjs/header/lib/parts/index.d.ts.map +1 -1
  33. package/dist/commonjs/header/lib/parts/index.js +2 -4
  34. package/dist/commonjs/header/lib/shared/themes.d.ts +28 -19
  35. package/dist/commonjs/header/lib/shared/themes.d.ts.map +1 -1
  36. package/dist/commonjs/header/lib/shared/themes.js +13 -36
  37. package/dist/commonjs/header/lib/shared/types.d.ts +3 -8
  38. package/dist/commonjs/header/lib/shared/types.d.ts.map +1 -1
  39. package/dist/commonjs/header/lib/shared/types.js +17 -23
  40. package/dist/commonjs/index.d.ts +1 -0
  41. package/dist/commonjs/index.d.ts.map +1 -1
  42. package/dist/commonjs/index.js +1 -0
  43. package/dist/commonjs/layout/lib/utils/getValidChildren.d.ts +1 -1
  44. package/dist/commonjs/layout/lib/utils/getValidChildren.d.ts.map +1 -1
  45. package/dist/commonjs/search-form/index.d.ts +3 -0
  46. package/dist/commonjs/search-form/index.d.ts.map +1 -0
  47. package/dist/commonjs/search-form/index.js +7 -0
  48. package/dist/commonjs/{header/lib/parts/SearchBar.d.ts → search-form/lib/SearchForm.d.ts} +22 -23
  49. package/dist/commonjs/search-form/lib/SearchForm.d.ts.map +1 -0
  50. package/dist/commonjs/{header/lib/parts/SearchBar.js → search-form/lib/SearchForm.js} +13 -14
  51. package/dist/commonjs/search-form/lib/themes.d.ts +21 -0
  52. package/dist/commonjs/search-form/lib/themes.d.ts.map +1 -0
  53. package/dist/commonjs/search-form/lib/themes.js +41 -0
  54. package/dist/es6/combobox/lib/AutocompleteList.d.ts.map +1 -1
  55. package/dist/es6/combobox/lib/AutocompleteList.js +5 -2
  56. package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -1
  57. package/dist/es6/combobox/lib/Combobox.js +0 -1
  58. package/dist/es6/common/lib/theming/index.d.ts +1 -0
  59. package/dist/es6/common/lib/theming/index.d.ts.map +1 -1
  60. package/dist/es6/common/lib/theming/index.js +1 -0
  61. package/dist/es6/common/lib/theming/useThemedRing.d.ts +11 -0
  62. package/dist/es6/common/lib/theming/useThemedRing.d.ts.map +1 -0
  63. package/dist/es6/common/lib/theming/useThemedRing.js +55 -0
  64. package/dist/es6/header/index.d.ts +5 -5
  65. package/dist/es6/header/index.d.ts.map +1 -1
  66. package/dist/es6/header/index.js +5 -5
  67. package/dist/es6/header/lib/GlobalHeader.d.ts +11 -2
  68. package/dist/es6/header/lib/GlobalHeader.d.ts.map +1 -1
  69. package/dist/es6/header/lib/GlobalHeader.js +22 -11
  70. package/dist/es6/header/lib/Header.d.ts +17 -8
  71. package/dist/es6/header/lib/Header.d.ts.map +1 -1
  72. package/dist/es6/header/lib/Header.js +30 -17
  73. package/dist/es6/header/lib/parts/DubLogoTitle.d.ts +13 -4
  74. package/dist/es6/header/lib/parts/DubLogoTitle.d.ts.map +1 -1
  75. package/dist/es6/header/lib/parts/DubLogoTitle.js +23 -12
  76. package/dist/es6/header/lib/parts/WorkdayLogoTitle.d.ts +14 -5
  77. package/dist/es6/header/lib/parts/WorkdayLogoTitle.d.ts.map +1 -1
  78. package/dist/es6/header/lib/parts/WorkdayLogoTitle.js +26 -13
  79. package/dist/es6/header/lib/parts/index.d.ts +2 -3
  80. package/dist/es6/header/lib/parts/index.d.ts.map +1 -1
  81. package/dist/es6/header/lib/parts/index.js +2 -3
  82. package/dist/es6/header/lib/shared/themes.d.ts +28 -19
  83. package/dist/es6/header/lib/shared/themes.d.ts.map +1 -1
  84. package/dist/es6/header/lib/shared/themes.js +14 -37
  85. package/dist/es6/header/lib/shared/types.d.ts +3 -8
  86. package/dist/es6/header/lib/shared/types.d.ts.map +1 -1
  87. package/dist/es6/header/lib/shared/types.js +17 -23
  88. package/dist/es6/index.d.ts +1 -0
  89. package/dist/es6/index.d.ts.map +1 -1
  90. package/dist/es6/index.js +1 -0
  91. package/dist/es6/layout/lib/utils/getValidChildren.d.ts +1 -1
  92. package/dist/es6/layout/lib/utils/getValidChildren.d.ts.map +1 -1
  93. package/dist/es6/search-form/index.d.ts +3 -0
  94. package/dist/es6/search-form/index.d.ts.map +1 -0
  95. package/dist/es6/search-form/index.js +2 -0
  96. package/dist/es6/{header/lib/parts/SearchBar.d.ts → search-form/lib/SearchForm.d.ts} +22 -23
  97. package/dist/es6/search-form/lib/SearchForm.d.ts.map +1 -0
  98. package/dist/es6/{header/lib/parts/SearchBar.js → search-form/lib/SearchForm.js} +11 -12
  99. package/dist/es6/search-form/lib/themes.d.ts +21 -0
  100. package/dist/es6/search-form/lib/themes.d.ts.map +1 -0
  101. package/dist/es6/search-form/lib/themes.js +39 -0
  102. package/header/README.md +37 -181
  103. package/header/index.ts +5 -5
  104. package/header/lib/GlobalHeader.tsx +26 -9
  105. package/header/lib/Header.tsx +58 -26
  106. package/header/lib/parts/DubLogoTitle.tsx +26 -9
  107. package/header/lib/parts/WorkdayLogoTitle.tsx +40 -11
  108. package/header/lib/parts/index.ts +2 -3
  109. package/header/lib/shared/themes.tsx +32 -56
  110. package/header/lib/shared/types.tsx +3 -9
  111. package/index.ts +1 -0
  112. package/package.json +6 -5
  113. package/search-form/LICENSE +52 -0
  114. package/search-form/README.md +6 -0
  115. package/search-form/index.ts +2 -0
  116. package/{header/lib/parts/SearchBar.tsx → search-form/lib/SearchForm.tsx} +30 -31
  117. package/search-form/lib/themes.ts +54 -0
  118. package/search-form/package.json +5 -0
  119. package/ts3.5/dist/commonjs/common/lib/theming/index.d.ts +1 -0
  120. package/ts3.5/dist/commonjs/common/lib/theming/useThemedRing.d.ts +11 -0
  121. package/ts3.5/dist/commonjs/header/index.d.ts +5 -5
  122. package/ts3.5/dist/commonjs/header/lib/GlobalHeader.d.ts +11 -2
  123. package/ts3.5/dist/commonjs/header/lib/Header.d.ts +17 -8
  124. package/ts3.5/dist/commonjs/header/lib/parts/DubLogoTitle.d.ts +13 -4
  125. package/ts3.5/dist/commonjs/header/lib/parts/WorkdayLogoTitle.d.ts +14 -5
  126. package/ts3.5/dist/commonjs/header/lib/parts/index.d.ts +2 -3
  127. package/ts3.5/dist/commonjs/header/lib/shared/themes.d.ts +28 -19
  128. package/ts3.5/dist/commonjs/header/lib/shared/types.d.ts +3 -8
  129. package/ts3.5/dist/commonjs/index.d.ts +1 -0
  130. package/ts3.5/dist/commonjs/layout/lib/utils/getValidChildren.d.ts +1 -1
  131. package/ts3.5/dist/commonjs/search-form/index.d.ts +3 -0
  132. package/ts3.5/dist/commonjs/{header/lib/parts/SearchBar.d.ts → search-form/lib/SearchForm.d.ts} +22 -23
  133. package/ts3.5/dist/commonjs/search-form/lib/themes.d.ts +21 -0
  134. package/ts3.5/dist/es6/common/lib/theming/index.d.ts +1 -0
  135. package/ts3.5/dist/es6/common/lib/theming/useThemedRing.d.ts +11 -0
  136. package/ts3.5/dist/es6/header/index.d.ts +5 -5
  137. package/ts3.5/dist/es6/header/lib/GlobalHeader.d.ts +11 -2
  138. package/ts3.5/dist/es6/header/lib/Header.d.ts +17 -8
  139. package/ts3.5/dist/es6/header/lib/parts/DubLogoTitle.d.ts +13 -4
  140. package/ts3.5/dist/es6/header/lib/parts/WorkdayLogoTitle.d.ts +14 -5
  141. package/ts3.5/dist/es6/header/lib/parts/index.d.ts +2 -3
  142. package/ts3.5/dist/es6/header/lib/shared/themes.d.ts +28 -19
  143. package/ts3.5/dist/es6/header/lib/shared/types.d.ts +3 -8
  144. package/ts3.5/dist/es6/index.d.ts +1 -0
  145. package/ts3.5/dist/es6/layout/lib/utils/getValidChildren.d.ts +1 -1
  146. package/ts3.5/dist/es6/search-form/index.d.ts +3 -0
  147. package/ts3.5/dist/es6/{header/lib/parts/SearchBar.d.ts → search-form/lib/SearchForm.d.ts} +22 -23
  148. package/ts3.5/dist/es6/search-form/lib/themes.d.ts +21 -0
  149. package/dist/commonjs/header/lib/parts/SearchBar.d.ts.map +0 -1
  150. package/dist/es6/header/lib/parts/SearchBar.d.ts.map +0 -1
@@ -7,8 +7,11 @@ import {ComboBoxMenuItemGroup, getOptionId, listBoxIdPart, getTextFromElement} f
7
7
  import uuid from 'uuid/v4';
8
8
 
9
9
  const Autocomplete = styled('ul')({
10
- padding: 0,
11
- margin: `${space.xxs} 0`,
10
+ margin: 0,
11
+ maxHeight: 200,
12
+ boxSizing: 'border-box',
13
+ overflowY: 'auto',
14
+ padding: `${space.xxs} 0`,
12
15
  });
13
16
 
14
17
  const AccessibleHide = styled('span')(accessibleHide);
@@ -106,7 +106,6 @@ const MenuContainer = styled(Card)({
106
106
  minWidth: 0,
107
107
  animation: `${fadeInKeyframes} 200ms ease-out`,
108
108
  maxHeight: 200,
109
- overflowY: 'auto',
110
109
  });
111
110
 
112
111
  const ResetButton = styled(IconButton)<{shouldShow: boolean}>(
package/common/README.md CHANGED
@@ -64,3 +64,35 @@ export const HelloWorld = ({backgroundImagePath}) => {
64
64
  );
65
65
  };
66
66
  ```
67
+
68
+ ## useThemedRing
69
+
70
+ This is a way to automatically add themed colors to your inputs. This is helpful when showing alerts to users. It supports `error`, `alert`, and `success` states. It will try and use the corresponding `main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in which case the outer ring will use the `darkest` color. This hook will also show a `focusOutline` ring when the input is focused.
71
+ Note: You should not rely on these colors alone to differentiate alerts, but use them in combination with icons or hint text.
72
+
73
+ ### Usage
74
+
75
+ ```tsx
76
+ /** @jsx jsx */
77
+ import {jsx} from '@emotion/core';
78
+ import React from 'react';
79
+ import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
80
+ import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
81
+
82
+
83
+ export const MyInput = ({handleChange}) => {
84
+ const [value, setValue] = React.useState('invalid@email');
85
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
86
+ setValue(event.target.value);
87
+ };
88
+
89
+ const alertStyles = useThemedRing('alert');
90
+
91
+ return (
92
+ <TextInput>
93
+ <TextInput.Label>Email</TextInput.Label>
94
+ <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
95
+ <TextInput.Hint>Please enter a valid email.</TextInput.Hint>
96
+ </TextInput>
97
+ );
98
+ }
@@ -1 +1,2 @@
1
1
  export * from './useThemeRTL';
2
+ export * from './useThemedRing';
@@ -0,0 +1,78 @@
1
+ import {useThemeRTL} from './useThemeRTL';
2
+ import {CanvasThemePalette, EmotionCanvasTheme} from '@workday/canvas-kit-react/common';
3
+ import {colors, CSSProperties, inputColors, statusColors} from '@workday/canvas-kit-react/tokens';
4
+ import chroma from 'chroma-js';
5
+
6
+ type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
7
+ interface ContrastColors {
8
+ outer?: string;
9
+ inner?: string;
10
+ }
11
+
12
+ const isAccessible = (foreground: string, background: string = colors.frenchVanilla100) => {
13
+ return chroma.contrast(foreground, background) >= 3;
14
+ };
15
+
16
+ const getPaletteColorsFromTheme = (
17
+ palette: CanvasThemePalette,
18
+ fallbackColors?: ContrastColors,
19
+ ): ContrastColors => {
20
+ return {
21
+ outer: isAccessible(palette.main) ? palette.main : isAccessible(palette.darkest) ? palette.darkest : fallbackColors?.outer,
22
+ inner: fallbackColors?.inner ? fallbackColors.inner : palette.main,
23
+ }
24
+ };
25
+
26
+ export function getPaletteColors(
27
+ type: paletteSelection,
28
+ theme: EmotionCanvasTheme
29
+ ): ContrastColors {
30
+ const palette = theme.canvas.palette[type];
31
+
32
+ switch (type) {
33
+ case 'error': {
34
+ return getPaletteColorsFromTheme(palette, { outer: inputColors.error.border });
35
+ }
36
+ case 'alert': {
37
+ return getPaletteColorsFromTheme(palette, { outer: colors.cantaloupe600 });
38
+ }
39
+ case 'success': {
40
+ return getPaletteColorsFromTheme(palette, {
41
+ outer: colors.greenApple600,
42
+ // The theme default for success.main is set to the darkest GreenApple
43
+ // For our default ring, we need to override it so the inner ring is a bit lighter
44
+ inner: palette.main === colors.greenApple600 ? statusColors.success : palette.main,
45
+ });
46
+ }
47
+ default: {
48
+ return getPaletteColorsFromTheme(palette);
49
+ }
50
+ }
51
+ }
52
+
53
+ export const useThemedRing = (type: paletteSelection): CSSProperties => {
54
+ const {themeRTL, theme} = useThemeRTL();
55
+
56
+ const paletteColors = getPaletteColors(type, theme);
57
+ if (!(paletteColors?.outer || paletteColors?.inner)) {
58
+ return {};
59
+ }
60
+ const errorBoxShadow = `inset 0 0 0 ${paletteColors.outer === paletteColors.inner ? 1 : 2}px ${
61
+ paletteColors.inner
62
+ }`;
63
+
64
+ return themeRTL({
65
+ borderColor: paletteColors.outer,
66
+ transition: '100ms box-shadow',
67
+ boxShadow: errorBoxShadow,
68
+ '&:hover, &:disabled': {
69
+ borderColor: paletteColors.outer,
70
+ },
71
+ '&:focus:not([disabled])': {
72
+ borderColor: paletteColors.outer,
73
+ boxShadow: `${errorBoxShadow},
74
+ 0 0 0 2px ${colors.frenchVanilla100},
75
+ 0 0 0 4px ${theme ? theme.canvas.palette.common.focusOutline : inputColors.focusBorder}`,
76
+ },
77
+ });
78
+ };
@@ -1 +1 @@
1
- {"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAUjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACjF;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,aAAa,KACzB,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,mJAwFrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAajG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACjF;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,aAAa,KACzB,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,mJAwFrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
@@ -35,8 +35,11 @@ var common_1 = require("@workday/canvas-kit-react/common");
35
35
  var Combobox_1 = require("./Combobox");
36
36
  var v4_1 = __importDefault(require("uuid/v4"));
37
37
  var Autocomplete = styled_1.default('ul')({
38
- padding: 0,
39
- margin: tokens_1.space.xxs + " 0",
38
+ margin: 0,
39
+ maxHeight: 200,
40
+ boxSizing: 'border-box',
41
+ overflowY: 'auto',
42
+ padding: tokens_1.space.xxs + " 0",
40
43
  });
41
44
  var AccessibleHide = styled_1.default('span')(common_1.accessibleHide);
42
45
  var AutocompleteList = function (_a) {
@@ -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,EAAC,cAAc,EAA+B,MAAM,kCAAkC,CAAC;AAE9F,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAMpE,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;AA8DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,wCAc9B,CAAC;AAYF,QAAA,MAAM,QAAQ,qNAuUb,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,EAAC,cAAc,EAA+B,MAAM,kCAAkC,CAAC;AAE9F,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAMpE,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,wCAc9B,CAAC;AAYF,QAAA,MAAM,QAAQ,qNAuUb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -77,7 +77,6 @@ var MenuContainer = common_1.styled(card_1.Card)({
77
77
  minWidth: 0,
78
78
  animation: fadeInKeyframes + " 200ms ease-out",
79
79
  maxHeight: 200,
80
- overflowY: 'auto',
81
80
  });
82
81
  var ResetButton = common_1.styled(button_1.IconButton)({
83
82
  width: tokens_1.space.l,
@@ -1,2 +1,3 @@
1
1
  export * from './useThemeRTL';
2
+ export * from './useThemedRing';
2
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}
@@ -4,3 +4,4 @@ function __export(m) {
4
4
  }
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  __export(require("./useThemeRTL"));
7
+ __export(require("./useThemedRing"));
@@ -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
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useThemedRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemedRing.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAS,aAAa,EAA4B,MAAM,kCAAkC,CAAC;AAGlG,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgBD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,kBAAkB,GACxB,cAAc,CAsBhB;AAED,eAAO,MAAM,aAAa,gFAyBzB,CAAC"}
@@ -0,0 +1,61 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var useThemeRTL_1 = require("./useThemeRTL");
7
+ var tokens_1 = require("@workday/canvas-kit-react/tokens");
8
+ var chroma_js_1 = __importDefault(require("chroma-js"));
9
+ var isAccessible = function (foreground, background) {
10
+ if (background === void 0) { background = tokens_1.colors.frenchVanilla100; }
11
+ return chroma_js_1.default.contrast(foreground, background) >= 3;
12
+ };
13
+ var getPaletteColorsFromTheme = function (palette, fallbackColors) {
14
+ return {
15
+ outer: isAccessible(palette.main) ? palette.main : isAccessible(palette.darkest) ? palette.darkest : fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.outer,
16
+ inner: (fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.inner) ? fallbackColors.inner : palette.main,
17
+ };
18
+ };
19
+ function getPaletteColors(type, theme) {
20
+ var palette = theme.canvas.palette[type];
21
+ switch (type) {
22
+ case 'error': {
23
+ return getPaletteColorsFromTheme(palette, { outer: tokens_1.inputColors.error.border });
24
+ }
25
+ case 'alert': {
26
+ return getPaletteColorsFromTheme(palette, { outer: tokens_1.colors.cantaloupe600 });
27
+ }
28
+ case 'success': {
29
+ return getPaletteColorsFromTheme(palette, {
30
+ outer: tokens_1.colors.greenApple600,
31
+ // The theme default for success.main is set to the darkest GreenApple
32
+ // For our default ring, we need to override it so the inner ring is a bit lighter
33
+ inner: palette.main === tokens_1.colors.greenApple600 ? tokens_1.statusColors.success : palette.main,
34
+ });
35
+ }
36
+ default: {
37
+ return getPaletteColorsFromTheme(palette);
38
+ }
39
+ }
40
+ }
41
+ exports.getPaletteColors = getPaletteColors;
42
+ exports.useThemedRing = function (type) {
43
+ var _a = useThemeRTL_1.useThemeRTL(), themeRTL = _a.themeRTL, theme = _a.theme;
44
+ var paletteColors = getPaletteColors(type, theme);
45
+ if (!((paletteColors === null || paletteColors === void 0 ? void 0 : paletteColors.outer) || (paletteColors === null || paletteColors === void 0 ? void 0 : paletteColors.inner))) {
46
+ return {};
47
+ }
48
+ var errorBoxShadow = "inset 0 0 0 " + (paletteColors.outer === paletteColors.inner ? 1 : 2) + "px " + paletteColors.inner;
49
+ return themeRTL({
50
+ borderColor: paletteColors.outer,
51
+ transition: '100ms box-shadow',
52
+ boxShadow: errorBoxShadow,
53
+ '&:hover, &:disabled': {
54
+ borderColor: paletteColors.outer,
55
+ },
56
+ '&:focus:not([disabled])': {
57
+ borderColor: paletteColors.outer,
58
+ boxShadow: errorBoxShadow + ",\n 0 0 0 2px " + tokens_1.colors.frenchVanilla100 + ",\n 0 0 0 4px " + (theme ? theme.canvas.palette.common.focusOutline : tokens_1.inputColors.focusBorder),
59
+ },
60
+ });
61
+ };
@@ -1,8 +1,8 @@
1
- import Header from './lib/Header';
2
- import GlobalHeader from './lib/GlobalHeader';
3
- export default Header;
4
- export { Header };
5
- export { GlobalHeader };
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';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../header/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAE9C,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,OAAO,EAAC,YAAY,EAAC,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../header/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,cAAc,CAAC;AAC5C,OAAO,sBAAsB,MAAM,oBAAoB,CAAC;AAExD,eAAe,gBAAgB,CAAC;AAChC,OAAO,EAAC,gBAAgB,EAAC,CAAC;AAC1B,OAAO,EAAC,sBAAsB,EAAC,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
@@ -7,9 +7,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
7
7
  };
8
8
  Object.defineProperty(exports, "__esModule", { value: true });
9
9
  var Header_1 = __importDefault(require("./lib/Header"));
10
- exports.Header = Header_1.default;
10
+ exports.DeprecatedHeader = Header_1.default;
11
11
  var GlobalHeader_1 = __importDefault(require("./lib/GlobalHeader"));
12
- exports.GlobalHeader = GlobalHeader_1.default;
12
+ exports.DeprecatedGlobalHeader = GlobalHeader_1.default;
13
13
  exports.default = Header_1.default;
14
14
  __export(require("./lib/parts"));
15
15
  __export(require("./lib/shared/themes"));
@@ -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 SearchBar component.
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
- export default class GlobalHeader extends React.Component<GlobalHeaderProps> {
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 +1 @@
1
- {"version":3,"file":"GlobalHeader.d.ts","sourceRoot":"","sources":["../../../../header/lib/GlobalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IACnE,MAAM;CAwBd"}
1
+ {"version":3,"file":"GlobalHeader.d.ts","sourceRoot":"","sources":["../../../../header/lib/GlobalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC/B;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IACpF,iBAAiB;IASV,MAAM;CAwBd"}
@@ -49,15 +49,26 @@ var React = __importStar(require("react"));
49
49
  var Header_1 = __importDefault(require("./Header"));
50
50
  var types_1 = require("./shared/types");
51
51
  var parts_1 = require("./parts");
52
- var GlobalHeader = /** @class */ (function (_super) {
53
- __extends(GlobalHeader, _super);
54
- function GlobalHeader() {
52
+ /**
53
+ * ### Deprecated Global Header
54
+ *
55
+ * As of Canvas Kit v6, this component is being soft-deprecated.
56
+ * It will be hard-deprecated (completely removed) in v7. Please see the
57
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
58
+ * for more information.
59
+ */
60
+ var DeprecatedGlobalHeader = /** @class */ (function (_super) {
61
+ __extends(DeprecatedGlobalHeader, _super);
62
+ function DeprecatedGlobalHeader() {
55
63
  return _super !== null && _super.apply(this, arguments) || this;
56
64
  }
57
- GlobalHeader.prototype.render = function () {
58
- var _a = this.props, _b = _a.brand, brand = _b === void 0 ? React.createElement(parts_1.DubLogoTitle, null) : _b, menuToggle = _a.menuToggle, onMenuClick = _a.onMenuClick, isCollapsed = _a.isCollapsed, leftSlot = _a.leftSlot, children = _a.children, elemProps = __rest(_a, ["brand", "menuToggle", "onMenuClick", "isCollapsed", "leftSlot", "children"]);
59
- return (React.createElement(Header_1.default, __assign({ brand: brand, menuToggle: menuToggle, leftSlot: leftSlot, onMenuClick: onMenuClick, variant: types_1.HeaderVariant.Global, isCollapsed: isCollapsed }, elemProps), children));
65
+ DeprecatedGlobalHeader.prototype.componentDidMount = function () {
66
+ console.warn("GlobalHeader is being deprecated and will be removed in Canvas Kit V7.\n\n For more information, please see the V6 migration guide:\n\n https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page\n ");
60
67
  };
61
- return GlobalHeader;
68
+ DeprecatedGlobalHeader.prototype.render = function () {
69
+ var _a = this.props, _b = _a.brand, brand = _b === void 0 ? React.createElement(parts_1.DeprecatedDubLogoTitle, null) : _b, menuToggle = _a.menuToggle, onMenuClick = _a.onMenuClick, isCollapsed = _a.isCollapsed, leftSlot = _a.leftSlot, children = _a.children, elemProps = __rest(_a, ["brand", "menuToggle", "onMenuClick", "isCollapsed", "leftSlot", "children"]);
70
+ return (React.createElement(Header_1.default, __assign({ brand: brand, menuToggle: menuToggle, leftSlot: leftSlot, onMenuClick: onMenuClick, variant: types_1.DeprecatedHeaderVariant.Global, isCollapsed: isCollapsed }, elemProps), children));
71
+ };
72
+ return DeprecatedGlobalHeader;
62
73
  }(React.Component));
63
- exports.default = GlobalHeader;
74
+ exports.default = DeprecatedGlobalHeader;
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { HeaderTheme, HeaderVariant } from './shared/types';
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 HeaderTheme.White
10
+ * @default DeprecatedHeaderTheme.White
11
11
  */
12
- themeColor?: HeaderTheme;
12
+ themeColor?: DeprecatedHeaderTheme;
13
13
  /**
14
14
  * The variant of the Header. Accepts `Dub` (small) or `Full` (large).
15
- * @default HeaderVariant.Dub
15
+ * @default DeprecatedHeaderVariant.Dub
16
16
  */
17
- variant?: HeaderVariant;
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 SearchBar component.
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 HeaderTheme;
51
- static Variant: typeof HeaderVariant;
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 +1 @@
1
- {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../header/lib/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAe,WAAW,EAAE,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAMxE,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAkND,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC;IAClE,MAAM,CAAC,KAAK,qBAAe;IAC3B,MAAM,CAAC,OAAO,uBAAiB;IAE/B;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,cAAc;IAuDtB,MAAM;CA0DP"}
1
+ {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../header/lib/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAEL,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,gBAAgB,CAAC;AAMxB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA4ND;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC;IAClE,MAAM,CAAC,KAAK,+BAAyB;IACrC,MAAM,CAAC,OAAO,iCAA2B;IAEzC,iBAAiB;IASjB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,cAAc;IAwDtB,MAAM;CA0DP"}
@@ -60,7 +60,9 @@ var HeaderShell = styled_1.default('div')(__assign(__assign({ display: 'flex', a
60
60
  var variant = _a.variant, themeColor = _a.themeColor;
61
61
  return (__assign(__assign({
62
62
  // Only the variant Full has a large header, all the other one (Dub, Global) have a small header height
63
- height: variant === types_1.HeaderVariant.Full ? types_1.HeaderHeight.Large : types_1.HeaderHeight.Small, background: themes_1.themes[themeColor].background }, themes_1.themes[themeColor].depth), { color: themes_1.themes[themeColor].color }));
63
+ height: variant === types_1.DeprecatedHeaderVariant.Full
64
+ ? types_1.DeprecatedHeaderHeight.Large
65
+ : types_1.DeprecatedHeaderHeight.Small, background: themes_1.deprecatedHeaderThemes[themeColor].background }, themes_1.deprecatedHeaderThemes[themeColor].depth), { color: themes_1.deprecatedHeaderThemes[themeColor].color }));
64
66
  });
65
67
  var BrandSlot = styled_1.default('div')({
66
68
  height: '100%',
@@ -77,7 +79,7 @@ var BrandLink = styled_1.default(button_1.Hyperlink)({
77
79
  });
78
80
  var navStyle = function (_a) {
79
81
  var themeColor = _a.themeColor;
80
- var theme = themes_1.themes[themeColor];
82
+ var theme = themes_1.deprecatedHeaderThemes[themeColor];
81
83
  return core_1.css({
82
84
  nav: {
83
85
  display: 'flex',
@@ -185,17 +187,17 @@ var Brand = /** @class */ (function (_super) {
185
187
  return _super !== null && _super.apply(this, arguments) || this;
186
188
  }
187
189
  Brand.prototype.render = function () {
188
- var _a = this.props, _b = _a.variant, variant = _b === void 0 ? types_1.HeaderVariant.Dub : _b, brand = _a.brand, _c = _a.themeColor, themeColor = _c === void 0 ? types_1.HeaderTheme.White : _c, title = _a.title;
190
+ var _a = this.props, _b = _a.variant, variant = _b === void 0 ? types_1.DeprecatedHeaderVariant.Dub : _b, brand = _a.brand, _c = _a.themeColor, themeColor = _c === void 0 ? types_1.DeprecatedHeaderTheme.White : _c, title = _a.title;
189
191
  switch (variant) {
190
- case types_1.HeaderVariant.Global: {
192
+ case types_1.DeprecatedHeaderVariant.Global: {
191
193
  return React.createElement("span", null, brand);
192
194
  }
193
- case types_1.HeaderVariant.Full: {
194
- return (React.createElement("span", null, brand || React.createElement(parts_1.WorkdayLogoTitle, { title: title ? title : '', themeColor: themeColor })));
195
+ case types_1.DeprecatedHeaderVariant.Full: {
196
+ return (React.createElement("span", null, brand || (React.createElement(parts_1.DeprecatedWorkdayLogoTitle, { title: title ? title : '', themeColor: themeColor }))));
195
197
  }
196
- // HeaderVariant.Dub is default
198
+ // DeprecatedHeaderVariant.Dub is default
197
199
  default: {
198
- return (React.createElement("span", null, brand || React.createElement(parts_1.DubLogoTitle, { title: title ? title : '', themeColor: themeColor })));
200
+ return (React.createElement("span", null, brand || React.createElement(parts_1.DeprecatedDubLogoTitle, { title: title ? title : '', themeColor: themeColor })));
199
201
  }
200
202
  }
201
203
  };
@@ -207,7 +209,7 @@ var MenuIconButton = /** @class */ (function (_super) {
207
209
  return _super !== null && _super.apply(this, arguments) || this;
208
210
  }
209
211
  MenuIconButton.prototype.render = function () {
210
- var _a = this.props, _b = _a.themeColor, themeColor = _b === void 0 ? types_1.HeaderTheme.White : _b, menuToggle = _a.menuToggle, onMenuClick = _a.onMenuClick;
212
+ var _a = this.props, _b = _a.themeColor, themeColor = _b === void 0 ? types_1.DeprecatedHeaderTheme.White : _b, menuToggle = _a.menuToggle, onMenuClick = _a.onMenuClick;
211
213
  if (menuToggle) {
212
214
  var menuToggleElement = menuToggle;
213
215
  var onClick = menuToggleElement.props.onClick
@@ -218,15 +220,26 @@ var MenuIconButton = /** @class */ (function (_super) {
218
220
  className: 'canvas-header--menu-icon',
219
221
  });
220
222
  }
221
- return (React.createElement(button_1.IconButton, { variant: themeColor === types_1.HeaderTheme.White ? 'circle' : 'inverse', icon: canvas_system_icons_web_1.justifyIcon, className: 'canvas-header--menu-icon', "aria-label": "Open Menu", onClick: onMenuClick }));
223
+ return (React.createElement(button_1.IconButton, { variant: themeColor === types_1.DeprecatedHeaderTheme.White ? 'circle' : 'inverse', icon: canvas_system_icons_web_1.justifyIcon, className: 'canvas-header--menu-icon', "aria-label": "Open Menu", onClick: onMenuClick }));
222
224
  };
223
225
  return MenuIconButton;
224
226
  }(React.Component));
227
+ /**
228
+ * ### Deprecated Header
229
+ *
230
+ * As of Canvas Kit v6, this component is being soft-deprecated.
231
+ * It will be hard-deprecated (completely removed) in v7. Please see the
232
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
233
+ * for more information.
234
+ */
225
235
  var Header = /** @class */ (function (_super) {
226
236
  __extends(Header, _super);
227
237
  function Header() {
228
238
  return _super !== null && _super.apply(this, arguments) || this;
229
239
  }
240
+ Header.prototype.componentDidMount = function () {
241
+ console.warn("Header is being deprecated and will be removed in Canvas Kit V7.\n\n For more information, please see the V6 migration guide:\n\n https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page\n ");
242
+ };
230
243
  /**
231
244
  * Helper that recursively maps ReactNodes to their theme-based equivalent.
232
245
  * Any children that are included in a Header may need to undergo transformation
@@ -247,7 +260,7 @@ var Header = /** @class */ (function (_super) {
247
260
  }
248
261
  var propsChildren = child.props.children;
249
262
  var singleChild = React.Children.count(propsChildren) === 1 && propsChildren;
250
- var iconButtonVariant = _this.props.themeColor === types_1.HeaderTheme.White ? 'circle' : 'inverse';
263
+ var iconButtonVariant = _this.props.themeColor === types_1.DeprecatedHeaderTheme.White ? 'circle' : 'inverse';
251
264
  // Convert old method of SystemIcon into IconButton. If SystemIcon is within a link, make sure it's passed through
252
265
  if (child.type === 'a' && singleChild && singleChild.type === icon_1.SystemIcon) {
253
266
  var href_1 = child.props.href;
@@ -283,7 +296,7 @@ var Header = /** @class */ (function (_super) {
283
296
  });
284
297
  };
285
298
  Header.prototype.render = function () {
286
- var _a = this.props, menuToggle = _a.menuToggle, _b = _a.themeColor, themeColor = _b === void 0 ? types_1.HeaderTheme.White : _b, _c = _a.variant, variant = _c === void 0 ? types_1.HeaderVariant.Dub : _c, centeredNav = _a.centeredNav, title = _a.title, brand = _a.brand, brandUrl = _a.brandUrl, onMenuClick = _a.onMenuClick, leftSlot = _a.leftSlot, isCollapsed = _a.isCollapsed, children = _a.children, elemProps = __rest(_a, ["menuToggle", "themeColor", "variant", "centeredNav", "title", "brand", "brandUrl", "onMenuClick", "leftSlot", "isCollapsed", "children"]);
299
+ var _a = this.props, menuToggle = _a.menuToggle, _b = _a.themeColor, themeColor = _b === void 0 ? types_1.DeprecatedHeaderTheme.White : _b, _c = _a.variant, variant = _c === void 0 ? types_1.DeprecatedHeaderVariant.Dub : _c, centeredNav = _a.centeredNav, title = _a.title, brand = _a.brand, brandUrl = _a.brandUrl, onMenuClick = _a.onMenuClick, leftSlot = _a.leftSlot, isCollapsed = _a.isCollapsed, children = _a.children, elemProps = __rest(_a, ["menuToggle", "themeColor", "variant", "centeredNav", "title", "brand", "brandUrl", "onMenuClick", "leftSlot", "isCollapsed", "children"]);
287
300
  /* Push everything to the right if:
288
301
  - on tablet and mobile screens
289
302
  - Search isn't enabled and the nav shouldn't be centered
@@ -301,8 +314,8 @@ var Header = /** @class */ (function (_super) {
301
314
  // TODO: This needs to get changed to IconButton when we get it restyled for headers
302
315
  React.createElement(MenuIconButton, { themeColor: themeColor, menuToggle: menuToggle, onMenuClick: onMenuClick })) : (this.renderChildren(children)))));
303
316
  };
304
- Header.Theme = types_1.HeaderTheme;
305
- Header.Variant = types_1.HeaderVariant;
317
+ Header.Theme = types_1.DeprecatedHeaderTheme;
318
+ Header.Variant = types_1.DeprecatedHeaderVariant;
306
319
  return Header;
307
320
  }(React.Component));
308
321
  exports.default = Header;
@@ -1,11 +1,11 @@
1
1
  import * as React from 'react';
2
- import { HeaderTheme } from '../shared/types';
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 HeaderTheme.White
6
+ * @default DeprecatedHeaderTheme.White
7
7
  */
8
- themeColor?: HeaderTheme;
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
- export declare class DubLogoTitle extends React.Component<DubTitleProps> {
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 +1 @@
1
- {"version":3,"file":"DubLogoTitle.d.ts","sourceRoot":"","sources":["../../../../../header/lib/parts/DubLogoTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAe,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAI1D,oBAAY,aAAa,GAAG;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AA2CF,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAC9D,MAAM;CAgBP"}
1
+ {"version":3,"file":"DubLogoTitle.d.ts","sourceRoot":"","sources":["../../../../../header/lib/parts/DubLogoTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAyB,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAI9E,oBAAY,aAAa,GAAG;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AA4CF;;;;;;;GAOG;AACH,qBAAa,sBAAuB,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACxE,iBAAiB;IAQjB,MAAM;CAgBP"}