Skip to content

Commit 8894290

Browse files
aramos-adobearamos-adobe
committed
feat(dropzone): adding svg border
1 parent 9af69e7 commit 8894290

File tree

4 files changed

+81
-78
lines changed

4 files changed

+81
-78
lines changed

‎components/dropzone/index.css

+28-9
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,11 @@
5454
inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width));
5555
padding: calc(var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)));
5656
text-align: center;
57-
border-color: var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color));
58-
border-width: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width));
5957
border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-drop-zone-corner-radius));
60-
border-style: var(--mod-drop-zone-border-style, dashed);
6158
background-size: cover;
6259
background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color));
6360
color: var(--spectrum-drop-zone-illustration-color);
61+
position: relative;
6462

6563
&.is-dragged {
6664
/* @deprecation --mod-drop-zone-border-style--dragged will be removed during the S2 migration; please update your code to --mod-drop-zone-border-style-dragged */
@@ -71,6 +69,10 @@
7169
/* Updated values for a nested illustrated message when state changes */
7270
--mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover));
7371
color: var(--spectrum-drop-zone-illustration-color-hover);
72+
73+
.spectrum-DropZone-stroke-path {
74+
stroke-dasharray: none;
75+
}
7476
}
7577

7678
&.is-filled {
@@ -101,13 +103,23 @@
101103
}
102104
}
103105

106+
.spectrum-DropZone-stroke {
107+
position: absolute;
108+
inset-block-start: -2px;
109+
inset-inline-start: -2px;
110+
inline-size: 101%;
111+
block-size: 101.5%;
112+
pointer-events: none;
113+
}
114+
115+
.spectrum-DropZone-stroke-path {
116+
stroke: var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color));
117+
stroke-dasharray: calc(var(--spectrum-drop-zone-border-dash-length)/2) calc(var(--spectrum-drop-zone-border-dash-gap)/2);
118+
rx: calc(var(--spectrum-drop-zone-corner-radius)/2);
119+
}
120+
104121
.spectrum-DropZone-content {
105-
display: var(--mod-drop-zone-content-display, none);
106-
block-size: 100%;
107-
align-items: center;
108-
justify-content: center;
109-
position: relative;
110-
z-index: 10;
122+
max-inline-size: var(--mod-illustrated-message-vertical-maximum-width);
111123
}
112124

113125
.spectrum-DropZone-actions {
@@ -134,6 +146,13 @@
134146
}
135147
}
136148

