Skip to content

Commit 391efae

Browse files
LFDanLuLFDanLu
authored
Adding TagGroup to test apps (#4488)
* adding taggroup to test apps * fix next config * add ssr test * add taggroup to SSR docs
1 parent c3c7245 commit 391efae

File tree

10 files changed

+71
-17
lines changed

10 files changed

+71
-17
lines changed

‎examples/rsp-cra-18/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"homepage": ".",
66
"dependencies": {
77
"@adobe/react-spectrum": "latest",
8+
"@react-spectrum/tag": "3.0.0-rc.0",
89
"@spectrum-icons/workflow": "latest",
910
"@testing-library/jest-dom": "^5.16.4",
1011
"@testing-library/react": "^13.3.0",

‎examples/rsp-cra-18/src/App.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
11
import './App.css';
2-
import {Provider, defaultTheme} from '@adobe/react-spectrum'
2+
import {Provider, defaultTheme, Item} from '@adobe/react-spectrum'
33
import Lighting from './Lighting';
44
import {useState} from 'react'
55
import BodyContent from './BodyContent';
6+
import {TagGroup} from '@react-spectrum/tag';
67

78
function App() {
89
let [selected, setSelection] = useState(false);
910

1011
return (
11-
<Provider theme={defaultTheme}
12+
<Provider theme={defaultTheme}
1213
colorScheme={selected ? "light" : "dark"}
1314
height="100%">
1415
<div className="content-padding">
1516
<Lighting selected={selected} switch={setSelection}/>
17+
<TagGroup aria-label="Static TagGroup items example">
18+
<Item>News</Item>
19+
<Item>Travel</Item>
20+
<Item>Gaming</Item>
21+
<Item>Shopping</Item>
22+
</TagGroup>
1623
<BodyContent />
1724
</div>
1825
</Provider>

‎examples/rsp-cra-18/src/BodyContent.tsx

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import JournalList from './JournalList';
55
import ToDo from './ToDo'
66
import Journal from './Journal'
77

8-
98
function BodyContent(){
109

1110
//states for the To-Do list
@@ -25,7 +24,7 @@ function BodyContent(){
2524
{id: "Okay", name: "Okay"},
2625
{id: "Good", name: "Good"},
2726
{id: "Great", name: "Great"}
28-
]
27+
]
2928

3029
//functions for the To-Do list
3130
function handleSubmitToDo(e: FormEvent<HTMLInputElement>){
@@ -34,19 +33,19 @@ function BodyContent(){
3433
if (value.length > 0){
3534
setList(prevListArray => {
3635
return [
37-
...prevListArray,
36+
...prevListArray,
3837
{id: count.current, task: value}]
3938
})
4039

4140
count.current = count.current + 1;
42-
}
41+
}
4342
setValue(""); //clears text field on submit
4443
}
4544

4645
function updateCompleted(complete : string){
4746
setCompleted(prevListArray => {
4847
return [
49-
...prevListArray,
48+
...prevListArray,
5049
{id: prevListArray.length, task: complete}]
5150
});
5251
}
@@ -82,18 +81,18 @@ function BodyContent(){
8281
</TabList>
8382
<TabPanels>
8483
<Item key="TdL">
85-
<TodoList list={list}
86-
setList={setList}
87-
handleSubmit={handleSubmitToDo}
88-
value={value}
89-
setValue={setValue}
84+
<TodoList list={list}
85+
setList={setList}
86+
handleSubmit={handleSubmitToDo}
87+
value={value}
88+
setValue={setValue}
9089
completed={completed}
9190
updateCompleted={updateCompleted}
9291
clearCompleted={clearCompleted}/>
9392
</Item>
9493
<Item key="DJ">
95-
<JournalList rating={rating}
96-
setRating={setRating}
94+
<JournalList rating={rating}
95+
setRating={setRating}
9796
entryList={entryList}
9897
options={options}
9998
description={description}
@@ -105,4 +104,4 @@ function BodyContent(){
105104
)
106105
}
107106

108-
export default BodyContent;
107+
export default BodyContent;

‎examples/rsp-next-ts/next.config.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export default {
3939
"@react-spectrum/switch",
4040
"@react-spectrum/table",
4141
"@react-spectrum/tabs",
42+
"@react-spectrum/tag",
4243
"@react-spectrum/text",
4344
"@react-spectrum/textfield",
4445
"@react-spectrum/theme-dark",

‎examples/rsp-next-ts/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"dependencies": {
1515
"@adobe/react-spectrum": "^3.22.0",
1616
"@react-spectrum/color": "^3.0.0-beta.16",
17+
"@react-spectrum/tag": "3.0.0-rc.0",
1718
"@react-spectrum/toast": "^3.0.0-alpha.0",
1819
"@spectrum-icons/illustrations": "^3.5.0",
1920
"@spectrum-icons/workflow": "^4.0.3",

‎examples/rsp-next-ts/pages/index.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ import {
8080
ColorWheel,
8181
} from "@react-spectrum/color";
8282
import ReorderableListView from "../components/ReorderableListView";
83+
import {TagGroup} from '@react-spectrum/tag';
8384
import {ToastQueue} from '@react-spectrum/toast';
8485

8586
export default function Home() {
@@ -381,6 +382,13 @@ export default function Home() {
381382
<ProgressCircle aria-label="Loading…" isIndeterminate />
382383

383384
<StatusLight variant="positive">Ready</StatusLight>
385+
386+
<TagGroup aria-label="Static TagGroup items example">
387+
<Item>News</Item>
388+
<Item>Travel</Item>
389+
<Item>Gaming</Item>
390+
<Item>Shopping</Item>
391+
</TagGroup>
384392
</Section>
385393

386394
<Section title="Content">

‎examples/rsp-webpack-4/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
],
1515
"dependencies": {
1616
"@adobe/react-spectrum": "^3.24.1",
17+
"@react-spectrum/tag": "3.0.0-rc.0",
1718
"@spectrum-icons/workflow": "^4.0.6",
1819
"react": "^18.2.0",
1920
"react-dom": "^18.2.0"

‎examples/rsp-webpack-4/src/App.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import './App.css';
2-
import {Provider, defaultTheme} from '@adobe/react-spectrum'
2+
import {Provider, defaultTheme, Item} from '@adobe/react-spectrum'
33
import Lighting from './Lighting';
44
import {useState} from 'react'
55
import BodyContent from './BodyContent';
6+
import {TagGroup} from '@react-spectrum/tag';
67

78
function App() {
89
let [selected, setSelection] = useState(false);
@@ -13,6 +14,12 @@ function App() {
1314
height="100%">
1415
<div className="content-padding">
1516
<Lighting selected={selected} switch={setSelection} />
17+
<TagGroup aria-label="Static TagGroup items example">
18+
<Item>News</Item>
19+
<Item>Travel</Item>
20+
<Item>Gaming</Item>
21+
<Item>Shopping</Item>
22+
</TagGroup>
1623
<BodyContent />
1724
</div>
1825
</Provider>

‎packages/@react-spectrum/tag/test/TagGroup.ssr.test.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/*
2+
* Copyright 2020 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {testSSR} from '@react-spectrum/test-utils';
14+
15+
describe('TagGroup SSR', function () {
16+
it('should render without errors', async function () {
17+
await testSSR(__filename, `
18+
import {TagGroup, Item} from '../';
19+
<TagGroup aria-label="Static TagGroup items example">
20+
<Item>News</Item>
21+
<Item>Travel</Item>
22+
<Item>Gaming</Item>
23+
<Item>Shopping</Item>
24+
</TagGroup>
25+
`);
26+
});
27+
});

‎packages/dev/docs/pages/react-spectrum/ssr.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ module.exports = {
9898
"@react-spectrum/switch",
9999
"@react-spectrum/table",
100100
"@react-spectrum/tabs",
101+
"@react-spectrum/tag",
101102
"@react-spectrum/text",
102103
"@react-spectrum/textfield",
103104
"@react-spectrum/theme-dark",
@@ -165,6 +166,7 @@ const withTM = require("next-transpile-modules")([
165166
"@react-spectrum/switch",
166167
"@react-spectrum/table",
167168
"@react-spectrum/tabs",
169+
"@react-spectrum/tag",
168170
"@react-spectrum/text",
169171
"@react-spectrum/textfield",
170172
"@react-spectrum/theme-dark",
@@ -191,4 +193,4 @@ module.exports = withTM({
191193

192194
## Remix
193195

194-
[Remix](https://remix.run) is a full-stack React framework with nested routing. To configure Remix to load React Spectrum styles, visit the [CSS Side-Effect Imports](https://remix.run/docs/en/main/guides/styling#md-css-side-effect-imports) section of the Remix docs.
196+
[Remix](https://remix.run) is a full-stack React framework with nested routing. To configure Remix to load React Spectrum styles, visit the [CSS Side-Effect Imports](https://remix.run/docs/en/main/guides/styling#md-css-side-effect-imports) section of the Remix docs.

0 commit comments

Comments
 (0)