@workday/canvas-kit-react 11.0.0-alpha.780-next.0 → 11.0.0-alpha.781-next.0
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/badge/lib/CountBadge.tsx +11 -16
- package/dist/commonjs/badge/lib/CountBadge.d.ts +1 -3
- package/dist/commonjs/badge/lib/CountBadge.d.ts.map +1 -1
- package/dist/commonjs/badge/lib/CountBadge.js +6 -5
- package/dist/es6/badge/lib/CountBadge.d.ts +1 -3
- package/dist/es6/badge/lib/CountBadge.d.ts.map +1 -1
- package/dist/es6/badge/lib/CountBadge.js +7 -6
- package/package.json +4 -4
package/badge/lib/CountBadge.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import {createComponent} from '@workday/canvas-kit-react/common';
|
|
3
3
|
import {handleCsProp, CSProps, createStencil, px2rem, keyframes} from '@workday/canvas-kit-styling';
|
|
4
|
-
import {
|
|
4
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
5
5
|
|
|
6
6
|
const grow = keyframes({
|
|
7
7
|
from: {
|
|
@@ -28,17 +28,18 @@ export interface CountBadgeProps extends CSProps {
|
|
|
28
28
|
limit?: number;
|
|
29
29
|
/**
|
|
30
30
|
* Sets the variant of the Count Badge
|
|
31
|
-
*
|
|
32
|
-
* @default 'default'
|
|
33
31
|
*/
|
|
34
|
-
variant?: '
|
|
32
|
+
variant?: 'inverse';
|
|
35
33
|
}
|
|
36
34
|
|
|
35
|
+
// .cnvs-count-badge
|
|
37
36
|
const countBadgeStencil = createStencil({
|
|
38
37
|
base: {
|
|
39
38
|
alignItems: 'center',
|
|
40
39
|
animation: `${grow} 0.2s ease`,
|
|
40
|
+
background: system.color.static.red.default,
|
|
41
41
|
borderRadius: system.shape.round,
|
|
42
|
+
color: system.color.text.inverse,
|
|
42
43
|
display: 'inline-flex',
|
|
43
44
|
fontFamily: system.fontFamily.default,
|
|
44
45
|
fontSize: system.fontSize.subtext.medium,
|
|
@@ -48,18 +49,16 @@ const countBadgeStencil = createStencil({
|
|
|
48
49
|
lineHeight: px2rem(20),
|
|
49
50
|
minWidth: px2rem(20),
|
|
50
51
|
padding: `0 ${px2rem(6.5)}`,
|
|
52
|
+
textShadow: `0 0 ${px2rem(1)} rgba(0,0,0, 0.35)`,
|
|
51
53
|
},
|
|
52
54
|
modifiers: {
|
|
53
55
|
variant: {
|
|
54
|
-
|
|
55
|
-
background: base.cinnamon500,
|
|
56
|
-
color: base.frenchVanilla100,
|
|
57
|
-
textShadow: `0 0 ${px2rem(1)} rgba(0,0,0, 0.35)`,
|
|
58
|
-
},
|
|
56
|
+
// .cnvs-count-badge--variant-inverse
|
|
59
57
|
inverse: {
|
|
60
|
-
background:
|
|
58
|
+
background: system.color.bg.default,
|
|
61
59
|
boxShadow: `0 ${px2rem(1)} ${px2rem(2)} rgba(0,0,0, 0.25)`,
|
|
62
|
-
color:
|
|
60
|
+
color: system.color.text.primary.default,
|
|
61
|
+
textShadow: 'none',
|
|
63
62
|
},
|
|
64
63
|
},
|
|
65
64
|
},
|
|
@@ -70,11 +69,7 @@ const countBadgeStencil = createStencil({
|
|
|
70
69
|
*/
|
|
71
70
|
export const CountBadge = createComponent('span')({
|
|
72
71
|
displayName: 'NewCountBadge',
|
|
73
|
-
Component: (
|
|
74
|
-
{count = 0, limit = 1000, variant = 'default', ...elemProps}: CountBadgeProps,
|
|
75
|
-
ref,
|
|
76
|
-
Element
|
|
77
|
-
) => {
|
|
72
|
+
Component: ({count = 0, limit = 1000, variant, ...elemProps}: CountBadgeProps, ref, Element) => {
|
|
78
73
|
const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
|
|
79
74
|
|
|
80
75
|
return (
|
|
@@ -15,10 +15,8 @@ export interface CountBadgeProps extends CSProps {
|
|
|
15
15
|
limit?: number;
|
|
16
16
|
/**
|
|
17
17
|
* Sets the variant of the Count Badge
|
|
18
|
-
*
|
|
19
|
-
* @default 'default'
|
|
20
18
|
*/
|
|
21
|
-
variant?: '
|
|
19
|
+
variant?: 'inverse';
|
|
22
20
|
}
|
|
23
21
|
/**
|
|
24
22
|
* `CountBadge` provides a quantity-based summary with dynamic values.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,OAAO,EAAmC,MAAM,6BAA6B,CAAC;AAYpG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf
|
|
1
|
+
{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,OAAO,EAAmC,MAAM,6BAA6B,CAAC;AAYpG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAkCD;;GAEG;AACH,eAAO,MAAM,UAAU,sFAWrB,CAAC"}
|
|
@@ -24,13 +24,14 @@ const React = __importStar(require("react"));
|
|
|
24
24
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
25
25
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
26
26
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
27
|
-
const grow = canvas_kit_styling_1.keyframes({ name: "
|
|
27
|
+
const grow = canvas_kit_styling_1.keyframes({ name: "56eab3", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
|
|
28
|
+
// .cnvs-count-badge
|
|
28
29
|
const countBadgeStencil = canvas_kit_styling_1.createStencil({
|
|
29
|
-
base: { name: "
|
|
30
|
+
base: { name: "3c746d", styles: "box-sizing:border-box;align-items:center;animation:animation-56eab3 0.2s ease;background:var(--cnvs-sys-color-static-red-default);border-radius:var(--cnvs-sys-shape-round);color:var(--cnvs-sys-color-text-inverse);display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-medium);font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
|
|
30
31
|
modifiers: {
|
|
31
32
|
variant: {
|
|
32
|
-
|
|
33
|
-
inverse: { name: "
|
|
33
|
+
// .cnvs-count-badge--variant-inverse
|
|
34
|
+
inverse: { name: "6cf61b", styles: "background:var(--cnvs-sys-color-bg-default);box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-sys-color-text-primary-default);text-shadow:none;" }
|
|
34
35
|
}
|
|
35
36
|
}
|
|
36
37
|
}, "cnvs-count-badge");
|
|
@@ -39,7 +40,7 @@ const countBadgeStencil = canvas_kit_styling_1.createStencil({
|
|
|
39
40
|
*/
|
|
40
41
|
exports.CountBadge = common_1.createComponent('span')({
|
|
41
42
|
displayName: 'NewCountBadge',
|
|
42
|
-
Component: ({ count = 0, limit = 1000, variant
|
|
43
|
+
Component: ({ count = 0, limit = 1000, variant, ...elemProps }, ref, Element) => {
|
|
43
44
|
const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
|
|
44
45
|
return (React.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, [countBadgeStencil({ variant })])), formattedCount));
|
|
45
46
|
},
|
|
@@ -15,10 +15,8 @@ export interface CountBadgeProps extends CSProps {
|
|
|
15
15
|
limit?: number;
|
|
16
16
|
/**
|
|
17
17
|
* Sets the variant of the Count Badge
|
|
18
|
-
*
|
|
19
|
-
* @default 'default'
|
|
20
18
|
*/
|
|
21
|
-
variant?: '
|
|
19
|
+
variant?: 'inverse';
|
|
22
20
|
}
|
|
23
21
|
/**
|
|
24
22
|
* `CountBadge` provides a quantity-based summary with dynamic values.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,OAAO,EAAmC,MAAM,6BAA6B,CAAC;AAYpG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf
|
|
1
|
+
{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,OAAO,EAAmC,MAAM,6BAA6B,CAAC;AAYpG,MAAM,WAAW,eAAgB,SAAQ,OAAO;IAC9C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAkCD;;GAEG;AACH,eAAO,MAAM,UAAU,sFAWrB,CAAC"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { createComponent } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { handleCsProp, createStencil, px2rem, keyframes } from '@workday/canvas-kit-styling';
|
|
4
|
-
import {
|
|
5
|
-
const grow = keyframes({ name: "
|
|
4
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
5
|
+
const grow = keyframes({ name: "56eab3", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
|
|
6
|
+
// .cnvs-count-badge
|
|
6
7
|
const countBadgeStencil = createStencil({
|
|
7
|
-
base: { name: "
|
|
8
|
+
base: { name: "3c746d", styles: "box-sizing:border-box;align-items:center;animation:animation-56eab3 0.2s ease;background:var(--cnvs-sys-color-static-red-default);border-radius:var(--cnvs-sys-shape-round);color:var(--cnvs-sys-color-text-inverse);display:inline-flex;font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-medium);font-weight:var(--cnvs-sys-font-weight-bold);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.40625rem;text-shadow:0 0 0.0625rem rgba(0,0,0, 0.35);" },
|
|
8
9
|
modifiers: {
|
|
9
10
|
variant: {
|
|
10
|
-
|
|
11
|
-
inverse: { name: "
|
|
11
|
+
// .cnvs-count-badge--variant-inverse
|
|
12
|
+
inverse: { name: "6cf61b", styles: "background:var(--cnvs-sys-color-bg-default);box-shadow:0 0.0625rem 0.125rem rgba(0,0,0, 0.25);color:var(--cnvs-sys-color-text-primary-default);text-shadow:none;" }
|
|
12
13
|
}
|
|
13
14
|
}
|
|
14
15
|
}, "cnvs-count-badge");
|
|
@@ -17,7 +18,7 @@ const countBadgeStencil = createStencil({
|
|
|
17
18
|
*/
|
|
18
19
|
export const CountBadge = createComponent('span')({
|
|
19
20
|
displayName: 'NewCountBadge',
|
|
20
|
-
Component: ({ count = 0, limit = 1000, variant
|
|
21
|
+
Component: ({ count = 0, limit = 1000, variant, ...elemProps }, ref, Element) => {
|
|
21
22
|
const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
|
|
22
23
|
return (React.createElement(Element, Object.assign({ ref: ref }, handleCsProp(elemProps, [countBadgeStencil({ variant })])), formattedCount));
|
|
23
24
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "11.0.0-alpha.
|
|
3
|
+
"version": "11.0.0-alpha.781-next.0",
|
|
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,8 +49,8 @@
|
|
|
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": "^11.0.0-alpha.
|
|
53
|
-
"@workday/canvas-kit-styling": "^11.0.0-alpha.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^11.0.0-alpha.781-next.0",
|
|
53
|
+
"@workday/canvas-kit-styling": "^11.0.0-alpha.781-next.0",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
55
55
|
"@workday/canvas-tokens-web": "^1.3.1",
|
|
56
56
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
68
68
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "d6f6fb3561eb04c34f1a6b43531f4c717140618d"
|
|
71
71
|
}
|