diff --git a/docs/components/format-bytes.md b/docs/components/format-bytes.md index 1f7be98377..8eda45bfd2 100644 --- a/docs/components/format-bytes.md +++ b/docs/components/format-bytes.md @@ -101,13 +101,13 @@ const App = () => ( ### Localization -Use the `locale` attribute to set the number formatting locale. +Use the `lang` attribute to set the number formatting locale. ```html preview -
-
-
- +
+
+
+ ``` ```jsx react @@ -115,10 +115,10 @@ import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> -
-
-
- +
+
+
+ ); ``` diff --git a/docs/components/format-date.md b/docs/components/format-date.md index 7d7ff8c776..39d016c93b 100644 --- a/docs/components/format-date.md +++ b/docs/components/format-date.md @@ -97,12 +97,12 @@ const App = () => ( ### Localization -Use the `locale` attribute to set the date/time formatting locale. +Use the `lang` attribute to set the date/time formatting locale. ```html preview -English:
-French:
-Russian: +English:
+French:
+Russian: ``` ```jsx react @@ -110,9 +110,9 @@ import { SlFormatDate } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - English:
- French:
- Russian: + English:
+ French:
+ Russian: ); ``` diff --git a/docs/components/format-number.md b/docs/components/format-number.md index 6b9f9847d9..1188cbca0e 100644 --- a/docs/components/format-number.md +++ b/docs/components/format-number.md @@ -75,12 +75,12 @@ const App = () => ( ### Localization -Use the `locale` attribute to set the number formatting locale. +Use the `lang` attribute to set the number formatting locale. ```html preview -English:
-German:
-Russian: +English:
+German:
+Russian: ``` ```jsx react @@ -88,23 +88,23 @@ import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - English:
- German:
- Russian: + English:
+ German:
+ Russian: ); ``` ### Currency -To format a number as a monetary value, set the `type` attribute to `currency` and set the `currency` attribute to the desired ISO 4217 currency code. You should also specify `locale` to ensure the the number is formatted correctly for the target locale. +To format a number as a monetary value, set the `type` attribute to `currency` and set the `currency` attribute to the desired ISO 4217 currency code. You should also specify `lang` to ensure the the number is formatted correctly for the target locale. ```html preview -
-
-
-
- +
+
+
+
+ ``` ```jsx react @@ -112,11 +112,11 @@ import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> -
-
-
-
- +
+
+
+
+ ); ``` diff --git a/docs/components/relative-time.md b/docs/components/relative-time.md index 4f0bd89489..e8987d9a86 100644 --- a/docs/components/relative-time.md +++ b/docs/components/relative-time.md @@ -78,14 +78,14 @@ const App = () => ( ### Localization -Use the `locale` attribute to set the desired locale. +Use the `lang` attribute to set the desired locale. ```html preview -English:
-Chinese:
-German:
-Greek:
-Russian: +English:
+Chinese:
+German:
+Greek:
+Russian: ``` ```jsx react @@ -93,11 +93,11 @@ import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - English:
- Chinese:
- German:
- Greek:
- Russian: + English:
+ Chinese:
+ German:
+ Greek:
+ Russian: ); ``` diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 000bf23dc8..dbf37cb126 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next +- 🚨 BREAKING: changed the `locale` attribute to `lang` in ``, ``, ``, and `` to be consistent with how localization will be handled - CodePen examples will now open in light or dark depending on your current preference - Fixed a bug where tag names weren't being generated in `vscode.html-custom-data.json` [#593](https://github.com/shoelace-style/shoelace/pull/593) - Fixed a bug in `` where the tooltip wouldn't reposition when content changed diff --git a/src/components/format-bytes/format-bytes.ts b/src/components/format-bytes/format-bytes.ts index 8696bfdd90..4cdf24000c 100644 --- a/src/components/format-bytes/format-bytes.ts +++ b/src/components/format-bytes/format-bytes.ts @@ -15,12 +15,12 @@ export default class SlFormatBytes extends LitElement { @property() unit: 'bytes' | 'bits' = 'bytes'; /** The locale to use when formatting the number. */ - @property() locale: string; + @property() lang: string; render() { return formatBytes(this.value, { unit: this.unit, - locale: this.locale + lang: this.lang }); } } diff --git a/src/components/format-date/format-date.ts b/src/components/format-date/format-date.ts index c90a339e76..750e948663 100644 --- a/src/components/format-date/format-date.ts +++ b/src/components/format-date/format-date.ts @@ -11,7 +11,7 @@ export default class SlFormatDate extends LitElement { @property() date: Date | string = new Date(); /** The locale to use when formatting the date/time. */ - @property() locale: string; + @property() lang: string; /** The format for displaying the weekday. */ @property() weekday: 'narrow' | 'short' | 'long'; @@ -55,7 +55,7 @@ export default class SlFormatDate extends LitElement { return; } - return new Intl.DateTimeFormat(this.locale, { + return new Intl.DateTimeFormat(this.lang, { weekday: this.weekday, era: this.era, year: this.year, diff --git a/src/components/format-number/format-number.ts b/src/components/format-number/format-number.ts index 66533708ab..8b8dd32ca6 100644 --- a/src/components/format-number/format-number.ts +++ b/src/components/format-number/format-number.ts @@ -11,7 +11,7 @@ export default class SlFormatNumber extends LitElement { @property({ type: Number }) value = 0; /** The locale to use when formatting the number. */ - @property() locale: string; + @property() lang: string; /** The formatting style to use. */ @property() type: 'currency' | 'decimal' | 'percent' = 'decimal'; @@ -45,7 +45,7 @@ export default class SlFormatNumber extends LitElement { return ''; } - return new Intl.NumberFormat(this.locale, { + return new Intl.NumberFormat(this.lang, { style: this.type, currency: this.currency, currencyDisplay: this.currencyDisplay, diff --git a/src/components/relative-time/relative-time.ts b/src/components/relative-time/relative-time.ts index 86b15a5c23..9898f84b96 100644 --- a/src/components/relative-time/relative-time.ts +++ b/src/components/relative-time/relative-time.ts @@ -18,7 +18,7 @@ export default class SlRelativeTime extends LitElement { @property() date: Date | string; /** The locale to use when formatting the number. */ - @property() locale: string; + @property() lang: string; /** The formatting style to use. */ @property() format: 'long' | 'short' | 'narrow' = 'long'; @@ -38,7 +38,7 @@ export default class SlRelativeTime extends LitElement { } @watch('date') - @watch('locale') + @watch('lang') @watch('format') @watch('numeric') @watch('sync') @@ -65,7 +65,7 @@ export default class SlRelativeTime extends LitElement { const { unit, value } = availableUnits.find(unit => Math.abs(diff) < unit.max) as any; this.isoTime = date.toISOString(); - this.titleTime = new Intl.DateTimeFormat(this.locale, { + this.titleTime = new Intl.DateTimeFormat(this.lang, { month: 'long', year: 'numeric', day: 'numeric', @@ -74,7 +74,7 @@ export default class SlRelativeTime extends LitElement { timeZoneName: 'short' }).format(date); - this.relativeTime = new Intl.RelativeTimeFormat(this.locale, { + this.relativeTime = new Intl.RelativeTimeFormat(this.lang, { numeric: this.numeric, style: this.format }).format(Math.round(diff / value), unit); diff --git a/src/internal/number.ts b/src/internal/number.ts index ce8b4033b3..b719c674c3 100644 --- a/src/internal/number.ts +++ b/src/internal/number.ts @@ -5,7 +5,7 @@ export function formatBytes(bytes: number, options: FormatBytesOptions) { options = Object.assign( { unit: 'bytes', - locale: undefined + lang: undefined }, options ); @@ -20,7 +20,7 @@ export function formatBytes(bytes: number, options: FormatBytesOptions) { const i = Math.min(Math.floor(Math.log10(bytes) / 3), units.length - 1); const num = Number((bytes / Math.pow(1000, i)).toPrecision(3)); - const numString = num.toLocaleString(options.locale); + const numString = num.toLocaleString(options.lang); const prefix = isNegative ? '-' : ''; return `${prefix}${numString} ${units[i]}`; @@ -28,5 +28,5 @@ export function formatBytes(bytes: number, options: FormatBytesOptions) { interface FormatBytesOptions { unit?: 'bytes' | 'bits'; - locale?: string; + lang?: string; }