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:
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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");
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user