Conversation
Holocraft
added
enhancement
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThis PR standardizes focus-ring and design-token styling across shared UI components, adds keyboard activation to data-table rows, refactors dropdown trigger ref forwarding, updates icon styling, and changes numerous application action buttons from ChangesTheme and component foundation
Estimated code review effort: 4 (Complex) | ~60 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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/constants.ts`:
- Around line 273-275: Update the checkbox styling near the `& svg` selector so
its primary color does not override disabled-state styling. Scope the selector
to non-disabled checkboxes, or remove the explicit SVG color and allow it to
inherit the root checkbox color while preserving active checkbox appearance.
🪄 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: cbed1b06-eecc-4125-b594-90d87ce698aa
📒 Files selected for processing (62)
cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsxcmd/ui/src/views/Explore/ContextMenu/AssetGroupMenuItem.tsxpackages/javascript/bh-shared-ui/src/components/AssetGroupEdit/AssetGroupChangelogTable.tsxpackages/javascript/bh-shared-ui/src/components/CollectorCard/CollectorCard.tsxpackages/javascript/bh-shared-ui/src/components/ConfirmationDialog.tsxpackages/javascript/bh-shared-ui/src/components/CreateUserForm/CreateUserForm.tsxpackages/javascript/bh-shared-ui/src/components/Disable2FADialog/Disable2FADialog.tsxpackages/javascript/bh-shared-ui/src/components/DropdownSelector/DropdownSelector.tsxpackages/javascript/bh-shared-ui/src/components/DropdownSelector/DropdownTrigger.tsxpackages/javascript/bh-shared-ui/src/components/DropdownSelector/DropdownTriggerContents.tsxpackages/javascript/bh-shared-ui/src/components/DropdownSelector/constants.tspackages/javascript/bh-shared-ui/src/components/Enable2FADialog/Enable2FADialog.tsxpackages/javascript/bh-shared-ui/src/components/FileUploadDialog/FileUploadDialog.tsxpackages/javascript/bh-shared-ui/src/components/Navigation/MainNav.tsxpackages/javascript/bh-shared-ui/src/components/NodeIcon/NodeIcon.tsxpackages/javascript/bh-shared-ui/src/components/OneTimePasscodeForm/OneTimePasscodeForm.tsxpackages/javascript/bh-shared-ui/src/components/PasswordDialog/PasswordDialog.tsxpackages/javascript/bh-shared-ui/src/components/PasswordResetForm/PasswordResetForm.tsxpackages/javascript/bh-shared-ui/src/components/SchemaUploadDialog/SchemaUploadDialog.tsxpackages/javascript/bh-shared-ui/src/components/SearchResultItem/SearchResultItem.tsxpackages/javascript/bh-shared-ui/src/components/SetupKeyDialog.tsxpackages/javascript/bh-shared-ui/src/components/SimpleEnvironmentSelector/SimpleEnvironmentSelector.tsxpackages/javascript/bh-shared-ui/src/components/UpdateUserForm/UpdateUserForm.tsxpackages/javascript/bh-shared-ui/src/components/UpsertSSOProviders/UpsertOIDCProviderForm.tsxpackages/javascript/bh-shared-ui/src/components/UpsertSSOProviders/UpsertSAMLProviderForm/UpsertSAMLProviderForm.tsxpackages/javascript/bh-shared-ui/src/components/UserTokenManagementDialog/CreateUserTokenDialog.tsxpackages/javascript/bh-shared-ui/src/components/UserTokenManagementDialog/TokenRevokeDialog.tsxpackages/javascript/bh-shared-ui/src/components/UserTokenManagementDialog/UserTokenDialog.tsxpackages/javascript/bh-shared-ui/src/components/UserTokenManagementDialog/UserTokenManagementDialog.tsxpackages/javascript/bh-shared-ui/src/constants.tspackages/javascript/bh-shared-ui/src/views/Explore/ContextMenu/AssetGroupMenuItemPrivilegeZonesEnabled.tsxpackages/javascript/bh-shared-ui/src/views/Explore/ExploreSearch/EdgeFilter/EdgeFilteringDialog.tsxpackages/javascript/bh-shared-ui/src/views/Explore/ExploreSearch/SavedQueries/ConfirmDeleteQueryDialog.tsxpackages/javascript/bh-shared-ui/src/views/Explore/ExploreSearch/SavedQueries/SaveQueryActionMenu.tsxpackages/javascript/bh-shared-ui/src/views/Explore/ExploreSearch/SavedQueries/TagToZoneLabel.tsxpackages/javascript/bh-shared-ui/src/views/PrivilegeZones/Save/TagForm/GlyphSelectDialog.tsxpackages/javascript/bh-shared-ui/src/views/PrivilegeZones/ZoneIcon.tsxpackages/javascript/doodle-ui/src/components/Accordion/Accordion.tsxpackages/javascript/doodle-ui/src/components/Alert/Alert.tsxpackages/javascript/doodle-ui/src/components/Breadcrumbs/Breadcrumbs.tsxpackages/javascript/doodle-ui/src/components/Button/Button.tsxpackages/javascript/doodle-ui/src/components/Carousel/Carousel.tsxpackages/javascript/doodle-ui/src/components/Checkbox/Checkbox.tsxpackages/javascript/doodle-ui/src/components/DataTable/DataTable.tsxpackages/javascript/doodle-ui/src/components/DataTable/StorybookExample/utils.tsxpackages/javascript/doodle-ui/src/components/Dialog/Dialog.tsxpackages/javascript/doodle-ui/src/components/Input/Input.tsxpackages/javascript/doodle-ui/src/components/Link/Link.tsxpackages/javascript/doodle-ui/src/components/Menu/Menu.tsxpackages/javascript/doodle-ui/src/components/Pagination/Pagination.tsxpackages/javascript/doodle-ui/src/components/Popover/Popover.tsxpackages/javascript/doodle-ui/src/components/RadioGroup/RadioGroup.tsxpackages/javascript/doodle-ui/src/components/Select/Select.tsxpackages/javascript/doodle-ui/src/components/Switch/Switch.tsxpackages/javascript/doodle-ui/src/components/Table/Table.tsxpackages/javascript/doodle-ui/src/components/Tabs/Tabs.tsxpackages/javascript/doodle-ui/src/components/Textarea/Textarea.tsxpackages/javascript/doodle-ui/src/components/Toggle/Toggle.tsxpackages/javascript/doodle-ui/src/components/ToggleGroup/ToggleGroup.tsxpackages/javascript/doodle-ui/src/components/Tooltip/Tooltip.tsxpackages/javascript/doodle-ui/src/tailwind/plugin.tspackages/javascript/doodle-ui/src/tailwind/preset.ts
| '& svg': { | ||
| color: palette.color.primary, | ||
| }, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the relevant section with line numbers
sed -n '240,320p' packages/javascript/bh-shared-ui/src/constants.ts | cat -n
# Search for checkbox-related overrides and disabled styling in the repo
rg -n --no-heading "MuiCheckbox|checkbox|Mui-disabled|& svg" packages/javascript/bh-shared-ui/src packages/javascript -g '!**/node_modules/**' || trueRepository: SpecterOps/BloodHound
Length of output: 2032
🌐 Web query:
MUI Checkbox disabled state icon color theme override svg color disabled checkbox styling
💡 Result:
To override the color of a disabled MUI Checkbox icon, you must target the global state class.Mui-disabled. Because MUI components use high-specificity state classes, you must use a nested selector within your component style overrides to ensure your CSS takes precedence [1][2]. Global Theme Override You can apply this globally through your theme configuration using components and styleOverrides [3]. Target the root slot and use the &.Mui-disabled selector: const theme = createTheme({ components: { MuiCheckbox: { styleOverrides: { root: { '&.Mui-disabled': { color: 'your-custom-color', // Replace with your desired color }, }, }, }, }, }); Important Considerations: 1. Specificity: Simply providing a disabled key in styleOverrides (if applicable to older versions) or relying solely on CSS may fail because.Mui-disabled has high specificity [1][2]. Always use the nested & selector as shown above to ensure your style is applied correctly [1]. 2. Icon Component: If you require complex changes beyond color, the Checkbox component accepts icon and checkedIcon props [4][5]. You can pass a custom SvgIcon and control its color logic dynamically based on the disabled prop [4]: <Checkbox disabled={true} icon={<SvgIcon component={YourCustomIcon} style={{ color: isDisabled? 'gray': 'blue' }} />} /> 3. Palette Defaults: Alternatively, you can modify the default disabled opacity or color globally via the palette configuration in your theme, though this will affect all components, not just the Checkbox [6]: const theme = createTheme({ palette: { action: { disabled: 'your-custom-color', disabledOpacity: 0.5, }, }, }); For most use cases, the component-level styleOverride using the &.Mui-disabled selector is the recommended and most precise approach [1][3].
Citations:
- 1: https://mui.com/material-ui/customization/how-to-customize/
- 2: [Checkbox] Overriding Checkbox styles from theme provider not working mui/material-ui#34708
- 3: https://v6.mui.com/material-ui/customization/theme-components/
- 4: https://stackoverflow.com/questions/62467501/custom-disabled-style-for-material-uis-checkbox
- 5: https://v6.mui.com/material-ui/api/checkbox/
- 6: https://stackoverflow.com/questions/56843818/override-mui-disabled-or-other-pseudo-classes-states-from-the-theme-mui-v4-1
Preserve disabled checkbox styling. The unconditional & svg color overrides the disabled state, so disabled checkboxes can still look active. Scope this to non-disabled checkboxes or let the icon inherit the root color.
🤖 Prompt for 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.
In `@packages/javascript/bh-shared-ui/src/constants.ts` around lines 273 - 275,
Update the checkbox styling near the `& svg` selector so its primary color does
not override disabled-state styling. Scope the selector to non-disabled
checkboxes, or remove the explicit SVG color and allow it to inherit the root
checkbox color while preserving active checkbox appearance.
1 participant
Description
This changeset adds focus state styling to all general inputs: buttons, text fields, toggles, etc. to adhere to WCAG standards. It also changes all tertiary buttons to secondary buttons.
Motivation and Context
Note that these changes are under a branch from a previous reversion story. Disregard and proceed as this was the new story branch BED-8950
Resolves BED-8950
How Has This Been Tested?
Manually
Screenshots (optional):
Types of changes
Checklist:
Summary by CodeRabbit