@redocly/theme 0.67.0-next.4 → 0.67.0-next.5

package/src/components/CatalogClassic/CatalogClassicActions.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 import type { ResolvedFilter } from '@redocly/theme/core/types';
 
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { FilterIcon } from '@redocly/theme/icons/FilterIcon/FilterIcon';
@@ -42,7 +42,9 @@ export function CatalogClassicActions(props: CatalogClassicActionsProps): JSX.El
         iconPosition="left"
         onClick={() => {
           onOpenFilter();
-          telemetry.sendCatalogActionsButtonClickedMessage();
+          telemetry.sendCatalogActionsClickedMessage([
+            getBaseDataAttributes('catalogActions', 'button'),
+          ]);
         }}
         data-translation-key="catalog.filters.title"
       >

package/src/components/CatalogClassic/CatalogClassicCard.tsx

@@ -4,7 +4,12 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 import type { CatalogItem } from '@redocly/theme/core/types';
 
-import { slug, capitalize, getScorecardColorVariable } from '@redocly/theme/core/utils';
+import {
+  slug,
+  capitalize,
+  getScorecardColorVariable,
+  getBaseDataAttributes,
+} from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
@@ -38,7 +43,9 @@ export function CatalogClassicCard({ item }: CatalogClassicCardProps): JSX.Eleme
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
       <StyledCard
         data-component-name="CatalogClassic/CatalogClassicCard"
