[Creator Starter Kit] BUG: Cannot Modify Elevation Component

[jordanbardwell]

Describe the bug There is no way to modify the elevation component. The elevation component is not able to be modified from the Canvas Template app. The only way you can modify the component is if you import it from the Canvas Reference app or re-create the component manually.

It would be useful to be able to edit it, make text components like the reference app has, or include all of the elevation text components from the reference app into the template.

To Reproduce Steps to reproduce the behavior:

1. Add the canvas template app to an unmanaged solution
2. Edit the app and save as
3. Go to the controls screen within the app and try to edit the elevation component.
4. There is no edit option like some of the other components.

Expected behavior Expected to be able to modify the elevation component in the Canvas Template App to create custom elevation components like the ones on the reference app that have htmltext in it.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS
• Browser Edge
• Version 103

Additional context Add any other context about the problem here.

[scottdurow]

Hi @jordanbardwell Thanks for helping with the Creator Kit! There are two types of component in the Creator Kit:

• Code components
• Canvas components

You can see which component is which by using the Insert menu

The elevation component is a code component which is written in TypeScript which is why you don't have the option to edit it. It implements the elevation style as defined by the Fluent UI guide https://developer.microsoft.com/en-us/fluentui#/styles/web/elevation

If you wanted to use the elevation component in a canvas component inside your app similar to the reference app, you would:

1. Open Tree View -> Components -> New component
2. Insert -> Code components -> Fluent Elevation. If you were creating a new app without using the template, you would first use Insert -> Custom -> Import component -> Code tab -> Fluent Elevation -> Import so that the elevation component is added to the list of available code components.
3. You can now create the rest of your canvas component using the Elevation component as part of it to create a similar to the TextPanel component to the Reference App:

Hope this helps!