Skip to content

Align BccReact with the design #431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
covaci-edvin merged 3 commits into from
Oct 21, 2026
Merged

Align BccReact with the design #431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
02d7b59
Align BccReact sizes with the design
covaci-edvin Oct 19, 2026
02738ef
Add a border to BccReact pills in dark mode
covaci-edvin Oct 19, 2026
2bea9c0
Remove negative margin from BccReact list
covaci-edvin Oct 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions component-library/src/components/custom/BccReact/BccReact.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
@layer components {
.bcc-react {
@apply center relative w-full overflow-visible;
@apply center relative h-8 w-full overflow-visible;
}
.bcc-react-toggle {
@apply flex shrink-0 cursor-pointer items-center justify-center rounded-full transition;
}
.bcc-react-list {
@apply hide-scrollbar ml-2 flex h-10 max-w-fit flex-1 items-center gap-1.5 rounded-full;
@apply hide-scrollbar ml-2 flex max-w-fit flex-1 items-center gap-1.5 rounded-full py-0.5;
}
.bcc-react-list--limited {
@apply min-w-0 overflow-x-auto;
max-width: calc(var(--bcc-react-max-visible) * 3.25rem + (var(--bcc-react-max-visible) - 1) * 0.375rem);
}
.bcc-react-empty {
@apply heading-xs flex items-center;
@apply heading-sm flex items-center;
}

.bcc-react-selector-container {
@apply absolute z-50 h-9;
@apply top-11 origin-top-left;
@apply top-9 origin-top-left;
}

.bcc-react-selector-container--top {
Expand Down Expand Up @@ -81,12 +81,13 @@
}

.bcc-react-emoji-list-item {
@apply clickable center my-1 flex h-8 min-w-7 shrink-0 gap-1 rounded-full px-2 py-1 drop-shadow transition-all hover:scale-105;
@apply clickable center shadow-raised dark:border-default flex h-8 min-w-7 shrink-0 gap-1 rounded-full px-2 py-1 transition-all hover:scale-105 dark:border;
/* Default --not-selected */
@apply bg-accent-gray-subtler-default text-default;
}
.bcc-react-emoji-list-item .bcc-react-count {
@apply label-xs leading-none;
@apply label-xs;
line-height: var(--leading-md);
}
.bcc-react-emoji-list-item .bcc-react-emoji {
@apply text-lg leading-none;
Expand Down
4 changes: 2 additions & 2 deletions component-library/src/components/custom/BccReact/BccReact.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,8 +136,8 @@ onMounted(() => {
:class="[top ? 'rounded-b-full' : 'rounded-t-full']"
@click="show = !show"
>
<AddReactionFillIcon v-if="show" class="size-5" />
<AddReactionIcon v-else class="size-5" />
<AddReactionFillIcon v-if="show" class="size-6" />
<AddReactionIcon v-else class="size-6" />
</button>

<div
Expand Down
2 changes: 1 addition & 1 deletion component-library/src/components/custom/BccReact/__snapshots__/BccReact.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`BccReact > renders reactions 1`] = `
"<div class="bcc-react">
<transition-group-stub name="bcc-fade" appear="false" persisted="false" css="true"><button class="bcc-react-toggle rounded-t-full"><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="size-5">
<transition-group-stub name="bcc-fade" appear="false" persisted="false" css="true"><button class="bcc-react-toggle rounded-t-full"><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="size-6">
<path d="M480-480Zm0 400q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q33 0 65 5t62 15q23 8 29 23.5t1 30.5q-5 15-18.5 23.5T588-781q-26-9-52.5-14t-55.5-5q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-18-2-36t-6-35q-5-19 5-31t25-15q15-3 29.5 4.5T871-564q5 20 7 41t2 43q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm320-680h-40q-17 0-28.5-11.5T720-800q0-17 11.5-28.5T760-840h40v-40q0-17 11.5-28.5T840-920q17 0 28.5 11.5T880-880v40h40q17 0 28.5 11.5T960-800q0 17-11.5 28.5T920-760h-40v40q0 17-11.5 28.5T840-680q-17 0-28.5-11.5T800-720v-40ZM620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q58 0 107-28t79-76q6-12-1-24t-21-12H316q-14 0-21 12t-1 24q30 48 79.5 76T480-260Z"></path>
</svg></button>
<div class="bcc-react-list"><button class="bcc-react-emoji-list-item"><span class="bcc-react-emoji">😃</span><span class="bcc-react-count">4</span></button><button class="bcc-react-emoji-list-item"><span class="bcc-react-emoji">👍</span>
Expand Down
Loading