feat(VariantManagement): introduce size prop & improve docs (#6166)

Co-authored-by: Marcus Notheis <[email protected]>

Author: Lukas742

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

@@ -2,12 +2,13 @@
   display: flex;
   align-items: center;
   text-align: center;
+  flex-wrap: nowrap;
 }
 
 .title {
   cursor: pointer;
   color: var(--sapLinkColor);
-  text-shadow: none;
+  text-shadow: var(--sapContent_TextShadow);
 
   &:hover {
     color: var(--sapLink_Hover_Color);

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

@@ -37,7 +37,42 @@ import type { VariantItemPropTypes } from './VariantItem.js';
 import { classNames, styleData } from './VariantManagement.module.css.js';
 
 /**
- * The `VariantManagement` component can be used to manage variants, such as FilterBar variants or AnalyticalTable variants.
+ * The VariantManagement can be used to manage variants (views). You can use this component to create and maintain personalization changes.
+ *
+ * __Note:__ On the user interface, variants are generally referred to as "views".
+ *
+ * ### Matching header styles
+ *
+ * To ensure consistent header styles for different use-cases of the `VariantManagement`, we recommend setting the following styles to the `ui5-title` component:
+ *
+ * #### DynamicPage & ObjectPage
+ *
+ * - `font-family: var(--sapObjectHeader_Title_FontFamily);`
+ *
+ * __Header expanded__
+ *
+ * - `font-size: var(--sapObjectHeader_Title_FontSize);`
+ *
+ * __Header collapsed/snapped__
+ *
+ * - `font-size: var(--sapObjectHeader_Title_SnappedFontSize);`
+ *
+ * #### Tables
+ *
+ * - `font-size: var(--sapGroup_Title_FontSize);`
+ *
+ * #### Example
+ *
+ * ```css
+ * .variantManagement [data-component-name="VariantManagementTitle"] {
+ *     font-family: var(--sapObjectHeader_Title_FontFamily);
+ *     font-size: var(--sapObjectHeader_Title_FontSize);
+ * }
+ * ```
+ * ```jsx
+ *  <VariantManagement className="variantManagement">
+ * ```
+ *
  */
 const VariantManagement = forwardRef<HTMLDivElement, VariantManagementPropTypes>((props, ref) => {
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
@@ -47,6 +82,7 @@ const VariantManagement = forwardRef<HTMLDivElement, VariantManagementPropTypes>
     style,
     placement = PopoverPlacement.Bottom,
     level = TitleLevel.H4,
+    size = TitleLevel.H4,
     onSelect,
     closeOnItemSelect,
     disabled,
@@ -292,7 +328,7 @@ const VariantManagement = forwardRef<HTMLDivElement, VariantManagementPropTypes>
         }}
       >
         <FlexBox onClick={disabled ? undefined : handleOpenVariantManagement}>
-          <Title level={level} className={classNames.title}>
+          <Title level={level} size={size} className={classNames.title} data-component-name="VariantManagementTitle">
             {selectedVariant?.children}
           </Title>
           {dirtyState && <div className={dirtyStateClasses}>{dirtyStateText}</div>}

packages/main/src/components/VariantManagement/types.ts

@@ -26,6 +26,8 @@ export interface VariantManagementPropTypes extends Omit<CommonProps, 'onSelect'
   children?: ReactNode | ReactNode[];
   /**
    * Determines on which side the VariantManagement popover is placed at.
+   *
+   * @default Bottom
    */
   placement?: ResponsivePopoverPropTypes['placement'];
   /**
@@ -39,9 +41,17 @@ export interface VariantManagementPropTypes extends Omit<CommonProps, 'onSelect'
    */
   closeOnItemSelect?: boolean;
   /**
-   * Describes the `HTML Title` level of the variants.
+   * Describes the `Title` HTML level (H1 - H6) of the selected variant. This property doesn't influence the style of the component, you can use the `size` prop for this purpose.
+   *
+   * @default H4
    */
   level?: TitlePropTypes['level'];
+  /**
+   * Describes the `Title`'s `size` of the selected variant.
+   *
+   * @default H4
+   */
+  size?: TitlePropTypes['size'];
   /**
    * Defines whether the VariantManagement is disabled.
    */
@@ -54,6 +64,8 @@ export interface VariantManagementPropTypes extends Omit<CommonProps, 'onSelect'
   dirtyState?: boolean;
   /**
    * Text for the dirty state indicator.
+   *
+   * @default *
    */
   dirtyStateText?: string;
   /**