@workday/canvas-kit-preview-react 15.0.0-alpha.0074-next.0 → 15.0.0-alpha.0075-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/dist/commonjs/index.d.ts +0 -1
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +0 -1
- package/dist/commonjs/multi-select/lib/MultiSelectedItem.js +1 -1
- package/dist/es6/index.d.ts +0 -1
- package/dist/es6/index.d.ts.map +1 -1
- package/dist/es6/index.js +0 -1
- package/dist/es6/multi-select/lib/MultiSelectedItem.js +1 -1
- package/index.ts +0 -1
- package/multi-select/lib/MultiSelectedItem.tsx +1 -1
- package/package.json +4 -4
- package/dist/commonjs/pill/index.d.ts +0 -8
- package/dist/commonjs/pill/index.d.ts.map +0 -1
- package/dist/commonjs/pill/index.js +0 -23
- package/dist/commonjs/pill/lib/Pill.d.ts +0 -265
- package/dist/commonjs/pill/lib/Pill.d.ts.map +0 -1
- package/dist/commonjs/pill/lib/Pill.js +0 -147
- package/dist/commonjs/pill/lib/PillAvatar.d.ts +0 -526
- package/dist/commonjs/pill/lib/PillAvatar.d.ts.map +0 -1
- package/dist/commonjs/pill/lib/PillAvatar.js +0 -22
- package/dist/commonjs/pill/lib/PillCount.d.ts +0 -12
- package/dist/commonjs/pill/lib/PillCount.d.ts.map +0 -1
- package/dist/commonjs/pill/lib/PillCount.js +0 -21
- package/dist/commonjs/pill/lib/PillIcon.d.ts +0 -54
- package/dist/commonjs/pill/lib/PillIcon.d.ts.map +0 -1
- package/dist/commonjs/pill/lib/PillIcon.js +0 -20
- package/dist/commonjs/pill/lib/PillIconButton.d.ts +0 -148
- package/dist/commonjs/pill/lib/PillIconButton.d.ts.map +0 -1
- package/dist/commonjs/pill/lib/PillIconButton.js +0 -21
- package/dist/commonjs/pill/lib/PillLabel.d.ts +0 -14
- package/dist/commonjs/pill/lib/PillLabel.d.ts.map +0 -1
- package/dist/commonjs/pill/lib/PillLabel.js +0 -17
- package/dist/commonjs/pill/lib/usePillModel.d.ts +0 -46
- package/dist/commonjs/pill/lib/usePillModel.d.ts.map +0 -1
- package/dist/commonjs/pill/lib/usePillModel.js +0 -24
- package/dist/es6/pill/index.d.ts +0 -8
- package/dist/es6/pill/index.d.ts.map +0 -1
- package/dist/es6/pill/index.js +0 -7
- package/dist/es6/pill/lib/Pill.d.ts +0 -265
- package/dist/es6/pill/lib/Pill.d.ts.map +0 -1
- package/dist/es6/pill/lib/Pill.js +0 -144
- package/dist/es6/pill/lib/PillAvatar.d.ts +0 -526
- package/dist/es6/pill/lib/PillAvatar.d.ts.map +0 -1
- package/dist/es6/pill/lib/PillAvatar.js +0 -19
- package/dist/es6/pill/lib/PillCount.d.ts +0 -12
- package/dist/es6/pill/lib/PillCount.d.ts.map +0 -1
- package/dist/es6/pill/lib/PillCount.js +0 -18
- package/dist/es6/pill/lib/PillIcon.d.ts +0 -54
- package/dist/es6/pill/lib/PillIcon.d.ts.map +0 -1
- package/dist/es6/pill/lib/PillIcon.js +0 -17
- package/dist/es6/pill/lib/PillIconButton.d.ts +0 -148
- package/dist/es6/pill/lib/PillIconButton.d.ts.map +0 -1
- package/dist/es6/pill/lib/PillIconButton.js +0 -18
- package/dist/es6/pill/lib/PillLabel.d.ts +0 -14
- package/dist/es6/pill/lib/PillLabel.d.ts.map +0 -1
- package/dist/es6/pill/lib/PillLabel.js +0 -14
- package/dist/es6/pill/lib/usePillModel.d.ts +0 -46
- package/dist/es6/pill/lib/usePillModel.d.ts.map +0 -1
- package/dist/es6/pill/lib/usePillModel.js +0 -21
- package/pill/index.ts +0 -7
- package/pill/lib/Pill.tsx +0 -285
- package/pill/lib/PillAvatar.tsx +0 -35
- package/pill/lib/PillCount.tsx +0 -44
- package/pill/lib/PillIcon.tsx +0 -32
- package/pill/lib/PillIconButton.tsx +0 -86
- package/pill/lib/PillLabel.tsx +0 -32
- package/pill/lib/usePillModel.tsx +0 -23
- package/pill/package.json +0 -6
|
@@ -1,148 +0,0 @@
|
|
|
1
|
-
import { SystemIconProps } from '@workday/canvas-kit-react/icon';
|
|
2
|
-
export interface PillIconButtonProps extends Partial<SystemIconProps> {
|
|
3
|
-
/**
|
|
4
|
-
* The aria label for the removable icon. You must provide a valid string to represent the action.
|
|
5
|
-
*/
|
|
6
|
-
'aria-label'?: string;
|
|
7
|
-
}
|
|
8
|
-
export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, import("@workday/canvas-kit-styling").Stencil<{
|
|
9
|
-
size: {
|
|
10
|
-
large: {
|
|
11
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
12
|
-
height: "var(--cnvs-sys-size-xl, 3rem)";
|
|
13
|
-
paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
|
|
14
|
-
minWidth: "--cnvs-base-size-1400";
|
|
15
|
-
fontFamily: "--cnvs-sys-font-family-default";
|
|
16
|
-
lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
|
|
17
|
-
fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
|
|
18
|
-
letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
|
|
19
|
-
};
|
|
20
|
-
medium: {
|
|
21
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
22
|
-
minWidth: "--cnvs-base-size-1200";
|
|
23
|
-
paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
|
|
24
|
-
height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
|
|
25
|
-
fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
|
|
26
|
-
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
|
|
27
|
-
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
|
|
28
|
-
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
|
|
29
|
-
};
|
|
30
|
-
small: {
|
|
31
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
32
|
-
height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
|
|
33
|
-
minWidth: "--cnvs-base-size-1000";
|
|
34
|
-
paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
|
|
35
|
-
gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
|
|
36
|
-
fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
|
|
37
|
-
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
|
|
38
|
-
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
|
|
39
|
-
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
|
|
40
|
-
};
|
|
41
|
-
extraSmall: {
|
|
42
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
43
|
-
height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
|
|
44
|
-
minWidth: string;
|
|
45
|
-
paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
|
|
46
|
-
gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
|
|
47
|
-
fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
|
|
48
|
-
lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
|
|
49
|
-
fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
|
|
50
|
-
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
|
|
51
|
-
};
|
|
52
|
-
};
|
|
53
|
-
grow: {
|
|
54
|
-
true: {
|
|
55
|
-
width: string;
|
|
56
|
-
maxWidth: string;
|
|
57
|
-
};
|
|
58
|
-
};
|
|
59
|
-
iconPosition: {
|
|
60
|
-
only: {
|
|
61
|
-
padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
|
|
62
|
-
};
|
|
63
|
-
start: {};
|
|
64
|
-
end: {};
|
|
65
|
-
};
|
|
66
|
-
}, {}, {
|
|
67
|
-
background: string;
|
|
68
|
-
border: string;
|
|
69
|
-
boxShadowInner: string;
|
|
70
|
-
boxShadowOuter: string;
|
|
71
|
-
label: string;
|
|
72
|
-
opacity: string;
|
|
73
|
-
borderRadius: string;
|
|
74
|
-
}, never, never>>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
|
|
75
|
-
size: {
|
|
76
|
-
large: {
|
|
77
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
78
|
-
height: "var(--cnvs-sys-size-xl, 3rem)";
|
|
79
|
-
paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
|
|
80
|
-
minWidth: "--cnvs-base-size-1400";
|
|
81
|
-
fontFamily: "--cnvs-sys-font-family-default";
|
|
82
|
-
lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
|
|
83
|
-
fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
|
|
84
|
-
letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
|
|
85
|
-
};
|
|
86
|
-
medium: {
|
|
87
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
88
|
-
minWidth: "--cnvs-base-size-1200";
|
|
89
|
-
paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
|
|
90
|
-
height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
|
|
91
|
-
fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
|
|
92
|
-
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
|
|
93
|
-
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
|
|
94
|
-
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
|
|
95
|
-
};
|
|
96
|
-
small: {
|
|
97
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
98
|
-
height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
|
|
99
|
-
minWidth: "--cnvs-base-size-1000";
|
|
100
|
-
paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
|
|
101
|
-
gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
|
|
102
|
-
fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
|
|
103
|
-
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
|
|
104
|
-
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
|
|
105
|
-
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
|
|
106
|
-
};
|
|
107
|
-
extraSmall: {
|
|
108
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
109
|
-
height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
|
|
110
|
-
minWidth: string;
|
|
111
|
-
paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
|
|
112
|
-
gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
|
|
113
|
-
fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
|
|
114
|
-
lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
|
|
115
|
-
fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
|
|
116
|
-
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
|
|
117
|
-
};
|
|
118
|
-
};
|
|
119
|
-
grow: {
|
|
120
|
-
true: {
|
|
121
|
-
width: string;
|
|
122
|
-
maxWidth: string;
|
|
123
|
-
};
|
|
124
|
-
};
|
|
125
|
-
iconPosition: {
|
|
126
|
-
only: {
|
|
127
|
-
padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
|
|
128
|
-
};
|
|
129
|
-
start: {};
|
|
130
|
-
end: {};
|
|
131
|
-
};
|
|
132
|
-
}, {}, {
|
|
133
|
-
background: string;
|
|
134
|
-
border: string;
|
|
135
|
-
boxShadowInner: string;
|
|
136
|
-
boxShadowOuter: string;
|
|
137
|
-
label: string;
|
|
138
|
-
opacity: string;
|
|
139
|
-
borderRadius: string;
|
|
140
|
-
}, never, never>, never>;
|
|
141
|
-
export declare const PillIconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillIconButtonProps, {
|
|
142
|
-
state: {
|
|
143
|
-
id: string;
|
|
144
|
-
disabled: boolean;
|
|
145
|
-
};
|
|
146
|
-
events: {};
|
|
147
|
-
}>;
|
|
148
|
-
//# sourceMappingURL=PillIconButton.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAQ9F,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,eAAe,CAAC;IACnE;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA+ChC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;EAoB1B,CAAC"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.PillIconButton = exports.pillIconButtonStencil = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const common_1 = require("@workday/canvas-kit-react/common");
|
|
6
|
-
const icon_1 = require("@workday/canvas-kit-react/icon");
|
|
7
|
-
const usePillModel_1 = require("./usePillModel");
|
|
8
|
-
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
|
|
9
|
-
const button_1 = require("@workday/canvas-kit-react/button");
|
|
10
|
-
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
11
|
-
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
12
|
-
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
13
|
-
exports.pillIconButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
14
|
-
extends: button_1.buttonStencil,
|
|
15
|
-
base: { name: "1cihdw", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:var(--cnvs-sys-shape-half);height:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));padding:var(--cnvs-sys-space-zero);overflow:visible;flex:0 0 auto;--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--size-svg-8fcab8:var(--cnvs-sys-space-x6);::after{content:\"\";height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:var(--cnvs-sys-space-zero);pointer-events:all;}&:focus-visible, &.focus{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--border-button-f6d2bd:var(--cnvs-sys-color-border-transparent);--background-button-f6d2bd:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}" }
|
|
16
|
-
}, "pill-icon-button-10e7a0");
|
|
17
|
-
exports.PillIconButton = (0, common_1.createSubcomponent)('button')({
|
|
18
|
-
modelHook: usePillModel_1.usePillModel,
|
|
19
|
-
})(({ size, icon, children, 'aria-label': ariaLabel = '', ...elemProps }, Element, model) => {
|
|
20
|
-
return ((0, jsx_runtime_1.jsx)(Element, { disabled: model.state.disabled, "aria-labelledby": `removable-${model.state.id} label-${model.state.id}`, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.pillIconButtonStencil)()), children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { "aria-label": ariaLabel, id: `removable-${model.state.id}`, icon: icon || canvas_system_icons_web_1.xSmallIcon, "aria-hidden": true, role: "img" }) }));
|
|
21
|
-
});
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { BoxProps } from '@workday/canvas-kit-react/layout';
|
|
2
|
-
import { OverflowTooltipProps } from '@workday/canvas-kit-react/tooltip';
|
|
3
|
-
export interface PillLabelProps extends BoxProps {
|
|
4
|
-
tooltipProps?: Omit<OverflowTooltipProps, 'children'>;
|
|
5
|
-
}
|
|
6
|
-
export declare const pillLabelStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
|
|
7
|
-
export declare const PillLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillLabelProps, {
|
|
8
|
-
state: {
|
|
9
|
-
id: string;
|
|
10
|
-
disabled: boolean;
|
|
11
|
-
};
|
|
12
|
-
events: {};
|
|
13
|
-
}>;
|
|
14
|
-
//# sourceMappingURL=PillLabel.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAMxF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAED,eAAO,MAAM,gBAAgB,iJAO3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;EAUpB,CAAC"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.PillLabel = exports.pillLabelStencil = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const common_1 = require("@workday/canvas-kit-react/common");
|
|
6
|
-
const layout_1 = require("@workday/canvas-kit-react/layout");
|
|
7
|
-
const tooltip_1 = require("@workday/canvas-kit-react/tooltip");
|
|
8
|
-
const usePillModel_1 = require("./usePillModel");
|
|
9
|
-
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
10
|
-
exports.pillLabelStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
11
|
-
base: { name: "3j86df", styles: "box-sizing:border-box;flex-shrink:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" }
|
|
12
|
-
}, "pill-label-412177");
|
|
13
|
-
exports.PillLabel = (0, common_1.createSubcomponent)('span')({
|
|
14
|
-
modelHook: usePillModel_1.usePillModel,
|
|
15
|
-
})(({ tooltipProps, children, ...elemProps }, Element, model) => {
|
|
16
|
-
return ((0, jsx_runtime_1.jsx)(tooltip_1.OverflowTooltip, { ...tooltipProps, children: (0, jsx_runtime_1.jsx)(Element, { id: `label-${model.state.id}`, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.pillLabelStencil)()), children: children }) }));
|
|
17
|
-
});
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
|
|
2
|
-
/**
|
|
3
|
-
* Used to disable a pill and apply the correct styles.
|
|
4
|
-
*/
|
|
5
|
-
disabled: boolean;
|
|
6
|
-
/**
|
|
7
|
-
* ID used to add accessibility labels to pill elements.
|
|
8
|
-
* @default `useUniqueId()`
|
|
9
|
-
*/
|
|
10
|
-
id: string;
|
|
11
|
-
}> & {} & {}) | undefined) => {
|
|
12
|
-
state: {
|
|
13
|
-
id: string;
|
|
14
|
-
/**
|
|
15
|
-
* Used to disable a pill and apply the correct styles.
|
|
16
|
-
*/
|
|
17
|
-
disabled: boolean;
|
|
18
|
-
};
|
|
19
|
-
events: {};
|
|
20
|
-
}) & import("@workday/canvas-kit-react/common").ModelExtras<{
|
|
21
|
-
/**
|
|
22
|
-
* Used to disable a pill and apply the correct styles.
|
|
23
|
-
*/
|
|
24
|
-
disabled: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* ID used to add accessibility labels to pill elements.
|
|
27
|
-
* @default `useUniqueId()`
|
|
28
|
-
*/
|
|
29
|
-
id: string;
|
|
30
|
-
}, {}, {
|
|
31
|
-
id: string;
|
|
32
|
-
/**
|
|
33
|
-
* Used to disable a pill and apply the correct styles.
|
|
34
|
-
*/
|
|
35
|
-
disabled: boolean;
|
|
36
|
-
}, {}, {
|
|
37
|
-
state: {
|
|
38
|
-
id: string;
|
|
39
|
-
/**
|
|
40
|
-
* Used to disable a pill and apply the correct styles.
|
|
41
|
-
*/
|
|
42
|
-
disabled: boolean;
|
|
43
|
-
};
|
|
44
|
-
events: {};
|
|
45
|
-
}>;
|
|
46
|
-
//# sourceMappingURL=usePillModel.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"usePillModel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/usePillModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;IAErB;;OAEG;;IAEH;;;OAGG;;;;;QAPH;;WAEG;;;;;IAFH;;OAEG;;IAEH;;;OAGG;;;;IAPH;;OAEG;;;;;QAFH;;WAEG;;;;EAgBL,CAAC"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.usePillModel = void 0;
|
|
4
|
-
const common_1 = require("@workday/canvas-kit-react/common");
|
|
5
|
-
exports.usePillModel = (0, common_1.createModelHook)({
|
|
6
|
-
defaultConfig: {
|
|
7
|
-
/**
|
|
8
|
-
* Used to disable a pill and apply the correct styles.
|
|
9
|
-
*/
|
|
10
|
-
disabled: false,
|
|
11
|
-
/**
|
|
12
|
-
* ID used to add accessibility labels to pill elements.
|
|
13
|
-
* @default `useUniqueId()`
|
|
14
|
-
*/
|
|
15
|
-
id: '',
|
|
16
|
-
},
|
|
17
|
-
})(config => {
|
|
18
|
-
const id = (0, common_1.useUniqueId)(config.id);
|
|
19
|
-
const state = {
|
|
20
|
-
...config,
|
|
21
|
-
id,
|
|
22
|
-
};
|
|
23
|
-
return { state, events: {} };
|
|
24
|
-
});
|
package/dist/es6/pill/index.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export * from './lib/Pill';
|
|
2
|
-
export * from './lib/usePillModel';
|
|
3
|
-
export * from './lib/PillCount';
|
|
4
|
-
export * from './lib/PillIconButton';
|
|
5
|
-
export * from './lib/PillIcon';
|
|
6
|
-
export * from './lib/PillLabel';
|
|
7
|
-
export * from './lib/Pill';
|
|
8
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../pill/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC"}
|
package/dist/es6/pill/index.js
DELETED
|
@@ -1,265 +0,0 @@
|
|
|
1
|
-
import { BoxProps } from '@workday/canvas-kit-react/layout';
|
|
2
|
-
export interface PillProps extends BoxProps {
|
|
3
|
-
/**
|
|
4
|
-
* Defines what kind of pill to render stylistically and its interaction states
|
|
5
|
-
* @default 'default'
|
|
6
|
-
*/
|
|
7
|
-
variant?: 'readOnly' | 'removable';
|
|
8
|
-
/**
|
|
9
|
-
* Determines the max width of the pill. If the pill text is longer than the max width,
|
|
10
|
-
* text will be truncated and a tooltip will show the rest of the content when hovered over
|
|
11
|
-
*/
|
|
12
|
-
maxWidth?: string | number;
|
|
13
|
-
}
|
|
14
|
-
export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<{
|
|
15
|
-
variant: {
|
|
16
|
-
readOnly: {
|
|
17
|
-
[x: string]: string | {
|
|
18
|
-
[x: string]: "--cnvs-sys-color-bg-default" | "--cnvs-sys-color-border-container";
|
|
19
|
-
borderColor: "--cnvs-sys-color-border-container";
|
|
20
|
-
} | {
|
|
21
|
-
[x: string]: "--cnvs-sys-color-bg-default";
|
|
22
|
-
borderColor?: undefined;
|
|
23
|
-
};
|
|
24
|
-
border: string;
|
|
25
|
-
cursor: string;
|
|
26
|
-
'&:hover, &.hover': {
|
|
27
|
-
[x: string]: "--cnvs-sys-color-bg-default" | "--cnvs-sys-color-border-container";
|
|
28
|
-
borderColor: "--cnvs-sys-color-border-container";
|
|
29
|
-
};
|
|
30
|
-
'&:focus-visible, &.focus': {
|
|
31
|
-
[x: string]: "--cnvs-sys-color-bg-default";
|
|
32
|
-
};
|
|
33
|
-
'&:active, &.active': {
|
|
34
|
-
[x: string]: "--cnvs-sys-color-bg-default";
|
|
35
|
-
};
|
|
36
|
-
'&:disabled, &.disabled': {
|
|
37
|
-
[x: string]: "--cnvs-sys-color-bg-default";
|
|
38
|
-
};
|
|
39
|
-
};
|
|
40
|
-
removable: {
|
|
41
|
-
'&:focus-visible, &.focus': {
|
|
42
|
-
[x: string]: string;
|
|
43
|
-
boxShadow: string;
|
|
44
|
-
};
|
|
45
|
-
'&:hover, &.hover': {
|
|
46
|
-
[x: string]: "--cnvs-sys-color-bg-alt-strong";
|
|
47
|
-
};
|
|
48
|
-
'&:active, &.active': {
|
|
49
|
-
[x: string]: "--cnvs-sys-color-bg-alt-stronger";
|
|
50
|
-
};
|
|
51
|
-
'&:disabled, &.disabled': {
|
|
52
|
-
[x: string]: string;
|
|
53
|
-
};
|
|
54
|
-
cursor: string;
|
|
55
|
-
overflow: string;
|
|
56
|
-
position: string;
|
|
57
|
-
};
|
|
58
|
-
};
|
|
59
|
-
}, {}, {
|
|
60
|
-
maxWidth: string;
|
|
61
|
-
}, import("@workday/canvas-kit-styling").Stencil<{
|
|
62
|
-
size: {
|
|
63
|
-
large: {
|
|
64
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
65
|
-
height: "var(--cnvs-sys-size-xl, 3rem)";
|
|
66
|
-
paddingInline: "var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8))";
|
|
67
|
-
minWidth: "--cnvs-base-size-1400";
|
|
68
|
-
fontFamily: "--cnvs-sys-font-family-default";
|
|
69
|
-
lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small))";
|
|
70
|
-
fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small))";
|
|
71
|
-
letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-base-letter-spacing-200))";
|
|
72
|
-
};
|
|
73
|
-
medium: {
|
|
74
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
75
|
-
minWidth: "--cnvs-base-size-1200";
|
|
76
|
-
paddingInline: "var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6))";
|
|
77
|
-
height: "var(--cnvs-sys-size-lg, var(--cnvs-sys-space-x10))";
|
|
78
|
-
fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
|
|
79
|
-
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
|
|
80
|
-
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
|
|
81
|
-
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
|
|
82
|
-
};
|
|
83
|
-
small: {
|
|
84
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
85
|
-
height: "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x8))";
|
|
86
|
-
minWidth: "--cnvs-base-size-1000";
|
|
87
|
-
paddingInline: "var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4))";
|
|
88
|
-
gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
|
|
89
|
-
fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
|
|
90
|
-
lineHeight: "var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large))";
|
|
91
|
-
fontSize: "var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large))";
|
|
92
|
-
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-base-letter-spacing-50))";
|
|
93
|
-
};
|
|
94
|
-
extraSmall: {
|
|
95
|
-
fontWeight: "--cnvs-sys-font-weight-bold";
|
|
96
|
-
height: "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x6))";
|
|
97
|
-
minWidth: string;
|
|
98
|
-
paddingInline: "var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3))";
|
|
99
|
-
gap: "var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1))";
|
|
100
|
-
fontFamily: "var(--cnvs-sys-font-family-default, var(--cnvs-sys-font-family-default))";
|
|
101
|
-
lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium))";
|
|
102
|
-
fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium))";
|
|
103
|
-
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-base-letter-spacing-100))";
|
|
104
|
-
};
|
|
105
|
-
};
|
|
106
|
-
grow: {
|
|
107
|
-
true: {
|
|
108
|
-
width: string;
|
|
109
|
-
maxWidth: string;
|
|
110
|
-
};
|
|
111
|
-
};
|
|
112
|
-
iconPosition: {
|
|
113
|
-
only: {
|
|
114
|
-
padding: "var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero))";
|
|
115
|
-
};
|
|
116
|
-
start: {};
|
|
117
|
-
end: {};
|
|
118
|
-
};
|
|
119
|
-
}, {}, {
|
|
120
|
-
background: string;
|
|
121
|
-
border: string;
|
|
122
|
-
boxShadowInner: string;
|
|
123
|
-
boxShadowOuter: string;
|
|
124
|
-
label: string;
|
|
125
|
-
opacity: string;
|
|
126
|
-
borderRadius: string;
|
|
127
|
-
}, never, never>, never>;
|
|
128
|
-
/**
|
|
129
|
-
* By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
|
|
130
|
-
* we mean that the Pill container is a focusable element (a `<button>`). All leading elements
|
|
131
|
-
* (icons or avatars) are intended to be descriptive, helping support the label. They should not
|
|
132
|
-
* receive focus.
|
|
133
|
-
*
|
|
134
|
-
* `Pill` is the container component. It also provides a React context model for its subcomponents.
|
|
135
|
-
* Based on the `variant` prop this component will render different styled `Pill`s.
|
|
136
|
-
*
|
|
137
|
-
* Example of read only:
|
|
138
|
-
*
|
|
139
|
-
* ```tsx
|
|
140
|
-
* <Pill variant="readOnly">This is a read only</Pill>
|
|
141
|
-
* ```
|
|
142
|
-
*
|
|
143
|
-
* Example of interactive:
|
|
144
|
-
*
|
|
145
|
-
* ```tsx
|
|
146
|
-
* <Pill onClick={() => console.log('clicked')}>
|
|
147
|
-
* <Pill.Avatar /> Regina Skeltor
|
|
148
|
-
* </Pill>
|
|
149
|
-
* ```
|
|
150
|
-
*
|
|
151
|
-
* Example of removable:
|
|
152
|
-
*
|
|
153
|
-
* ```tsx
|
|
154
|
-
* <Pill variant="removable">
|
|
155
|
-
* <Pill.Avatar /> Regina Skeltor
|
|
156
|
-
* <Pill.IconButton aria-label='Remove user' onClick={() => console.log('clicked')} />
|
|
157
|
-
* </Pill>
|
|
158
|
-
* ```
|
|
159
|
-
*
|
|
160
|
-
* If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
|
|
161
|
-
* provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
|
|
162
|
-
* intentional click target that prevents users from accidentally deleting an item.
|
|
163
|
-
*
|
|
164
|
-
* ```tsx
|
|
165
|
-
* <Pill variant="removable">
|
|
166
|
-
* Shoes
|
|
167
|
-
* <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
|
|
168
|
-
* </Pill>
|
|
169
|
-
* ```
|
|
170
|
-
*/
|
|
171
|
-
export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
|
|
172
|
-
disabled: boolean;
|
|
173
|
-
id: string;
|
|
174
|
-
}> & {} & {}, {
|
|
175
|
-
state: {
|
|
176
|
-
id: string;
|
|
177
|
-
disabled: boolean;
|
|
178
|
-
};
|
|
179
|
-
events: {};
|
|
180
|
-
}> & {
|
|
181
|
-
/**
|
|
182
|
-
* This component renders an avatar. It supports all props of the `Avatar` component.
|
|
183
|
-
*
|
|
184
|
-
* ```tsx
|
|
185
|
-
* <Pill variant="removable">
|
|
186
|
-
* <Pill.Avatar url={avatarUrl} />
|
|
187
|
-
* <Pill.Label>Regina Skeltor</Pill.Label>
|
|
188
|
-
* <Pill.IconButton aria-label='Remove user' onClick={() => console.log('handle remove')} />
|
|
189
|
-
* </Pill>
|
|
190
|
-
* ```
|
|
191
|
-
*/
|
|
192
|
-
Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./PillAvatar").PillAvatarProps, {
|
|
193
|
-
state: {
|
|
194
|
-
id: string;
|
|
195
|
-
disabled: boolean;
|
|
196
|
-
};
|
|
197
|
-
events: {};
|
|
198
|
-
}>;
|
|
199
|
-
/**
|
|
200
|
-
* This component renders its `children` as the count.
|
|
201
|
-
*
|
|
202
|
-
* ```tsx
|
|
203
|
-
* <Pill onClick={() => console.warn('clicked')}>
|
|
204
|
-
* <Pill.Label>Shoes</Pill.Label>
|
|
205
|
-
* <Pill.Count>30</Pill.Count>
|
|
206
|
-
* </Pill>
|
|
207
|
-
* ```
|
|
208
|
-
*/
|
|
209
|
-
Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
|
|
210
|
-
/**
|
|
211
|
-
* This component renders an `icon`. By default it renders a `plusIcon` but it can be overridden by
|
|
212
|
-
* providing an icon to the `icon` prop. You must provide an `aria-label` for the icon.
|
|
213
|
-
*
|
|
214
|
-
* ```tsx
|
|
215
|
-
* <Pill onClick={() => console.warn('clicked')}>
|
|
216
|
-
* <Pill.Icon aria-label='Add user' />
|
|
217
|
-
* <Pill.Label>Regina Skeltor</Pill.Label>
|
|
218
|
-
* </Pill>
|
|
219
|
-
* ```
|
|
220
|
-
*/
|
|
221
|
-
Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
|
|
222
|
-
state: {
|
|
223
|
-
id: string;
|
|
224
|
-
disabled: boolean;
|
|
225
|
-
};
|
|
226
|
-
events: {};
|
|
227
|
-
}>;
|
|
228
|
-
/**
|
|
229
|
-
* This component renders a custom icon button. It is only intended to be used with the
|
|
230
|
-
* `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
|
|
231
|
-
* an icon to the `icon` prop.
|
|
232
|
-
*
|
|
233
|
-
* ```tsx
|
|
234
|
-
* <Pill variant="removable">
|
|
235
|
-
* <Pill.Label>Pink Shirts</Pill.Label>
|
|
236
|
-
* <Pill.IconButton aria-label='Remove item' onClick={() => console.warn('clicked')} />
|
|
237
|
-
* </Pill>
|
|
238
|
-
* ```
|
|
239
|
-
*/
|
|
240
|
-
IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
|
|
241
|
-
state: {
|
|
242
|
-
id: string;
|
|
243
|
-
disabled: boolean;
|
|
244
|
-
};
|
|
245
|
-
events: {};
|
|
246
|
-
}>;
|
|
247
|
-
/**
|
|
248
|
-
* This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
|
|
249
|
-
* There's no need to use this component directly since the overflow is handled for you automatically unless you have an icon or other element.
|
|
250
|
-
*
|
|
251
|
-
* ```tsx
|
|
252
|
-
* <Pill variant="readOnly">
|
|
253
|
-
* <Pill.Label>Read-only</Pill.Label>
|
|
254
|
-
* </Pill>
|
|
255
|
-
* ```
|
|
256
|
-
*/
|
|
257
|
-
Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
|
|
258
|
-
state: {
|
|
259
|
-
id: string;
|
|
260
|
-
disabled: boolean;
|
|
261
|
-
};
|
|
262
|
-
events: {};
|
|
263
|
-
}>;
|
|
264
|
-
};
|
|
265
|
-
//# sourceMappingURL=Pill.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAa5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwHtB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;CA8BL,CAAC"}
|