@justeattakeaway/pie-button 1.14.15 → 1.14.17

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 (4) hide show
  1. package/README.md +8 -1
  2. package/dist/index.js +3 -1
  3. package/package.json +4 -4
  4. package/src/index.ts +2 -0
package/README.md CHANGED
@@ -16,6 +16,7 @@
16
16
  - [Properties](#properties)
17
17
  - [Slots](#slots)
18
18
  - [CSS Variables](#css-variables)
19
+ - [CSS Parts](#css-parts)
19
20
  - [Events](#events)
20
21
  - [Forms Usage](#forms-usage)
21
22
  - [Button Attributes](#button-attributes)
@@ -35,11 +36,12 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
35
36
  ### Properties
36
37
  | Prop | Options | Description | Default |
37
38
  |------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------|
39
+ | `aria` | `{ label?: string }` | Sets ARIA attributes on the rendered button or anchor element. | `undefined` |
38
40
  | `size` | `"xsmall"`, `"small-productive"`, `"small-expressive"`, `"medium"`, `"large"` | Sets the size of the button. | `"medium"` |
39
41
  | `isResponsive` | `true`, `false` | If true, uses the next larger size on wide viewports. | `false` |
40
42
  | `responsiveSize` | `"productive"`, `"expressive"` | Sets which `"small-"` size an xsmall button should grow to when `isResponsive` is true. | `"productive"` |
41
43
  | `type` | `"button"`, `"reset"`, `"submit"` | Sets the type of the button. | `"submit"` |
42
- | `variant` | `"primary"`, `"primary-alternative"`, `"primary-alternative-dark"`, `"secondary"`, `"outline"`, `"outline-inverse"`, `"ghost"`, `"inverse"`, `"ghost-inverse"`, `"destructive"`, `"destructive-ghost"` | Sets the variant of the button. | `"primary"` |
44
+ | `variant` | `"primary"`, `"primary-alternative"`, `"primary-alternative-dark"`, `"secondary"`, `"outline"`, `"outline-inverse"`, `"ghost"`, `"ghost-dark"`, `"inverse"`, `"ghost-inverse"`, `"ghost-inverse-light"`, `"destructive"`, `"destructive-ghost"` | Sets the variant of the button. | `"primary"` |
43
45
  | `disabled` | `true`, `false` | If true, disables the button. | `false` |
44
46
  | `isFullWidth` | `true`, `false` | If true, sets the button's width to 100% of its container. | `false` |
45
47
  | `isLoading` | `true`, `false` | If true, displays a loading indicator inside the button. | `false` |
@@ -67,6 +69,11 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
67
69
  ### CSS Variables
68
70
  This component does not expose any CSS variables for style overrides.
69
71
 
72
+ ### CSS Parts
73
+ | Part | Description |
74
+ |--------|--------------------------------------------------------------|
75
+ | `base` | Allows consumers to customise the styles of the button's underlying `button` or `a` element. |
76
+
70
77
  ### Events
71
78
 
72
79
  This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.
package/dist/index.js CHANGED
@@ -482,7 +482,7 @@ const _ = class _ extends Tt {
482
482
  this.getAttribute("v") || this.setAttribute("v", _.v);
483
483
  }
484
484
  };
485
- _.v = "1.14.15";
485
+ _.v = "1.14.17";
486
486
  let U = _;
487
487
  const $t = ["button", "a"], Dt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Zt = ["productive", "expressive"], Rt = ["submit", "button", "reset"], Wt = [
488
488
  "primary",
@@ -586,6 +586,7 @@ let c = class extends Nt(Ot(U)) {
586
586
  rel="${M(p)}"
587
587
  target="${M(d)}"
588
588
  download="${M(g)}"
589
+ part="base"
589
590
  aria-label="${M(f == null ? void 0 : f.label)}"
590
591
  class="${mt(l)}">
591
592
  ${v === "leading" ? z`<slot name="icon"></slot>` : C}
@@ -608,6 +609,7 @@ let c = class extends Nt(Ot(U)) {
608
609
  <button
609
610
  @click=${this._handleClick}
610
611
  class=${mt(f)}
612
+ part="base"
611
613
  type=${d}
612
614
  ?disabled=${r}
613
615
  aria-label="${M(g == null ? void 0 : g.label)}">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "1.14.15",
3
+ "version": "1.14.17",
4
4
  "description": "PIE design system button built using web components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -45,7 +45,7 @@
45
45
  "license": "Apache-2.0",
46
46
  "devDependencies": {
47
47
  "@justeattakeaway/pie-components-config": "0.21.4",
48
- "@justeattakeaway/pie-css": "1.7.0",
48
+ "@justeattakeaway/pie-css": "1.8.0",
49
49
  "@justeattakeaway/pie-monorepo-utils": "0.9.9",
50
50
  "@justeattakeaway/pie-wrapper-react": "0.14.5"
51
51
  },
@@ -54,8 +54,8 @@
54
54
  "dist/*.js"
55
55
  ],
56
56
  "dependencies": {
57
- "@justeattakeaway/pie-spinner": "1.5.8",
58
- "@justeattakeaway/pie-webc-core": "20.0.0",
57
+ "@justeattakeaway/pie-spinner": "1.5.9",
58
+ "@justeattakeaway/pie-webc-core": "21.0.0",
59
59
  "element-internals-polyfill": "1.3.11"
60
60
  }
61
61
  }
package/src/index.ts CHANGED
@@ -252,6 +252,7 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
252
252
  rel="${ifDefined(rel)}"
253
253
  target="${ifDefined(target)}"
254
254
  download="${ifDefined(download)}"
255
+ part="base"
255
256
  aria-label="${ifDefined(aria?.label)}"
256
257
  class="${classMap(classes)}">
257
258
  ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
@@ -274,6 +275,7 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
274
275
  <button
275
276
  @click=${this._handleClick}
276
277
  class=${classMap(buttonClasses)}
278
+ part="base"
277
279
  type=${type}
278
280
  ?disabled=${disabled}
279
281
  aria-label="${ifDefined(aria?.label)}">