fix: Feedback and enhancement #89

SagarRajput-7 · 2025-11-05T12:30:00Z

Notion - https://www.notion.so/signoz/Periscope-23-10-2025-295fcc6bcd19808495cefe1192f86935?source=copy_link

Tickets -

apps/docs/.storybook/preview.css

SagarRajput-7 · 2025-11-12T14:31:57Z

Review from Design - https://www.notion.so/signoz/Periscope-10-11-25-2a9fcc6bcd198007ad24e15c1d43d25b?source=copy_link

Ticket - #3185

ahmadshaheer · 2025-11-17T03:25:39Z

packages/dialog/src/index.css

+/* Override Storybook h2 styles for dialog titles */
+.sb-show-main [data-slot='dialog-title'],
+.sb-show-main [data-slot='dialog-title'] h2 {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+	margin-top: 0;
+	margin-bottom: 0;
+}


this can be moved to apps/docs/.storybook/preview.css

ahmadshaheer · 2025-11-17T03:28:39Z

packages/pagination/src/pagination.tsx

-				viewBox="0 0 32 1"
-				className="text-inherit"
-			/>
+			<Minus height="100%" width={32} /> {/* for the time being */}


couldn't understand this change. can you please help me understand?

ahmadshaheer · 2025-11-17T03:30:21Z

packages/popover/src/index.css

+/* Popover-specific CSS variables */
+[data-slot='popover-content'] {
+	--popover-background: var(--bg-vanilla-100);
+	--popover-border: var(--bg-vanilla-300);
+	--popover-text: var(--text-ink-400);
+	--popover-text-muted: var(--text-ink-300);
+	--popover-icon: var(--text-ink-400);
+	background-color: var(--popover-background);
+	border: 1px solid var(--popover-border);
+	color: var(--popover-text);
+	margin-top: 0;
+}
+
+.dark [data-slot='popover-content'] {
+	--popover-background: var(--bg-ink-400);
+	--popover-border: var(--bg-slate-500);
+	--popover-text: var(--text-vanilla-100);
+	--popover-text-muted: var(--text-vanilla-400);
+	--popover-icon: var(--text-vanilla-400);
+}


it seems that we are not using these variables in packages/popover/src/popover.tsx

ahmadshaheer · 2025-11-17T03:37:06Z

packages/sonner/src/index.css

+/* Toast Container Styling */
+.toaster [data-sonner-toast] {
+	align-items: flex-start !important;
+	padding: 14px 16px !important;
+	border-radius: 6px !important;
+	gap: 10px !important;
 }

-[data-color='destructive'] {
-	--button-background: var(--bg-cherry-500);
-	--button-solid-foreground: var(--bg-vanilla-100);
-	--button-outlined-foreground: var(--bg-cherry-500);
-	--button-hover-background: var(--bg-cherry-400);
-	--button-link-hover-foreground: var(--bg-cherry-400);
-	--button-ghost-hover-foreground: var(--bg-cherry-400);
+/* Icon container - prefer data attributes, fallback to structural */
+.toaster [data-sonner-toast] [data-icon-wrapper],
+.toaster [data-sonner-toast] > div:has([data-icon]),
+.toaster [data-sonner-toast] > div:has(svg) {
+	align-self: flex-start !important;
+	margin-top: 0;
+	padding-top: 2px;
+	gap: 12px;
 }

-[data-color='warning'] {
-	--button-background: var(--bg-amber-500);
-	--button-solid-foreground: var(--bg-ink-400);
-	--button-outlined-foreground: var(--bg-amber-700);
-	--button-hover-background: var(--bg-amber-400);
-	--button-link-hover-foreground: var(--bg-amber-600);
-	--button-ghost-hover-foreground: var(--bg-amber-600);
+/* Icon element - prioritize data-icon, then svg elements */
+.toaster [data-sonner-toast] [data-icon],
+.toaster [data-sonner-toast] svg {
+	align-self: flex-start !important;
+	margin-top: 0;
+	width: 16px !important;
+	height: 16px !important;
+	flex-shrink: 0;
+	margin-left: 0;
+	margin-right: 0;
 }

-[data-color='secondary'] {
-	--button-background: var(--bg-vanilla-300);
-	--button-solid-foreground: var(--bg-slate-500);
-	--button-outlined-foreground: var(--bg-slate-50);
-	--button-hover-background: var(--bg-vanilla-300);
-	--button-link-hover-foreground: var(--bg-slate-300);
+/* Content Area Styling */
+/* Content wrapper - prefer data attributes */
+.toaster [data-sonner-toast] [data-content],
+.toaster [data-sonner-toast] > div:has([data-title]),
+.toaster [data-sonner-toast] > div:has([data-description]) {
+	align-self: flex-start !important;
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
 }

-.dark [data-color='secondary'] {
-	--button-background: var(--bg-slate-400);
-	--button-solid-foreground: var(--bg-vanilla-100);
-	--button-outlined-foreground: var(--bg-vanilla-400);
-	--button-hover-background: var(--bg-slate-300);
-	--button-link-hover-foreground: var(--bg-vanilla-200);
+/* Title/Message Styling */
+/* Priority: data-title > first text element in content */
+.toaster [data-sonner-toast] [data-title] {
+	font-family: 'Inter', sans-serif;
+	font-weight: 500;
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+	color: var(--text-slate-500);
+	margin: 0;
+	padding: 0;
+	height: 20px;
 }

-[data-background='ink-500'] {
-	--action-button-background: var(--bg-ink-400);
-	--action-button-border: var(--bg-slate-500);
-	--action-button-text: var(--bg-vanilla-400);
-	--action-button-hover-background: var(--bg-ink-300);
-	--action-button-hover-border: var(--bg-slate-400);
-	--action-button-hover-text: var(--bg-vanilla-100);
+.dark .toaster [data-sonner-toast] [data-title] {
+	color: var(--text-vanilla-100);
 }

-[data-background='ink-400'] {
-	--action-button-background: var(--bg-ink-300);
-	--action-button-border: var(--bg-slate-400);
-	--action-button-text: var(--bg-vanilla-400);
-	--action-button-hover-background: var(--bg-ink-200);
-	--action-button-hover-border: var(--bg-slate-300);
-	--action-button-hover-text: var(--bg-vanilla-100);
+/* Fallback for cases where data-title isn't present */
+.toaster [data-sonner-toast] [data-content] > p:first-of-type,
+.toaster [data-sonner-toast] > div:has([data-title]) > p:first-of-type,
+.toaster [data-sonner-toast] > div:has([data-title]) > div:first-of-type {
+	font-family: 'Inter', sans-serif;
+	font-weight: 500;
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+	color: var(--text-slate-500);
+	margin: 0;
+	padding: 0;
+	height: 20px;
 }

-[data-background='vanilla-100'] {
-	--action-button-background: var(--bg-vanilla-200);
-	--action-button-border: var(--bg-vanilla-300);
-	--action-button-text: var(--bg-slate-50);
-	--action-button-hover-background: var(--bg-vanilla-300);
-	--action-button-hover-border: rgba(var(--rgb-vanilla-400), 0.4);
-	--action-button-hover-text: var(--bg-slate-500);
+.dark .toaster [data-sonner-toast] [data-content] > p:first-of-type,
+.dark .toaster [data-sonner-toast] > div:has([data-title]) > p:first-of-type,
+.dark .toaster [data-sonner-toast] > div:has([data-title]) > div:first-of-type {
+	color: var(--text-vanilla-100);
 }

-[data-background='vanilla-200'] {
-	--action-button-background: var(--bg-vanilla-100);
-	--action-button-border: var(--bg-vanilla-300);
-	--action-button-text: var(--bg-slate-50);
-	--action-button-hover-background: var(--bg-vanilla-100);
-	--action-button-hover-border: rgba(var(--rgb-vanilla-400), 0.4);
-	--action-button-hover-text: var(--bg-slate-500);
+/* Description Styling */
+/* Priority: data-description > description container */
+.toaster [data-sonner-toast] [data-description] {
+	font-family: 'Inter', sans-serif;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+	color: var(--text-slate-50);
+	margin: 0;
+	padding: 0;
+}
+
+.dark .toaster [data-sonner-toast] [data-description] {
+	color: var(--text-vanilla-400);
+}
+
+/* Description container - for multi-line descriptions */
+.toaster [data-sonner-toast] [data-description-wrapper],
+.toaster [data-sonner-toast] [data-content] > div:has([data-description]),
+.toaster [data-sonner-toast] > div:has([data-description]) > div:last-of-type {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	font-family: 'Inter', sans-serif;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+	color: var(--text-slate-50);
+	margin: 0;
+	padding: 0;
+}
+
+.dark .toaster [data-sonner-toast] [data-description-wrapper],
+.dark .toaster [data-sonner-toast] [data-content] > div:has([data-description]),
+.dark
+	.toaster
+	[data-sonner-toast]
+	> div:has([data-description])
+	> div:last-of-type {
+	color: var(--text-vanilla-400);
+}
+
+/* Fallback for description paragraphs */
+.toaster [data-sonner-toast] [data-content] > p:not(:first-of-type),
+.toaster
+	[data-sonner-toast]
+	> div:has([data-description])
+	> p:not(:first-of-type) {
+	font-family: 'Inter', sans-serif;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+	color: var(--text-slate-50);
+	margin: 0;
+	padding: 0;
+}
+
+.dark .toaster [data-sonner-toast] [data-content] > p:not(:first-of-type),
+.dark
+	.toaster
+	[data-sonner-toast]
+	> div:has([data-description])
+	> p:not(:first-of-type) {
+	color: var(--text-vanilla-400);
 }


can we apply these styles and the styles in packages/dialog/src/index.css using tailwindcss? let's try to set tailwindcss as the convention and apply the styling using it.

ahmadshaheer · 2025-11-17T03:47:08Z

apps/docs/stories/popover.stories.tsx

can you please refactor the lines 122 and 172 to use the enum?

ahmadshaheer · 2025-11-17T03:48:37Z

can you also resolve the conflicts?

SagarRajput-7 · 2025-11-19T05:36:52Z

can you also resolve the conflicts?

Yes, I am working on them

SagarRajput-7 added 7 commits November 4, 2025 13:10

fix: misc fixes in component library

897b886

fix: misc fixes in component library

383ba86

fix: added fixes for dialog, tabs and paginations

39117cb

fix: updated popover styles

13f0867

fix: cleanup redudant css

6bffc48

fix: sonner icon fix

48946b9

Merge branch 'SIG-5281' into feedback-and-enhancement

484dd37

SagarRajput-7 requested a review from a team as a code owner November 5, 2025 12:30

fix: action button fix

77c3981

SagarRajput-7 commented Nov 6, 2025

View reviewed changes

apps/docs/.storybook/preview.css Show resolved Hide resolved

ahmadshaheer requested changes Nov 17, 2025

View reviewed changes

SagarRajput-7 added 2 commits November 21, 2025 11:24

Merge remote-tracking branch 'origin' into feedback-and-enhancement

69c664c

fix: updated pnpm

5eef679

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: Feedback and enhancement #89

fix: Feedback and enhancement #89

Uh oh!

SagarRajput-7 commented Nov 5, 2025 •

edited

Loading

Uh oh!

Uh oh!

SagarRajput-7 commented Nov 12, 2025

Uh oh!

ahmadshaheer Nov 17, 2025

Uh oh!

ahmadshaheer Nov 17, 2025

Uh oh!

ahmadshaheer Nov 17, 2025

Uh oh!

ahmadshaheer Nov 17, 2025

Uh oh!

ahmadshaheer Nov 17, 2025

Uh oh!

ahmadshaheer commented Nov 17, 2025

Uh oh!

SagarRajput-7 commented Nov 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix: Feedback and enhancement #89

Are you sure you want to change the base?

fix: Feedback and enhancement #89

Uh oh!

Conversation

SagarRajput-7 commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

SagarRajput-7 commented Nov 12, 2025

Uh oh!

ahmadshaheer Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

ahmadshaheer Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

ahmadshaheer Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

ahmadshaheer Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

ahmadshaheer Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

ahmadshaheer commented Nov 17, 2025

Uh oh!

SagarRajput-7 commented Nov 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

SagarRajput-7 commented Nov 5, 2025 •

edited

Loading