Sketch Tool Rounded Buttons

Question

Hi guys,

We are using the ArcGIS Javascript API 4.x Sketch control and we have noticed that it is built using the new Esri calcite design style.

Questions:

1. How can we change the buttons of each tool to be rounded on your default sketch sample?

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=sketch-geometries

2. Is this the style pattern that all widget controls will follow going forward or is this just an exception? We have noticed that all other controls don't follow the same approach.

Cheers,

Jose

dimesv · Answer

Hi @JoseBanuelos,

Thanks for coming back to me promptly. Most of our development consists in embedding a custom GIS web app inside another system e.g. SAP, Salesforce etc.

So we do have to comply with the enterprise standards and design guidelines in place. Salesforce as an example, have their own lightning scss SDK. Unlike Calcite, they allow us to customize their controls a lot further. So our app needs to conform to their design standard not the other way around. It's just the nature of enterprise apps.

The things we typically have to change are:

* Radius
* Border Color
* Background Color
* Foreground Color
* Image
* Font Family
* Font-Weight
* Font-Style
* Width
* Height
* Padding
* Margin
* Text Size
* Text Alignment
* Display (e.g. block, none, flex, etc.)
* Position (absolute, relative etc.)

Can you evaluate with your team to see if these properties can be made available for us to override from the app level?

Also, if we use arcgis-cli to generate a custom theme and we add it to the app using:

Will this allow us to override the widget settings? Or for now, we will never be able to override them?

Cheers,

Jose Sousa

Esri NZ

JoseBanuelos · Answer

Hello @JoseSousa1 ,

Since the Sketch widget is using calcite as of version 4.21, it is not possible to override most of the widget's css. This is because Calcite is using web components. There are some minor styling changes you can make. For instance, here is a previous post where a solution was provided to update the Sketch button's background color.

https://community.esri.com/t5/arcgis-api-for-javascript-questions/sketch-widget-in-4-21-how-to-change-color-and-size/m-p/1105607/highlight/true#M74906

However, updating the Sketch buttons to be rounded would not be something that would be possible without access to the widget's internal components, which is not available at the app level.

We plan on updating the JSAPI widgets to use Calcite gradually through future releases. Also, we are planning to release some documentation in the near future to explain this and demonstrate what is possible to override with the new calcite design system.

This is good feedback in regards to how our users are planning to override the Sketch widget's default css. I will take note of this as we continue to discuss what we make available in the widgets to override.

Thanks,

Jose