@workday/canvas-kit-react 7.2.0-next.2 → 7.2.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.
- package/action-bar/package.json +2 -1
- package/avatar/package.json +2 -1
- package/badge/package.json +2 -1
- package/banner/package.json +2 -1
- package/button/lib/TertiaryButton.tsx +18 -7
- package/button/package.json +2 -1
- package/card/package.json +2 -1
- package/checkbox/package.json +2 -1
- package/collection/package.json +2 -1
- package/color-picker/package.json +2 -1
- package/common/package.json +2 -1
- package/dialog/package.json +2 -1
- package/disclosure/package.json +2 -1
- package/dist/commonjs/button/lib/TertiaryButton.d.ts +9 -0
- package/dist/commonjs/button/lib/TertiaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/TertiaryButton.js +9 -8
- package/dist/commonjs/pagination/lib/Pagination/common/useLiveRegion.d.ts +0 -1
- package/dist/commonjs/pagination/lib/Pagination/common/useLiveRegion.d.ts.map +1 -1
- package/dist/commonjs/pagination/lib/Pagination/common/useLiveRegion.js +1 -1
- package/dist/commonjs/popup/lib/PopupPopper.d.ts +2 -3
- package/dist/commonjs/popup/lib/PopupPopper.d.ts.map +1 -1
- package/dist/es6/button/lib/TertiaryButton.d.ts +9 -0
- package/dist/es6/button/lib/TertiaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/TertiaryButton.js +9 -8
- package/dist/es6/pagination/lib/Pagination/common/useLiveRegion.d.ts +0 -1
- package/dist/es6/pagination/lib/Pagination/common/useLiveRegion.d.ts.map +1 -1
- package/dist/es6/pagination/lib/Pagination/common/useLiveRegion.js +1 -1
- package/dist/es6/popup/lib/PopupPopper.d.ts +2 -3
- package/dist/es6/popup/lib/PopupPopper.d.ts.map +1 -1
- package/form-field/package.json +2 -1
- package/icon/package.json +2 -1
- package/layout/package.json +2 -1
- package/loading-animation/package.json +2 -1
- package/menu/package.json +2 -1
- package/modal/package.json +2 -1
- package/package.json +5 -5
- package/pagination/lib/Pagination/common/useLiveRegion.tsx +0 -2
- package/pagination/package.json +2 -1
- package/popup/lib/PopupPopper.tsx +2 -3
- package/popup/package.json +2 -1
- package/radio/package.json +2 -1
- package/segmented-control/package.json +2 -1
- package/select/package.json +2 -1
- package/side-panel/package.json +2 -1
- package/skeleton/package.json +2 -1
- package/status-indicator/package.json +2 -1
- package/switch/package.json +2 -1
- package/table/package.json +2 -1
- package/tabs/package.json +2 -1
- package/text-area/package.json +2 -1
- package/text-input/package.json +2 -1
- package/toast/package.json +2 -1
- package/tokens/package.json +2 -1
- package/tooltip/package.json +2 -1
package/action-bar/package.json
CHANGED
package/avatar/package.json
CHANGED
package/badge/package.json
CHANGED
package/banner/package.json
CHANGED
|
@@ -44,14 +44,23 @@ export interface TertiaryButtonProps extends Themeable {
|
|
|
44
44
|
* @default false
|
|
45
45
|
*/
|
|
46
46
|
shouldMirrorIcon?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* If set to `true`, transform text to all letters uppercase
|
|
49
|
+
* @default undefined
|
|
50
|
+
*/
|
|
47
51
|
allCaps?: boolean;
|
|
48
52
|
children?: React.ReactNode;
|
|
53
|
+
/**
|
|
54
|
+
* If set to `true`, make icon button available to use theme colors instead of default
|
|
55
|
+
* @default false
|
|
56
|
+
*/
|
|
57
|
+
isThemeable?: boolean;
|
|
49
58
|
}
|
|
50
59
|
|
|
51
60
|
const getTertiaryButtonColors = (
|
|
52
61
|
variant: 'inverse' | undefined,
|
|
53
62
|
theme: EmotionCanvasTheme,
|
|
54
|
-
|
|
63
|
+
hasThemeStyles: boolean
|
|
55
64
|
): ButtonColors => {
|
|
56
65
|
const {
|
|
57
66
|
canvas: {
|
|
@@ -99,27 +108,27 @@ const getTertiaryButtonColors = (
|
|
|
99
108
|
} else {
|
|
100
109
|
return {
|
|
101
110
|
default: {
|
|
102
|
-
icon:
|
|
111
|
+
icon: hasThemeStyles ? themePrimary.main : colors.blackPepper400,
|
|
103
112
|
label: themePrimary.main,
|
|
104
113
|
},
|
|
105
114
|
hover: {
|
|
106
115
|
background: colors.soap200,
|
|
107
|
-
icon:
|
|
116
|
+
icon: hasThemeStyles ? themePrimary.dark : colors.blackPepper500,
|
|
108
117
|
label: themePrimary.dark,
|
|
109
118
|
},
|
|
110
119
|
active: {
|
|
111
120
|
background: colors.soap300,
|
|
112
|
-
icon:
|
|
121
|
+
icon: hasThemeStyles ? themePrimary.dark : colors.blackPepper500,
|
|
113
122
|
label: themePrimary.dark,
|
|
114
123
|
},
|
|
115
124
|
focus: {
|
|
116
|
-
icon:
|
|
125
|
+
icon: hasThemeStyles ? themePrimary.main : colors.blackPepper500,
|
|
117
126
|
label: themePrimary.main,
|
|
118
127
|
focusRing: focusRing({innerColor: colors.blueberry400}, theme),
|
|
119
128
|
},
|
|
120
129
|
disabled: {
|
|
121
130
|
background: 'transparent',
|
|
122
|
-
icon:
|
|
131
|
+
icon: hasThemeStyles ? themePrimary.main : colors.blackPepper400,
|
|
123
132
|
label: themePrimary.main,
|
|
124
133
|
},
|
|
125
134
|
};
|
|
@@ -197,6 +206,7 @@ export const TertiaryButton = createComponent('button')({
|
|
|
197
206
|
{
|
|
198
207
|
size = 'medium',
|
|
199
208
|
iconPosition = 'start',
|
|
209
|
+
isThemeable = false,
|
|
200
210
|
variant,
|
|
201
211
|
children,
|
|
202
212
|
icon,
|
|
@@ -208,13 +218,14 @@ export const TertiaryButton = createComponent('button')({
|
|
|
208
218
|
Element
|
|
209
219
|
) => {
|
|
210
220
|
const theme = useTheme();
|
|
221
|
+
const hasThemeStyles = !!children || isThemeable;
|
|
211
222
|
|
|
212
223
|
return (
|
|
213
224
|
<StyledTertiaryButtonContainer
|
|
214
225
|
ref={ref}
|
|
215
226
|
as={Element}
|
|
216
227
|
allCaps={allCaps}
|
|
217
|
-
colors={getTertiaryButtonColors(variant, theme,
|
|
228
|
+
colors={getTertiaryButtonColors(variant, theme, hasThemeStyles)}
|
|
218
229
|
size={size}
|
|
219
230
|
padding={getPaddingStyles(icon, iconPosition, children, size)}
|
|
220
231
|
minWidth={getMinWidthStyles(children, size)}
|
package/button/package.json
CHANGED
package/card/package.json
CHANGED
package/checkbox/package.json
CHANGED
package/collection/package.json
CHANGED
package/common/package.json
CHANGED
package/dialog/package.json
CHANGED
package/disclosure/package.json
CHANGED
|
@@ -33,8 +33,17 @@ export interface TertiaryButtonProps extends Themeable {
|
|
|
33
33
|
* @default false
|
|
34
34
|
*/
|
|
35
35
|
shouldMirrorIcon?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* If set to `true`, transform text to all letters uppercase
|
|
38
|
+
* @default undefined
|
|
39
|
+
*/
|
|
36
40
|
allCaps?: boolean;
|
|
37
41
|
children?: React.ReactNode;
|
|
42
|
+
/**
|
|
43
|
+
* If set to `true`, make icon button available to use theme colors instead of default
|
|
44
|
+
* @default false
|
|
45
|
+
*/
|
|
46
|
+
isThemeable?: boolean;
|
|
38
47
|
}
|
|
39
48
|
export declare const TertiaryButton: import("../../common").ElementComponent<"button", TertiaryButtonProps>;
|
|
40
49
|
//# sourceMappingURL=TertiaryButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,aAAa,EAAE,WAAW,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,aAAa,EAAE,WAAW,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAiJD,eAAO,MAAM,cAAc,wEAoDzB,CAAC"}
|
|
@@ -46,7 +46,7 @@ var React = __importStar(require("react"));
|
|
|
46
46
|
var common_1 = require("@workday/canvas-kit-react/common");
|
|
47
47
|
var tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
48
48
|
var BaseButton_1 = require("./BaseButton");
|
|
49
|
-
var getTertiaryButtonColors = function (variant, theme,
|
|
49
|
+
var getTertiaryButtonColors = function (variant, theme, hasThemeStyles) {
|
|
50
50
|
var themePrimary = theme.canvas.palette.primary;
|
|
51
51
|
if (variant === 'inverse') {
|
|
52
52
|
return {
|
|
@@ -86,27 +86,27 @@ var getTertiaryButtonColors = function (variant, theme, children) {
|
|
|
86
86
|
else {
|
|
87
87
|
return {
|
|
88
88
|
default: {
|
|
89
|
-
icon:
|
|
89
|
+
icon: hasThemeStyles ? themePrimary.main : tokens_1.colors.blackPepper400,
|
|
90
90
|
label: themePrimary.main,
|
|
91
91
|
},
|
|
92
92
|
hover: {
|
|
93
93
|
background: tokens_1.colors.soap200,
|
|
94
|
-
icon:
|
|
94
|
+
icon: hasThemeStyles ? themePrimary.dark : tokens_1.colors.blackPepper500,
|
|
95
95
|
label: themePrimary.dark,
|
|
96
96
|
},
|
|
97
97
|
active: {
|
|
98
98
|
background: tokens_1.colors.soap300,
|
|
99
|
-
icon:
|
|
99
|
+
icon: hasThemeStyles ? themePrimary.dark : tokens_1.colors.blackPepper500,
|
|
100
100
|
label: themePrimary.dark,
|
|
101
101
|
},
|
|
102
102
|
focus: {
|
|
103
|
-
icon:
|
|
103
|
+
icon: hasThemeStyles ? themePrimary.main : tokens_1.colors.blackPepper500,
|
|
104
104
|
label: themePrimary.main,
|
|
105
105
|
focusRing: common_1.focusRing({ innerColor: tokens_1.colors.blueberry400 }, theme),
|
|
106
106
|
},
|
|
107
107
|
disabled: {
|
|
108
108
|
background: 'transparent',
|
|
109
|
-
icon:
|
|
109
|
+
icon: hasThemeStyles ? themePrimary.main : tokens_1.colors.blackPepper400,
|
|
110
110
|
label: themePrimary.main,
|
|
111
111
|
},
|
|
112
112
|
};
|
|
@@ -170,9 +170,10 @@ var getMinWidthStyles = function (children, size) {
|
|
|
170
170
|
exports.TertiaryButton = common_1.createComponent('button')({
|
|
171
171
|
displayName: 'TertiaryButton',
|
|
172
172
|
Component: function (_a, ref, Element) {
|
|
173
|
-
var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'start' : _c, variant = _a.variant, children = _a.children, icon = _a.icon,
|
|
173
|
+
var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'start' : _c, _d = _a.isThemeable, isThemeable = _d === void 0 ? false : _d, variant = _a.variant, children = _a.children, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, allCaps = _a.allCaps, elemProps = __rest(_a, ["size", "iconPosition", "isThemeable", "variant", "children", "icon", "shouldMirrorIcon", "allCaps"]);
|
|
174
174
|
var theme = common_1.useTheme();
|
|
175
|
-
|
|
175
|
+
var hasThemeStyles = !!children || isThemeable;
|
|
176
|
+
return (React.createElement(StyledTertiaryButtonContainer, __assign({ ref: ref, as: Element, allCaps: allCaps, colors: getTertiaryButtonColors(variant, theme, hasThemeStyles), size: size, padding: getPaddingStyles(icon, iconPosition, children, size), minWidth: getMinWidthStyles(children, size), style: { borderRadius: children ? tokens_1.borderRadius.m : tokens_1.borderRadius.circle } }, elemProps),
|
|
176
177
|
icon && iconPosition === 'start' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
|
|
177
178
|
children && React.createElement(StyledButtonLabel, null, children),
|
|
178
179
|
icon && iconPosition === 'end' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
declare type UseLiveRegionConfig = {
|
|
2
2
|
'aria-atomic'?: React.AriaAttributes['aria-atomic'];
|
|
3
3
|
'aria-live'?: 'polite' | 'assertive';
|
|
4
|
-
'aria-relevant'?: React.AriaAttributes['aria-relevant'];
|
|
5
4
|
role?: 'status' | 'alert' | 'log';
|
|
6
5
|
shouldAnnounceToScreenReader?: boolean;
|
|
7
6
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLiveRegion.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/common/useLiveRegion.tsx"],"names":[],"mappings":"AAAA,aAAK,mBAAmB,GAAG;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;IACpD,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrC,
|
|
1
|
+
{"version":3,"file":"useLiveRegion.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/common/useLiveRegion.tsx"],"names":[],"mappings":"AAAA,aAAK,mBAAmB,GAAG;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;IACpD,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAClC,4BAA4B,CAAC,EAAE,OAAO,CAAC;CACxC,CAAC;AAEF,wBAAgB,aAAa,CAAC,MAAM,sBAA4B,uBAW/D"}
|
|
@@ -27,7 +27,7 @@ function useLiveRegion(config) {
|
|
|
27
27
|
if (config === void 0) { config = {}; }
|
|
28
28
|
var _a = config.shouldAnnounceToScreenReader, shouldAnnounceToScreenReader = _a === void 0 ? true : _a, restConfig = __rest(config, ["shouldAnnounceToScreenReader"]);
|
|
29
29
|
if (shouldAnnounceToScreenReader) {
|
|
30
|
-
return __assign({ 'aria-atomic': true, 'aria-live': 'polite',
|
|
30
|
+
return __assign({ 'aria-atomic': true, 'aria-live': 'polite', role: 'status' }, restConfig);
|
|
31
31
|
}
|
|
32
32
|
return {};
|
|
33
33
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { Placement, PopperOptions } from './Popper';
|
|
3
|
-
export interface PopupPopperProps {
|
|
2
|
+
import { Placement, PopperOptions, PopperProps } from './Popper';
|
|
3
|
+
export interface PopupPopperProps extends PopperProps {
|
|
4
4
|
/**
|
|
5
5
|
* The placement of the `Popper` contents relative to the `anchorElement`. Accepts `auto`, `top`,
|
|
6
6
|
* `right`, `bottom`, or `left`. Each placement can also be modified using any of the following
|
|
@@ -12,7 +12,6 @@ export interface PopupPopperProps {
|
|
|
12
12
|
* The additional options passed to the Popper's `popper.js` instance.
|
|
13
13
|
*/
|
|
14
14
|
popperOptions?: Partial<PopperOptions>;
|
|
15
|
-
children?: React.ReactNode;
|
|
16
15
|
}
|
|
17
16
|
export declare const PopupPopper: import("../../common").ElementComponentM<"div", PopupPopperProps, {
|
|
18
17
|
state: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAU,WAAW,EAAC,MAAM,UAAU,CAAC;AAEvE,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;EAMtB,CAAC"}
|
|
@@ -33,8 +33,17 @@ export interface TertiaryButtonProps extends Themeable {
|
|
|
33
33
|
* @default false
|
|
34
34
|
*/
|
|
35
35
|
shouldMirrorIcon?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* If set to `true`, transform text to all letters uppercase
|
|
38
|
+
* @default undefined
|
|
39
|
+
*/
|
|
36
40
|
allCaps?: boolean;
|
|
37
41
|
children?: React.ReactNode;
|
|
42
|
+
/**
|
|
43
|
+
* If set to `true`, make icon button available to use theme colors instead of default
|
|
44
|
+
* @default false
|
|
45
|
+
*/
|
|
46
|
+
isThemeable?: boolean;
|
|
38
47
|
}
|
|
39
48
|
export declare const TertiaryButton: import("../../common").ElementComponent<"button", TertiaryButtonProps>;
|
|
40
49
|
//# sourceMappingURL=TertiaryButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,aAAa,EAAE,WAAW,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,aAAa,EAAE,WAAW,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAiJD,eAAO,MAAM,cAAc,wEAoDzB,CAAC"}
|
|
@@ -24,7 +24,7 @@ import * as React from 'react';
|
|
|
24
24
|
import { focusRing, useTheme, createComponent, styled, } from '@workday/canvas-kit-react/common';
|
|
25
25
|
import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
|
|
26
26
|
import { BaseButton } from './BaseButton';
|
|
27
|
-
var getTertiaryButtonColors = function (variant, theme,
|
|
27
|
+
var getTertiaryButtonColors = function (variant, theme, hasThemeStyles) {
|
|
28
28
|
var themePrimary = theme.canvas.palette.primary;
|
|
29
29
|
if (variant === 'inverse') {
|
|
30
30
|
return {
|
|
@@ -64,27 +64,27 @@ var getTertiaryButtonColors = function (variant, theme, children) {
|
|
|
64
64
|
else {
|
|
65
65
|
return {
|
|
66
66
|
default: {
|
|
67
|
-
icon:
|
|
67
|
+
icon: hasThemeStyles ? themePrimary.main : colors.blackPepper400,
|
|
68
68
|
label: themePrimary.main,
|
|
69
69
|
},
|
|
70
70
|
hover: {
|
|
71
71
|
background: colors.soap200,
|
|
72
|
-
icon:
|
|
72
|
+
icon: hasThemeStyles ? themePrimary.dark : colors.blackPepper500,
|
|
73
73
|
label: themePrimary.dark,
|
|
74
74
|
},
|
|
75
75
|
active: {
|
|
76
76
|
background: colors.soap300,
|
|
77
|
-
icon:
|
|
77
|
+
icon: hasThemeStyles ? themePrimary.dark : colors.blackPepper500,
|
|
78
78
|
label: themePrimary.dark,
|
|
79
79
|
},
|
|
80
80
|
focus: {
|
|
81
|
-
icon:
|
|
81
|
+
icon: hasThemeStyles ? themePrimary.main : colors.blackPepper500,
|
|
82
82
|
label: themePrimary.main,
|
|
83
83
|
focusRing: focusRing({ innerColor: colors.blueberry400 }, theme),
|
|
84
84
|
},
|
|
85
85
|
disabled: {
|
|
86
86
|
background: 'transparent',
|
|
87
|
-
icon:
|
|
87
|
+
icon: hasThemeStyles ? themePrimary.main : colors.blackPepper400,
|
|
88
88
|
label: themePrimary.main,
|
|
89
89
|
},
|
|
90
90
|
};
|
|
@@ -148,9 +148,10 @@ var getMinWidthStyles = function (children, size) {
|
|
|
148
148
|
export var TertiaryButton = createComponent('button')({
|
|
149
149
|
displayName: 'TertiaryButton',
|
|
150
150
|
Component: function (_a, ref, Element) {
|
|
151
|
-
var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'start' : _c, variant = _a.variant, children = _a.children, icon = _a.icon,
|
|
151
|
+
var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'start' : _c, _d = _a.isThemeable, isThemeable = _d === void 0 ? false : _d, variant = _a.variant, children = _a.children, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, allCaps = _a.allCaps, elemProps = __rest(_a, ["size", "iconPosition", "isThemeable", "variant", "children", "icon", "shouldMirrorIcon", "allCaps"]);
|
|
152
152
|
var theme = useTheme();
|
|
153
|
-
|
|
153
|
+
var hasThemeStyles = !!children || isThemeable;
|
|
154
|
+
return (React.createElement(StyledTertiaryButtonContainer, __assign({ ref: ref, as: Element, allCaps: allCaps, colors: getTertiaryButtonColors(variant, theme, hasThemeStyles), size: size, padding: getPaddingStyles(icon, iconPosition, children, size), minWidth: getMinWidthStyles(children, size), style: { borderRadius: children ? borderRadius.m : borderRadius.circle } }, elemProps),
|
|
154
155
|
icon && iconPosition === 'start' && (React.createElement(BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
|
|
155
156
|
children && React.createElement(StyledButtonLabel, null, children),
|
|
156
157
|
icon && iconPosition === 'end' && (React.createElement(BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
declare type UseLiveRegionConfig = {
|
|
2
2
|
'aria-atomic'?: React.AriaAttributes['aria-atomic'];
|
|
3
3
|
'aria-live'?: 'polite' | 'assertive';
|
|
4
|
-
'aria-relevant'?: React.AriaAttributes['aria-relevant'];
|
|
5
4
|
role?: 'status' | 'alert' | 'log';
|
|
6
5
|
shouldAnnounceToScreenReader?: boolean;
|
|
7
6
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLiveRegion.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/common/useLiveRegion.tsx"],"names":[],"mappings":"AAAA,aAAK,mBAAmB,GAAG;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;IACpD,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrC,
|
|
1
|
+
{"version":3,"file":"useLiveRegion.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/common/useLiveRegion.tsx"],"names":[],"mappings":"AAAA,aAAK,mBAAmB,GAAG;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;IACpD,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAClC,4BAA4B,CAAC,EAAE,OAAO,CAAC;CACxC,CAAC;AAEF,wBAAgB,aAAa,CAAC,MAAM,sBAA4B,uBAW/D"}
|
|
@@ -24,7 +24,7 @@ export function useLiveRegion(config) {
|
|
|
24
24
|
if (config === void 0) { config = {}; }
|
|
25
25
|
var _a = config.shouldAnnounceToScreenReader, shouldAnnounceToScreenReader = _a === void 0 ? true : _a, restConfig = __rest(config, ["shouldAnnounceToScreenReader"]);
|
|
26
26
|
if (shouldAnnounceToScreenReader) {
|
|
27
|
-
return __assign({ 'aria-atomic': true, 'aria-live': 'polite',
|
|
27
|
+
return __assign({ 'aria-atomic': true, 'aria-live': 'polite', role: 'status' }, restConfig);
|
|
28
28
|
}
|
|
29
29
|
return {};
|
|
30
30
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { Placement, PopperOptions } from './Popper';
|
|
3
|
-
export interface PopupPopperProps {
|
|
2
|
+
import { Placement, PopperOptions, PopperProps } from './Popper';
|
|
3
|
+
export interface PopupPopperProps extends PopperProps {
|
|
4
4
|
/**
|
|
5
5
|
* The placement of the `Popper` contents relative to the `anchorElement`. Accepts `auto`, `top`,
|
|
6
6
|
* `right`, `bottom`, or `left`. Each placement can also be modified using any of the following
|
|
@@ -12,7 +12,6 @@ export interface PopupPopperProps {
|
|
|
12
12
|
* The additional options passed to the Popper's `popper.js` instance.
|
|
13
13
|
*/
|
|
14
14
|
popperOptions?: Partial<PopperOptions>;
|
|
15
|
-
children?: React.ReactNode;
|
|
16
15
|
}
|
|
17
16
|
export declare const PopupPopper: import("../../common").ElementComponentM<"div", PopupPopperProps, {
|
|
18
17
|
state: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAU,WAAW,EAAC,MAAM,UAAU,CAAC;AAEvE,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;EAMtB,CAAC"}
|
package/form-field/package.json
CHANGED
package/icon/package.json
CHANGED
package/layout/package.json
CHANGED
package/menu/package.json
CHANGED
package/modal/package.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "7.2.
|
|
3
|
+
"version": "7.2.2",
|
|
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,9 +49,9 @@
|
|
|
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-labs-react": "^7.2.
|
|
53
|
-
"@workday/canvas-kit-popup-stack": "^7.2.
|
|
54
|
-
"@workday/canvas-kit-preview-react": "^7.2.
|
|
52
|
+
"@workday/canvas-kit-labs-react": "^7.2.2",
|
|
53
|
+
"@workday/canvas-kit-popup-stack": "^7.2.2",
|
|
54
|
+
"@workday/canvas-kit-preview-react": "^7.2.2",
|
|
55
55
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
56
56
|
"@workday/design-assets-types": "^0.2.8",
|
|
57
57
|
"chroma-js": "^2.1.0",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
71
71
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "aa0a6bd1f7e8c7c5a8e9a8c331c71eb460e4b34f"
|
|
74
74
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
type UseLiveRegionConfig = {
|
|
2
2
|
'aria-atomic'?: React.AriaAttributes['aria-atomic'];
|
|
3
3
|
'aria-live'?: 'polite' | 'assertive';
|
|
4
|
-
'aria-relevant'?: React.AriaAttributes['aria-relevant'];
|
|
5
4
|
role?: 'status' | 'alert' | 'log';
|
|
6
5
|
shouldAnnounceToScreenReader?: boolean;
|
|
7
6
|
};
|
|
@@ -12,7 +11,6 @@ export function useLiveRegion(config = {} as UseLiveRegionConfig) {
|
|
|
12
11
|
return {
|
|
13
12
|
'aria-atomic': true,
|
|
14
13
|
'aria-live': 'polite',
|
|
15
|
-
'aria-relevant': true,
|
|
16
14
|
role: 'status',
|
|
17
15
|
...restConfig,
|
|
18
16
|
} as UseLiveRegionConfig;
|
package/pagination/package.json
CHANGED
|
@@ -3,9 +3,9 @@ import * as React from 'react';
|
|
|
3
3
|
import {createSubcomponent} from '@workday/canvas-kit-react/common';
|
|
4
4
|
|
|
5
5
|
import {usePopupModel, usePopupPopper} from './hooks';
|
|
6
|
-
import {Placement, PopperOptions, Popper} from './Popper';
|
|
6
|
+
import {Placement, PopperOptions, Popper, PopperProps} from './Popper';
|
|
7
7
|
|
|
8
|
-
export interface PopupPopperProps {
|
|
8
|
+
export interface PopupPopperProps extends PopperProps {
|
|
9
9
|
/**
|
|
10
10
|
* The placement of the `Popper` contents relative to the `anchorElement`. Accepts `auto`, `top`,
|
|
11
11
|
* `right`, `bottom`, or `left`. Each placement can also be modified using any of the following
|
|
@@ -17,7 +17,6 @@ export interface PopupPopperProps {
|
|
|
17
17
|
* The additional options passed to the Popper's `popper.js` instance.
|
|
18
18
|
*/
|
|
19
19
|
popperOptions?: Partial<PopperOptions>;
|
|
20
|
-
children?: React.ReactNode;
|
|
21
20
|
}
|
|
22
21
|
|
|
23
22
|
export const PopupPopper = createSubcomponent('div')({
|
package/popup/package.json
CHANGED
package/radio/package.json
CHANGED
package/select/package.json
CHANGED
package/side-panel/package.json
CHANGED
package/skeleton/package.json
CHANGED
package/switch/package.json
CHANGED
package/table/package.json
CHANGED
package/tabs/package.json
CHANGED
package/text-area/package.json
CHANGED
package/text-input/package.json
CHANGED
package/toast/package.json
CHANGED
package/tokens/package.json
CHANGED