Update custom cards, add custom badges and custom card features

[piitaya]

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

• [ ] Document existing features within Home Assistant
• [x] Document new or changing features which there is an existing pull request elsewhere
• [ ] Spelling or grammatical corrections, or rewording for improved clarity
• [ ] Changes to the backend of this documentation
• [ ] Removed stale or deprecated documentation

Additional information

• This PR fixes or closes issue: fixes #
• Link to relevant existing code or pull request: https://github.com/home-assistant/frontend/pull/21401

Summary by CodeRabbit

• New Features

  • Introduced comprehensive documentation for creating custom badges and button features in Home Assistant.
  • Users can now add interactive button functionalities in their dashboards.
  • Enhanced customization options for defining card layouts, improving the user experience.

• Documentation

  • Updated and clarified existing documentation on custom card definitions and layout options.
  • Added new sections detailing sizing and layout implications for better guidance.

• Chores

  • Improved sidebar structure by adding new UI components and ensuring consistent formatting.

[coderabbitai[bot]]

Walkthrough

## Walkthrough The 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 | Files | Change Summary | |-----------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------| | docs/frontend/custom-ui/custom-badge.md, docs/frontend/custom-ui/custom-card-feature.md, docs/frontend/custom-ui/custom-card.md | Introduced and improved documentation for custom badges and button features. Added methods for layout options and enhanced clarity regarding card size management. | | sidebars.js | Added new items for custom badge and button features to the exported UI components list; updated formatting for consistency. | ## Sequence Diagram(s) ```mermaid 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 ``` ```mermaid 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 details

**Configuration used: CodeRabbit UI** **Review profile: CHILL**

Commits

Files that changed from the base of the PR and between eb20fb80992fff13ee316f6ec69912322a96c930 and 3a4512d6097424a75044772579ec88022bd39a09.

Files selected for processing (3)

* docs/frontend/custom-ui/custom-badge.md (1 hunks) * docs/frontend/custom-ui/custom-card-feature.md (1 hunks) * docs/frontend/custom-ui/custom-card.md (5 hunks)

Additional context used

LanguageTool

docs/frontend/custom-ui/custom-card-feature.md

[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] ~7-~7: This verb does not appear to agree with the subject. Consider using a different form. Context: ...ui/custom-card). ## Defining your card feature Below is an example of a custom card f... (AI_EN_LECTOR_REPLACEMENT_VERB_AGREEMENT) --- [uncategorized] ~105-~105: You might be missing the article “the” here. Context: ...er integrate with the default design of home assistant, you can use these CSS variab... (AI_EN_LECTOR_MISSING_DETERMINER_THE) --- [uncategorized] ~107-~107: Loose punctuation mark. Context: ...ese CSS variables: - `--feature-height`: Recommended height (42px). - `--feature... (UNLIKELY_OPENING_PUNCTUATION) --- [uncategorized] ~108-~108: Loose punctuation mark. Context: ...ight (42px). - `--feature-border-radius`: Recommended border radius (12px). It be... (UNLIKELY_OPENING_PUNCTUATION) --- [grammar] ~108-~108: It seems that only one verb should be used here. Context: ...ius`: Recommended border radius (12px). It be can useful to set button or slider border r... (I_M_MD) --- [uncategorized] ~109-~109: Loose punctuation mark. Context: ...der radius. - `--feature-button-spacing`: Recommended space between buttons (12px... (UNLIKELY_OPENING_PUNCTUATION)

docs/frontend/custom-ui/custom-badge.md

[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)

docs/frontend/custom-ui/custom-card.md

[uncategorized] ~90-~90: You might be missing the article “the” here. Context: ...where.com/#react)). ### Configuration Home Assistant will call `setConfig(config)`... (AI_EN_LECTOR_MISSING_DETERMINER_THE) --- [uncategorized] ~97-~97: You might be missing the article “the” here. Context: ...equivalent to 50 pixels. This will help Home Assistant distribute the cards evenly o... (AI_EN_LECTOR_MISSING_DETERMINER_THE) --- [uncategorized] ~120-~120: Loose punctuation mark. Context: ...erent layout options are: - `grid_rows`: Default number of rows the card takes -... (UNLIKELY_OPENING_PUNCTUATION)

Additional comments not posted (25)

docs/frontend/custom-ui/custom-card-feature.md (10)

