@justeattakeaway/pie-chip 0.14.4 → 0.15.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/README.md +9 -9
- package/custom-elements.json +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +59 -59
- package/dist/react.d.ts +2 -2
- package/package.json +1 -1
- package/src/chip.scss +16 -5
- package/src/defs.ts +1 -1
package/README.md
CHANGED
|
@@ -31,15 +31,15 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
|
|
|
31
31
|
|
|
32
32
|
### Properties
|
|
33
33
|
|
|
34
|
-
| Prop
|
|
35
|
-
|
|
36
|
-
| `type`
|
|
37
|
-
| `variant`
|
|
38
|
-
| `disabled`
|
|
39
|
-
| `isSelected`
|
|
40
|
-
| `isDismissible` | `true`, `false`
|
|
41
|
-
| `isLoading`
|
|
42
|
-
| `aria`
|
|
34
|
+
| Prop | Options | Description | Default |
|
|
35
|
+
|------|---------|-------------|---------|
|
|
36
|
+
| `type` | `"button"`, `"checkbox"` | Sets the functional type of the chip. | `"button"` |
|
|
37
|
+
| `variant` | `"default"`, `"outline"`, `"ghost"`, `"translucent"` | Sets the variant of the chip. | `"default"` |
|
|
38
|
+
| `disabled` | `true`, `false` | If true, disables the chip. | `false` |
|
|
39
|
+
| `isSelected` | `true`, `false` | If true, the chip component will apply the selected styles. **This is a controlled property, meaning you are responsible for updating its value in response to user interaction events.** | `false` |
|
|
40
|
+
| `isDismissible` | `true`, `false` | If true, displays a close icon. Can be only used if `isSelected` is set to true. When true, the chip itself will not be interactive. Only the close icon will be. | `false` |
|
|
41
|
+
| `isLoading` | `true`, `false` | If true, displays a loading indicator inside the chip. It is advised to provide an appropriate `aria.label` value during and after loading. | `false` |
|
|
42
|
+
| `aria` | `{ label?: string, close?: string, haspopup?: "menu" \| "listbox" \| "tree" \| "grid" \| "dialog" \| "true" \| "false", expanded?: boolean }` | Accessibility properties for the chip. Use `haspopup` and `expanded` for chips that trigger a popup like a menu or dialog. | `undefined` |
|
|
43
43
|
|
|
44
44
|
### Slots
|
|
45
45
|
|
package/custom-elements.json
CHANGED
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
"kind": "variable",
|
|
17
17
|
"name": "variants",
|
|
18
18
|
"type": {
|
|
19
|
-
"text": "['default', 'outline', 'ghost']"
|
|
19
|
+
"text": "['default', 'outline', 'ghost', 'translucent']"
|
|
20
20
|
},
|
|
21
|
-
"default": "['default', 'outline', 'ghost']"
|
|
21
|
+
"default": "['default', 'outline', 'ghost', 'translucent']"
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
"kind": "variable",
|
package/dist/index.d.ts
CHANGED
|
@@ -54,7 +54,7 @@ export declare const defaultProps: DefaultProps;
|
|
|
54
54
|
* @event {Event} change - when a user interacts with the chip of type checkbox.
|
|
55
55
|
*/
|
|
56
56
|
export declare class PieChip extends PieChip_base implements ChipProps {
|
|
57
|
-
variant: "default" | "outline" | "ghost";
|
|
57
|
+
variant: "default" | "outline" | "ghost" | "translucent";
|
|
58
58
|
type: "button" | "checkbox";
|
|
59
59
|
disabled: boolean;
|
|
60
60
|
isSelected: boolean;
|
|
@@ -98,6 +98,6 @@ declare const PieChip_base: typeof PieElement;
|
|
|
98
98
|
|
|
99
99
|
export declare const types: readonly ["button", "checkbox"];
|
|
100
100
|
|
|
101
|
-
export declare const variants: readonly ["default", "outline", "ghost"];
|
|
101
|
+
export declare const variants: readonly ["default", "outline", "ghost", "translucent"];
|
|
102
102
|
|
|
103
103
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { LitElement as _, html as p, nothing as x, unsafeCSS as S } from "lit";
|
|
2
|
-
import { property as
|
|
3
|
-
import { ifDefined as
|
|
2
|
+
import { property as d } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as n } from "lit/directives/if-defined.js";
|
|
4
4
|
import { classMap as g } from "lit/directives/class-map.js";
|
|
5
5
|
import { DelegatesFocusMixin as D, validPropertyValues as y, safeCustomElement as B } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
import "@justeattakeaway/pie-icons-webc/dist/IconCloseCircleFilled.js";
|
|
@@ -10,9 +10,9 @@ const v = class v extends _ {
|
|
|
10
10
|
this.getAttribute("v") || this.setAttribute("v", v.v);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
|
-
v.v = "0.
|
|
14
|
-
let
|
|
15
|
-
const L = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}:host([disabled]),:host([isLoading]){pointer-events:none}.c-chip{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--chip-color: var(--dt-color-content-interactive-secondary);--chip-border-width: 1px;--chip-border-color: transparent;--chip-padding-block: calc(6px - var(--chip-border-width));--chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));--chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));--chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));--chip-gap: var(--dt-spacing-b);--chip-dismissible-offset: calc(var(--chip-gap) / -2);--chip-cursor: pointer;--chip-close-btn-cursor: pointer
|
|
13
|
+
v.v = "0.15.0";
|
|
14
|
+
let u = v;
|
|
15
|
+
const L = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}:host([disabled]),:host([isLoading]){pointer-events:none}.c-chip{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--chip-color: var(--dt-color-content-interactive-secondary);--chip-border-width: 1px;--chip-border-color: transparent;--chip-padding-block: calc(6px - var(--chip-border-width));--chip-padding-inline: calc(var(--dt-spacing-c) - var(--chip-border-width));--chip-padding-dismissible: calc(var(--dt-spacing-a) - var(--chip-border-width));--chip-min-width: calc(var(--dt-spacing-g) + var(--dt-spacing-b));--chip-gap: var(--dt-spacing-b);--chip-dismissible-offset: calc(var(--chip-gap) / -2);--chip-cursor: pointer;--chip-close-btn-cursor: pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--chip-gap);padding-block-start:var(--chip-padding-block);padding-block-end:var(--chip-padding-block);padding-inline-start:var(--chip-padding-inline);padding-inline-end:var(--chip-padding-inline);background-color:var(--int-states-mixin-bg-color);color:var(--chip-color);border-radius:var(--dt-radius-rounded-e);border:var(--chip-border-width) solid;border-color:var(--chip-border-color);cursor:var(--chip-cursor);-webkit-user-select:none;user-select:none;min-width:var(--chip-min-width);font-family:inherit;font-size:calc(var(--dt-font-interactive-xs-size) * 1px);line-height:calc(var(--dt-font-interactive-xs-line-height) * 1px);font-weight:var(--dt-font-weight-bold)}.c-chip:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-secondary))}.c-chip:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-secondary))}}.c-chip.c-chip--outline{--chip-border-color: var(--dt-color-border-strong)}.c-chip.c-chip--outline,.c-chip.c-chip--ghost{--int-states-mixin-bg-color: transparent;--chip-color: var(--dt-color-content-interactive-secondary-solid)}.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip.c-chip--outline:hover:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.c-chip.c-chip--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--outline.is-loading:not(:disabled,.is-disabled),.c-chip.c-chip--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--ghost.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.c-chip.c-chip--translucent{--int-states-mixin-bg-color: var(--dt-color-container-neutral);--chip-color: var(--dt-color-content-interactive-secondary-solid);--chip-border-color: var(--dt-color-border-neutral)}.c-chip.c-chip--translucent:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-neutral-h), var(--dt-color-container-neutral-s), calc(var(--dt-color-container-neutral-l) + var(--hover-modifier)))}.c-chip.c-chip--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--translucent.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-container-neutral-h), var(--dt-color-container-neutral-s), calc(var(--dt-color-container-neutral-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip.c-chip--translucent:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-neutral))}.c-chip.c-chip--translucent:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--translucent.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-neutral))}}.c-chip.c-chip--selected{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--chip-color: var(--dt-color-content-interactive-primary);--chip-border-color: transparent}.c-chip.c-chip--selected:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.c-chip.c-chip--selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--selected.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-chip.c-chip--selected:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary))}.c-chip.c-chip--selected:active:not(:disabled,.is-disabled,.is-dismissible),.c-chip.c-chip--selected.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-interactive-primary))}}.c-chip.is-loading>*:not(.c-chip-spinner){visibility:hidden}.c-chip.is-loading .c-chip-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-chip.is-disabled{--int-states-mixin-bg-color: var(--dt-color-disabled-01);--chip-color: var(--dt-color-content-disabled);--chip-cursor: not-allowed;--chip-close-btn-cursor: not-allowed}.c-chip.is-disabled.c-chip--ghost{--int-states-mixin-bg-color: transparent;--chip-color: var(--dt-color-content-disabled-solid)}.c-chip.is-disabled.c-chip--outline,.c-chip.is-disabled.c-chip--translucent{--chip-border-color: var(--dt-color-disabled-01)}.c-chip.is-dismissible{--chip-cursor: text;padding-inline-end:var(--chip-padding-dismissible);padding-block-start:var(--chip-padding-dismissible);padding-block-end:var(--chip-padding-dismissible);-webkit-user-select:auto;user-select:auto}.c-chip.is-dismissible .c-chip-closeBtn{display:inline-flex;-webkit-user-select:none;user-select:none;outline:none;border:none;color:inherit;background-color:inherit;border-radius:inherit;cursor:var(--chip-close-btn-cursor);padding:0;margin-inline-start:var(--chip-dismissible-offset)}.c-chip.is-dismissible .c-chip-closeBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-chip:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}[type=checkbox]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}[type=checkbox]:focus-visible{outline:none}[type=checkbox]:focus-visible+.c-chip{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}", z = ["default", "outline", "ghost", "translucent"], P = ["button", "checkbox"], a = {
|
|
16
16
|
variant: "default",
|
|
17
17
|
disabled: !1,
|
|
18
18
|
isSelected: !1,
|
|
@@ -20,13 +20,13 @@ const L = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}:hos
|
|
|
20
20
|
isDismissible: !1,
|
|
21
21
|
type: "button"
|
|
22
22
|
};
|
|
23
|
-
var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (i,
|
|
24
|
-
for (var e =
|
|
25
|
-
(h = i[
|
|
26
|
-
return
|
|
23
|
+
var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (i, c, t, o) => {
|
|
24
|
+
for (var e = o > 1 ? void 0 : o ? O(c, t) : c, r = i.length - 1, h; r >= 0; r--)
|
|
25
|
+
(h = i[r]) && (e = (o ? h(c, t, e) : h(e)) || e);
|
|
26
|
+
return o && e && E(c, t, e), e;
|
|
27
27
|
};
|
|
28
28
|
const k = "pie-chip";
|
|
29
|
-
let
|
|
29
|
+
let s = class extends D(u) {
|
|
30
30
|
constructor() {
|
|
31
31
|
super(...arguments), this.variant = a.variant, this.type = a.type, this.disabled = a.disabled, this.isSelected = a.isSelected, this.isLoading = a.isLoading, this.isDismissible = a.isDismissible;
|
|
32
32
|
}
|
|
@@ -72,14 +72,14 @@ let r = class extends D(m) {
|
|
|
72
72
|
_renderCheckbox() {
|
|
73
73
|
const {
|
|
74
74
|
aria: i,
|
|
75
|
-
variant:
|
|
75
|
+
variant: c,
|
|
76
76
|
disabled: t,
|
|
77
|
-
isSelected:
|
|
77
|
+
isSelected: o,
|
|
78
78
|
isLoading: e
|
|
79
|
-
} = this,
|
|
79
|
+
} = this, r = {
|
|
80
80
|
"c-chip": !0,
|
|
81
|
-
[`c-chip--${
|
|
82
|
-
"c-chip--selected":
|
|
81
|
+
[`c-chip--${c}`]: !0,
|
|
82
|
+
"c-chip--selected": o,
|
|
83
83
|
"is-disabled": t,
|
|
84
84
|
"is-loading": e
|
|
85
85
|
};
|
|
@@ -88,13 +88,13 @@ let r = class extends D(m) {
|
|
|
88
88
|
data-test-id="chip-checkbox-input"
|
|
89
89
|
type="checkbox"
|
|
90
90
|
id="pie-chip"
|
|
91
|
-
aria-label="${
|
|
92
|
-
?checked=${
|
|
91
|
+
aria-label="${n(i == null ? void 0 : i.label)}"
|
|
92
|
+
?checked=${o}
|
|
93
93
|
?disabled=${t}
|
|
94
94
|
@change="${this._onCheckboxChange}"/>
|
|
95
95
|
<label
|
|
96
96
|
for="pie-chip"
|
|
97
|
-
class=${g(
|
|
97
|
+
class=${g(r)}
|
|
98
98
|
data-test-id="pie-chip">
|
|
99
99
|
${this._renderContent()}
|
|
100
100
|
</label>`;
|
|
@@ -102,14 +102,14 @@ let r = class extends D(m) {
|
|
|
102
102
|
_renderButton() {
|
|
103
103
|
const {
|
|
104
104
|
aria: i,
|
|
105
|
-
variant:
|
|
105
|
+
variant: c,
|
|
106
106
|
disabled: t,
|
|
107
|
-
isSelected:
|
|
107
|
+
isSelected: o,
|
|
108
108
|
isLoading: e
|
|
109
|
-
} = this,
|
|
109
|
+
} = this, r = {
|
|
110
110
|
"c-chip": !0,
|
|
111
|
-
[`c-chip--${
|
|
112
|
-
"c-chip--selected":
|
|
111
|
+
[`c-chip--${c}`]: !0,
|
|
112
|
+
"c-chip--selected": o,
|
|
113
113
|
"is-disabled": t,
|
|
114
114
|
"is-loading": e
|
|
115
115
|
};
|
|
@@ -117,12 +117,12 @@ let r = class extends D(m) {
|
|
|
117
117
|
<button
|
|
118
118
|
id="pie-chip"
|
|
119
119
|
type="button"
|
|
120
|
-
class=${g(
|
|
121
|
-
aria-busy="${
|
|
122
|
-
aria-haspopup="${
|
|
123
|
-
aria-expanded="${
|
|
124
|
-
aria-pressed="${
|
|
125
|
-
aria-label="${
|
|
120
|
+
class=${g(r)}
|
|
121
|
+
aria-busy="${n(e)}"
|
|
122
|
+
aria-haspopup="${n(i == null ? void 0 : i.haspopup)}"
|
|
123
|
+
aria-expanded="${n(i == null ? void 0 : i.expanded)}"
|
|
124
|
+
aria-pressed="${o}"
|
|
125
|
+
aria-label="${n(i == null ? void 0 : i.label)}"
|
|
126
126
|
?disabled=${t}
|
|
127
127
|
data-test-id="pie-chip">
|
|
128
128
|
${this._renderContent()}
|
|
@@ -133,22 +133,22 @@ let r = class extends D(m) {
|
|
|
133
133
|
* @private
|
|
134
134
|
*/
|
|
135
135
|
_renderDismissible() {
|
|
136
|
-
var
|
|
136
|
+
var m, f;
|
|
137
137
|
const {
|
|
138
138
|
variant: i,
|
|
139
|
-
disabled:
|
|
139
|
+
disabled: c,
|
|
140
140
|
isSelected: t,
|
|
141
|
-
isLoading:
|
|
141
|
+
isLoading: o,
|
|
142
142
|
isDismissible: e
|
|
143
|
-
} = this,
|
|
143
|
+
} = this, r = e && t, h = {
|
|
144
144
|
"c-chip": !0,
|
|
145
145
|
[`c-chip--${i}`]: !0,
|
|
146
146
|
"c-chip--selected": t,
|
|
147
|
-
"is-dismissible":
|
|
148
|
-
"is-disabled":
|
|
149
|
-
"is-loading":
|
|
147
|
+
"is-dismissible": r,
|
|
148
|
+
"is-disabled": c,
|
|
149
|
+
"is-loading": o
|
|
150
150
|
}, w = (b) => {
|
|
151
|
-
(
|
|
151
|
+
(c || e) && (b.preventDefault(), b.stopPropagation());
|
|
152
152
|
}, $ = (b) => {
|
|
153
153
|
b.stopPropagation();
|
|
154
154
|
const C = new Event("close", { bubbles: !0, composed: !0 });
|
|
@@ -156,17 +156,17 @@ let r = class extends D(m) {
|
|
|
156
156
|
};
|
|
157
157
|
return p`
|
|
158
158
|
<div
|
|
159
|
-
aria-busy="${
|
|
159
|
+
aria-busy="${o}"
|
|
160
160
|
aria-current="${t}"
|
|
161
|
-
aria-label="${
|
|
161
|
+
aria-label="${n((m = this.aria) == null ? void 0 : m.label)}"
|
|
162
162
|
class=${g(h)}
|
|
163
163
|
data-test-id="pie-chip"
|
|
164
164
|
@click=${w}>
|
|
165
165
|
${this._renderContent()}
|
|
166
|
-
${
|
|
166
|
+
${r ? p`<button
|
|
167
167
|
@click="${$}"
|
|
168
168
|
?disabled=${this.disabled}
|
|
169
|
-
aria-label="${
|
|
169
|
+
aria-label="${n((f = this.aria) == null ? void 0 : f.close)}"
|
|
170
170
|
class="c-chip-closeBtn"
|
|
171
171
|
data-test-id="chip-close-button">
|
|
172
172
|
<icon-close-circle-filled size="m"></icon-close-circle-filled>
|
|
@@ -177,35 +177,35 @@ let r = class extends D(m) {
|
|
|
177
177
|
return this.isDismissible ? this._renderDismissible() : this.type === "checkbox" ? this._renderCheckbox() : this._renderButton();
|
|
178
178
|
}
|
|
179
179
|
};
|
|
180
|
-
|
|
180
|
+
s.styles = S(L);
|
|
181
181
|
l([
|
|
182
|
-
|
|
182
|
+
d({ type: String }),
|
|
183
183
|
y(k, z, a.variant)
|
|
184
|
-
],
|
|
184
|
+
], s.prototype, "variant", 2);
|
|
185
185
|
l([
|
|
186
|
-
|
|
186
|
+
d({ type: String }),
|
|
187
187
|
y(k, P, a.type)
|
|
188
|
-
],
|
|
188
|
+
], s.prototype, "type", 2);
|
|
189
189
|
l([
|
|
190
|
-
|
|
191
|
-
],
|
|
190
|
+
d({ type: Boolean, reflect: !0 })
|
|
191
|
+
], s.prototype, "disabled", 2);
|
|
192
192
|
l([
|
|
193
|
-
|
|
194
|
-
],
|
|
193
|
+
d({ type: Boolean, reflect: !0 })
|
|
194
|
+
], s.prototype, "isSelected", 2);
|
|
195
195
|
l([
|
|
196
|
-
|
|
197
|
-
],
|
|
196
|
+
d({ type: Boolean, reflect: !0 })
|
|
197
|
+
], s.prototype, "isLoading", 2);
|
|
198
198
|
l([
|
|
199
|
-
|
|
200
|
-
],
|
|
199
|
+
d({ type: Boolean })
|
|
200
|
+
], s.prototype, "isDismissible", 2);
|
|
201
201
|
l([
|
|
202
|
-
|
|
203
|
-
],
|
|
204
|
-
|
|
202
|
+
d({ type: Object })
|
|
203
|
+
], s.prototype, "aria", 2);
|
|
204
|
+
s = l([
|
|
205
205
|
B("pie-chip")
|
|
206
|
-
],
|
|
206
|
+
], s);
|
|
207
207
|
export {
|
|
208
|
-
|
|
208
|
+
s as PieChip,
|
|
209
209
|
a as defaultProps,
|
|
210
210
|
P as types,
|
|
211
211
|
z as variants
|
package/dist/react.d.ts
CHANGED
|
@@ -57,7 +57,7 @@ export declare const PieChip: React_2.ForwardRefExoticComponent<React_2.PropsWit
|
|
|
57
57
|
* @event {Event} change - when a user interacts with the chip of type checkbox.
|
|
58
58
|
*/
|
|
59
59
|
declare class PieChip_2 extends PieChip_base implements ChipProps {
|
|
60
|
-
variant: "default" | "outline" | "ghost";
|
|
60
|
+
variant: "default" | "outline" | "ghost" | "translucent";
|
|
61
61
|
type: "button" | "checkbox";
|
|
62
62
|
disabled: boolean;
|
|
63
63
|
isSelected: boolean;
|
|
@@ -108,6 +108,6 @@ declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
|
|
|
108
108
|
|
|
109
109
|
export declare const types: readonly ["button", "checkbox"];
|
|
110
110
|
|
|
111
|
-
export declare const variants: readonly ["default", "outline", "ghost"];
|
|
111
|
+
export declare const variants: readonly ["default", "outline", "ghost", "translucent"];
|
|
112
112
|
|
|
113
113
|
export { }
|
package/package.json
CHANGED
package/src/chip.scss
CHANGED
|
@@ -23,9 +23,6 @@
|
|
|
23
23
|
--chip-cursor: pointer;
|
|
24
24
|
--chip-close-btn-cursor: pointer;
|
|
25
25
|
|
|
26
|
-
// Pie Webc Icon var that is used to ensure the correctly sized icon passed in a slot
|
|
27
|
-
--icon-display-override: block;
|
|
28
|
-
|
|
29
26
|
position: relative;
|
|
30
27
|
display: inline-flex;
|
|
31
28
|
align-items: center;
|
|
@@ -38,7 +35,7 @@
|
|
|
38
35
|
background-color: var(--int-states-mixin-bg-color);
|
|
39
36
|
color: var(--chip-color);
|
|
40
37
|
border-radius: var(--dt-radius-rounded-e);
|
|
41
|
-
border:
|
|
38
|
+
border: var(--chip-border-width) solid;
|
|
42
39
|
border-color: var(--chip-border-color);
|
|
43
40
|
cursor: var(--chip-cursor);
|
|
44
41
|
user-select: none;
|
|
@@ -55,7 +52,7 @@
|
|
|
55
52
|
// same as default styles
|
|
56
53
|
}
|
|
57
54
|
|
|
58
|
-
&.c-chip--outline
|
|
55
|
+
&.c-chip--outline {
|
|
59
56
|
--chip-border-color: var(--dt-color-border-strong);
|
|
60
57
|
}
|
|
61
58
|
|
|
@@ -67,9 +64,18 @@
|
|
|
67
64
|
@include p.interactive-states('--dt-color-transparent', 'transparent');
|
|
68
65
|
}
|
|
69
66
|
|
|
67
|
+
&.c-chip--translucent {
|
|
68
|
+
--int-states-mixin-bg-color: var(--dt-color-container-neutral);
|
|
69
|
+
--chip-color: var(--dt-color-content-interactive-secondary-solid);
|
|
70
|
+
--chip-border-color: var(--dt-color-border-neutral);
|
|
71
|
+
|
|
72
|
+
@include p.interactive-states('--dt-color-container-neutral');
|
|
73
|
+
}
|
|
74
|
+
|
|
70
75
|
&.c-chip--selected {
|
|
71
76
|
--int-states-mixin-bg-color: var(--dt-color-interactive-primary);
|
|
72
77
|
--chip-color: var(--dt-color-content-interactive-primary);
|
|
78
|
+
--chip-border-color: transparent;
|
|
73
79
|
|
|
74
80
|
@include p.interactive-states('--dt-color-interactive-primary', 'inverse', '02');
|
|
75
81
|
}
|
|
@@ -97,6 +103,11 @@
|
|
|
97
103
|
--int-states-mixin-bg-color: transparent;
|
|
98
104
|
--chip-color: var(--dt-color-content-disabled-solid);
|
|
99
105
|
}
|
|
106
|
+
|
|
107
|
+
&.c-chip--outline,
|
|
108
|
+
&.c-chip--translucent {
|
|
109
|
+
--chip-border-color: var(--dt-color-disabled-01);
|
|
110
|
+
}
|
|
100
111
|
}
|
|
101
112
|
|
|
102
113
|
&.is-dismissible {
|
package/src/defs.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
|
|
3
|
-
export const variants = ['default', 'outline', 'ghost'] as const;
|
|
3
|
+
export const variants = ['default', 'outline', 'ghost', 'translucent'] as const;
|
|
4
4
|
export const types = ['button', 'checkbox'] as const;
|
|
5
5
|
|
|
6
6
|
type AriaProps = {
|