Skip to content

Commit

Permalink
feat(pie-button): DSW-1539 wip assigning size prop to an icon slot
Browse files Browse the repository at this point in the history
  • Loading branch information
dandel10n committed Apr 12, 2024
1 parent 9b80396 commit cf952f7
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 16 deletions.
5 changes: 0 additions & 5 deletions .changeset/chilled-snails-cry.md

This file was deleted.

5 changes: 5 additions & 0 deletions .changeset/cyan-islands-compete.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@justeattakeaway/pie-button": minor
---

[Added] - assigning size prop for the icon slot
5 changes: 0 additions & 5 deletions .changeset/fluffy-dolls-flash.md

This file was deleted.

5 changes: 0 additions & 5 deletions .changeset/hip-files-wash.md

This file was deleted.

21 changes: 20 additions & 1 deletion packages/components/pie-button/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {
LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
} from 'lit';
import { property } from 'lit/decorators.js';
import { property, queryAssignedElements } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { validPropertyValues, defineCustomElement, FormControlMixin } from '@justeattakeaway/pie-webc-core';
import {
Expand Down Expand Up @@ -41,6 +41,22 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
updated (changedProperties: PropertyValues<this>): void {
super.updated(changedProperties);

// Making sure that icon passed in a slot has the correct icon size
const [iconElement] = this._iconSlotElement;

if (iconElement) {
if (this.size === 'xsmall') {
iconElement.setAttribute('size', 'xs');
}
if (this.size === 'small-expressive' || this.size === 'small-productive') {
iconElement.setAttribute('size', 's');
}

if (this.size === 'medium' || this.size === 'large') {
iconElement.setAttribute('size', 'm');
}
}

if (changedProperties.has('type')) {
// If the new type is "submit", add the keydown event listener
if (this.type === 'submit') {
Expand Down Expand Up @@ -103,6 +119,9 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
@property({ type: String })
public responsiveSize?: ButtonProps['responsiveSize'];

@queryAssignedElements({ slot: 'icon' })
_iconSlotElement!: Array<HTMLElement>;

/**
* This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
* This is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM
Expand Down

0 comments on commit cf952f7

Please sign in to comment.