`1-3`: **LGTM!** The front matter for the title is correctly formatted. --- `9-9`: **LGTM!** The explanation on defining a custom badge is clear and follows the standard format. --- `14-46`: **LGTM!** The JavaScript example for creating a custom badge is clear and follows the standard format. --- `52-53`: **LGTM!** The explanation on adding a resource to the dashboard configuration is clear and follows the standard format. --- `56-63`: **LGTM!** The example of using the custom badge in the dashboard configuration is clear and follows the standard format. --- `65-83`: **LGTM!** The explanation of the API for custom badges is clear and follows the standard format. --- Line range hint `84-131`: **LGTM!** The example of implementing the custom badge configuration is clear and follows the standard format.

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] ~7-~7: This verb does not appear to agree with the subject. Consider using a different form. Context: ...ui/custom-card). ## Defining your card feature Below is an example of a custom card f... (AI_EN_LECTOR_REPLACEMENT_VERB_AGREEMENT) --- [uncategorized] ~105-~105: You might be missing the article “the” here. Context: ...er integrate with the default design of home assistant, you can use these CSS variab... (AI_EN_LECTOR_MISSING_DETERMINER_THE) --- [uncategorized] ~107-~107: Loose punctuation mark. Context: ...ese CSS variables: - `--feature-height`: Recommended height (42px). - `--feature... (UNLIKELY_OPENING_PUNCTUATION) --- [uncategorized] ~108-~108: Loose punctuation mark. Context: ...ight (42px). - `--feature-border-radius`: Recommended border radius (12px). It be... (UNLIKELY_OPENING_PUNCTUATION) --- [grammar] ~108-~108: It seems that only one verb should be used here. Context: ...ius`: Recommended border radius (12px). It be can useful to set button or slider border r... (I_M_MD) --- [uncategorized] ~109-~109: Loose punctuation mark. Context: ...der radius. - `--feature-button-spacing`: Recommended space between buttons (12px... (UNLIKELY_OPENING_PUNCTUATION)

--- `11-11`: **Fix grammatical error.** Correct the grammatical error in the sentence. ```diff - 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. ``` > Likely invalid or redundant comment. --- `50-50`: **Add a comma for clarity.** Add a comma for clarity. ```diff - 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` ``` > Likely invalid or redundant comment. --- `5-5`: **Fix grammatical error.** Correct the grammatical error in the sentence. ```diff - but you're not just limited that one. + but you're not just limited to that one. ``` > Likely invalid or redundant comment.

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)

docs/frontend/custom-ui/custom-badge.md (7)

`1-3`: **LGTM!** The front matter for the title is correctly formatted. --- `9-9`: **LGTM!** The explanation on defining a custom badge is clear and follows the standard format. --- `14-46`: **LGTM!** The JavaScript example for creating a custom badge is clear and follows the standard format. --- `52-53`: **LGTM!** The explanation on adding a resource to the dashboard configuration is clear and follows the standard format. --- `56-63`: **LGTM!** The example of using the custom badge in the dashboard configuration is clear and follows the standard format. --- `65-83`: **LGTM!** The explanation of the API for custom badges is clear and follows the standard format. --- `84-131`: **LGTM!** The example of implementing the custom badge configuration is clear and follows the standard format.

docs/frontend/custom-ui/custom-card.md (8)

`2-2`: **LGTM!** The front matter for the title is correctly formatted. --- Line range hint `9-9`: **LGTM!** The explanation on defining a custom card is clear and follows the standard format.

Tools

LanguageTool

[style] ~5-~5: The phrase ‘a lot of’ might be wordy and overused. Consider using an alternative. Context: ... interface for Home Assistant. We offer a lot of built-in cards, but you're not just lim... (A_LOT_OF)

--- `49-49`: **LGTM!** The `getCardSize` method is clear and follows the standard format. --- `54-62`: **LGTM!** The `getLayoutOptions` method is clear and follows the standard format. --- `120-120`: **Remove loose punctuation mark.** Remove the loose punctuation mark. ```diff - The different layout options are

Tools

LanguageTool

[uncategorized] ~120-~120: Loose punctuation mark. Context: ...erent layout options are: - `grid_rows`: Default number of rows the card takes -... (UNLIKELY_OPENING_PUNCTUATION)

--- `90-90`: **Add missing article.** The article "the" seems to be missing here. ```diff - Home Assistant will call `setConfig(config)` when the configuration changes (rare). + Home Assistant will call `setConfig(config)` when the configuration changes (rare). ``` > Likely invalid or redundant comment.

Tools

LanguageTool

[uncategorized] ~90-~90: You might be missing the article “the” here. Context: ...where.com/#react)). ### Configuration Home Assistant will call `setConfig(config)`... (AI_EN_LECTOR_MISSING_DETERMINER_THE)

--- `97-97`: **Add missing article.** The article "the" seems to be missing here. ```diff - This will help Home Assistant distribute the cards evenly over the columns. + This will help Home Assistant distribute the cards evenly over the columns. ``` > Likely invalid or redundant comment.

Tools

LanguageTool

[uncategorized] ~97-~97: You might be missing the article “the” here. Context: ...equivalent to 50 pixels. This will help Home Assistant distribute the cards evenly o... (AI_EN_LECTOR_MISSING_DETERMINER_THE)

--- `5-5`: **Fix grammatical error.** Correct the grammatical error in the sentence. ```diff - but you're not just limited that one. + but you're not just limited to that one. ``` > Likely invalid or redundant comment.

Tools

LanguageTool

[style] ~5-~5: The phrase ‘a lot of’ might be wordy and overused. Consider using an alternative. Context: ... interface for Home Assistant. We offer a lot of built-in cards, but you're not just lim... (A_LOT_OF)

--- 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?

Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` 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) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.