diff --git a/packages/main/src/components/VariantManagement/VariantManagement.module.css b/packages/main/src/components/VariantManagement/VariantManagement.module.css index c82469a282c..bf84954c29c 100644 --- a/packages/main/src/components/VariantManagement/VariantManagement.module.css +++ b/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); diff --git a/packages/main/src/components/VariantManagement/index.tsx b/packages/main/src/components/VariantManagement/index.tsx index 35929c70e53..dce2579343b 100644 --- a/packages/main/src/components/VariantManagement/index.tsx +++ b/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 + * + * ``` + * */ const VariantManagement = forwardRef((props, ref) => { const i18nBundle = useI18nBundle('@ui5/webcomponents-react'); @@ -47,6 +82,7 @@ const VariantManagement = forwardRef style, placement = PopoverPlacement.Bottom, level = TitleLevel.H4, + size = TitleLevel.H4, onSelect, closeOnItemSelect, disabled, @@ -292,7 +328,7 @@ const VariantManagement = forwardRef }} > - + <Title level={level} size={size} className={classNames.title} data-component-name="VariantManagementTitle"> {selectedVariant?.children} {dirtyState &&
{dirtyStateText}
} diff --git a/packages/main/src/components/VariantManagement/types.ts b/packages/main/src/components/VariantManagement/types.ts index 560ed3b5323..7d11349b80b 100644 --- a/packages/main/src/components/VariantManagement/types.ts +++ b/packages/main/src/components/VariantManagement/types.ts @@ -26,6 +26,8 @@ export interface VariantManagementPropTypes extends Omit