refactor(SelectDialog): replace ui5wcr Toolbar (#6235)

Author: Lukas742

packages/base/src/styling/CssSizeVariables.ts

@@ -12,6 +12,7 @@ export enum CssSizeVariablesNames {
   ui5WcrAnalyticalTableTreePaddingLevel2 = '--_ui5wcr-AnalyticalTableTreePaddingLevel2',
   ui5WcrAnalyticalTableTreePaddingLevel3 = '--_ui5wcr-AnalyticalTableTreePaddingLevel3',
   ui5WcrCheckBoxWidthHeight = '--_ui5wcr-CheckBoxWidthHeight',
+  ui5WcrCheckBoxPaddingInline = '--_ui5wcr-CheckBoxPaddingInline',
   ui5WcrAnalyticalTableSelectionColumnWidth = '--_ui5wcr-AnalyticalTableSelectionColumnWidth',
   ui5WcrToolbarHeight = '--_ui5wcr-ToolbarHeight',
   ui5WcrToolbarPopoverContentPadding = '--_ui5wcr-ToolbarPopoverContentPadding',
@@ -46,6 +47,7 @@ export const CozySizes = {
   [CssSizeVariablesNames.ui5WcrAnalyticalTableTreePaddingLevel2]: `1.5rem`,
   [CssSizeVariablesNames.ui5WcrAnalyticalTableTreePaddingLevel3]: `2rem`,
   [CssSizeVariablesNames.ui5WcrCheckBoxWidthHeight]: `2.75rem`,
+  [CssSizeVariablesNames.ui5WcrCheckBoxPaddingInline]: `0.6875rem`,
   [CssSizeVariablesNames.ui5WcrAnalyticalTableSelectionColumnWidth]: `44px`,
   [CssSizeVariablesNames.ui5WcrToolbarHeight]: `2.75rem`,
   [CssSizeVariablesNames.ui5WcrToolbarPopoverContentPadding]: `0.25rem 0.5rem`,
@@ -71,6 +73,7 @@ export const CompactSizes = {
   [CssSizeVariablesNames.ui5WcrAnalyticalTableTreePaddingLevel2]: `2.25rem`,
   [CssSizeVariablesNames.ui5WcrAnalyticalTableTreePaddingLevel3]: `2.75rem`,
   [CssSizeVariablesNames.ui5WcrCheckBoxWidthHeight]: `2rem`,
+  [CssSizeVariablesNames.ui5WcrCheckBoxPaddingInline]: '0.5rem',
   [CssSizeVariablesNames.ui5WcrAnalyticalTableSelectionColumnWidth]: `32px`,
   [CssSizeVariablesNames.ui5WcrToolbarHeight]: `2rem`,
   [CssSizeVariablesNames.ui5WcrToolbarPopoverContentPadding]: `0.1875rem 0.375rem`,

packages/main/src/components/SelectDialog/SelectDialog.module.css

@@ -69,7 +69,12 @@
 }
 
 .infoBar {
-  padding: 0 0.5rem;
+  height: 2rem;
+  background-color: var(--sapInfobar_NonInteractive_Background);
+  color: var(--sapList_TextColor);
+  padding-inline-start: var(--_ui5wcr-CheckBoxPaddingInline);
+  border-block-end: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+  overflow: hidden;
   position: sticky;
   top: 0;
   z-index: 1;

packages/main/src/components/SelectDialog/index.tsx

@@ -10,6 +10,7 @@ import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import { forwardRef, useEffect, useState } from 'react';
 import { CANCEL, CLEAR, RESET, SEARCH, SELECT, SELECTED } from '../../i18n/i18n-defaults.js';
+import { Button, Dialog, FlexBox, FlexBoxAlignItems, Icon, Input, List, Text, Title } from '../../index.js';
 import type { Ui5CustomEvent } from '../../types/index.js';
 import type {
   ButtonDomRef,
@@ -19,12 +20,9 @@ import type {
   IconDomRef,
   InputDomRef,
   ListDomRef,
-  ListPropTypes,
-  ListItemStandardDomRef
+  ListItemStandardDomRef,
+  ListPropTypes
 } from '../../webComponents/index.js';
-import { Button, Dialog, Icon, Input, List, Title } from '../../webComponents/index.js';
-import { Text } from '../../webComponents/Text/index.js';
-import { Toolbar } from '../Toolbar/index.js';
 import { classNames, styleData } from './SelectDialog.module.css.js';
 
 interface ListDomRefWithPrivateAPIs extends ListDomRef {
@@ -334,9 +332,9 @@ const SelectDialog = forwardRef<DialogDomRef, SelectDialogPropTypes>((props, ref
       </div>
 
       {selectionMode === ListSelectionMode.Multiple && (!!selectedItems.length || numberOfSelectedItems > 0) && (
-        <Toolbar design="Info" className={classNames.infoBar}>
+        <FlexBox alignItems={FlexBoxAlignItems.Center} className={classNames.infoBar}>
           <Text>{`${i18nBundle.getText(SELECTED)}: ${numberOfSelectedItems ?? selectedItems.length}`}</Text>
-        </Toolbar>
+        </FlexBox>
       )}
       <List
         {...listProps}

packages/main/src/components/ThemeProvider/Sizes.css

@@ -10,6 +10,7 @@
   --_ui5wcr-AnalyticalTableTreePaddingLevel3: 2rem;
   --_ui5wcr-BarHeight: 2.75rem;
   --_ui5wcr-ButtonTopBottomPadding: 0.25rem 0;
+  --_ui5wcr-CheckBoxPaddingInline: 0.6875rem;
   --_ui5wcr-CheckBoxWidthHeight: 2.75rem;
   --_ui5wcr-DialogHeaderHeight: 2.75rem;
   --_ui5wcr-DialogSubHeaderHeight: 3rem;
@@ -38,6 +39,7 @@
   --_ui5wcr-AnalyticalTableTreePaddingLevel3: 2.75rem;
   --_ui5wcr-BarHeight: 2.5rem;
   --_ui5wcr-ButtonTopBottomPadding: 0.1875rem 0;
+  --_ui5wcr-CheckBoxPaddingInline: 0.5rem;
   --_ui5wcr-CheckBoxWidthHeight: 2rem;
   --_ui5wcr-DialogHeaderHeight: 2.5rem;
   --_ui5wcr-DialogSubHeaderHeight: 2.25rem;