-        onClick={() => telemetry.sendCatalogItemClickedMessage()}
+        onClick={() =>
+          telemetry.sendCatalogItemClickedMessage([getBaseDataAttributes('catalogItem', 'card')])
+        }
       >
         <CardContent>
           <CardTitleWrapper>

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -7,6 +7,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { getScorecardColorVariable } from '@redocly/theme/core/utils';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { Link } from '@redocly/theme/components/Link/Link';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type CatalogClassicInfoBlockProps = {
   metadata?: {
@@ -53,7 +54,7 @@ function ScorecardBadge(props: {
     <Link to={slug}>
       <Tag
         onClick={() =>
-          telemetry.sendScorecardLinkClickedMessage([{ object: 'link', action: 'click' }])
+          telemetry.sendScorecardLinkClickedMessage([getBaseDataAttributes('scorecardLink', 'tag')])
         }
         withStatusDot
         statusDotColor={`var(${colorVariable})`}

package/src/components/Feedback/ReportDialog.tsx

@@ -8,6 +8,7 @@ import type { SubmitFeedbackParams } from '@redocly/theme/core/types';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
 import { Portal } from '@redocly/theme/components/Portal/Portal';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type ReportDialogProps = {
   location: string;
@@ -47,7 +48,9 @@ export function ReportDialog({
               path: pathname,
               lang,
             });
-            telemetry.sendCodeSnippetReportedMessage();
+            telemetry.sendCodeSnippetReportedMessage([
+              getBaseDataAttributes('codeSnippet', 'markdocTag'),
+            ]);
             onSubmit();
           }}
           isDialog={true}

package/src/components/Filter/FilterCheckboxes.tsx

@@ -11,7 +11,7 @@ import { FilterOptionLabel } from '@redocly/theme/components/Filter/FilterOption
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CheckboxIcon } from '@redocly/theme/icons/CheckboxIcon/CheckboxIcon';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
-import { changeTextCasing } from '@redocly/theme/core/utils';
+import { changeTextCasing, getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export function FilterCheckboxes({
   filter,
@@ -36,7 +36,9 @@ export function FilterCheckboxes({
               role="link"
               onClick={() => {
                 filter.toggleOption(value);
-                telemetry.sendFilterCheckboxToggledMessage([{ object: 'checkbox', id }]);
+                telemetry.sendFilterCheckboxToggledMessage([
+                  getBaseDataAttributes('filterId', 'checkbox'),
+                ]);
               }}
             >
               <CheckboxIcon

package/src/components/Footer/FooterItem.tsx

@@ -7,7 +7,7 @@ import type { ResolvedNavItem } from '@redocly/config';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 
 export type FooterItemProps = {
@@ -44,7 +44,9 @@ export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX
           external={item.external}
           target={item.target}
           data-testid={item.label}
-          onClick={() => telemetry.sendFooterItemClickedMessage()}
+          onClick={() =>
+            telemetry.sendFooterItemClickedMessage([getBaseDataAttributes('footerItem', 'footer')])
+          }
           data-translation-key={item.labelTranslationKey}
         >
           {hasIcon ? (

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, generateBeforeAfterContext } from '@redocly/theme/core/utils';
 import { useLanguagePicker, useThemeHooks } from '@redocly/theme/core/hooks';
 import { GlobalOutlinedIcon } from '@redocly/theme/icons/GlobalOutlinedIcon/GlobalOutlinedIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
@@ -41,7 +41,14 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
     languageInsensitive: true,
     onAction: () => {
       props.onChangeLanguage(locale.code);
-      telemetry.sendLanguagePickerLocaleChangedMessage([{ object: 'locale', locale: locale.code }]);
+      telemetry.sendLanguagePickerChangedMessage([
+        ...generateBeforeAfterContext<'sendLanguagePickerChangedMessage'>(
+          'languagePicker',
+          'dropdown',
+          { locale: currentLocale.code },
+          { locale: locale.code },
+        ),
+      ]);
     },
     active: locale.code === currentLocale.code,
     suffix: locale.code === currentLocale.code && <CheckmarkIcon />,

package/src/components/Logo/Logo.tsx

@@ -7,6 +7,7 @@ import type { LogoConfig } from '@redocly/theme/core/types';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Image } from '@redocly/theme/components/Image/Image';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type LogoProps = {
   config: LogoConfig;
@@ -27,7 +28,12 @@ export function Logo({ config, className, ...otherProps }: LogoProps): JSX.Eleme
   return (
     <LogoWrapper data-component-name="Logo/Logo" className={className} {...otherProps}>
       {config.link ? (
-        <Link to={config.link} onClick={() => telemetry.sendLogoClickedMessage()}>
+        <Link
+          to={config.link}
+          onClick={() =>
+            telemetry.sendLogoClickedMessage([getBaseDataAttributes('logo', 'navbar')])
+          }
+        >
           {image}
         </Link>
       ) : (

package/src/components/Menu/MenuContainer.tsx

@@ -67,6 +67,7 @@ const MenuContainerComponent = styled.div.attrs<{
   animation-timing-function: ease;
   position: relative;
   overflow-y: auto;
+  scrollbar-gutter: stable;
   flex-grow: ${({ $growContent }) => ($growContent ? 1 : 0)};
   padding-top: var(--menu-container-padding-top);
   display: ${({ $hidden }) => ($hidden ? 'none' : 'block')};

package/src/components/Menu/MenuItem.tsx

@@ -11,7 +11,11 @@ import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDow
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
 import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
 import { MenuItemType } from '@redocly/theme/core/constants';
-import { getMenuItemType, getOperationColor } from '@redocly/theme/core/utils';
+import {
+  getBaseDataAttributes,
+  getMenuItemType,
+  getOperationColor,
+} from '@redocly/theme/core/utils';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 import { Tag, ContentWrapper } from '@redocly/theme/components/Tag/Tag';
@@ -39,7 +43,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   const handleOnClick = () => {
     telemetry.sendSidebarItemClickedMessage([
       {
-        object: 'sidebar_item',
+        ...getBaseDataAttributes('sidebarItem', 'sidebar'),
         label: item.label,
         type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
       },
@@ -107,7 +111,13 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
                 {name}
               </SidebarTag>
             ))}
-          <span>{translate(item.labelTranslationKey, item.label)}</span>
+          <MenuItemLabelText
+            $active={item.active}
+            $isSeparator={isSeparator}
+            data-text={translate(item.labelTranslationKey, item.label)}
+          >
+            {translate(item.labelTranslationKey, item.label)}
+          </MenuItemLabelText>
           {item.badges
             ?.filter(({ position }) => position !== 'before')
             .map(({ name, color, icon }) => (
@@ -308,7 +318,6 @@ const MenuItemLabelWrapper = styled.li<{
     css`
       color: ${$deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
-      font-weight: var(--menu-item-font-weight-active);
 
       ${ChevronDownIcon} path {
         fill: var(--menu-item-color-active);
@@ -386,6 +395,28 @@ const MenuItemLabel = styled.span`
   }
 `;
 
+const MenuItemLabelText = styled.span<{ $active?: boolean; $isSeparator?: boolean }>`
+  display: inline-block;
+  max-width: 100%;
+  font-weight: var(--menu-item-font-weight);
+
+  &::before {
+    content: attr(data-text);
+    display: block;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    font-weight: ${({ $isSeparator }) =>
+      $isSeparator ? 'var(--menu-item-font-weight)' : 'var(--menu-item-font-weight-active)'};
+  }
+
+  ${({ $active }) =>
+    $active &&
+    css`
+      font-weight: var(--menu-item-font-weight-active);
+    `}
+`;
+
 const SidebarTag = styled(Tag)<{ $bgColor?: string; icon?: React.ReactNode }>`
   ${({ $bgColor }) => $bgColor && `background-color: ${$bgColor};`} /* for backward compatibility */
   margin-left: 0;

package/src/components/Navbar/Navbar.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 import type { ResolvedConfigLinks } from '@redocly/config';
 
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { useThemeHooks, useThemeConfig, useMobileMenu } from '@redocly/theme/core/hooks';
 import { NavbarLogo } from '@redocly/theme/components/Navbar/NavbarLogo';
 import { NavbarMenu } from '@redocly/theme/components/Navbar/NavbarMenu';
@@ -60,11 +60,15 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
             isOpen
               ? () => {
                   closeMobileMenu();
-                  telemetry.sendMobileMenuButtonCloseClickedMessage();
+                  telemetry.sendMobileMenuClosedMessage([
+                    getBaseDataAttributes('mobileMenuClose', 'button'),
+                  ]);
                 }
               : () => {
                   openMobileMenu();
-                  telemetry.sendMobileMenuButtonOpenClickedMessage();
+                  telemetry.sendMobileMenuOpenedMessage([
+                    getBaseDataAttributes('mobileMenuOpen', 'button'),
+                  ]);
                 }
           }
           icon={isOpen ? <CloseIcon /> : <MenuIcon />}

package/src/components/Navbar/NavbarItem.tsx

@@ -12,6 +12,7 @@ import {
   getPathnameForLocale,
   withPathPrefix,
   removeTrailingSlash,
+  getBaseDataAttributes,
 } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
@@ -48,7 +49,12 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
       $active={isActive}
       className={className}
       onClick={() =>
-        telemetry.sendNavbarMenuItemClickedMessage([{ object: 'menu_item', type: item.type }])
+        telemetry.sendNavbarMenuItemClickedMessage([
+          {
+            ...getBaseDataAttributes('navbarItem', 'navbar'),
+            type: item.type,
+          },
+        ])
       }
       external={item.external}
       target={item.target}

package/src/components/Search/SearchDialog.tsx

@@ -7,7 +7,7 @@ import type { SearchFacetCount, SearchItemData } from '@redocly/theme/core/types
 import { SearchInput } from '@redocly/theme/components/Search/SearchInput';
 import { SearchShortcut } from '@redocly/theme/components/Search/SearchShortcut';
 import { Button } from '@redocly/theme/components/Button/Button';
-import { breakpoints, concatClassNames } from '@redocly/theme/core/utils';
+import { breakpoints, concatClassNames, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { Portal } from '@redocly/theme/components/Portal/Portal';
 import { SearchItem } from '@redocly/theme/components/Search/SearchItem';
 import { SearchRecent } from '@redocly/theme/components/Search/SearchRecent';
@@ -172,9 +172,8 @@ export function SearchDialog({
             addSearchHistoryItem(query);
             telemetry.sendSearchResultClickedMessage([
               {
-                object: 'search',
+                ...getBaseDataAttributes('searchResultItem', 'search', item.document.url),
                 query: query,
-                url: item.document.url,
                 totalResults: results.length.toString(),
                 index: index.toString(),
                 searchEngine: mode,
@@ -259,9 +258,7 @@ export function SearchDialog({
                           }
                           telemetry.sendSearchAiOpenedMessage([
                             {
-                              id: 'searchAiButton',
-                              object: 'search',
-                              uri: 'urn:redocly:realm:ui:search:searchAiButton',
+                              ...getBaseDataAttributes('searchAiButton', 'search'),
                               method: 'ai_search_button',
                             },
                           ]);
@@ -355,9 +352,7 @@ export function SearchDialog({
                         }
                         telemetry.sendSearchAiOpenedMessage([
                           {
-                            id: 'searchAiInput',
-                            object: 'search',
-                            uri: 'urn:redocly:realm:ui:search:searchAiInput',
+                            ...getBaseDataAttributes('searchAiInput', 'search'),
                             method: 'ai_search_input',
                           },
                         ]);
@@ -370,9 +365,7 @@ export function SearchDialog({
                           }
                           telemetry.sendSearchAiOpenedMessage([
                             {
-                              id: 'searchAiInput',
-                              object: 'search',
-                              uri: 'urn:redocly:realm:ui:search:searchAiInput',
+                              ...getBaseDataAttributes('searchAiInput', 'search'),
                               method: 'ai_search_input',
                             },
                           ]);
@@ -474,7 +467,7 @@ export function SearchDialog({
                         onSelect={(query, index) => {
                           telemetry.sendSearchRecentClickedMessage([
                             {
-                              object: 'search',
+                              ...getBaseDataAttributes('searchRecentItem', 'search'),
                               query,
                               index: index.toString(),
                               searchSessionId,

package/src/components/Search/SearchInput.tsx

@@ -9,6 +9,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { useInputKeyCommands, useRecentSearches, useThemeHooks } from '@redocly/theme/core/hooks';
 import { CloseFilledIcon } from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
 import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type SearchInputProps = {
   placeholder?: string;
@@ -51,7 +52,9 @@ export function SearchInput({
   const handleOnReset = () => {
     onChange('');
     addSearchHistoryItem(value);
-    telemetry.sendSearchInputResetButtonClickedMessage();
+    telemetry.sendSearchInputResetClickedMessage([
+      getBaseDataAttributes('searchInputReset', 'search'),
+    ]);
   };
 
   return (

package/src/components/Search/SearchRecent.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { useThemeHooks, useRecentSearches } from '@redocly/theme/core/hooks';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { RecentlyViewedIcon } from '@redocly/theme/icons/RecentlyViewedIcon/RecentlyViewedIcon';
@@ -25,7 +25,9 @@ export function SearchRecent({ onSelect, className }: SearchRecentProps): JSX.El
   const handleOnRemove = (e: React.MouseEvent<SVGSVGElement, MouseEvent>, item: string) => {
     e.stopPropagation();
     removeSearchHistoryItem(item);
-    telemetry.sendSearchRecentRemoveButtonClickedMessage();
+    telemetry.sendSearchRecentRemoveClickedMessage([
+      getBaseDataAttributes('searchRecentRemove', 'search'),
+    ]);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>, item: string, index: number) => {

package/src/components/SidebarActions/SidebarActions.tsx

@@ -11,6 +11,7 @@ import {
   ControlsWrapChangeLayoutButtons,
 } from '@redocly/theme/components/SidebarActions/styled';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export { LayoutVariant };
 
@@ -57,9 +58,13 @@ export const SidebarActions = ({
             onClick={() => {
               onChangeCollapseSidebarClick();
               if (collapsedSidebar) {
-                telemetry.sendSidebarItemExpandedMessage();
+                telemetry.sendSidebarExpandedMessage([
+                  getBaseDataAttributes('sidebarExpand', 'button'),
+                ]);
               } else {
-                telemetry.sendSidebarItemCollapsedMessage();
+                telemetry.sendSidebarCollapsedMessage([
+                  getBaseDataAttributes('sidebarCollapse', 'button'),
+                ]);
               }
             }}
             size="small"
@@ -76,7 +81,9 @@ export const SidebarActions = ({
             layout={layout}
             onClick={() => {
               onChangeViewClick();
-              telemetry.sendChangeLayoutButtonClickedMessage();
+              telemetry.sendChangeLayoutClickedMessage([
+                getBaseDataAttributes('changeLayout', 'button'),
+              ]);
             }}
           />
         </ControlsWrapChangeLayoutButtons>

package/src/components/TableOfContent/TableOfContent.tsx

@@ -10,7 +10,12 @@ import {
   useThemeConfig,
   useFullHeight,
 } from '@redocly/theme/core/hooks';
-import { breakpoints, getDisplayedHeadings, getLeastDepth } from '@redocly/theme/core/utils';
+import {
+  breakpoints,
+  getDisplayedHeadings,
+  getLeastDepth,
+  getBaseDataAttributes,
+} from '@redocly/theme/core/utils';
 
 export type TableOfContentProps = {
   headings?: Array<MdHeading | null> | null | undefined;
@@ -62,7 +67,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
               data-testid={`toc-${heading.value}`}
               onClick={(e) => {
                 e.preventDefault();
-                telemetry.sendTocItemClickedMessage();
+                telemetry.sendTocItemClickedMessage([getBaseDataAttributes('tocItem', 'toc')]);
                 handleHeadingClick(heading.id);
               }}
             />

package/src/components/UserMenu/LoginButton.tsx

@@ -4,6 +4,7 @@ import type { ButtonVariant, ButtonSize } from '@redocly/theme/components/Button
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type LoginButtonProps = {
   href: string;
@@ -36,7 +37,9 @@ export function LoginButton({
         data-translation-key={label ? undefined : labelTranslationKey}
         to={href}
         languageInsensitive
-        onClick={() => telemetry.sendLoginButtonClickedMessage()}
+        onClick={() =>
+          telemetry.sendLoginClickedMessage([getBaseDataAttributes('login', 'button')])
+        }
         data-testid="login-btn"
         extraClass={className}
         variant={variant}

package/src/components/UserMenu/LogoutMenuItem.tsx

@@ -5,6 +5,7 @@ import type { JSX } from 'react';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LogoutIcon } from '@redocly/theme/icons/LogoutIcon/LogoutIcon';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type LogoutMenuItemProps = {
   iconOnly?: boolean;
@@ -18,7 +19,7 @@ export function LogoutMenuItem({ iconOnly, className }: LogoutMenuItemProps): JS
   const { translate } = useTranslate();
 
   const handleClick = () => {
-    telemetry.sendLogoutMenuItemClickedMessage();
+    telemetry.sendLogoutClickedMessage([getBaseDataAttributes('logoutItem', 'userMenu')]);
     handleLogout();
   };
 

package/src/core/hooks/search/use-search-dialog.ts

@@ -5,6 +5,7 @@ import hotkeys from 'hotkeys-js';
 import { useThemeHooks } from '../use-theme-hooks';
 import { useThemeConfig } from '../use-theme-config';
 import { useSearchSession } from '../../contexts';
+import { getBaseDataAttributes } from '../../utils';
 
 export function useSearchDialog() {
   const [isOpen, setIsOpen] = useState(false);
@@ -20,7 +21,12 @@ export function useSearchDialog() {
     if (hotKeys) {
       hotkeys(hotKeys, (ev) => {
         setIsOpen(true);
-        telemetry.sendSearchOpenedMessage([{ object: 'search', method: 'shortcut' }]);
+        telemetry.sendSearchOpenedMessage([
+          {
+            ...getBaseDataAttributes('searchDialogId', 'search'),
+            method: 'shortcut',
+          },
+        ]);
         ev.preventDefault();
       });
 
@@ -30,7 +36,12 @@ export function useSearchDialog() {
   }, [hotKeys]);
 
   const onOpen = useCallback(function () {
-    telemetry.sendSearchOpenedMessage([{ object: 'search', method: 'click' }]);
+    telemetry.sendSearchOpenedMessage([
+      {
+        ...getBaseDataAttributes('searchDialogId', 'search'),
+        method: 'click',
+      },
+    ]);
     setIsOpen(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/src/core/hooks/use-banner-telemetry.ts

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import type { DisplayBanner } from '@redocly/theme/components/Banner/Banner';
 
 import { useThemeHooks } from './use-theme-hooks';
+import { getBaseDataAttributes } from '../utils/telemetry/get-base-data-attributes';
 
 const noop = (): void => {};
 const noopLink = (_href: string): void => {};
@@ -28,11 +29,11 @@ export function useBannerTelemetry(
       };
     }
 
-    const bannerUri = 'urn:redocly:realm:ui:banner:banner-id';
     const payload = {
-      id: 'banner-id' as const,
-      object: 'banner' as const,
-      uri: bannerUri,
+      ...getBaseDataAttributes<'bannerId', 'banner', 'urn:redocly:realm:ui:banner:bannerId'>(
+        'bannerId',
+        'banner',
+      ),
       trackingId: displayBanner.trackingId,
       hash: displayBanner.hash,
       color: displayBanner.color,

package/src/core/hooks/use-color-switcher.ts

@@ -6,6 +6,7 @@ import { useThemeConfig } from './use-theme-config';
 import { useThemeHooks } from './use-theme-hooks';
 import { createStore, useStore } from './use-store';
 import { DEFAULT_COLOR_MODES } from '../constants';
+import { generateBeforeAfterContext } from '../utils';
 
 const COLOR_MODE_KEY = 'colorSchema';
 const colorModeStore = createStore<string>({
@@ -51,7 +52,12 @@ export const useColorSwitcher = () => {
       root.classList.remove('notransition');
     });
     telemetry.sendColorModeSwitchedMessage([
-      { object: 'color_mode', from: activeColorMode, to: newMode },
+      ...generateBeforeAfterContext<'sendColorModeSwitchedMessage'>(
+        'colorMode',
+        'button',
+        { mode: activeColorMode },
+        { mode: newMode },
+      ),
     ]);
     setActiveColorMode(newMode);
   };