Skip to content

Commit 1d1ca90

Browse files
snowystingersnowystinger
authored
fix: verdaccio apps notification badge on correct button and selection on table with bulk actions (#8817)
* fix: verdaccio apps notification badge on correct button and selection on table with bulk actions * Add provider to all apps * turn on verdaccio * Revert "turn on verdaccio" This reverts commit 92d1e04. * missed one actionbutton notification badge change * fix missed table as well * turn on verdaccio * Revert "turn on verdaccio" This reverts commit 12ffd72.
1 parent 6618d38 commit 1d1ca90

File tree

6 files changed

+45
-19
lines changed

6 files changed

+45
-19
lines changed

‎examples/s2-esbuild-starter-app/src/app.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,19 @@
1313

1414
import "@react-spectrum/s2/page.css";
1515
import { style } from "@react-spectrum/s2/style" with { type: "macro" };
16-
import { Button } from "@react-spectrum/s2";
16+
import { Button, Provider } from "@react-spectrum/s2";
1717

1818
function App() {
1919
return (
20-
<main>
20+
<Provider elementType="main">
2121
<Button
2222
styles={style({
2323
marginStart: 16,
2424
})}
2525
>
2626
Hello Spectrum 2!
2727
</Button>
28-
</main>
28+
</Provider>
2929
);
3030
}
3131

‎examples/s2-next-macros/src/app/page.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
NotificationBadge,
3333
Picker,
3434
PickerItem,
35+
Provider,
3536
Row,
3637
SubmenuTrigger,
3738
TableBody,
@@ -72,7 +73,7 @@ function App() {
7273
{id: 'waterfall', label: 'Waterfall'}
7374
];
7475
return (
75-
<main>
76+
<Provider elementType="main">
7677
<Heading
7778
styles={style({ font: "heading-xl", textAlign: "center" })}
7879
level={1}
@@ -98,10 +99,11 @@ function App() {
9899
<Section title="Buttons">
99100
<ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
100101
<Button variant="primary">Primary</Button>
101-
<Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
102+
<Button variant="secondary"><Text>Secondary</Text></Button>
102103
<ActionButton>
103104
<Edit />
104105
<Text>Action Button</Text>
106+
<NotificationBadge value={2} />
105107
</ActionButton>
106108
<ToggleButton>Toggle Button</ToggleButton>
107109
<LinkButton
@@ -185,6 +187,7 @@ function App() {
185187
<TableView
186188
aria-label="Files"
187189
styles={style({width: 320, height: 320})}
190+
selectionMode="multiple"
188191
renderActionBar={selectedKeys => (
189192
<ActionBar>
190193
<ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
@@ -268,7 +271,7 @@ function App() {
268271
<Lazy />
269272
</React.Suspense>}
270273
</div>
271-
</main>
274+
</Provider>
272275
);
273276
}
274277

‎examples/s2-parcel-example/src/App.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030
NotificationBadge,
3131
Picker,
3232
PickerItem,
33+
Provider,
3334
Row,
3435
SubmenuTrigger,
3536
TableBody,
@@ -70,7 +71,7 @@ function App() {
7071
{id: 'waterfall', label: 'Waterfall'}
7172
];
7273
return (
73-
<main>
74+
<Provider elementType="main">
7475
<Heading
7576
styles={style({ font: "heading-xl", textAlign: "center" })}
7677
level={1}
@@ -96,10 +97,11 @@ function App() {
9697
<Section title="Buttons">
9798
<ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
9899
<Button variant="primary">Primary</Button>
99-
<Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
100+
<Button variant="secondary"><Text>Secondary</Text></Button>
100101
<ActionButton>
101102
<Edit />
102103
<Text>Action Button</Text>
104+
<NotificationBadge value={2} />
103105
</ActionButton>
104106
<ToggleButton>Toggle Button</ToggleButton>
105107
<LinkButton
@@ -183,6 +185,7 @@ function App() {
183185
<TableView
184186
aria-label="Files"
185187
styles={style({width: 320, height: 320})}
188+
selectionMode="multiple"
186189
renderActionBar={selectedKeys => (
187190
<ActionBar>
188191
<ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
@@ -266,7 +269,7 @@ function App() {
266269
<Lazy />
267270
</React.Suspense>}
268271
</div>
269-
</main>
272+
</Provider>
270273
);
271274
}
272275

‎examples/s2-vite-project/src/App.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030
NotificationBadge,
3131
Picker,
3232
PickerItem,
33+
Provider,
3334
Row,
3435
SubmenuTrigger,
3536
TableBody,
@@ -70,7 +71,7 @@ function App() {
7071
{id: 'waterfall', label: 'Waterfall'}
7172
];
7273
return (
73-
<main>
74+
<Provider elementType="main">
7475
<Heading
7576
styles={style({ font: "heading-xl", textAlign: "center" })}
7677
level={1}
@@ -96,10 +97,11 @@ function App() {
9697
<Section title="Buttons">
9798
<ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
9899
<Button variant="primary">Primary</Button>
99-
<Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
100+
<Button variant="secondary"><Text>Secondary</Text></Button>
100101
<ActionButton>
101102
<Edit />
102103
<Text>Action Button</Text>
104+
<NotificationBadge value={2} />
103105
</ActionButton>
104106
<ToggleButton>Toggle Button</ToggleButton>
105107
<LinkButton
@@ -183,6 +185,7 @@ function App() {
183185
<TableView
184186
aria-label="Files"
185187
styles={style({width: 320, height: 320})}
188+
selectionMode="multiple"
186189
renderActionBar={selectedKeys => (
187190
<ActionBar>
188191
<ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
@@ -266,7 +269,7 @@ function App() {
266269
<Lazy />
267270
</React.Suspense>}
268271
</div>
269-
</main>
272+
</Provider>
270273
);
271274
}
272275

‎examples/s2-webpack-5-example/src/App.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030
NotificationBadge,
3131
Picker,
3232
PickerItem,
33+
Provider,
3334
Row,
3435
SubmenuTrigger,
3536
TableBody,
@@ -70,7 +71,7 @@ function App() {
7071
{id: 'waterfall', label: 'Waterfall'}
7172
];
7273
return (
73-
<main>
74+
<Provider elementType="main">
7475
<Heading
7576
styles={style({ font: "heading-xl", textAlign: "center" })}
7677
level={1}
@@ -96,10 +97,11 @@ function App() {
9697
<Section title="Buttons">
9798
<ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
9899
<Button variant="primary">Primary</Button>
99-
<Button variant="secondary"><Text>Secondary</Text><NotificationBadge value={2} /></Button>
100+
<Button variant="secondary"><Text>Secondary</Text></Button>
100101
<ActionButton>
101102
<Edit />
102103
<Text>Action Button</Text>
104+
<NotificationBadge value={2} />
103105
</ActionButton>
104106
<ToggleButton>Toggle Button</ToggleButton>
105107
<LinkButton
@@ -183,6 +185,7 @@ function App() {
183185
<TableView
184186
aria-label="Files"
185187
styles={style({width: 320, height: 320})}
188+
selectionMode="multiple"
186189
renderActionBar={selectedKeys => (
187190
<ActionBar>
188191
<ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
@@ -266,7 +269,7 @@ function App() {
266269
<Lazy />
267270
</React.Suspense>}
268271
</div>
269-
</main>
272+
</Provider>
270273
);
271274
}
272275

‎examples/s2-webpack-5-typescript-example/src/App.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
import "@react-spectrum/s2/page.css";
1414
import {
15+
ActionBar,
1516
ActionButton,
1617
ActionButtonGroup,
1718
ActionMenu,
@@ -25,8 +26,10 @@ import {
2526
Menu,
2627
MenuItem,
2728
MenuTrigger,
29+
NotificationBadge,
2830
Picker,
2931
PickerItem,
32+
Provider,
3033
Row,
3134
SubmenuTrigger,
3235
TableBody,
@@ -69,7 +72,7 @@ function App() {
6972
{id: 'waterfall', label: 'Waterfall'}
7073
];
7174
return (
72-
<main>
75+
<Provider elementType="main">
7376
<Heading
7477
styles={style({ font: "heading-xl", textAlign: "center" })}
7578
level={1}
@@ -95,10 +98,11 @@ function App() {
9598
<Section title="Buttons">
9699
<ButtonGroup align="center" styles={style({maxWidth: '[100vw]'})}>
97100
<Button variant="primary">Primary</Button>
98-
<Button variant="secondary">Secondary</Button>
101+
<Button variant="secondary"><Text>Secondary</Text></Button>
99102
<ActionButton>
100103
<Edit />
101104
<Text>Action Button</Text>
105+
<NotificationBadge value={2} />
102106
</ActionButton>
103107
<ToggleButton>Toggle Button</ToggleButton>
104108
<LinkButton
@@ -179,7 +183,17 @@ function App() {
179183
<MenuItem>Paste</MenuItem>
180184
</Menu>
181185
</MenuTrigger>
182-
<TableView aria-label="Files" styles={style({width: 320, height: 320})}>
186+
<TableView
187+
aria-label="Files"
188+
styles={style({width: 320, height: 320})}
189+
selectionMode="multiple"
190+
renderActionBar={selectedKeys => (
191+
<ActionBar>
192+
<ActionButton onPress={() => console.log('edit', selectedKeys)}>Edit</ActionButton>
193+
<ActionButton onPress={() => console.log('copy', selectedKeys)}>Copy</ActionButton>
194+
<ActionButton onPress={() => console.log('delete', selectedKeys)}>Delete</ActionButton>
195+
</ActionBar>
196+
)}>
183197
<TableHeader>
184198
<Column isRowHeader>Name</Column>
185199
<Column>Type</Column>
@@ -256,7 +270,7 @@ function App() {
256270
<Lazy />
257271
</React.Suspense>}
258272
</div>
259-
</main>
273+
</Provider>
260274
);
261275
}
262276

0 commit comments

Comments
 (0)