@workday/canvas-kit-preview-react 14.0.0-alpha.1223-next.0 → 14.0.0-alpha.1224-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.
Files changed (20) hide show
  1. package/dist/commonjs/pill/index.d.ts +1 -1
  2. package/dist/commonjs/pill/index.d.ts.map +1 -1
  3. package/dist/commonjs/pill/index.js +1 -3
  4. package/dist/commonjs/pill/lib/Pill.d.ts +44 -143
  5. package/dist/commonjs/pill/lib/Pill.d.ts.map +1 -1
  6. package/dist/commonjs/pill/lib/Pill.js +18 -23
  7. package/dist/commonjs/pill/lib/PillIconButton.d.ts.map +1 -1
  8. package/dist/commonjs/pill/lib/PillIconButton.js +1 -1
  9. package/dist/es6/pill/index.d.ts +1 -1
  10. package/dist/es6/pill/index.d.ts.map +1 -1
  11. package/dist/es6/pill/index.js +1 -1
  12. package/dist/es6/pill/lib/Pill.d.ts +44 -143
  13. package/dist/es6/pill/lib/Pill.d.ts.map +1 -1
  14. package/dist/es6/pill/lib/Pill.js +18 -23
  15. package/dist/es6/pill/lib/PillIconButton.d.ts.map +1 -1
  16. package/dist/es6/pill/lib/PillIconButton.js +1 -1
  17. package/package.json +4 -4
  18. package/pill/index.ts +1 -1
  19. package/pill/lib/Pill.tsx +97 -115
  20. package/pill/lib/PillIconButton.tsx +9 -2
package/dist/commonjs/pill/index.d.ts CHANGED
@@ -4,5 +4,5 @@ export { pillCountStencil } from './lib/PillCount';
4
4
  export { pillIconButtonStencil } from './lib/PillIconButton';
5
5
  export { pillIconStencil } from './lib/PillIcon';
6
6
  export { pillLabelStencil } from './lib/PillLabel';
7
- export { pillStencil, removeablePillStencil, readyOnlyPillStencil } from './lib/Pill';
7
+ export { pillStencil } from './lib/Pill';
8
8
  //# sourceMappingURL=index.d.ts.map
package/dist/commonjs/pill/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../pill/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAC,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAC,qBAAqB,EAAC,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAC,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAC,WAAW,EAAE,qBAAqB,EAAE,oBAAoB,EAAC,MAAM,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../pill/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAC,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAC,qBAAqB,EAAC,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAC,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAC,WAAW,EAAC,MAAM,YAAY,CAAC"}
package/dist/commonjs/pill/index.js CHANGED
@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
14
  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.readyOnlyPillStencil = exports.removeablePillStencil = exports.pillStencil = exports.pillLabelStencil = exports.pillIconStencil = exports.pillIconButtonStencil = exports.pillCountStencil = void 0;
17
+ exports.pillStencil = exports.pillLabelStencil = exports.pillIconStencil = exports.pillIconButtonStencil = exports.pillCountStencil = void 0;
18
18
  __exportStar(require("./lib/Pill"), exports);
19
19
  __exportStar(require("./lib/usePillModel"), exports);
20
20
  var PillCount_1 = require("./lib/PillCount");
@@ -27,5 +27,3 @@ var PillLabel_1 = require("./lib/PillLabel");
27
27
  Object.defineProperty(exports, "pillLabelStencil", { enumerable: true, get: function () { return PillLabel_1.pillLabelStencil; } });
28
28
  var Pill_1 = require("./lib/Pill");
29
29
  Object.defineProperty(exports, "pillStencil", { enumerable: true, get: function () { return Pill_1.pillStencil; } });
30
- Object.defineProperty(exports, "removeablePillStencil", { enumerable: true, get: function () { return Pill_1.removeablePillStencil; } });
31
- Object.defineProperty(exports, "readyOnlyPillStencil", { enumerable: true, get: function () { return Pill_1.readyOnlyPillStencil; } });
package/dist/commonjs/pill/lib/Pill.d.ts CHANGED
@@ -4,87 +4,59 @@ export interface PillProps extends BoxProps {
4
4
  * Defines what kind of pill to render stylistically and its interaction states
5
5
  * @default 'default'
6
6
  */
7
- variant?: 'default' | 'readOnly' | 'removable';
7
+ variant?: 'readOnly' | 'removable';
8
8
  /**
9
9
  * Determines the max width of the pill. If the pill text is longer than the max width,
10
10
  * text will be truncated and a tooltip will show the rest of the content when hovered over
11
11
  */
12
12
  maxWidth?: string | number;
13
13
  }
