diff --git a/src/molecules/Select/GroupedSelectPersistent.tsx b/src/molecules/Select/GroupedSelectPersistent.tsx index e108f5621..50838eab4 100644 --- a/src/molecules/Select/GroupedSelectPersistent.tsx +++ b/src/molecules/Select/GroupedSelectPersistent.tsx @@ -4,8 +4,8 @@ import { SelectOptionRequired } from 'src/molecules'; import { useGroupedSelectItems } from 'src/molecules/Select/Select.hooks'; import { GroupTitle, - NoItemsFoundText, PersistentGroupsWrapper, + PersistentNoItemsFoundText, } from 'src/molecules/Select/Select.styles'; import { CustomMenuItemComponentProps, @@ -38,7 +38,7 @@ export const GroupedSelectPersistent = ( const { filteredGroups, filteredGroupSum } = useGroupedSelectItems(props); if (filteredGroups.length === 0) { - return No items found; + return No items found; } // This case never happens, since there is a check in select.tsx. This check gives the correct typescript inference. diff --git a/src/molecules/Select/ListSelectPersistent.tsx b/src/molecules/Select/ListSelectPersistent.tsx index d6ce80e68..b827e9a6d 100644 --- a/src/molecules/Select/ListSelectPersistent.tsx +++ b/src/molecules/Select/ListSelectPersistent.tsx @@ -3,8 +3,8 @@ import { capitalize } from 'src/atoms'; import { useListSelectItems } from 'src/molecules/Select/Select.hooks'; import { GroupTitle, - NoItemsFoundText, NoTagFoundText, + PersistentNoItemsFoundText, } from 'src/molecules/Select/Select.styles'; import { CustomMenuItemComponentProps, @@ -40,7 +40,9 @@ export const ListSelectPersistent = ( const { filteredItems } = useListSelectItems(props); if (filteredItems.length === 0 && (!props.onAddItem || search === '')) { - return No items found; + return ( + No items found + ); } const hasNestedItems = filteredItems.some( diff --git a/src/molecules/Select/Select.styles.ts b/src/molecules/Select/Select.styles.ts index 40a91f35c..57352c119 100644 --- a/src/molecules/Select/Select.styles.ts +++ b/src/molecules/Select/Select.styles.ts @@ -10,6 +10,9 @@ import { Chip } from 'src/molecules/Chip/Chip'; import styled, { css } from 'styled-components'; +// Persistent mode keeps an explicit item height so the empty state matches without layout shift +const PERSISTENT_ITEM_HEIGHT = `calc(${spacings.medium} * 2 + 24px)`; // 2×spacings.medium padding + 24px line-height + interface WrapperProps { $showBackgroundColor: boolean; } @@ -336,6 +339,7 @@ const PersistentListItem = styled.button` padding: ${spacings.medium} ${spacings.medium}; justify-content: flex-start; gap: ${spacings.small}; + min-height: ${PERSISTENT_ITEM_HEIGHT}; box-sizing: border-box; svg { flex-shrink: 0; @@ -382,8 +386,19 @@ const NoTagFoundText = styled(Typography)` margin: ${spacings.medium}; `; -const NoItemsFoundText = styled(Typography)` - margin-left: ${spacings.medium}; +const NoItemsFoundText = styled(Typography).attrs({ + group: 'navigation', + variant: 'menu_title', +})` + display: flex; + align-items: center; + margin: 0; + padding: ${spacings.medium}; + box-sizing: border-box; +`; + +const PersistentNoItemsFoundText = styled(NoItemsFoundText)` + min-height: ${PERSISTENT_ITEM_HEIGHT}; `; const StyledMenu = styled(EDSMenu)` @@ -428,6 +443,7 @@ export { StyledMenu, NoTagFoundText, NoItemsFoundText, + PersistentNoItemsFoundText, PlaceholderText, PersistentListItem, PersistentComboBoxWrapper,