Skip to content

Commit 48f6b34

Browse files
wendevlinbramkragten
wendevlin
authored and
bramkragten
committed
Fix ha-button with missing label and links (#26332)
1 parent 44d9185 commit 48f6b34

File tree

88 files changed

+407
-439
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+407
-439
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,11 @@ export class DialogMyFeature
310310
.heading=${createCloseHeading(this.hass, this._params.title)}
311311
>
312312
<!-- Dialog content -->
313-
<ha-button @click=${this.closeDialog} slot="secondaryAction">
313+
<ha-button
314+
appearance="plain"
315+
@click=${this.closeDialog}
316+
slot="secondaryAction"
317+
>
314318
${this.hass.localize("ui.common.cancel")}
315319
</ha-button>
316320
<ha-button @click=${this._submit} slot="primaryAction">

‎demo/src/custom-cards/ha-demo-card.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -89,11 +89,14 @@ export class HADemoCard extends LitElement implements LovelaceCard {
8989
)}
9090
</div>
9191
<div class="actions small-hidden">
92-
<a href="https://www.home-assistant.io" target="_blank">
93-
<ha-button>
94-
${this.hass.localize("ui.panel.page-demo.cards.demo.learn_more")}
95-
</ha-button>
96-
</a>
92+
<ha-button
93+
appearance="plain"
94+
size="small"
95+
href="https://www.home-assistant.io"
96+
target="_blank"
97+
>
98+
${this.hass.localize("ui.panel.page-demo.cards.demo.learn_more")}
99+
</ha-button>
97100
</div>
98101
</ha-card>
99102
`;

‎gallery/src/pages/components/ha-alert.markdown‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,13 +147,13 @@ The `title ` option should not be used without a description.
147147

148148
<ha-alert alert-type="success">
149149
This is a success alert — check it out!
150-
<ha-button slot="action" label="Undo"></ha-button>
150+
<ha-button slot="action">Undo</ha-button>
151151
</ha-alert>
152152

153153
```html
154154
<ha-alert alert-type="success">
155155
This is a success alert — check it out!
156-
<ha-button slot="action" label="Undo"></ha-button>
156+
<ha-button slot="action">Undo</ha-button>
157157
</ha-alert>
158158
```
159159

‎gallery/src/pages/components/ha-alert.ts‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -78,21 +78,13 @@ const alerts: {
7878
title: "Error with action",
7979
description: "This is a test error alert with action",
8080
type: "error",
81-
actionSlot: html`<ha-button
82-
size="small"
83-
slot="action"
84-
label="restart"
85-
></ha-button>`,
81+
actionSlot: html`<ha-button size="small" slot="action">restart</ha-button>`,
8682
},
8783
{
8884
title: "Unsaved data",
8985
description: "You have unsaved data",
9086
type: "warning",
91-
actionSlot: html`<ha-button
92-
size="small"
93-
slot="action"
94-
label="save"
95-
></ha-button>`,
87+
actionSlot: html`<ha-button size="small" slot="action">save</ha-button>`,
9688
},
9789
{
9890
title: "Slotted icon",
@@ -116,7 +108,7 @@ const alerts: {
116108
title: "Slotted action",
117109
description: "Alert with slotted action",
118110
type: "info",
119-
actionSlot: html`<ha-button slot="action" label="action"></ha-button>`,
111+
actionSlot: html`<ha-button slot="action">action</ha-button>`,
120112
},
121113
{
122114
description: "Dismissable information (RTL)",
@@ -128,7 +120,7 @@ const alerts: {
128120
title: "Error with action",
129121
description: "This is a test error alert with action (RTL)",
130122
type: "error",
131-
actionSlot: html`<ha-button slot="action" label="restart"></ha-button>`,
123+
actionSlot: html`<ha-button slot="action">restart</ha-button>`,
132124
rtl: true,
133125
},
134126
{

‎gallery/src/pages/components/ha-button.markdown‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,13 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/butt
5353

5454
**Properties/Attributes**
5555

56-
| Name | Type | Default | Description |
57-
| ----------- | ---------------------------------------------- | -------- | -------------------------------------------------- |
58-
| appearance | "accent"/"filled"/"plain" | "accent" | Sets the button appearance. |
59-
| variants | "brand"/"danger"/"neutral"/"warning"/"success" | "brand" | Sets the button color variant. "brand" is default. |
60-
| size | "small"/"medium" | "medium" | Sets the button size. |
61-
| hideContent | Boolean | false | Hides the button content (for overlays) |
56+
| Name | Type | Default | Description |
57+
| ---------- | ---------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
58+
| appearance | "accent"/"filled"/"plain" | "accent" | Sets the button appearance. |
59+
| variants | "brand"/"danger"/"neutral"/"warning"/"success" | "brand" | Sets the button color variant. "brand" is default. |
60+
| size | "small"/"medium" | "medium" | Sets the button size. |
61+
| loading | Boolean | false | Shows a loading indicator instead of the buttons label and disable buttons click. |
62+
| disabled | Boolean | false | Disables the button and prevents user interaction. |
6263

6364
**CSS Custom Properties**
6465

‎hassio/src/dialogs/network/dialog-hassio-network.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -604,8 +604,8 @@ export class DialogHassioNetwork
604604
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
605605
display: flex;
606606
justify-content: space-between;
607-
padding: 8px;
608-
padding-bottom: max(var(--safe-area-inset-bottom), 8px);
607+
padding: 16px;
608+
padding-bottom: max(var(--safe-area-inset-bottom), 16px);
609609
background-color: var(--mdc-theme-surface, #fff);
610610
}
611611
.warning {

‎hassio/src/update-available/update-available-card.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -208,14 +208,16 @@ class UpdateAvailableCard extends LitElement {
208208
<div class="card-actions">
209209
${changelog
210210
? html`
211-
<a href=${changelog} target="_blank" rel="noreferrer">
212-
<ha-button
213-
.label=${this.supervisor.localize(
214-
"update_available.open_release_notes"
215-
)}
216-
>
217-
</ha-button>
218-
</a>
211+
<ha-button
212+
href=${changelog}
213+
target="_blank"
214+
rel="noreferrer"
215+
appearance="plain"
216+
>
217+
${this.supervisor.localize(
218+
"update_available.open_release_notes"
219+
)}
220+
</ha-button>
219221
`
220222
: nothing}
221223
<span></span>

‎landing-page/src/components/landing-page-logs.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -110,12 +110,9 @@ class LandingPageLogs extends LitElement {
110110
})}"
111111
@click=${this._scrollToBottom}
112112
>
113-
<ha-svg-icon .path=${mdiArrowCollapseDown} slot="icon"></ha-svg-icon>
113+
<ha-svg-icon .path=${mdiArrowCollapseDown} slot="start"></ha-svg-icon>
114114
${this.localize("logs.scroll_down_button")}
115-
<ha-svg-icon
116-
.path=${mdiArrowCollapseDown}
117-
slot="trailingIcon"
118-
></ha-svg-icon>
115+
<ha-svg-icon .path=${mdiArrowCollapseDown} slot="end"></ha-svg-icon>
119116
</ha-button>
120117
`;
121118
}

‎src/components/ha-button.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
3232
* @attr {("small"|"medium")} size - Sets the button size.
3333
* @attr {("brand"|"neutral"|"danger"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
3434
* @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
35-
* @attr {boolean} hideContent - Hides the button content (for overlays).
35+
* @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
36+
* @attr {boolean} disabled - Disables the button and prevents user interaction.
3637
*/
3738
@customElement("ha-button")
3839
export class HaButton extends Button {

‎src/components/ha-picture-upload.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,12 @@ export class HaPictureUpload extends LitElement {
9292
/>
9393
<div>
9494
<ha-button
95+
appearance="plain"
96+
size="small"
97+
variant="danger"
9598
@click=${this._handleChangeClick}
96-
.label=${this.hass.localize(
97-
"ui.components.picture-upload.clear_picture"
98-
)}
9999
>
100+
${this.hass.localize("ui.components.picture-upload.clear_picture")}
100101
</ha-button>
101102
</div>
102103
</div>

0 commit comments

Comments
 (0)