Skip to content

Commit 2d4bda2

Browse files
TuritoTurito
authored
feat(x-design-system): suggestion component (#2042)
* feat(x-design-system): sliding-panel component * feat(x-design-system): suggestion component * feat(x-design-system): suggestion component
1 parent 3eb4f6b commit 2d4bda2

File tree

4 files changed

+179
-0
lines changed

4 files changed

+179
-0
lines changed

‎packages/x-design-system/demo/src/app.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<Highlight />
88
<Input />
99
<InputGroup />
10+
<Suggestion />
1011
<SlidingPanel />
1112
<Picture />
1213
<Scroll />
@@ -32,5 +33,6 @@ import Picture from './components/picture.vue'
3233
import ProgressBar from './components/progress-bar.vue'
3334
import Scroll from './components/scroll.vue'
3435
import SlidingPanel from './components/sliding-panel/index.vue'
36+
import Suggestion from './components/suggestion.vue'
3537
import Typography from './components/typography.vue'
3638
</script>

‎packages/x-design-system/demo/src/components/suggestion.vue‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<template>
2+
<Wrapper feature="Suggestion" :rows="rows">
3+
<template #default>
4+
<button class="xds:suggestion xds:w-30">
5+
<CuratedIcon class="xds:icon" />
6+
very long default suggestion to test line wrap alignment
7+
</button>
8+
</template>
9+
<template #color>
10+
<button class="xds:suggestion">
11+
<CuratedIcon class="xds:icon" />
12+
suggestion
13+
</button>
14+
<button v-for="(value, key) in colors" :key="key" class="xds:suggestion" :class="value">
15+
<CuratedIcon class="xds:icon" />
16+
{{ cleanedValue(value) }} suggestion
17+
</button>
18+
</template>
19+
<template #size>
20+
<button
21+
v-for="size in ['xds:suggestion-sm', 'xds:suggestion-md', 'xds:suggestion-lg']"
22+
:key="size"
23+
class="xds:suggestion"
24+
:class="size"
25+
>
26+
<CuratedIcon class="xds:icon" />
27+
{{ cleanedValue(size) }} suggestion
28+
</button>
29+
</template>
30+
<template #outlined>
31+
<button class="xds:suggestion xds:suggestion-outlined">
32+
<CuratedIcon class="xds:icon" />
33+
outlined suggestion
34+
</button>
35+
<button
36+
v-for="(value, key) in colors"
37+
:key="key"
38+
class="xds:suggestion xds:suggestion-outlined"
39+
:class="value"
40+
>
41+
<CuratedIcon class="xds:icon" />
42+
outlined {{ cleanedValue(value) }} suggestion
43+
</button>
44+
</template>
45+
<template #outlined-size>
46+
<button
47+
v-for="size in ['xds:suggestion-sm', 'xds:suggestion-md', 'xds:suggestion-lg']"
48+
:key="size"
49+
class="xds:suggestion xds:suggestion-outlined"
50+
:class="size"
51+
>
52+
<CuratedIcon class="xds:icon" />
53+
outlined {{ cleanedValue(size) }} suggestion
54+
</button>
55+
</template>
56+
<template #ghost>
57+
<button class="xds:suggestion xds:suggestion-ghost">
58+
<CuratedIcon class="xds:icon" />
59+
ghost suggestion
60+
</button>
61+
<button
62+
v-for="(value, key) in colors"
63+
:key="key"
64+
class="xds:suggestion xds:suggestion-ghost"
65+
:class="value"
66+
>
67+
<CuratedIcon class="xds:icon" />
68+
ghost {{ cleanedValue(value) }} suggestion
69+
</button>
70+
</template>
71+
<template #ghost-size>
72+
<button
73+
v-for="size in ['xds:suggestion-sm', 'xds:suggestion-md', 'xds:suggestion-lg']"
74+
:key="size"
75+
class="xds:suggestion xds:suggestion-ghost"
76+
:class="size"
77+
>
78+
<CuratedIcon class="xds:icon" />
79+
ghost {{ cleanedValue(size) }} suggestion
80+
</button>
81+
</template>
82+
<template #combinations>
83+
<button class="xds:suggestion xds:suggestion-success xds:suggestion-md">
84+
<CuratedIcon class="xds:icon" />
85+
success md suggestion
86+
</button>
87+
<button class="xds:suggestion xds:suggestion-auxiliary xds:suggestion-md">
88+
<CuratedIcon class="xds:icon" />
89+
auxiliary md suggestion
90+
</button>
91+
<button class="xds:suggestion xds:suggestion-error xds:suggestion-lg">
92+
<CuratedIcon class="xds:icon" />
93+
error lg suggestion
94+
</button>
95+
</template>
96+
</Wrapper>
97+
</template>
98+
99+
<script setup lang="ts">
100+
import CuratedIcon from './icons/curated.svg'
101+
import Wrapper from './wrapper.vue'
102+
103+
const rows = [
104+
'default',
105+
'color',
106+
'size',
107+
'outlined',
108+
'outlined-size',
109+
'ghost',
110+
'ghost-size',
111+
'combinations',
112+
]
113+
const colors = {
114+
neutral: 'xds:suggestion-neutral',
115+
lead: 'xds:suggestion-lead',
116+
auxiliary: 'xds:suggestion-auxiliary',
117+
accent: 'xds:suggestion-accent',
118+
highlight: 'xds:suggestion-highlight',
119+
success: 'xds:suggestion-success',
120+
warning: 'xds:suggestion-warning',
121+
error: 'xds:suggestion-error',
122+
}
123+
124+
const cleanedValue = (value: string) => value.replace(/^xds:suggestion-/, '')
125+
</script>

‎packages/x-design-system/lib/components/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@
1111
@import './progress-bar.css';
1212
@import './scroll.css';
1313
@import './sliding-panel.css';
14+
@import './suggestion.css';
1415
@import './typography.css';

‎packages/x-design-system/lib/components/suggestion.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/* Base */
2+
@utility suggestion {
3+
@apply xds:font-family-main xds:font-regular xds:text-start xds:text-neutral-90;
4+
@apply xds:grid xds:grid-flow-col xds:items-center xds:content-center xds:justify-start;
5+
@apply xds:box-border xds:cursor-pointer;
6+
7+
/* `@apply xds:suggestion-md;` can not be use here because cause circular dependency. */
8+
@apply xds:min-h-32 xds:gap-8 xds:text-sm;
9+
10+
&:hover {
11+
@apply xds:underline;
12+
}
13+
14+
& .xds\:icon {
15+
@apply xds:icon-offset;
16+
}
17+
}
18+
19+
/* Sizes */
20+
@utility suggestion-sm {
21+
@apply xds:min-h-24 xds:gap-8 xds:text-sm;
22+
}
23+
@utility suggestion-md {
24+
@apply xds:min-h-32 xds:gap-8 xds:text-sm;
25+
}
26+
@utility suggestion-lg {
27+
@apply xds:min-h-48 xds:gap-24 xds:text-md;
28+
}
29+
30+
/* Outlined */
31+
@utility suggestion-outlined {
32+
@apply xds:bg-neutral-0 xds:border-1 xds:border-current;
33+
@apply xds:ps-8 xds:pe-8;
34+
35+
&:hover {
36+
@apply xds:bg-neutral-10 xds:no-underline;
37+
}
38+
39+
&.xds\:suggestion-lg {
40+
@apply xds:ps-12 xds:pe-12;
41+
}
42+
}
43+
44+
@utility suggestion-ghost {
45+
@apply xds:suggestion-outlined;
46+
@apply xds:border-neutral-0;
47+
}
48+
49+
@utility suggestion-* {
50+
color: --value(--color- * -75);
51+
}

0 commit comments

Comments
 (0)