14
- export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
15
- maxWidth: string;
16
- }, never>, {}, {
17
- maxWidth: string;
18
- }, import("@workday/canvas-kit-styling").Stencil<{
19
- size: {
20
- large: {
21
- fontWeight: "--cnvs-sys-font-weight-bold";
22
- height: string;
23
- paddingInline: "--cnvs-sys-space-x8";
24
- minWidth: string;
25
- fontFamily: "--cnvs-sys-font-family-default";
26
- lineHeight: "--cnvs-sys-line-height-body-small";
27
- fontSize: "--cnvs-sys-font-size-body-small";
28
- letterSpacing: "--cnvs-base-letter-spacing-200";
29
- };
30
- medium: {
31
- fontWeight: "--cnvs-sys-font-weight-bold";
32
- minWidth: string;
33
- paddingInline: "--cnvs-sys-space-x6";
34
- height: "--cnvs-sys-space-x10";
35
- fontFamily: "--cnvs-sys-font-family-default";
36
- lineHeight: "--cnvs-sys-line-height-subtext-large";
37
- fontSize: "--cnvs-sys-font-size-subtext-large";
38
- letterSpacing: "--cnvs-base-letter-spacing-150";
39
- };
40
- small: {
41
- fontWeight: "--cnvs-sys-font-weight-bold";
42
- height: "--cnvs-sys-space-x8";
43
- minWidth: "--cnvs-sys-space-x20";
44
- paddingInline: "--cnvs-sys-space-x4";
45
- gap: "--cnvs-sys-space-x1";
46
- fontFamily: "--cnvs-sys-font-family-default";
47
- lineHeight: "--cnvs-sys-line-height-subtext-large";
48
- fontSize: "--cnvs-sys-font-size-subtext-large";
49
- letterSpacing: "--cnvs-base-letter-spacing-150";
14
+ export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<{
15
+ variant: {
16
+ readOnly: {
17
+ [x: string]: string | {
18
+ [x: string]: string;
19
+ borderColor: "--cnvs-sys-color-border-container";
20
+ } | {
21
+ [x: string]: string;
22
+ borderColor?: undefined;
23
+ };
24
+ border: string;
25
+ cursor: "default";
26
+ '&:hover, &.hover': {
27
+ [x: string]: string;
28
+ borderColor: "--cnvs-sys-color-border-container";
29
+ };
30
+ '&:focus-visible, &.focus': {
31
+ [x: string]: string;
32
+ };
33
+ '&:active, &.active': {
34
+ [x: string]: string;
35
+ };
36
+ '&:disabled, &.disabled': {
37
+ [x: string]: string;
38
+ };
50
39
  };
51
- extraSmall: {
52
- fontWeight: "--cnvs-sys-font-weight-bold";
53
- height: "--cnvs-sys-space-x6";
54
- minWidth: string;
55
- paddingInline: "--cnvs-sys-space-x3";
56
- gap: "--cnvs-sys-space-x1";
57
- fontFamily: "--cnvs-sys-font-family-default";
58
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
59
- fontSize: "--cnvs-sys-font-size-subtext-medium";
60
- letterSpacing: "--cnvs-base-letter-spacing-100";
61
- };
62
- };
63
- grow: {
64
- true: {
65
- width: string;
66
- maxWidth: string;
67
- };
68
- };
69
- iconPosition: {
70
- only: {
71
- padding: "--cnvs-sys-space-zero";
40
+ removable: {
41
+ '&:focus-visible, &.focus': {
42
+ [x: string]: "none" | "--cnvs-sys-color-border-input-default" | "--cnvs-sys-color-fg-strong" | "--cnvs-sys-color-bg-alt-default";
43
+ boxShadow: "none";
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: "default";
55
+ overflow: "revert";
56
+ position: "relative";
72
57
  };
73
- start: {};
74
- end: {};
75
58
  };
76
59
  }, {}, {
77
- background: string;
78
- border: string;
79
- boxShadowInner: string;
80
- boxShadowOuter: string;
81
- label: string;
82
- opacity: string;
83
- borderRadius: string;
84
- }, never, never>, never>;
85
- export declare const removeablePillStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
86
- maxWidth: string;
87
- }, never>, {}, {
88
60
  maxWidth: string;
89
61
  }, import("@workday/canvas-kit-styling").Stencil<{
90
62
  size: {
@@ -152,78 +124,7 @@ export declare const removeablePillStencil: import("@workday/canvas-kit-styling"
152
124
  label: string;
153
125
  opacity: string;
154
126
  borderRadius: string;
155
- }, never, never>, never>, never>;
156
- export declare const readyOnlyPillStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
157
- maxWidth: string;
158
- }, never>, {}, {
159
- maxWidth: string;
160
- }, import("@workday/canvas-kit-styling").Stencil<{
161
- size: {
162
- large: {
163
- fontWeight: "--cnvs-sys-font-weight-bold";
164
- height: string;
165
- paddingInline: "--cnvs-sys-space-x8";
166
- minWidth: string;
167
- fontFamily: "--cnvs-sys-font-family-default";
168
- lineHeight: "--cnvs-sys-line-height-body-small";
169
- fontSize: "--cnvs-sys-font-size-body-small";
170
- letterSpacing: "--cnvs-base-letter-spacing-200";
171
- };
172
- medium: {
173
- fontWeight: "--cnvs-sys-font-weight-bold";
174
- minWidth: string;
175
- paddingInline: "--cnvs-sys-space-x6";
176
- height: "--cnvs-sys-space-x10";
177
- fontFamily: "--cnvs-sys-font-family-default";
178
- lineHeight: "--cnvs-sys-line-height-subtext-large";
179
- fontSize: "--cnvs-sys-font-size-subtext-large";
180
- letterSpacing: "--cnvs-base-letter-spacing-150";
181
- };
182
- small: {
183
- fontWeight: "--cnvs-sys-font-weight-bold";
184
- height: "--cnvs-sys-space-x8";
185
- minWidth: "--cnvs-sys-space-x20";
186
- paddingInline: "--cnvs-sys-space-x4";
187
- gap: "--cnvs-sys-space-x1";
188
- fontFamily: "--cnvs-sys-font-family-default";
189
- lineHeight: "--cnvs-sys-line-height-subtext-large";
190
- fontSize: "--cnvs-sys-font-size-subtext-large";
191
- letterSpacing: "--cnvs-base-letter-spacing-150";
192
- };
193
- extraSmall: {
194
- fontWeight: "--cnvs-sys-font-weight-bold";
195
- height: "--cnvs-sys-space-x6";
196
- minWidth: string;
197
- paddingInline: "--cnvs-sys-space-x3";
198
- gap: "--cnvs-sys-space-x1";
199
- fontFamily: "--cnvs-sys-font-family-default";
200
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
201
- fontSize: "--cnvs-sys-font-size-subtext-medium";
202
- letterSpacing: "--cnvs-base-letter-spacing-100";
203
- };
204
- };
205
- grow: {
206
- true: {
207
- width: string;
208
- maxWidth: string;
209
- };
210
- };
211
- iconPosition: {
212
- only: {
213
- padding: "--cnvs-sys-space-zero";
214
- };
215
- start: {};
216
- end: {};
217
- };
218
- }, {}, {
219
- background: string;
220
- border: string;
221
- boxShadowInner: string;
222
- boxShadowOuter: string;
223
- label: string;
224
- opacity: string;
225
- borderRadius: string;
226
- }, never, never>, never>, never>;
127
+ }, never, never>, never>;
227
128
  /**
228
129
  * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
229
130
  * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
package/dist/commonjs/pill/lib/Pill.d.ts.map CHANGED
@@ -1 +1 @@
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,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2EtB,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAuBhC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAmB/B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;CA+CL,CAAC"}
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"}
package/dist/commonjs/pill/lib/Pill.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Pill = exports.readyOnlyPillStencil = exports.removeablePillStencil = exports.pillStencil = void 0;
3
+ exports.Pill = exports.pillStencil = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const button_1 = require("@workday/canvas-kit-react/button");
6
6
  const common_1 = require("@workday/canvas-kit-react/common");
@@ -19,16 +19,14 @@ exports.pillStencil = (0, canvas_kit_styling_1.createStencil)({
19
19
  vars: {
20
20
  maxWidth: '',
21
21
  },
22
- base: { name: "272ee1", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-x1);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-space-x2);height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x1);max-width:var(--maxWidth-pill-84ca2f);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);--borderColor-pill-count-d778e9:transparent;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-large);}&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--border-button-65cb05:var(--cnvs-sys-color-border-primary-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);border-color:var(--cnvs-sys-color-border-primary-default);--borderColor-pill-count-d778e9:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default), 0 0 0 0px var(--cnvs-sys-color-border-primary-default);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:var(--cnvs-sys-color-border-input-strong);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);--border-button-65cb05:var(--cnvs-sys-color-border-input-strong);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-stronger);--borderColor-pill-count-d778e9:transparent;}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-softer);--border-button-65cb05:var(--cnvs-sys-color-border-input-disabled);--label-button-65cb05:var(--cnvs-sys-color-text-disabled);--opacity-button-65cb05:1;--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-default);--borderColor-pill-count-d778e9:transparent;}" }
23
- }, "pill-84ca2f");
24
- exports.removeablePillStencil = (0, canvas_kit_styling_1.createStencil)({
25
- extends: exports.pillStencil,
26
- base: { name: "29t42f", styles: "box-sizing:border-box;&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);box-shadow:none;}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-softer);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}cursor:default;overflow:revert;position:relative;" }
27
- }, "removeable-pill-d32913");
28
- exports.readyOnlyPillStencil = (0, canvas_kit_styling_1.createStencil)({
29
- extends: exports.pillStencil,
30
- base: { name: "utwcz", styles: "box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);cursor:default;--background-button-65cb05:transparent;&:hover, &.hover{--background-button-65cb05:transparent;}&:focus-visible, &.focus{--background-button-65cb05:transparent;}&:active, &.active{--background-button-65cb05:transparent;}&:disabled, &.disabled{--background-button-65cb05:transparent;}" }
31
- }, "ready-only-pill-3701de");
22
+ base: { name: "wt4ed", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-x1);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-space-x2);height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x1);max-width:var(--maxWidth-pill-02eca5);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-large);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:var(--cnvs-sys-color-border-input-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);--border-button-65cb05:var(--cnvs-sys-color-border-input-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:var(--cnvs-sys-color-border-primary-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-border-primary-default);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default), 0 0 0 0px var(--cnvs-sys-color-border-primary-default);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:var(--cnvs-sys-color-border-input-disabled);--label-button-65cb05:var(--cnvs-sys-color-fg-disabled);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-strong);--borderColor-pill-count-d778e9:transparent;}" },
23
+ modifiers: {
24
+ variant: {
25
+ readOnly: { name: "2o0uoh", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-container);cursor:default;--background-button-65cb05:transparent;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-container);--background-button-65cb05:transparent;}&:focus-visible, &.focus{--background-button-65cb05:transparent;}&:active, &.active{--background-button-65cb05:transparent;}&:disabled, &.disabled{--background-button-65cb05:transparent;}" },
26
+ removable: { name: "1iqmp3", styles: "&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:currentColor;}cursor:default;overflow:revert;position:relative;" }
27
+ }
28
+ }
29
+ }, "pill-02eca5");
32
30
  /**
33
31
  * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
34
32
  * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
@@ -136,17 +134,14 @@ exports.Pill = (0, common_1.createContainer)('button')({
136
134
  */
137
135
  Label: PillLabel_1.PillLabel,
138
136
  },
139
- })(({ variant = 'default', maxWidth = 200, children, ...elemProps }, Element, model) => {
137
+ })(({ variant, maxWidth = 200, children, ...elemProps }, Element, model) => {
140
138
  const maxWidthCSSValue = typeof maxWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(maxWidth) : maxWidth;
141
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [variant === 'readOnly' && ((0, jsx_runtime_1.jsx)(layout_1.Box, { as: Element !== 'button' ? Element : 'span', id: model.state.id, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.readyOnlyPillStencil)({
142
- maxWidth: maxWidthCSSValue,
143
- })), children: (0, jsx_runtime_1.jsx)(PillLabel_1.PillLabel, { children: children }) })), variant === 'default' && ((0, jsx_runtime_1.jsx)(Element, { disabled: model.state.disabled, ...(0, layout_1.mergeStyles)(elemProps, [
144
- model.state.disabled ? 'disabled' : undefined,
145
- (0, exports.pillStencil)({
146
- maxWidth: maxWidthCSSValue,
147
- }),
148
- ]), children: children })), variant === 'removable' && ((0, jsx_runtime_1.jsx)(layout_1.Box, { as: Element !== 'button' ? Element : 'span', ...(0, layout_1.mergeStyles)(elemProps, [
149
- model.state.disabled ? 'disabled' : undefined,
150
- (0, exports.removeablePillStencil)({ maxWidth: maxWidthCSSValue }),
151
- ]), children: children }))] }));
139
+ const isReadOnly = variant === 'readOnly';
140
+ return (variant === null || variant === void 0 ? void 0 : variant.match(/^(readOnly|removable)$/)) ? ((0, jsx_runtime_1.jsx)(layout_1.Box, { as: Element !== 'button' ? Element : 'span', id: isReadOnly ? model.state.id : undefined, ...(0, layout_1.mergeStyles)(elemProps, [
141
+ model.state.disabled ? 'disabled' : undefined,
142
+ (0, exports.pillStencil)({ maxWidth: maxWidthCSSValue, variant }),
143
+ ]), children: isReadOnly ? (0, jsx_runtime_1.jsx)(PillLabel_1.PillLabel, { children: children }) : children })) : ((0, jsx_runtime_1.jsx)(Element, { disabled: model.state.disabled, ...(0, layout_1.mergeStyles)(elemProps, [
144
+ model.state.disabled ? 'disabled' : undefined,
145
+ (0, exports.pillStencil)({ maxWidth: maxWidthCSSValue }),
146
+ ]), children: children }));
152
147
  });
