Merge branch 'main' into feat/sl-resize-cb

Author: Lukas742

.storybook/images/sb-pkg-filter.png

@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/addon-docs';
 import { Footer, TableOfContent } from '@sb/components';
 import { MessageStrip } from '@ui5/webcomponents-react';
+import SbTagFilter from '@sb/images/sb-pkg-filter.png';
 
 <Meta title="FAQ" />
 
@@ -86,9 +87,13 @@ Each component developed by the UI5 Web Components team ([`ui5-webcomponents`](h
 
 If a component does not have this note, it is a React-only component provided exclusively by `ui5-webcomponents-react`.
 
-## Scoping
+Additionally, Storybook supports filtering by tags, allowing you to filter by different `ui5-webcomponents` packages as well:
 
-Starting from UI5 Web Components (for React) 2.0.0, the order if imports with regards to scoping and components matters.
+<img src={SbTagFilter} alt="Storybook Tag Filter" height={320} />
+
+## Why isn't scoping working?
+
+Starting from UI5 Web Components (for React) 2.0.0, the order of imports with regard to scoping and components matters.
 Setting the scoping suffix must be done before importing any components, as they use the suffix at the top-level of the module - meaning when a component is imported, the suffix has to be known.
 For this to work, calling the method should be done in a separate module (e.g. scoping-config.js) and this module should be imported before any components are imported.
 You can find more information about this in the [UI5 Web Components documentation](https://sap.github.io/ui5-webcomponents/docs/advanced/scoping/).

docs/knowledge-base/FAQ.mdx

@@ -98,8 +98,8 @@
 }
 
 .contentContainer {
-  flex-basis: 100%;
-  flex-grow: 1;
+  flex: 1 1 0;
+  min-width: 0;
 }
 
 .content {

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

@@ -49,7 +49,8 @@ const SplitterElement = forwardRef<HTMLDivElement, SplitterElementPropTypes>((pr
   const [componentRef, splitterElementRef] = useSyncRef(ref);
   const { vertical, reset } = useContext(SplitterLayoutContext);
   const safariStyles = Device.isSafari() ? { width: 'min-content', flex: '1 1 auto' } : {};
-  const defaultFlexStyles = size !== 'auto' ? { flex: `0 1 ${size}` } : { flex: '1 0 min-content', ...safariStyles };
+  const _size = typeof size === 'number' ? `${size}px` : size;
+  const defaultFlexStyles = _size !== 'auto' ? { flex: `0 1 ${_size}` } : { flex: '1 0 min-content', ...safariStyles };
   const [flexStyles, setFlexStyles] = useState(defaultFlexStyles);
   const [flexBasisApplied, setFlexBasisApplied] = useState(false);
 
@@ -67,23 +68,23 @@ const SplitterElement = forwardRef<HTMLDivElement, SplitterElementPropTypes>((pr
       }
     });
 
-    if (size === 'auto' && splitterElementRef.current) {
+    if (_size === 'auto' && splitterElementRef.current) {
       elementObserver.observe(splitterElementRef.current);
     } else {
-      setFlexStyles({ flex: `0 1 ${size}` });
+      setFlexStyles({ flex: `0 1 ${_size}` });
     }
 
     return () => {
       elementObserver.disconnect();
     };
-  }, [size, flexBasisApplied, vertical]);
+  }, [_size, flexBasisApplied, vertical]);
 
   useIsomorphicLayoutEffect(() => {
     if (reset) {
       setFlexStyles(undefined);
       setFlexBasisApplied(false);
     }
-  }, [reset, size]);
+  }, [reset, _size]);
 
   useIsomorphicLayoutEffect(() => {
     if (flexStyles === undefined) {

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

@@ -97,7 +97,7 @@ describe('SplitterLayout', () => {
               Button 1
             </Button>
           </SplitterElement>
-          <SplitterElement minSize={300} size={'400px'} data-testid={'se2'}>
+          <SplitterElement minSize={300} size={400} data-testid={'se2'}>
             <Button>Button 2</Button>
           </SplitterElement>
           <SplitterElement resizable={false} data-testid={'se3'}>

packages/main/src/components/SplitterLayout/SplitterLayout.cy.tsx

@@ -61,9 +61,10 @@ export const useConcatSplitterElements = (concatSplitterElements: ConcatSplitter
 
     indicesWithSplitter.forEach((index) => {
       const size = childrenArray[index]?.props?.size;
+      const _size = typeof size === 'number' ? `${size}px` : size;
       if (size && size !== 'auto') {
         childrenArray[index] = cloneElement(childrenArray[index], {
-          size: `calc(${size} - var(--_ui5wcr-SplitterSize))`,
+          size: `calc(${_size} - var(--_ui5wcr-SplitterSize))`,
         });
       }
     });

packages/main/src/components/SplitterLayout/useConcatSplitterElements.tsx

@@ -15,8 +15,6 @@ export function MobileItem() {
 
   const handleSelectionChange: UserSettingsItemPropTypes['onSelectionChange'] = () => {
     setSelectedView('primary');
-    // doesn't work - issue created
-    // setSelectedView(e.detail.view.dataset.view!);
   };
 
   return (