Skip to content

Commit a47d6a0

Browse files
u12206050u12206050
authored
react/allow more lines (#335)
* Support more emojis on react * Fix test
1 parent eb5da85 commit a47d6a0

File tree

4 files changed

+238
-145
lines changed

4 files changed

+238
-145
lines changed

‎design-library/src/components/BccReact/BccReact.css‎

Lines changed: 102 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,107 @@
11
@layer components {
2-
.bcc-react {
3-
@apply relative flex w-full items-center overflow-visible;
4-
}
5-
.bcc-react-toggle {
6-
@apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 leading-tight transition;
7-
}
8-
.bcc-react-list {
9-
@apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
10-
}
11-
.bcc-react-empty {
12-
@apply text-label flex items-center;
13-
}
14-
15-
.bcc-react-selector {
16-
@apply absolute -left-1 z-50 flex items-center drop-shadow-md gap-1 rounded-full bg-neutral-100 px-1;
17-
/* Default --bottom */
18-
@apply top-11 origin-top-left;
19-
}
20-
21-
.bcc-react-selector--top {
22-
@apply -top-10 origin-bottom-left;
23-
}
24-
25-
.bcc-react-selector-item {
26-
@apply p-2 text-xl leading-none;
27-
}
2+
.bcc-react {
3+
@apply relative flex w-full items-center overflow-visible;
4+
}
5+
.bcc-react-toggle {
6+
@apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 leading-tight transition;
7+
}
8+
.bcc-react-list {
9+
@apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
10+
}
11+
.bcc-react-empty {
12+
@apply text-label flex items-center;
13+
}
14+
15+
.bcc-react-selector-container {
16+
@apply absolute z-50 h-9;
17+
@apply top-11 origin-top-left;
18+
}
19+
20+
.bcc-react-selector-container--top {
21+
@apply -top-10 origin-bottom-left;
22+
}
23+
24+
.bcc-react-selector {
25+
@apply flex max-h-9 flex-col overflow-hidden bg-neutral-100 px-0 drop-shadow-md transition-all duration-300 ease-out;
26+
border-radius: 18px;
27+
}
2828

29-
.bcc-react-emoji-list-item {
30-
@apply flex cursor-pointer items-center justify-center rounded-full p-1 text-2xl leading-none drop-shadow transition-all hover:scale-105;
31-
/* Default --not-selected */
32-
@apply text-black bg-neutral-100;
29+
.bcc-react-selector-emojis-container {
30+
@apply flex items-center bg-neutral-100 px-1;
31+
}
32+
33+
.bcc-react-selector-more {
34+
@apply flex w-9 items-center justify-center;
35+
}
36+
.bcc-react-selector-more-btn {
37+
@apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-200;
38+
}
39+
40+
.bcc-react-dropdown-container {
41+
@apply left-0 top-0 -z-10 w-full max-w-full;
42+
width: 296px;
43+
}
44+
.bcc-react-dropdown-container--top {
45+
@apply bottom-0 top-auto pb-0;
46+
}
47+
48+
.bcc-react-selector--expanded {
49+
@apply max-h-56 translate-y-0 overflow-auto;
50+
}
51+
.bcc-react-selector--expanded.bcc-react-selector-rows--1 {
52+
@apply max-h-20;
53+
}
54+
.bcc-react-selector--expanded.bcc-react-selector-rows--2 {
55+
@apply max-h-28;
56+
}
57+
.bcc-react-selector--expanded.bcc-react-selector-rows--3 {
58+
@apply max-h-36;
59+
}
60+
.bcc-react-selector--expanded.bcc-react-selector-rows--4 {
61+
@apply max-h-48;
62+
}
63+
.bcc-react-dropdown-container--top .bcc-react-selector--expanded {
64+
@apply -translate-y-full;
65+
}
66+
67+
.bcc-react-dropdown {
68+
@apply -z-10 flex w-full flex-wrap overflow-hidden px-1;
69+
}
70+
71+
.bcc-react-arrow-down-icon {
72+
@apply h-6 w-6 text-slate-600;
73+
transition: transform 0.3s ease;
74+
}
75+
.bcc-react-arrow-down-icon.open {
76+
transform: rotate(-180deg);
77+
}
78+
79+
.bcc-react-selector-item {
80+
@apply p-2 text-xl leading-none transition-transform duration-200 ease-out;
81+
position: relative;
82+
}
83+
84+
.bcc-react-selector-item--clicked {
85+
animation: scaleFadeOut 300ms forwards;
86+
}
87+
88+
@keyframes scaleFadeOut {
89+
0% {
90+
transform: scale(1);
91+
opacity: 1;
3392
}
34-
.bcc-react-emoji-list-item--selected {
35-
@apply bg-neutral-800 text-white;
93+
100% {
94+
transform: scale(1.4);
95+
opacity: 0;
3696
}
97+
}
98+
99+
.bcc-react-emoji-list-item {
100+
@apply flex cursor-pointer items-center justify-center rounded-full p-1 text-2xl leading-none drop-shadow transition-all hover:scale-105;
101+
/* Default --not-selected */
102+
@apply bg-neutral-100 text-black;
103+
}
104+
.bcc-react-emoji-list-item--selected {
105+
@apply bg-neutral-800 text-white;
106+
}
37107
}

‎design-library/src/components/BccReact/BccReact.stories.ts‎

Lines changed: 44 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ export default {
88
argTypes: {},
99
} as Meta<typeof BccReact>;
1010

11-
const Template: StoryFn<typeof BccReact> = (args) => ({
11+
const Template: StoryFn<typeof BccReact> = (args, { parameters }) => ({
1212
components: { BccReact },
1313
setup() {
14-
return { args };
14+
const height = parameters.height || "h-40";
15+
return { args, height };
1516
},
1617
methods: {
1718
onToggle(emojiId: string) {
@@ -35,56 +36,52 @@ const Template: StoryFn<typeof BccReact> = (args) => ({
3536
},
3637
},
3738
template: `
38-
<div class="h-20 flex items-center">
39+
<div :class="height + ' flex items-center'">
3940
<BccReact v-bind="args" @toggle="onToggle" />
4041
</div>
4142
`,
4243
});
4344

44-
export const Example = Template.bind({});
45-
Example.args = {
45+
export const MoreThanSevenEmojis = Template.bind({});
46+
MoreThanSevenEmojis.parameters = { height: "h-40" };
47+
MoreThanSevenEmojis.args = {
48+
top: true,
49+
emojis: [
50+
{ id: "thumbsup", emoji: "👍", count: 5 },
51+
{ id: "heart", emoji: "❤️", count: 10 },
52+
{ id: "fire", emoji: "🔥", count: 8 },
53+
{ id: "smiling_hearts", emoji: "🥰", count: 0 },
54+
{ id: "clap", emoji: "👏", count: 0 },
55+
{ id: "grin", emoji: "😁", count: 0 },
56+
{ id: "party", emoji: "🎉", count: 0 },
57+
{ id: "star_eyes", emoji: "🤩", count: 4 },
58+
{ id: "pray", emoji: "🙏", count: 1 },
59+
{ id: "ok", emoji: "👌", count: 0 },
60+
{ id: "hearts_hands", emoji: "🫶", count: 0 },
61+
{ id: "heart_eyes", emoji: "😍", count: 0 },
62+
{ id: "hundred", emoji: "💯", count: 0 },
63+
{ id: "rofl", emoji: "🤣", count: 0 },
64+
{ id: "rocket", emoji: "🚀", count: 9 },
65+
],
66+
};
67+
68+
export const SevenOrFewerEmojis = Template.bind({});
69+
SevenOrFewerEmojis.parameters = { height: "h-20" };
70+
SevenOrFewerEmojis.args = {
4671
top: false,
4772
emojis: [
48-
{
49-
id: "thumbsup",
50-
emoji: "👍",
51-
count: 0,
52-
},
53-
{
54-
id: "happy",
55-
emoji: "😃",
56-
count: 2,
57-
selected: true,
58-
},
59-
{
60-
id: "smile",
61-
emoji: "😊",
62-
count: 0,
63-
},
64-
{
65-
id: "glasses",
66-
emoji: "😎",
67-
count: 0,
68-
},
69-
{
70-
id: "love",
71-
emoji: "😍",
72-
count: 0,
73-
},
74-
{
75-
id: "stars",
76-
emoji: "🤩",
77-
count: 0,
78-
},
79-
{
80-
id: "rocket",
81-
emoji: "🚀",
82-
count: 93,
83-
},
73+
{ id: "thumbsup", emoji: "👍", count: 0 },
74+
{ id: "happy", emoji: "😃", count: 2, selected: true },
75+
{ id: "smile", emoji: "😊", count: 0 },
76+
{ id: "glasses", emoji: "😎", count: 0 },
77+
{ id: "love", emoji: "😍", count: 0 },
78+
{ id: "stars", emoji: "🤩", count: 0 },
79+
{ id: "rocket", emoji: "🚀", count: 93 },
8480
],
8581
};
8682

87-
Example.parameters = {
83+
SevenOrFewerEmojis.parameters = {
84+
height: "h-20",
8885
docs: {
8986
source: {
9087
language: "html",
@@ -125,41 +122,9 @@ export const EmptyEmojis = Template.bind({});
125122
EmptyEmojis.args = {
126123
top: true,
127124
placeholder: "No reactions yet",
128-
emojis: [
129-
{
130-
id: "thumbsup",
131-
emoji: "👍",
132-
count: 0,
133-
},
134-
{
135-
id: "happy",
136-
emoji: "😃",
137-
count: 0,
138-
},
139-
{
140-
id: "smile",
141-
emoji: "😊",
142-
count: 0,
143-
},
144-
{
145-
id: "glasses",
146-
emoji: "😎",
147-
count: 0,
148-
},
149-
{
150-
id: "love",
151-
emoji: "😍",
152-
count: 0,
153-
},
154-
{
155-
id: "stars",
156-
emoji: "🤩",
157-
count: 0,
158-
},
159-
{
160-
id: "rocket",
161-
emoji: "🚀",
162-
count: 0,
163-
},
164-
],
125+
emojis: SevenOrFewerEmojis.args.emojis.map((e) => ({
126+
...e,
127+
count: 0,
128+
selected: false,
129+
})),
165130
};

0 commit comments

Comments
 (0)