@workday/canvas-kit-react 9.0.16 → 9.0.18

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 (10) hide show
  1. package/breadcrumbs/lib/BreadcrumbsLink.tsx +1 -1
  2. package/button/lib/BaseButton.tsx +10 -10
  3. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsLink.js +1 -1
  4. package/dist/commonjs/button/lib/BaseButton.js +10 -10
  5. package/dist/commonjs/icon/lib/Svg.js +1 -1
  6. package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.js +1 -1
  7. package/dist/es6/button/lib/BaseButton.js +10 -10
  8. package/dist/es6/icon/lib/Svg.js +1 -1
  9. package/icon/lib/Svg.tsx +1 -1
  10. package/package.json +3 -3
package/breadcrumbs/lib/BreadcrumbsLink.tsx CHANGED
@@ -27,8 +27,8 @@ const StyledLink = styled(Hyperlink)(
27
27
  ...subtextLargeStyles,
28
28
  },
29
29
  ({maxWidth}: StyledLinkProps) => ({
30
- maxWidth,
31
30
  ...ellipsisStyles,
31
+ maxWidth,
32
32
  })
33
33
  );
34
34
 
package/button/lib/BaseButton.tsx CHANGED
@@ -156,62 +156,62 @@ const ButtonContainer = styled('button')<StyledType & ButtonContainerProps>(
156
156
  }
157
157
 
158
158
  const baseStyles = {
159
- backgroundColor: colors.default.background,
160
- borderColor: colors.default.border,
161
- color: colors.default.label,
162
159
  ...(colors.default.icon && {
163
160
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2, .wd-icon-background': {
164
161
  transition: 'fill 120ms ease-in',
165
162
  },
166
163
  ...getIconColorSelectors(theme, colors.default.icon, fillIcon),
167
164
  }),
165
+ backgroundColor: colors.default.background,
166
+ borderColor: colors.default.border,
167
+ color: colors.default.label,
168
168
  };
169
169
 
170
170
  const hoverStyles = {
171
171
  '&:hover': {
172
+ ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
172
173
  backgroundColor: colors.hover.background,
173
174
  borderColor: colors.hover.border,
174
175
  color: colors.hover.label,
175
- ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
176
176
  },
177
177
  };
178
178
 
179
179
  const activeStyles = {
180
180
  '&:active, &:focus:active, &:hover:active': {
181
+ ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
181
182
  backgroundColor: colors.active.background,
182
183
  borderColor: colors.active.border,
183
184
  color: colors.active.label,
184
- ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
185
185
  },
186
186
  };
187
187
 
188
188
  return {
189
189
  ...baseStyles,
190
190
  '&:focus': {
191
+ ...(colors.focus.focusRing || focusRing({separation: 2}, theme)),
192
+ ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
191
193
  backgroundColor: colors.focus.background,
192
194
  borderColor: colors.focus.border,
193
195
  color: colors.focus.label,
194
- ...(colors.focus.focusRing || focusRing({separation: 2}, theme)),
195
- ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
196
196
  },
197
197
 
198
198
  ...activeStyles,
199
199
  ...hoverStyles,
200
200
  '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
201
+ ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
201
202
  backgroundColor: colors.disabled.background,
202
203
  borderColor: colors.disabled.border,
203
204
  color: colors.disabled.label,
204
205
  opacity: colors.disabled.opacity,
205
- ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
206
206
  },
207
207
  ...mouseFocusBehavior({
208
208
  '&:focus': {
209
209
  ...baseStyles,
210
+ ...hoverStyles,
211
+ ...activeStyles,
210
212
  outline: 'none',
211
213
  boxShadow: 'none',
212
214
  animation: 'none',
213
- ...hoverStyles,
214
- ...activeStyles,
215
215
  },
216
216
  }),
217
217
  };
package/dist/commonjs/breadcrumbs/lib/BreadcrumbsLink.js CHANGED
@@ -13,8 +13,8 @@ const { color, ...subtextLargeStyles } = tokens_1.type.levels.subtext.large;
13
13
  const StyledLink = common_1.styled(button_1.Hyperlink)({
14
14
  ...subtextLargeStyles,
15
15
  }, ({ maxWidth }) => ({
16
- maxWidth,
17
16
  ...common_1.ellipsisStyles,
17
+ maxWidth,
18
18
  }));
