Skip to content

Aura Theme in the Documentation #4801

@yuriy-fix

Description

@yuriy-fix

We want to update the documentation to accommodate for the Aura theme. For now Lumo should still be used by default, however for Aura we at least want to have:

  • The option to render an example with the Aura theme. For that we are planning to add a theme switcher to the docs app that would allow switching an individual example to render either with the Lumo or Aura theme (prototype branch). We then update the first example of each component page to make sure it works with Aura as well. Other examples will be updated later.
  • We want to list which style variants are available in Aura. For style variants, we add a section "Style Variants" to the styling page of each component. We then add a table that lists all available style variants (both Lumo and Aura), and then for each specify in which theme(s) it is supported. We also move all style variants ("theme variants") examples from the main component page to this section. For now the style variants examples will still all render with the Lumo theme.
  • We want to list which style props are available in Aura. For that we update the existing style props tables to remove the column with the default value (as it differs between Aura and Lumo), and instead have a column that specifies in which theme(s) the prop is supported.

The following actions need to be proceeded with for each individual component:

  • Check if the first / basic example on the component page works with the Aura theme.
    • If not, update the example to work with both themes. If the example is using Lumo specific style variants or CSS props, try to refactor the example to use variants / Vaadin props that work with both themes.
    • Use the theme switcher prototype branch in docs-app to verify both themes work.
  • Add a "Style Variants" section to the styling page
    • Add a table that lists all available variants. The table should have columns for the variant name, a description and a support column that list the supported themes.
    • Move style variant ("theme variant") related example below that table.
  • Update style props tables
    • Remove default value column
    • Add column that lists in which themes the prop is supported

This speadsheet tracks who is working on which component page.

Sub-issues

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions