Skip to content
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

fix(CSS Shadow token): wrong shadow-m token value #313

Merged
merged 10 commits into from
Jul 2, 2023
Merged

fix(CSS Shadow token): wrong shadow-m token value #313

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d204846
fix(tokens): wrong `shadow-m` value
dgonzalezr Jun 30, 2023
68c06dc
fix(dialog,notification): wrong shadow token
dgonzalezr Jun 30, 2023
6dd7c95
fix(tooltip): missing CSS variables and animation
dgonzalezr Jun 30, 2023
e923ec7
fix(notification,toast): move animation as utility layer
dgonzalezr Jun 30, 2023
9bc439a
test(tooltip): fix e2e tests
dgonzalezr Jun 30, 2023
e0dc5e0
feat(CSS): add keyframes mixins
dgonzalezr Jul 2, 2023
aad0f33
fix(CSS): tailwind CSS built-in animation not working
dgonzalezr Jul 2, 2023
fa79cbf
style: update BEEQ logo
dgonzalezr Jul 2, 2023
57818d2
docs(storybook): update theme colors
dgonzalezr Jul 2, 2023
6f06876
fix: animation-spin typo
dgonzalezr Jul 2, 2023
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
2 changes: 1 addition & 1 deletion packages/bee-q/src/components/dialog/scss/bq-dialog.variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
--bq-dialog--background: theme('colors.bg.primary');
--bq-dialog--background-backdrop: theme('colors.grey.600');

--bq-dialog--box-shadow: theme('boxShadow.m');
--bq-dialog--box-shadow: theme('boxShadow.l');

--bq-dialog--border-color: theme('colors.transparent');
--bq-dialog--border-radius: theme('borderRadius.m');
Expand Down
21 changes: 17 additions & 4 deletions packages/bee-q/src/components/notification/scss/bq-notification.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,23 @@
/* -------------------------------------------------------------------------- */
/* Notification styles */
/* Notification styles */
/* -------------------------------------------------------------------------- */

@import './bq-notification.variables';

@layer utilities {
@keyframes fade-in {
from {
opacity: 0;
}
}

@keyframes slide-in {
from {
transform: translateY(10px);
}
}
}

:host {
@apply hidden;
}
Expand All @@ -14,10 +28,9 @@

.bq-notification {
@apply relative flex min-w-[var(--bq-notification--min-width)] p-[var(--bq-notification--padding)];
@apply rounded-[var(--bq-notification--border-radius)] bg-[var(--bq-notification--background)];
@apply animate-slide-in;
@apply rounded-[var(--bq-notification--border-radius)] bg-[var(--bq-notification--background)] shadow-[shadow:var(--bq-notification--box-shadow)];

box-shadow: var(--bq-notification--box-shadow);
animation: fade-in 0.3s ease, slide-in 0.3s ease;
}

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/bee-q/src/components/notification/scss/bq-notification.variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
* @prop --bq-notification--min-width: The notification min width
*/
--bq-notification--background: theme('colors.bg.primary');
--bq-notification--box-shadow: theme('boxShadow.m');
--bq-notification--box-shadow: theme('boxShadow.l');

--bq-notification--border-color: theme('colors.transparent');
--bq-notification--border-radius: theme('borderRadius.s');
Expand Down
22 changes: 19 additions & 3 deletions packages/bee-q/src/components/toast/scss/bq-toast.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,25 @@
/* -------------------------------------------------------------------------- */
/* Toast styles */
/* Toast styles */
/* -------------------------------------------------------------------------- */

@import './bq-toast.variables';

@layer utilities {
@keyframes fade-in {
from {
opacity: 0;
}
}

@keyframes slide-in {
from {
transform: translateY(10px);
}
}
}

:host {
@apply hidden animate-slide-in will-change-transform;
@apply hidden;
}

