Bug: [RTL calcite-slider] displays negative numbers with minus signs after numbers

[caripizza]

Actual Behavior

When a calcite-slider sits on an rtl page, it displays negative values with hyphens after the tick-label and handle-label numbers. (Ex: 10-)

Negative values should have their minus sign before the number, regardless of dir on the page.

Also reported by the Maps SDK for JS team on 1/2/2024:

Minus sign displays to the right of the number when ticks is set to a number and labelTicks is enabled cc @gopal-y

<div dir="rtl">
  <calcite-slider
    label-ticks="true"
    max="10"
    min="-10"
    ticks="5"
    value="5"
   />
</div>

Expected Behavior

When a calcite-slider sits on an rtl page, it displays negative values with hyphens before the tick-label and handle-label numbers. (Ex: -10)

from the Maps SDK team:

Minus sign displays to the right of the number when ticks is set to a number and labelTicks is enabled

Reproduction Steps and Sample

Updated to 2.1.0 Codepen: https://codepen.io/im-the-developer/pen/KKEdEQX

This can be reproduced by

1. setting up the container direction to rtl
2. setting label-ticks="true", a range using min and max

Previous reported Codepen - https://codepen.io/caripizza-the-animator/pen/powMWYZ

Sample:

1. Add calcite-slider to an rtl page (ie., html tag has dir="rtl" attribute value)
2. Ensure the slider has negative values, and includes the label-ticks or label-handles attributes so labels display
3. Notice the minus signs for the negative values appear on the right-hand side of the number

Relevant Info

• This behavior occurs in RTL languages.

• This behavior also occurs on FF/Edge Chromium/Safari browsers.

• [x] CDN
• [ ] NPM package

[jcfranco]

@babakbolour For this case, can we hardcode the direction of numbers with their respective symbols to be LTR (using the LTR mark character) or do they need special handling for RTL?

[babakbolour]

@raje9276 what does CLDR say?

[babakbolour]

one comment I have, if we are ONLY display the digits in western numbers, then I dont think the negative sign position matter as much. However if you are display the number using indic/native digits, then the negative sign position may matter.

[raje9276]

@jcfranco you are correct to fix the issue when using the western number we need to add LTR marker.

Negative sign is a direction neutral string it comes first then followed by the Latin numbers which are LTR

As per CLDR it should same as English.

[hcampos-professional]

Note that this also applies to <calcite-input> and not only <calcite-slider>. We just noticed the same thing in the Editor widget and the editing tooltips we display in the Maps SDK for JavaScript.

See https://codepen.io/hccampos/pen/XWGvyRZ

[gsoosalu]

Another question from the Maps SDK for JavaScript about the <calcite-input>.

Is it the expected RTL UX that while typing in a number, the blinking cursor is shown at the left - i.e. not where the new numbers are added? (see attached video)

https://github.com/Esri/calcite-design-system/assets/85623288/93266f47-7aa3-4ae3-92ad-1b22f776f84e

Also, that the decimals separator is shown for a moment on the left, and later "jumps" to the right?

[babakbolour]

@brittneytewks @gsoosalu as for the negative sign, it should display to the right if the number is Indic representation. if it is shown as Western digits, then the negative sign can be to the left. wert the cursor movement, if it can be fixed so the cursor follows the direction of numbers being added, then great. However this is not a must! We have seen many non-Esri softwares that also behaves like ours currently. so it can be considered as expected. @annierm18