diff --git a/.changeset/violet-heads-go.md b/.changeset/violet-heads-go.md
new file mode 100644
index 000000000..d4b497c4d
--- /dev/null
+++ b/.changeset/violet-heads-go.md
@@ -0,0 +1,5 @@
+---
+"@knocklabs/react": patch
+---
+
+[Guides] Address more polish + feedback items in guide toolbar v2
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/FocusChin.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/FocusChin.tsx
index 337239604..a043433a6 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/FocusChin.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/FocusChin.tsx
@@ -7,6 +7,7 @@ import { ChevronLeft, ChevronRight, X } from "lucide-react";
import * as React from "react";
import { GUIDE_ROW_DATA_SELECTOR } from "./GuideRow";
+import { sharedTooltipProps } from "./helpers";
import { InspectionResultOk } from "./useInspectGuideClientStore";
// Extra scroll overshoot so the focused guide plus ~1-2 neighbors are visible,
@@ -88,7 +89,7 @@ export const FocusChin = ({ guides, guideListRef }: Props) => {
Focus mode: {currentKey}
-
+
-
+
-
+
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
index b661e4eda..d89c499db 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideRowDetails.tsx
@@ -6,7 +6,7 @@ import {
StatusColor,
GuideAnnotatedStatusDot as StatusDot,
} from "./GuideAnnotatedStatusDot";
-import { FOCUS_ERRORS } from "./helpers";
+import { sharedTooltipProps } from "./helpers";
import {
AnnotatedGuide,
UncommittedGuide,
@@ -35,7 +35,7 @@ const CardContainer = ({
{title}
-
+
{children}
@@ -46,25 +46,32 @@ const StatusRow = ({
value,
color,
tooltip,
+ children,
}: {
label: string;
value: string;
color: StatusColor;
tooltip?: React.ReactNode;
+ children?: React.ReactNode;
}) => {
return (
-
-
+
+
{label}:
-
- {value}
-
+ {/* User children over value when provided, for cases when we want to
+ have its own tooltip over it */}
+ {!children && (
+
+ {value}
+
+ )}
+ {children}
);
};
@@ -83,26 +90,26 @@ export const getSelectableStatusSummary = (
return {
label: "Ready to display",
color: "blue",
- description: "This guide is queried and ready to display",
+ description: "The guide is queried and ready to render.",
};
case "throttled":
return {
label: "Throttled",
color: "yellow",
- description:
- "This guide is queried and ready to display, but throttled currently",
+ description: "The guide is queried but held back by throttle settings.",
};
case "queried":
return {
label: "Queued",
color: "gray",
- description: "This guide is queried but is not ready to display",
+ description:
+ "The guide is queried but waiting behind higher-priority guides.",
};
default:
return {
label: "Not queried",
color: "red",
- description: `This guide is not queried (${FOCUS_ERRORS.focusUnselectableGuide.toLowerCase()})`,
+ description: "No useGuide(s) call on this page matches this guide.",
};
}
};
@@ -134,19 +141,19 @@ export const GuideRowDetails = ({
label="Active"
value={annotation.active.status ? "Yes" : "No"}
color={annotation.active.status ? "blue" : "red"}
- tooltip="Eligible if the guide is currently active"
+ tooltip="Whether the guide is active in this environment."
/>
@@ -155,23 +162,28 @@ export const GuideRowDetails = ({
label="Activation"
value={annotation.activatable.status ? "Yes" : "No"}
color={annotation.activatable.status ? "blue" : "red"}
- tooltip="Visible when the user's current location matches the guide's activation rules"
+ tooltip="Whether the current page matches the guide's activation rules."
/>
- Visible when the guide is queried via `useGuide(s)` in the current
- page,
-
- and ready to display per its position in the display pipeline:
-
- {selectableStatusSummary.description}
+ tooltip="Whether the guide has been queried and is ready to render on the current page."
+ >
+
+
+ {selectableStatusSummary.label}
- }
- />
+
+
);
diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
index 651de471e..dd3b2bc0f 100644
--- a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
+++ b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
@@ -22,7 +22,12 @@ import "../styles.css";
import { FocusChin } from "./FocusChin";
import { GuideContextDetails } from "./GuideContextDetails";
import { GuideRow } from "./GuideRow";
-import { DisplayOption, clearRunConfigLS, getRunConfig } from "./helpers";
+import {
+ DisplayOption,
+ clearRunConfigLS,
+ getRunConfig,
+ sharedTooltipProps,
+} from "./helpers";
import { useDraggable } from "./useDraggable";
import {
InspectionResultOk,
@@ -33,6 +38,15 @@ const TOGGLE_COLLAPSED_HOTKEY = ".";
const TOOLBAR_WIDTH = "540px";
+const TOOLBAR_BOX_SHADOW = [
+ "0 0 0 1px rgba(0, 0, 0, 0.06)",
+ "0 0 0 1px rgba(255, 255, 255, 0.10)",
+ "inset 0 1px 0 rgba(255, 255, 255, 0.04)",
+ "0 1px 1px 0 rgba(0, 0, 0, 0.04)",
+ "0 4px 6px -1px rgba(0, 0, 0, 0.05)",
+ "0 8px 16px -4px rgba(0, 0, 0, 0.06)",
+].join(", ");
+
const Kbd = ({ children }: { children: React.ReactNode }) => {
return (
{
);
};
+const getEmptyStateMessage = (displayOption: DisplayOption) => {
+ switch (displayOption) {
+ case "all-guides":
+ return "You have no guides. Get started by creating a guide.";
+ case "only-active":
+ return "There are no active guides.";
+ case "only-eligible":
+ return "Your current user is not eligible for any guides.";
+ }
+};
+
const filterGuides = (
guides: InspectionResultOk["guides"],
displayOption: DisplayOption,
) => {
return guides.filter((guide) => {
- const { isEligible, isQualified } = guide.annotation;
- const isDisplayable = isEligible && isQualified;
-
- if (displayOption === "only-displayable" && !isDisplayable) {
- return false;
- }
- if (displayOption === "only-eligible" && !isEligible) {
+ if (displayOption === "only-eligible" && !guide.annotation.isEligible) {
return false;
}
if (displayOption === "only-active" && !guide.annotation.active.status) {
@@ -149,7 +168,6 @@ export const V2 = () => {
{isCollapsed ? (
Guide Toolbar
@@ -158,6 +176,7 @@ export const V2 = () => {
}
+ {...sharedTooltipProps}
>
{
direction="column"
backgroundColor="surface-1"
rounded="4"
- border="px"
overflow="hidden"
style={{
width: TOOLBAR_WIDTH,
- boxShadow: "0 8px 32px var(--tgph-gray-5)",
+ boxShadow: TOOLBAR_BOX_SHADOW,
animation: "toolbar-expand-fade-in 150ms ease-out",
}}
>
@@ -295,10 +313,9 @@ export const V2 = () => {
>
Eligible
- {/* Note: `only-displayable` is not available for now */}
-
+
-
+