Skip to content

Commit 6f39866

Browse files
yihuiliaosnowystingerLFDanLu
authored
Rsp dropzone (#4757)
* initialize dropzone * brainstorm * cleanup dropzone * merge * update stories with actions * messages * use rac dropzone * input stuff * add css, change dropzone ref * set isFilled * add css, trying stuff in dropzone * add unfilled/filled state * added bannerMessage and isFilled prop, update stories * clean up stories * added a test * updated css, exported Draggable, clean up package.json * add imperative handle - tbd whether it is kept * cleanup * fix react-aria-component dependency * create new css folder for dnd stories * add text component to story * add spacing, add tests, whcm css * clean up rac dropzone * add more tests * fix typo * fix stories, fix typo in css, remove focus styling * added jsdoc comments, new story, export types * add css to new story, change examples to buttons, minor css changes * fix linting * fix typo * remove imperative handler from dropzone * fix tests * fix typo * update css to match new style for banner, update css for whcm * fix typo, add draggable image to story * update text color to meet color contrast * fix indentation * fix indentation * update package * update css and tests, styled filled state for stories, message announces on VO * update useId import * small code review changes * fix HCM * fix lint * add missing filter dom props to filetrigger * further hcm fixes * update stories with text component --------- Co-authored-by: Robert Snow <[email protected]> Co-authored-by: Daniel Lu <[email protected]>
1 parent 53ddbb6 commit 6f39866

File tree

19 files changed

+974
-47
lines changed

19 files changed

+974
-47
lines changed

‎packages/@adobe/spectrum-css-temp/components/dnd/index.css

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
Copyright 2023 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 '../commons/index.css';
14+
15+
.spectrum-Dropzone {
16+
text-align: center;
17+
border-width: var(--spectrum-dropzone-border-width);
18+
border-radius: var(--spectrum-dropzone-border-radius);
19+
padding: var(--spectrum-dropzone-padding);
20+
border-style: dashed;
21+
22+
&:focus {
23+
outline: 0;
24+
border-style: dashed;
25+
&.focus-ring {
26+
border-style: solid;
27+
}
28+
}
29+
30+
&.is-dragged {
31+
border-style: solid;
32+
}
33+
}

‎packages/@adobe/spectrum-css-temp/components/dnd/skin.css

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/*
2+
Copyright 2023 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+
.spectrum-Dropzone {
14+
--spectrum-dropzone-illustratedmessage-illustration-color-selected: var(--spectrum-global-color-blue-400);
15+
--spectrum-dropzone-illustratedmessage-illustration-color-key-focus: var(--spectrum-global-color-blue-500);
16+
}
17+
18+
.spectrum-Dropzone {
19+
border-color: var(--spectrum-dropzone-border-color);
20+
21+
&.is-dragged {
22+
border-color: var(--spectrum-dropzone-border-color-selected-hover);
23+
background-color: var(--spectrum-dropzone-background-color-selected-hover);
24+
25+
.spectrum-IllustratedMessage-illustration {
26+
color: var(--spectrum-dropzone-illustratedmessage-illustration-color-selected);
27+
}
28+
}
29+
30+
&:focus:not(.is-dragged) {
31+
border-color: var(--spectrum-dropzone-border-color);
32+
.spectrum-IllustratedMessage-illustration {
33+
color: var(--spectrum-dropzone-illustratedmessage-illustration-color-key-focus);
34+
}
35+
&.focus-ring {
36+
border-color: var(--spectrum-dropzone-border-color-selected-hover);
37+
}
38+
&.is-dragged.focus-ring {
39+
.spectrum-IllustratedMessage-illustration {
40+
color: var(--spectrum-dropzone-illustratedmessage-illustration-color-selected);
41+
}
42+
}
43+
}
44+
}
45+
46+
@media (forced-colors: active) {
47+
.spectrum-Dropzone {
48+
--spectrum-dropzone-border-color: CanvasText;
49+
--spectrum-dropzone-illustratedmessage-illustration-color-selected: Highlight;
50+
--spectrum-dropzone-border-color-selected-hover: Highlight;
51+
--spectrum-dropzone-background-color-selected-hover: Canvas;
52+
53+
&.is-dragged {
54+
forced-color-adjust: none;
55+
}
56+
}
57+
}
58+

‎packages/@adobe/spectrum-css-temp/components/dnd/vars.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/*
2+
* Copyright 2023 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 './index.css';
14+
@import './skin.css';

‎packages/@adobe/spectrum-css-temp/components/dropzone/index.css

Lines changed: 58 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
Copyright 2019 Adobe. All rights reserved.
2+
Copyright 2023 Adobe. All rights reserved.
33
This file is licensed to you under the Apache License, Version 2.0 (the "License");
44
you may not use this file except in compliance with the License. You may obtain a copy
55
of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -12,13 +12,32 @@ governing permissions and limitations under the License.
1212

1313
@import '../commons/index.css';
1414

15+
:root {
16+
--spectrum-dropzone-padding-x: var(--spectrum-global-dimension-size-150);
17+
--spectrum-dropzone-padding-y: var(--spectrum-global-dimension-size-115);
18+
--spectrum-dropzone-banner-text-color: var(--spectrum-gray-50);
19+
--spectrum-dropzone-banner-background-color: var(--spectrum-global-color-blue-500);
20+
--spectrum-dropzone-banner-border-color: var(--spectrum-dropzone-banner-background-color);
21+
}
22+
1523
.spectrum-Dropzone {
24+
position: relative;
1625
text-align: center;
1726
border-width: var(--spectrum-dropzone-border-width);
1827
border-radius: var(--spectrum-dropzone-border-radius);
1928
padding: var(--spectrum-dropzone-padding);
2029
border-style: dashed;
2130

31+
.spectrum-Dropzone-backdrop {
32+
display: none;
33+
content: "";
34+
position: absolute;
35+
top: 0;
36+
left: 0;
37+
right: 0;
38+
bottom: 0;
39+
}
40+
2241
&:focus {
2342
outline: 0;
2443
border-style: dashed;
@@ -27,7 +46,43 @@ governing permissions and limitations under the License.
2746
}
2847
}
2948

30-
&.is-dragged {
31-
border-style: solid;
49+
&[data-drop-target].spectrum-Dropzone--filled {
50+
.spectrum-Dropzone-banner {
51+
display: block;
52+
}
53+
}
54+
55+
&[data-drop-target] {
56+
.spectrum-Dropzone-backdrop {
57+
display: block;
58+
}
59+
}
60+
}
61+
62+
.spectrum-Dropzone-banner {
63+
display: none;
64+
position: absolute;
65+
color: var(--spectrum-dropzone-banner-text-color);
66+
background-color: var(--spectrum-dropzone-banner-background-color);
67+
top: 50%;
68+
left: 50%;
69+
transform: translate(-50%, -50%);
70+
padding: var(--spectrum-dropzone-padding-y) var(--spectrum-dropzone-padding-x);
71+
border-radius: var(--spectrum-dropzone-border-radius);
72+
border: 1px solid var(--spectrum-dropzone-banner-border-color);
73+
}
74+
75+
@media (forced-colors: active) {
76+
.spectrum-Dropzone {
77+
&[data-drop-target] {
78+
.spectrum-Dropzone-backdrop {
79+
display: none;
80+
}
81+
}
82+
&[data-drop-target].spectrum-Dropzone--filled {
83+
.spectrum-Dropzone-backdrop {
84+
display: block;
85+
}
86+
}
3287
}
3388
}

‎packages/@adobe/spectrum-css-temp/components/dropzone/skin.css

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,47 +11,45 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
.spectrum-Dropzone {
14-
--spectrum-dropzone-illustratedmessage-illustration-color-selected: var(--spectrum-global-color-blue-400);
1514
--spectrum-dropzone-illustratedmessage-illustration-color-key-focus: var(--spectrum-global-color-blue-500);
1615
}
1716

1817
.spectrum-Dropzone {
1918
border-color: var(--spectrum-dropzone-border-color);
2019

21-
&.is-dragged {
20+
&[data-focus-visible]{
21+
border-color: var(--spectrum-dropzone-border-color-selected-hover);
22+
}
23+
24+
&[data-drop-target] {
25+
border-style: solid;
2226
border-color: var(--spectrum-dropzone-border-color-selected-hover);
2327
background-color: var(--spectrum-dropzone-background-color-selected-hover);
2428

25-
.spectrum-IllustratedMessage-illustration {
26-
color: var(--spectrum-dropzone-illustratedmessage-illustration-color-selected);
29+
.spectrum-Dropzone-illustratedMessage {
30+
svg {
31+
color: var(--spectrum-dropzone-illustratedmessage-illustration-color-key-focus);
32+
}
2733
}
28-
}
2934

30-
&:focus:not(.is-dragged) {
31-
border-color: var(--spectrum-dropzone-border-color);
32-
.spectrum-IllustratedMessage-illustration {
33-
color: var(--spectrum-dropzone-illustratedmessage-illustration-color-key-focus);
34-
}
3535
&.focus-ring {
3636
border-color: var(--spectrum-dropzone-border-color-selected-hover);
3737
}
38-
&.is-dragged.focus-ring {
39-
.spectrum-IllustratedMessage-illustration {
40-
color: var(--spectrum-dropzone-illustratedmessage-illustration-color-selected);
41-
}
38+
}
39+
40+
&[data-drop-target] {
41+
.spectrum-Dropzone-backdrop {
42+
background-color: var(--spectrum-dropzone-background-color-selected-hover);
4243
}
4344
}
4445
}
4546

4647
@media (forced-colors: active) {
4748
.spectrum-Dropzone {
4849
--spectrum-dropzone-border-color: CanvasText;
49-
--spectrum-dropzone-illustratedmessage-illustration-color-selected: Highlight;
5050
--spectrum-dropzone-border-color-selected-hover: Highlight;
5151
--spectrum-dropzone-background-color-selected-hover: Canvas;
52-
53-
&.is-dragged {
54-
forced-color-adjust: none;
55-
}
52+
--spectrum-dropzone-banner-border-color: CanvasText;
53+
--spectrum-dropzone-illustratedmessage-illustration-color-key-focus: Highlight;
5654
}
5755
}

‎packages/@react-aria/dnd/stories/dnd.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {DraggableListBox} from './DraggableListBox';
2424
import {DragPreview} from '../src/DragPreview';
2525
import {DroppableGridExample} from './DroppableGrid';
2626
import {DroppableListBox, DroppableListBoxExample} from './DroppableListBox';
27-
import dropzoneStyles from '@adobe/spectrum-css-temp/components/dropzone/vars.css';
27+
import dropzoneStyles from '@adobe/spectrum-css-temp/components/dnd/vars.css';
2828
import {Flex} from '@react-spectrum/layout';
2929
import {FocusRing} from '@react-aria/focus';
3030
import Folder from '@spectrum-icons/workflow/Folder';
@@ -250,7 +250,7 @@ export const MultipleCollectionDropTargets = {
250250

251251
export const Reorderable = () => <ReorderableGridExample />;
252252

253-
function Draggable() {
253+
export function Draggable() {
254254
let {dragProps, isDragging} = useDrag({
255255
getItems() {
256256
return [{

‎packages/@react-spectrum/dropzone/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# @react-spectrum/dropzone
2+
3+
This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

‎packages/@react-spectrum/dropzone/index.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/*
2+
* Copyright 2023 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+
export * from './src';

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"name": "@react-spectrum/dropzone",
3+
"version": "3.0.0-alpha.0",
4+
"private": true,
5+
"description": "Spectrum UI components in React",
6+
"license": "Apache-2.0",
7+
"main": "dist/main.js",
8+
"module": "dist/module.js",
9+
"exports": {
10+
"types": "./dist/types.d.ts",
11+
"import": "./dist/import.mjs",
12+
"require": "./dist/main.js"
13+
},
14+
"types": "dist/types.d.ts",
15+
"source": "src/index.ts",
16+
"files": [
17+
"dist",
18+
"src"
19+
],
20+
"sideEffects": [
21+
"*.css"
22+
],
23+
"targets": {
24+
"main": {
25+
"includeNodeModules": [
26+
"@adobe/spectrum-css-temp"
27+
]
28+
},
29+
"module": {
30+
"includeNodeModules": [
31+
"@adobe/spectrum-css-temp"
32+
]
33+
}
34+
},
35+
"repository": {
36+
"type": "git",
37+
"url": "https://github.com/adobe/react-spectrum"
38+
},
39+
"dependencies": {
40+
"@react-aria/utils": "^3.19.0",
41+
"@react-spectrum/utils": "^3.10.1",
42+
"@react-types/shared": "^3.19.0",
43+
"react-aria-components": "^1.0.0-alpha.6",
44+
"@swc/helpers": "^0.5.0"
45+
},
46+
"devDependencies": {
47+
"@adobe/spectrum-css-temp": "3.0.0-alpha.1",
48+
"@react-spectrum/test-utils": "3.0.0-alpha.1"
49+
},
50+
"peerDependencies": {
51+
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
52+
"@react-spectrum/provider": "^3.0.0"
53+
},
54+
"publishConfig": {
55+
"access": "public"
56+
}
57+
}

0 commit comments

Comments
 (0)