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;
}