19
19
  exports.BreadcrumbsLink = common_1.createComponent('a')({
20
20
  displayName: 'Breadcrumbs.Link',
package/dist/commonjs/button/lib/BaseButton.js CHANGED
@@ -119,58 +119,58 @@ const ButtonContainer = common_1.styled('button')({
119
119
  return;
120
120
  }
121
121
  const baseStyles = {
122
- backgroundColor: colors.default.background,
123
- borderColor: colors.default.border,
124
- color: colors.default.label,
125
122
  ...(colors.default.icon && {
126
123
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2, .wd-icon-background': {
127
124
  transition: 'fill 120ms ease-in',
128
125
  },
129
126
  ...getIconColorSelectors(theme, colors.default.icon, fillIcon),
130
127
  }),
128
+ backgroundColor: colors.default.background,
129
+ borderColor: colors.default.border,
130
+ color: colors.default.label,
131
131
  };
132
132
  const hoverStyles = {
133
133
  '&:hover': {
134
+ ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
134
135
  backgroundColor: colors.hover.background,
135
136
  borderColor: colors.hover.border,
136
137
  color: colors.hover.label,
137
- ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
138
138
  },
139
139
  };
140
140
  const activeStyles = {
141
141
  '&:active, &:focus:active, &:hover:active': {
142
+ ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
142
143
  backgroundColor: colors.active.background,
143
144
  borderColor: colors.active.border,
144
145
  color: colors.active.label,
145
- ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
146
146
  },
147
147
  };
148
148
  return {
149
149
  ...baseStyles,
150
150
  '&:focus': {
151
+ ...(colors.focus.focusRing || common_1.focusRing({ separation: 2 }, theme)),
152
+ ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
151
153
  backgroundColor: colors.focus.background,
152
154
  borderColor: colors.focus.border,
153
155
  color: colors.focus.label,
154
- ...(colors.focus.focusRing || common_1.focusRing({ separation: 2 }, theme)),
155
- ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
156
156
  },
157
157
  ...activeStyles,
158
158
  ...hoverStyles,
159
159
  '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
160
+ ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
160
161
  backgroundColor: colors.disabled.background,
161
162
  borderColor: colors.disabled.border,
162
163
  color: colors.disabled.label,
163
164
  opacity: colors.disabled.opacity,
164
- ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
165
165
  },
166
166
  ...common_1.mouseFocusBehavior({
167
167
  '&:focus': {
168
168
  ...baseStyles,
169
+ ...hoverStyles,
170
+ ...activeStyles,
169
171
  outline: 'none',
170
172
  boxShadow: 'none',
171
173
  animation: 'none',
172
- ...hoverStyles,
173
- ...activeStyles,
174
174
  },
175
175
  }),
176
176
  };
package/dist/commonjs/icon/lib/Svg.js CHANGED
@@ -28,8 +28,8 @@ const StyledIconSpan = common_1.styled(layout_1.Box.as('span'))({
28
28
  display: 'inline-block',
29
29
  '> svg': { display: 'block' },
30
30
  }, ({ shouldMirror, styles }) => ({
31
- transform: shouldMirror ? 'scaleX(-1)' : undefined,
32
31
  ...styles,
32
+ transform: shouldMirror ? 'scaleX(-1)' : undefined,
33
33
  }));
34
34
  exports.Svg = common_1.createComponent('span')({
35
35
  displayName: 'Svg',
package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.js CHANGED
@@ -7,8 +7,8 @@ const { color, ...subtextLargeStyles } = type.levels.subtext.large;
7
7
  const StyledLink = styled(Hyperlink)({
8
8
  ...subtextLargeStyles,
9
9
  }, ({ maxWidth }) => ({
10
- maxWidth,
11
10
  ...ellipsisStyles,
11
+ maxWidth,
12
12
  }));
13
13
  export const BreadcrumbsLink = createComponent('a')({
14
14
  displayName: 'Breadcrumbs.Link',
package/dist/es6/button/lib/BaseButton.js CHANGED
@@ -97,58 +97,58 @@ const ButtonContainer = styled('button')({
97
97
  return;
98
98
  }
99
99
  const baseStyles = {
100
- backgroundColor: colors.default.background,
101
- borderColor: colors.default.border,
102
- color: colors.default.label,
103
100
  ...(colors.default.icon && {
104
101
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2, .wd-icon-background': {
105
102
  transition: 'fill 120ms ease-in',
106
103
  },
107
104
  ...getIconColorSelectors(theme, colors.default.icon, fillIcon),
108
105
  }),
106
+ backgroundColor: colors.default.background,
107
+ borderColor: colors.default.border,
108
+ color: colors.default.label,
109
109
  };
110
110
  const hoverStyles = {
111
111
  '&:hover': {
112
+ ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
112
113
  backgroundColor: colors.hover.background,
113
114
  borderColor: colors.hover.border,
114
115
  color: colors.hover.label,
115
- ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
116
116
  },
117
117
  };
118
118
  const activeStyles = {
119
119
  '&:active, &:focus:active, &:hover:active': {
120
+ ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
120
121
  backgroundColor: colors.active.background,
121
122
  borderColor: colors.active.border,
122
123
  color: colors.active.label,
123
- ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
124
124
  },
125
125
  };
126
126
  return {
127
127
  ...baseStyles,
128
128
  '&:focus': {
129
+ ...(colors.focus.focusRing || focusRing({ separation: 2 }, theme)),
130
+ ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
129
131
  backgroundColor: colors.focus.background,
130
132
  borderColor: colors.focus.border,
131
133
  color: colors.focus.label,
132
- ...(colors.focus.focusRing || focusRing({ separation: 2 }, theme)),
133
- ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
134
134
  },
135
135
  ...activeStyles,
136
136
  ...hoverStyles,
137
137
  '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
138
+ ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
138
139
  backgroundColor: colors.disabled.background,
139
140
  borderColor: colors.disabled.border,
140
141
  color: colors.disabled.label,
141
142
  opacity: colors.disabled.opacity,
142
- ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
143
143
  },
144
144
  ...mouseFocusBehavior({
145
145
  '&:focus': {
146
146
  ...baseStyles,
147
+ ...hoverStyles,
148
+ ...activeStyles,
147
149
  outline: 'none',
148
150
  boxShadow: 'none',
149
151
  animation: 'none',
150
- ...hoverStyles,
151
- ...activeStyles,
152
152
  },
153
153
  }),
154
154
  };
package/dist/es6/icon/lib/Svg.js CHANGED
@@ -6,8 +6,8 @@ const StyledIconSpan = styled(Box.as('span'))({
6
6
  display: 'inline-block',
7
7
  '> svg': { display: 'block' },
8
8
  }, ({ shouldMirror, styles }) => ({
9
- transform: shouldMirror ? 'scaleX(-1)' : undefined,
10
9
  ...styles,
10
+ transform: shouldMirror ? 'scaleX(-1)' : undefined,
11
11
  }));
12
12
  export const Svg = createComponent('span')({
13
13
  displayName: 'Svg',
package/icon/lib/Svg.tsx CHANGED
@@ -24,8 +24,8 @@ const StyledIconSpan = styled(Box.as('span'))<
24
24
  '> svg': {display: 'block'},
25
25
  },
26
26
  ({shouldMirror, styles}) => ({
27
- transform: shouldMirror ? 'scaleX(-1)' : undefined,
28
27
  ...styles,
28
+ transform: shouldMirror ? 'scaleX(-1)' : undefined,
29
29
  })
30
30
  );
31
31
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "9.0.16",
3
+ "version": "9.0.18",
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": "^9.0.16",
52
+ "@workday/canvas-kit-popup-stack": "^9.0.18",
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",
@@ -66,5 +66,5 @@
66
66
  "@workday/canvas-accent-icons-web": "^3.0.0",
67
67
  "@workday/canvas-applet-icons-web": "^2.0.0"
68
68
  },
69
- "gitHead": "9d5acdca5b46550d3a8063682859f30fa0d7d6ba"
69
+ "gitHead": "31fdf36807a535f09b480a87b5b907780e9443a5"
70
70
  }