[calcite-loader] Customization of text margin and style

[jasdelreyes]

Description

Ability to customize the spacing of the text from the loader and loading text and the style of text (i.e. make bold). Currently, if there is long text used as the loading text, the text appears too close to the loader.

Acceptance Criteria

Prop to style the text
Prop to change the margin between text and loader (currently, the default margin of the loader from any other HTML elements is quite large, so adding a text div separately to customize text is unfeasible).

Relevant Info

No response

Which Component

calcite-loader

Example Use Case

No response

Priority impact

p2 - want for current milestone

Esri team

ArcGIS Online

[geospatialem]

@jasdelreyes Thanks for filing!

There may be some customization/workaround while we consider and prioritize the effort using some of loader's styles.

For instance: https://codepen.io/geospatialem/pen/oNPOgKO, where you can change the font-weight of the text prop:

calcite-loader {
  font-weight: var(--calcite-font-weight-bold);
}

Perhaps even if you did want to try adding in separate text to achieve a specific font-size, could use the --calcite-loader-padding set to 0 to remove padding:

<calcite-loader label="Adjusting polygons..."></calcite-loader>
<div id="loader-text">Adjusting polygons...</div>

calcite-loader {
  --calcite-loader-padding: 0;
}

#loader-text {
  font-size: var(--calcite-font-size-3);
  font-weight: var(--calcite-font-weight-bold);
  text-align: center;
  margin: 2rem 0rem;
}

[macandcheese]

Related: #4470

[alisonailea]

requires creating a --calcite-loader-text-space and --calcite-loader-text-weight variables.
This should be pretty easy.

[github-actions]

Installed and assigned for verification.

[DitwanP]

Verified