Grouped list docs
Closed this issue · 7 comments
Description
Here https://sebgroup.github.io/green/latest/angular/?path=/docs/components-grouped-list--default it is stated that you need to `import '@sebgroup/green-core'
But green-core is not a part of the installation (https://sebgroup.github.io/green/latest/angular/?path=/docs/get-started--page).
as a result we get:
Can't find stylesheet to import.
@import '@sebgroup/green-core';
@sebgroup/green-core is a sub-dependency of @sebgroup/green-angular, so you should be getting it by depending on the Angular package.
@sebgroup/green-core is not a stylesheet though, it is a javascript library. I see now that the example is a bit unclear on that part! It is referring to your xxx.component.ts file for the Angular component where you will use the web component.
Will clarify this in the example!
Ok.. thx..
Next question:
The chlorophyll version has a label/value for each row.. does the angular implementation have that but the docs are missing?
https://sebgroup.github.io/green/latest/chlorophyll/?path=/docs/components-list--page
Yes, you can add the content you need inside each list item. There are more examples in the documentation for the web component: https://sebgroup.github.io/green/latest/core/?path=/docs/components-grouped-list--page
ok.. so the core is where I should look docs on how to use angular components.. got it 😄
when it comes to styling these components, what is the recommended way?
Right now we get an element like <gds-grouped-list-482aa6>... so we cant style on element.. and I guess adding a class will not work either due to shadow dom right?.. so right now the way I see is to put wrappers every where.. surely there must be a cleaner way 😁
You can add a class just fine, you just can affect any children inside Shadow DOM. But in this case there's nothing in Shadow DOM (check dev tools inspector), so it'll be like styling any other element. And your slotted children lives in light DOM, so those you can style freely as well.
You can't use element selectors though. And you shouldn't either way. But if you really need to, you can select on [gds-element='gds-list-item'] to get around the scoping thing. But considers the implications of generic selectors if your app is an MFE and therse are neighboring apps also using Green.
To adress the question of what the recommended way is, we're still trying to figure out the best practices for this. We want to minimize the need for additional styling, because every time someone needs to add custom styling, thats an opportunity for inconsistencies to creep in. But we also need to have enough flexibility to handle all the edge-case that inevitably pops up.
We're leaning towards some som form of utility class based solution, but its still in the exploration phase. For now, keep using utility classes from Chlorophyll and add custom styling with care, and only when necessary.