From 6060edda2295039ca28b5da5122b6c6f45dd785c Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Fri, 13 Oct 2023 15:56:27 -0400 Subject: [PATCH 1/3] restyled tooltip --- packages/components/src/overlay/src/Overlay.css | 5 ++--- packages/components/src/tooltip/src/Tooltip.css | 14 +++++++------- packages/components/src/tooltip/src/Tooltip.tsx | 3 ++- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/components/src/overlay/src/Overlay.css b/packages/components/src/overlay/src/Overlay.css index cce0ef3b6..c8dc1af0b 100644 --- a/packages/components/src/overlay/src/Overlay.css +++ b/packages/components/src/overlay/src/Overlay.css @@ -25,15 +25,14 @@ .o-ui-overlay-arrow::before { content: ""; transform: rotate(45deg); - background-color: var(--o-ui-bg-alias-surface); - box-shadow: var(--o-ui-bs-alias-floating); + background-color: transparent; } .o-ui-overlay-arrow::after { content: ""; width: 20px; height: 10px; - background-color: var(--o-ui-bg-alias-surface); + background-color: transparent; position: absolute; top: calc(var(--o-ui-overlay-arrow-dimension) / 2); left: calc(-1 * var(--o-ui-overlay-arrow-dimension) / 2); diff --git a/packages/components/src/tooltip/src/Tooltip.css b/packages/components/src/tooltip/src/Tooltip.css index e0ec4c240..9d2c926ef 100644 --- a/packages/components/src/tooltip/src/Tooltip.css +++ b/packages/components/src/tooltip/src/Tooltip.css @@ -1,9 +1,9 @@ .o-ui-tooltip { - background-color: var(--o-ui-bg-alias-surface); - border-radius: var(--o-ui-br-3); - box-shadow: var(--o-ui-bs-alias-floating); - padding: var(--o-ui-sp-3); - max-width: var(--o-ui-sz-16); + background-color: var(--hop-neutral-surface-active); + border-radius: var(--hop-shape-rounded-md); + color: var(--hop-neutral-text-strong); + padding: var(--hop-space-inset-squish-md); + max-width: 20rem; white-space: pre-wrap; overflow-wrap: break-word; } @@ -11,12 +11,12 @@ /* We need a .o-ui-tooltip-content class */ /* LEFT ICON */ .o-ui-tooltip .o-ui-icon { - margin-right: var(--o-ui-sp-1); + margin-right: var(--hop-space-inline-xs); } /* RIGHT ICON */ .o-ui-tooltip .o-ui-text + .o-ui-icon { - margin-left: var(--o-ui-sp-1); + margin-left: var(--hop-space-inline-xs); } /* DISABLED WRAPPER */ diff --git a/packages/components/src/tooltip/src/Tooltip.tsx b/packages/components/src/tooltip/src/Tooltip.tsx index bee49dc24..95d922325 100644 --- a/packages/components/src/tooltip/src/Tooltip.tsx +++ b/packages/components/src/tooltip/src/Tooltip.tsx @@ -26,7 +26,8 @@ export function InnerTooltip({ as, className: "o-ui-tooltip", ref: forwardedRef, - role: "tooltip" + role: "tooltip", + size: "xs" as const } )} > From 5332da7de303c7fa263254335644f07962230bce Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Mon, 16 Oct 2023 12:09:42 -0400 Subject: [PATCH 2/3] hide popover arrow --- packages/components/src/overlay/src/Overlay.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/src/overlay/src/Overlay.css b/packages/components/src/overlay/src/Overlay.css index c8dc1af0b..97ca3dd94 100644 --- a/packages/components/src/overlay/src/Overlay.css +++ b/packages/components/src/overlay/src/Overlay.css @@ -14,6 +14,11 @@ } /* ARROW */ +/* Removing Popper Arrow using useArrow does not seem to work. This will do for now. */ +.o-ui-overlay-arrow { + display: none; +} + .o-ui-overlay-arrow, .o-ui-overlay-arrow::before { position: absolute; From 44634483a90d2da6be1b2e70c96640018023bfb2 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Mon, 16 Oct 2023 17:24:09 -0400 Subject: [PATCH 3/3] removed arrow declaration --- .../components/src/overlay/src/Overlay.css | 112 ------------------ 1 file changed, 112 deletions(-) diff --git a/packages/components/src/overlay/src/Overlay.css b/packages/components/src/overlay/src/Overlay.css index 97ca3dd94..19a195953 100644 --- a/packages/components/src/overlay/src/Overlay.css +++ b/packages/components/src/overlay/src/Overlay.css @@ -1,7 +1,5 @@ .o-ui { --o-ui-overlay-border-offset: 0; - --o-ui-overlay-arrow-border-color: var(--o-ui-focus-ring-color-alias-default); - --o-ui-overlay-arrow-dimension: 10px; } .o-ui-overlay { @@ -19,116 +17,6 @@ display: none; } -.o-ui-overlay-arrow, -.o-ui-overlay-arrow::before { - position: absolute; - width: 10px; - height: 10px; - z-index: 1; -} - -.o-ui-overlay-arrow::before { - content: ""; - transform: rotate(45deg); - background-color: transparent; -} - -.o-ui-overlay-arrow::after { - content: ""; - width: 20px; - height: 10px; - background-color: transparent; - position: absolute; - top: calc(var(--o-ui-overlay-arrow-dimension) / 2); - left: calc(-1 * var(--o-ui-overlay-arrow-dimension) / 2); - z-index: 10; -} - -/* ARROW | POSITION */ -.o-ui-overlay[data-popper-placement^="top"] .o-ui > .o-ui-overlay-arrow { - bottom: calc(-1 * 0.25rem - 1px); -} - -.o-ui-overlay[data-popper-placement^="bottom"] .o-ui > .o-ui-overlay-arrow { - top: calc(-1 * 0.25rem - 1px); -} - -.o-ui-overlay[data-popper-placement^="left"] .o-ui > .o-ui-overlay-arrow { - right: calc(-1 * 0.25rem - 1px); -} - -.o-ui-overlay[data-popper-placement^="right"] .o-ui > .o-ui-overlay-arrow { - left: calc(-1 * 0.25rem - 1px); -} - -/* ARROW | BORDER */ -/* BOTTOM ARROW */ -.o-ui-overlay[data-popper-placement^="bottom"] .o-ui-overlay-arrow::after { - top: calc(var(--o-ui-overlay-arrow-dimension) / 2); -} - -/* TOP ARROW */ -.o-ui-overlay[data-popper-placement^="top"] .o-ui-overlay-arrow::after { - top: calc(-1 * (var(--o-ui-overlay-arrow-dimension) / 2)); -} - -/* RIGHT ARROW */ -.o-ui-overlay[data-popper-placement^="right"] .o-ui-overlay-arrow::after { - width: 10px; - height: 20px; - left: calc(var(--o-ui-overlay-arrow-dimension) / 2); - top: calc(-1 * (var(--o-ui-overlay-arrow-dimension) / 2)); -} - -/* LEFT ARROW */ -.o-ui-overlay[data-popper-placement^="left"] .o-ui-overlay-arrow::after { - width: 10px; - height: 20px; - left: calc(-1 * (var(--o-ui-overlay-arrow-dimension) / 2)); - top: calc(-1 * (var(--o-ui-overlay-arrow-dimension) / 2)); -} - -/* ARROW | BORDER | STATE | FOCUS */ -/* RIGHT ARROW */ -.o-ui-overlay[data-popper-placement^="right"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::after { - left: 8px; -} - -.o-ui-overlay[data-popper-placement^="right"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::before { - border-bottom: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color); - border-left: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color); -} - -/* BOTTOM ARROW */ -.o-ui-overlay[data-popper-placement^="bottom"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::after { - top: 8px; -} - -.o-ui-overlay[data-popper-placement^="bottom"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::before { - border-top: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color); - border-left: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color); -} - -/* LEFT ARROW */ -.o-ui-overlay[data-popper-placement^="left"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::after { - left: -8px; -} - -.o-ui-overlay[data-popper-placement^="left"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::before { - border-top: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color); - border-right: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color); -} - -/* TOP ARROW */ -.o-ui-overlay[data-popper-placement^="top"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::after { - top: -8px; -} - -.o-ui-overlay[data-popper-placement^="top"] .o-ui-overlay-focus-ring:focus-visible + .o-ui-overlay-arrow::before { - border-bottom: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color); - border-right: var(--o-ui-focus-ring-thickness-md) solid var(--o-ui-overlay-arrow-border-color); -} - /* BORDER OFFSET */ .o-ui-overlay-has-border-offset[data-popper-placement^="top"] { border-bottom: var(--o-ui-overlay-border-offset) solid transparent;