diff --git a/packages/meter/src/Meter.ts b/packages/meter/src/Meter.ts index 1566ee25c5..cb2201d9c2 100644 --- a/packages/meter/src/Meter.ts +++ b/packages/meter/src/Meter.ts @@ -21,6 +21,7 @@ import { import { property } from '@spectrum-web-components/base/src/decorators.js'; import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js'; +import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js'; import '@spectrum-web-components/field-label/sp-field-label.js'; import styles from './meter.css.js'; @@ -52,6 +53,8 @@ export class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, '')) { @property({ type: String, reflect: true }) public label = ''; + private languageResolver = new LanguageResolutionController(this); + @property({ type: Boolean, reflect: true, attribute: 'side-label' }) // called sideLabel public sideLabel = false; @@ -66,7 +69,10 @@ export class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, '')) { ${this.label} - ${this.progress}% + ${new Intl.NumberFormat(this.languageResolver.language, { + style: 'percent', + unitDisplay: 'narrow', + }).format(this.progress / 100)}
{ testForLitDevWarnings( @@ -87,4 +88,32 @@ describe('Meter', () => { expect(el.hasAttribute('aria-valuenow')).to.be.true; expect(el.getAttribute('aria-valuenow')).to.equal('100'); }); + + it('resolves a language (en-US)', async () => { + const [languageContext] = createLanguageContext('en-US'); + const test = await fixture(html` +
+ +
+ `); + const el = test.querySelector('sp-meter') as Meter; + const percentage = el.shadowRoot.querySelector( + '.percentage' + ) as HTMLElement; + expect(percentage.textContent?.search('%')).to.not.equal(-1); + }); + + it('resolves a language (ar-sa)', async () => { + const [languageContext] = createLanguageContext('ar-sa'); + const test = await fixture(html` +
+ +
+ `); + const el = test.querySelector('sp-meter') as Meter; + const percentage = el.shadowRoot.querySelector( + '.percentage' + ) as HTMLElement; + expect(percentage.textContent?.search('٪')).to.not.equal(-1); + }); }); diff --git a/packages/progress-bar/src/ProgressBar.ts b/packages/progress-bar/src/ProgressBar.ts index a34b21d566..9eb54605d1 100644 --- a/packages/progress-bar/src/ProgressBar.ts +++ b/packages/progress-bar/src/ProgressBar.ts @@ -20,6 +20,7 @@ import { } from '@spectrum-web-components/base'; import { property } from '@spectrum-web-components/base/src/decorators.js'; +import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js'; import '@spectrum-web-components/field-label/sp-field-label.js'; import styles from './progress-bar.css.js'; @@ -37,6 +38,8 @@ export class ProgressBar extends SizedMixin(SpectrumElement) { @property({ type: String }) public label = ''; + private languageResolver = new LanguageResolutionController(this); + @property({ type: Boolean, reflect: true, attribute: 'over-background' }) public overBackground = false; @@ -63,7 +66,13 @@ export class ProgressBar extends SizedMixin(SpectrumElement) { size=${this.size} class="percentage" > - ${this.progress}% + ${new Intl.NumberFormat( + this.languageResolver.language, + { + style: 'percent', + unitDisplay: 'narrow', + } + ).format(this.progress / 100)} `} ` diff --git a/packages/progress-bar/test/progress-bar.test.ts b/packages/progress-bar/test/progress-bar.test.ts index 81bba7a19b..9272d0d58c 100644 --- a/packages/progress-bar/test/progress-bar.test.ts +++ b/packages/progress-bar/test/progress-bar.test.ts @@ -16,6 +16,7 @@ import '@spectrum-web-components/progress-bar/sp-progress-bar.js'; import { ProgressBar } from '@spectrum-web-components/progress-bar'; import { stub } from 'sinon'; import { testForLitDevWarnings } from '../../../test/testing-helpers.js'; +import { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js'; describe('ProgressBar', () => { testForLitDevWarnings( @@ -127,4 +128,38 @@ describe('ProgressBar', () => { }); consoleWarnStub.restore(); }); + + it('resolves a language (en-US)', async () => { + const [languageContext] = createLanguageContext('en-US'); + const test = await fixture(html` +
+ +
+ `); + const el = test.querySelector('sp-progress-bar') as ProgressBar; + const percentage = el.shadowRoot.querySelector( + '.percentage' + ) as HTMLElement; + expect(percentage.textContent?.search('%')).to.not.equal(-1); + }); + + it('resolves a language (ar-sa)', async () => { + const [languageContext] = createLanguageContext('ar-sa'); + const test = await fixture(html` +
+ +
+ `); + const el = test.querySelector('sp-progress-bar') as ProgressBar; + const percentage = el.shadowRoot.querySelector( + '.percentage' + ) as HTMLElement; + expect(percentage.textContent?.search('٪')).to.not.equal(-1); + }); });