Update custom cards, add custom badges and custom card features #2258
Conversation
WalkthroughWalkthroughThe recent updates introduce comprehensive documentation for creating custom badges and button features within the Home Assistant dashboard. These enhancements empower users to define personalized elements that dynamically reflect entity states and interact through button actions, enriching the user interface. Additionally, improvements have been made to the clarity and management of custom card definitions, including new methods for layout options, facilitating a more tailored experience for developers and users alike. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Dashboard
participant CustomBadge
participant ButtonPress
User->>Dashboard: Interacts with custom badge
Dashboard->>CustomBadge: Update state
CustomBadge-->>Dashboard: Display new state
User->>Dashboard: Clicks button
Dashboard->>ButtonPress: Invoke action
ButtonPress-->>Dashboard: Action completed
sequenceDiagram
participant User
participant Dashboard
participant CustomCard
User->>Dashboard: Interacts with custom card
Dashboard->>CustomCard: Render card with layout options
CustomCard-->>Dashboard: Display layout
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (3)
Additional context usedLanguageTool
Additional comments not posted (25)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
piitaya
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 15
Outside diff range, codebase verification and nitpick comments (3)
docs/frontend/custom-ui/custom-card-feature.md (3)
5-5: Consider rephrasing for conciseness.The phrase "a lot of" might be wordy and overused. Consider using an alternative.
- We offer a lot of built-in features, but you're not just limited to the ones that we decided to include in Home Assistant. + We offer numerous built-in features, but you're not limited to those included in Home Assistant.Tools
LanguageTool
[style] ~5-~5: The phrase ‘a lot of’ might be wordy and overused. Consider using an alternative.
Context: ...dd quick controls to the card. We offer a lot of built-in features, but you're not just ...(A_LOT_OF)
[uncategorized] ~5-~5: The preposition “to” seems more likely in this position.
Context: ...uild and use your own using similar way than defining [custom cards](/docs/frontend/...(AI_EN_LECTOR_REPLACEMENT_PREPOSITION)
41-45: Improve error message clarity.Improve the clarity of the error message for invalid configuration.
- throw new Error("Invalid configuration"); + throw new Error("Invalid configuration: config is missing or invalid.");
11-11: The image URL is incorrect.The image URL
https://www.home-assistant.io/img/en/frontend/dashboard-custom-card-feature-screenshot.pngreturns a 404 status code, indicating that the image is not accessible. Please verify and update the URL to point to the correct image.
- File:
docs/frontend/custom-ui/custom-card-feature.md- Line: 11
Analysis chain
Ensure the image URL is correct.
Verify that the image URL is correct and the image is accessible.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the image URL is correct and the image is accessible. # Test: Check if the image URL is accessible. Expect: Status code 200. curl -I https://www.home-assistant.io/img/en/frontend/dashboard-custom-card-feature-screenshot.png | grep "HTTP/2 200"Length of output: 437
Script:
#!/bin/bash # Description: Verify the image URL is correct and the image is accessible. # Test: Check if the image URL is accessible. Expect: Status code 200. curl -o /dev/null -s -w "%{http_code}\n" https://www.home-assistant.io/img/en/frontend/dashboard-custom-card-feature-screenshot.pngLength of output: 137
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
| To have your badge displayed in the badge picker dialog in the dashboard, add an object describing it to the array `window.customBadges`. Required properties of the object are `type` and `name` (see example below). | ||
|
|
||
| ```js | ||
| import { LitElement } from "lit"; |
There was a problem hiding this comment.
| import { LitElement } from "lit"; |
|
|
||
| Defining a badge is done in a very similar way to defining a [custom card](/docs/frontend/custom-ui/custom-card). | ||
|
|
||
| Let's create a basic badge that displays custom text at the top of the screen. |
There was a problem hiding this comment.
Fix grammatical error.
Correct the grammatical error in the sentence.
- Let's create a basic badge that display a custom text at the top of the screen.
+ Let's create a basic badge that displays custom text at the top of the screen.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| Let's create a basic badge that displays custom text at the top of the screen. | |
| Let's create a basic badge that displays custom text at the top of the screen. |
|
|
||
| ## Referencing your new badge | ||
|
|
||
| In our example badge, we defined a badge with the tag `text-badge` (see last line), so our badge type will be `custom:text-badge`. And because you created the file in your `<config>/www` directory, it will be accessible in your browser via the url `/local/` (if you have recently added the www folder you will need to re-start Home Assistant for files to be picked up). |
There was a problem hiding this comment.
Add a comma for clarity.
Add a comma for clarity.
- In our example badge we defined a badge with the tag `text-badge`
+ In our example badge, we defined a badge with the tag `text-badge`Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| In our example badge, we defined a badge with the tag `text-badge` (see last line), so our badge type will be `custom:text-badge`. And because you created the file in your `<config>/www` directory, it will be accessible in your browser via the url `/local/` (if you have recently added the www folder you will need to re-start Home Assistant for files to be picked up). | |
| In our example badge, we defined a badge with the tag `text-badge` (see last line), so our badge type will be `custom:text-badge`. And because you created the file in your `<config>/www` directory, it will be accessible in your browser via the url `/local/` (if you have recently added the www folder you will need to re-start Home Assistant for files to be picked up). |
| title: "Custom badge" | ||
| --- | ||
|
|
||
| [Badges](https://www.home-assistant.io/dashboards/badges/) are small widgets that sit at the top of a view, above all cards. We offer a built-in badge, the [entity badge](https://next.home-assistant.io/dashboards/badges/#entity-badge), but you're not just limited that one. You can build and use your own! |
There was a problem hiding this comment.
Fix grammatical error.
Correct the grammatical error in the sentence.
- but you're not just limited that one.
+ but you're not just limited to that one.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| [Badges](https://www.home-assistant.io/dashboards/badges/) are small widgets that sit at the top of a view, above all cards. We offer a built-in badge, the [entity badge](https://next.home-assistant.io/dashboards/badges/#entity-badge), but you're not just limited that one. You can build and use your own! | |
| [Badges](https://www.home-assistant.io/dashboards/badges/) are small widgets that sit at the top of a view, above all cards. We offer a built-in badge, the [entity badge](https://next.home-assistant.io/dashboards/badges/#entity-badge), but you're not just limited to that one. You can build and use your own! |
Tools
LanguageTool
[uncategorized] ~5-~5: Possible missing preposition found.
Context: ...ity-badge), but you're not just limited that one. You can build and use your own! #...(AI_EN_LECTOR_MISSING_PREPOSITION)
| Your card can define a `getConfigElement` method that returns a custom element for editing the user configuration. Home Assistant will display this element in the card editor in the dashboard. | ||
| ### Sizing in sections view | ||
|
|
||
| You card can define a `getLayoutOptions` method that returns the min, max and default number of cells your card will take in the grid if your card is used if the [sections view](https://www.home-assistant.io/dashboards/masonry/) |
There was a problem hiding this comment.
Fix grammatical error.
Correct the grammatical error in the sentence.
- You card can define a `getLayoutOptions` method that returns the min, max and default number of cells your card will take in the grid.
+ Your card can define a `getLayoutOptions` method that returns the min, max and default number of cells your card will take in the grid.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| You card can define a `getLayoutOptions` method that returns the min, max and default number of cells your card will take in the grid if your card is used if the [sections view](https://www.home-assistant.io/dashboards/masonry/) | |
| You card can define a `getLayoutOptions` method that returns the min, max and default number of cells your card will take in the grid if your card is used if the [sections view](https://www.home-assistant.io/dashboards/masonry/) | |
| ``` | |
| ```suggestion | |
| Your card can define a `getLayoutOptions` method that returns the min, max and default number of cells your card will take in the grid if your card is used if the [sections view](https://www.home-assistant.io/dashboards/masonry/) |
Proposed change
Add documentation about custom card sizing in section view
Add documentation about custom card features (It was part of custom cards page before, it's now a dedicated page)
Add documentation about custom badges
Type of change
Additional information
Summary by CodeRabbit
New Features
Documentation
Chores