@workday/canvas-kit-react 8.0.0-alpha.169-next.2 → 8.0.0-alpha.174-next.2

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 (14) hide show
  1. package/common/lib/utils/elements.ts +3 -9
  2. package/dist/commonjs/common/lib/utils/elements.d.ts.map +1 -1
  3. package/dist/commonjs/common/lib/utils/elements.js +1 -8
  4. package/dist/commonjs/layout/index.d.ts +1 -0
  5. package/dist/commonjs/layout/index.d.ts.map +1 -1
  6. package/dist/commonjs/menu/lib/MenuItem.js +13 -12
  7. package/dist/es6/common/lib/utils/elements.d.ts.map +1 -1
  8. package/dist/es6/common/lib/utils/elements.js +1 -8
  9. package/dist/es6/layout/index.d.ts +1 -0
  10. package/dist/es6/layout/index.d.ts.map +1 -1
  11. package/dist/es6/menu/lib/MenuItem.js +13 -12
  12. package/layout/index.ts +1 -0
  13. package/menu/lib/MenuItem.tsx +12 -12
  14. package/package.json +3 -3
package/common/lib/utils/elements.ts CHANGED
@@ -12,15 +12,9 @@ export const isFocusable = (element: HTMLElement) => {
12
12
  const validAnchor = nodeName === 'a' && element.hasAttribute('href');
13
13
  const validAudioVideo = ['audio', 'video'].includes(nodeName) && element.hasAttribute('controls');
14
14
  const validImgObject = ['img', 'object'].includes(nodeName) && element.hasAttribute('usemap');
15
- const validNativelyFocusable = [
16
- 'button',
17
- 'details',
18
- 'embed',
19
- 'iframe',
20
- 'select',
21
- 'textarea',
22
- ].includes(nodeName) &&
23
- element.getAttribute('tabindex') !== '-1';
15
+ const validNativelyFocusable =
16
+ ['button', 'details', 'embed', 'iframe', 'select', 'textarea'].includes(nodeName) &&
17
+ element.getAttribute('tabindex') !== '-1';
24
18
  const hasTabIndex = element.getAttribute('tabindex') === '0';
25
19
 
26
20
  return (
package/dist/commonjs/common/lib/utils/elements.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,WAAW,mBA6B/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW/E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW9E,CAAC"}
1
+ {"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,WAAW,mBAuB/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW/E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW9E,CAAC"}
package/dist/commonjs/common/lib/utils/elements.js CHANGED
@@ -14,14 +14,7 @@ var isFocusable = function (element) {
14
14
  var validAnchor = nodeName === 'a' && element.hasAttribute('href');
15
15
  var validAudioVideo = ['audio', 'video'].includes(nodeName) && element.hasAttribute('controls');
16
16
  var validImgObject = ['img', 'object'].includes(nodeName) && element.hasAttribute('usemap');
17
- var validNativelyFocusable = [
18
- 'button',
19
- 'details',
20
- 'embed',
21
- 'iframe',
22
- 'select',
23
- 'textarea',
24
- ].includes(nodeName) &&
17
+ var validNativelyFocusable = ['button', 'details', 'embed', 'iframe', 'select', 'textarea'].includes(nodeName) &&
25
18
  element.getAttribute('tabindex') !== '-1';
26
19
  var hasTabIndex = element.getAttribute('tabindex') === '0';
27
20
  return (validInput ||
package/dist/commonjs/layout/index.d.ts CHANGED
@@ -16,5 +16,6 @@ export * from './lib/Grid';
16
16
  export * from './lib/Stack';
17
17
  export type { FlexStyleProps } from './lib/utils/flex';
18
18
  export type { GridStyleProps } from './lib/utils/grid';
19
+ export type { GridItemStyleProps } from './lib/utils/gridItem';
19
20
  export type { StackSpacing, StackDirection, StackStyleProps } from './lib/utils/stack';
20
21
  //# sourceMappingURL=index.d.ts.map
package/dist/commonjs/layout/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
package/dist/commonjs/menu/lib/MenuItem.js CHANGED
@@ -55,16 +55,14 @@ var StyledItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
55
55
  var theme = _a.theme;
56
56
  return __assign(__assign({}, tokens_1.type.levels.subtext.large), (_b = { '& > *:not(style) ~ *:not(style)': {
57
57
  marginLeft: tokens_1.space.xxs,
58
- }, display: 'block', width: '100%', padding: tokens_1.space.xxs + " " + tokens_1.space.s, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.blackPepper300, borderWidth: 0, textAlign: 'left', transition: 'background-color 80ms, color 80ms', '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
59
- fill: tokens_1.iconColors.active,
60
- }, '&:hover, &[aria-selected=true]': {
58
+ }, display: 'block', width: '100%', padding: tokens_1.space.xxs + " " + tokens_1.space.s, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.blackPepper300, borderWidth: 0, textAlign: 'left', transition: 'background-color 80ms, color 80ms', '&:hover, &[aria-selected=true]': {
61
59
  backgroundColor: theme.canvas.palette.primary.lightest,
62
60
  color: tokens_1.colors.blackPepper300,
63
61
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
64
62
  fill: tokens_1.iconColors.hover,
65
63
  },
66
64
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
67
- fill: tokens_1.iconColors.active,
65
+ fill: tokens_1.iconColors.hover,
68
66
  },
69
67
  }, '&:focus': {
70
68
  outline: 'none',
@@ -73,15 +71,15 @@ var StyledItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
73
71
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
74
72
  fill: tokens_1.iconColors.inverse,
75
73
  },
74
+ '*:hover .wd-icon-fill': {
75
+ fill: tokens_1.iconColors.inverse,
76
+ },
76
77
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
77
78
  fill: tokens_1.iconColors.inverse,
78
79
  },
79
80
  } }, _b["[data-whatinput]"] = {
80
81
  backgroundColor: 'inherit',
81
82
  color: tokens_1.colors.blackPepper300,
82
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
83
- fill: tokens_1.iconColors.active,
84
- },
85
83
  '&:hover, &[aria-selected=true]': {
86
84
  backgroundColor: theme.canvas.palette.primary.lightest,
87
85
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
@@ -90,7 +88,7 @@ var StyledItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
90
88
  },
91
89
  '&:focus': {
92
90
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
93
- fill: tokens_1.iconColors.active,
91
+ fill: tokens_1.iconColors.hover,
94
92
  },
95
93
  },
