Skip to content

Commit 8773c2c

Browse files
curdajcurdaj
committed
Refactor(web): Update UNSTABLE_EmptyState according to design #DS-1311
1 parent 09aa447 commit 8773c2c

File tree

3 files changed

+45
-84
lines changed

3 files changed

+45
-84
lines changed

‎packages/web/src/scss/components/UNSTABLE_EmptyState/_UNSTABLE_EmptyState.scss‎

Lines changed: 6 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,19 @@
55
.UNSTABLE_EmptyState {
66
display: flex;
77
flex-direction: column;
8-
gap: theme.$root-gap;
98
align-items: center;
10-
padding-block: theme.$root-padding-block;
9+
padding: theme.$root-padding;
10+
text-align: center;
1111

1212
@include breakpoint.up(map.get(theme.$breakpoints, desktop)) {
13-
padding-block: theme.$root-padding-block-desktop;
13+
padding: theme.$root-padding-desktop;
1414
}
1515
}
1616

17-
.UNSTABLE_EmptyState__heading {
18-
margin-bottom: theme.$heading-margin-bottom;
19-
}
20-
21-
.UNSTABLE_EmptyState__buttons {
22-
display: flex;
23-
flex-direction: column;
24-
gap: theme.$buttons-gap;
25-
justify-content: center;
26-
width: 100%;
27-
28-
@include breakpoint.up(map.get(theme.$breakpoints, tablet)) {
29-
flex-direction: row;
30-
}
31-
}
32-
33-
.UNSTABLE_EmptyState__wrapper {
17+
.UNSTABLE_EmptyState__section {
3418
display: flex;
3519
flex-direction: column;
36-
gap: theme.$wrapper-gap;
37-
align-self: stretch;
3820
align-items: center;
39-
}
40-
41-
.UNSTABLE_EmptyState__icon {
42-
display: flex;
43-
align-items: center;
44-
padding: theme.$icon-padding;
45-
border: 1px solid theme.$icon-border-color;
46-
border-radius: theme.$icon-border-radius;
21+
width: 100%;
22+
max-width: 400px;
4723
}

‎packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
@use '@tokens' as tokens;
22

33
$breakpoints: tokens.$breakpoints;
4-
$root-gap: tokens.$space-700;
5-
$root-padding-block: tokens.$space-800;
6-
$root-padding-block-desktop: tokens.$space-900;
7-
$heading-margin-bottom: tokens.$space-500;
4+
$root-padding: tokens.$space-1000 tokens.$space-700;
5+
$root-padding-desktop: tokens.$space-1000 tokens.$space-800;
86
$buttons-gap: tokens.$space-600;
9-
$wrapper-gap: tokens.$space-600;
10-
$icon-padding: tokens.$space-500;
11-
$icon-border-radius: tokens.$radius-200;
12-
$icon-border-color: tokens.$border-secondary-default;

‎packages/web/src/scss/components/UNSTABLE_EmptyState/index.html‎

Lines changed: 37 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -4,59 +4,50 @@
44
<h2 class="docs-Heading">Default</h2>
55
<div class="docs-Stack docs-Stack--stretch">
66

7-
<div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-700);">
8-
<div class="Stack UNSTABLE_EmptyState__section">
9-
<div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
10-
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true">
11-
<use href="/assets/icons/svg/sprite.svg#search"></use>
12-
</svg>
13-
</div>
14-
</div>
15-
<div class="Stack Stack--hasSpacing UNSTABLE_EmptyState__section"
16-
style="--stack-spacing: var(--spirit-space-500);"
17-
>
18-
<h2 class="typography-heading-xsmall-text">Headline</h2>
19-
<p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common
20-
placeholder text used to demonstrate the graphic elements
21-
</p>
22-
</div>
23-
<div class="Stack UNSTABLE_EmptyState__section">
24-
<div class="UNSTABLE_EmptyState__buttons">
25-
<a class="Button Button--primary Button--medium" href="#"> Action</a>
26-
<a class="Button Button--secondary Button--medium" href="#"> Action</a>
27-
</div>
28-
</div>
29-
<div class="Stack UNSTABLE_EmptyState__section"><a href="#" class="link-primary">Link to something</a>
7+
<div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-700);"> <div class="Stack UNSTABLE_EmptyState__section"> <div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
8+
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true">
9+
<use href="/assets/icons/svg/sprite.svg#search"></use>
10+
</svg>
11+
</div>
12+
</div>
13+
<div class="Stack Stack--hasSpacing UNSTABLE_EmptyState__section" style="--stack-spacing: var(--spirit-space-500);">
14+
<h2 class="typography-heading-xsmall-text">Headline</h2>
15+
<p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</p>
16+
</div>
17+
<div class="Stack UNSTABLE_EmptyState__section">
18+
<div class="UNSTABLE_ActionLayout">
19+
<a class="Button Button--primary Button--medium" href="#">Action</a>
20+
<a class="Button Button--secondary Button--medium" href="#">Action</a>
3021
</div>
3122
</div>
23+
<div class="Stack UNSTABLE_EmptyState__section">
24+
<a href="#" class="link-primary">Link to something</a>
25+
</div>
26+
</div>
3227

33-
<div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-700);">
34-
<div class="Stack UNSTABLE_EmptyState__section">
35-
<div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
36-
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true">
37-
<use href="/assets/icons/svg/sprite.svg#search"></use>
38-
</svg>
39-
</div>
28+
<div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-700);">
29+
<div class="Stack UNSTABLE_EmptyState__section">
30+
<div style="border: 1px solid #E9E9E9; border-radius: 10px; padding: 12px ">
31+
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" aria-hidden="true">
32+
<use href="/assets/icons/svg/sprite.svg#search"></use>
33+
</svg>
4034
</div>
41-
<div class="Stack Stack--hasSpacing UNSTABLE_EmptyState__section"
42-
style="--stack-spacing: var(--spirit-space-500);"
43-
>
44-
<h2 class="typography-heading-xsmall-text">Headline</h2>
45-
<p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common
46-
placeholder text used to demonstrate the graphic elements
47-
</p>
48-
</div>
49-
<div class="Stack UNSTABLE_EmptyState__section">
50-
<div class="UNSTABLE_EmptyState__buttons">
51-
<a class="Button Button--primary Button--medium" href="#"> Action
52-
</a>
53-
</div>
35+
</div>
36+
<div class="Stack Stack--hasSpacing UNSTABLE_EmptyState__section" style="--stack-spacing: var(--spirit-space-500);">
37+
<h2 class="typography-heading-xsmall-text">Headline</h2>
38+
<p class="typography-body-medium-text-regular">In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements</p>
39+
</div>
40+
<div class="Stack UNSTABLE_EmptyState__section">
41+
<div class="UNSTABLE_ActionLayout">
42+
<a class="Button Button--primary Button--medium" href="#">Action</a>
43+
<a class="Button Button--secondary Button--medium" href="#">Action</a>
5444
</div>
5545
</div>
46+
</div>
5647

57-
<div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-700);">
58-
Custom content only
59-
</div>
48+
<div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-700);">
49+
Custom content only
50+
</div>
6051

6152
</div>
6253
</section>

0 commit comments

Comments
 (0)