package/dist/commonjs/pill/lib/PillIconButton.d.ts.map CHANGED
@@ -1 +1 @@
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAuChC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;EAoB1B,CAAC"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA8ChC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;EAoB1B,CAAC"}
package/dist/commonjs/pill/lib/PillIconButton.js CHANGED
@@ -12,7 +12,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
12
12
  const layout_1 = require("@workday/canvas-kit-react/layout");
13
13
  exports.pillIconButtonStencil = (0, canvas_kit_styling_1.createStencil)({
14
14
  extends: button_1.buttonStencil,
15
- base: { name: "10bgzn", 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-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);--size-svg-728c60: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-65cb05:var(--cnvs-sys-color-border-transparent);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-65cb05:var(--cnvs-sys-color-border-transparent);}&:disabled, &.disabled{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);}" }
15
+ base: { name: "b1n18", 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-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--size-svg-728c60: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-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05: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-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);}" }
16
16
  }, "pill-icon-button-10e7a0");
17
17
  exports.PillIconButton = (0, common_1.createSubcomponent)('button')({
18
18
  modelHook: usePillModel_1.usePillModel,
package/dist/es6/pill/index.d.ts CHANGED
@@ -4,5 +4,5 @@ export { pillCountStencil } from './lib/PillCount';
4
4
  export { pillIconButtonStencil } from './lib/PillIconButton';
5
5
  export { pillIconStencil } from './lib/PillIcon';
6
6
  export { pillLabelStencil } from './lib/PillLabel';
7
- export { pillStencil, removeablePillStencil, readyOnlyPillStencil } from './lib/Pill';
7
+ export { pillStencil } from './lib/Pill';
8
8
  //# sourceMappingURL=index.d.ts.map
package/dist/es6/pill/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../pill/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAC,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAC,qBAAqB,EAAC,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAC,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAC,WAAW,EAAE,qBAAqB,EAAE,oBAAoB,EAAC,MAAM,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../pill/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAC,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAC,qBAAqB,EAAC,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAC,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAC,WAAW,EAAC,MAAM,YAAY,CAAC"}
package/dist/es6/pill/index.js CHANGED
@@ -4,4 +4,4 @@ export { pillCountStencil } from './lib/PillCount';
4
4
  export { pillIconButtonStencil } from './lib/PillIconButton';
5
5
  export { pillIconStencil } from './lib/PillIcon';
6
6
  export { pillLabelStencil } from './lib/PillLabel';
7
- export { pillStencil, removeablePillStencil, readyOnlyPillStencil } from './lib/Pill';
7
+ export { pillStencil } from './lib/Pill';
package/dist/es6/pill/lib/Pill.d.ts CHANGED
@@ -4,87 +4,59 @@ export interface PillProps extends BoxProps {
4
4
  * Defines what kind of pill to render stylistically and its interaction states
5
5
  * @default 'default'
6
6
  */
7
- variant?: 'default' | 'readOnly' | 'removable';
7
+ variant?: 'readOnly' | 'removable';
8
8
  /**
9
9
  * Determines the max width of the pill. If the pill text is longer than the max width,
10
10
  * text will be truncated and a tooltip will show the rest of the content when hovered over
11
11
  */
12
12
  maxWidth?: string | number;
13
13
  }
14
- export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
15
- maxWidth: string;
16
- }, never>, {}, {
17
- maxWidth: string;
18
- }, import("@workday/canvas-kit-styling").Stencil<{
19
- size: {
20
- large: {
21
- fontWeight: "--cnvs-sys-font-weight-bold";
22
- height: string;
23
- paddingInline: "--cnvs-sys-space-x8";
24
- minWidth: string;
25
- fontFamily: "--cnvs-sys-font-family-default";
26
- lineHeight: "--cnvs-sys-line-height-body-small";
27
- fontSize: "--cnvs-sys-font-size-body-small";
28
- letterSpacing: "--cnvs-base-letter-spacing-200";
29
- };
30
- medium: {
31
- fontWeight: "--cnvs-sys-font-weight-bold";
32
- minWidth: string;
33
- paddingInline: "--cnvs-sys-space-x6";
34
- height: "--cnvs-sys-space-x10";
35
- fontFamily: "--cnvs-sys-font-family-default";
36
- lineHeight: "--cnvs-sys-line-height-subtext-large";
37
- fontSize: "--cnvs-sys-font-size-subtext-large";
38
- letterSpacing: "--cnvs-base-letter-spacing-150";
39
- };
40
- small: {
41
- fontWeight: "--cnvs-sys-font-weight-bold";
42
- height: "--cnvs-sys-space-x8";
43
- minWidth: "--cnvs-sys-space-x20";
44
- paddingInline: "--cnvs-sys-space-x4";
45
- gap: "--cnvs-sys-space-x1";
46
- fontFamily: "--cnvs-sys-font-family-default";
47
- lineHeight: "--cnvs-sys-line-height-subtext-large";
48
- fontSize: "--cnvs-sys-font-size-subtext-large";
49
- letterSpacing: "--cnvs-base-letter-spacing-150";
14
+ export declare const pillStencil: import("@workday/canvas-kit-styling").Stencil<{
15
+ variant: {
16
+ readOnly: {
17
+ [x: string]: string | {
18
+ [x: string]: string;
19
+ borderColor: "--cnvs-sys-color-border-container";
20
+ } | {
21
+ [x: string]: string;
22
+ borderColor?: undefined;
23
+ };
24
+ border: string;
25
+ cursor: "default";
26
+ '&:hover, &.hover': {
27
+ [x: string]: string;
28
+ borderColor: "--cnvs-sys-color-border-container";
29
+ };
30
+ '&:focus-visible, &.focus': {
31
+ [x: string]: string;
32
+ };
33
+ '&:active, &.active': {
34
+ [x: string]: string;
35
+ };
36
+ '&:disabled, &.disabled': {
37
+ [x: string]: string;
38
+ };
50
39
  };
51
- extraSmall: {
52
- fontWeight: "--cnvs-sys-font-weight-bold";
53
- height: "--cnvs-sys-space-x6";
54
- minWidth: string;
55
- paddingInline: "--cnvs-sys-space-x3";
56
- gap: "--cnvs-sys-space-x1";
57
- fontFamily: "--cnvs-sys-font-family-default";
58
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
59
- fontSize: "--cnvs-sys-font-size-subtext-medium";
60
- letterSpacing: "--cnvs-base-letter-spacing-100";
61
- };
62
- };
63
- grow: {
64
- true: {
65
- width: string;
66
- maxWidth: string;
67
- };
68
- };
69
- iconPosition: {
70
- only: {
71
- padding: "--cnvs-sys-space-zero";
40
+ removable: {
41
+ '&:focus-visible, &.focus': {
42
+ [x: string]: "none" | "--cnvs-sys-color-border-input-default" | "--cnvs-sys-color-fg-strong" | "--cnvs-sys-color-bg-alt-default";
43
+ boxShadow: "none";
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: "default";
55
+ overflow: "revert";
56
+ position: "relative";
72
57
  };
73
- start: {};
74
- end: {};
75
58
  };
76
59
  }, {}, {
77
- background: string;
78
- border: string;
79
- boxShadowInner: string;
80
- boxShadowOuter: string;
81
- label: string;
82
- opacity: string;
83
- borderRadius: string;
84
- }, never, never>, never>;
85
- export declare const removeablePillStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
86
- maxWidth: string;
87
- }, never>, {}, {
88
60
  maxWidth: string;
89
61
  }, import("@workday/canvas-kit-styling").Stencil<{
90
62
  size: {
@@ -152,78 +124,7 @@ export declare const removeablePillStencil: import("@workday/canvas-kit-styling"
152
124
  label: string;
153
125
  opacity: string;
154
126
  borderRadius: string;
155
- }, never, never>, never>, never>;
156
- export declare const readyOnlyPillStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
157
- maxWidth: string;
158
- }, never>, {}, {
159
- maxWidth: string;
160
- }, import("@workday/canvas-kit-styling").Stencil<{
161
- size: {
162
- large: {
163
- fontWeight: "--cnvs-sys-font-weight-bold";
164
- height: string;
165
- paddingInline: "--cnvs-sys-space-x8";
166
- minWidth: string;
167
- fontFamily: "--cnvs-sys-font-family-default";
168
- lineHeight: "--cnvs-sys-line-height-body-small";
169
- fontSize: "--cnvs-sys-font-size-body-small";
170
- letterSpacing: "--cnvs-base-letter-spacing-200";
171
- };
172
- medium: {
173
- fontWeight: "--cnvs-sys-font-weight-bold";
174
- minWidth: string;
175
- paddingInline: "--cnvs-sys-space-x6";
176
- height: "--cnvs-sys-space-x10";
177
- fontFamily: "--cnvs-sys-font-family-default";
178
- lineHeight: "--cnvs-sys-line-height-subtext-large";
179
- fontSize: "--cnvs-sys-font-size-subtext-large";
180
- letterSpacing: "--cnvs-base-letter-spacing-150";
181
- };
182
- small: {
183
- fontWeight: "--cnvs-sys-font-weight-bold";
184
- height: "--cnvs-sys-space-x8";
185
- minWidth: "--cnvs-sys-space-x20";
186
- paddingInline: "--cnvs-sys-space-x4";
187
- gap: "--cnvs-sys-space-x1";
188
- fontFamily: "--cnvs-sys-font-family-default";
189
- lineHeight: "--cnvs-sys-line-height-subtext-large";
190
- fontSize: "--cnvs-sys-font-size-subtext-large";
191
- letterSpacing: "--cnvs-base-letter-spacing-150";
192
- };
193
- extraSmall: {
194
- fontWeight: "--cnvs-sys-font-weight-bold";
195
- height: "--cnvs-sys-space-x6";
196
- minWidth: string;
197
- paddingInline: "--cnvs-sys-space-x3";
198
- gap: "--cnvs-sys-space-x1";
199
- fontFamily: "--cnvs-sys-font-family-default";
200
- lineHeight: "--cnvs-sys-line-height-subtext-medium";
201
- fontSize: "--cnvs-sys-font-size-subtext-medium";
202
- letterSpacing: "--cnvs-base-letter-spacing-100";
203
- };
204
- };
205
- grow: {
206
- true: {
207
- width: string;
208
- maxWidth: string;
209
- };
210
- };
211
- iconPosition: {
212
- only: {
213
- padding: "--cnvs-sys-space-zero";
214
- };
215
- start: {};
216
- end: {};
217
- };
218
- }, {}, {
219
- background: string;
220
- border: string;
221
- boxShadowInner: string;
222
- boxShadowOuter: string;
223
- label: string;
224
- opacity: string;
225
- borderRadius: string;
226
- }, never, never>, never>, never>;
127
+ }, never, never>, never>;
227
128
  /**
228
129
  * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
229
130
  * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
package/dist/es6/pill/lib/Pill.d.ts.map CHANGED
@@ -1 +1 @@
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,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2EtB,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAuBhC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAmB/B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;OAUG;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;CA+CL,CAAC"}
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"}
package/dist/es6/pill/lib/Pill.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { buttonStencil } from '@workday/canvas-kit-react/button';
3
3
  import { createContainer, focusRing } from '@workday/canvas-kit-react/common';
4
4
  import { Box, mergeStyles } from '@workday/canvas-kit-react/layout';
@@ -16,16 +16,14 @@ export const pillStencil = createStencil({
16
16
  vars: {
17
17
  maxWidth: '',
18
18
  },
19
- base: { name: "272ee1", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-x1);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-space-x2);height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x1);max-width:var(--maxWidth-pill-84ca2f);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);--borderColor-pill-count-d778e9:transparent;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-large);}&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--border-button-65cb05:var(--cnvs-sys-color-border-primary-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);border-color:var(--cnvs-sys-color-border-primary-default);--borderColor-pill-count-d778e9:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default), 0 0 0 0px var(--cnvs-sys-color-border-primary-default);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:var(--cnvs-sys-color-border-input-strong);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);--border-button-65cb05:var(--cnvs-sys-color-border-input-strong);--label-button-65cb05:var(--cnvs-sys-color-text-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-stronger);--borderColor-pill-count-d778e9:transparent;}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-softer);--border-button-65cb05:var(--cnvs-sys-color-border-input-disabled);--label-button-65cb05:var(--cnvs-sys-color-text-disabled);--opacity-button-65cb05:1;--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-default);--borderColor-pill-count-d778e9:transparent;}" }
20
- }, "pill-84ca2f");
21
- export const removeablePillStencil = createStencil({
22
- extends: pillStencil,
23
- base: { name: "29t42f", styles: "box-sizing:border-box;&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-text-strong);box-shadow:none;}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-softer);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}cursor:default;overflow:revert;position:relative;" }
24
- }, "removeable-pill-d32913");
25
- export const readyOnlyPillStencil = createStencil({
26
- extends: pillStencil,
27
- base: { name: "utwcz", styles: "box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);cursor:default;--background-button-65cb05:transparent;&:hover, &.hover{--background-button-65cb05:transparent;}&:focus-visible, &.focus{--background-button-65cb05:transparent;}&:active, &.active{--background-button-65cb05:transparent;}&:disabled, &.disabled{--background-button-65cb05:transparent;}" }
28
- }, "ready-only-pill-3701de");
19
+ base: { name: "wt4ed", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-x1);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-space-x2);height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x1);max-width:var(--maxWidth-pill-02eca5);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-large);}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--border-button-65cb05:var(--cnvs-sys-color-border-input-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);--border-button-65cb05:var(--cnvs-sys-color-border-input-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-muted-softer);--borderColor-pill-count-d778e9:transparent;}&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:var(--cnvs-sys-color-border-primary-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-border-primary-default);--color-system-icon-3a4847:currentColor;--borderColor-pill-count-d778e9:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default), 0 0 0 0px var(--cnvs-sys-color-border-primary-default);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:var(--cnvs-sys-color-border-input-disabled);--label-button-65cb05:var(--cnvs-sys-color-fg-disabled);--color-system-icon-3a4847:currentColor;--backgroundColor-pill-count-d778e9:var(--cnvs-sys-color-bg-alt-strong);--borderColor-pill-count-d778e9:transparent;}" },
20
+ modifiers: {
21
+ variant: {
22
+ readOnly: { name: "2o0uoh", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-container);cursor:default;--background-button-65cb05:transparent;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-container);--background-button-65cb05:transparent;}&:focus-visible, &.focus{--background-button-65cb05:transparent;}&:active, &.active{--background-button-65cb05:transparent;}&:disabled, &.disabled{--background-button-65cb05:transparent;}" },
23
+ removable: { name: "1iqmp3", styles: "&:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:currentColor;}cursor:default;overflow:revert;position:relative;" }
24
+ }
25
+ }
26
+ }, "pill-02eca5");
29
27
  /**
30
28
  * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
31
29
  * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
@@ -133,17 +131,14 @@ export const Pill = createContainer('button')({
133
131
  */
134
132
  Label: PillLabel,
135
133
  },
136
- })(({ variant = 'default', maxWidth = 200, children, ...elemProps }, Element, model) => {
134
+ })(({ variant, maxWidth = 200, children, ...elemProps }, Element, model) => {
137
135
  const maxWidthCSSValue = typeof maxWidth === 'number' ? px2rem(maxWidth) : maxWidth;
138
- return (_jsxs(_Fragment, { children: [variant === 'readOnly' && (_jsx(Box, { as: Element !== 'button' ? Element : 'span', id: model.state.id, ...mergeStyles(elemProps, readyOnlyPillStencil({
139
- maxWidth: maxWidthCSSValue,
140
- })), children: _jsx(PillLabel, { children: children }) })), variant === 'default' && (_jsx(Element, { disabled: model.state.disabled, ...mergeStyles(elemProps, [
141
- model.state.disabled ? 'disabled' : undefined,
142
- pillStencil({
143
- maxWidth: maxWidthCSSValue,
144
- }),
145
- ]), children: children })), variant === 'removable' && (_jsx(Box, { as: Element !== 'button' ? Element : 'span', ...mergeStyles(elemProps, [
146
- model.state.disabled ? 'disabled' : undefined,
147
- removeablePillStencil({ maxWidth: maxWidthCSSValue }),
148
- ]), children: children }))] }));
136
+ const isReadOnly = variant === 'readOnly';
137
+ return (variant === null || variant === void 0 ? void 0 : variant.match(/^(readOnly|removable)$/)) ? (_jsx(Box, { as: Element !== 'button' ? Element : 'span', id: isReadOnly ? model.state.id : undefined, ...mergeStyles(elemProps, [
138
+ model.state.disabled ? 'disabled' : undefined,
139
+ pillStencil({ maxWidth: maxWidthCSSValue, variant }),
140
+ ]), children: isReadOnly ? _jsx(PillLabel, { children: children }) : children })) : (_jsx(Element, { disabled: model.state.disabled, ...mergeStyles(elemProps, [
141
+ model.state.disabled ? 'disabled' : undefined,
142
+ pillStencil({ maxWidth: maxWidthCSSValue }),
143
+ ]), children: children }));
149
144
  });
package/dist/es6/pill/lib/PillIconButton.d.ts.map CHANGED
@@ -1 +1 @@
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAuChC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;EAoB1B,CAAC"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA8ChC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;EAoB1B,CAAC"}
package/dist/es6/pill/lib/PillIconButton.js CHANGED
@@ -9,7 +9,7 @@ import { system } from '@workday/canvas-tokens-web';
9
9
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
10
10
  export const pillIconButtonStencil = createStencil({
11
11
  extends: buttonStencil,
12
- base: { name: "10bgzn", 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-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);--size-svg-728c60: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-65cb05:var(--cnvs-sys-color-border-transparent);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-65cb05:var(--cnvs-sys-color-border-transparent);}&:disabled, &.disabled{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);}" }
12
+ base: { name: "b1n18", 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-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--size-svg-728c60: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-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05: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-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);}&:active, &.active{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);}" }
13
13
  }, "pill-icon-button-10e7a0");
