Remove class names for arrow paths

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-07-19 21:55:25 +01:00
parent 1931bc3e60
commit a8f3aa0507
6 changed files with 19 additions and 29 deletions
File diff suppressed because one or more lines are too long
+8 -8
View File
@@ -10554,14 +10554,14 @@
transform: rotate(-90deg)translateY(-7px);
}
}
}
.bui-TooltipArrowFill {
fill: canvas;
}
& svg path:first-child {
fill: canvas;
}
.bui-TooltipArrowStroke {
fill: var(--bui-gray-3);
& svg path:nth-child(2) {
fill: var(--bui-gray-3);
}
}
[data-theme="dark"] {
@@ -10572,11 +10572,11 @@
}
& .bui-TooltipArrow {
& .bui-TooltipArrowFill {
& svg path:first-child {
fill: var(--bui-bg-surface-2);
}
& .bui-TooltipArrowStroke {
& svg path:nth-child(2) {
fill: var(--bui-gray-4);
}
}
-2
View File
@@ -591,8 +591,6 @@ export const componentDefinitions: {
readonly classNames: {
readonly tooltip: 'bui-Tooltip';
readonly arrow: 'bui-TooltipArrow';
readonly arrowFill: 'bui-TooltipArrowFill';
readonly arrowStroke: 'bui-TooltipArrowStroke';
};
};
};
@@ -75,14 +75,14 @@
transform: rotate(-90deg) translateY(-7px);
}
}
}
.bui-TooltipArrowFill {
fill: canvas;
}
svg path:nth-child(1) {
fill: canvas;
}
.bui-TooltipArrowStroke {
fill: var(--bui-gray-3);
svg path:nth-child(2) {
fill: var(--bui-gray-3);
}
}
[data-theme='dark'] {
@@ -93,11 +93,11 @@
}
.bui-TooltipArrow {
.bui-TooltipArrowFill {
svg path:nth-child(1) {
fill: var(--bui-bg-surface-2);
}
.bui-TooltipArrowStroke {
svg path:nth-child(2) {
fill: var(--bui-gray-4);
}
}
@@ -46,14 +46,8 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
>
<OverlayArrow className={classNames.arrow}>
<svg width="20" height="10" viewBox="0 0 20 10" fill="none">
<path
className={classNames.arrowFill}
d="M10.3356 7.39793L15.1924 3.02682C15.9269 2.36577 16.8801 2 17.8683 2H20V7.94781e-07L1.74846e-07 -9.53674e-07L0 2L1.4651 2C2.4532 2 3.4064 2.36577 4.1409 3.02682L8.9977 7.39793C9.378 7.7402 9.9553 7.74021 10.3356 7.39793Z"
/>
<path
className={classNames.arrowStroke}
d="M11.0046 8.14124C10.2439 8.82575 9.08939 8.82578 8.32869 8.14122L3.47189 3.77011C2.92109 3.27432 2.20619 2.99999 1.46509 2.99999L4.10999 3L8.99769 7.39793C9.37799 7.7402 9.95529 7.7402 10.3356 7.39793L15.2226 3L17.8683 2.99999C17.1271 2.99999 16.4122 3.27432 15.8614 3.77011L11.0046 8.14124Z"
/>
<path d="M10.3356 7.39793L15.1924 3.02682C15.9269 2.36577 16.8801 2 17.8683 2H20V7.94781e-07L1.74846e-07 -9.53674e-07L0 2L1.4651 2C2.4532 2 3.4064 2.36577 4.1409 3.02682L8.9977 7.39793C9.378 7.7402 9.9553 7.74021 10.3356 7.39793Z" />
<path d="M11.0046 8.14124C10.2439 8.82575 9.08939 8.82578 8.32869 8.14122L3.47189 3.77011C2.92109 3.27432 2.20619 2.99999 1.46509 2.99999L4.10999 3L8.99769 7.39793C9.37799 7.7402 9.95529 7.7402 10.3356 7.39793L15.2226 3L17.8683 2.99999C17.1271 2.99999 16.4122 3.27432 15.8614 3.77011L11.0046 8.14124Z" />
</svg>
</OverlayArrow>
{children}
@@ -286,8 +286,6 @@ export const componentDefinitions = {
classNames: {
tooltip: 'bui-Tooltip',
arrow: 'bui-TooltipArrow',
arrowFill: 'bui-TooltipArrowFill',
arrowStroke: 'bui-TooltipArrowStroke',
},
},
} as const satisfies Record<string, ComponentDefinition>;