mirror of
https://github.com/SigNoz/signoz.git
synced 2026-10-29 12:30:42 +00:00
11ae922ff7
<!--A few plain bullets saying what changed and why, for a reviewer skimming it - not a wall of text, not a restatement of the diff, not generated boilerplate.--> #### Description Bumps @signozhq/ui 0.1.0 to 0.2.0 and @signozhq/design-tokens 2.1.6 to 2.2.1. Reworked components (breaking): - Button: `variant` and `color` are a required pair; `outlined`, `ghost` and `dashed` only take `secondary`. `destructive` is now `danger`; `none`, the `action` variant, the `icon` size and `background` are gone. Icon-only buttons use `icon` plus `aria-label`. `className` and `style` are no longer accepted, so the local overrides went with them. Adds `width`, `maxWidth`, `textOverflow` and `loadingTooltip`. - ButtonGroup: moved to `@signozhq/ui/button-group`, driven by `items`. - Badge: `solid`/`outlined` variants and a semantic palette (`primary`, `secondary`, `danger`, `warning`, `success`, `info`, `archive`, `highlight-danger`) replace the hue names (`robin`, `cherry`, `vanilla`...). `capitalize` and `textEllipsis` became `textTransform` and `textOverflow`. `closable` is gone; removable chips use the new `Pill.Closeable`. - Tooltip: Radix to Base UI. `TooltipSimple`, `TooltipRoot`, `TooltipTrigger` and `TooltipContent` collapse into one `Tooltip` with `title`. Per-tree `TooltipProvider` wrappers are no longer needed (44 to 1). - DropdownMenu: replaced by `Dropdown` (Base UI Menu), built from typed `items` (action, link, checkbox, radio group, submenu, group) instead of composed `DropdownMenu*` parts and `MenuItem`. - ToggleGroup, RadioGroup, Tabs: Radix to Base UI, each driven by an `items` prop instead of `*Item`/`*Trigger` children. `TabItemProps` is now `TabsItemProps`. - Checkbox, Switch: Radix to Base UI, semantic `color` required. Switch requires `textPlacement`. Contracts shared by the reworked components, enforced by their types: - `disabled` needs a `disabledTooltip` (and `readOnly` a `readOnlyTooltip`), so every disabled control now says why (about 140 reasons added). - `data-testid` is written as `testId`. App side: - About 3,300 lines of SCSS overrides removed, since the components no longer take `className` and their defaults now match the designs. - AuthZButton builds on Button's `disabledTooltip`/`loadingTooltip` instead of wrapping it in AuthZTooltip; new AuthZDropdown gates Dropdown items the same way. - Jest gets a `PointerEvent` polyfill for Base UI; `styles.scss` sets compatibility variables for badge width, dropdown height, toggle-group label width and dropdown z-index. #### How to review the code This PR got a lot larger than I wanted so I tried few ways to help you review/read all these changes. First, pick the commits that belongs to your pod/area first. For pulse-pod: -da5cacec54-dc85d92b3c-9e5eae6169-6c8b1d5282For events pod: -92c74f6067-74894b372a-45d1646abfAnd the rest of the commits, well, I will appreciate if you spent some time looking at them since they don't have specific owner for now (by CODEOWNERS), and few of them I maintain (Settings/AuthZ for eg). #### How to review visually To be able to review the changes visually, I build a tool called [sbshot](https://github.com/SigNoz/sbshot/) that help us capture the stories before/after and then generate a website to let you visualize the diff and know by % how much each page changed in pixels. You can take a look at this tool here: https://pr-docs.viniciusl.com.br/signoz-v3-update-components-1012 I tried to add as many tags as possible to let you filter, so my suggestion for you is: - take a look first at the stories that matter for you - then read the code of the changes, to ensure everything was covered - and finally, after you think it's good enough, run the app <!--Reference issues using `Closes #issue-number` to enable automatic closure on merge. --> #### Issues closed by this PR Closes https://github.com/SigNoz/engineering-pod/issues/6157 --------- Co-authored-by: Vinícius Lourenço <vinicius@signoz.io>
30 lines
564 B
SCSS
30 lines
564 B
SCSS
.codeBlock {
|
|
position: relative;
|
|
}
|
|
|
|
.copyButton {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 8px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.codeBlockSyntaxHighlighter {
|
|
background-color: var(--l2-background) !important;
|
|
border-radius: 4px !important;
|
|
border: 1px solid var(--l2-border) !important;
|
|
color: var(--l2-foreground) !important;
|
|
|
|
pre {
|
|
color: var(--l2-foreground) !important;
|
|
font-family: 'Geist Mono' !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
code {
|
|
color: var(--l1-foreground) !important;
|
|
font-family: 'Geist Mono' !important;
|
|
font-size: 12px !important;
|
|
}
|
|
}
|