14
14
  export const PillIconButton = createSubcomponent('button')({
15
15
  modelHook: usePillModel,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "14.0.0-alpha.1223-next.0",
3
+ "version": "14.0.0-alpha.1224-next.0",
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",
@@ -48,8 +48,8 @@
48
48
  "dependencies": {
49
49
  "@emotion/react": "^11.7.1",
50
50
  "@emotion/styled": "^11.6.0",
51
- "@workday/canvas-kit-react": "^14.0.0-alpha.1223-next.0",
52
- "@workday/canvas-kit-styling": "^14.0.0-alpha.1223-next.0",
51
+ "@workday/canvas-kit-react": "^14.0.0-alpha.1224-next.0",
52
+ "@workday/canvas-kit-styling": "^14.0.0-alpha.1224-next.0",
53
53
  "@workday/canvas-system-icons-web": "^3.0.35",
54
54
  "@workday/canvas-tokens-web": "3.0.0-alpha.12",
55
55
  "@workday/design-assets-types": "^0.2.10"
@@ -60,5 +60,5 @@
60
60
  "react-hook-form": "7.36.1",
61
61
  "yup": "^0.32.11"
62
62
  },
63
- "gitHead": "ca28ec0a632d90afcacdfcda090da1c8dc7d0dc6"
63
+ "gitHead": "55e63c9ec96d3719ef507660f01dd5e8e8b3363e"
64
64
  }
package/pill/index.ts CHANGED
@@ -4,4 +4,4 @@ export {pillCountStencil} from './lib/PillCount';
4
4
  export {pillIconButtonStencil} from './lib/PillIconButton';
5
5
  export {pillIconStencil} from './lib/PillIcon';
6
6
  export {pillLabelStencil} from './lib/PillLabel';
7
- export {pillStencil, removeablePillStencil, readyOnlyPillStencil} from './lib/Pill';
7
+ export {pillStencil} from './lib/Pill';
package/pill/lib/Pill.tsx CHANGED
@@ -18,7 +18,7 @@ export interface PillProps extends BoxProps {
18
18
  * Defines what kind of pill to render stylistically and its interaction states
19
19
  * @default 'default'
20
20
  */
21
- variant?: 'default' | 'readOnly' | 'removable';
21
+ variant?: 'readOnly' | 'removable';
22
22
  /**
23
23
  * Determines the max width of the pill. If the pill text is longer than the max width,
24
24
  * text will be truncated and a tooltip will show the rest of the content when hovered over
@@ -48,25 +48,42 @@ export const pillStencil = createStencil({
48
48
  height: system.space.x6,
49
49
  position: 'relative',
50
50
  gap: system.space.x1,
51
- maxWidth: maxWidth,
52
- [buttonStencil.vars.background]: system.color.bg.alt.default,
53
- [buttonStencil.vars.border]: system.color.border.input.default,
54
- [buttonStencil.vars.label]: system.color.text.strong,
55
- [systemIconStencil.vars.color]: system.color.icon.default,
56
- [pillCountStencil.vars.borderColor]: 'transparent',
51
+ maxWidth,
57
52
  whiteSpace: 'nowrap',
58
53
  textOverflow: 'ellipsis',
59
54
  overflow: 'hidden',
55
+ [buttonStencil.vars.background]: system.color.bg.alt.default,
56
+ [buttonStencil.vars.border]: system.color.border.input.default,
57
+ [buttonStencil.vars.label]: system.color.fg.strong,
58
+ [systemIconStencil.vars.color]: 'currentColor',
59
+ [pillCountStencil.vars.borderColor]: 'transparent',
60
+
60
61
  '&:has(span)': {
61
62
  display: 'flex',
62
63
  lineHeight: system.lineHeight.subtext.large, // ensure correct line height
63
64
  },
65
+ '&:hover, &.hover': {
66
+ [buttonStencil.vars.background]: system.color.bg.alt.strong,
67
+ [buttonStencil.vars.border]: system.color.border.input.strong,
68
+ [buttonStencil.vars.label]: system.color.fg.strong,
69
+ [systemIconStencil.vars.color]: 'currentColor',
70
+ [pillCountStencil.vars.backgroundColor]: system.color.bg.muted.softer,
71
+ [pillCountStencil.vars.borderColor]: 'transparent',
72
+ },
73
+ '&:active, &.active': {
74
+ [buttonStencil.vars.background]: system.color.bg.alt.stronger,
75
+ [buttonStencil.vars.border]: system.color.border.input.strong,
76
+ [buttonStencil.vars.label]: system.color.fg.strong,
77
+ [systemIconStencil.vars.color]: 'currentColor',
78
+ [pillCountStencil.vars.backgroundColor]: system.color.bg.muted.softer,
79
+ [pillCountStencil.vars.borderColor]: 'transparent',
80
+ },
64
81
  '&:focus-visible, &.focus': {
65
- [buttonStencil.vars.background]: system.color.bg.alt.soft,
82
+ [buttonStencil.vars.background]: system.color.bg.alt.default,
66
83
  [buttonStencil.vars.border]: system.color.border.primary.default,
67
- [buttonStencil.vars.label]: system.color.text.strong,
68
- [systemIconStencil.vars.color]: system.color.icon.strong,
84
+ [buttonStencil.vars.label]: system.color.fg.strong,
69
85
  borderColor: system.color.border.primary.default,
86
+ [systemIconStencil.vars.color]: 'currentColor',
70
87
  [pillCountStencil.vars.borderColor]: system.color.border.primary.default,
71
88
 
72
89
  ...focusRing({
@@ -77,74 +94,56 @@ export const pillStencil = createStencil({
77
94
  separation: 1,
78
95
  }),
79
96
  },
80
- '&:hover, &.hover': {
81
- [buttonStencil.vars.background]: system.color.bg.alt.strong,
82
- [buttonStencil.vars.border]: system.color.border.input.strong,
83
- [buttonStencil.vars.label]: system.color.text.strong,
84
- [systemIconStencil.vars.color]: system.color.icon.strong,
85
- },
86
- '&:active, &.active': {
87
- [buttonStencil.vars.background]: system.color.bg.alt.stronger,
88
- [buttonStencil.vars.border]: system.color.border.input.strong,
89
- [buttonStencil.vars.label]: system.color.text.strong,
90
- [systemIconStencil.vars.color]: system.color.icon.strong,
91
- [pillCountStencil.vars.backgroundColor]: system.color.bg.alt.stronger,
92
- [pillCountStencil.vars.borderColor]: 'transparent',
93
- },
94
97
  '&:disabled, &.disabled': {
95
- [buttonStencil.vars.background]: system.color.bg.alt.softer,
98
+ [buttonStencil.vars.background]: system.color.bg.alt.default,
96
99
  [buttonStencil.vars.border]: system.color.border.input.disabled,
97
- [buttonStencil.vars.label]: system.color.text.disabled,
98
- [buttonStencil.vars.opacity]: '1',
99
- [systemIconStencil.vars.color]: system.color.icon.soft,
100
- [pillCountStencil.vars.backgroundColor]: system.color.bg.alt.default,
100
+ [buttonStencil.vars.label]: system.color.fg.disabled,
101
+ [systemIconStencil.vars.color]: 'currentColor',
102
+ [pillCountStencil.vars.backgroundColor]: system.color.bg.alt.strong,
101
103
  [pillCountStencil.vars.borderColor]: 'transparent',
102
104
  },
103
105
  }),
104
- });
105
-
106
- export const removeablePillStencil = createStencil({
107
- extends: pillStencil,
108
- base: {
109
- '&:focus-visible, &.focus': {
110
- [buttonStencil.vars.background]: system.color.bg.alt.soft,
111
- [buttonStencil.vars.border]: system.color.border.input.default,
112
- [buttonStencil.vars.label]: system.color.text.strong,
113
- boxShadow: 'none',
114
- },
115
- '&:hover, &.hover': {
116
- [buttonStencil.vars.background]: system.color.bg.alt.soft,
117
- },
118
- '&:active, &.active': {
119
- [buttonStencil.vars.background]: system.color.bg.alt.stronger,
120
- },
121
- '&:disabled, &.disabled': {
122
- [buttonStencil.vars.background]: system.color.bg.alt.softer,
123
- [systemIconStencil.vars.color]: system.color.icon.soft,
124
- },
125
- cursor: 'default',
126
- overflow: 'revert', // override BaseButton overflow styles so the click target exists outside the pill for removable
127
- position: 'relative',
128
- },
129
- });
130
-
131
- export const readyOnlyPillStencil = createStencil({
132
- extends: pillStencil,
133
- base: {
134
- border: `${px2rem(1)} solid ${cssVar(system.color.border.input.default)}`,
135
- cursor: 'default',
136
- [buttonStencil.vars.background]: 'transparent',
137
- '&:hover, &.hover': {
138
- [buttonStencil.vars.background]: 'transparent',
139
- },
140
- '&:focus-visible, &.focus': {
141
- [buttonStencil.vars.background]: 'transparent',
142
- },
143
- '&:active, &.active': {
144
- [buttonStencil.vars.background]: 'transparent',
145
- },
146
- '&:disabled, &.disabled': {
147
- [buttonStencil.vars.background]: 'transparent',
106
+ modifiers: {
107
+ variant: {
108
+ readOnly: {
109
+ border: `${px2rem(1)} solid ${system.color.border.container}`,
110
+ cursor: 'default',
111
+ [buttonStencil.vars.background]: 'transparent',
112
+ '&:hover, &.hover': {
113
+ borderColor: system.color.border.container,
114
+ [buttonStencil.vars.background]: 'transparent',
115
+ },
116
+ '&:focus-visible, &.focus': {
117
+ [buttonStencil.vars.background]: 'transparent',
118
+ },
119
+ '&:active, &.active': {
120
+ [buttonStencil.vars.background]: 'transparent',
121
+ },
122
+ '&:disabled, &.disabled': {
123
+ [buttonStencil.vars.background]: 'transparent',
124
+ },
125
+ },
126
+ removable: {
127
+ '&:focus-visible, &.focus': {
128
+ [buttonStencil.vars.background]: system.color.bg.alt.default,
129
+ [buttonStencil.vars.border]: system.color.border.input.default,
130
+ [buttonStencil.vars.label]: system.color.fg.strong,
131
+ boxShadow: 'none',
132
+ },
133
+ '&:hover, &.hover': {
134
+ [buttonStencil.vars.background]: system.color.bg.alt.strong,
135
+ },
136
+ '&:active, &.active': {
137
+ [buttonStencil.vars.background]: system.color.bg.alt.stronger,
138
+ },
139
+ '&:disabled, &.disabled': {
140
+ [buttonStencil.vars.background]: system.color.bg.alt.default,
141
+ [systemIconStencil.vars.color]: 'currentColor',
142
+ },
143
+ cursor: 'default',
144
+ overflow: 'revert', // override BaseButton overflow styles so the click target exists outside the pill for removable
145
+ position: 'relative',
146
+ },
148
147
  },
149
148
  },
150
149
  });
@@ -256,48 +255,31 @@ export const Pill = createContainer('button')({
256
255
  */
257
256
  Label: PillLabel,
258
257
  },
259
- })<PillProps>(({variant = 'default', maxWidth = 200, children, ...elemProps}, Element, model) => {
258
+ })<PillProps>(({variant, maxWidth = 200, children, ...elemProps}, Element, model) => {
260
259
  const maxWidthCSSValue = typeof maxWidth === 'number' ? px2rem(maxWidth) : maxWidth;
261
- return (
262
- <>
263
- {variant === 'readOnly' && (
264
- <Box
265
- as={Element !== 'button' ? Element : 'span'}
266
- id={model.state.id}
267
- {...mergeStyles(
268
- elemProps,
269
- readyOnlyPillStencil({
270
- maxWidth: maxWidthCSSValue,
271
- })
272
- )}
273
- >
274
- <PillLabel>{children}</PillLabel>
275
- </Box>
276
- )}
277
- {variant === 'default' && (
278
- <Element
279
- disabled={model.state.disabled}
280
- {...mergeStyles(elemProps, [
281
- model.state.disabled ? 'disabled' : undefined,
282
- pillStencil({
283
- maxWidth: maxWidthCSSValue,
284
- }),
285
- ])}
286
- >
287
- {children}
288
- </Element>
289
- )}
290
- {variant === 'removable' && (
291
- <Box
292
- as={Element !== 'button' ? Element : 'span'}
293
- {...mergeStyles(elemProps, [
294
- model.state.disabled ? 'disabled' : undefined,
295
- removeablePillStencil({maxWidth: maxWidthCSSValue}),
296
- ])}
297
- >
298
- {children}
299
- </Box>
300
- )}
301
- </>
260
+
261
+ const isReadOnly = variant === 'readOnly';
262
+
263
+ return variant?.match(/^(readOnly|removable)$/) ? (
264
+ <Box
265
+ as={Element !== 'button' ? Element : 'span'}
266
+ id={isReadOnly ? model.state.id : undefined}
267
+ {...mergeStyles(elemProps, [
268
+ model.state.disabled ? 'disabled' : undefined,
269
+ pillStencil({maxWidth: maxWidthCSSValue, variant}),
270
+ ])}
271
+ >
272
+ {isReadOnly ? <PillLabel>{children}</PillLabel> : children}
273
+ </Box>
274
+ ) : (
275
+ <Element
276
+ disabled={model.state.disabled}
277
+ {...mergeStyles(elemProps, [
278
+ model.state.disabled ? 'disabled' : undefined,
279
+ pillStencil({maxWidth: maxWidthCSSValue}),
280
+ ])}
281
+ >
282
+ {children}
283
+ </Element>
302
284
  );
303
285
  });
package/pill/lib/PillIconButton.tsx CHANGED
@@ -26,8 +26,8 @@ export const pillIconButtonStencil = createStencil({
26
26
  overflow: 'visible',
27
27
  flex: '0 0 auto',
28
28
  [buttonStencil.vars.border]: system.color.border.transparent,
29
- [buttonStencil.vars.background]: system.color.bg.alt.soft,
30
- [systemIconStencil.vars.color]: system.color.icon.default,
29
+ [buttonStencil.vars.background]: system.color.bg.alt.default,
30
+ [systemIconStencil.vars.color]: system.color.fg.strong,
31
31
  [systemIconStencil.vars.size]: system.space.x6,
32
32
  '::after': {
33
33
  content: '""',
@@ -42,15 +42,22 @@ export const pillIconButtonStencil = createStencil({
42
42
 
43
43
  '&:focus-visible, &.focus': {
44
44
  [buttonStencil.vars.border]: system.color.border.transparent,
45
+ [buttonStencil.vars.background]: system.color.bg.alt.default,
45
46
  ...focusRing({
46
47
  innerColor: system.color.border.transparent,
47
48
  }),
48
49
  },
49
50
  '&:hover, &.hover': {
50
51
  [buttonStencil.vars.border]: system.color.border.transparent,
52
+ [buttonStencil.vars.background]: system.color.bg.alt.strong,
53
+ },
54
+ '&:active, &.active': {
55
+ [buttonStencil.vars.border]: system.color.border.transparent,
56
+ [buttonStencil.vars.background]: system.color.bg.alt.stronger,
51
57
  },
52
58
  '&:disabled, &.disabled': {
53
59
  [buttonStencil.vars.border]: system.color.border.transparent,
60
+ [buttonStencil.vars.background]: system.color.bg.alt.default,
54
61
  },
55
62
  },
56
63
  });