diff --git a/cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsx b/cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsx index 9d836097910d..6d4c40143d8e 100644 --- a/cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsx +++ b/cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsx @@ -97,7 +97,7 @@ export const EarlyAccessFeaturesWarningDialog: React.FC<{ diff --git a/packages/javascript/bh-shared-ui/src/components/CollectorCard/CollectorCard.tsx b/packages/javascript/bh-shared-ui/src/components/CollectorCard/CollectorCard.tsx index 3ffd45b44a3f..fad28796e651 100644 --- a/packages/javascript/bh-shared-ui/src/components/CollectorCard/CollectorCard.tsx +++ b/packages/javascript/bh-shared-ui/src/components/CollectorCard/CollectorCard.tsx @@ -74,7 +74,7 @@ const CollectorCard: React.FC = ({ @@ -524,7 +524,7 @@ const CreateUserFormInner: React.FC<{ diff --git a/packages/javascript/bh-shared-ui/src/components/Disable2FADialog/Disable2FADialog.tsx b/packages/javascript/bh-shared-ui/src/components/Disable2FADialog/Disable2FADialog.tsx index 849e4a13ae75..b552f53e41e0 100644 --- a/packages/javascript/bh-shared-ui/src/components/Disable2FADialog/Disable2FADialog.tsx +++ b/packages/javascript/bh-shared-ui/src/components/Disable2FADialog/Disable2FADialog.tsx @@ -73,7 +73,7 @@ const Disable2FADialog: React.FC<{ )} - diff --git a/packages/javascript/bh-shared-ui/src/components/DropdownSelector/DropdownSelector.tsx b/packages/javascript/bh-shared-ui/src/components/DropdownSelector/DropdownSelector.tsx index 635d7df73f11..e47700fdc7fa 100644 --- a/packages/javascript/bh-shared-ui/src/components/DropdownSelector/DropdownSelector.tsx +++ b/packages/javascript/bh-shared-ui/src/components/DropdownSelector/DropdownSelector.tsx @@ -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<{ @@ -75,6 +75,7 @@ const DropdownSelector: FC<{ {option.icon && ( = (props) => { +const DropdownTrigger = (props: DropdownTriggerContentsProps) => { return ( -
- -
+ ); }; diff --git a/packages/javascript/bh-shared-ui/src/components/DropdownSelector/DropdownTriggerContents.tsx b/packages/javascript/bh-shared-ui/src/components/DropdownSelector/DropdownTriggerContents.tsx index 5360eadf1af2..6d63294cfc58 100644 --- a/packages/javascript/bh-shared-ui/src/components/DropdownSelector/DropdownTriggerContents.tsx +++ b/packages/javascript/bh-shared-ui/src/components/DropdownSelector/DropdownTriggerContents.tsx @@ -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( + ( + { + open, + selectedText, + buttonProps, + StartAdornment, + EndAdornment, + testId, + variant, + readOnly, + className, + ...props + }, + ref + ) => { + const buttonPrimary = variant === 'primary'; - return ( - - ); -}; + size='small' + data-testid={testId ? testId : 'dropdown_context-selector'}> + +
+ {StartAdornment && } +

{selectedText}

+
+ {EndAdornment ? ( + + ) : ( + + + + )} + + + ); + } +); +DropdownTriggerContents.displayName = 'DropdownTriggerContents'; export default DropdownTriggerContents; diff --git a/packages/javascript/bh-shared-ui/src/components/DropdownSelector/constants.ts b/packages/javascript/bh-shared-ui/src/components/DropdownSelector/constants.ts index 139bf0e078ed..a149175a0d2b 100644 --- a/packages/javascript/bh-shared-ui/src/components/DropdownSelector/constants.ts +++ b/packages/javascript/bh-shared-ui/src/components/DropdownSelector/constants.ts @@ -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'; diff --git a/packages/javascript/bh-shared-ui/src/components/Enable2FADialog/Enable2FADialog.tsx b/packages/javascript/bh-shared-ui/src/components/Enable2FADialog/Enable2FADialog.tsx index 6b2b587e255f..8fd6699f776f 100644 --- a/packages/javascript/bh-shared-ui/src/components/Enable2FADialog/Enable2FADialog.tsx +++ b/packages/javascript/bh-shared-ui/src/components/Enable2FADialog/Enable2FADialog.tsx @@ -213,7 +213,7 @@ const Enable2FADialog: React.FC<{ <> + @@ -109,7 +109,7 @@ export const SchemaUploadDialog = () => { ) : ( <> - + ))} @@ -180,7 +184,7 @@ const SimpleEnvironmentSelector: React.FC<{ return (
    • ); diff --git a/packages/javascript/bh-shared-ui/src/components/UpdateUserForm/UpdateUserForm.tsx b/packages/javascript/bh-shared-ui/src/components/UpdateUserForm/UpdateUserForm.tsx index 40fc2d92bc6c..2f149b8a69c5 100644 --- a/packages/javascript/bh-shared-ui/src/components/UpdateUserForm/UpdateUserForm.tsx +++ b/packages/javascript/bh-shared-ui/src/components/UpdateUserForm/UpdateUserForm.tsx @@ -91,7 +91,7 @@ const UpdateUserForm: React.FC<{ disabled={isLoading} role='button' type='button' - variant='tertiary'> + variant='secondary'> Close     @@ -500,7 +500,7 @@ const UpdateUserFormInner: React.FC<{ disabled={isLoading} role='button' type='button' - variant='tertiary'> + variant='secondary'> Cancel diff --git a/packages/javascript/bh-shared-ui/src/components/UpsertSSOProviders/UpsertOIDCProviderForm.tsx b/packages/javascript/bh-shared-ui/src/components/UpsertSSOProviders/UpsertOIDCProviderForm.tsx index 2ec1ac554607..b9520037ce44 100644 --- a/packages/javascript/bh-shared-ui/src/components/UpsertSSOProviders/UpsertOIDCProviderForm.tsx +++ b/packages/javascript/bh-shared-ui/src/components/UpsertSSOProviders/UpsertOIDCProviderForm.tsx @@ -160,7 +160,7 @@ const UpsertOIDCProviderForm: FC<{ diff --git a/packages/javascript/bh-shared-ui/src/components/UserTokenManagementDialog/UserTokenManagementDialog.tsx b/packages/javascript/bh-shared-ui/src/components/UserTokenManagementDialog/UserTokenManagementDialog.tsx index 6abba3bf4279..a2b07ce0f01b 100644 --- a/packages/javascript/bh-shared-ui/src/components/UserTokenManagementDialog/UserTokenManagementDialog.tsx +++ b/packages/javascript/bh-shared-ui/src/components/UserTokenManagementDialog/UserTokenManagementDialog.tsx @@ -201,7 +201,7 @@ const UserTokenManagementDialog: React.FC<{
    = (props) => { <> -
    - )} diff --git a/packages/javascript/doodle-ui/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/javascript/doodle-ui/src/components/Breadcrumbs/Breadcrumbs.tsx index c34d738d761d..c52f754c6f5a 100644 --- a/packages/javascript/doodle-ui/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/javascript/doodle-ui/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -56,7 +56,16 @@ const BreadcrumbLink = React.forwardRef< >(({ asChild, className, ...props }, ref) => { const Comp = asChild ? Slot : 'a'; - return ; + return ( + + ); }); BreadcrumbLink.displayName = 'BreadcrumbLink'; diff --git a/packages/javascript/doodle-ui/src/components/Button/Button.tsx b/packages/javascript/doodle-ui/src/components/Button/Button.tsx index 91d0c8fcd120..b46283d22db7 100644 --- a/packages/javascript/doodle-ui/src/components/Button/Button.tsx +++ b/packages/javascript/doodle-ui/src/components/Button/Button.tsx @@ -19,21 +19,23 @@ import * as React from 'react'; import { cn } from '../utils'; export const ButtonVariants = cva( - 'inline-flex items-center justify-center whitespace-nowrap h-10 px-6 py-2 rounded-3xl text-sm ring-offset-background transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:no-underline', + 'inline-flex items-center justify-center whitespace-nowrap h-10 px-6 py-2 rounded-3xl text-sm transition-colors hover:underline focus:outline-none focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50 active:no-underline', { variants: { variant: { - primary: 'bg-primary text-white shadow-outer-1 hover:bg-secondary', - secondary: 'bg-neutral-light-4 text-neutral-dark-1 shadow-outer-1 hover:bg-secondary hover:text-white', + primary: + 'bg-primary text-common-white dark:text-common-dark shadow-outer-1 hover:bg-secondary focus-visible:bg-secondary', + secondary: + 'bg-secondary-btn-fill text-common-dark shadow-outer-1 dark:text-common-white hover:bg-secondary hover:text-common-white dark:hover:text-common-dark active:bg-secondary-btn-active-fill active:text-common-dark dark:active:text-common-white focus-visible:bg-secondary focus-visible:text-common-white dark:focus-visible:text-common-dark disabled:bg-btn-disabled-fill disabled:text-text-disabled disabled:shadow-none disabled:!opacity-100', tertiary: - 'bg-transparent border-2 border-neutral-light-5 shadow-outer-1 hover:bg-tertiary dark:hover:text-neutral-dark-1 hover:border-tertiary', + 'bg-transparent border-2 border-tertiary-btn-border shadow-outer-1 hover:bg-tertiary-main dark:hover:text-main hover:border-tertiary focus-visible:bg-tertiary-main dark:focus-visible:text-common-dark dark:focus-visible:bg-secondary focus-visible:border-tertiary', transparent: - 'bg-transparent border border-neutral-5 dark:text-white hover:bg-primary hover:text-white hover:border-primary hover:no-underline', - text: 'text-neutral-dark-5 dark:text-neutral-light-5', - icon: 'rounded-full text-neutral-dark-1 bg-neutral-light-5 p-0 size-10 shadow-outer-1 hover:border-2 hover:border-secondary active:border-none', + 'bg-transparent border border-transparent-btn-border text-main hover:bg-primary hover:text-common-white dark:hover:text-common-dark hover:border-primary hover:no-underline focus-visible:bg-primary focus-visible:text-common-white dark:focus-visible:text-common-dark focus-visible:border-primary', + text: 'text-primary hover:text-secondary active:text-primary-variant focus-visible:text-secondary disabled:text-text-disabled disabled:!opacity-100', + icon: 'rounded-full text-common-dark bg-icon-btn-fill p-0 size-10 shadow-outer-1 hover:border-2 hover:border-secondary focus-visible:border-2 focus-visible:border-secondary active:border-none', }, fontColor: { - primary: 'text-primary dark:text-secondary-variant-2', + primary: 'text-primary', }, size: { small: 'h-9 px-4 py-1 text-xs', diff --git a/packages/javascript/doodle-ui/src/components/Carousel/Carousel.tsx b/packages/javascript/doodle-ui/src/components/Carousel/Carousel.tsx index 4ffddcbcc7ea..9eee8bc76b7c 100644 --- a/packages/javascript/doodle-ui/src/components/Carousel/Carousel.tsx +++ b/packages/javascript/doodle-ui/src/components/Carousel/Carousel.tsx @@ -240,7 +240,7 @@ const CarouselDots = React.forwardRef onDotButtonClick(index)}> diff --git a/packages/javascript/doodle-ui/src/components/Checkbox/Checkbox.tsx b/packages/javascript/doodle-ui/src/components/Checkbox/Checkbox.tsx index 43e04e34c0dc..43b6ac1461fb 100644 --- a/packages/javascript/doodle-ui/src/components/Checkbox/Checkbox.tsx +++ b/packages/javascript/doodle-ui/src/components/Checkbox/Checkbox.tsx @@ -41,8 +41,8 @@ interface CheckboxProps const Checkbox = React.forwardRef, CheckboxProps>( ({ size = 'md', icon, className, ...props }, ref) => ( - - {icon ? icon : } + + {icon ? icon : } ) diff --git a/packages/javascript/doodle-ui/src/components/DataTable/DataTable.tsx b/packages/javascript/doodle-ui/src/components/DataTable/DataTable.tsx index bf946a7da303..51420bbdce80 100644 --- a/packages/javascript/doodle-ui/src/components/DataTable/DataTable.tsx +++ b/packages/javascript/doodle-ui/src/components/DataTable/DataTable.tsx @@ -442,10 +442,7 @@ const DataTable = (props: DataTableProps) => { sensors={sensors} disabled={!enableDragAndDrop} accessibility={{ announcements, screenReaderInstructions: { draggable: 'draggable column header' } }}> -
    +
    (props: DataTableProps) => { scope='col' enableDragging={enableDragAndDrop && isColDraggingEnabled} className={cn( - 'bg-neutral-light-2 dark:bg-neutral-dark-2 text-nowrap group relative z-10 overflow-x-clip', + 'bg-data-table-header-fill text-nowrap group relative z-10 overflow-x-clip', `${header.column.getIsResizing() ? 'isResizing' : ''}`, propsClassName )} @@ -576,6 +573,13 @@ const DataTable = (props: DataTableProps) => { tableBodyRowRest = rest; } + const { + onKeyDown: onTableBodyRowKeyDown, + role: tableBodyRowRole, + tabIndex: tableBodyRowTabIndex, + ...restTableBodyRowAttributes + } = tableBodyRowRest as React.HTMLAttributes; + return ( (props: DataTableProps) => { e.stopPropagation(); handleRowClick(row); }} + onKeyDown={(event) => { + onTableBodyRowKeyDown?.(event); + + if ( + event.defaultPrevented || + event.currentTarget !== event.target || + !onRowClick || + (event.key !== 'Enter' && event.key !== ' ') + ) { + return; + } + + event.preventDefault(); + event.stopPropagation(); + handleRowClick(row); + }} + role={tableBodyRowRole} + tabIndex={tableBodyRowTabIndex ?? (onRowClick ? 0 : undefined)} data-state={row.getIsSelected() && 'selected'} className={cn( - 'hover:bg-neutral-light-4 dark:hover:bg-neutral-dark-4', + 'hover:bg-data-table-row-hover-fill', { // Border is tricky on https://github.com/TanStack/virtual/issues/620 - 'shadow-[inset_0px_0px_0px_2px_var(--primary)] dark:shadow-[inset_0px_0px_0px_2px_#4A42B5]': + 'shadow-[inset_0px_0px_0px_2px_var(--data-table-row-selected-outline)]': row.getIsSelected(), // Not using CSS odd:even since those values are not tied to data in a virtualized table - 'bg-neutral-light-3 dark:bg-neutral-dark-3': row.index % 2 === 0, - 'bg-neutral-light-2 dark:bg-neutral-dark-2': row.index % 2 !== 0, + 'bg-data-table-row-even-fill': row.index % 2 === 0, + 'bg-data-table-row-odd-fill': row.index % 2 !== 0, 'cursor-pointer': onRowClick, 'cursor-default': !onRowClick, + 'focus:outline-none focus-visible:focus-ring focus-visible:bg-data-table-row-hover-fill': + onRowClick, }, propsClassName )} - {...tableBodyRowRest} + {...restTableBodyRowAttributes} style={{ height: `${virtualRow.size}px`, transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`, diff --git a/packages/javascript/doodle-ui/src/components/DataTable/StorybookExample/utils.tsx b/packages/javascript/doodle-ui/src/components/DataTable/StorybookExample/utils.tsx index ad02747bf531..1d6cda2f16a5 100644 --- a/packages/javascript/doodle-ui/src/components/DataTable/StorybookExample/utils.tsx +++ b/packages/javascript/doodle-ui/src/components/DataTable/StorybookExample/utils.tsx @@ -52,7 +52,10 @@ export const getColumns = (sortOrder?: string | null, handleSort?: (sortBy: stri return Action Menu; }, cell: () => ( - ), @@ -93,7 +96,10 @@ export const getColumns = (sortOrder?: string | null, handleSort?: (sortBy: stri Tier Zero Principal {sortOrder !== undefined ? ( -