96
94
  }, _b.backgroundColor = 'inherit', _b['&:disabled, &[aria-disabled]'] = {
@@ -104,10 +102,13 @@ var StyledItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
104
102
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
105
103
  fill: tokens_1.iconColors.disabled,
106
104
  },
107
- '&:hover, &[aria-selected=true]': {
108
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
109
- fill: tokens_1.iconColors.disabled,
110
- },
105
+ },
106
+ '&:hover, &[aria-selected=true]': {
107
+ '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
108
+ fill: tokens_1.iconColors.disabled,
109
+ },
110
+ '*:hover .wd-icon-fill': {
111
+ fill: tokens_1.iconColors.disabled,
111
112
  },
112
113
  },
113
114
  }, _b));
package/dist/es6/common/lib/utils/elements.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,WAAW,mBA6B/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW/E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW9E,CAAC"}
1
+ {"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,WAAW,mBAuB/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW/E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW9E,CAAC"}
package/dist/es6/common/lib/utils/elements.js CHANGED
@@ -11,14 +11,7 @@ export var isFocusable = function (element) {
11
11
  var validAnchor = nodeName === 'a' && element.hasAttribute('href');
12
12
  var validAudioVideo = ['audio', 'video'].includes(nodeName) && element.hasAttribute('controls');
13
13
  var validImgObject = ['img', 'object'].includes(nodeName) && element.hasAttribute('usemap');
14
- var validNativelyFocusable = [
15
- 'button',
16
- 'details',
17
- 'embed',
18
- 'iframe',
19
- 'select',
20
- 'textarea',
21
- ].includes(nodeName) &&
14
+ var validNativelyFocusable = ['button', 'details', 'embed', 'iframe', 'select', 'textarea'].includes(nodeName) &&
22
15
  element.getAttribute('tabindex') !== '-1';
23
16
  var hasTabIndex = element.getAttribute('tabindex') === '0';
24
17
  return (validInput ||
package/dist/es6/layout/index.d.ts CHANGED
@@ -16,5 +16,6 @@ export * from './lib/Grid';
16
16
  export * from './lib/Stack';
17
17
  export type { FlexStyleProps } from './lib/utils/flex';
18
18
  export type { GridStyleProps } from './lib/utils/grid';
19
+ export type { GridItemStyleProps } from './lib/utils/gridItem';
19
20
  export type { StackSpacing, StackDirection, StackStyleProps } from './lib/utils/stack';
20
21
  //# sourceMappingURL=index.d.ts.map
package/dist/es6/layout/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
package/dist/es6/menu/lib/MenuItem.js CHANGED
@@ -33,16 +33,14 @@ var StyledItem = styled(Box.as('button'))(function (_a) {
33
33
  var theme = _a.theme;
34
34
  return __assign(__assign({}, type.levels.subtext.large), (_b = { '& > *:not(style) ~ *:not(style)': {
35
35
  marginLeft: space.xxs,
36
- }, display: 'block', width: '100%', padding: space.xxs + " " + space.s, boxSizing: 'border-box', cursor: 'pointer', color: colors.blackPepper300, borderWidth: 0, textAlign: 'left', transition: 'background-color 80ms, color 80ms', '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
37
- fill: iconColors.active,
38
- }, '&:hover, &[aria-selected=true]': {
36
+ }, display: 'block', width: '100%', padding: space.xxs + " " + space.s, boxSizing: 'border-box', cursor: 'pointer', color: colors.blackPepper300, borderWidth: 0, textAlign: 'left', transition: 'background-color 80ms, color 80ms', '&:hover, &[aria-selected=true]': {
39
37
  backgroundColor: theme.canvas.palette.primary.lightest,
40
38
  color: colors.blackPepper300,
41
39
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
42
40
  fill: iconColors.hover,
43
41
  },
44
42
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
45
- fill: iconColors.active,
43
+ fill: iconColors.hover,
46
44
  },
47
45
  }, '&:focus': {
48
46
  outline: 'none',
@@ -51,15 +49,15 @@ var StyledItem = styled(Box.as('button'))(function (_a) {
51
49
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
52
50
  fill: iconColors.inverse,
53
51
  },
52
+ '*:hover .wd-icon-fill': {
53
+ fill: iconColors.inverse,
54
+ },
54
55
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
55
56
  fill: iconColors.inverse,
56
57
  },
57
58
  } }, _b["[data-whatinput]"] = {
58
59
  backgroundColor: 'inherit',
59
60
  color: colors.blackPepper300,
60
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
61
- fill: iconColors.active,
62
- },
63
61
  '&:hover, &[aria-selected=true]': {
64
62
  backgroundColor: theme.canvas.palette.primary.lightest,
65
63
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
@@ -68,7 +66,7 @@ var StyledItem = styled(Box.as('button'))(function (_a) {
68
66
  },
69
67
  '&:focus': {
70
68
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
71
- fill: iconColors.active,
69
+ fill: iconColors.hover,
72
70
  },
73
71
  },
74
72
  }, _b.backgroundColor = 'inherit', _b['&:disabled, &[aria-disabled]'] = {
@@ -82,10 +80,13 @@ var StyledItem = styled(Box.as('button'))(function (_a) {
82
80
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
83
81
  fill: iconColors.disabled,
84
82
  },
85
- '&:hover, &[aria-selected=true]': {
86
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
87
- fill: iconColors.disabled,
88
- },
83
+ },
84
+ '&:hover, &[aria-selected=true]': {
85
+ '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
86
+ fill: iconColors.disabled,
87
+ },
88
+ '*:hover .wd-icon-fill': {
89
+ fill: iconColors.disabled,
89
90
  },
90
91
  },
91
92
  }, _b));
