Add heading card #34978
Add heading card #34978
Conversation
✅ Deploy Preview for home-assistant-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Caution Review failedThe pull request is closed. 📝 Walkthrough📝 WalkthroughWalkthroughThe changes introduce two new features for dashboards: a "Heading card" and a "Sections" view. The Heading card provides a structured way to display titles, icons, navigation, and badges, allowing for compact entity information. The Sections view enables users to organize cards in a grid layout, supporting dynamic visibility and drag-and-drop rearrangement of sections and cards. Documentation for both features outlines configuration requirements and usage instructions. Changes
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (6)
source/_dashboards/heading.markdown (4)
20-31: Consider adding explanatory comments to the YAML exampleThe YAML example effectively demonstrates the Heading card configuration. To further enhance readability and understanding, consider adding inline comments explaining each key component of the configuration. For example:
type: heading # Specifies this is a Heading card heading: Living room # The main text to be displayed icon: mdi:sofa # Icon to be shown alongside the heading badges: # List of badges to be displayed - type: entity # Each badge represents an entity entity_id: sensor.living_room_sensor_temperature color: red # Custom color for the temperature badge # ... (other badges)This addition would help users quickly grasp the purpose of each configuration element.
43-46: Minor grammatical improvement suggestedIn the
heading_styledescription, consider rephrasing for better clarity:- description: Style of the heading. Can be either `title` or `subtitle`. + description: Style of the heading. It can be either `title` or `subtitle`.This small change improves the sentence structure and removes the extra space before
title.🧰 Tools
🪛 LanguageTool
[style] ~44-~44: To form a complete sentence, be sure to include a subject or ‘there’.
Context: ...se description: Style of the heading. Can be eithertitleorsubtitle. typ...(MISSING_IT_THERE)
61-69: Minor typo and suggested improvement for Heading badges sectionThe Heading badges section provides a good introduction to the feature. However, there's a small typo that should be corrected:
- These badges are similar to regular [badges](/dashboards/badges/) but they are smaller and without background. They can be used useful to display sensor information in a compact and minimal style. + These badges are similar to regular [badges](/dashboards/badges/) but they are smaller and without background. They can be useful to display sensor information in a compact and minimal style.Additionally, consider expanding the YAML example to show multiple badges, as this would better illustrate the feature's capabilities:
type: heading heading: Living room badges: - type: entity entity: light.living_room - type: entity entity: sensor.living_room_temperatureThis expanded example would give users a clearer picture of how multiple badges can be used together.
89-89: Minor style improvements suggestedTo address the style issues mentioned in the static analysis hints:
In the
coloroption description (line 89), add a comma after "By default":- description: Set the color when the entity is active. By default it will not be colored. It can be set to the `state` special token to dynamically color the icon based on `state`, `domain`, and `device_class` of your entity. It also accepts [color token](/dashboards/tile/#available-colors) or hex color code. + description: Set the color when the entity is active. By default, it will not be colored. It can be set to the `state` special token to dynamically color the icon based on `state`, `domain`, and `device_class` of your entity. It also accepts [color token](/dashboards/tile/#available-colors) or hex color code.In the
state_contentoption description (line 105), consider rephrasing to form complete sentences:- description: > - Content to display for the state. Can be `state`, `name`, `last_changed`, `last_updated`, or any attribute of the entity. Can be either a string with a single item, or a list of string items. Default depends on the entity domain. + description: > + Specifies the content to display for the state. It can be `state`, `name`, `last_changed`, `last_updated`, or any attribute of the entity. It can be either a string with a single item or a list of string items. The default depends on the entity domain.These small changes improve the overall readability and grammatical correctness of the documentation.
Also applies to: 105-105
🧰 Tools
🪛 LanguageTool
[uncategorized] ~89-~89: Did you mean: “By default,”?
Context: ...et the color when the entity is active. By default it will not be colored. It can be set t...(BY_DEFAULT_COMMA)
source/_dashboards/sections.markdown (2)
Line range hint
69-86: LGTM! Consider adding a note about saving changes.The new section on rearranging sections and cards is well-written and includes helpful visual aids. The step-by-step instructions are clear and easy to follow.
Consider adding a note at the end of this section reminding users to save their changes after rearranging sections and cards. This could prevent users from accidentally losing their new layout.
Suggested addition:
4. After rearranging, don't forget to select the **Save** button to preserve your changes.🧰 Tools
🪛 LanguageTool
[misspelling] ~55-~55: Use “A” instead of ‘An’ if the following word doesn’t start with a vowel sound, e.g. ‘a sentence’, ‘a university’.
Context: ...elect the Create section button. 3. An heading card wil...(EN_A_VS_AN)
Line range hint
88-92: LGTM! Consider adding an example for clarity.The new section on conditional visibility for sections is concise and informative. It effectively references existing documentation for conditions and provides clear instructions for editing visibility.
To enhance user understanding, consider adding a simple example of a visibility condition. This could help users grasp the concept more quickly.
Suggested addition:
For example, you could set a condition to show a section only when a specific user is logged in or when a certain sensor value is above a threshold.🧰 Tools
🪛 LanguageTool
[misspelling] ~55-~55: Use “A” instead of ‘An’ if the following word doesn’t start with a vowel sound, e.g. ‘a sentence’, ‘a university’.
Context: ...elect the Create section button. 3. An heading card wil...(EN_A_VS_AN)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
source/images/dashboards/heading_card.pngis excluded by!**/*.png
📒 Files selected for processing (2)
- source/_dashboards/heading.markdown (1 hunks)
- source/_dashboards/sections.markdown (1 hunks)
🧰 Additional context used
🪛 LanguageTool
source/_dashboards/heading.markdown
[style] ~44-~44: To form a complete sentence, be sure to include a subject or ‘there’.
Context: ...se description: Style of the heading. Can be eithertitleorsubtitle. typ...(MISSING_IT_THERE)
[uncategorized] ~89-~89: Did you mean: “By default,”?
Context: ...et the color when the entity is active. By default it will not be colored. It can be set t...(BY_DEFAULT_COMMA)
[style] ~105-~105: To form a complete sentence, be sure to include a subject.
Context: ...> Content to display for the state. Can bestate,name,last_changed, `la...(MISSING_IT_THERE)
[style] ~105-~105: To form a complete sentence, be sure to include a subject.
Context: ...dated`, or any attribute of the entity. Can be either a string with a single item, ...(MISSING_IT_THERE)
source/_dashboards/sections.markdown
[misspelling] ~55-~55: Use “A” instead of ‘An’ if the following word doesn’t start with a vowel sound, e.g. ‘a sentence’, ‘a university’.
Context: ...elect the Create section button. 3. An heading card wil...(EN_A_VS_AN)
🔇 Additional comments (4)
source/_dashboards/heading.markdown (3)
1-18: LGTM: Well-structured frontmatter and introductionThe frontmatter and introduction are well-organized and provide clear, concise information about the Heading card feature. The inclusion of related documentation links and an illustrative image enhances the user's understanding.
33-59: LGTM: Comprehensive configuration documentationThe configuration section provides a thorough explanation of all available options for the Heading card. The use of the custom Liquid tag
{% configuration entity %}appears to be consistent with the documentation standards, and each option is clearly described with its requirements and type.🧰 Tools
🪛 LanguageTool
[style] ~44-~44: To form a complete sentence, be sure to include a subject or ‘there’.
Context: ...se description: Style of the heading. Can be eithertitleorsubtitle. typ...(MISSING_IT_THERE)
70-111: LGTM: Detailed and comprehensive badge configuration documentationThe badge configuration section provides an excellent breakdown of all available options for customizing individual badges. The explanations are clear and thorough, particularly for complex options like
colorandstate_content. This level of detail will be very helpful for users trying to customize their dashboard.🧰 Tools
🪛 LanguageTool
[uncategorized] ~89-~89: Did you mean: “By default,”?
Context: ...et the color when the entity is active. By default it will not be colored. It can be set t...(BY_DEFAULT_COMMA)
[style] ~105-~105: To form a complete sentence, be sure to include a subject.
Context: ...> Content to display for the state. Can bestate,name,last_changed, `la...(MISSING_IT_THERE)
[style] ~105-~105: To form a complete sentence, be sure to include a subject.
Context: ...dated`, or any attribute of the entity. Can be either a string with a single item, ...(MISSING_IT_THERE)
source/_dashboards/sections.markdown (1)
Line range hint
1-114: Excellent documentation for the new Sections view feature!The additions to this documentation file effectively explain the new Sections view feature in Home Assistant dashboards. The content is well-structured, clear, and includes helpful visual aids. The step-by-step instructions and explanations of new functionality (such as drag-and-drop rearrangement) are particularly useful for users.
A few minor suggestions have been made to further improve the documentation:
- Correcting a grammatical error in the heading card explanation.
- Adding a reminder to save changes after rearranging sections and cards.
- Including a simple example for section visibility conditions.
These small enhancements will make the already high-quality documentation even more user-friendly and comprehensive.
🧰 Tools
🪛 LanguageTool
[misspelling] ~55-~55: Use “A” instead of ‘An’ if the following word doesn’t start with a vowel sound, e.g. ‘a sentence’, ‘a university’.
Context: ...elect the Create section button. 3. An heading card wil...(EN_A_VS_AN)
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
source/_dashboards/heading.markdown (3)
20-31: LGTM: Clear YAML configuration exampleThe YAML example effectively demonstrates the structure and capabilities of the Heading card. It's particularly helpful in showing how to configure multiple badges with different properties.
Consider adding a brief comment above the YAML example to introduce it, such as:
# Example configuration for a Heading card with two badgesThis would provide additional context for users new to the feature.
33-59: Comprehensive configuration documentation with minor improvements neededThe configuration documentation for the Heading card is well-structured and covers all main properties. However, there are a couple of points that could be improved:
On line 44, there's a minor style issue in the
heading_styledescription.The
tap_actiondescription on line 53 could be more specific about when the chevron appears.Consider rewording the
heading_styledescription for better clarity:- description: Style of the heading. Can be either `title` or `subtitle`. + description: Style of the heading. It can be either `title` or `subtitle`.
- For the
tap_actiondescription, consider adding more detail:- description: Action taken on card tap. See [action documentation](/dashboards/actions/#tap-action). By default, it will do nothing. If an action is configured, a chevron will appear next to the heading text. + description: Action taken on card tap. See [action documentation](/dashboards/actions/#tap-action). By default, it will do nothing. If any tap action is configured (even if it's set to "none"), a chevron will appear next to the heading text.🧰 Tools
🪛 LanguageTool
[style] ~44-~44: To form a complete sentence, be sure to include a subject or ‘there’.
Context: ...se description: Style of the heading. Can be eithertitleorsubtitle. typ...(MISSING_IT_THERE)
65-111: Comprehensive Heading badges configuration with suggested improvementsThe Heading badges configuration documentation is thorough and well-structured. However, there are a few points that could be improved:
The
colordescription could be more detailed, as suggested in a previous review.There are minor style issues in some descriptions that could be addressed for better readability.
Update the
colordescription as previously suggested:description: Set the color when the entity is active. By default, it will not be colored. It can be set to the `state` special token to dynamically color the icon based on `state`, `domain`, and `device_class` of your entity. It also accepts [color token](/dashboards/tile/#available-colors) or hex color code.
- Address style issues in the following descriptions:
- Line 81: Add "the" before "name token" for clarity.
- Line 105: Rephrase for better sentence structure:
description: > Specifies the content to display for the state. It can be `state`, `name`, `last_changed`, `last_updated`, or any attribute of the entity. This can be either a string with a single item or a list of string items. The default depends on the entity domain.These changes will improve the overall clarity and readability of the documentation.
🧰 Tools
🪛 LanguageTool
[style] ~105-~105: To form a complete sentence, be sure to include a subject.
Context: ...> Content to display for the state. Can bestate,name,last_changed, `la...(MISSING_IT_THERE)
[style] ~105-~105: To form a complete sentence, be sure to include a subject.
Context: ...dated`, or any attribute of the entity. Can be either a string with a single item, ...(MISSING_IT_THERE)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- source/_dashboards/heading.markdown (1 hunks)
- source/_dashboards/sections.markdown (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- source/_dashboards/sections.markdown
🧰 Additional context used
🪛 LanguageTool
source/_dashboards/heading.markdown
[style] ~44-~44: To form a complete sentence, be sure to include a subject or ‘there’.
Context: ...se description: Style of the heading. Can be eithertitleorsubtitle. typ...(MISSING_IT_THERE)
[style] ~105-~105: To form a complete sentence, be sure to include a subject.
Context: ...> Content to display for the state. Can bestate,name,last_changed, `la...(MISSING_IT_THERE)
[style] ~105-~105: To form a complete sentence, be sure to include a subject.
Context: ...dated`, or any attribute of the entity. Can be either a string with a single item, ...(MISSING_IT_THERE)
🔇 Additional comments (2)
source/_dashboards/heading.markdown (2)
1-18: LGTM: Well-structured frontmatter and introductionThe frontmatter and introduction provide clear and concise information about the Heading card feature. The inclusion of related links and an illustrative image enhances the documentation's usefulness.
61-63: Approve with suggested improvement for Heading badges introductionThe introduction to Heading badges is concise, but it could benefit from additional context.
As suggested in a previous review, consider updating the description to provide more detail:
In addition to the heading text, each heading card can show small badges. They are smaller than regular [badges](/dashboards/badges/) and don't have a background. The heading badges can display sensor information in a compact and minimal style.This change provides a clearer comparison to regular badges and emphasizes the compact nature of heading badges.
Proposed change
Add documentation for heading card.
Section view documentation has also been updated to reflect the new way to edit title for sections.
Screenshots in section view needs to be updated as well but it's not part of this PR.
Type of change
currentbranch).currentbranch).nextbranch).nextbranch).Additional information
Checklist
currentbranch.nextbranch.Summary by CodeRabbit
New Features
Documentation