@workday/canvas-kit-preview-react 10.0.21 → 10.0.23
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/dist/commonjs/pill/lib/Pill.d.ts.map +1 -1
- package/dist/commonjs/pill/lib/Pill.js +55 -67
- package/dist/commonjs/pill/lib/PillIconButton.d.ts.map +1 -1
- package/dist/commonjs/pill/lib/PillIconButton.js +17 -26
- package/dist/es6/pill/lib/Pill.d.ts.map +1 -1
- package/dist/es6/pill/lib/Pill.js +56 -68
- package/dist/es6/pill/lib/PillIconButton.d.ts.map +1 -1
- package/dist/es6/pill/lib/PillIconButton.js +18 -27
- package/package.json +4 -4
- package/pill/lib/Pill.tsx +67 -80
- package/pill/lib/PillIconButton.tsx +21 -28
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAY5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAiID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;CAqDL,CAAC"}
|
|
@@ -9,76 +9,13 @@ const button_1 = require("@workday/canvas-kit-react/button");
|
|
|
9
9
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
10
10
|
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
11
11
|
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
12
|
+
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
12
13
|
const usePillModel_1 = require("./usePillModel");
|
|
13
14
|
const PillIcon_1 = require("./PillIcon");
|
|
14
15
|
const PillIconButton_1 = require("./PillIconButton");
|
|
15
16
|
const PillCount_1 = require("./PillCount");
|
|
16
17
|
const PillAvatar_1 = require("./PillAvatar");
|
|
17
18
|
const PillLabel_1 = require("./PillLabel");
|
|
18
|
-
const getButtonPillColors = () => {
|
|
19
|
-
return {
|
|
20
|
-
default: {
|
|
21
|
-
background: tokens_1.colors.soap300,
|
|
22
|
-
icon: tokens_1.colors.licorice200,
|
|
23
|
-
label: tokens_1.colors.blackPepper400,
|
|
24
|
-
border: tokens_1.colors.licorice200,
|
|
25
|
-
},
|
|
26
|
-
focus: {
|
|
27
|
-
icon: tokens_1.colors.licorice500,
|
|
28
|
-
background: tokens_1.colors.soap300,
|
|
29
|
-
border: tokens_1.colors.blueberry400,
|
|
30
|
-
label: tokens_1.colors.blackPepper400,
|
|
31
|
-
},
|
|
32
|
-
hover: {
|
|
33
|
-
icon: tokens_1.colors.licorice500,
|
|
34
|
-
background: tokens_1.colors.soap400,
|
|
35
|
-
border: tokens_1.colors.licorice400,
|
|
36
|
-
label: tokens_1.colors.blackPepper400,
|
|
37
|
-
},
|
|
38
|
-
active: {
|
|
39
|
-
icon: tokens_1.colors.licorice500,
|
|
40
|
-
background: tokens_1.colors.soap500,
|
|
41
|
-
border: tokens_1.colors.licorice500,
|
|
42
|
-
label: tokens_1.colors.blackPepper400,
|
|
43
|
-
},
|
|
44
|
-
disabled: {
|
|
45
|
-
icon: tokens_1.colors.licorice100,
|
|
46
|
-
label: tokens_1.colors.licorice100,
|
|
47
|
-
background: tokens_1.colors.soap100,
|
|
48
|
-
border: tokens_1.colors.licorice100,
|
|
49
|
-
opacity: '1',
|
|
50
|
-
},
|
|
51
|
-
};
|
|
52
|
-
};
|
|
53
|
-
const getRemovablePillColors = (disabled) => {
|
|
54
|
-
return {
|
|
55
|
-
default: {
|
|
56
|
-
background: disabled ? tokens_1.colors.soap100 : tokens_1.colors.soap300,
|
|
57
|
-
icon: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice200,
|
|
58
|
-
label: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.blackPepper400,
|
|
59
|
-
border: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice200,
|
|
60
|
-
},
|
|
61
|
-
hover: {
|
|
62
|
-
icon: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice500,
|
|
63
|
-
background: disabled ? tokens_1.colors.soap100 : tokens_1.colors.soap300,
|
|
64
|
-
border: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice200,
|
|
65
|
-
label: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.blackPepper400,
|
|
66
|
-
},
|
|
67
|
-
active: {
|
|
68
|
-
icon: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice500,
|
|
69
|
-
background: disabled ? tokens_1.colors.soap100 : tokens_1.colors.soap500,
|
|
70
|
-
border: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice500,
|
|
71
|
-
label: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.blackPepper400,
|
|
72
|
-
},
|
|
73
|
-
focus: {
|
|
74
|
-
icon: tokens_1.colors.licorice200,
|
|
75
|
-
background: tokens_1.colors.soap300,
|
|
76
|
-
label: tokens_1.colors.blackPepper400,
|
|
77
|
-
border: tokens_1.colors.licorice200,
|
|
78
|
-
},
|
|
79
|
-
disabled: {},
|
|
80
|
-
};
|
|
81
|
-
};
|
|
82
19
|
const pillBaseStyles = {
|
|
83
20
|
display: 'inline-flex',
|
|
84
21
|
alignItems: 'center',
|
|
@@ -118,6 +55,32 @@ const StyledBasePill = common_1.styled(button_1.BaseButton.as('button'))({
|
|
|
118
55
|
},
|
|
119
56
|
},
|
|
120
57
|
}),
|
|
58
|
+
// Default Styles
|
|
59
|
+
[button_1.buttonVars.default.background]: tokens_1.colors.soap300,
|
|
60
|
+
[button_1.buttonVars.default.border]: tokens_1.colors.licorice200,
|
|
61
|
+
[button_1.buttonVars.default.label]: tokens_1.colors.blackPepper400,
|
|
62
|
+
[button_1.buttonVars.default.icon]: tokens_1.colors.licorice200,
|
|
63
|
+
// Hover Styles
|
|
64
|
+
[button_1.buttonVars.hover.background]: tokens_1.colors.soap400,
|
|
65
|
+
[button_1.buttonVars.hover.border]: tokens_1.colors.licorice400,
|
|
66
|
+
[button_1.buttonVars.hover.label]: tokens_1.colors.blackPepper400,
|
|
67
|
+
[button_1.buttonVars.hover.icon]: tokens_1.colors.licorice500,
|
|
68
|
+
// Focus Styles
|
|
69
|
+
[button_1.buttonVars.focus.background]: tokens_1.colors.soap300,
|
|
70
|
+
[button_1.buttonVars.focus.border]: tokens_1.colors.blueberry400,
|
|
71
|
+
[button_1.buttonVars.focus.label]: tokens_1.colors.blackPepper400,
|
|
72
|
+
[button_1.buttonVars.focus.icon]: tokens_1.colors.licorice500,
|
|
73
|
+
// Active Styles
|
|
74
|
+
[button_1.buttonVars.active.background]: tokens_1.colors.soap500,
|
|
75
|
+
[button_1.buttonVars.active.border]: tokens_1.colors.licorice500,
|
|
76
|
+
[button_1.buttonVars.active.label]: tokens_1.colors.blackPepper400,
|
|
77
|
+
[button_1.buttonVars.active.icon]: tokens_1.colors.licorice500,
|
|
78
|
+
// Disabled Styles
|
|
79
|
+
[button_1.buttonVars.disabled.background]: tokens_1.colors.soap100,
|
|
80
|
+
[button_1.buttonVars.disabled.border]: tokens_1.colors.licorice100,
|
|
81
|
+
[button_1.buttonVars.disabled.label]: tokens_1.colors.licorice100,
|
|
82
|
+
[button_1.buttonVars.disabled.opacity]: '1',
|
|
83
|
+
[button_1.buttonVars.disabled.icon]: tokens_1.colors.licorice100,
|
|
121
84
|
}, ({ variant }) => ({
|
|
122
85
|
'&:focus, &:focus-visible': {
|
|
123
86
|
borderColor: variant === 'removable' ? undefined : tokens_1.colors.blueberry400,
|
|
@@ -131,6 +94,21 @@ const StyledBasePill = common_1.styled(button_1.BaseButton.as('button'))({
|
|
|
131
94
|
},
|
|
132
95
|
}), layout_1.boxStyleFn);
|
|
133
96
|
const StyledNonInteractivePill = common_1.styled(StyledBasePill)({
|
|
97
|
+
[button_1.buttonVars.default.background]: tokens_1.colors.soap300,
|
|
98
|
+
[button_1.buttonVars.default.border]: tokens_1.colors.licorice200,
|
|
99
|
+
[button_1.buttonVars.default.label]: tokens_1.colors.blackPepper400,
|
|
100
|
+
[button_1.buttonVars.hover.background]: tokens_1.colors.soap300,
|
|
101
|
+
[button_1.buttonVars.hover.border]: tokens_1.colors.licorice200,
|
|
102
|
+
[button_1.buttonVars.hover.label]: tokens_1.colors.blackPepper400,
|
|
103
|
+
[button_1.buttonVars.focus.background]: tokens_1.colors.soap300,
|
|
104
|
+
[button_1.buttonVars.focus.border]: tokens_1.colors.licorice200,
|
|
105
|
+
[button_1.buttonVars.focus.label]: tokens_1.colors.blackPepper400,
|
|
106
|
+
[button_1.buttonVars.active.background]: tokens_1.colors.soap500,
|
|
107
|
+
[button_1.buttonVars.active.border]: tokens_1.colors.licorice500,
|
|
108
|
+
[button_1.buttonVars.active.label]: tokens_1.colors.blackPepper400,
|
|
109
|
+
[button_1.buttonVars.disabled.background]: tokens_1.colors.soap100,
|
|
110
|
+
[button_1.buttonVars.disabled.label]: tokens_1.colors.licorice100,
|
|
111
|
+
[button_1.buttonVars.disabled.border]: tokens_1.colors.licorice100,
|
|
134
112
|
cursor: 'default',
|
|
135
113
|
overflow: 'revert',
|
|
136
114
|
position: 'relative',
|
|
@@ -142,6 +120,14 @@ const StyledNonInteractivePill = common_1.styled(StyledBasePill)({
|
|
|
142
120
|
}),
|
|
143
121
|
},
|
|
144
122
|
});
|
|
123
|
+
const StyledReadOnlyPill = common_1.styled(StyledNonInteractivePill)({
|
|
124
|
+
[button_1.buttonVars.default.background]: 'transparent',
|
|
125
|
+
[button_1.buttonVars.hover.background]: 'transparent',
|
|
126
|
+
[button_1.buttonVars.focus.background]: 'transparent',
|
|
127
|
+
[button_1.buttonVars.active.background]: 'transparent',
|
|
128
|
+
[button_1.buttonVars.disabled.background]: 'transparent',
|
|
129
|
+
border: `1px solid ${tokens_1.colors.licorice200}`,
|
|
130
|
+
});
|
|
145
131
|
/**
|
|
146
132
|
* By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
|
|
147
133
|
* we mean that the Pill container is a focusable element (a `<button>`). All leading elements
|
|
@@ -251,17 +237,19 @@ exports.Pill = common_1.createContainer('button')({
|
|
|
251
237
|
Label: PillLabel_1.PillLabel,
|
|
252
238
|
},
|
|
253
239
|
})(({ variant = 'default', maxWidth, ...elemProps }, Element, model) => {
|
|
240
|
+
console.log(elemProps);
|
|
241
|
+
console.log(model.state.disabled);
|
|
254
242
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
255
|
-
variant === 'readOnly' && (react_1.default.createElement(
|
|
243
|
+
variant === 'readOnly' && (react_1.default.createElement(StyledReadOnlyPill, Object.assign({ as: Element !== 'button' ? Element : 'span', id: model.state.id, maxWidth: model.state.maxWidth }, elemProps),
|
|
256
244
|
react_1.default.createElement(PillLabel_1.PillLabel, null, elemProps.children))),
|
|
257
|
-
variant === 'default' && (react_1.default.createElement(StyledBasePill, Object.assign({
|
|
245
|
+
variant === 'default' && (react_1.default.createElement(StyledBasePill, Object.assign({ as: Element }, elemProps, { disabled: model.state.disabled }),
|
|
258
246
|
react_1.default.createElement(layout_1.Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center" }, react_1.default.Children.map(elemProps.children, (child, index) => {
|
|
259
247
|
if (typeof child === 'string') {
|
|
260
248
|
return react_1.default.createElement(PillLabel_1.PillLabel, { key: index }, child);
|
|
261
249
|
}
|
|
262
250
|
return (react_1.default.createElement(layout_1.Flex.Item, { key: index, display: "inline-flex" }, child));
|
|
263
251
|
})))),
|
|
264
|
-
variant === 'removable' && (react_1.default.createElement(StyledNonInteractivePill, Object.assign({
|
|
252
|
+
variant === 'removable' && (react_1.default.createElement(StyledNonInteractivePill, Object.assign({ as: Element !== 'button' ? Element : 'span', variant: variant, type: undefined }, canvas_kit_styling_1.handleCsProp(elemProps, [model.state.disabled ? 'disabled' : undefined])),
|
|
265
253
|
react_1.default.createElement(layout_1.Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, react_1.default.Children.map(elemProps.children, (child, index) => {
|
|
266
254
|
if (typeof child === 'string') {
|
|
267
255
|
return react_1.default.createElement(PillLabel_1.PillLabel, { key: index }, child);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;
|
|
1
|
+
{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA2CD,eAAO,MAAM,cAAc;;;;;;;EA+B1B,CAAC"}
|
|
@@ -11,30 +11,6 @@ const usePillModel_1 = require("./usePillModel");
|
|
|
11
11
|
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
|
|
12
12
|
const tokens_1 = require("@workday/canvas-kit-react/tokens");
|
|
13
13
|
const button_1 = require("@workday/canvas-kit-react/button");
|
|
14
|
-
const getIconColors = () => {
|
|
15
|
-
return {
|
|
16
|
-
default: {
|
|
17
|
-
icon: tokens_1.colors.licorice200,
|
|
18
|
-
border: 'initial',
|
|
19
|
-
},
|
|
20
|
-
hover: {
|
|
21
|
-
icon: tokens_1.colors.licorice500,
|
|
22
|
-
border: 'initial',
|
|
23
|
-
},
|
|
24
|
-
active: {
|
|
25
|
-
icon: tokens_1.colors.licorice500,
|
|
26
|
-
border: 'initial',
|
|
27
|
-
},
|
|
28
|
-
focus: {
|
|
29
|
-
icon: tokens_1.colors.licorice500,
|
|
30
|
-
border: 'transparent',
|
|
31
|
-
},
|
|
32
|
-
disabled: {
|
|
33
|
-
icon: tokens_1.colors.licorice100,
|
|
34
|
-
opacity: '1',
|
|
35
|
-
},
|
|
36
|
-
};
|
|
37
|
-
};
|
|
38
14
|
const StyledIconButton = common_1.styled(button_1.BaseButton)({
|
|
39
15
|
marginInlineEnd: '-7px',
|
|
40
16
|
marginInlineStart: `-2px`,
|
|
@@ -48,17 +24,32 @@ const StyledIconButton = common_1.styled(button_1.BaseButton)({
|
|
|
48
24
|
bottom: '-7px',
|
|
49
25
|
margin: 0,
|
|
50
26
|
pointerEvents: 'all',
|
|
51
|
-
cursor: 'pointer',
|
|
52
27
|
},
|
|
53
28
|
'&.focus, &:focus-visible': {
|
|
54
29
|
...common_1.focusRing({
|
|
55
30
|
innerColor: 'transparent',
|
|
56
31
|
}),
|
|
57
32
|
},
|
|
33
|
+
[button_1.buttonVars.default.background]: tokens_1.colors.soap300,
|
|
34
|
+
[button_1.buttonVars.default.border]: 'transparent',
|
|
35
|
+
[button_1.buttonVars.default.label]: tokens_1.colors.blackPepper400,
|
|
36
|
+
[button_1.buttonVars.hover.background]: tokens_1.colors.soap300,
|
|
37
|
+
[button_1.buttonVars.hover.border]: 'transparent',
|
|
38
|
+
[button_1.buttonVars.hover.label]: tokens_1.colors.blackPepper400,
|
|
39
|
+
[button_1.buttonVars.focus.background]: tokens_1.colors.soap300,
|
|
40
|
+
[button_1.buttonVars.focus.border]: 'transparent',
|
|
41
|
+
[button_1.buttonVars.focus.label]: tokens_1.colors.blackPepper400,
|
|
42
|
+
[button_1.buttonVars.active.background]: tokens_1.colors.soap500,
|
|
43
|
+
[button_1.buttonVars.active.border]: 'transparent',
|
|
44
|
+
[button_1.buttonVars.active.label]: tokens_1.colors.blackPepper400,
|
|
45
|
+
[button_1.buttonVars.disabled.background]: tokens_1.colors.soap100,
|
|
46
|
+
[button_1.buttonVars.disabled.label]: tokens_1.colors.licorice100,
|
|
47
|
+
[button_1.buttonVars.disabled.border]: 'transparent',
|
|
48
|
+
[button_1.buttonVars.disabled.icon]: tokens_1.colors.licorice100,
|
|
58
49
|
});
|
|
59
50
|
exports.PillIconButton = common_1.createSubcomponent('button')({
|
|
60
51
|
modelHook: usePillModel_1.usePillModel,
|
|
61
52
|
})(({ size, icon = canvas_system_icons_web_1.xSmallIcon, maxWidth, children, 'aria-label': ariaLabel = 'remove', ...elemProps }, Element, model) => {
|
|
62
|
-
return (react_1.default.createElement(StyledIconButton, Object.assign({ borderRadius: "s", height: 20, width: 20, padding: "zero", disabled: model.state.disabled,
|
|
53
|
+
return (react_1.default.createElement(StyledIconButton, Object.assign({ borderRadius: "s", height: 20, width: 20, padding: "zero", disabled: model.state.disabled, "aria-labelledby": `removable-${model.state.id} label-${model.state.id}`, as: Element, position: "relative" }, elemProps),
|
|
63
54
|
react_1.default.createElement(icon_1.SystemIcon, { "aria-label": ariaLabel, id: `removable-${model.state.id}`, icon: icon, size: tokens_1.space.m, "aria-hidden": true, role: "img" })));
|
|
64
55
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAY5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAiID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;CAqDL,CAAC"}
|
|
@@ -1,78 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { BaseButton } from '@workday/canvas-kit-react/button';
|
|
2
|
+
import { BaseButton, buttonVars } from '@workday/canvas-kit-react/button';
|
|
3
3
|
import { createContainer, focusRing, mouseFocusBehavior, styled, } from '@workday/canvas-kit-react/common';
|
|
4
4
|
import { boxStyleFn, Flex } from '@workday/canvas-kit-react/layout';
|
|
5
5
|
import { borderRadius, colors, space, type } from '@workday/canvas-kit-react/tokens';
|
|
6
|
+
import { handleCsProp } from '@workday/canvas-kit-styling';
|
|
6
7
|
import { usePillModel } from './usePillModel';
|
|
7
8
|
import { PillIcon } from './PillIcon';
|
|
8
9
|
import { PillIconButton } from './PillIconButton';
|
|
9
10
|
import { PillCount } from './PillCount';
|
|
10
11
|
import { PillAvatar } from './PillAvatar';
|
|
11
12
|
import { PillLabel } from './PillLabel';
|
|
12
|
-
const getButtonPillColors = () => {
|
|
13
|
-
return {
|
|
14
|
-
default: {
|
|
15
|
-
background: colors.soap300,
|
|
16
|
-
icon: colors.licorice200,
|
|
17
|
-
label: colors.blackPepper400,
|
|
18
|
-
border: colors.licorice200,
|
|
19
|
-
},
|
|
20
|
-
focus: {
|
|
21
|
-
icon: colors.licorice500,
|
|
22
|
-
background: colors.soap300,
|
|
23
|
-
border: colors.blueberry400,
|
|
24
|
-
label: colors.blackPepper400,
|
|
25
|
-
},
|
|
26
|
-
hover: {
|
|
27
|
-
icon: colors.licorice500,
|
|
28
|
-
background: colors.soap400,
|
|
29
|
-
border: colors.licorice400,
|
|
30
|
-
label: colors.blackPepper400,
|
|
31
|
-
},
|
|
32
|
-
active: {
|
|
33
|
-
icon: colors.licorice500,
|
|
34
|
-
background: colors.soap500,
|
|
35
|
-
border: colors.licorice500,
|
|
36
|
-
label: colors.blackPepper400,
|
|
37
|
-
},
|
|
38
|
-
disabled: {
|
|
39
|
-
icon: colors.licorice100,
|
|
40
|
-
label: colors.licorice100,
|
|
41
|
-
background: colors.soap100,
|
|
42
|
-
border: colors.licorice100,
|
|
43
|
-
opacity: '1',
|
|
44
|
-
},
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
const getRemovablePillColors = (disabled) => {
|
|
48
|
-
return {
|
|
49
|
-
default: {
|
|
50
|
-
background: disabled ? colors.soap100 : colors.soap300,
|
|
51
|
-
icon: disabled ? colors.licorice100 : colors.licorice200,
|
|
52
|
-
label: disabled ? colors.licorice100 : colors.blackPepper400,
|
|
53
|
-
border: disabled ? colors.licorice100 : colors.licorice200,
|
|
54
|
-
},
|
|
55
|
-
hover: {
|
|
56
|
-
icon: disabled ? colors.licorice100 : colors.licorice500,
|
|
57
|
-
background: disabled ? colors.soap100 : colors.soap300,
|
|
58
|
-
border: disabled ? colors.licorice100 : colors.licorice200,
|
|
59
|
-
label: disabled ? colors.licorice100 : colors.blackPepper400,
|
|
60
|
-
},
|
|
61
|
-
active: {
|
|
62
|
-
icon: disabled ? colors.licorice100 : colors.licorice500,
|
|
63
|
-
background: disabled ? colors.soap100 : colors.soap500,
|
|
64
|
-
border: disabled ? colors.licorice100 : colors.licorice500,
|
|
65
|
-
label: disabled ? colors.licorice100 : colors.blackPepper400,
|
|
66
|
-
},
|
|
67
|
-
focus: {
|
|
68
|
-
icon: colors.licorice200,
|
|
69
|
-
background: colors.soap300,
|
|
70
|
-
label: colors.blackPepper400,
|
|
71
|
-
border: colors.licorice200,
|
|
72
|
-
},
|
|
73
|
-
disabled: {},
|
|
74
|
-
};
|
|
75
|
-
};
|
|
76
13
|
const pillBaseStyles = {
|
|
77
14
|
display: 'inline-flex',
|
|
78
15
|
alignItems: 'center',
|
|
@@ -112,6 +49,32 @@ const StyledBasePill = styled(BaseButton.as('button'))({
|
|
|
112
49
|
},
|
|
113
50
|
},
|
|
114
51
|
}),
|
|
52
|
+
// Default Styles
|
|
53
|
+
[buttonVars.default.background]: colors.soap300,
|
|
54
|
+
[buttonVars.default.border]: colors.licorice200,
|
|
55
|
+
[buttonVars.default.label]: colors.blackPepper400,
|
|
56
|
+
[buttonVars.default.icon]: colors.licorice200,
|
|
57
|
+
// Hover Styles
|
|
58
|
+
[buttonVars.hover.background]: colors.soap400,
|
|
59
|
+
[buttonVars.hover.border]: colors.licorice400,
|
|
60
|
+
[buttonVars.hover.label]: colors.blackPepper400,
|
|
61
|
+
[buttonVars.hover.icon]: colors.licorice500,
|
|
62
|
+
// Focus Styles
|
|
63
|
+
[buttonVars.focus.background]: colors.soap300,
|
|
64
|
+
[buttonVars.focus.border]: colors.blueberry400,
|
|
65
|
+
[buttonVars.focus.label]: colors.blackPepper400,
|
|
66
|
+
[buttonVars.focus.icon]: colors.licorice500,
|
|
67
|
+
// Active Styles
|
|
68
|
+
[buttonVars.active.background]: colors.soap500,
|
|
69
|
+
[buttonVars.active.border]: colors.licorice500,
|
|
70
|
+
[buttonVars.active.label]: colors.blackPepper400,
|
|
71
|
+
[buttonVars.active.icon]: colors.licorice500,
|
|
72
|
+
// Disabled Styles
|
|
73
|
+
[buttonVars.disabled.background]: colors.soap100,
|
|
74
|
+
[buttonVars.disabled.border]: colors.licorice100,
|
|
75
|
+
[buttonVars.disabled.label]: colors.licorice100,
|
|
76
|
+
[buttonVars.disabled.opacity]: '1',
|
|
77
|
+
[buttonVars.disabled.icon]: colors.licorice100,
|
|
115
78
|
}, ({ variant }) => ({
|
|
116
79
|
'&:focus, &:focus-visible': {
|
|
117
80
|
borderColor: variant === 'removable' ? undefined : colors.blueberry400,
|
|
@@ -125,6 +88,21 @@ const StyledBasePill = styled(BaseButton.as('button'))({
|
|
|
125
88
|
},
|
|
126
89
|
}), boxStyleFn);
|
|
127
90
|
const StyledNonInteractivePill = styled(StyledBasePill)({
|
|
91
|
+
[buttonVars.default.background]: colors.soap300,
|
|
92
|
+
[buttonVars.default.border]: colors.licorice200,
|
|
93
|
+
[buttonVars.default.label]: colors.blackPepper400,
|
|
94
|
+
[buttonVars.hover.background]: colors.soap300,
|
|
95
|
+
[buttonVars.hover.border]: colors.licorice200,
|
|
96
|
+
[buttonVars.hover.label]: colors.blackPepper400,
|
|
97
|
+
[buttonVars.focus.background]: colors.soap300,
|
|
98
|
+
[buttonVars.focus.border]: colors.licorice200,
|
|
99
|
+
[buttonVars.focus.label]: colors.blackPepper400,
|
|
100
|
+
[buttonVars.active.background]: colors.soap500,
|
|
101
|
+
[buttonVars.active.border]: colors.licorice500,
|
|
102
|
+
[buttonVars.active.label]: colors.blackPepper400,
|
|
103
|
+
[buttonVars.disabled.background]: colors.soap100,
|
|
104
|
+
[buttonVars.disabled.label]: colors.licorice100,
|
|
105
|
+
[buttonVars.disabled.border]: colors.licorice100,
|
|
128
106
|
cursor: 'default',
|
|
129
107
|
overflow: 'revert',
|
|
130
108
|
position: 'relative',
|
|
@@ -136,6 +114,14 @@ const StyledNonInteractivePill = styled(StyledBasePill)({
|
|
|
136
114
|
}),
|
|
137
115
|
},
|
|
138
116
|
});
|
|
117
|
+
const StyledReadOnlyPill = styled(StyledNonInteractivePill)({
|
|
118
|
+
[buttonVars.default.background]: 'transparent',
|
|
119
|
+
[buttonVars.hover.background]: 'transparent',
|
|
120
|
+
[buttonVars.focus.background]: 'transparent',
|
|
121
|
+
[buttonVars.active.background]: 'transparent',
|
|
122
|
+
[buttonVars.disabled.background]: 'transparent',
|
|
123
|
+
border: `1px solid ${colors.licorice200}`,
|
|
124
|
+
});
|
|
139
125
|
/**
|
|
140
126
|
* By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
|
|
141
127
|
* we mean that the Pill container is a focusable element (a `<button>`). All leading elements
|
|
@@ -245,17 +231,19 @@ export const Pill = createContainer('button')({
|
|
|
245
231
|
Label: PillLabel,
|
|
246
232
|
},
|
|
247
233
|
})(({ variant = 'default', maxWidth, ...elemProps }, Element, model) => {
|
|
234
|
+
console.log(elemProps);
|
|
235
|
+
console.log(model.state.disabled);
|
|
248
236
|
return (React.createElement(React.Fragment, null,
|
|
249
|
-
variant === 'readOnly' && (React.createElement(
|
|
237
|
+
variant === 'readOnly' && (React.createElement(StyledReadOnlyPill, Object.assign({ as: Element !== 'button' ? Element : 'span', id: model.state.id, maxWidth: model.state.maxWidth }, elemProps),
|
|
250
238
|
React.createElement(PillLabel, null, elemProps.children))),
|
|
251
|
-
variant === 'default' && (React.createElement(StyledBasePill, Object.assign({
|
|
239
|
+
variant === 'default' && (React.createElement(StyledBasePill, Object.assign({ as: Element }, elemProps, { disabled: model.state.disabled }),
|
|
252
240
|
React.createElement(Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center" }, React.Children.map(elemProps.children, (child, index) => {
|
|
253
241
|
if (typeof child === 'string') {
|
|
254
242
|
return React.createElement(PillLabel, { key: index }, child);
|
|
255
243
|
}
|
|
256
244
|
return (React.createElement(Flex.Item, { key: index, display: "inline-flex" }, child));
|
|
257
245
|
})))),
|
|
258
|
-
variant === 'removable' && (React.createElement(StyledNonInteractivePill, Object.assign({
|
|
246
|
+
variant === 'removable' && (React.createElement(StyledNonInteractivePill, Object.assign({ as: Element !== 'button' ? Element : 'span', variant: variant, type: undefined }, handleCsProp(elemProps, [model.state.disabled ? 'disabled' : undefined])),
|
|
259
247
|
React.createElement(Flex, { gap: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, React.Children.map(elemProps.children, (child, index) => {
|
|
260
248
|
if (typeof child === 'string') {
|
|
261
249
|
return React.createElement(PillLabel, { key: index }, child);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;
|
|
1
|
+
{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA2CD,eAAO,MAAM,cAAc;;;;;;;EA+B1B,CAAC"}
|
|
@@ -4,31 +4,7 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
|
|
|
4
4
|
import { usePillModel } from './usePillModel';
|
|
5
5
|
import { xSmallIcon } from '@workday/canvas-system-icons-web';
|
|
6
6
|
import { colors, space } from '@workday/canvas-kit-react/tokens';
|
|
7
|
-
import { BaseButton } from '@workday/canvas-kit-react/button';
|
|
8
|
-
const getIconColors = () => {
|
|
9
|
-
return {
|
|
10
|
-
default: {
|
|
11
|
-
icon: colors.licorice200,
|
|
12
|
-
border: 'initial',
|
|
13
|
-
},
|
|
14
|
-
hover: {
|
|
15
|
-
icon: colors.licorice500,
|
|
16
|
-
border: 'initial',
|
|
17
|
-
},
|
|
18
|
-
active: {
|
|
19
|
-
icon: colors.licorice500,
|
|
20
|
-
border: 'initial',
|
|
21
|
-
},
|
|
22
|
-
focus: {
|
|
23
|
-
icon: colors.licorice500,
|
|
24
|
-
border: 'transparent',
|
|
25
|
-
},
|
|
26
|
-
disabled: {
|
|
27
|
-
icon: colors.licorice100,
|
|
28
|
-
opacity: '1',
|
|
29
|
-
},
|
|
30
|
-
};
|
|
31
|
-
};
|
|
7
|
+
import { BaseButton, buttonVars } from '@workday/canvas-kit-react/button';
|
|
32
8
|
const StyledIconButton = styled(BaseButton)({
|
|
33
9
|
marginInlineEnd: '-7px',
|
|
34
10
|
marginInlineStart: `-2px`,
|
|
@@ -42,17 +18,32 @@ const StyledIconButton = styled(BaseButton)({
|
|
|
42
18
|
bottom: '-7px',
|
|
43
19
|
margin: 0,
|
|
44
20
|
pointerEvents: 'all',
|
|
45
|
-
cursor: 'pointer',
|
|
46
21
|
},
|
|
47
22
|
'&.focus, &:focus-visible': {
|
|
48
23
|
...focusRing({
|
|
49
24
|
innerColor: 'transparent',
|
|
50
25
|
}),
|
|
51
26
|
},
|
|
27
|
+
[buttonVars.default.background]: colors.soap300,
|
|
28
|
+
[buttonVars.default.border]: 'transparent',
|
|
29
|
+
[buttonVars.default.label]: colors.blackPepper400,
|
|
30
|
+
[buttonVars.hover.background]: colors.soap300,
|
|
31
|
+
[buttonVars.hover.border]: 'transparent',
|
|
32
|
+
[buttonVars.hover.label]: colors.blackPepper400,
|
|
33
|
+
[buttonVars.focus.background]: colors.soap300,
|
|
34
|
+
[buttonVars.focus.border]: 'transparent',
|
|
35
|
+
[buttonVars.focus.label]: colors.blackPepper400,
|
|
36
|
+
[buttonVars.active.background]: colors.soap500,
|
|
37
|
+
[buttonVars.active.border]: 'transparent',
|
|
38
|
+
[buttonVars.active.label]: colors.blackPepper400,
|
|
39
|
+
[buttonVars.disabled.background]: colors.soap100,
|
|
40
|
+
[buttonVars.disabled.label]: colors.licorice100,
|
|
41
|
+
[buttonVars.disabled.border]: 'transparent',
|
|
42
|
+
[buttonVars.disabled.icon]: colors.licorice100,
|
|
52
43
|
});
|
|
53
44
|
export const PillIconButton = createSubcomponent('button')({
|
|
54
45
|
modelHook: usePillModel,
|
|
55
46
|
})(({ size, icon = xSmallIcon, maxWidth, children, 'aria-label': ariaLabel = 'remove', ...elemProps }, Element, model) => {
|
|
56
|
-
return (React.createElement(StyledIconButton, Object.assign({ borderRadius: "s", height: 20, width: 20, padding: "zero", disabled: model.state.disabled,
|
|
47
|
+
return (React.createElement(StyledIconButton, Object.assign({ borderRadius: "s", height: 20, width: 20, padding: "zero", disabled: model.state.disabled, "aria-labelledby": `removable-${model.state.id} label-${model.state.id}`, as: Element, position: "relative" }, elemProps),
|
|
57
48
|
React.createElement(SystemIcon, { "aria-label": ariaLabel, id: `removable-${model.state.id}`, icon: icon, size: space.m, "aria-hidden": true, role: "img" })));
|
|
58
49
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-preview-react",
|
|
3
|
-
"version": "10.0.
|
|
3
|
+
"version": "10.0.23",
|
|
4
4
|
"description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@emotion/react": "^11.7.1",
|
|
48
48
|
"@emotion/styled": "^11.6.0",
|
|
49
|
-
"@workday/canvas-kit-react": "^10.0.
|
|
50
|
-
"@workday/canvas-kit-styling": "^10.0.
|
|
49
|
+
"@workday/canvas-kit-react": "^10.0.23",
|
|
50
|
+
"@workday/canvas-kit-styling": "^10.0.23",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^1.0.0",
|
|
53
53
|
"@workday/design-assets-types": "^0.2.8"
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"react-hook-form": "7.36.1",
|
|
59
59
|
"yup": "^0.32.11"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "62f4d382a0f3471aef0af0cb2d3c38a63596b588"
|
|
62
62
|
}
|
package/pill/lib/Pill.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import {CSSObject} from '@emotion/react';
|
|
3
3
|
|
|
4
|
-
import {BaseButton} from '@workday/canvas-kit-react/button';
|
|
4
|
+
import {BaseButton, buttonVars} from '@workday/canvas-kit-react/button';
|
|
5
5
|
import {
|
|
6
6
|
createContainer,
|
|
7
7
|
focusRing,
|
|
@@ -11,6 +11,7 @@ import {
|
|
|
11
11
|
} from '@workday/canvas-kit-react/common';
|
|
12
12
|
import {BoxProps, boxStyleFn, Flex} from '@workday/canvas-kit-react/layout';
|
|
13
13
|
import {borderRadius, colors, space, type} from '@workday/canvas-kit-react/tokens';
|
|
14
|
+
import {handleCsProp, CSProps} from '@workday/canvas-kit-styling';
|
|
14
15
|
|
|
15
16
|
import {usePillModel} from './usePillModel';
|
|
16
17
|
|
|
@@ -28,72 +29,6 @@ export interface PillProps extends BoxProps {
|
|
|
28
29
|
variant?: 'default' | 'readOnly' | 'removable';
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
const getButtonPillColors = () => {
|
|
32
|
-
return {
|
|
33
|
-
default: {
|
|
34
|
-
background: colors.soap300,
|
|
35
|
-
icon: colors.licorice200,
|
|
36
|
-
label: colors.blackPepper400,
|
|
37
|
-
border: colors.licorice200,
|
|
38
|
-
},
|
|
39
|
-
focus: {
|
|
40
|
-
icon: colors.licorice500,
|
|
41
|
-
background: colors.soap300,
|
|
42
|
-
border: colors.blueberry400,
|
|
43
|
-
label: colors.blackPepper400,
|
|
44
|
-
},
|
|
45
|
-
hover: {
|
|
46
|
-
icon: colors.licorice500,
|
|
47
|
-
background: colors.soap400,
|
|
48
|
-
border: colors.licorice400,
|
|
49
|
-
label: colors.blackPepper400,
|
|
50
|
-
},
|
|
51
|
-
active: {
|
|
52
|
-
icon: colors.licorice500,
|
|
53
|
-
background: colors.soap500,
|
|
54
|
-
border: colors.licorice500,
|
|
55
|
-
label: colors.blackPepper400,
|
|
56
|
-
},
|
|
57
|
-
disabled: {
|
|
58
|
-
icon: colors.licorice100,
|
|
59
|
-
label: colors.licorice100,
|
|
60
|
-
background: colors.soap100,
|
|
61
|
-
border: colors.licorice100,
|
|
62
|
-
opacity: '1',
|
|
63
|
-
},
|
|
64
|
-
};
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
const getRemovablePillColors = (disabled?: boolean) => {
|
|
68
|
-
return {
|
|
69
|
-
default: {
|
|
70
|
-
background: disabled ? colors.soap100 : colors.soap300,
|
|
71
|
-
icon: disabled ? colors.licorice100 : colors.licorice200,
|
|
72
|
-
label: disabled ? colors.licorice100 : colors.blackPepper400,
|
|
73
|
-
border: disabled ? colors.licorice100 : colors.licorice200,
|
|
74
|
-
},
|
|
75
|
-
hover: {
|
|
76
|
-
icon: disabled ? colors.licorice100 : colors.licorice500,
|
|
77
|
-
background: disabled ? colors.soap100 : colors.soap300,
|
|
78
|
-
border: disabled ? colors.licorice100 : colors.licorice200,
|
|
79
|
-
label: disabled ? colors.licorice100 : colors.blackPepper400,
|
|
80
|
-
},
|
|
81
|
-
active: {
|
|
82
|
-
icon: disabled ? colors.licorice100 : colors.licorice500,
|
|
83
|
-
background: disabled ? colors.soap100 : colors.soap500,
|
|
84
|
-
border: disabled ? colors.licorice100 : colors.licorice500,
|
|
85
|
-
label: disabled ? colors.licorice100 : colors.blackPepper400,
|
|
86
|
-
},
|
|
87
|
-
focus: {
|
|
88
|
-
icon: colors.licorice200,
|
|
89
|
-
background: colors.soap300,
|
|
90
|
-
label: colors.blackPepper400,
|
|
91
|
-
border: colors.licorice200,
|
|
92
|
-
},
|
|
93
|
-
disabled: {},
|
|
94
|
-
};
|
|
95
|
-
};
|
|
96
|
-
|
|
97
32
|
const pillBaseStyles: CSSObject = {
|
|
98
33
|
display: 'inline-flex',
|
|
99
34
|
alignItems: 'center',
|
|
@@ -115,6 +50,7 @@ const pillBaseStyles: CSSObject = {
|
|
|
115
50
|
const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
|
|
116
51
|
{
|
|
117
52
|
...pillBaseStyles,
|
|
53
|
+
|
|
118
54
|
'&:focus': {
|
|
119
55
|
'span[data-count="ck-pill-count"]': {
|
|
120
56
|
borderTop: `1px solid ${colors.blueberry400}`,
|
|
@@ -136,7 +72,34 @@ const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
|
|
|
136
72
|
},
|
|
137
73
|
},
|
|
138
74
|
}),
|
|
75
|
+
// Default Styles
|
|
76
|
+
[buttonVars.default.background]: colors.soap300,
|
|
77
|
+
[buttonVars.default.border]: colors.licorice200,
|
|
78
|
+
[buttonVars.default.label]: colors.blackPepper400,
|
|
79
|
+
[buttonVars.default.icon]: colors.licorice200,
|
|
80
|
+
// Hover Styles
|
|
81
|
+
[buttonVars.hover.background]: colors.soap400,
|
|
82
|
+
[buttonVars.hover.border]: colors.licorice400,
|
|
83
|
+
[buttonVars.hover.label]: colors.blackPepper400,
|
|
84
|
+
[buttonVars.hover.icon]: colors.licorice500,
|
|
85
|
+
// Focus Styles
|
|
86
|
+
[buttonVars.focus.background]: colors.soap300,
|
|
87
|
+
[buttonVars.focus.border]: colors.blueberry400,
|
|
88
|
+
[buttonVars.focus.label]: colors.blackPepper400,
|
|
89
|
+
[buttonVars.focus.icon]: colors.licorice500,
|
|
90
|
+
// Active Styles
|
|
91
|
+
[buttonVars.active.background]: colors.soap500,
|
|
92
|
+
[buttonVars.active.border]: colors.licorice500,
|
|
93
|
+
[buttonVars.active.label]: colors.blackPepper400,
|
|
94
|
+
[buttonVars.active.icon]: colors.licorice500,
|
|
95
|
+
// Disabled Styles
|
|
96
|
+
[buttonVars.disabled.background]: colors.soap100,
|
|
97
|
+
[buttonVars.disabled.border]: colors.licorice100,
|
|
98
|
+
[buttonVars.disabled.label]: colors.licorice100,
|
|
99
|
+
[buttonVars.disabled.opacity]: '1',
|
|
100
|
+
[buttonVars.disabled.icon]: colors.licorice100,
|
|
139
101
|
},
|
|
102
|
+
|
|
140
103
|
({variant}) => ({
|
|
141
104
|
'&:focus, &:focus-visible': {
|
|
142
105
|
borderColor: variant === 'removable' ? undefined : colors.blueberry400,
|
|
@@ -152,7 +115,26 @@ const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
|
|
|
152
115
|
boxStyleFn
|
|
153
116
|
);
|
|
154
117
|
|
|
155
|
-
const StyledNonInteractivePill = styled(StyledBasePill)<StyledType>({
|
|
118
|
+
const StyledNonInteractivePill = styled(StyledBasePill)<StyledType & CSProps>({
|
|
119
|
+
[buttonVars.default.background]: colors.soap300,
|
|
120
|
+
[buttonVars.default.border]: colors.licorice200,
|
|
121
|
+
[buttonVars.default.label]: colors.blackPepper400,
|
|
122
|
+
|
|
123
|
+
[buttonVars.hover.background]: colors.soap300,
|
|
124
|
+
[buttonVars.hover.border]: colors.licorice200,
|
|
125
|
+
[buttonVars.hover.label]: colors.blackPepper400,
|
|
126
|
+
|
|
127
|
+
[buttonVars.focus.background]: colors.soap300,
|
|
128
|
+
[buttonVars.focus.border]: colors.licorice200,
|
|
129
|
+
[buttonVars.focus.label]: colors.blackPepper400,
|
|
130
|
+
|
|
131
|
+
[buttonVars.active.background]: colors.soap500,
|
|
132
|
+
[buttonVars.active.border]: colors.licorice500,
|
|
133
|
+
[buttonVars.active.label]: colors.blackPepper400,
|
|
134
|
+
|
|
135
|
+
[buttonVars.disabled.background]: colors.soap100,
|
|
136
|
+
[buttonVars.disabled.label]: colors.licorice100,
|
|
137
|
+
[buttonVars.disabled.border]: colors.licorice100,
|
|
156
138
|
cursor: 'default',
|
|
157
139
|
overflow: 'revert', // override BaseButton overflow styles so the click target exists outside the pill for removable
|
|
158
140
|
position: 'relative',
|
|
@@ -165,6 +147,15 @@ const StyledNonInteractivePill = styled(StyledBasePill)<StyledType>({
|
|
|
165
147
|
},
|
|
166
148
|
});
|
|
167
149
|
|
|
150
|
+
const StyledReadOnlyPill = styled(StyledNonInteractivePill)<StyledType>({
|
|
151
|
+
[buttonVars.default.background]: 'transparent',
|
|
152
|
+
[buttonVars.hover.background]: 'transparent',
|
|
153
|
+
[buttonVars.focus.background]: 'transparent',
|
|
154
|
+
[buttonVars.active.background]: 'transparent',
|
|
155
|
+
[buttonVars.disabled.background]: 'transparent',
|
|
156
|
+
border: `1px solid ${colors.licorice200}`,
|
|
157
|
+
});
|
|
158
|
+
|
|
168
159
|
/**
|
|
169
160
|
* By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
|
|
170
161
|
* we mean that the Pill container is a focusable element (a `<button>`). All leading elements
|
|
@@ -274,26 +265,22 @@ export const Pill = createContainer('button')({
|
|
|
274
265
|
Label: PillLabel,
|
|
275
266
|
},
|
|
276
267
|
})<PillProps>(({variant = 'default', maxWidth, ...elemProps}, Element, model) => {
|
|
268
|
+
console.log(elemProps);
|
|
269
|
+
console.log(model.state.disabled);
|
|
277
270
|
return (
|
|
278
271
|
<>
|
|
279
272
|
{variant === 'readOnly' && (
|
|
280
|
-
<
|
|
281
|
-
maxWidth={model.state.maxWidth}
|
|
273
|
+
<StyledReadOnlyPill
|
|
282
274
|
as={Element !== 'button' ? Element : 'span'}
|
|
283
|
-
border={`1px solid ${colors.licorice200}`}
|
|
284
275
|
id={model.state.id}
|
|
276
|
+
maxWidth={model.state.maxWidth}
|
|
285
277
|
{...elemProps}
|
|
286
278
|
>
|
|
287
279
|
<PillLabel>{elemProps.children}</PillLabel>
|
|
288
|
-
</
|
|
280
|
+
</StyledReadOnlyPill>
|
|
289
281
|
)}
|
|
290
282
|
{variant === 'default' && (
|
|
291
|
-
<StyledBasePill
|
|
292
|
-
colors={getButtonPillColors()}
|
|
293
|
-
as={Element}
|
|
294
|
-
{...elemProps}
|
|
295
|
-
disabled={model.state.disabled}
|
|
296
|
-
>
|
|
283
|
+
<StyledBasePill as={Element} {...elemProps} disabled={model.state.disabled}>
|
|
297
284
|
<Flex gap="xxxs" display="inline-flex" alignItems="center">
|
|
298
285
|
{React.Children.map(elemProps.children, (child, index) => {
|
|
299
286
|
if (typeof child === 'string') {
|
|
@@ -310,10 +297,10 @@ export const Pill = createContainer('button')({
|
|
|
310
297
|
)}
|
|
311
298
|
{variant === 'removable' && (
|
|
312
299
|
<StyledNonInteractivePill
|
|
313
|
-
colors={getRemovablePillColors(model.state.disabled)}
|
|
314
300
|
as={Element !== 'button' ? Element : 'span'}
|
|
315
301
|
variant={variant}
|
|
316
|
-
{
|
|
302
|
+
type={undefined}
|
|
303
|
+
{...handleCsProp(elemProps, [model.state.disabled ? 'disabled' : undefined])}
|
|
317
304
|
>
|
|
318
305
|
<Flex gap="xxxs" display="inline-flex" alignItems="center" justifyContent="center">
|
|
319
306
|
{React.Children.map(elemProps.children, (child, index) => {
|
|
@@ -7,7 +7,7 @@ import {usePillModel} from './usePillModel';
|
|
|
7
7
|
import {xSmallIcon} from '@workday/canvas-system-icons-web';
|
|
8
8
|
import {CanvasSystemIcon} from '@workday/design-assets-types';
|
|
9
9
|
import {colors, space} from '@workday/canvas-kit-react/tokens';
|
|
10
|
-
import {BaseButton} from '@workday/canvas-kit-react/button';
|
|
10
|
+
import {BaseButton, buttonVars} from '@workday/canvas-kit-react/button';
|
|
11
11
|
|
|
12
12
|
export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
|
|
13
13
|
/**
|
|
@@ -22,31 +22,6 @@ export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
|
|
|
22
22
|
'aria-label'?: string;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
const getIconColors = () => {
|
|
26
|
-
return {
|
|
27
|
-
default: {
|
|
28
|
-
icon: colors.licorice200,
|
|
29
|
-
border: 'initial',
|
|
30
|
-
},
|
|
31
|
-
hover: {
|
|
32
|
-
icon: colors.licorice500,
|
|
33
|
-
border: 'initial',
|
|
34
|
-
},
|
|
35
|
-
active: {
|
|
36
|
-
icon: colors.licorice500,
|
|
37
|
-
border: 'initial',
|
|
38
|
-
},
|
|
39
|
-
focus: {
|
|
40
|
-
icon: colors.licorice500,
|
|
41
|
-
border: 'transparent',
|
|
42
|
-
},
|
|
43
|
-
disabled: {
|
|
44
|
-
icon: colors.licorice100,
|
|
45
|
-
opacity: '1',
|
|
46
|
-
},
|
|
47
|
-
};
|
|
48
|
-
};
|
|
49
|
-
|
|
50
25
|
const StyledIconButton = styled(BaseButton)<StyledType & PillIconButtonProps>({
|
|
51
26
|
marginInlineEnd: '-7px', // visually pull in the pill to the right size
|
|
52
27
|
marginInlineStart: `-2px`, // visually create space between label and the button
|
|
@@ -60,13 +35,32 @@ const StyledIconButton = styled(BaseButton)<StyledType & PillIconButtonProps>({
|
|
|
60
35
|
bottom: '-7px',
|
|
61
36
|
margin: 0,
|
|
62
37
|
pointerEvents: 'all',
|
|
63
|
-
cursor: 'pointer',
|
|
64
38
|
},
|
|
65
39
|
'&.focus, &:focus-visible': {
|
|
66
40
|
...focusRing({
|
|
67
41
|
innerColor: 'transparent',
|
|
68
42
|
}),
|
|
69
43
|
},
|
|
44
|
+
[buttonVars.default.background]: colors.soap300,
|
|
45
|
+
[buttonVars.default.border]: 'transparent',
|
|
46
|
+
[buttonVars.default.label]: colors.blackPepper400,
|
|
47
|
+
|
|
48
|
+
[buttonVars.hover.background]: colors.soap300,
|
|
49
|
+
[buttonVars.hover.border]: 'transparent',
|
|
50
|
+
[buttonVars.hover.label]: colors.blackPepper400,
|
|
51
|
+
|
|
52
|
+
[buttonVars.focus.background]: colors.soap300,
|
|
53
|
+
[buttonVars.focus.border]: 'transparent',
|
|
54
|
+
[buttonVars.focus.label]: colors.blackPepper400,
|
|
55
|
+
|
|
56
|
+
[buttonVars.active.background]: colors.soap500,
|
|
57
|
+
[buttonVars.active.border]: 'transparent',
|
|
58
|
+
[buttonVars.active.label]: colors.blackPepper400,
|
|
59
|
+
|
|
60
|
+
[buttonVars.disabled.background]: colors.soap100,
|
|
61
|
+
[buttonVars.disabled.label]: colors.licorice100,
|
|
62
|
+
[buttonVars.disabled.border]: 'transparent',
|
|
63
|
+
[buttonVars.disabled.icon]: colors.licorice100,
|
|
70
64
|
});
|
|
71
65
|
|
|
72
66
|
export const PillIconButton = createSubcomponent('button')({
|
|
@@ -84,7 +78,6 @@ export const PillIconButton = createSubcomponent('button')({
|
|
|
84
78
|
width={20}
|
|
85
79
|
padding="zero"
|
|
86
80
|
disabled={model.state.disabled}
|
|
87
|
-
colors={getIconColors()}
|
|
88
81
|
aria-labelledby={`removable-${model.state.id} label-${model.state.id}`}
|
|
89
82
|
as={Element}
|
|
90
83
|
position="relative"
|