package/layout/index.ts CHANGED
@@ -17,4 +17,5 @@ export * from './lib/Grid';
17
17
  export * from './lib/Stack';
18
18
  export type { FlexStyleProps } from './lib/utils/flex';
19
19
  export type { GridStyleProps } from './lib/utils/grid';
20
+ export type { GridItemStyleProps } from './lib/utils/gridItem';
20
21
  export type { StackSpacing, StackDirection, StackStyleProps } from './lib/utils/stack';
package/menu/lib/MenuItem.tsx CHANGED
@@ -56,9 +56,6 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
56
56
  borderWidth: 0,
57
57
  textAlign: 'left',
58
58
  transition: 'background-color 80ms, color 80ms',
59
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
60
- fill: iconColors.active,
61
- },
62
59
  '&:hover, &[aria-selected=true]': {
63
60
  backgroundColor: theme.canvas.palette.primary.lightest,
64
61
  color: colors.blackPepper300,
@@ -66,7 +63,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
66
63
  fill: iconColors.hover,
67
64
  },
68
65
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
69
- fill: iconColors.active,
66
+ fill: iconColors.hover,
70
67
  },
71
68
  },
72
69
  '&:focus': {
@@ -76,6 +73,9 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
76
73
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
77
74
  fill: iconColors.inverse,
78
75
  },
