@workday/canvas-kit-react 7.1.0-next.1 → 7.1.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 (6) hide show
  1. package/dist/commonjs/pagination/lib/Pagination/PageButton.d.ts.map +1 -1
  2. package/dist/commonjs/pagination/lib/Pagination/PageButton.js +8 -6
  3. package/dist/es6/pagination/lib/Pagination/PageButton.d.ts.map +1 -1
  4. package/dist/es6/pagination/lib/Pagination/PageButton.js +9 -7
  5. package/package.json +8 -7
  6. package/pagination/lib/Pagination/PageButton.tsx +13 -7
package/dist/commonjs/pagination/lib/Pagination/PageButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PageButton.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAwCxC,oBAAY,eAAe,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC5E,KAAK,EAAE,eAAe,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,UAAU,2DAMpB,eAAe,gBAoBjB,CAAC"}
1
+ {"version":3,"file":"PageButton.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AA6CxC,oBAAY,eAAe,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC5E,KAAK,EAAE,eAAe,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,UAAU,2DAMpB,eAAe,gBAqBjB,CAAC"}
package/dist/commonjs/pagination/lib/Pagination/PageButton.js CHANGED
@@ -57,22 +57,23 @@ var StyledPageButton = common_1.styled(button_1.BaseButton)({
57
57
  fontWeight: toggled ? 700 : 'normal',
58
58
  };
59
59
  });
