@justeattakeaway/pie-icon-button 0.28.13 → 0.29.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/custom-elements.json +16 -5
- package/dist/index.d.ts +14 -1
- package/dist/index.js +39 -28
- package/dist/react.d.ts +14 -1
- package/package.json +7 -6
- package/src/defs-react.ts +1 -1
- package/src/defs.ts +13 -0
- package/src/index.ts +15 -5
- package/src/react.ts +1 -1
package/custom-elements.json
CHANGED
|
@@ -73,6 +73,15 @@
|
|
|
73
73
|
"description": "",
|
|
74
74
|
"name": "PieIconButton",
|
|
75
75
|
"members": [
|
|
76
|
+
{
|
|
77
|
+
"kind": "field",
|
|
78
|
+
"name": "aria",
|
|
79
|
+
"type": {
|
|
80
|
+
"text": "IconButtonProps['aria'] | undefined"
|
|
81
|
+
},
|
|
82
|
+
"privacy": "public",
|
|
83
|
+
"attribute": "aria"
|
|
84
|
+
},
|
|
76
85
|
{
|
|
77
86
|
"kind": "field",
|
|
78
87
|
"name": "size",
|
|
@@ -107,15 +116,17 @@
|
|
|
107
116
|
"kind": "method",
|
|
108
117
|
"name": "renderSpinner",
|
|
109
118
|
"privacy": "private",
|
|
110
|
-
"return": {
|
|
111
|
-
"type": {
|
|
112
|
-
"text": "TemplateResult"
|
|
113
|
-
}
|
|
114
|
-
},
|
|
115
119
|
"description": "Template for the loading state"
|
|
116
120
|
}
|
|
117
121
|
],
|
|
118
122
|
"attributes": [
|
|
123
|
+
{
|
|
124
|
+
"name": "aria",
|
|
125
|
+
"type": {
|
|
126
|
+
"text": "IconButtonProps['aria'] | undefined"
|
|
127
|
+
},
|
|
128
|
+
"fieldName": "aria"
|
|
129
|
+
},
|
|
119
130
|
{
|
|
120
131
|
"name": "size",
|
|
121
132
|
"type": {
|
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,25 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
import type { CSSResult } from 'lit';
|
|
3
3
|
import type { LitElement } from 'lit';
|
|
4
|
-
import type { TemplateResult } from 'lit';
|
|
4
|
+
import type { TemplateResult } from 'lit-html';
|
|
5
|
+
|
|
6
|
+
export declare type AriaProps = {
|
|
7
|
+
label?: string;
|
|
8
|
+
labelledby?: string;
|
|
9
|
+
describedby?: string;
|
|
10
|
+
expanded?: boolean;
|
|
11
|
+
controls?: string;
|
|
12
|
+
};
|
|
5
13
|
|
|
6
14
|
export declare type DefaultProps = ComponentDefaultProps<IconButtonProps>;
|
|
7
15
|
|
|
8
16
|
export declare const defaultProps: DefaultProps;
|
|
9
17
|
|
|
10
18
|
export declare interface IconButtonProps {
|
|
19
|
+
/**
|
|
20
|
+
* The ARIA attributes available to use on the icon button. Offers label, labelledby, describedby, expanded and controls.
|
|
21
|
+
*/
|
|
22
|
+
aria?: AriaProps;
|
|
11
23
|
/**
|
|
12
24
|
* (Optional) What size the button should be.
|
|
13
25
|
* @default "medium"
|
|
@@ -34,6 +46,7 @@ export declare interface IconButtonProps {
|
|
|
34
46
|
* @tagname pie-icon-button
|
|
35
47
|
*/
|
|
36
48
|
export declare class PieIconButton extends LitElement implements IconButtonProps {
|
|
49
|
+
aria?: IconButtonProps['aria'];
|
|
37
50
|
size?: IconButtonProps['size'];
|
|
38
51
|
variant?: IconButtonProps['variant'];
|
|
39
52
|
disabled?: boolean | undefined;
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { LitElement as
|
|
1
|
+
import { LitElement as g, html as v, unsafeCSS as p } from "lit";
|
|
2
2
|
import { property as c } from "lit/decorators.js";
|
|
3
|
-
import {
|
|
3
|
+
import { ifDefined as n } from "lit/directives/if-defined.js";
|
|
4
|
+
import { validPropertyValues as f, defineCustomElement as u } from "@justeattakeaway/pie-webc-core";
|
|
4
5
|
import "@justeattakeaway/pie-spinner";
|
|
5
|
-
const
|
|
6
|
+
const y = "*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default: 48px;--icon-size-override: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);--icon-display-override: block;block-size:var(--btn-dimension, var(--btn-dimension-default));inline-size:var(--btn-dimension, var(--btn-dimension-default));border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--icon-size-override);width:var(--icon-size-override)}.o-iconBtn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-iconBtn[variant=primary]:active:not(:disabled),.o-iconBtn[variant=primary].is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-iconBtn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-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)))}.o-iconBtn[variant=secondary]:active:not(:disabled),.o-iconBtn[variant=secondary].is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-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)))}.o-iconBtn[variant=outline]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=outline]:active:not(:disabled),.o-iconBtn[variant=outline].is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost]:active:not(:disabled),.o-iconBtn[variant=ghost].is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-secondary]:active:not(:disabled),.o-iconBtn[variant=ghost-secondary].is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-iconBtn[variant=inverse]:active:not(:disabled),.o-iconBtn[variant=inverse].is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-iconBtn[variant=ghost-inverse]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn[variant=ghost-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-inverse]:active:not(:disabled),.o-iconBtn[variant=ghost-inverse].is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled);cursor:not-allowed}.o-iconBtn[disabled]:not([variant=ghost],[variant=ghost-secondary],[variant=ghost-inverse]){--btn-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)}.o-iconBtn[size=xsmall]{--btn-dimension: 32px;--icon-size-override: 20px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--icon-size-override: 28px}", B = ["xsmall", "small", "medium", "large"], k = [
|
|
6
7
|
"primary",
|
|
7
8
|
"secondary",
|
|
8
9
|
"outline",
|
|
@@ -16,12 +17,12 @@ const u = "*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default:
|
|
|
16
17
|
disabled: !1,
|
|
17
18
|
isLoading: !1
|
|
18
19
|
};
|
|
19
|
-
var
|
|
20
|
-
for (var
|
|
21
|
-
(
|
|
22
|
-
return
|
|
20
|
+
var z = Object.defineProperty, l = (h, i, e, d) => {
|
|
21
|
+
for (var r = void 0, o = h.length - 1, m; o >= 0; o--)
|
|
22
|
+
(m = h[o]) && (r = m(i, e, r) || r);
|
|
23
|
+
return r && z(i, e, r), r;
|
|
23
24
|
};
|
|
24
|
-
const
|
|
25
|
+
const s = "pie-icon-button", b = class b extends g {
|
|
25
26
|
constructor() {
|
|
26
27
|
super(...arguments), this.size = a.size, this.variant = a.variant, this.disabled = a.disabled, this.isLoading = a.isLoading;
|
|
27
28
|
}
|
|
@@ -31,41 +32,51 @@ const v = "pie-icon-button", s = class s extends f {
|
|
|
31
32
|
* @private
|
|
32
33
|
*/
|
|
33
34
|
renderSpinner() {
|
|
34
|
-
const { variant:
|
|
35
|
-
let
|
|
36
|
-
return
|
|
35
|
+
const { variant: i, size: e, disabled: d } = this, r = e === "xsmall" ? "small" : "medium";
|
|
36
|
+
let o = "brand";
|
|
37
|
+
return i != null && i.includes("secondary") && (o = "secondary"), (i === "primary" && !d || i === "ghost-inverse") && (o = "inverse"), v`
|
|
37
38
|
<pie-spinner
|
|
38
|
-
size="${
|
|
39
|
-
variant="${
|
|
39
|
+
size="${r}"
|
|
40
|
+
variant="${o}">
|
|
40
41
|
</pie-spinner>`;
|
|
41
42
|
}
|
|
42
43
|
render() {
|
|
43
44
|
const {
|
|
44
|
-
disabled:
|
|
45
|
+
disabled: i,
|
|
45
46
|
size: e,
|
|
46
|
-
variant:
|
|
47
|
-
isLoading:
|
|
47
|
+
variant: d,
|
|
48
|
+
isLoading: r,
|
|
49
|
+
aria: o
|
|
48
50
|
} = this;
|
|
49
|
-
return
|
|
51
|
+
return v`
|
|
50
52
|
<button
|
|
51
53
|
class="o-iconBtn"
|
|
54
|
+
data-test-id="pie-icon-button"
|
|
52
55
|
size="${e || "medium"}"
|
|
53
|
-
variant="${
|
|
54
|
-
?disabled="${
|
|
55
|
-
?isLoading="${
|
|
56
|
-
${o ?
|
|
56
|
+
variant="${d || "primary"}"
|
|
57
|
+
?disabled="${i}"
|
|
58
|
+
?isLoading="${r}"
|
|
59
|
+
aria-label="${n(o == null ? void 0 : o.label)}"
|
|
60
|
+
aria-labelledby="${n(o == null ? void 0 : o.labelledby)}"
|
|
61
|
+
aria-describedby="${n(o == null ? void 0 : o.describedby)}"
|
|
62
|
+
aria-expanded="${n(o == null ? void 0 : o.expanded)}"
|
|
63
|
+
aria-controls="${n(o == null ? void 0 : o.controls)}">
|
|
64
|
+
${r ? this.renderSpinner() : v`<slot></slot>`}
|
|
57
65
|
</button>`;
|
|
58
66
|
}
|
|
59
67
|
};
|
|
60
|
-
|
|
61
|
-
let t =
|
|
68
|
+
b.styles = p(y);
|
|
69
|
+
let t = b;
|
|
70
|
+
l([
|
|
71
|
+
c({ type: Object })
|
|
72
|
+
], t.prototype, "aria");
|
|
62
73
|
l([
|
|
63
74
|
c(),
|
|
64
|
-
|
|
75
|
+
f(s, B, a.size)
|
|
65
76
|
], t.prototype, "size");
|
|
66
77
|
l([
|
|
67
78
|
c(),
|
|
68
|
-
|
|
79
|
+
f(s, k, a.variant)
|
|
69
80
|
], t.prototype, "variant");
|
|
70
81
|
l([
|
|
71
82
|
c({ type: Boolean })
|
|
@@ -73,10 +84,10 @@ l([
|
|
|
73
84
|
l([
|
|
74
85
|
c({ type: Boolean })
|
|
75
86
|
], t.prototype, "isLoading");
|
|
76
|
-
|
|
87
|
+
u(s, t);
|
|
77
88
|
export {
|
|
78
89
|
t as PieIconButton,
|
|
79
90
|
a as defaultProps,
|
|
80
|
-
|
|
81
|
-
|
|
91
|
+
B as sizes,
|
|
92
|
+
k as variants
|
|
82
93
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -2,13 +2,25 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
|
2
2
|
import type { CSSResult } from 'lit';
|
|
3
3
|
import type { LitElement } from 'lit';
|
|
4
4
|
import * as React_2 from 'react';
|
|
5
|
-
import type { TemplateResult } from 'lit';
|
|
5
|
+
import type { TemplateResult } from 'lit-html';
|
|
6
|
+
|
|
7
|
+
export declare type AriaProps = {
|
|
8
|
+
label?: string;
|
|
9
|
+
labelledby?: string;
|
|
10
|
+
describedby?: string;
|
|
11
|
+
expanded?: boolean;
|
|
12
|
+
controls?: string;
|
|
13
|
+
};
|
|
6
14
|
|
|
7
15
|
export declare type DefaultProps = ComponentDefaultProps<IconButtonProps>;
|
|
8
16
|
|
|
9
17
|
export declare const defaultProps: DefaultProps;
|
|
10
18
|
|
|
11
19
|
export declare interface IconButtonProps {
|
|
20
|
+
/**
|
|
21
|
+
* The ARIA attributes available to use on the icon button. Offers label, labelledby, describedby, expanded and controls.
|
|
22
|
+
*/
|
|
23
|
+
aria?: AriaProps;
|
|
12
24
|
/**
|
|
13
25
|
* (Optional) What size the button should be.
|
|
14
26
|
* @default "medium"
|
|
@@ -37,6 +49,7 @@ export declare const PieIconButton: React_2.ForwardRefExoticComponent<IconButton
|
|
|
37
49
|
* @tagname pie-icon-button
|
|
38
50
|
*/
|
|
39
51
|
declare class PieIconButton_2 extends LitElement implements IconButtonProps {
|
|
52
|
+
aria?: IconButtonProps['aria'];
|
|
40
53
|
size?: IconButtonProps['size'];
|
|
41
54
|
variant?: IconButtonProps['variant'];
|
|
42
55
|
disabled?: boolean | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.29.0",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
"test": "echo \"Error: no test specified\" && exit 0",
|
|
28
28
|
"test:ci": "yarn test",
|
|
29
29
|
"test:browsers-setup": "npx playwright-lit-setup",
|
|
30
|
+
"test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
|
|
30
31
|
"test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_ICON_BUTTON} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
|
|
31
32
|
"test:visual:ci": "yarn test:visual"
|
|
32
33
|
},
|
|
@@ -35,14 +36,14 @@
|
|
|
35
36
|
"devDependencies": {
|
|
36
37
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
37
38
|
"@justeattakeaway/pie-components-config": "0.18.0",
|
|
38
|
-
"@justeattakeaway/pie-css": "0.13.
|
|
39
|
-
"@justeattakeaway/pie-wrapper-react": "0.14.
|
|
39
|
+
"@justeattakeaway/pie-css": "0.13.1",
|
|
40
|
+
"@justeattakeaway/pie-wrapper-react": "0.14.2",
|
|
40
41
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
41
42
|
},
|
|
42
43
|
"dependencies": {
|
|
43
|
-
"@justeattakeaway/pie-icons-webc": "0.
|
|
44
|
-
"@justeattakeaway/pie-spinner": "0.7.
|
|
45
|
-
"@justeattakeaway/pie-webc-core": "0.24.
|
|
44
|
+
"@justeattakeaway/pie-icons-webc": "1.0.0",
|
|
45
|
+
"@justeattakeaway/pie-spinner": "0.7.2",
|
|
46
|
+
"@justeattakeaway/pie-webc-core": "0.24.2"
|
|
46
47
|
},
|
|
47
48
|
"volta": {
|
|
48
49
|
"extends": "../../../package.json"
|
package/src/defs-react.ts
CHANGED
package/src/defs.ts
CHANGED
|
@@ -4,7 +4,20 @@ export const sizes = ['xsmall', 'small', 'medium', 'large'] as const;
|
|
|
4
4
|
export const variants = ['primary', 'secondary', 'outline', 'ghost',
|
|
5
5
|
'ghost-secondary', 'inverse', 'ghost-inverse'] as const;
|
|
6
6
|
|
|
7
|
+
export type AriaProps = {
|
|
8
|
+
label?: string;
|
|
9
|
+
labelledby?: string;
|
|
10
|
+
describedby?: string;
|
|
11
|
+
expanded?: boolean;
|
|
12
|
+
controls?: string;
|
|
13
|
+
};
|
|
14
|
+
|
|
7
15
|
export interface IconButtonProps {
|
|
16
|
+
/**
|
|
17
|
+
* The ARIA attributes available to use on the icon button. Offers label, labelledby, describedby, expanded and controls.
|
|
18
|
+
*/
|
|
19
|
+
aria?: AriaProps;
|
|
20
|
+
|
|
8
21
|
/**
|
|
9
22
|
* (Optional) What size the button should be.
|
|
10
23
|
* @default "medium"
|
package/src/index.ts
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
|
-
LitElement,
|
|
2
|
+
LitElement, html, unsafeCSS,
|
|
3
3
|
} from 'lit';
|
|
4
4
|
import { property } from 'lit/decorators.js';
|
|
5
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
6
|
import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
6
7
|
import styles from './iconButton.scss?inline';
|
|
7
8
|
import {
|
|
8
|
-
IconButtonProps, sizes, variants, defaultProps,
|
|
9
|
+
type IconButtonProps, sizes, variants, defaultProps,
|
|
9
10
|
} from './defs';
|
|
10
11
|
import '@justeattakeaway/pie-spinner';
|
|
11
12
|
|
|
@@ -18,6 +19,9 @@ const componentSelector = 'pie-icon-button';
|
|
|
18
19
|
* @tagname pie-icon-button
|
|
19
20
|
*/
|
|
20
21
|
export class PieIconButton extends LitElement implements IconButtonProps {
|
|
22
|
+
@property({ type: Object })
|
|
23
|
+
public aria?: IconButtonProps['aria'];
|
|
24
|
+
|
|
21
25
|
@property()
|
|
22
26
|
@validPropertyValues(componentSelector, sizes, defaultProps.size)
|
|
23
27
|
public size?: IconButtonProps['size'] = defaultProps.size;
|
|
@@ -37,7 +41,7 @@ export class PieIconButton extends LitElement implements IconButtonProps {
|
|
|
37
41
|
*
|
|
38
42
|
* @private
|
|
39
43
|
*/
|
|
40
|
-
private renderSpinner ()
|
|
44
|
+
private renderSpinner () {
|
|
41
45
|
const { variant, size, disabled } = this;
|
|
42
46
|
const spinnerSize = size === 'xsmall' ? 'small' : 'medium';
|
|
43
47
|
let spinnerVariant = 'brand';
|
|
@@ -53,17 +57,23 @@ export class PieIconButton extends LitElement implements IconButtonProps {
|
|
|
53
57
|
|
|
54
58
|
render () {
|
|
55
59
|
const {
|
|
56
|
-
disabled, size, variant, isLoading,
|
|
60
|
+
disabled, size, variant, isLoading, aria,
|
|
57
61
|
} = this;
|
|
58
62
|
|
|
59
63
|
// The inline SVG is temporary until we have a proper icon integration
|
|
60
64
|
return html`
|
|
61
65
|
<button
|
|
62
66
|
class="o-iconBtn"
|
|
67
|
+
data-test-id="pie-icon-button"
|
|
63
68
|
size="${size || 'medium'}"
|
|
64
69
|
variant="${variant || 'primary'}"
|
|
65
70
|
?disabled="${disabled}"
|
|
66
|
-
?isLoading="${isLoading}"
|
|
71
|
+
?isLoading="${isLoading}"
|
|
72
|
+
aria-label="${ifDefined(aria?.label)}"
|
|
73
|
+
aria-labelledby="${ifDefined(aria?.labelledby)}"
|
|
74
|
+
aria-describedby="${ifDefined(aria?.describedby)}"
|
|
75
|
+
aria-expanded="${ifDefined(aria?.expanded)}"
|
|
76
|
+
aria-controls="${ifDefined(aria?.controls)}">
|
|
67
77
|
${isLoading ? this.renderSpinner() : html`<slot></slot>`}
|
|
68
78
|
</button>`;
|
|
69
79
|
}
|
package/src/react.ts
CHANGED