[Website] Let Dock buttons be disabled and pane subtitles contain links

packages/playground/website/src/components/dock/dock-item-button.spec.tsx

@@ -37,6 +37,19 @@ describe('DockItemButton', () => {
 		);
 		expect(hiddenMarkerCount).toBe(2);
 	});
+
+	it('can disable unavailable actions', () => {
+		const markup = renderToStaticMarkup(
+			<DockItemButton
+				label="Database"
+				ariaLabel="Database"
+				icon={<DockDatabaseIcon />}
+				disabled
+			/>
+		);
+
+		expect(markup).toMatch(/<button\b[^>]*\sdisabled(?:="")?(?=\s|>)/);
+	});
 });
 
 function countMatches(value: string, substring: string) {

packages/playground/website/src/components/dock/dock-item-button.tsx

@@ -12,6 +12,7 @@ export type DockItemButtonProps = {
 	hasSeparator?: boolean;
 	hasNotification?: boolean;
 	notificationAriaSuffix?: string;
+	disabled?: boolean;
 	dataCy?: string;
 	onClick?: MouseEventHandler<HTMLButtonElement>;
 };
@@ -33,6 +34,7 @@ export const DockItemButton = forwardRef<
 		hasSeparator = false,
 		hasNotification = false,
 		notificationAriaSuffix = 'notification available',
+		disabled = false,
 		dataCy,
 		onClick,
 	},
@@ -57,6 +59,7 @@ export const DockItemButton = forwardRef<
 				})}
 				aria-label={buttonAriaLabel}
 				aria-pressed={isActive}
+				disabled={disabled}
 				onClick={onClick}
 				data-cy={dataCy}
 			>

packages/playground/website/src/components/dock/dock-pane.spec.tsx

@@ -32,6 +32,21 @@ describe('DockPane', () => {
 		expect(markup).toContain('Editor content');
 	});
 
+	it('can replace the description with richer header content', () => {
+		const markup = renderToStaticMarkup(
+			<DockPane
+				title="Blueprint"
+				description="Plain description"
+				headerSubtitle={<a href="/docs">Blueprint documentation</a>}
+			>
+				<p>Editor content</p>
+			</DockPane>
+		);
+
+		expect(markup).toContain('Blueprint documentation');
+		expect(markup).not.toContain('Plain description');
+	});
+
 	it('renders a disabled close button when pane closing is blocked', () => {
 		const markup = renderToStaticMarkup(
 			<DockPane

packages/playground/website/src/components/dock/dock-pane.tsx

@@ -8,6 +8,7 @@ export type DockPaneProps = {
 	title: string;
 	children: ReactNode;
 	description?: string;
+	headerSubtitle?: ReactNode;
 	className?: string;
 	style?: CSSProperties;
 	isEditor?: boolean;
@@ -30,6 +31,7 @@ export const DockPane = forwardRef<HTMLElement, DockPaneProps>(
 		{
 			title,
 			description,
+			headerSubtitle,
 			children,
 			className,
 			style,
@@ -97,10 +99,16 @@ export const DockPane = forwardRef<HTMLElement, DockPaneProps>(
 					<div className={css.paneHeader}>
 						<div className={css.paneHeaderMain}>
 							<h2>{title}</h2>
-							{description && (
-								<p className={css.paneDescription}>
-									{description}
-								</p>
+							{headerSubtitle !== undefined ? (
+								<div className={css.paneDescription}>
+									{headerSubtitle}
+								</div>
+							) : (
+								description && (
+									<p className={css.paneDescription}>
+										{description}
+									</p>
+								)
 							)}
 						</div>
 						{headerAction}

packages/playground/website/src/components/dock/dock-toggle-pill.spec.tsx

@@ -35,4 +35,25 @@ describe('DockTogglePill', () => {
 		expect(markup).toContain('aria-label="Full width"');
 		expect(markup).toContain('aria-pressed="false"');
 	});
+
+	it('can disable collapsing without disabling full-width mode', () => {
+		const markup = renderToStaticMarkup(
+			<DockTogglePill
+				isCollapsed={false}
+				isFullWidth={false}
+				collapseDisabled
+				onToggleCollapsed={() => {}}
+				onToggleFullWidth={() => {}}
+			/>
+		);
+
+		expect(markup).toContain('title="Tools cannot be hidden right now"');
+		expect(markup).toContain(
+			'aria-label="Tools cannot be hidden right now"'
+		);
+		const buttons = markup.match(/<button\b[^>]*>/g);
+		expect(buttons).toHaveLength(2);
+		expect(buttons?.[0]).toMatch(/\sdisabled(?:="")?(?=\s|>)/);
+		expect(buttons?.[1]).not.toMatch(/\sdisabled(?:="")?(?=\s|>)/);
+	});
 });

packages/playground/website/src/components/dock/dock-toggle-pill.tsx

@@ -10,6 +10,7 @@ import css from './style.module.css';
 export type DockTogglePillProps = {
 	isCollapsed: boolean;
 	isFullWidth: boolean;
+	collapseDisabled?: boolean;
 	collapseButtonRef?: Ref<HTMLButtonElement>;
 	onToggleCollapsed: MouseEventHandler<HTMLButtonElement>;
 	onToggleFullWidth: MouseEventHandler<HTMLButtonElement>;
@@ -22,10 +23,17 @@ export type DockTogglePillProps = {
 export function DockTogglePill({
 	isCollapsed,
 	isFullWidth,
+	collapseDisabled = false,
 	collapseButtonRef,
 	onToggleCollapsed,
 	onToggleFullWidth,
 }: DockTogglePillProps) {
+	const collapseButtonLabel = collapseDisabled
+		? 'Tools cannot be hidden right now'
+		: isCollapsed
+			? 'Show tools'
+			: 'Hide tools';
+
 	return (
 		<div className={css.dockTogglePill}>
 			<button
@@ -34,9 +42,10 @@ export function DockTogglePill({
 				className={classNames(css.dockPillBtn, css.dockPillCollapse, {
 					[css.dockPillCollapseClosed]: isCollapsed,
 				})}
-				aria-label={isCollapsed ? 'Show tools' : 'Hide tools'}
+				aria-label={collapseButtonLabel}
 				aria-expanded={!isCollapsed}
-				title={isCollapsed ? 'Show tools' : 'Hide tools'}
+				title={collapseButtonLabel}
+				disabled={collapseDisabled}
 				onClick={onToggleCollapsed}
 			>
 				<DockCollapseChevronIcon />

packages/playground/website/src/components/dock/style.module.css

@@ -40,6 +40,16 @@
 	color: #f7f5f2;
 }
 
+.dock-item:disabled {
+	color: rgba(247, 245, 242, 0.4);
+	cursor: default;
+}
+
+.dock-item:disabled:hover {
+	background: transparent;
+	color: rgba(247, 245, 242, 0.4);
+}
+
 .dock-item-active {
 	background: rgba(247, 245, 242, 0.22);
 	color: #ffffff;
@@ -119,6 +129,16 @@
 	color: #ffffff;
 }
 
+.dock-pill-btn:disabled {
+	color: rgba(247, 245, 242, 0.4);
+	cursor: default;
+}
+
+.dock-pill-btn:disabled:hover {
+	background: transparent;
+	color: rgba(247, 245, 242, 0.4);
+}
+
 .dock-pill-btn:focus-visible {
 	outline: 2px solid #3858e9;
 	outline-offset: -2px;