Adding Support for Angular

[pablo-meyer]

This is awesome but it seems like everything here is tailored around react. Can/Will this be provided in angular or somehow in pure html/css/javascript?

[alkwa-msft]

Greetings @pablo-meyer. We have a pure html/css/javascript method to try out our composites

We have this that you can try out https://azure.github.io/communication-ui-library/?path=/story/use-composite-in-non-react-environment--page

This way forward involves creating the library in "script" form that allows you to add it to your webpage and attach a composite to the DOM

If you are looking for something around atomic components, its something we are thinking about but we are always looking for additional customer signals

[pablo-meyer]

Thanks @alkwa-msft, what about a meeting composite? Also, where can I find the css files for the look and field if using the composite?

[alkwa-msft]

The meetings composite will be actively developed after December.

In terms of using it in pure JS capacity we can create a github issue and get to it.

Typically we don't want to expose raw css as it can be easy to shoot themselves in the foot. We are exploring a design token API for styling key areas of the composite experience.

I was wondering if you can go into more detail about what you were thinking of styling, it would be helpful information for the team to understand if developers want to completely re-style the whole application or just key pieces.

[alkwa-msft]

I created this item @pablo-meyer https://github.com/Azure/communication-ui-library/issues/1000

Feel free to comment on it more if there is any additional background information I am missing

[pablo-meyer]

For styling Im refering to providing css so we can make the component look like the sample composites.

https://azure.github.io/communication-ui-library/?path=/story/composites-call-basicexample--basic-example&args=displayName:PM

Not sure the current composite scripts have much styling

[alkwa-msft]

So we probably won't do CSS as it standardly works as it exists globally and could make impacts across the experience. If this is the specific desired experience then the team will need to look into how we can make this possible.

Our components expose a Fluent styles object which allows us to create json objects to style specific parts of our component. This is what we want to expose at the component layer.

e.g (

{
   root: {
      width:'..
      height:'..'
    },
    subComponent1: {
       root: { 
           margin: '...'
        }
    }
    subComponent2: {
        root: {
             ...
        }
        subSubComponent: {
          ... 
        }
     }
}

For composites, we are thinking we don't want to expose this granularity, its too simple for developers to mess up the styling and find ways to make it look incorrect. So we might only expose specific "design tokens" which only allow developers to change key parts which we can validate with a number of inputs (internally) to validate that in general it always yields a good experience.

Thoughts?

[pablo-meyer]

I think design token should be enough, as the Composites give you a specific experience

[rceraline]

Hi,

Angular support would be great. In the meantime, I've tried the pure html/css/javascript for call composite and it works fine.

@alkwa-msft My question is related to localization. How do we use the localization provider as described here without react?

Thanks,

[alkwa-msft]

@PorterNan can we wrap the localizationProvider around the component we expose through the vanillaJS bundle?

A problem I foresee is that we can't treeshake and this bundle would include string for every locale?

@rceraline if we exposed the structure of local strings we are expecting would you be able to pass in a JSON with the locale strings that we expect to use?

[rceraline]

@alkwa-msft the best would be to be able to change the language easily as explained in the react doc but in the meantime yes, if I can pass a JSON with the locale strings it would already be OK for me.

[rceraline]

Hi @alkwa-msft, I was able to translate the component but it seems that some translations are missing. I created a new issue to explain: https://github.com/Azure/communication-ui-library/issues/1041

[anjulgarg]

Closing this issue as all the concerns have either been resolved or new items have been created to resolve them in the future.