-
Notifications
You must be signed in to change notification settings - Fork 214
refactor: update Accordion article to Aura theme #4845
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: update Accordion article to Aura theme #4845
Conversation
AI Language Review
For each of these points, ensure that the styling aspects align with the overarching theme/style guide of the application to maintain consistency in the UI/UX design. |
| --- | ||
| = Accordion Styling | ||
|
|
||
| == Style Variants |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There probably should be a paragraph about how to apply style variants with a code snippet, especially since the terminology is now different from the theme attribute that you need to use. I think we can separately add a common section for this in a shared asciidoc and then include it in the styling pages that have a style variants section.
| > | ||
| Continue | ||
| </Button> | ||
| </VerticalLayout> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could probably use {/* tag::snippet[] */} and {/* end::snippet[] */} in this example to not include the whole Accordion in the code example, but a single panel like in Lit version. Not a blocker though.
| Accordions can be used to break a complex form into smaller step-by-step sections. | ||
|
|
||
| The expandable and collapsible nature of accordions can sometimes be difficult for users to discover. Use the <<filled-panels,filled variant>> and apply [since:com.vaadin:vaadin@V23.3]##<<../tooltip#,tooltips>>## on the panels to make this more discoverable. | ||
| The expandable and collapsible nature of accordions can sometimes be difficult for users to discover. Use the <<styling#filled-panels,filled variant>> and apply [since:com.vaadin:vaadin@V23.3]##<<../tooltip#,tooltips>>## on the panels to make this more discoverable. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could probably remove "since" tag from here as it was only relevant for V23 docs.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should remove all [since] annotations from v25 docs (and any [since v23] annotations from v24 docs).
| | Variant | Description | Supported by | ||
|
|
||
| |`filled` | ||
| |The filled theme variant makes the panel’s boundaries visible |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's probably align wording here with other variants below:
| |The filled theme variant makes the panel’s boundaries visible | |
| |Makes the panel’s boundaries visible |
|
|
||
| === Filled Panels | ||
|
|
||
| The `filled` theme variant makes the panel's boundaries visible. This helps tie its content together visually and distinguishes it from the surrounding UI. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's use "style variant" consistently:
| The `filled` theme variant makes the panel's boundaries visible. This helps tie its content together visually and distinguishes it from the surrounding UI. | |
| The `filled` style variant makes the panel's boundaries visible. This helps tie its content together visually and distinguishes it from the surrounding UI. |
|
|
||
| === Reverse Panels | ||
|
|
||
| The `reverse` theme variant places the toggle icon after the summary contents. This can be useful for aligning visually the summary with other content. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same as above, let's use "style variant" consistently:
| The `reverse` theme variant places the toggle icon after the summary contents. This can be useful for aligning visually the summary with other content. | |
| The `reverse` style variant places the toggle icon after the summary contents. This can be useful for aligning visually the summary with other content. |
Updates the Accordion page and examples to use the Aura theme.
Noteworthy changes: