feat: add support for styling widgets #107
Conversation
projects/dashboards/src/widgets/container/layout/widget-theme.ts
Outdated
Show resolved
Hide resolved
Codecov Report
@@ Coverage Diff @@
## main #107 +/- ##
==========================================
+ Coverage 85.91% 85.93% +0.01%
==========================================
Files 389 390 +1
Lines 6917 6923 +6
Branches 850 809 -41
==========================================
+ Hits 5943 5949 +6
- Misses 961 963 +2
+ Partials 13 11 -2
Continue to review full report at Codecov.
|
| @@ -41,6 +41,7 @@ export class AutoContainerLayoutModel extends ContainerLayout { | |||
| columns: `repeat(${gridDimension[1]}, minmax(${this.minColumnWidth}px, 1fr))`, | |||
| gap: `${this.gridGap}`, | |||
| enableStyle: this.enableStyle, | |||
| widgetTheme: this.widgetTheme, | |||
There was a problem hiding this comment.
I'm super hesitant to add theme to our existing model considering it's already built in (but not fleshed out). @arjunlalb I'm guessing you were unaware of it, so do you mind looking into that first and seeing if we could accomplish the same thing with that system?
Some pointers:
- It's a sibling to the data source system, so it can be accessed in a similar way -
this.api.getTheme()either in the model or renderer apis. - A theme value can be accessed directly in the DOM through a pipe (we should probably rename this) - https://github.com/hypertrace/hyperdash-angular/blob/main/projects/hyperdash-angular/src/rendering/theme-property.pipe.ts
- It's defined on a model in the same way as data, as a special prop on any model that is inherited. A working example of this can be found in the ancient hyperdash playground: https://github.com/hypertrace/hyperdash-angular/blob/main/src/example-dash/example-dash.component.ts . We can subclass and create new theme models beyond the built in one which was more of a POC.
There was a problem hiding this comment.
aah. You're right. I wasn't aware of it. Will take a look.
Is that a theme system for the whole app or usable for just isolated usecases?
There was a problem hiding this comment.
We can use it isolated but it's meant to integrate with the broader app. Specifically two aspects to watch out for:
- Themes are inherited. If you theme a container, then any of its children will inherit that theme by default. They're also merged.
- Using a theme is opt in for the renderer. Because different widgets will apply styles differently, they need to explicitly apply theme values.
Dark widget