60
- var getPaginationButtonColors = function (toggled) {
60
+ var getPaginationButtonColors = function (toggled, theme) {
61
+ var themePrimary = theme.canvas.palette.primary;
61
62
  return {
62
63
  default: {
63
- background: toggled ? tokens_1.colors.blueberry400 : 'transparent',
64
+ background: toggled ? themePrimary.main : 'transparent',
64
65
  label: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.blackPepper400,
65
66
  },
66
67
  hover: {
67
- background: toggled ? tokens_1.colors.blueberry400 : tokens_1.colors.soap300,
68
+ background: toggled ? themePrimary.main : tokens_1.colors.soap300,
68
69
  label: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.blackPepper400,
69
70
  },
70
71
  active: {
71
- background: toggled ? tokens_1.colors.blueberry400 : 'transparent',
72
+ background: toggled ? themePrimary.main : 'transparent',
72
73
  label: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.blackPepper400,
73
74
  },
74
75
  focus: {
75
- background: toggled ? tokens_1.colors.blueberry400 : 'transparent',
76
+ background: toggled ? themePrimary.main : 'transparent',
76
77
  label: toggled ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.blackPepper400,
77
78
  },
78
79
  disabled: {
@@ -83,10 +84,11 @@ var getPaginationButtonColors = function (toggled) {
83
84
  var PageButton = function (_a) {
84
85
  var model = _a.model, onClick = _a.onClick, pageNumber = _a.pageNumber, children = _a.children, elemProps = __rest(_a, ["model", "onClick", "pageNumber", "children"]);
85
86
  var isCurrentPage = pageNumber === model.state.currentPage;
87
+ var theme = common_1.useTheme();
86
88
  var handleClick = function (e) {
87
89
  onClick === null || onClick === void 0 ? void 0 : onClick(e);
88
90
  model.events.goTo(pageNumber);
89
91
  };
90
- return (React.createElement(StyledPageButton, __assign({ "aria-current": isCurrentPage ? 'page' : undefined, colors: getPaginationButtonColors(isCurrentPage), "aria-pressed": undefined, onClick: handleClick, toggled: isCurrentPage }, elemProps), children || pageNumber));
92
+ return (React.createElement(StyledPageButton, __assign({ "aria-current": isCurrentPage ? 'page' : undefined, colors: getPaginationButtonColors(isCurrentPage, theme), "aria-pressed": undefined, onClick: handleClick, toggled: isCurrentPage }, elemProps), children || pageNumber));
91
93
  };
92
94
  exports.PageButton = PageButton;
package/dist/es6/pagination/lib/Pagination/PageButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PageButton.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAwCxC,oBAAY,eAAe,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC5E,KAAK,EAAE,eAAe,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,UAAU,2DAMpB,eAAe,gBAoBjB,CAAC"}
1
+ {"version":3,"file":"PageButton.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/PageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AA6CxC,oBAAY,eAAe,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC5E,KAAK,EAAE,eAAe,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,UAAU,2DAMpB,eAAe,gBAqBjB,CAAC"}
package/dist/es6/pagination/lib/Pagination/PageButton.js CHANGED
@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
23
  import * as React from 'react';
24
- import { styled } from '@workday/canvas-kit-react/common';
24
+ import { styled, useTheme } from '@workday/canvas-kit-react/common';
25
25
  import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
26
26
  import { BaseButton } from '@workday/canvas-kit-react/button';
27
27
  var StyledPageButton = styled(BaseButton)({
@@ -35,22 +35,23 @@ var StyledPageButton = styled(BaseButton)({
35
35
  fontWeight: toggled ? 700 : 'normal',
36
36
  };
37
37
  });
38
- var getPaginationButtonColors = function (toggled) {
38
+ var getPaginationButtonColors = function (toggled, theme) {
39
+ var themePrimary = theme.canvas.palette.primary;
39
40
  return {
40
41
  default: {
41
- background: toggled ? colors.blueberry400 : 'transparent',
42
+ background: toggled ? themePrimary.main : 'transparent',
42
43
  label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
43
44
  },
44
45
  hover: {
45
- background: toggled ? colors.blueberry400 : colors.soap300,
46
+ background: toggled ? themePrimary.main : colors.soap300,
46
47
  label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
47
48
  },
48
49
  active: {
49
- background: toggled ? colors.blueberry400 : 'transparent',
50
+ background: toggled ? themePrimary.main : 'transparent',
50
51
  label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
51
52
  },
52
53
  focus: {
53
- background: toggled ? colors.blueberry400 : 'transparent',
54
+ background: toggled ? themePrimary.main : 'transparent',
54
55
  label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
55
56
  },
56
57
  disabled: {
@@ -61,9 +62,10 @@ var getPaginationButtonColors = function (toggled) {
61
62
  export var PageButton = function (_a) {
62
63
  var model = _a.model, onClick = _a.onClick, pageNumber = _a.pageNumber, children = _a.children, elemProps = __rest(_a, ["model", "onClick", "pageNumber", "children"]);
63
64
  var isCurrentPage = pageNumber === model.state.currentPage;
65
+ var theme = useTheme();
64
66
  var handleClick = function (e) {
65
67
  onClick === null || onClick === void 0 ? void 0 : onClick(e);
66
68
  model.events.goTo(pageNumber);
67
69
  };
68
- return (React.createElement(StyledPageButton, __assign({ "aria-current": isCurrentPage ? 'page' : undefined, colors: getPaginationButtonColors(isCurrentPage), "aria-pressed": undefined, onClick: handleClick, toggled: isCurrentPage }, elemProps), children || pageNumber));
70
+ return (React.createElement(StyledPageButton, __assign({ "aria-current": isCurrentPage ? 'page' : undefined, colors: getPaginationButtonColors(isCurrentPage, theme), "aria-pressed": undefined, onClick: handleClick, toggled: isCurrentPage }, elemProps), children || pageNumber));
69
71
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "7.1.0-next.1+c8ebaf14",
3
+ "version": "7.1.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",
@@ -10,7 +10,8 @@
10
10
  "types": "dist/es6/index.d.ts",
11
11
  "repository": {
12
12
  "type": "git",
13
- "url": "http://github.com/Workday/canvas-kit/tree/master/modules/canvas-kit-react"
13
+ "url": "https://github.com/workday/canvas-kit.git",
14
+ "directory": "modules/react"
14
15
  },
15
16
  "files": [
16
17
  "*/package.json",
@@ -48,11 +49,11 @@
48
49
  "@emotion/styled": "^11.6.0",
49
50
  "@popperjs/core": "^2.5.4",
50
51
  "@workday/canvas-colors-web": "^2.0.0",
51
- "@workday/canvas-kit-labs-react": "^7.1.0-next.1+c8ebaf14",
52
- "@workday/canvas-kit-popup-stack": "^7.1.0-next.1+c8ebaf14",
53
- "@workday/canvas-kit-preview-react": "^7.1.0-next.1+c8ebaf14",
52
+ "@workday/canvas-kit-labs-react": "^7.1.2",
53
+ "@workday/canvas-kit-popup-stack": "^7.1.2",
54
+ "@workday/canvas-kit-preview-react": "^7.1.2",
54
55
  "@workday/canvas-system-icons-web": "^3.0.0",
55
- "@workday/design-assets-types": "^0.2.4",
56
+ "@workday/design-assets-types": "^0.2.8",
56
57
  "chroma-js": "^2.1.0",
57
58
  "csstype": "^2.6.17",
58
59
  "element-closest": "^3.0.2",
@@ -69,5 +70,5 @@
69
70
  "@workday/canvas-accent-icons-web": "^3.0.0",
70
71
  "@workday/canvas-applet-icons-web": "^2.0.0"
71
72
  },
72
- "gitHead": "c8ebaf147f3f9a9145910c27022b3f5024c4cae9"
73
+ "gitHead": "3af79a1d78abc4335e0b94fcedfbd13c5d6b34bb"
73
74
  }
package/pagination/lib/Pagination/PageButton.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import {styled} from '@workday/canvas-kit-react/common';
2
+ import {EmotionCanvasTheme, styled, useTheme} from '@workday/canvas-kit-react/common';
3
3
  import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
4
4
  import {BaseButton} from '@workday/canvas-kit-react/button';
5
5
 
@@ -19,22 +19,27 @@ const StyledPageButton = styled(BaseButton)<{toggled?: boolean}>(
19
19
  }
20
20
  );
21
21
 
22
- const getPaginationButtonColors = (toggled: boolean) => {
22
+ const getPaginationButtonColors = (toggled: boolean, theme: EmotionCanvasTheme) => {
23
+ const {
24
+ canvas: {
25
+ palette: {primary: themePrimary},
26
+ },
27
+ } = theme;
23
28
  return {
24
29
  default: {
25
- background: toggled ? colors.blueberry400 : 'transparent',
30
+ background: toggled ? themePrimary.main : 'transparent',
26
31
  label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
27
32
  },
28
33
  hover: {
29
- background: toggled ? colors.blueberry400 : colors.soap300,
34
+ background: toggled ? themePrimary.main : colors.soap300,
30
35
  label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
31
36
  },
32
37
  active: {
33
- background: toggled ? colors.blueberry400 : 'transparent',
38
+ background: toggled ? themePrimary.main : 'transparent',
34
39
  label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
35
40
  },
36
41
  focus: {
37
- background: toggled ? colors.blueberry400 : 'transparent',
42
+ background: toggled ? themePrimary.main : 'transparent',
38
43
  label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
39
44
  },
40
45
  disabled: {
@@ -56,6 +61,7 @@ export const PageButton = ({
56
61
  ...elemProps
57
62
  }: PageButtonProps) => {
58
63
  const isCurrentPage = pageNumber === model.state.currentPage;
64
+ const theme = useTheme();
59
65
 
60
66
  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
61
67
  onClick?.(e);
@@ -65,7 +71,7 @@ export const PageButton = ({
65
71
  return (
66
72
  <StyledPageButton
67
73
  aria-current={isCurrentPage ? 'page' : undefined}
68
- colors={getPaginationButtonColors(isCurrentPage)}
74
+ colors={getPaginationButtonColors(isCurrentPage, theme)}
69
75
  aria-pressed={undefined}
70
76
  onClick={handleClick}
71
77
  toggled={isCurrentPage}