feat: added focus state to checkboxes BED-8975

[Holocraft]

Description

This adds the new focus state requirements to checkboxes.

Note that this is only part of the main story. The other inputs will be PRed to the same story.

Motivation and Context

Resolves BED-8975

How Has This Been Tested?

Visually

Screenshots (optional):

Screen.Recording.2026-07-24.at.2.51.28.PM.mov

Types of changes

• New feature (non-breaking change which adds functionality)

Checklist:

• I have met the contributing prerequisites
  • Assigned myself to this PR
  • Added the appropriate labels
  • Associated an issue: Issues and Pull Requests README #672
  • Read the Contributing guide: https://github.com/SpecterOps/BloodHound/wiki/Contributing
• I have ensured that related documentation is up-to-date
  • Open API docs
  • Code comments (GoDocs / JSDocs)
• I have followed proper test practices
  • Added/updated tests to cover my changes
  • All new and existing tests passed

Summary by CodeRabbit

• UI Improvements
  • Standardized checkbox + label rendering across user creation, environment selection, column management, query settings, filtering dialogs, and saved query permissions.
  • Improved “Select All”/indeterminate checkbox behavior and refined checkbox-driven row toggling in the edge filtering dialog.
• Styling & Theme
  • Refreshed checkbox focus/error/hover/disabled visuals, including dark-mode theme token updates (checkbox hover and input colors).
• Button
  • Fixed transparent button disabled styling to use consistent disabled appearance.
• Tests
  • Updated checkbox-with-label error-state assertions.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: bb6c78ed-33a8-4b44-9485-2b0b8e88a55a

📥 Commits

Reviewing files that changed from the base of the PR and between e60fff8 and b329556.

📒 Files selected for processing (2)

• packages/javascript/doodle-ui/src/tailwind/plugin.ts
• packages/javascript/doodle-ui/src/tailwind/preset.ts

🚧 Files skipped from review as they are similar to previous changes (2)

• packages/javascript/doodle-ui/src/tailwind/preset.ts
• packages/javascript/doodle-ui/src/tailwind/plugin.ts

---

📝 Walkthrough

Walkthrough

This PR updates shared checkbox styling and theme tokens, migrates multiple UI controls to CheckboxWithLabel, and revises saved-query permission checkbox state handling and column memoization.

Changes

Checkbox UI migration

Layer / File(s)	Summary
Shared checkbox foundation packages/javascript/doodle-ui/src/components/Checkbox/Checkbox.tsx, packages/javascript/doodle-ui/src/components/Button/Button.tsx, packages/javascript/doodle-ui/src/tailwind/*, packages/javascript/doodle-ui/src/components/Checkbox/Checkbox.test.tsx	Checkbox focus-ring behavior, CheckboxWithLabel styling, button transparency, error-state assertions, and checkbox/input theme tokens are updated.
CheckboxWithLabel migrations packages/javascript/bh-shared-ui/src/components/{CreateUserForm,EnvironmentSelectPanel}/..., packages/javascript/bh-shared-ui/src/components/ExploreTable/..., packages/javascript/bh-shared-ui/src/views/Explore/ExploreSearch/...	Multiple forms, selectors, search controls, and edge filters use CheckboxWithLabel while preserving existing state and handlers.
Saved query permission controls packages/javascript/bh-shared-ui/src/views/Explore/ExploreSearch/SavedQueries/SavedQueryPermissions.tsx	Permission checkbox state uses refs and memoized callbacks/columns, and user email accepts null values.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

• SpecterOps/BloodHound#2933: Related CheckboxWithLabel migrations and shared checkbox styling changes.
• SpecterOps/BloodHound#2966: Also updates Checkbox.tsx focus-state styling.

Suggested labels: javascript

Suggested reviewers: thenando

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately summarizes the main change: adding checkbox focus state support.
Description check	✅ Passed	The description covers the required sections, links the issue, notes visual testing, and identifies the change type.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch BED-8975

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@packages/javascript/bh-shared-ui/src/views/Explore/ExploreSearch/EdgeFilter/EdgeFilteringDialog.tsx`:
- Around line 468-475: Update the CheckboxWithLabel usage in EdgeFilteringDialog
so clicks on the generated label also stop propagation before reaching the
collapsible parent row, while preserving the existing checkbox selection
behavior and row toggle behavior for other clicks.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: ae7dc759-b621-4d3d-b8f5-fd6cc68ce5b5

📥 Commits

Reviewing files that changed from the base of the PR and between 1968388 and 9197ff9.

📒 Files selected for processing (10)

• packages/javascript/bh-shared-ui/src/components/CreateUserForm/CreateUserForm.tsx
• packages/javascript/bh-shared-ui/src/components/EnvironmentSelectPanel/EnvironmentSelectPanel.tsx
• packages/javascript/bh-shared-ui/src/components/ExploreTable/ManageColumnsComboBox/ManageColumnsListItem.tsx
• packages/javascript/bh-shared-ui/src/views/Explore/ExploreSearch/CypherSearch.tsx
• packages/javascript/bh-shared-ui/src/views/Explore/ExploreSearch/EdgeFilter/EdgeFilteringDialog.tsx
• packages/javascript/bh-shared-ui/src/views/Explore/ExploreSearch/SavedQueries/SavedQueryPermissions.tsx
• packages/javascript/doodle-ui/src/components/Button/Button.tsx
• packages/javascript/doodle-ui/src/components/Checkbox/Checkbox.tsx
• packages/javascript/doodle-ui/src/tailwind/plugin.ts
• packages/javascript/doodle-ui/src/tailwind/preset.ts

[bfaulk96]

A few minor comments, but looks good overall. Hooray for code cleanup! 😁

[bfaulk96]

Code looks good, and everything looked good running locally!