Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit 102ea39

Browse files
kentokagekentokage
authored
feat(file-input): new module (#2435)
1 parent c56d9d1 commit 102ea39

File tree

22 files changed

+2607
-0
lines changed

22 files changed

+2607
-0
lines changed

‎.changeset/lemon-dancers-serve.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/skin": minor
3+
---
4+
5+
feat(file-upload): new module

‎dist/file-input/file-input.css‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
div.file-input {
2+
display: grid;
3+
grid-template-areas: "center";
4+
grid-template-columns: 1fr;
5+
grid-template-rows: 1fr;
6+
}
7+
8+
div.file-input__container,
9+
input.file-input__input[type="file"] {
10+
border-radius: var(--file-input-border-radius, var(--border-radius-100));
11+
grid-area: center;
12+
}
13+
14+
div.file-input__container {
15+
background-color: var(
16+
--file-input-background-color,
17+
var(--color-background-secondary)
18+
);
19+
border: 1px dashed;
20+
display: flex;
21+
flex-direction: row;
22+
gap: var(--spacing-100);
23+
min-width: -moz-fit-content;
24+
min-width: fit-content;
25+
padding: var(--spacing-200);
26+
pointer-events: none;
27+
z-index: 1;
28+
}
29+
30+
div.file-input___container--dragged-over {
31+
background-color: var(
32+
--file-input-dragged-over-background-color,
33+
var(--color-background-tertiary)
34+
);
35+
}
36+
37+
div.file-input__upload-icon {
38+
align-self: center;
39+
background-color: var(
40+
--file-input-upload-icon-background-color,
41+
var(--color-background-primary)
42+
);
43+
border-radius: 99px;
44+
padding: var(--spacing-150);
45+
}
46+
47+
div.file-input__upload-icon svg {
48+
fill: var(--file-input-upload-icon-fill, var(--color-foreground-primary));
49+
height: var(--spacing-300);
50+
width: var(--spacing-300);
51+
}
52+
53+
div.file-input__content {
54+
align-items: start;
55+
display: flex;
56+
flex-direction: column;
57+
flex-grow: 1;
58+
justify-content: center;
59+
}
60+
61+
.file-input__content-header {
62+
color: var(
63+
--file-input-content-header-color,
64+
var(--color-foreground-primary)
65+
);
66+
font-size: var(--font-size-14);
67+
font-weight: 700;
68+
line-height: var(--spacing-250);
69+
margin-block: 0 var(--spacing-50);
70+
}
71+
72+
span.file-input__content-subheader {
73+
color: var(
74+
--file-input-content-subheader-color,
75+
var(--color-foreground-secondary)
76+
);
77+
font-size: var(--font-size-12);
78+
font-weight: 400;
79+
line-height: var(--spacing-200);
80+
-webkit-margin-after: var(--spacing-100);
81+
margin-block-end: var(--spacing-100);
82+
}
83+
84+
span.file-input__content-cta {
85+
-webkit-text-decoration-line: underline;
86+
text-decoration-line: underline;
87+
}
88+
89+
@media screen and (min-width: 768px) {
90+
div.file-input__container {
91+
gap: var(--spacing-300);
92+
}
93+
div.file-input__container,
94+
div.file-input__upload-icon {
95+
padding: var(--spacing-300);
96+
}
97+
.file-input__content-header {
98+
font-size: var(--font-size-16);
99+
line-height: var(--spacing-300);
100+
}
101+
span.file-input__content-subheader {
102+
font-size: var(--font-size-14);
103+
line-height: var(--spacing-250);
104+
}
105+
}

‎dist/file-preview-card-group/file-preview-card-group.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
div.file-preview-card-group {
2+
container: file-preview-cards-container/inline-size;
3+
}
4+
5+
div.file-preview-card-group ul {
6+
display: grid;
7+
gap: var(--spacing-100);
8+
grid-template-columns: repeat(2, 1fr);
9+
list-style: none;
10+
margin: 0;
11+
padding: 0;
12+
width: 100%;
13+
}
14+
15+
div.file-preview-card-group ul li {
16+
height: max-content;
17+
}
18+
19+
@supports not (contain: inline-size) {
20+
@media (min-width: 512px) {
21+
div.file-preview-card-group ul {
22+
gap: var(--spacing-100);
23+
grid-template-columns: repeat(4, 1fr);
24+
}
25+
}
26+
@media (min-width: 768px) {
27+
div.file-preview-card-group ul {
28+
gap: var(--spacing-200);
29+
grid-template-columns: repeat(5, 1fr);
30+
}
31+
}
32+
@media (min-width: 1024px) {
33+
div.file-preview-card-group ul {
34+
gap: var(--spacing-200);
35+
grid-template-columns: repeat(7, 1fr);
36+
}
37+
}
38+
@media (min-width: 1280px) {
39+
div.file-preview-card-group ul {
40+
gap: var(--spacing-200);
41+
grid-template-columns: repeat(9, 1fr);
42+
}
43+
}
44+
@media (min-width: 1440px) {
45+
div.file-preview-card-group ul {
46+
gap: var(--spacing-200);
47+
grid-template-columns: repeat(10, 1fr);
48+
}
49+
}
50+
@media (min-width: 1680px) {
51+
div.file-preview-card-group ul {
52+
gap: var(--spacing-200);
53+
grid-template-columns: repeat(12, 1fr);
54+
}
55+
}
56+
@media (min-width: 1920px) {
57+
div.file-preview-card-group ul {
58+
gap: var(--spacing-200);
59+
grid-template-columns: repeat(14, 1fr);
60+
}
61+
}
62+
}
63+
@container file-preview-cards-container (inline-size >= 512px) {
64+
div.file-preview-card-group ul {
65+
gap: var(--spacing-100);
66+
grid-template-columns: repeat(4, 1fr);
67+
}
68+
}
69+
@container file-preview-cards-container (inline-size >= 768px) {
70+
div.file-preview-card-group ul {
71+
gap: var(--spacing-200);
72+
grid-template-columns: repeat(5, 1fr);
73+
}
74+
}
75+
@container file-preview-cards-container (inline-size >= 1024px) {
76+
div.file-preview-card-group ul {
77+
gap: var(--spacing-200);
78+
grid-template-columns: repeat(7, 1fr);
79+
}
80+
}
81+
@container file-preview-cards-container (inline-size >= 1280px) {
82+
div.file-preview-card-group ul {
83+
gap: var(--spacing-200);
84+
grid-template-columns: repeat(9, 1fr);
85+
}
86+
}
87+
@container file-preview-cards-container (inline-size >= 1440px) {
88+
div.file-preview-card-group ul {
89+
gap: var(--spacing-200);
90+
grid-template-columns: repeat(10, 1fr);
91+
}
92+
}
93+
@container file-preview-cards-container (inline-size >= 1680px) {
94+
div.file-preview-card-group ul {
95+
gap: var(--spacing-200);
96+
grid-template-columns: repeat(12, 1fr);
97+
}
98+
}
99+
@container file-preview-cards-container (inline-size >= 1920px) {
100+
div.file-preview-card-group ul {
101+
gap: var(--spacing-200);
102+
grid-template-columns: repeat(14, 1fr);
103+
}
104+
}

‎dist/file-preview-card/file-preview-card.css‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
.file-preview-card {
2+
aspect-ratio: 1/1;
3+
background-color: var(
4+
--file-preview-card-background-color,
5+
var(--color-background-secondary)
6+
);
7+
border-radius: var(
8+
--file-preview-card-border-radius,
9+
var(--border-radius-100)
10+
);
11+
box-sizing: border-box;
12+
display: grid;
13+
grid-template-areas: " . . menu-action " " . center-action . " " label . . ";
14+
grid-template-columns: repeat(3, 1fr);
15+
grid-template-rows: repeat(3, 1fr);
16+
height: 100%;
17+
max-width: 396px;
18+
min-width: 120px;
19+
width: 100%;
20+
}
21+
22+
.file-preview-card__body {
23+
align-items: center;
24+
display: flex;
25+
grid-area: 1/1/4/4;
26+
justify-content: center;
27+
}
28+
29+
.file-preview-card__body img,
30+
.file-preview-card__body video {
31+
border-radius: var(
32+
--file-preview-card-border-radius,
33+
var(--border-radius-100)
34+
);
35+
height: 100%;
36+
object-fit: contain;
37+
width: 100%;
38+
}
39+
40+
.file-preview-card__body--fade {
41+
opacity: 0.5;
42+
}
43+
44+
.file-preview-card__document-icon.icon {
45+
height: 40%;
46+
width: 40%;
47+
}
48+
49+
.file-preview-card .file-preview-card__menu-action {
50+
grid-area: menu-action;
51+
justify-self: end;
52+
z-index: 1;
53+
}
54+
55+
.file-preview-card .file-preview-card__menu-action .icon-btn {
56+
height: var(--spacing-400);
57+
margin: var(--spacing-100);
58+
width: var(--spacing-400);
59+
}
60+
61+
.file-preview-card .file-preview-card__menu-action .icon-btn:not(:hover) {
62+
background-color: var(
63+
--file-preview-card-menu-action-background-color,
64+
var(--color-background-primary)
65+
);
66+
}
67+
68+
.file-preview-card__preview-action {
69+
align-self: end;
70+
grid-area: label;
71+
z-index: 1;
72+
}
73+
74+
.file-preview-card__preview-action .icon-btn {
75+
align-items: center;
76+
background-color: var(
77+
--file-preview-card-label-background-color,
78+
var(--color-background-primary)
79+
);
80+
display: flex;
81+
flex-direction: row;
82+
gap: var(--spacing-50);
83+
height: var(--spacing-250);
84+
margin: var(--spacing-100);
85+
padding: var(--spacing-25) var(--spacing-100);
86+
width: max-content;
87+
}
88+
89+
.file-preview-card__preview-action-text {
90+
color: var(
91+
--file-preview-card-label-text-color,
92+
var(--color-foreground-primary)
93+
);
94+
font-size: var(--font-size-12);
95+
font-weight: 400;
96+
}
97+
98+
.file-preview-card__video-icon.icon {
99+
height: var(--spacing-150);
100+
width: var(--spacing-150);
101+
}
102+
103+
.file-preview-card__body-action {
104+
align-self: center;
105+
grid-area: center-action;
106+
justify-self: center;
107+
z-index: 1;
108+
}
109+
110+
.file-preview-card__body-action .icon-btn {
111+
aspect-ratio: 1/1;
112+
background-color: rgba(
113+
var(
114+
--file-preview-card-center-action-background-color-rgb,
115+
var(--color-background-strong-rgb)
116+
),
117+
0.5
118+
);
119+
color: var(
120+
--file-preview-card-center-action-color,
121+
var(--color-foreground-on-strong)
122+
);
123+
font-size: var(--font-size-14);
124+
font-weight: 700;
125+
height: -moz-fit-content;
126+
height: fit-content;
127+
line-height: var(--spacing-250);
128+
padding: var(--spacing-100);
129+
width: -moz-fit-content;
130+
width: fit-content;
131+
}
132+
133+
.file-preview-card__body-action .icon-btn:active,
134+
.file-preview-card__body-action .icon-btn:focus,
135+
.file-preview-card__body-action .icon-btn:hover {
136+
color: var(
137+
--file-preview-card-center-action-interactive-color,
138+
var(--color-foreground-primary)
139+
);
140+
}
141+
142+
.file-preview-card__body-action .icon-btn:focus,
143+
.file-preview-card__body-action .icon-btn:hover {
144+
background-color: rgba(
145+
var(
146+
--file-preview-card-center-action-interactive-background-color-rgb,
147+
var(--color-state-secondary-hover-rgb)
148+
),
149+
0.5
150+
);
151+
}
152+
153+
.file-preview-card__body-action .icon-btn:active {
154+
background-color: rgba(
155+
var(
156+
--file-preview-card-center-action-interactive-active-background-color-rgb,
157+
var(--color-state-secondary-active-rgb)
158+
),
159+
0.5
160+
);
161+
}

‎dist/tokens/evo-core.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@
55
--color-neutral-100: #fff;
66
--color-neutral-100-rgb: 255, 255, 255;
77
--color-neutral-200: #f7f7f7;
8+
--color-neutral-200-rgb: 247, 247, 247;
89
--color-neutral-300: #e5e5e5;
910
--color-neutral-400: #c7c7c7;
1011
--color-neutral-500: #8f8f8f;
1112
--color-neutral-600: #707070;
1213
--color-neutral-700: #363636;
1314
--color-neutral-800: #191919;
15+
--color-neutral-800-rgb: 25, 25, 25;
1416
--color-neutral-900: #000;
1517
--color-neutral-900-rgb: 0, 0, 0;
1618
--color-orange-100: #fffaf5;

0 commit comments

Comments
 (0)