ni / nimble

The NI Nimble Design System
https://nimble.ni.dev
MIT License
29 stars 9 forks source link

Improve Blazor styling docs #2209

Open rajsite opened 1 week ago

rajsite commented 1 week ago

🧹 Tech Debt

Should include clearer docs on how to style the Blazor Components. In particular users are expected to be able to configure layout settings like flex / grid configuration, sizing in some scenarios, etc.

Because Blazor does not yet have a first-class way to mark something in a template as the style target users are required to use the workaround of manually targeting the child component with the ::deep selector.

We should document this workflow more clearly. A specific example that came up was how to follow our large dialog styling in Blazor which ends up looking like:

 <NimbleDialog class="my-dialog"></NimbleDialog>
::deep .my-dialog::part(control) {
    width: var(--ni-nimble-dialog-large-width);
    height: var(--ni-nimble-dialog-large-height);
    max-height: var(--ni-nimble-dialog-large-max-height);
}