fix(FN-2396): align directory picker select button styling

- Switch the DirectoryPicker Select action to shared btn btn-primary classes with explicit button type
- Move select-button padding to component-scoped DirectoryPicker.css tokens and remove hardcoded !important overrides
- Extend DirectoryPicker tests to assert the expected class contract before click behavior
This commit is contained in:
Fusion
2026-04-24 20:58:45 -07:00
committed by gsxdsm
parent 4b01c02fb4
commit 70d77f8ba6
3 changed files with 10 additions and 6 deletions

View File

@@ -214,7 +214,5 @@
.directory-picker-select-btn {
flex-shrink: 0;
padding: 6px 16px !important;
font-size: 13px !important;
padding: var(--space-sm) var(--space-lg);
}

View File

@@ -1,7 +1,7 @@
import "./DirectoryPicker.css";
import { useState, useCallback, useEffect } from "react";
import { Folder, FolderOpen, ChevronRight, ChevronUp, Loader2, Eye, EyeOff, AlertCircle } from "lucide-react";
import { browseDirectory, type BrowseDirectoryResult } from "../api";
import "./DirectoryPicker.css";
export interface DirectoryPickerProps {
value: string;
@@ -218,7 +218,8 @@ export function DirectoryPicker({ value, onChange, placeholder, onInputKeyDown,
{browser.currentPath}
</span>
<button
className="btn-primary directory-picker-select-btn"
type="button"
className="btn btn-primary directory-picker-select-btn"
onClick={handleSelect}
>
Select

View File

@@ -116,7 +116,12 @@ describe("DirectoryPicker", () => {
expect(screen.getByText("projects")).toBeDefined();
});
fireEvent.click(screen.getByText("Select"));
const selectButton = screen.getByRole("button", { name: "Select" });
expect(selectButton.classList.contains("btn")).toBe(true);
expect(selectButton.classList.contains("btn-primary")).toBe(true);
expect(selectButton.classList.contains("directory-picker-select-btn")).toBe(true);
fireEvent.click(selectButton);
expect(onChange).toHaveBeenCalledWith("/home/user");
});