Skip to content

feat: focus styling BED-8950 #2979

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Holocraft merged 6 commits into from
Jul 15, 2026
Merged

feat: focus styling BED-8950 #2979

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
25aeece
BED-8950 focus styling
Holocraft Jul 10, 2026
436b3f8
fixed test
Holocraft Jul 10, 2026
b2d2282
Merge branch 'main' of github.com:SpecterOps/BloodHound into BED-8864
Holocraft Jul 14, 2026
335074c
PR feedback
Holocraft Jul 14, 2026
a3304f8
PR feedback
Holocraft Jul 14, 2026
9a40660
Merge remote-tracking branch 'origin/main' into BED-8864
Holocraft Jul 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export const EarlyAccessFeaturesWarningDialog: React.FC<{
</DialogContent>
<DialogActions>
<Button
variant='tertiary'
variant='secondary'
onClick={onCancel}
data-testid='early-access-features-warning-dialog_button-close'>
{'Take me back'}
Expand Down
2 changes: 1 addition & 1 deletion cmd/ui/src/views/Explore/ContextMenu/AssetGroupMenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ const ConfirmNodeChangesDialog: FC<{
<DialogTitle>Confirm Selection</DialogTitle>
<DialogContent>{dialogContent}</DialogContent>
<DialogActions>
<Button variant='tertiary' onClick={handleCancel}>
<Button variant='secondary' onClick={handleCancel}>
Cancel
</Button>
<Button variant='primary' onClick={handleApply}>
Expand Down
2 changes: 1 addition & 1 deletion packages/javascript/bh-shared-ui/src/components/AssetGroupEdit/AssetGroupChangelogTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const AssetGroupChangelogTable: FC<{
<Box mt={1}>
<Grid container direction='row' justifyContent='flex-end' spacing={1}>
<Grid item>
<Button variant='tertiary' size='small' onClick={onCancel}>
<Button variant='secondary' size='small' onClick={onCancel}>
Cancel
</Button>
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion packages/javascript/bh-shared-ui/src/components/CollectorCard/CollectorCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const CollectorCard: React.FC<CollectorCardProps> = ({
<Box>
<Button
aria-label={`Download ${COLLECTOR_TYPE[collectorType]} ${version} (.zip)`}
variant='tertiary'
variant='secondary'
onClick={handleOnClickDownload}>
<FontAwesomeIcon
aria-hidden='true'
Expand Down
4 changes: 2 additions & 2 deletions packages/javascript/bh-shared-ui/src/components/ConfirmationDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const ConfirmationDialog: React.FC<{
Please input "{challengeTxt}" prior to clicking confirm.
<Input
placeholder={challengeTxt}
className='border-t-0 border-l-0 border-r-0 rounded-none border-black dark:border-white bg-transparent dark:bg-transparent placeholder-neutral-dark-10 dark:placeholder-neutral-light-10 focus-visible:ring-0 focus-visible:ring-offset-0 pl-2'
className='border-t-0 border-l-0 border-r-0 rounded-sm border-text-main bg-transparent placeholder:text-light text-main dark:text-main pl-2'
onChange={(e) => setChallengeTxtReply(e.target.value)}
value={challengeTxtReply}
data-testid='confirmation-dialog_challenge-text'
Expand All @@ -75,7 +75,7 @@ const ConfirmationDialog: React.FC<{
<DialogActions>
{error && <p className='content-center text-error text-xs mt-[3px]'>{error}</p>}
<Button
variant='tertiary'
variant='secondary'
onClick={handleClose}
disabled={isLoading}
data-testid='confirmation-dialog_button-no'>
Expand Down
4 changes: 2 additions & 2 deletions packages/javascript/bh-shared-ui/src/components/CreateUserForm/CreateUserForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const CreateUserForm: React.FC<{
disabled={props.isLoading}
role='button'
type='button'
variant='tertiary'>
variant='secondary'>
Close
</Button>
</DialogClose>
Expand Down Expand Up @@ -524,7 +524,7 @@ const CreateUserFormInner: React.FC<{
<Button
type='button'
disabled={isLoading}
variant='tertiary'
variant='secondary'
data-testid='create-user-dialog_button-cancel'>
Cancel
</Button>
Expand Down
2 changes: 1 addition & 1 deletion packages/javascript/bh-shared-ui/src/components/Disable2FADialog/Disable2FADialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const Disable2FADialog: React.FC<{
)}
</DialogContent>
<DialogActions>
<Button type='button' variant='tertiary' onClick={onCancel}>
<Button type='button' variant='secondary' onClick={onCancel}>
Cancel
</Button>
<Button type='submit'>Disable Multi-Factor Authentication</Button>
Expand Down
3 changes: 2 additions & 1 deletion packages/javascript/bh-shared-ui/src/components/DropdownSelector/DropdownSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { Button, ButtonProps, Popover, PopoverContent, Tooltip, Typography } fro
import { FC, useState } from 'react';
import { cn } from '../../utils';
import DropdownTrigger from './DropdownTrigger';
import { optionStyles, popoverContentStyles, tooltipStyles } from './constants';
import { optionIconStyles, optionStyles, popoverContentStyles, tooltipStyles } from './constants';
import { DropdownOption } from './types';

const DropdownSelector: FC<{
Expand Down Expand Up @@ -75,6 +75,7 @@ const DropdownSelector: FC<{
</span>
{option.icon && (
<FontAwesomeIcon
className={optionIconStyles}
style={{ width: '10%', alignSelf: 'center' }}
icon={option.icon}
data-testid={`dropdown-icon-${option.icon.iconName}`}
Expand Down
19 changes: 4 additions & 15 deletions packages/javascript/bh-shared-ui/src/components/DropdownSelector/DropdownTrigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,13 @@
//
// SPDX-License-Identifier: Apache-2.0

import { ButtonProps, PopoverTrigger } from 'doodle-ui';
import { FC } from 'react';
import DropdownTriggerContents from './DropdownTriggerContents';
import { PopoverTrigger } from 'doodle-ui';
import DropdownTriggerContents, { DropdownTriggerContentsProps } from './DropdownTriggerContents';

const DropdownTrigger: FC<{
open: boolean;
selectedText: JSX.Element | string;
buttonProps?: ButtonProps;
StartAdornment?: React.FC;
EndAdornment?: React.FC;
testId?: string;
variant?: ButtonProps['variant'];
}> = (props) => {
const DropdownTrigger = (props: DropdownTriggerContentsProps) => {
return (
<PopoverTrigger asChild>
<div>
<DropdownTriggerContents {...props} />
</div>
<DropdownTriggerContents {...props} />
</PopoverTrigger>
);
};
Expand Down
116 changes: 64 additions & 52 deletions packages/javascript/bh-shared-ui/src/components/DropdownSelector/DropdownTriggerContents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,70 +14,82 @@
//
// SPDX-License-Identifier: Apache-2.0
import { Button, ButtonProps } from 'doodle-ui';
import { forwardRef, type FC } from 'react';
import { cn } from '../../utils';
import { AppIcon } from '../AppIcon';
import { triggerStyles } from './constants';
import { dropdownIconStateStyles, selectorIconStyles, triggerStyles } from './constants';

type DropdownTriggerContentsProps = {
export type DropdownTriggerContentsProps = ButtonProps & {
open: boolean;
selectedText: JSX.Element | string;
buttonProps?: ButtonProps;
StartAdornment?: React.FC;
EndAdornment?: React.FC;
StartAdornment?: FC;
EndAdornment?: FC;
testId?: string;
variant?: ButtonProps['variant'];
readOnly?: boolean;
};

const DropdownTriggerContents = ({
open,
selectedText,
buttonProps,
StartAdornment,
EndAdornment,
testId,
variant,
readOnly,
}: DropdownTriggerContentsProps) => {
const buttonPrimary = variant === 'primary';
const DropdownTriggerContents = forwardRef<HTMLButtonElement, DropdownTriggerContentsProps>(
(
{
open,
selectedText,
buttonProps,
StartAdornment,
EndAdornment,
testId,
variant,
readOnly,
className,
...props
},
ref
) => {
const buttonPrimary = variant === 'primary';

return (
<Button
variant={variant}
className={cn(
'uppercase',
{
'w-full text-sm': buttonPrimary,
[triggerStyles]: !buttonPrimary,
'bg-primary text-white border-transparent': open,
},
buttonProps?.className
)}
size='small'
data-testid={testId ? testId : 'dropdown_context-selector'}>
<span
className={cn('flex justify-center items-center max-w-full', {
'justify-between': StartAdornment,
})}>
<div className='flex items-center truncate'>
{StartAdornment && <StartAdornment />}
<p className='truncate font-bold mr-2'>{selectedText}</p>
</div>
{EndAdornment ? (
<EndAdornment />
) : (
<span
className={cn({
'rotate-180 transition-transform': open,
'justify-self-end': buttonPrimary,
hidden: readOnly,
})}>
<AppIcon.CaretDown size={12} />
</span>
return (
<Button
ref={ref}
{...props}
variant={variant ?? 'transparent'}
className={cn(
'uppercase group',
buttonPrimary && `w-full text-sm ${dropdownIconStateStyles}`,
{
[triggerStyles]: !buttonPrimary,
'bg-primary text-common-white border-transparent': open,
},
className,
buttonProps?.className
)}
</span>
</Button>
);
};
size='small'
data-testid={testId ? testId : 'dropdown_context-selector'}>
<span
className={cn('flex justify-center items-center max-w-full', {
'justify-between': StartAdornment,
})}>
<div className='flex items-center truncate'>
{StartAdornment && <StartAdornment />}
<p className='truncate font-bold mr-2'>{selectedText}</p>
</div>
{EndAdornment ? (
<EndAdornment />
) : (
<span
className={cn({
'rotate-180 transition-transform': open,
'justify-self-end': buttonPrimary,
hidden: readOnly,
})}>
<AppIcon.CaretDown className={selectorIconStyles} size={12} />
</span>
)}
</span>
</Button>
);
}
);
DropdownTriggerContents.displayName = 'DropdownTriggerContents';

export default DropdownTriggerContents;
22 changes: 16 additions & 6 deletions packages/javascript/bh-shared-ui/src/components/DropdownSelector/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,22 @@
// limitations under the License.
//
// SPDX-License-Identifier: Apache-2.0
export const triggerStyles =
'max-w-56 text-sm text-contrast rounded-md bg-transparent hover:bg-primary hover:text-white border shadow-outer-0 hover:border-transparent border-neutral-light-5 group';
export const focusedControlStateStyles =
'focus:bg-primary focus:text-common-white focus-visible:bg-secondary focus-visible:text-common-white dark:focus-visible:text-common-dark';

export const popoverContentStyles = 'flex flex-col p-0 rounded-md border border-neutral-5 bg-neutral-1';
export const dropdownIconStateStyles =
'hover:[&_svg]:text-common-white dark:hover:[&_svg]:text-common-dark hover:[&_svg]:fill-current hover:[&_svg_*]:text-common-white dark:hover:[&_svg_*]:text-common-dark hover:[&_svg_*]:fill-current focus:[&_svg]:text-common-white focus:[&_svg]:fill-current focus:[&_svg_*]:text-common-white focus:[&_svg_*]:fill-current focus-visible:[&_svg]:text-common-white dark:focus-visible:[&_svg]:text-common-dark focus-visible:[&_svg]:fill-current focus-visible:[&_svg_*]:text-common-white dark:focus-visible:[&_svg_*]:text-common-dark focus-visible:[&_svg_*]:fill-current';

export const optionStyles =
'px-4 py-1 rounded-none w-full justify-normal hover:no-underline hover:bg-neutral-4 disabled:bg-neutral-4';
export const triggerStyles = `max-w-56 text-sm text-main rounded-md bg-transparent hover:bg-primary hover:text-common-white ${focusedControlStateStyles} border shadow-outer-0 hover:border-transparent focus:border-transparent focus-visible:border-transparent border-dropdown-trigger-border group ${dropdownIconStateStyles}`;

export const tooltipStyles = 'max-w-80 border-0 dark:bg-neutral-4 dark:text-white';
export const popoverContentStyles =
'flex flex-col p-0 rounded-md border border-dropdown-popover-border bg-dropdown-popover-fill';

export const optionStyles = `px-4 py-1 rounded-none w-full justify-normal text-main hover:no-underline hover:bg-dropdown-option-hover-fill ${focusedControlStateStyles} ${dropdownIconStateStyles} disabled:bg-dropdown-option-disabled-fill group`;

export const selectorIconStyles =
'group-hover:text-common-white dark:group-hover:text-common-dark group-focus:text-common-white group-focus-visible:text-common-white dark:group-focus-visible:text-common-dark';

export const optionIconStyles = selectorIconStyles;

export const tooltipStyles = 'max-w-80 border-0 dark:bg-dropdown-tooltip-fill text-main';
4 changes: 2 additions & 2 deletions packages/javascript/bh-shared-ui/src/components/Enable2FADialog/Enable2FADialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ const Enable2FADialog: React.FC<{
<>
<Button
type='button'
variant='tertiary'
variant='secondary'
onClick={onCancel}
data-testid='enable-2fa-dialog_button-close'>
Cancel
Expand All @@ -226,7 +226,7 @@ const Enable2FADialog: React.FC<{
<>
<Button
type='button'
variant='tertiary'
variant='secondary'
onClick={handleOnClose}
data-testid='enable-2fa-dialog_button-close'>
Close
Expand Down
2 changes: 1 addition & 1 deletion packages/javascript/bh-shared-ui/src/components/ExploreTable/ExploreTable.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { useState } from 'react';
import { cypherTestResponse } from '../../mocks';
import { render } from '../../test-utils';
import { makeStoreMapFromColumnOptions } from './explore-table-utils';
const SELECTED_ROW_INDICATOR_CLASS = 'shadow-[inset_0px_0px_0px_2px_var(--primary)]';
const SELECTED_ROW_INDICATOR_CLASS = 'shadow-[inset_0px_0px_0px_2px_var(--data-table-row-selected-outline)]';

const closeCallbackSpy = vi.fn();
const kebabCallbackSpy = vi.fn();
Expand Down
2 changes: 1 addition & 1 deletion packages/javascript/bh-shared-ui/src/components/FileUploadDialog/FileUploadDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ const FileUploadDialog: React.FC<{
)}
</DialogContent>
<DialogActions>
<Button variant='tertiary' onClick={onClose} data-testid='confirmation-dialog_button-no'>
<Button variant='secondary' onClick={onClose} data-testid='confirmation-dialog_button-no'>
{uploadDialogDisabled ? 'Uploading Files' : 'Close'}
</Button>
<Button
Expand Down
5 changes: 2 additions & 3 deletions packages/javascript/bh-shared-ui/src/components/Navigation/MainNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,12 +193,11 @@ const MainNav: FC<{ mainNavData: MainNavData }> = ({ mainNavData }) => {
className={cn(
'absolute top-14 w-6 h-6 border-none z-navToggle',
'transition-all duration-300 ease-in',
'text-[#121212] dark:text-white',
'text-main',
'bg-neutral-4 dark:bg-neutral-5',
'hover:bg-[#B2B8BE] dark:hover:bg-neutral-3',
'active:ring-0 active:bg-[#C0C6CB] dark:active:bg-neutral-2',
'focus:text-[#121212] dark:focus:text-white',
'focus:ring-2 focus:ring-offset-2 focus:ring-secondary dark:focus:ring-offset-[#1F1F1F]',
'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-focus focus-visible:ring-offset-focus-offset',
{
'rotate-180 left-[16.75rem]': isExpanded,
'left-[2.75rem]': !isExpanded,
Expand Down
9 changes: 7 additions & 2 deletions packages/javascript/bh-shared-ui/src/components/NodeIcon/NodeIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,16 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from 'doodle-ui';
import { useCustomNodeKinds } from '../../hooks/useCustomNodeKinds';
import { cn } from '../../utils';
import { EntityKinds, MetaDetailNodeKind, MetaNodeKind } from '../../utils/content';
import { GetIconInfo } from '../../utils/icons';

interface NodeIconProps {
nodeType?: EntityKinds | string;
className?: string;
}

function NodeIcon({ nodeType = '' }: NodeIconProps) {
function NodeIcon({ nodeType = '', className }: NodeIconProps) {
const customIcons = useCustomNodeKinds().data ?? {};
const iconInfo = GetIconInfo(nodeType, customIcons);

Expand All @@ -34,7 +36,10 @@ function NodeIcon({ nodeType = '' }: NodeIconProps) {
contentProps={{ className: 'bg-neutral-5 border-none text-contrast dark:text-contrast' }}>
<div className='inline-block relative mr-1'>
<div
className='flex items-center justify-center border border-neutral-dark-1 rounded-full p-1 size-[22px] text-neutral-dark-1 bg-neutral-light-1 pointer-events-none'
className={cn(
'flex items-center justify-center border border-common-dark rounded-full p-1 size-[22px] text-common-dark bg-common-white pointer-events-none',
className
)}
style={iconInfo ? { backgroundColor: iconInfo.color } : undefined}
title={nodeType}>
{nodeType === MetaNodeKind || nodeType === MetaDetailNodeKind ? (
Expand Down
2 changes: 1 addition & 1 deletion packages/javascript/bh-shared-ui/src/components/OneTimePasscodeForm/OneTimePasscodeForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const OneTimePasscodeForm: React.FC<OneTimePasscodeFormProps> = ({ onSubmit, onC
<Box mt={2}>
<Button
onClick={onCancel}
variant='tertiary'
variant='secondary'
size='large'
type='button'
style={{ width: '100%' }}
Expand Down
2 changes: 1 addition & 1 deletion packages/javascript/bh-shared-ui/src/components/PasswordDialog/PasswordDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ const PasswordDialog: React.FC<{
<DialogActions>
<Button
type='button'
variant='tertiary'
variant='secondary'
onClick={onClose}
data-testid='password-dialog_button-close'>
Cancel
Expand Down
2 changes: 1 addition & 1 deletion packages/javascript/bh-shared-ui/src/components/PasswordResetForm/PasswordResetForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ const PasswordResetForm: React.FC<PasswordResetFormProps> = ({ onSubmit, onCance
</Button>
<Box mt={2}>
<Button
variant='tertiary'
variant='secondary'
size='large'
type='button'
onClick={handleCancel}
Expand Down
Loading
Loading