149+
/********* Illustrated Message *********/
150+
.spectrum-DropZone {
151+
.spectrum-IllustratedMessage {
152+
justify-content: center;
153+
}
154+
}
155+
137156
/********* WHCM *********/
138157
@media (forced-colors: active) {
139158
.spectrum-DropZone {

‎components/dropzone/stories/dropzone.stories.js

+10-15
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
2-
import { SizingTemplate } from "@spectrum-css/dropzone/stories/template.js";
2+
import { Template } from "@spectrum-css/dropzone/stories/template.js";
33
import { default as IllustratedMessage } from "@spectrum-css/illustratedmessage/stories/illustratedmessage.stories.js";
4-
import { Template as Link } from "@spectrum-css/link/stories/template.js";
4+
import { Sizes } from "@spectrum-css/preview/decorators";
55
import { disableDefaultModes } from "@spectrum-css/preview/modes";
66
import { isDragged } from "@spectrum-css/preview/types";
7-
import { html } from "lit";
87
import metadata from "../dist/metadata.json";
98
import packageJson from "../package.json";
109
import { DropzoneGroup } from "./dropzone.test.js";
@@ -50,17 +49,7 @@ export default {
5049
};
5150

5251
export const Default = DropzoneGroup.bind({});
53-
Default.args = {
54-
description: [
55-
() => {
56-
return html`${Link({ url: "#", text: "Select a file" })} from your computer.`;
57-
},
58-
],
59-
label: "Drop file to replace",
60-
customStyles: {
61-
width: "300px",
62-
},
63-
};
52+
Default.args = {};
6453

6554
// ********* VRT ONLY ********* //
6655
export const WithForcedColors = DropzoneGroup.bind({});
@@ -74,7 +63,13 @@ WithForcedColors.parameters = {
7463
};
7564

7665

77-
export const Sizing = SizingTemplate.bind({});
66+
export const Sizing = (args, context) => Sizes({
67+
Template: Template,
68+
withBorder: false,
69+
withHeader: false,
70+
...args
71+
}, context);
72+
7873
Sizing.args = {};
7974
Sizing.tags = ["!dev"];
8075
Sizing.parameters = {

‎components/dropzone/stories/template.js

+43-44
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
22
import { Template as Button } from "@spectrum-css/button/stories/template.js";
33
import { Template as IllustratedMessage } from "@spectrum-css/illustratedmessage/stories/template.js";
4-
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
54
import { html } from "lit";
65
import { classMap } from "lit/directives/class-map.js";
76
import { ifDefined } from "lit/directives/if-defined.js";
7+
import { styleMap } from "lit/directives/style-map.js";
88

99

1010

@@ -15,6 +15,7 @@ export const Template = ({
1515
isDragged = false,
1616
isFilled = false,
1717
customClasses = [],
18+
customStyles = {},
1819
title,
1920
description,
2021
label,
@@ -34,27 +35,47 @@ export const Template = ({
3435
id=${ifDefined(id)}
3536
role="region"
3637
tabindex="0"
37-
style="${isDragged && isFilled ? `background-image:url(${image});` : null } width: 300px;"
38+
style=${[isDragged && isFilled ? `background-image:url(${image});` : null, styleMap(customStyles)].filter(Boolean).join("; ")}
3839
>
39-
${IllustratedMessage({
40-
...globals,
41-
title: title,
42-
description: description,
43-
customIllustration: customSvg,
44-
size: size
45-
})}
46-
<div class="${rootClass}-actions">
47-
${isDragged && isFilled
48-
? ActionButton({
49-
label: label,
50-
customClasses: [`${rootClass}-button`],
51-
isSelected: true,
52-
isEmphasized: true
53-
})
54-
: Button({
55-
label: label,
56-
size: size
57-
})}
40+
<svg
41+
class="${rootClass}-stroke"
42+
xmlns="http://www.w3.org/2000/svg"
43+
viewBox="0 0 206 122"
44+
preserveAspectRatio="none"
45+
>
46+
<rect
47+
x="1"
48+
y="1"
49+
width="204"
50+
height="120"
51+
rx="8"
52+
ry="8"
53+
fill="none"
54+
stroke-linecap="round"
55+
class="${rootClass}-stroke-path"
56+
/>
57+
</svg>
58+
<div class="${rootClass}-content">
59+
${IllustratedMessage({
60+
...globals,
61+
title: title,
62+
description: description,
63+
customIllustration: customSvg,
64+
size: size
65+
})}
66+
<div class="${rootClass}-actions">
67+
${isDragged && isFilled
68+
? ActionButton({
69+
label: label,
70+
customClasses: [`${rootClass}-button`],
71+
isSelected: true,
72+
isEmphasized: true
73+
})
74+
: Button({
75+
label: label,
76+
size: size
77+
})}
78+
</div>
5879
</div>
5980
</div>
6081
`;
@@ -63,27 +84,5 @@ export const Template = ({
6384
const customSvg = () => html`
6485
<svg class="spectrum-IllustratedMessage-illustration" fill="none" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
6586
<path d="m33.454 15.74c-4.1061 0-7.4545 3.3125-7.4545 7.4231v36.154c0 4.1106 3.3484 7.4231 7.4545 7.4231h29.091c4.1061 0 7.4545-3.3125 7.4545-7.4231v-21.254c0-1.9724-0.7882-3.8618-2.1875-5.253l-14.987-14.9c-1.3989-1.3908-3.2937-2.1701-5.2671-2.1701h-14.104zm-3.4545 7.4231c0-1.8796 1.5357-3.4231 3.4545-3.4231h14.104c0.92 0 1.7999 0.3634 2.4469 1.0067l14.987 14.9c0.6466 0.6429 1.0077 1.5123 1.0077 2.4164v21.254c0 1.8796-1.5357 3.4231-3.4545 3.4231h-29.091c-1.9188 0-3.4545-1.5435-3.4545-3.4231v-36.154zm9.7659 22.028c-0.8552-0.6991-2.1152-0.5726-2.8143 0.2825-0.6991 0.8552-0.5726 2.1152 0.2825 2.8143l8.2189 6.7193c0.3659 0.4459 0.9208 0.7309 1.5426 0.7323h0.0189l0.0167-2e-4c0.4638 0.0071 0.9295-0.1465 1.308-0.4605l8.4378-7c0.8501-0.7053 0.9675-1.9662 0.2623-2.8163-0.7053-0.8501-1.9662-0.9675-2.8163-0.2623l-5.2138 4.3254 0.0345-15.782c0.0024-1.1046-0.8911-2.002-1.9956-2.0044-1.1046-0.0024-2.002 0.8911-2.0044 1.9956l-0.0344 15.743-5.2434-4.2867zm-12.766 30.548c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2h7.5c1.1046 0 2-0.8954 2-2s-0.8954-2-2-2h-7.5zm-15-9.5c-1.1046 0-2-0.8954-2-2v-7.5c0-1.1046 0.8954-2 2-2s2 0.8954 2 2v7.5c0 1.1046-0.8954 2-2 2zm70-1.5c0 1.1046 0.8954 2 2 2s2-0.8954 2-2v-7.5c0-1.1046-0.8954-2-2-2s-2 0.8954-2 2v7.5zm-61-22c0-1.1046-0.8954-2-2-2h-3.5c-3.0376 0-5.5 2.4624-5.5 5.5v3.5c0 1.1046 0.8954 2 2 2s2-0.8954 2-2v-3.5c0-0.8284 0.6716-1.5 1.5-1.5h3.5c1.1046 0 2-0.8954 2-2zm56-2c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2h3.5c0.8284 0 1.5 0.6716 1.5 1.5v3.5c0 1.1046 0.8954 2 2 2s2-0.8954 2-2v-3.5c0-3.0376-2.4624-5.5-5.5-5.5h-3.5zm-65 28c-1.1046 0-2 0.8954-2 2v3.5c0 3.0376 2.4624 5.5 5.5 5.5h3.5c1.1046 0 2-0.8954 2-2s-0.8954-2-2-2h-3.5c-0.8284 0-1.5-0.6716-1.5-1.5v-3.5c0-1.1046-0.8954-2-2-2zm74 2c0-1.1046-0.8954-2-2-2s-2 0.8954-2 2v3.5c0 0.8284-0.6716 1.5-1.5 1.5h-3.5c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2h3.5c3.0376 0 5.5-2.4624 5.5-5.5v-3.5zm-44 7c0-1.1046 0.8954-2 2-2h7.5c1.1046 0 2 0.8954 2 2s-0.8954 2-2 2h-7.5c-1.1046 0-2-0.8954-2-2zm19-2c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2h7.5c1.1046 0 2-0.8954 2-2s-0.8954-2-2-2h-7.5z" clip-rule="evenodd" fill-rule="evenodd"/>
66-
</svg>
67-
`;
68-
69-
export const SizingTemplate = (args) => html`
70-
${["s", "m", "l"].map((size) => {
71-
return html` <div>
72-
${Typography({
73-
semantics: "detail",
74-
size: "s",
75-
content: [
76-
{
77-
s: "Small",
78-
m: "Medium",
79-
l: "Large",
80-
}[size],
81-
],
82-
})}
83-
${Template({
84-
...args,
85-
size,
86-
})}
87-
</div>`;
88-
})}
87+
</svg>
8988
`;

‎components/illustratedmessage/stories/illustratedmessage.stories.js

-10
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,6 @@ export default {
5959
},
6060
control: "boolean",
6161
},
62-
orientation: {
63-
name: "Orientation",
64-
type: { name: "string" },
65-
table: {
66-
type: { summary: "string" },
67-
category: "Component",
68-
},
69-
options: ["vertical", "horizontal"],
70-
control: "select",
71-
},
7262
},
7363
args: {
7464
rootClass: "spectrum-IllustratedMessage",

0 commit comments

Comments
 (0)