fix(FilterBar): support new web-components controls, fix layout and labels (#661)

Author: Lukas742

packages/main/src/components/FilterBar/FilterBar.jss.ts

@@ -9,6 +9,9 @@ const styles = {
     background: ThemingParameters.sapObjectHeader_Background,
     boxShadow: ThemingParameters.sapContent_HeaderShadow
   },
+  filterItemExpand: {
+    '--_ui5_input_width': '100%'
+  },
   filterBarHeader: {
     alignItems: 'center',
     display: 'flex',

packages/main/src/components/FilterBar/FilterBarDialog.jss.ts

@@ -8,7 +8,8 @@ const styles = {
     flexDirection: 'column',
     maxWidth: '960px',
     width: '80vw',
-    maxHeight: '70vh'
+    maxHeight: '70vh',
+    '--_ui5_input_width': '100%'
   },
   header: {
     width: '100%',

packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap

@@ -136,7 +136,7 @@ exports[`FilterBar Render without crashing - default props 1`] = `
 
 exports[`FilterBar Render without crashing - w/ filter dialog 1`] = `
 <div
-  class="FilterBar-outerContainer-0"
+  class="FilterBar-outerContainer-0 FilterBar-filterItemExpand-0"
 >
   <div
     class="Toolbar-outerContainer-0 Toolbar-clear-0 FilterBar-filterBarHeader-0"

packages/main/src/components/FilterBar/demo.stories.tsx

@@ -24,7 +24,7 @@ export const renderDefaultStory = (props) => {
       filterBarExpanded={props.filterBarExpanded}
       loading={props.loading}
       considerGroupName={props.considerGroupName}
-      filterContainerWidth={props.auto}
+      filterContainerWidth={props.filterContainerWidth}
       activeFiltersCount={props.activeFiltersCount}
       showClearOnFB={props.showClearOnFB}
       showRestoreOnFB={props.showRestoreOnFB}
@@ -116,7 +116,7 @@ export default {
     useToolbar: true,
     filterBarExpanded: true,
     considerGroupName: false,
-    filterContainerWidth: '13rem',
+    filterContainerWidth: '13.125rem',
     activeFiltersCount: 0,
     showClearOnFB: false,
     showRestoreOnFB: false,

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

@@ -306,6 +306,9 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
   if (className) {
     cssClasses.put(className);
   }
+  if (filterContainerWidth) {
+    cssClasses.put(classes.filterItemExpand);
+  }
 
   useEffect(() => {
     prevSearchInputPropsValueRef.current = search?.props?.value;

packages/main/src/components/FilterBar/utils.tsx

@@ -5,8 +5,10 @@ export const filterValue = (ref, child) => {
   let filterItemProps = {};
   if (
     tagName === 'UI5-INPUT' ||
-    tagName === 'UI5-DATEPICKER' ||
+    tagName === 'UI5-DATE-PICKER' ||
     tagName === 'UI5-DATETIME-PICKER' ||
+    tagName === 'UI5-DATERANGE-PICKER' ||
+    tagName === 'UI5-TIME-PICKER' ||
     tagName === 'UI5-DURATION-PICKER'
   ) {
     filterItemProps = { value: ref.value };

packages/main/src/components/FilterGroupItem/FilterGroupItem.jss.ts

@@ -1,6 +1,6 @@
 const styles = {
   filterItem: {
-    width: '13rem',
+    width: 'var(--_ui5_input_width)',
     marginRight: '1rem',
     marginBottom: '1rem'
   },

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

@@ -87,5 +87,6 @@ FilterGroupItem.defaultProps = {
   groupName: 'default',
   visible: true,
   visibleInFilterBar: true,
-  required: false
+  required: false,
+  label: ''
 };