diff --git a/documentation/guides/migrating-from-v11-to-v12.md b/documentation/guides/migrating-from-v11-to-v12.md index 37ab33e7115..f32200ce610 100644 --- a/documentation/guides/migrating-from-v11-to-v12.md +++ b/documentation/guides/migrating-from-v11-to-v12.md @@ -8,6 +8,12 @@ Polaris v12.0.0 ([full release notes](https://github.com/Shopify/polaris/release ## Quick migration guide +**Badge** + +`npx @shopify/polaris-migrator react-rename-component-prop --componentName="Badge" --from="status" --to="tone"` + +`npx @shopify/polaris-migrator react-rename-component-prop --componentName="Badge" --from="statusAndProgressLabelOverride" --to="toneAndProgressLabelOverride"` + **Layout.Section** - One third: diff --git a/polaris-react/locales/cs.json b/polaris-react/locales/cs.json index 8797fdf18e5..7e5567360db 100644 --- a/polaris-react/locales/cs.json +++ b/polaris-react/locales/cs.json @@ -14,7 +14,7 @@ "partiallyComplete": "Částečně dokončeno", "complete": "Dokončeno" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Informace", "success": "Úspěch", "warning": "Varování", @@ -24,7 +24,7 @@ "readOnly": "Pouze pro čtení", "enabled": "Aktivováno" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "Zavřít notifikaci" diff --git a/polaris-react/locales/da.json b/polaris-react/locales/da.json index 55b3a9d62bd..51fd5442b1d 100644 --- a/polaris-react/locales/da.json +++ b/polaris-react/locales/da.json @@ -14,7 +14,7 @@ "partiallyComplete": "Delvist fuldført", "complete": "Fuldført" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Info", "success": "Succes", "warning": "Advarsel", @@ -24,7 +24,7 @@ "readOnly": "Skrivebeskyttet", "enabled": "Aktiveret" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "Afvis meddelelse" diff --git a/polaris-react/locales/de.json b/polaris-react/locales/de.json index 0e2e8685088..fbcf7e0a5b8 100644 --- a/polaris-react/locales/de.json +++ b/polaris-react/locales/de.json @@ -14,7 +14,7 @@ "partiallyComplete": "Teilweise abgeschlossen", "complete": "Abgeschlossen" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Info", "success": "Erfolg", "warning": "Warnung", @@ -24,7 +24,7 @@ "readOnly": "Schreibgeschützt", "enabled": "Aktiviert" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "Benachrichtigung verwerfen" diff --git a/polaris-react/locales/en.json b/polaris-react/locales/en.json index c6fa5aad0e9..133a633151c 100644 --- a/polaris-react/locales/en.json +++ b/polaris-react/locales/en.json @@ -29,7 +29,7 @@ "partiallyComplete": "Partially complete", "complete": "Complete" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Info", "success": "Success", "warning": "Warning", @@ -39,7 +39,7 @@ "readOnly": "Read-only", "enabled": "Enabled" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{toneLabel} {progressLabel}" }, "Banner": { "dismissButton": "Dismiss notification" diff --git a/polaris-react/locales/es.json b/polaris-react/locales/es.json index 7673f8ee2c8..ba5b8578375 100644 --- a/polaris-react/locales/es.json +++ b/polaris-react/locales/es.json @@ -14,7 +14,7 @@ "partiallyComplete": "Parcialmente completado", "complete": "Completado" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Información", "success": "Correcto", "warning": "Advertencia", @@ -24,7 +24,7 @@ "readOnly": "Solo lectura", "enabled": "Activado" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "Descartar notificación" diff --git a/polaris-react/locales/fi.json b/polaris-react/locales/fi.json index 91d447cd895..11ea189df3d 100644 --- a/polaris-react/locales/fi.json +++ b/polaris-react/locales/fi.json @@ -14,7 +14,7 @@ "partiallyComplete": "Osittain valmis", "complete": "Valmis" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Tiedot", "success": "Onnistui", "warning": "Varoitus", @@ -24,7 +24,7 @@ "readOnly": "Vain luku", "enabled": "Otettu käyttöön" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "Ohita ilmoitus" diff --git a/polaris-react/locales/fr.json b/polaris-react/locales/fr.json index d3e00f1954c..fae1c95a457 100644 --- a/polaris-react/locales/fr.json +++ b/polaris-react/locales/fr.json @@ -14,7 +14,7 @@ "partiallyComplete": "Partiellement terminé", "complete": "Terminé" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Informations", "success": "Réussite", "warning": "Avertissement", @@ -24,7 +24,7 @@ "readOnly": "Lecture seule", "enabled": "Activé" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "Rejeter la notification" diff --git a/polaris-react/locales/it.json b/polaris-react/locales/it.json index cd7bcf1c264..c012f457f29 100644 --- a/polaris-react/locales/it.json +++ b/polaris-react/locales/it.json @@ -14,7 +14,7 @@ "partiallyComplete": "Parzialmente completo", "complete": "Completo" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Info", "success": "Avvenuto", "warning": "Avvertimento", @@ -24,7 +24,7 @@ "readOnly": "Sola lettura", "enabled": "Abilitato" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "Elimina notifica" diff --git a/polaris-react/locales/ja.json b/polaris-react/locales/ja.json index ae6d4dac5d9..defc66e4a77 100644 --- a/polaris-react/locales/ja.json +++ b/polaris-react/locales/ja.json @@ -14,7 +14,7 @@ "partiallyComplete": "一部完了済み", "complete": "完了" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "情報", "success": "成功しました", "warning": "警告", @@ -24,7 +24,7 @@ "readOnly": "読み取り専用", "enabled": "有効" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "通知を閉じる" diff --git a/polaris-react/locales/ko.json b/polaris-react/locales/ko.json index 5ad7128185e..f04048d7904 100644 --- a/polaris-react/locales/ko.json +++ b/polaris-react/locales/ko.json @@ -14,7 +14,7 @@ "partiallyComplete": "일부 완료", "complete": "완료" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "정보", "success": "성공", "warning": "경고", @@ -24,7 +24,7 @@ "readOnly": "읽기 전용", "enabled": "활성화됨" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "알림 무시" diff --git a/polaris-react/locales/nb.json b/polaris-react/locales/nb.json index ebf0822bd0f..7cd5da72281 100644 --- a/polaris-react/locales/nb.json +++ b/polaris-react/locales/nb.json @@ -14,7 +14,7 @@ "partiallyComplete": "Delvis fullført", "complete": "Ferdig" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Info", "success": "Vellykket", "warning": "Advarsel", @@ -24,7 +24,7 @@ "readOnly": "Kun lesetilgang", "enabled": "Aktivert" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "Avvis varsel" diff --git a/polaris-react/locales/nl.json b/polaris-react/locales/nl.json index 348326e1cda..ba48bd0b19c 100644 --- a/polaris-react/locales/nl.json +++ b/polaris-react/locales/nl.json @@ -14,7 +14,7 @@ "partiallyComplete": "Gedeeltelijk voltooid", "complete": "Voltooid" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Info", "success": "Geslaagd", "warning": "Waarschuwing", @@ -24,7 +24,7 @@ "readOnly": "Alleen-lezen", "enabled": "Ingeschakeld" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "Melding sluiten" diff --git a/polaris-react/locales/pl.json b/polaris-react/locales/pl.json index 18c48587b36..7142c1c2792 100644 --- a/polaris-react/locales/pl.json +++ b/polaris-react/locales/pl.json @@ -14,7 +14,7 @@ "partiallyComplete": "Częściowo kompletne", "complete": "Zakończ" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Informacja", "success": "Udało się", "warning": "Ostrzeżenie", @@ -24,7 +24,7 @@ "readOnly": "Tylko do odczytu", "enabled": "Włączone" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "Odrzuć powiadomienie" diff --git a/polaris-react/locales/pt-BR.json b/polaris-react/locales/pt-BR.json index 907993c9329..af4f5fe206b 100644 --- a/polaris-react/locales/pt-BR.json +++ b/polaris-react/locales/pt-BR.json @@ -14,7 +14,7 @@ "partiallyComplete": "Parcialmente completo", "complete": "Concluir" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Informações", "success": "Sucesso", "warning": "Aviso", @@ -24,7 +24,7 @@ "readOnly": "Somente de leitura", "enabled": "Habilitado" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "Dispensar notificação" diff --git a/polaris-react/locales/pt-PT.json b/polaris-react/locales/pt-PT.json index 3b3dda973d6..dce6c110672 100644 --- a/polaris-react/locales/pt-PT.json +++ b/polaris-react/locales/pt-PT.json @@ -14,7 +14,7 @@ "partiallyComplete": "Parcialmente concluído", "complete": "Concluído" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Informações", "success": "Sucesso", "warning": "Aviso", @@ -24,7 +24,7 @@ "readOnly": "Só de leitura", "enabled": "Ativado" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "Ignorar notificação" diff --git a/polaris-react/locales/sv.json b/polaris-react/locales/sv.json index d51f7a63009..35f309bdc61 100644 --- a/polaris-react/locales/sv.json +++ b/polaris-react/locales/sv.json @@ -14,7 +14,7 @@ "partiallyComplete": "Delvis slutförd", "complete": "Slutförd" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Info", "success": "Lyckades", "warning": "Varning", @@ -24,7 +24,7 @@ "readOnly": "Skrivskyddad", "enabled": "Aktiverat" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "Avvisa avisering" diff --git a/polaris-react/locales/th.json b/polaris-react/locales/th.json index 1dd63330cff..f85bc83d740 100644 --- a/polaris-react/locales/th.json +++ b/polaris-react/locales/th.json @@ -14,7 +14,7 @@ "partiallyComplete": "เสร็จสมบูรณ์แล้วบางส่วน", "complete": "เสร็จสมบูรณ์" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "ข้อมูล", "success": "สำเร็จ", "warning": "คำเตือน", @@ -24,7 +24,7 @@ "readOnly": "อ่านอย่างเดียว", "enabled": "เปิดใช้แล้ว" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "ปิดการแจ้งเตือน" diff --git a/polaris-react/locales/tr.json b/polaris-react/locales/tr.json index 47f60f4d4e7..fa88a293cd5 100644 --- a/polaris-react/locales/tr.json +++ b/polaris-react/locales/tr.json @@ -14,7 +14,7 @@ "partiallyComplete": "Kısmen tamamlandı", "complete": "Tamamlandı" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Bilgi", "success": "Başarılı", "warning": "Uyarı", @@ -24,7 +24,7 @@ "readOnly": "Salt okunur", "enabled": "Etkinleştirildi" }, - "progressAndStatus": "{statusLabel} - {progressLabel}" + "progressAndTone": "{statusLabel} - {progressLabel}" }, "Banner": { "dismissButton": "Bildirimi kapat" diff --git a/polaris-react/locales/vi.json b/polaris-react/locales/vi.json index afd3ed40beb..fd6d2cb91a0 100644 --- a/polaris-react/locales/vi.json +++ b/polaris-react/locales/vi.json @@ -14,7 +14,7 @@ "partiallyComplete": "Hoàn tất một phần", "complete": "Hoàn tất" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "Thông tin", "success": "Thành công", "warning": "Cảnh báo", @@ -24,7 +24,7 @@ "readOnly": "Chỉ đọc", "enabled": "Đã bật" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "Bỏ qua thông báo" diff --git a/polaris-react/locales/zh-CN.json b/polaris-react/locales/zh-CN.json index 8fc5b042944..6da80955c90 100644 --- a/polaris-react/locales/zh-CN.json +++ b/polaris-react/locales/zh-CN.json @@ -14,7 +14,7 @@ "partiallyComplete": "部分完成", "complete": "完成" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "信息", "success": "成功", "warning": "警告", @@ -24,7 +24,7 @@ "readOnly": "只读", "enabled": "已启用" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "忽略通知" diff --git a/polaris-react/locales/zh-TW.json b/polaris-react/locales/zh-TW.json index f94038499f8..12695682d8a 100644 --- a/polaris-react/locales/zh-TW.json +++ b/polaris-react/locales/zh-TW.json @@ -14,7 +14,7 @@ "partiallyComplete": "部分完成", "complete": "完成" }, - "STATUS_LABELS": { + "TONE_LABELS": { "info": "資訊", "success": "成功", "warning": "警告", @@ -24,7 +24,7 @@ "readOnly": "唯讀", "enabled": "已啟用" }, - "progressAndStatus": "{statusLabel} {progressLabel}" + "progressAndTone": "{statusLabel} {progressLabel}" }, "Banner": { "dismissButton": "關閉通知" diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx index ffb6f1af19c..7023c4178dd 100644 --- a/polaris-react/playground/DetailsPage.tsx +++ b/polaris-react/playground/DetailsPage.tsx @@ -553,7 +553,7 @@ export function DetailsPage() { fullWidth backAction={{content: 'Products', url: '/products/31'}} title={title} - titleMetadata={Success badge} + titleMetadata={Success badge} primaryAction={{ content: 'Save this page', onAction: () => console.log('save'), diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx index 7e75c5309c4..34ab38ef0a8 100644 --- a/polaris-react/src/components/ActionList/components/Item/Item.tsx +++ b/polaris-react/src/components/ActionList/components/Item/Item.tsx @@ -93,7 +93,7 @@ export function Item({ const badgeMarkup = badge && ( - {badge.content} + {badge.content} ); diff --git a/polaris-react/src/components/ActionList/tests/ActionList.test.tsx b/polaris-react/src/components/ActionList/tests/ActionList.test.tsx index f140ee91fb4..7e679c789e6 100644 --- a/polaris-react/src/components/ActionList/tests/ActionList.test.tsx +++ b/polaris-react/src/components/ActionList/tests/ActionList.test.tsx @@ -134,7 +134,7 @@ describe('', () => { const actionList = mountWithApp( ', () => { ); expect(actionList).toContainReactComponent(Badge, { children: 'badge', - status: 'new', + tone: 'new', }); }); diff --git a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx index 3bdbebbefa5..d79214cdc49 100644 --- a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx +++ b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx @@ -59,7 +59,7 @@ export function MappedAction({ const badgeMarkup = badge && ( - {badge.content} + {badge.content} ); diff --git a/polaris-react/src/components/Autocomplete/components/MappedAction/tests/MappedAction.test.tsx b/polaris-react/src/components/Autocomplete/components/MappedAction/tests/MappedAction.test.tsx index a279e646688..a16c1230cab 100644 --- a/polaris-react/src/components/Autocomplete/components/MappedAction/tests/MappedAction.test.tsx +++ b/polaris-react/src/components/Autocomplete/components/MappedAction/tests/MappedAction.test.tsx @@ -10,7 +10,7 @@ import {Icon} from '../../../../Icon'; describe('MappedAction', () => { it('renders badge when provided', () => { const badge = { - status: 'new' as const, + tone: 'new' as const, content: 'new', }; const mappedAction = mountWithListboxProvider( @@ -18,7 +18,7 @@ describe('MappedAction', () => { ); expect(mappedAction).toContainReactComponent(Badge, { - status: badge.status, + tone: badge.tone, children: badge.content, }); }); diff --git a/polaris-react/src/components/Autocomplete/tests/Autocomplete.test.tsx b/polaris-react/src/components/Autocomplete/tests/Autocomplete.test.tsx index bcdbb28ede8..4972ddb103d 100644 --- a/polaris-react/src/components/Autocomplete/tests/Autocomplete.test.tsx +++ b/polaris-react/src/components/Autocomplete/tests/Autocomplete.test.tsx @@ -223,7 +223,7 @@ describe('', () => { disabled: false, destructive: true, badge: { - status: 'new' as const, + tone: 'new' as const, content: 'new', }, }; @@ -250,7 +250,7 @@ describe('', () => { disabled: false, destructive: true, badge: { - status: 'new' as const, + tone: 'new' as const, content: 'new', }, }; diff --git a/polaris-react/src/components/Badge/Badge.scss b/polaris-react/src/components/Badge/Badge.scss index 2d114e4dd46..11b440ea6de 100644 --- a/polaris-react/src/components/Badge/Badge.scss +++ b/polaris-react/src/components/Badge/Badge.scss @@ -23,7 +23,7 @@ } } -.statusSuccess { +.toneSuccess { background-color: var(--p-color-bg-success); color: var(--p-color-text-success); @@ -32,7 +32,7 @@ } } -.statusSuccess-strong-experimental { +.toneSuccess-strong { color: var(--p-color-text-on-color); background-color: var(--p-color-bg-success-strong); @@ -41,7 +41,7 @@ } } -.statusInfo { +.toneInfo { background-color: var(--p-color-bg-info); color: var(--p-color-text-info); @@ -50,7 +50,7 @@ } } -.statusInfo-strong-experimental { +.toneInfo-strong { color: var(--p-color-text-info-strong); background-color: var(--p-color-bg-info-strong); @@ -59,7 +59,7 @@ } } -.statusAttention { +.toneAttention { background-color: var(--p-color-bg-caution); color: var(--p-color-text-caution); @@ -68,7 +68,7 @@ } } -.statusAttention-strong-experimental { +.toneAttention-strong { color: var(--p-color-text-caution-strong); background-color: var(--p-color-bg-caution-strong); @@ -77,7 +77,7 @@ } } -.statusWarning { +.toneWarning { background-color: var(--p-color-bg-warning); color: var(--p-color-text-warning-experimental); @@ -86,7 +86,7 @@ } } -.statusWarning-strong-experimental { +.toneWarning-strong { color: var(--p-color-text-warning-experimental); background-color: var(--p-color-bg-warning-strong-experimental); @@ -95,7 +95,7 @@ } } -.statusCritical { +.toneCritical { background-color: var(--p-color-bg-critical); color: var(--p-color-text-critical); @@ -104,7 +104,7 @@ } } -.statusCritical-strong-experimental { +.toneCritical-strong { color: var(--p-color-text-on-color); background-color: var(--p-color-bg-critical-strong); @@ -113,7 +113,7 @@ } } -.statusNew { +.toneNew { border: none; background-color: var(--p-color-bg-transparent-subdued-experimental); color: var(--p-color-text-subdued); @@ -125,7 +125,7 @@ } } -.statusRead-only-experimental { +.toneRead-only { color: var(--p-color-text-subdued); background-color: transparent; @@ -134,7 +134,7 @@ } } -.statusEnabled-experimental { +.toneEnabled { color: var(--p-color-text); svg { @@ -142,7 +142,7 @@ } } -.sizeLarge-experimental { +.sizeLarge { padding: var(--p-space-1) var(--p-space-2); } @@ -160,7 +160,7 @@ vertical-align: top; } - .sizeLarge-experimental & { + .sizeLarge & { margin: 0 var(--p-space-1) 0 calc(-1 * var(--p-space-05)); } diff --git a/polaris-react/src/components/Badge/Badge.stories.tsx b/polaris-react/src/components/Badge/Badge.stories.tsx index 543a75328fd..15238cf908a 100644 --- a/polaris-react/src/components/Badge/Badge.stories.tsx +++ b/polaris-react/src/components/Badge/Badge.stories.tsx @@ -21,32 +21,32 @@ export function Default() { } export function Informational() { - return Draft; + return Draft; } export function Success() { - return Active; + return Active; } export function Attention() { - return Open; + return Open; } export function Warning() { - return On hold; + return On hold; } export function Critical() { - return Action required; + return Action required; } export function New() { - return Fulfilled; + return Fulfilled; } export function Incomplete() { return ( - + Unfulfilled ); @@ -54,7 +54,7 @@ export function Incomplete() { export function PartiallyComplete() { return ( - + Partially fulfilled ); @@ -64,12 +64,12 @@ export function Complete() { return Fulfilled; } -export function WithStatusAndProgressLabelOverride() { +export function WithToneAndProgressLabelOverride() { return ( Published @@ -87,8 +87,8 @@ const TempIcon = () => ( ); -const statuses: { - [S in 'default' | NonNullable]: string; +const tones: { + [S in 'default' | NonNullable]: string; } = { default: 'Neutral', info: 'Info', @@ -97,16 +97,16 @@ const statuses: { attention: 'Attention', critical: 'Critical', new: 'New', - 'read-only-experimental': 'Read-only', - 'enabled-experimental': 'Enabled', - 'info-strong-experimental': 'Info', - 'success-strong-experimental': 'Success', - 'warning-strong-experimental': 'Warning', - 'attention-strong-experimental': 'Attention', - 'critical-strong-experimental': 'Critical', + 'read-only': 'Read-only', + enabled: 'Enabled', + 'info-strong': 'Info', + 'success-strong': 'Success', + 'warning-strong': 'Warning', + 'attention-strong': 'Attention', + 'critical-strong': 'Critical', }; -const statusEntries = Object.entries(statuses) as Entries; +const toneEntries = Object.entries(tones) as Entries; const progresses: { [P in NonNullable]: string; @@ -124,7 +124,7 @@ const sizes: { [P in Exclude, 'small'>]: string; } = { medium: 'Medium', - 'large-experimental': 'Large', + large: 'Large', }; const sizeEntries = Object.entries(sizes) as Entries; @@ -140,54 +140,54 @@ export function All() { - Status only + Tone only - {statusEntries.map(([status, statusLabel]) => ( + {toneEntries.map(([tone, toneLabel]) => ( - {statusLabel} + {toneLabel} ))} - Status with progress + Tone with progress {progressEntries.map(([progress]) => ( - {statusEntries.map(([status, statusLabel]) => ( + {toneEntries.map(([tone, toneLabel]) => ( - {statusLabel} + {toneLabel} ))} ))} {/* Remove `size` condition when micro icons are available */} - {size === 'large-experimental' && ( + {size === 'large' && ( - Status with icon + Tone with icon - {statusEntries.map(([status, statusLabel]) => ( + {toneEntries.map(([tone, toneLabel]) => ( - {statusLabel} + {toneLabel} ))} @@ -196,15 +196,15 @@ export function All() { {/* TODO: Re-enable the following examples when designs are available (post se23) */} {/* - Status with icon only + Tone with icon only - {statusEntries.map(([status]) => ( + {toneEntries.map(([tone]) => ( ))} diff --git a/polaris-react/src/components/Badge/Badge.tsx b/polaris-react/src/components/Badge/Badge.tsx index 753db046b39..a176aa347be 100644 --- a/polaris-react/src/components/Badge/Badge.tsx +++ b/polaris-react/src/components/Badge/Badge.tsx @@ -8,7 +8,7 @@ import {Icon} from '../Icon'; import type {IconSource} from '../../types'; import styles from './Badge.scss'; -import type {Progress, Size, Status} from './types'; +import type {Progress, Size, Tone} from './types'; import {Pip} from './components'; import {getDefaultAccessibilityLabel} from './utils'; @@ -16,8 +16,8 @@ const DEFAULT_SIZE: Size = 'medium'; interface NonMutuallyExclusiveProps { /** The content to display inside the badge. */ children?: string; - /** Colors and labels the badge with the given status. */ - status?: Status; + /** Colors and labels the badge with the given tone. */ + tone?: Tone; /** Render a pip showing the progress of a given task. */ progress?: Progress; /** Icon to display to the left of the badge’s content. */ @@ -27,7 +27,7 @@ interface NonMutuallyExclusiveProps { */ size?: Size; /** Pass a custom accessibilityLabel */ - statusAndProgressLabelOverride?: string; + toneAndProgressLabelOverride?: string; } export type BadgeProps = NonMutuallyExclusiveProps & @@ -62,25 +62,25 @@ const progressIconMap: {[P in Progress]: IconSource} = { export function Badge({ children, - status, + tone, progress, icon, size = DEFAULT_SIZE, - statusAndProgressLabelOverride, + toneAndProgressLabelOverride, }: BadgeProps) { const i18n = useI18n(); const withinFilter = useContext(WithinFilterContext); const className = classNames( styles.Badge, - status && styles[variationName('status', status)], + tone && styles[variationName('tone', tone)], size && size !== DEFAULT_SIZE && styles[variationName('size', size)], withinFilter && styles.withinFilter, ); - const accessibilityLabel = statusAndProgressLabelOverride - ? statusAndProgressLabelOverride - : getDefaultAccessibilityLabel(i18n, progress, status); + const accessibilityLabel = toneAndProgressLabelOverride + ? toneAndProgressLabelOverride + : getDefaultAccessibilityLabel(i18n, progress, tone); let accessibilityMarkup = Boolean(accessibilityLabel) && ( @@ -111,7 +111,7 @@ export function Badge({ {children} diff --git a/polaris-react/src/components/Badge/components/Pip/Pip.scss b/polaris-react/src/components/Badge/components/Pip/Pip.scss index f8f84e3b3f6..df80ac5beeb 100644 --- a/polaris-react/src/components/Badge/components/Pip/Pip.scss +++ b/polaris-react/src/components/Badge/components/Pip/Pip.scss @@ -22,32 +22,32 @@ border-width: var(--pc-border-width); } -.statusInfo { +.toneInfo { // stylelint-disable-next-line -- Polaris component custom properties --pc-pip-color: var(--p-color-icon-info); } -.statusSuccess { +.toneSuccess { // stylelint-disable-next-line -- Polaris component custom properties --pc-pip-color: var(--p-color-icon-success); } -.statusNew { +.toneNew { // stylelint-disable-next-line -- Polaris component custom properties --pc-pip-color: var(--p-color-text-subdued); } -.statusAttention { +.toneAttention { // stylelint-disable-next-line -- Polaris component custom properties --pc-pip-color: var(--p-color-icon-caution); } -.statusWarning { +.toneWarning { // stylelint-disable-next-line -- Polaris component custom properties --pc-pip-color: var(--p-color-icon-warning); } -.statusCritical { +.toneCritical { // stylelint-disable-next-line -- Polaris component custom properties --pc-pip-color: var(--p-color-icon-critical); } diff --git a/polaris-react/src/components/Badge/components/Pip/Pip.tsx b/polaris-react/src/components/Badge/components/Pip/Pip.tsx index 3faa53632fd..38132c1cba0 100644 --- a/polaris-react/src/components/Badge/components/Pip/Pip.tsx +++ b/polaris-react/src/components/Badge/components/Pip/Pip.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {classNames, variationName} from '../../../../utilities/css'; -import type {Progress, Status} from '../../types'; +import type {Progress, Tone} from '../../types'; import {Text} from '../../../Text'; import {useI18n} from '../../../../utilities/i18n'; import {getDefaultAccessibilityLabel} from '../../utils'; @@ -9,26 +9,26 @@ import {getDefaultAccessibilityLabel} from '../../utils'; import styles from './Pip.scss'; export interface PipProps { - status?: Status; + tone?: Tone; progress?: Progress; accessibilityLabelOverride?: string; } export function Pip({ - status, + tone, progress = 'complete', accessibilityLabelOverride, }: PipProps) { const i18n = useI18n(); const className = classNames( styles.Pip, - status && styles[variationName('status', status)], + tone && styles[variationName('tone', tone)], progress && styles[variationName('progress', progress)], ); const accessibilityLabel = accessibilityLabelOverride ? accessibilityLabelOverride - : getDefaultAccessibilityLabel(i18n, progress, status); + : getDefaultAccessibilityLabel(i18n, progress, tone); return ( diff --git a/polaris-react/src/components/Badge/tests/Badge.test.tsx b/polaris-react/src/components/Badge/tests/Badge.test.tsx index 825aff346fc..1cdbca5ec84 100644 --- a/polaris-react/src/components/Badge/tests/Badge.test.tsx +++ b/polaris-react/src/components/Badge/tests/Badge.test.tsx @@ -12,8 +12,8 @@ describe('', () => { expect(badge.text()).toBe('Badge test'); }); - it('accepts a status prop and renders a visually hidden label', () => { - const badge = mountWithApp(); + it('accepts a tone prop and renders a visually hidden label', () => { + const badge = mountWithApp(); expect(badge).toContainReactComponent(Text, {visuallyHidden: true}); }); @@ -22,9 +22,9 @@ describe('', () => { expect(badge).toContainReactComponent(Text, {visuallyHidden: true}); }); - it('renders progress and status labels in the same element', () => { + it('renders progress and tone labels in the same element', () => { const badge = mountWithApp( - , + , ); expect(badge).toContainReactComponentTimes(Text, 1, { @@ -34,7 +34,7 @@ describe('', () => { }); it('does not add pip styles when progress is not provided', () => { - const badge = mountWithApp(); + const badge = mountWithApp(); expect(badge).not.toContainReactComponent(Icon); }); @@ -45,7 +45,7 @@ describe('', () => { }); it('does not render an icon when icon is not provided', () => { - const badge = mountWithApp(); + const badge = mountWithApp(); expect(badge).not.toContainReactComponent(Icon); }); @@ -73,13 +73,13 @@ describe('', () => { }); }); - it('renders with a custom accessibilityLabel when a `statusAndProgressLabelOverride` is provided', () => { + it('renders with a custom accessibilityLabel when a `toneAndProgressLabelOverride` is provided', () => { const mockAccessibilityLabel = 'mock accessibilityLabel'; const badge = mountWithApp( , ); @@ -89,13 +89,13 @@ describe('', () => { }); }); - it('does not render progress or status accessibility labels when a `statusAndProgressLabelOverride` is provided', () => { + it('does not render progress or tone accessibility labels when a `toneAndProgressLabelOverride` is provided', () => { const mockAccessibilityLabel = 'mock accessibilityLabel'; const badge = mountWithApp( , ); @@ -105,10 +105,8 @@ describe('', () => { }); }); - it('renders default accessibility label when `statusAndProgressLabelOverride` is not provided', () => { - let badge = mountWithApp( - , - ); + it('renders default accessibility label when `toneAndProgressLabelOverride` is not provided', () => { + let badge = mountWithApp(); expect(badge).toContainReactComponent(Text, { children: 'Attention Incomplete', @@ -122,7 +120,7 @@ describe('', () => { visuallyHidden: true, }); - badge = mountWithApp(); + badge = mountWithApp(); expect(badge).toContainReactComponent(Text, { children: 'Attention', @@ -136,9 +134,9 @@ describe('', () => { }); describe('', () => { - it('renders default accessibility label when `statusAndProgressLabelOverride` is not provided', () => { + it('renders default accessibility label when `toneAndProgressLabelOverride` is not provided', () => { let badge = mountWithApp( - , + , ); expect(badge).toContainReactComponent(Text, { @@ -153,7 +151,7 @@ describe('', () => { visuallyHidden: true, }); - badge = mountWithApp(); + badge = mountWithApp(); expect(badge).toContainReactComponent(Text, { children: 'Attention Complete', diff --git a/polaris-react/src/components/Badge/types.ts b/polaris-react/src/components/Badge/types.ts index fcfd684afcc..5d6b250040b 100644 --- a/polaris-react/src/components/Badge/types.ts +++ b/polaris-react/src/components/Badge/types.ts @@ -1,36 +1,32 @@ -import type {Experimental} from '../../types'; - -export type Status = +export type Tone = | 'info' | 'success' | 'warning' | 'critical' | 'attention' | 'new' - | Experimental< - | 'info-strong' - | 'success-strong' - | 'warning-strong' - | 'critical-strong' - | 'attention-strong' - | 'read-only' - | 'enabled' - >; + | 'info-strong-experimental' + | 'success-strong-experimental' + | 'warning-strong-experimental' + | 'critical-strong-experimental' + | 'attention-strong-experimental' + | 'read-only-experimental' + | 'enabled-experimental'; -export enum StatusValue { +export enum ToneValue { Info = 'info', Success = 'success', Warning = 'warning', Critical = 'critical', Attention = 'attention', New = 'new', - InfoStrongExperimental = 'info-strong-experimental', - SuccessStrongExperimental = 'success-strong-experimental', - WarningStrongExperimental = 'warning-strong-experimental', - CriticalStrongExperimental = 'critical-strong-experimental', - AttentionStrongExperimental = 'attention-strong-experimental', - ReadOnlyExperimental = 'read-only-experimental', - EnabledExperimental = 'enabled-experimental', + InfoStrong = 'info-strong-experimental', + SuccessStrong = 'success-strong-experimental', + WarningStrong = 'warning-strong-experimental', + CriticalStrong = 'critical-strong-experimental', + AttentionStrong = 'attention-strong-experimental', + ReadOnly = 'read-only-experimental', + Enabled = 'enabled-experimental', } export type Progress = 'incomplete' | 'partiallyComplete' | 'complete'; @@ -41,4 +37,4 @@ export enum ProgressValue { Complete = 'complete', } -export type Size = 'small' | 'medium' | Experimental<'large'>; +export type Size = 'small' | 'medium' | 'large'; diff --git a/polaris-react/src/components/Badge/utils.ts b/polaris-react/src/components/Badge/utils.ts index a605e7eb156..d651c881039 100644 --- a/polaris-react/src/components/Badge/utils.ts +++ b/polaris-react/src/components/Badge/utils.ts @@ -1,17 +1,17 @@ import type {I18n} from '../../utilities/i18n'; -import {ProgressValue, StatusValue} from './types'; -import type {Progress, Status} from './types'; +import {ProgressValue, ToneValue} from './types'; +import type {Progress, Tone} from './types'; export function getDefaultAccessibilityLabel( i18n: I18n, progress?: Progress, - status?: Status, + tone?: Tone, ): string { let progressLabel = ''; - let statusLabel = ''; + let toneLabel = ''; - if (!progress && !status) { + if (!progress && !tone) { return ''; } @@ -31,46 +31,46 @@ export function getDefaultAccessibilityLabel( break; } - switch (status) { - case StatusValue.Info: - case StatusValue.InfoStrongExperimental: - statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.info'); + switch (tone) { + case ToneValue.Info: + case ToneValue.InfoStrong: + toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.info'); break; - case StatusValue.Success: - case StatusValue.SuccessStrongExperimental: - statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.success'); + case ToneValue.Success: + case ToneValue.SuccessStrong: + toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.success'); break; - case StatusValue.Warning: - case StatusValue.WarningStrongExperimental: - statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.warning'); + case ToneValue.Warning: + case ToneValue.WarningStrong: + toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.warning'); break; - case StatusValue.Critical: - case StatusValue.CriticalStrongExperimental: - statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.critical'); + case ToneValue.Critical: + case ToneValue.CriticalStrong: + toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.critical'); break; - case StatusValue.Attention: - case StatusValue.AttentionStrongExperimental: - statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.attention'); + case ToneValue.Attention: + case ToneValue.AttentionStrong: + toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.attention'); break; - case StatusValue.New: - statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.new'); + case ToneValue.New: + toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.new'); break; - case StatusValue.ReadOnlyExperimental: - statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.readOnly'); + case ToneValue.ReadOnly: + toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.readOnly'); break; - case StatusValue.EnabledExperimental: - statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.enabled'); + case ToneValue.Enabled: + toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.enabled'); break; } - if (!status && progress) { + if (!tone && progress) { return progressLabel; - } else if (status && !progress) { - return statusLabel; + } else if (tone && !progress) { + return toneLabel; } else { - return i18n.translate('Polaris.Badge.progressAndStatus', { + return i18n.translate('Polaris.Badge.progressAndTone', { progressLabel, - statusLabel, + toneLabel, }); } } diff --git a/polaris-react/src/components/BulkActions/BulkActions.tsx b/polaris-react/src/components/BulkActions/BulkActions.tsx index 11af8208b6b..e7616bfe831 100644 --- a/polaris-react/src/components/BulkActions/BulkActions.tsx +++ b/polaris-react/src/components/BulkActions/BulkActions.tsx @@ -352,7 +352,7 @@ class BulkActionsInner extends PureComponent { for (const action of actions) { for (const item of action.items) { - if (item.badge?.status === 'new') return true; + if (item.badge?.tone === 'new') return true; } } diff --git a/polaris-react/src/components/BulkActions/tests/BulkActions.test.tsx b/polaris-react/src/components/BulkActions/tests/BulkActions.test.tsx index 885fd7e8742..a2bde4aa1b2 100644 --- a/polaris-react/src/components/BulkActions/tests/BulkActions.test.tsx +++ b/polaris-react/src/components/BulkActions/tests/BulkActions.test.tsx @@ -34,13 +34,13 @@ const bulkActionProps: Props = { describe('', () => { describe('actions', () => { - it('indicator is passed to BulkActionButton when actions contain a new status for badge', () => { + it('indicator is passed to BulkActionButton when actions contain a new tone for badge', () => { const bulkActions = mountWithApp( , ); diff --git a/polaris-react/src/components/CalloutCard/CalloutCard.stories.tsx b/polaris-react/src/components/CalloutCard/CalloutCard.stories.tsx index 299ad3a88a7..3ddaef98c0c 100644 --- a/polaris-react/src/components/CalloutCard/CalloutCard.stories.tsx +++ b/polaris-react/src/components/CalloutCard/CalloutCard.stories.tsx @@ -51,7 +51,7 @@ export function WithCustomTitle() { const customTitle = ( <> Customize the style of your checkout - New + New ); diff --git a/polaris-react/src/components/FullscreenBar/FullscreenBar.stories.tsx b/polaris-react/src/components/FullscreenBar/FullscreenBar.stories.tsx index 6c700d95aaa..4e05b22d852 100644 --- a/polaris-react/src/components/FullscreenBar/FullscreenBar.stories.tsx +++ b/polaris-react/src/components/FullscreenBar/FullscreenBar.stories.tsx @@ -74,7 +74,7 @@ export function WithChildren() { paddingRight: '1rem', }} > - Draft + Draft {titleMarkup} diff --git a/polaris-react/src/components/IndexTable/IndexTable.tsx b/polaris-react/src/components/IndexTable/IndexTable.tsx index 8b41ff8398c..01028958495 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.tsx @@ -921,7 +921,7 @@ function IndexTableBase({ headingContent = ( {heading.title} - + {i18n.translate('Polaris.IndexTable.onboardingBadgeText')} diff --git a/polaris-react/src/components/LegacyFilters/LegacyFilters.tsx b/polaris-react/src/components/LegacyFilters/LegacyFilters.tsx index 91dbf6eeccc..9abeb9cfc97 100644 --- a/polaris-react/src/components/LegacyFilters/LegacyFilters.tsx +++ b/polaris-react/src/components/LegacyFilters/LegacyFilters.tsx @@ -168,7 +168,7 @@ class LegacyFiltersInner extends Component { const appliedFilterContent = this.getAppliedFilterContent(filter.key); const appliedFilterBadgeMarkup = appliedFilterContent ? (
- {appliedFilterContent} + {appliedFilterContent}
) : null; diff --git a/polaris-react/src/components/LegacyTabs/LegacyTabs.stories.tsx b/polaris-react/src/components/LegacyTabs/LegacyTabs.stories.tsx index 705b55a50ae..3143b6dc207 100644 --- a/polaris-react/src/components/LegacyTabs/LegacyTabs.stories.tsx +++ b/polaris-react/src/components/LegacyTabs/LegacyTabs.stories.tsx @@ -190,7 +190,7 @@ export function WithBadgeContent() { id: 'all-customers-fitted-4', content: ( - All 10+ + All 10+ ), accessibilityLabel: 'All customers', @@ -200,7 +200,7 @@ export function WithBadgeContent() { id: 'accepts-marketing-fitted-4', content: ( - Accepts marketing 4 + Accepts marketing 4 ), panelID: 'accepts-marketing-fitted-content-4', diff --git a/polaris-react/src/components/Navigation/components/Item/Item.tsx b/polaris-react/src/components/Navigation/components/Item/Item.tsx index 73d6052de50..705780985b6 100644 --- a/polaris-react/src/components/Navigation/components/Item/Item.tsx +++ b/polaris-react/src/components/Navigation/components/Item/Item.tsx @@ -122,12 +122,12 @@ export function Item({ let badgeMarkup: ReactNode = null; if (isNew) { badgeMarkup = ( - - {i18n.translate('Polaris.Badge.STATUS_LABELS.new')} + + {i18n.translate('Polaris.Badge.TONE_LABELS.new')} ); } else if (typeof badge === 'string') { - badgeMarkup = {badge}; + badgeMarkup = {badge}; } else { badgeMarkup = badge; } diff --git a/polaris-react/src/components/Navigation/components/Item/tests/Item.test.tsx b/polaris-react/src/components/Navigation/components/Item/tests/Item.test.tsx index 7635861b13b..5d0e543d93e 100644 --- a/polaris-react/src/components/Navigation/components/Item/tests/Item.test.tsx +++ b/polaris-react/src/components/Navigation/components/Item/tests/Item.test.tsx @@ -128,7 +128,7 @@ describe('', () => { ); expect(item).toContainReactComponent(Badge, { - status: 'new', + tone: 'new', children: '1', }); }); diff --git a/polaris-react/src/components/Page/Page.stories.tsx b/polaris-react/src/components/Page/Page.stories.tsx index c272cdc2c11..adcf16fcbb2 100644 --- a/polaris-react/src/components/Page/Page.stories.tsx +++ b/polaris-react/src/components/Page/Page.stories.tsx @@ -26,7 +26,7 @@ export function Default() { Paid} + titleMetadata={Paid} subtitle="Perfect for any pet" compactTitle primaryAction={{content: 'Save', disabled: true}} @@ -329,7 +329,7 @@ export function WithContentAfterTitle() { Verified} + titleMetadata={Verified} primaryAction={{content: 'Save', disabled: true}} secondaryActions={[ {content: 'Duplicate'}, diff --git a/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx b/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx index 473a128b6a5..531ecf06a07 100644 --- a/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx +++ b/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx @@ -52,7 +52,7 @@ export function WithPrimitiveComponents() { const {mdDown} = useBreakpoints(); - const badgeStatus = enabled ? 'success' : undefined; + const badgeTone = enabled ? 'success' : undefined; const badgeContent = enabled ? 'On' : 'Off'; @@ -62,8 +62,8 @@ export function WithPrimitiveComponents() { const settingStatusMarkup = ( {badgeContent} @@ -165,7 +165,7 @@ export function WithPrimitiveComponentsAndLongTitle() { const {mdDown} = useBreakpoints(); - const badgeStatus = enabled ? 'success' : undefined; + const badgeTone = enabled ? 'success' : undefined; const badgeContent = enabled ? 'On' : 'Off'; @@ -176,8 +176,8 @@ export function WithPrimitiveComponentsAndLongTitle() { const settingStatusMarkup = ( {badgeContent} diff --git a/polaris-react/src/components/Tabs/components/Tab/Tab.tsx b/polaris-react/src/components/Tabs/components/Tab/Tab.tsx index e51d8fe4a04..9cdc0e712ff 100644 --- a/polaris-react/src/components/Tabs/components/Tab/Tab.tsx +++ b/polaris-react/src/components/Tabs/components/Tab/Tab.tsx @@ -279,7 +279,7 @@ export const Tab = forwardRef( ); const badgeMarkup = badge ? ( - {badge} + {badge} ) : null; const disclosureMarkup = diff --git a/polaris-react/src/components/TopBar/components/Menu/Menu.tsx b/polaris-react/src/components/TopBar/components/Menu/Menu.tsx index 220ee074217..af8c03581e2 100644 --- a/polaris-react/src/components/TopBar/components/Menu/Menu.tsx +++ b/polaris-react/src/components/TopBar/components/Menu/Menu.tsx @@ -49,7 +49,7 @@ export function Menu(props: MenuProps) { const badgeProps = message && message.badge && { content: message.badge.content, - status: message.badge.status, + tone: message.badge.tone, }; const messageMarkup = message && ( diff --git a/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.tsx b/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.tsx index 8d9001686f7..32bcb675df2 100644 --- a/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.tsx +++ b/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.tsx @@ -18,7 +18,7 @@ export interface MessageProps { description: string; action: {onClick(): void; content: string}; link: {to: string; content: string}; - badge?: {content: string; status: BadgeProps['status']}; + badge?: {content: string; tone: BadgeProps['tone']}; } export function Message({ @@ -28,9 +28,7 @@ export function Message({ link, badge, }: MessageProps) { - const badgeMarkup = badge && ( - {badge.content} - ); + const badgeMarkup = badge && {badge.content}; const {to, content: linkContent} = link; const {onClick, content: actionContent} = action; diff --git a/polaris-react/src/components/TopBar/components/Menu/components/Message/tests/Message.test.tsx b/polaris-react/src/components/TopBar/components/Menu/components/Message/tests/Message.test.tsx index 42147782d7d..dbfba21b166 100644 --- a/polaris-react/src/components/TopBar/components/Menu/components/Message/tests/Message.test.tsx +++ b/polaris-react/src/components/TopBar/components/Menu/components/Message/tests/Message.test.tsx @@ -29,10 +29,7 @@ describe('', () => { it('renders a badge when the badge prop is provided', () => { const message = mountWithApp( - , + , ); expect(message).toContainReactComponent(Badge); diff --git a/polaris-react/src/components/TopBar/components/Menu/tests/Menu.test.tsx b/polaris-react/src/components/TopBar/components/Menu/tests/Menu.test.tsx index 6224a484d05..2ae57542ae4 100644 --- a/polaris-react/src/components/TopBar/components/Menu/tests/Menu.test.tsx +++ b/polaris-react/src/components/TopBar/components/Menu/tests/Menu.test.tsx @@ -72,7 +72,7 @@ describe('', () => { }, badge: { content: 'new', - status: 'new' as 'new', + tone: 'new' as 'new', }, }; const menu = mountWithApp( diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts index b8f0f0cb65e..0f1b02c652f 100644 --- a/polaris-react/src/index.ts +++ b/polaris-react/src/index.ts @@ -60,7 +60,7 @@ export type {BackdropProps} from './components/Backdrop'; export { Badge, - StatusValue as BadgeStatusValue, + ToneValue as BadgeStatusValue, ProgressValue as BadgeProgressValue, } from './components/Badge'; export type {BadgeProps} from './components/Badge'; diff --git a/polaris-react/src/types.ts b/polaris-react/src/types.ts index c386efedbb5..57e31856a1a 100644 --- a/polaris-react/src/types.ts +++ b/polaris-react/src/types.ts @@ -133,7 +133,7 @@ export interface LinkAction { export interface BadgeAction { badge?: { - status: 'new'; + tone: 'new'; content: string; }; } @@ -193,7 +193,7 @@ export interface ActionListItemDescriptor accessibilityLabel?: string; /** @deprecated Badge component */ badge?: { - status: 'new'; + tone: 'new'; content: string; }; /** Additional hint text to display with item */ diff --git a/polaris.shopify.com/content/components/feedback-indicators/badge.md b/polaris.shopify.com/content/components/feedback-indicators/badge.md index 39658e486ca..50b0e0ff618 100644 --- a/polaris.shopify.com/content/components/feedback-indicators/badge.md +++ b/polaris.shopify.com/content/components/feedback-indicators/badge.md @@ -1,23 +1,23 @@ --- title: Badge -description: Badges are used to inform merchants of the status of an object or of an action that’s been taken. +description: Badges are used to inform merchants of the tone of an object or of an action that’s been taken. category: Feedback indicators keywords: - pills - - status indicators + - tone indicators - color-coded indicators - informational badge - success badge - attention badge - warning badge - critical badge - - object status - - status + - object tone + - tone - alert examples: - fileName: badge-default.tsx title: Default - description: Use to give a non-critical status update on a piece of information or action. + description: Use to give a non-critical tone update on a piece of information or action. - fileName: badge-small.tsx title: Small description: Use in layouts with minimal space, like inside of an `IndexTable` cell. @@ -45,16 +45,16 @@ examples: - fileName: badge-complete.tsx title: Complete description: Use to indicate when a given task has been completed. For example, when merchants have fulfilled an order. - - fileName: badge-with-status-and-progress-label-override.tsx - title: With statusAndProgressLabelOverride - description: Use when the status and progress accessibilityLabels are not appropriate to a given context. + - fileName: badge-with-tone-and-progress-label-override.tsx + title: With toneAndProgressLabelOverride + description: Use when the tone and progress accessibilityLabels are not appropriate to a given context. --- ## Best practices Badges benefit merchants by: -- Using established color patterns so that merchants can quickly identify their status or importance level +- Using established color patterns so that merchants can quickly identify their tone or importance level - Being clearly labeled with short, scannable text - Being positioned to clearly identify the object they’re informing or labelling @@ -66,11 +66,11 @@ Badges benefit merchants by: Badge labels should: -- Use a single word to describe the status of an object. +- Use a single word to describe the tone of an object. - Only use two words if you need to describe a complex state. For example, “Partially refunded” and “Partially fulfilled”. -- Always describe the status in the past tense. For example, refunded not refund. +- Always describe the tone in the past tense. For example, refunded not refund. -The available badges for financial status are: +The available badges for financial tone are: - Authorized - Pending @@ -82,7 +82,7 @@ The available badges for financial status are: - Partially refunded - Refunded -The available badges for fulfillment status are: +The available badges for fulfillment tone are: - Fulfilled - Complete @@ -94,7 +94,7 @@ The available badges for fulfillment status are: #### Don’t -Don’t use alternatives to existing badge options. Only create a new badge option if there aren’t any existing options to communicate the status you need. +Don’t use alternatives to existing badge options. Only create a new badge option if there aren’t any existing options to communicate the tone you need. diff --git a/polaris.shopify.com/content/new-design-language/index.md b/polaris.shopify.com/content/new-design-language/index.md index a8f4b751037..2eb713c10eb 100644 --- a/polaris.shopify.com/content/new-design-language/index.md +++ b/polaris.shopify.com/content/new-design-language/index.md @@ -178,13 +178,13 @@ The following component's children cannot be above the bevel's `z-index` elevati - - - - - - - + + + + + + +