Skip to content

Commit 6b0f84b

Browse files
devongovettLFDanLu
devongovett
and
LFDanLu
authored
feat: S2 toast (#7975)
* wip * wip * tmp * update * wip * fix * fix * updates * fix * updates * wip * Move to css module * Accessibility improvements * Fixes and cleanup * more refinement * ts * exports * more cleanup * add intl * hide extra toast story to fix multiple toast container issue in docs was breaking animations * Move storybook config to be global * Only apply view transition classes when in a stack * Mark as unstable --------- Co-authored-by: Daniel Lu <[email protected]>
1 parent 58d96ca commit 6b0f84b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1045
-63
lines changed

‎.storybook-s2/preview.tsx

+12-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { addons } from '@storybook/preview-api';
66
import { DocsContainer } from '@storybook/addon-docs';
77
import React, { useEffect, useState } from 'react';
88
import {withProviderSwitcher} from './custom-addons/provider';
9+
import {Controls, Description, Primary, Stories, Subtitle, Title} from '@storybook/blocks';
910
import './global.css';
1011

1112
const channel = addons.getChannel();
@@ -42,7 +43,17 @@ const preview = {
4243
}
4344
return code;
4445
}
45-
}
46+
},
47+
page: () => (
48+
<>
49+
<Title />
50+
<Subtitle />
51+
<Description />
52+
<Primary />
53+
<Controls />
54+
<Stories includePrimary={false} />
55+
</>
56+
)
4657
},
4758
darkMode: {
4859
light: {

‎lib/viewTransitions.d.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@
1111
*/
1212

1313
interface Document {
14-
startViewTransition(fn: () => void): ViewTransition;
14+
startViewTransition(update: (() => void) | {update: () => void, types: string[]}): ViewTransition;
1515
}
1616

1717
interface ViewTransition {
1818
ready: Promise<void>;
19+
finished: Promise<void>;
1920
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@
246246
"packages/@react-spectrum/style-macro-s1/**",
247247
"packages/@react-spectrum/tree/**",
248248
"packages/@react-spectrum/color/src/*.tsx",
249-
"packages/@react-spectrum/s2/**",
249+
"packages/@react-spectrum/s2/**/*.{js,ts,tsx}",
250250
".storybook-s2/**"
251251
]
252252
},

‎packages/@react-spectrum/s2/intl/ar-AE.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "الإجراءات",
3232
"tag.hideButtonLabel": "إظهار أقل",
3333
"tag.noTags": "بدون",
34-
"tag.showAllButtonLabel": "عرض الكل ({tagCount, number})"
34+
"tag.showAllButtonLabel": "عرض الكل ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/bg-BG.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Действия",
3232
"tag.hideButtonLabel": "Показване на по-малко",
3333
"tag.noTags": "Нито един",
34-
"tag.showAllButtonLabel": "Показване на всички ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Показване на всички ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/cs-CZ.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Akce",
3232
"tag.hideButtonLabel": "Zobrazit méně",
3333
"tag.noTags": "Žádný",
34-
"tag.showAllButtonLabel": "Zobrazit vše ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Zobrazit vše ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/da-DK.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Handlinger",
3232
"tag.hideButtonLabel": "Vis mindre",
3333
"tag.noTags": "Ingen",
34-
"tag.showAllButtonLabel": "Vis alle ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Vis alle ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/de-DE.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Aktionen",
3232
"tag.hideButtonLabel": "Weniger zeigen",
3333
"tag.noTags": "Keine",
34-
"tag.showAllButtonLabel": "Alle anzeigen ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Alle anzeigen ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/el-GR.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Ενέργειες",
3232
"tag.hideButtonLabel": "Εμφάνιση λιγότερων",
3333
"tag.noTags": "Κανένα",
34-
"tag.showAllButtonLabel": "Εμφάνιση όλων ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Εμφάνιση όλων ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/en-US.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.hideButtonLabel": "Show less",
3232
"tag.actions": "Actions",
3333
"tag.noTags": "None",
34-
"breadcrumbs.more": "More items"
34+
"breadcrumbs.more": "More items",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/es-ES.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Acciones",
3232
"tag.hideButtonLabel": "Mostrar menos",
3333
"tag.noTags": "Ninguno",
34-
"tag.showAllButtonLabel": "Mostrar todo ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Mostrar todo ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/et-EE.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Toimingud",
3232
"tag.hideButtonLabel": "Kuva vähem",
3333
"tag.noTags": "Puudub",
34-
"tag.showAllButtonLabel": "Kuva kõik ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Kuva kõik ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/fi-FI.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Toiminnot",
3232
"tag.hideButtonLabel": "Näytä vähemmän",
3333
"tag.noTags": "Ei mitään",
34-
"tag.showAllButtonLabel": "Näytä kaikki ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Näytä kaikki ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/fr-FR.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Actions",
3232
"tag.hideButtonLabel": "Afficher moins",
3333
"tag.noTags": "Aucun",
34-
"tag.showAllButtonLabel": "Tout afficher ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Tout afficher ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/he-IL.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "פעולות",
3232
"tag.hideButtonLabel": "הצג פחות",
3333
"tag.noTags": "ללא",
34-
"tag.showAllButtonLabel": "הצג הכל ({tagCount, number})"
34+
"tag.showAllButtonLabel": "הצג הכל ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/hr-HR.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Radnje",
3232
"tag.hideButtonLabel": "Prikaži manje",
3333
"tag.noTags": "Nema",
34-
"tag.showAllButtonLabel": "Prikaži sve ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Prikaži sve ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/hu-HU.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Műveletek",
3232
"tag.hideButtonLabel": "Mutass kevesebbet",
3333
"tag.noTags": "Egyik sem",
34-
"tag.showAllButtonLabel": "Az összes megjelenítése ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Az összes megjelenítése ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/it-IT.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Azioni",
3232
"tag.hideButtonLabel": "Mostra meno",
3333
"tag.noTags": "Nessuno",
34-
"tag.showAllButtonLabel": "Mostra tutto ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Mostra tutto ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/ja-JP.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "アクション",
3232
"tag.hideButtonLabel": "表示を減らす",
3333
"tag.noTags": "なし",
34-
"tag.showAllButtonLabel": "すべての ({tagCount, number}) を表示"
34+
"tag.showAllButtonLabel": "すべての ({tagCount, number}) を表示",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/ko-KR.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "액션",
3232
"tag.hideButtonLabel": "간단히 표시",
3333
"tag.noTags": "없음",
34-
"tag.showAllButtonLabel": "모두 표시 ({tagCount, number})"
34+
"tag.showAllButtonLabel": "모두 표시 ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/lt-LT.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Veiksmai",
3232
"tag.hideButtonLabel": "Rodyti mažiau",
3333
"tag.noTags": "Nėra",
34-
"tag.showAllButtonLabel": "Rodyti viską ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Rodyti viską ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/lv-LV.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Darbības",
3232
"tag.hideButtonLabel": "Rādīt mazāk",
3333
"tag.noTags": "Nav",
34-
"tag.showAllButtonLabel": "Rādīt visu ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Rādīt visu ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/nb-NO.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Handlinger",
3232
"tag.hideButtonLabel": "Vis mindre",
3333
"tag.noTags": "Ingen",
34-
"tag.showAllButtonLabel": "Vis alle ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Vis alle ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/nl-NL.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Acties",
3232
"tag.hideButtonLabel": "Minder weergeven",
3333
"tag.noTags": "Geen",
34-
"tag.showAllButtonLabel": "Alles tonen ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Alles tonen ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/pl-PL.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Działania",
3232
"tag.hideButtonLabel": "Wyświetl mniej",
3333
"tag.noTags": "Brak",
34-
"tag.showAllButtonLabel": "Pokaż wszystko ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Pokaż wszystko ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/pt-BR.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Ações",
3232
"tag.hideButtonLabel": "Mostrar menos",
3333
"tag.noTags": "Nenhum",
34-
"tag.showAllButtonLabel": "Mostrar tudo ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Mostrar tudo ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/pt-PT.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Ações",
3232
"tag.hideButtonLabel": "Mostrar menos",
3333
"tag.noTags": "Nenhum",
34-
"tag.showAllButtonLabel": "Mostrar tudo ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Mostrar tudo ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/ro-RO.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Acțiuni",
3232
"tag.hideButtonLabel": "Se afișează mai puțin",
3333
"tag.noTags": "Niciuna",
34-
"tag.showAllButtonLabel": "Se afișează tot ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Se afișează tot ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/ru-RU.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Действия",
3232
"tag.hideButtonLabel": "Показать меньше",
3333
"tag.noTags": "Нет",
34-
"tag.showAllButtonLabel": "Показать все ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Показать все ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/sk-SK.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Akcie",
3232
"tag.hideButtonLabel": "Zobraziť menej",
3333
"tag.noTags": "Žiadne",
34-
"tag.showAllButtonLabel": "Zobraziť všetko ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Zobraziť všetko ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/sl-SI.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Dejanja",
3232
"tag.hideButtonLabel": "Prikaži manj",
3333
"tag.noTags": "Nič",
34-
"tag.showAllButtonLabel": "Prikaž vse ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Prikaž vse ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/sr-SP.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Radnje",
3232
"tag.hideButtonLabel": "Prikaži manje",
3333
"tag.noTags": "Ne postoji",
34-
"tag.showAllButtonLabel": "Prikaži sve ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Prikaži sve ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/sv-SE.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Åtgärder",
3232
"tag.hideButtonLabel": "Visa mindre",
3333
"tag.noTags": "Ingen",
34-
"tag.showAllButtonLabel": "Visa alla ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Visa alla ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/tr-TR.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Eylemler",
3232
"tag.hideButtonLabel": "Daha az göster",
3333
"tag.noTags": "Hiçbiri",
34-
"tag.showAllButtonLabel": "Tümünü göster ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Tümünü göster ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/uk-UA.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "Дії",
3232
"tag.hideButtonLabel": "Показувати менше",
3333
"tag.noTags": "Немає",
34-
"tag.showAllButtonLabel": "Показати всі ({tagCount, number})"
34+
"tag.showAllButtonLabel": "Показати всі ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/zh-CN.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "操作",
3232
"tag.hideButtonLabel": "显示更少",
3333
"tag.noTags": "无",
34-
"tag.showAllButtonLabel": "全部显示 ({tagCount, number})"
34+
"tag.showAllButtonLabel": "全部显示 ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/intl/zh-TW.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@
3131
"tag.actions": "動作",
3232
"tag.hideButtonLabel": "顯示較少",
3333
"tag.noTags": "無",
34-
"tag.showAllButtonLabel": "顯示全部 ({tagCount, number})"
34+
"tag.showAllButtonLabel": "顯示全部 ({tagCount, number})",
35+
"toast.clearAll": "Clear all",
36+
"toast.collapse": "Collapse",
37+
"toast.showAll": "Show all"
3538
}

‎packages/@react-spectrum/s2/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,8 @@
147147
"@react-types/textfield": "^3.12.0",
148148
"csstype": "^3.0.2",
149149
"react-aria": "^3.38.1",
150-
"react-aria-components": "^1.7.1"
150+
"react-aria-components": "^1.7.1",
151+
"react-stately": "^3.36.1"
151152
},
152153
"peerDependencies": {
153154
"react": "^18.0.0 || ^19.0.0-rc.1",

0 commit comments

Comments
 (0)