Documentation on how to use green properly in angular libraries/components

mackelito commented 7 months ago

Description

It would be really nice to have clear docs on how we should use green when creating custom components in angular features/standalone components.

splashdust commented 7 months ago

While we're working on improving the docs, here's some additional information on how to use Green Core with different frameworks: https://github.com/sebgroup/green/tree/main/libs/core#using-angular

Also, you can have a look at how we're using it in the Green Angular components that are currently wrapping web components. Currently dropdown, datepicker and context menu are doing this.

mackelito commented 7 months ago

How do you recommend adding stying to eg. UI components? Let's say I have a list of items and want to use the Grouped list component.

Adding it as instructed here "https://github.com/sebgroup/green/tree/main/libs/core#using-angular" will not provide the proper styles for the component and the app might not include the green design lib.. :)

Note: I currently have the proper design but in the case where a app does not really use a design system.. then perhaps the standalone feature should be able to work as.. well.. standalone :P

splashdust commented 7 months ago

The web components in Green Core are stand-alone in the sense that they encapsulate styling in Shadow DOM.

There is one caveat though: CSS variables. Since the components are mainly expected to be used in existing Chlorophyll based applications, they depend on the CSS variables defined by Chlorophyll. Since those are added on :root, and CSS variables permeate Shadow DOM boundaries, they are inherited into the components. But if Chlorophyll is not added on the page, components will look broken.

We have a work-around for this. There's a component called <gds-theme> which adds these variables locally. It's used like this:

<gds-theme>
  <!-- Use any gds-component in here and it will have access to correct CSS variables -->
</gds-theme>

It's available in the lib now, but not quite finished yet, and not documented, so use with care. Eventually, this component will also be used to control dark-mode settings for its children.

mackelito commented 7 months ago

hmm.. tried it like this

<gds-theme>
  <gds-grouped-list *nggCoreElement>
    <gds-list-item *nggCoreElement
      ><div>Item 1</div>
      <strong>asd</strong>
    </gds-list-item>
    <gds-list-item *nggCoreElement>Item 2</gds-list-item>
    <gds-list-item *nggCoreElement>Item 3</gds-list-item>
  </gds-grouped-list>
</gds-theme>

  <gds-grouped-list *nggCoreElement>
    <gds-list-item *nggCoreElement
      ><div>Item 1</div>
      <strong>asd</strong>
    </gds-list-item>
    <gds-list-item *nggCoreElement>Item 2</gds-list-item>
    <gds-list-item *nggCoreElement>Item 3</gds-list-item>
  </gds-grouped-list>

but they both looked the same (not properly styled)

splashdust commented 7 months ago

You need the *nggCoreElement directive on the <gds-theme> component as well.

mackelito commented 7 months ago

Still no styling when adding *nggCoreElement Is there anything else needed to get styles?

mackelito commented 7 months ago

also.. jest test are not working.. https://github.com/sebgroup/green/issues/952

mackelito commented 7 months ago

It's a shame, but all of these issues that keeps popping up forces us to go with chlorophyll instead. I know that you do not recommend it but for us it's not viable to use the other options right now. :(

splashdust commented 7 months ago

Still no styling when adding *nggCoreElement Is there anything else needed to get styles?

Nope, that should be enough.

Two things to note:

In your example, you don't use any label, and the label is pretty much the only styled part of these lists, except the line between items.
font-family is inherited from the document, so if you are not using Chlorophyll and not setting the font any other way, you'll get the browser default serif font-family, which could make it look unstyled.

Also, make sure to use the latest version of the packages. If it is still not working, feel free to reach out to me on Teams, maybe we can figure it out together.

also.. jest test are not working.. #952

Did you apply the config from Green? https://sebgroup.github.io/green/latest/angular/?path=/docs/testing--page#jest We had a regression there recently, but it should be working again in the latest version of @sebgroup/green-core

It's a shame, but all of these issues that keeps popping up forces us to go with chlorophyll instead. I know that you do not recommend it but for us it's not viable to use the other options right now. :(

Yeah, that is totally fine. Core is still under heavy development, so some frustrations are to be expected at this point when using it directly. Super good that you bring it up so we get awareness of where these issues come up!

mackelito commented 7 months ago

There are other things styled as well... spacings, paddings, line-heights etc etc.. We are already on the latest version but still not working.

I switched to use chlorophyll instead :/

seb-oss / green

Documentation on how to use green properly in angular libraries/components #1353

Description