:host([open]) {
Expand All @@ -15,8 +29,10 @@
.bq-toast {
@apply flex items-center gap-[var(--bq-toast--gap)] px-[var(--bq-toast--padding-x)] py-[var(--bq-toast--padding-y)];
@apply rounded-[var(--bq-toast--border-radius)] bg-[var(--bq-toast--background)] shadow-[shadow:var(--bq-toast--box-shadow)];
@apply border-[length:var(--bq-toast--border-width)] border-[color:var(--bq-toast--border-color)];

border: var(--bq-toast--border-width) var(--bq-toast--border-style) var(--bq-toast--border-color);
animation: fade-in 0.3s ease, slide-in 0.3s ease;
border-style: var(--bq-toast--border-style);
}

.bq-toast--icon {
Expand Down
8 changes: 4 additions & 4 deletions packages/bee-q/src/components/tooltip/bq-tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,10 +170,10 @@ export class BqTooltip {

render() {
return (
<div class="relative" part="base">
<div class="bq-tooltip relative" part="base">
{/* TRIGGER */}
<div
class="bq-tooltip__trigger"
class="bq-tooltip--trigger"
onMouseOver={this.handleTriggerMouseOver}
onMouseLeave={this.handleTriggerMouseLeave}
onClick={this.handleTriggerOnClick}
Expand All @@ -184,14 +184,14 @@ export class BqTooltip {
</div>
{/* PANEL */}
<div
class="bq-tooltip__panel"
class="bq-tooltip--panel"
aria-hidden={!this.visible}
hidden={!this.visible}
role="tooltip"
ref={(el) => (this.panel = el)}
part="panel"
>
{!this.hideArrow && <div class="bq-tooltip__arrow" ref={(el) => (this.arrow = el)} />}
{!this.hideArrow && <div class="bq-tooltip--arrow" ref={(el) => (this.arrow = el)} />}
<slot />
</div>
</div>
Expand Down
31 changes: 20 additions & 11 deletions packages/bee-q/src/components/tooltip/scss/bq-tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,34 @@
/* -------------------------------------------------------------------------- */
/* Tooltip styles */
/* -------------------------------------------------------------------------- */

@import './bq-tooltip.variables';

:host {
@apply relative inline-block;
@layer utilities {
@keyframes fade-in {
from {
opacity: 0;
}
}
}

.bq-tooltip__trigger {
@apply block;
}
.bq-tooltip--panel {
@apply pointer-events-none fixed box-border bg-[var(--bq-tooltip--background-color)];
@apply w-[var(--bq-tooltip--width)] max-w-[var(--bq-tooltip--max-width)] px-[var(--bq-tooltip--paddingX)] py-[var(--bq-tooltip--paddingY)];
@apply text-[length:var(--bq-tooltip--font-size)] leading-[var(--bq-tooltip--line-height)] text-[color:var(--bq-tooltip--text-color)];
@apply rounded-[var(--bq-tooltip--border-radius)] border-[length:var(--bq-tooltip--border-width)] border-[color:var(--bq-tooltip--border-color)];
@apply shadow-[shadow:var(--bq-tooltip--box-shadow)];

.bq-tooltip__panel {
@apply fixed box-border w-[var(--bq-tooltip--width)] max-w-[var(--bq-tooltip--max-width)] px-[var(--bq-tooltip--paddingX)] py-[var(--bq-tooltip--paddingY)];
@apply pointer-events-none rounded-[var(--bq-tooltip--rounded-corners)] bg-[var(--bq-tooltip--background-color)] text-[length:var(--bq-tooltip--font-size)] leading-large text-[color:var(--bq-tooltip--text-color)];
animation: fade-in 0.3s ease;
}

.bq-tooltip__arrow {
.bq-tooltip--arrow {
&,
&::before {
@apply absolute z-[-1] h-2 w-2;
@apply absolute -z-[1] h-2 w-2;
}

&::before {
@apply left-0 top-0 rotate-45 bg-[var(--bq-tooltip--background-color)] content-[''];
@apply left-0 top-0 rotate-45 bg-[var(--bq-tooltip--background-color)] content-empty;
}
}
17 changes: 13 additions & 4 deletions packages/bee-q/src/components/tooltip/scss/bq-tooltip.variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,20 @@

:host {
--bq-tooltip--background-color: theme('colors.ui.inverse');
--bq-tooltip--box-shadow: theme('boxShadow.m');

--bq-tooltip--font-size: theme('fontSize.m');
--bq-tooltip--width: max-content;
--bq-tooltip--max-width: 320px;
--bq-tooltip--line-height: theme('lineHeight.large');
--bq-tooltip--text-color: theme('colors.text.inverse');

--bq-tooltip--paddingX: theme('padding.xs');
--bq-tooltip--paddingY: theme('padding.xs2');
--bq-tooltip--rounded-corners: theme('borderRadius.s');
--bq-tooltip--text-color: theme('colors.text.inverse');

--bq-tooltip--border-color: theme('colors.transparent');
--bq-tooltip--border-radius: theme('borderRadius.s');
--bq-tooltip--border-style: none;
--bq-tooltip--border-width: unset;

--bq-tooltip--max-width: 320px;
--bq-tooltip--width: max-content;
}
2 changes: 1 addition & 1 deletion packages/bee-q/src/global/styles/variables/_box-shadow.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
:root {
--bq-box-shadow--xs: 0 2px 0 rgba(0, 0, 0, 0.016);
--bq-box-shadow--s: 0 8px 24px rgba(0, 0, 0, 0.04);
--bq-box-shadow--m: 0 2px 48px 16px rgba(0, 0, 0, 0.08);
--bq-box-shadow--m: 0 10px 48px -16px rgba(0, 0, 0, 0.12);
--bq-box-shadow--l: 0 20px 58px -16px rgba(0, 0, 0, 0.16);
}