76
+ '*:hover .wd-icon-fill': {
77
+ fill: iconColors.inverse,
78
+ },
79
79
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
80
80
  fill: iconColors.inverse,
81
81
  },
@@ -84,9 +84,6 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
84
84
  [`[data-whatinput]`]: {
85
85
  backgroundColor: 'inherit',
86
86
  color: colors.blackPepper300,
87
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
88
- fill: iconColors.active,
89
- },
90
87
  '&:hover, &[aria-selected=true]': {
91
88
  backgroundColor: theme.canvas.palette.primary.lightest,
92
89
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
@@ -95,7 +92,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
95
92
  },
96
93
  '&:focus': {
97
94
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
98
- fill: iconColors.active,
95
+ fill: iconColors.hover,
99
96
  },
100
97
  },
101
98
  },
@@ -111,10 +108,13 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
111
108
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
112
109
  fill: iconColors.disabled,
113
110
  },
114
- '&:hover, &[aria-selected=true]': {
115
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
116
- fill: iconColors.disabled,
117
- },
111
+ },
112
+ '&:hover, &[aria-selected=true]': {
113
+ '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
114
+ fill: iconColors.disabled,
115
+ },
116
+ '*:hover .wd-icon-fill': {
117
+ fill: iconColors.disabled,
118
118
  },
119
119
  },
120
120
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "8.0.0-alpha.169-next.2+3b16056e",
3
+ "version": "8.0.0-alpha.174-next.2+fe2aba1d",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -49,7 +49,7 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.169-next.2+3b16056e",
52
+ "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.174-next.2+fe2aba1d",
53
53
  "@workday/canvas-system-icons-web": "^3.0.0",
54
54
  "@workday/design-assets-types": "^0.2.8",
55
55
  "chroma-js": "^2.1.0",
@@ -68,5 +68,5 @@
68
68
  "@workday/canvas-accent-icons-web": "^3.0.0",
69
69
  "@workday/canvas-applet-icons-web": "^2.0.0"
70
70
  },
71
- "gitHead": "3b16056e9e93ebff319e07f12953ba441c9106b7"
71
+ "gitHead": "fe2aba1dd3f5bce7e27ca37cbc76d0d2ba17f25b"
72
72
  }